/* =============================================================
   Payment Trust Signals — compact variant
   Scoped to .payment-trust (payment-trust-signals.blade.php).

   Design goals:
     - Preserve "Pay Now" above-the-fold on desktop and 1-scroll on mobile.
     - Minimal visual chrome: no big card, just a subtle outlined band.
     - Chips sit inline on desktop (single row) and 2x2 grid on mobile.
     - Guarantee line is a single short sentence.

   Heights target:
     ~  55px desktop  ·  ~70px tablet  ·  ~110px mobile
   ============================================================= */

.payment-trust {
    margin: 0.85vw 0 0.85vw;
    padding: 0.65vw 0.9vw;
    background: #f8fbff;
    border: 1px solid #d4e5f4;
    border-radius: 0.5vw;
}

.payment-trust__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5vw 1.4vw;
    list-style: none;
    padding: 0;
    margin: 0;
}

.payment-trust__chip {
    display: flex;
    align-items: center;
    gap: 0.4vw;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    transition: none;
}

.payment-trust__chip:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
}

.payment-trust__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7vw;
    height: 1.7vw;
    min-width: 24px;
    min-height: 24px;
    border-radius: 50%;
    background: rgba(2, 108, 182, 0.10);
    color: var(--theme-btn-color, #026CB6);
    flex-shrink: 0;
}

.payment-trust__icon svg {
    width: 60%;
    height: 60%;
}

.payment-trust__icon--star {
    background: rgba(245, 176, 26, 0.14);
    color: #F5B01A;
}

.payment-trust__icon--lock {
    background: rgba(40, 167, 69, 0.12);
    color: #1e8a3b;
}

.payment-trust__text {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 0.3vw;
    line-height: 1.25;
    min-width: 0;
}

.payment-trust__text strong {
    font-size: 0.95vw;
    font-weight: 700;
    color: #0f2a43;
    white-space: nowrap;
}

.payment-trust__text span {
    font-size: 0.8vw;
    font-weight: 500;
    color: #52667a;
    white-space: nowrap;
}

.payment-trust__guarantee {
    display: flex;
    align-items: center;
    gap: 0.4vw;
    margin: 0.55vw 0 0;
    padding: 0.55vw 0 0;
    border-top: 1px dashed #d4e5f4;
    font-size: 0.8vw;
    line-height: 1.35;
    color: #3a4a5c;
}

.payment-trust__guarantee strong {
    color: #0f2a43;
    font-weight: 700;
}

.payment-trust__guarantee-icon {
    width: 1vw;
    height: 1vw;
    min-width: 16px;
    min-height: 16px;
    color: #1e8a3b;
    flex-shrink: 0;
}

/* ---------- Accepted-payment brand logos ----------
   Razorpay / VISA / Paytm / MasterCard strip rendered inside the trust
   signals card so it's ALWAYS visible on both desktop and mobile. On
   desktop, the sticky Pay-Now pill hides its own .payment_icon strip
   (theme CSS fights our overrides there), so these logos in the trust
   card are the user's sole point of brand reassurance at checkout. */
.payment-trust__brands {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 1.2vw;
    margin-top: 0.55vw;
    padding-top: 0.55vw;
    border-top: 1px dashed #d4e5f4;
}
.payment-trust__brand-img {
    height: 1.4vw;
    min-height: 20px;
    width: auto;
    max-width: 72px;
    object-fit: contain;
    opacity: 0.92;
}

/* ---------- Tablet: below 1199px ---------- */
@media (max-width: 1199px) {
    .payment-trust {
        margin: 12px 0;
        padding: 10px 12px;
        border-radius: 8px;
    }
    .payment-trust__chips {
        gap: 8px 18px;
    }
    .payment-trust__chip {
        gap: 8px;
    }
    .payment-trust__icon {
        width: 28px;
        height: 28px;
    }
    .payment-trust__text strong {
        font-size: 13px;
    }
    .payment-trust__text span {
        font-size: 12px;
    }
    .payment-trust__guarantee {
        gap: 6px;
        margin-top: 8px;
        padding-top: 8px;
        font-size: 12px;
    }
    .payment-trust__guarantee-icon {
        width: 16px;
        height: 16px;
    }
    .payment-trust__brands {
        gap: 18px;
        margin-top: 8px;
        padding-top: 8px;
    }
    .payment-trust__brand-img {
        height: 20px;
        max-width: 64px;
    }
}

/* ---------- Mobile: below 767px — 2x2 grid ---------- */
@media (max-width: 767px) {
    .payment-trust {
        margin: 10px 0;
        padding: 10px 12px;
    }
    .payment-trust__chips {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 14px;
    }
    .payment-trust__chip {
        gap: 8px;
        flex: none;
    }
    .payment-trust__icon {
        width: 26px;
        height: 26px;
        min-width: 26px;
        min-height: 26px;
    }
    .payment-trust__text strong {
        font-size: 12px;
    }
    .payment-trust__text span {
        font-size: 11px;
    }
    .payment-trust__guarantee {
        font-size: 11px;
        line-height: 1.4;
    }
    .payment-trust__brands {
        gap: 14px;
        margin-top: 8px;
        padding-top: 8px;
    }
    .payment-trust__brand-img {
        height: 18px;
        max-width: 56px;
    }
}

/* ---------- Small mobile: below 360px — still 2x2, tighter ---------- */
@media (max-width: 359px) {
    .payment-trust__chips {
        gap: 6px 10px;
    }
    .payment-trust__icon {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
    }
    .payment-trust__text strong {
        font-size: 11px;
    }
    .payment-trust__text span {
        font-size: 10px;
    }
    .payment-trust__brands {
        gap: 10px;
    }
    .payment-trust__brand-img {
        height: 16px;
        max-width: 48px;
    }
}

/* =============================================================
   Pay Now amount pill
   -------------------------------------------------------------
   Shows the selected total (e.g. "₹ 599") right on the Pay Now
   button, so the price is always visible on the sticky CTA —
   important when the pricing table has been scrolled off-screen.
   Hidden (:empty) until JS populates it from the selected radio.
   ============================================================= */
.theme-btn .theme-btn__amount {
    display: inline-block !important;
    position: relative;
    z-index: 2;
    color: inherit;
}
.theme-btn .theme-btn__amount:not(:empty) {
    margin-left: 0.55em !important;
    padding: 0.08em 0.65em !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* =============================================================
   Pay Now bar behavior on Step 3
   -------------------------------------------------------------
   Mobile (<=991px):
     Step 3 content (pricing + trust chips + Pay Now) fits in a
     single viewport, so we render Pay Now INLINE right below the
     trust signals — no fixed bar, no dead whitespace. Brand strip
     sits above the button, button is full-width + prominent.

   Desktop (>=992px):
     Compact 580px floating pill, aligned with the FORM column's
     center (not the viewport center). The sidebar on the right
     (col-sm-3) shifts the form column's center ~140px LEFT of the
     viewport center; we offset translateX to match.

   NOTE: Rules are prefixed with `html body` + `!important` so they
   always win against the theme's own layout CSS.
   ============================================================= */

/* ---------- Mobile (<=991px): INLINE Pay Now (no fixed bar) ----------
   Step 3 content fits in one viewport on mobile, so a fixed sticky
   bar creates ~300px of dead whitespace between the trust signals
   and the bar. Instead we render the pay row inline right below the
   trust signals, matching Step 1/2 behavior. Brand strip sits above
   the button, button is full-width + prominent. */
@media (max-width: 991px) {
    html body .form_row.form_step_3:not(.hide) .form_action_wrap {
        position: static !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        margin: 0.8rem 0 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        z-index: auto !important;
    }

    html body .form_row.form_step_3:not(.hide) .form_action_wrap .form_action {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* Hide the original brand strip above the Pay Now button on mobile —
       the same logos now live inside the trust signals card (always
       visible), so showing them here would duplicate the row. */
    html body .form_row.form_step_3:not(.hide) .form_action_wrap .payment_icon {
        display: none !important;
    }

    /* Pay Now — full-width, big, impossible-to-miss primary CTA. */
    html body .form_row.form_step_3:not(.hide) .form_action_wrap .theme-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 14px 24px !important;
        font-size: 17px !important;
        white-space: nowrap !important;
        order: 2 !important;
    }
}

/* ---------- Desktop (>=992px): compact Pay-Now-only floating pill ----------
   Previous iterations tried to keep the Razorpay/VISA/Paytm/MasterCard
   brand strip inline next to the Pay Now button inside the pill, but
   the theme's own `.payment_icon` styling (width: 100%, wrapper boxes)
   kept fighting our overrides — producing either a stacked layout or
   a full-width stretched bar.

   Simpler, robust fix: hide the brand strip entirely within the sticky
   pill. Brand reassurance is already covered by the "Secure Payment ·
   Razorpay · 256-bit SSL" chip in the trust signals card directly
   above the pricing table. The sticky pill only needs ONE job:
   show the primary Pay Now CTA with the selected total. */
@media (min-width: 992px) {
    html body .form_row.form_step_3:not(.hide) .form_action_wrap {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        bottom: 24px !important;
        top: auto !important;
        /* Form column (col-sm-9) is shifted LEFT of viewport center by the
           right sidebar (col-sm-3). Offset ~140px left so the pill sits
           under the pricing table, not under the sidebar. */
        transform: translateX(calc(-50% - 140px)) !important;
        width: auto !important;
        max-width: 460px !important;
        margin: 0 !important;
        padding: 8px !important;
        background: #ffffff !important;
        border: 1px solid #e3ecf5 !important;
        border-radius: 999px !important;
        box-shadow: 0 14px 34px rgba(15, 42, 67, 0.22) !important;
        z-index: 90 !important;
    }

    html body .form_row.form_step_3:not(.hide) .form_action_wrap .form_action {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        margin: 0 !important;
        width: auto !important;
    }

    /* Hide the brand strip inside the sticky pill — already shown in
       the trust signals card above, no need to duplicate. */
    html body .form_row.form_step_3:not(.hide) .form_action_wrap .payment_icon {
        display: none !important;
    }

    html body .form_row.form_step_3:not(.hide) .form_action_wrap .theme-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 auto !important;
        margin: 0 !important;
        padding: 18px 56px !important;
        white-space: nowrap !important;
        border-radius: 999px !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        letter-spacing: 0.01em !important;
        width: 100% !important;
    }

    /* Boost the amount pill a touch so it balances the bigger button. */
    html body .form_row.form_step_3:not(.hide) .form_action_wrap .theme-btn .theme-btn__amount:not(:empty) {
        margin-left: 0.7em !important;
        padding: 0.12em 0.8em !important;
        font-size: 0.95em !important;
    }

    /* Reserve space below Step 3 content so Why Choose sidebar isn't
       hidden behind the floating pill. */
    html body .form_row.form_step_3:not(.hide) {
        padding-bottom: 130px !important;
    }
}

/* Narrow desktops (992-1399px) have a narrower sidebar, so -140px offset
   pushes the pill too far left. Use a smaller offset there. */
@media (min-width: 992px) and (max-width: 1399px) {
    html body .form_row.form_step_3:not(.hide) .form_action_wrap {
        transform: translateX(calc(-50% - 100px)) !important;
    }
}

/* ---------- WhatsApp float button: hide on Step 3 (both viewports) ----------
   At checkout, the WhatsApp float button was overlapping the Pay Now
   CTA area on mobile, and competing for attention on desktop. User is
   already mid-conversion — if they need help they've had Steps 1 and
   2 to reach out. Hide the widget entirely on Step 3 so nothing
   visually competes with the primary Pay Now CTA. */
html body:has(.form_row.form_step_3:not(.hide)) .whatsapp-widget {
    display: none !important;
}