/**
 * OEM ASTRA J — PHASE M-PART HELP
 * Minimal mobile help card (≤900px).
 * Desktop .cta-strip unchanged via home-premium.css.
 * WhatsApp openWhatsApp() preserved — UI only.
 */

.mob-v2-help {
  display: none;
}

@media (max-width: 900px) {
  /* Beat home-premium + mobile-home dark cta-strip shell */
  body.is-home-page .mob-home-feed > .cta-strip,
  body.is-home-page .mob-home-feed .cta-strip,
  body.is-home-page .cta-strip {
    --mob-v2-help-blue: #1f5dbf;
    --mob-v2-help-title: #102348;
    --mob-v2-help-muted: #667085;
    --mob-v2-help-border: #e6ecf5;
    --mob-v2-help-surface: #ffffff;
    --mob-v2-help-page: #f8fafc;
    --mob-v2-help-wa: #25d366;
    background: var(--mob-v2-help-page) !important;
    background-color: var(--mob-v2-help-page) !important;
    border: none !important;
    border-top: none !important;
    box-shadow: none !important;
    padding: 0 0 16px !important;
    margin: 0 !important;
    margin-inline: 0 !important;
    width: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  body.is-home-page .cta-strip > .cta-inner {
    display: none !important;
  }

  body.is-home-page .mob-v2-help {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: auto;
    margin: 0 16px 16px;
    padding: 20px;
    min-height: 115px;
    max-height: none;
    border-radius: 22px;
    background: var(--mob-v2-help-surface);
    border: 1px solid var(--mob-v2-help-border);
    box-shadow: 0 8px 24px rgba(15, 35, 72, 0.05);
    box-sizing: border-box;
  }

  body.is-home-page .mob-v2-help-body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-height: 0;
  }

  body.is-home-page .mob-v2-help-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #1e5bb8;
    border: none;
    color: #ffffff;
    box-sizing: border-box;
  }

  body.is-home-page .mob-v2-help-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
  }

  body.is-home-page .mob-v2-help-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  body.is-home-page .mob-v2-help-title {
    margin: 0;
    font-family: var(--font-en, "Segoe UI", sans-serif);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--mob-v2-help-title);
  }

  html[dir="rtl"] body.is-home-page .mob-v2-help-title {
    font-family: var(--font-ar, Cairo, sans-serif);
  }

  body.is-home-page .mob-v2-help-sub {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--mob-v2-help-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  html[dir="rtl"] body.is-home-page .mob-v2-help-sub {
    font-family: var(--font-ar, Cairo, sans-serif);
  }

  body.is-home-page .mob-v2-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    min-height: 46px;
    margin: 0;
    padding: 0 16px;
    border: none;
    border-radius: 16px;
    background: var(--mob-v2-help-wa);
    color: #ffffff;
    font-family: var(--font-en, "Segoe UI", sans-serif);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    transition: transform 250ms ease, background-color 250ms ease;
  }

  html[dir="rtl"] body.is-home-page .mob-v2-help-btn {
    font-family: var(--font-ar, Cairo, sans-serif);
  }

  body.is-home-page .mob-v2-help-btn-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    fill: currentColor;
  }

  body.is-home-page .mob-v2-help-btn:active {
    transform: scale(0.98);
    background: #20bd5a;
  }

  @media (hover: hover) and (pointer: fine) {
    body.is-home-page .mob-v2-help-btn:hover {
      background: #20bd5a;
    }
  }

  body.is-home-page .mob-v2-help-btn:focus-visible {
    outline: 2px solid var(--mob-v2-help-wa);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    body.is-home-page .mob-v2-help-btn {
      transition: none;
    }

    body.is-home-page .mob-v2-help-btn:active {
      transform: none;
    }
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  body.is-home-page .mob-v2-help {
    margin-inline: 20px;
  }
}