/**
 * BENEFIT checkout — checkout-page overlay styles (v5.9.1).
 *
 * The "Scan to Pay" dialog that pops up ON TOP of the WooCommerce checkout
 * page after the AJAX "Place order" (fragment-only redirect — no page
 * load, no popup window).
 *
 * Every rule is scoped under .benefit-overlay so the checkout page's theme
 * styles are never touched: the plugin's own benefit-popup.css (used by
 * the standalone ?wc-api=benefit_popup screen) is NOT loaded on checkout
 * pages — its global resets would fight the theme. Mobile-first,
 * RTL-safe, no external fonts, no blue/indigo hues.
 */

/* The dimmed full-screen layer (fixed, above everything the theme renders). */
.benefit-overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 99999;
}

.benefit-overlay-backdrop {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(28, 25, 23, 0.6);
}

.benefit-overlay-scroll {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        display: flex;
        padding: 16px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        color: #1c1917;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
}

/* ---- The dialog card (mirrors the standalone screen) ------------------- */

/* v5.9.1 — compact defaults. The dialog used to be very tall (232px QR +
 * generous spacing); it is now a short beat on the checkout page:
 * tighter paddings/margins and a 180px default QR. The QR size is the
 * --benefit-qr-size custom property — the server prints it per order
 * ("QR Code Size" gateway setting) and the JS sets it on the card. */
.benefit-overlay .benefit-popup-card {
        --benefit-qr-size: 180px;
        width: 100%;
        max-width: 400px;
        /* margin:auto centers the card when there is room AND keeps it fully
         * scrollable when the dialog is taller than the viewport (align-items:
         * center on the scroll container would clip the unreachable top). */
        margin: auto;
        background: #ffffff;
        border: 1px solid #e7e5e4;
        border-radius: 18px;
        box-shadow: 0 24px 60px -24px rgba(28, 25, 23, 0.4);
        padding: 22px 20px 16px;
        text-align: center;
        outline: none;
}

.benefit-overlay .benefit-popup-card:focus-visible {
        outline: 3px solid #10b981;
        outline-offset: 2px;
}

.benefit-overlay .benefit-popup-card-narrow {
        max-width: 340px;
}

/* ---- Header ------------------------------------------------------------- */

.benefit-overlay .benefit-popup-head {
        margin-bottom: 14px;
}

.benefit-overlay .benefit-popup-logo {
        display: block;
        margin: 0 auto 10px;
        max-width: 116px;
        width: 100%;
        height: auto;
}

.benefit-overlay .benefit-popup-head h1 {
        margin: 0 0 6px;
        font-size: 1.4rem;
        font-weight: 800;
        letter-spacing: -0.02em;
}

.benefit-overlay .benefit-popup-sub {
        margin: 0;
        color: #57534e;
        font-size: 0.88rem;
}

/* ---- Summary -------------------------------------------------------------- */

.benefit-overlay .benefit-popup-summary {
        list-style: none;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        margin: 0 0 14px;
        padding: 0;
}

.benefit-overlay .benefit-popup-summary li {
        background: #fafaf9;
        border: 1px solid #e7e5e4;
        border-radius: 10px;
        padding: 7px 6px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
}

.benefit-overlay .benefit-popup-summary span {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #78716c;
}

.benefit-overlay .benefit-popup-summary strong {
        font-size: 0.92rem;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}

/* ---- Status ----------------------------------------------------------------- */

.benefit-overlay .benefit-popup-status {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 0 0 10px;
        padding: 10px 12px;
        border-radius: 10px;
        font-weight: 600;
        font-size: 0.92rem;
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
        color: #065f46;
}

.benefit-overlay .benefit-popup-status.benefit-is-paid      { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.benefit-overlay .benefit-popup-status.benefit-is-cancelled { background: #fefce8; border-color: #fde68a; color: #854d0e; }
.benefit-overlay .benefit-popup-status.benefit-is-failed,
.benefit-overlay .benefit-popup-status.benefit-is-error,
.benefit-overlay .benefit-popup-status.benefit-is-blocked   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.benefit-overlay .benefit-popup-status.benefit-is-expired,
.benefit-overlay .benefit-popup-status.benefit-is-closed    { background: #fafaf9; border-color: #e7e5e4; color: #57534e; }

/* v5.9.2 — the bouncing dots mean "actively working on it". Once the flow
 * has an answer (cancelled / failed / expired / paid …) they must stop —
 * an endless loop next to a final message reads as "still stuck". */
.benefit-overlay .benefit-popup-status:not(.benefit-is-waiting) .benefit-popup-dots {
        display: none;
}

.benefit-overlay .benefit-popup-dots {
        display: inline-flex;
        gap: 4px;
}

.benefit-overlay .benefit-popup-dots i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
        opacity: 0.35;
        animation: benefit-overlay-bounce 1.2s infinite ease-in-out;
}

.benefit-overlay .benefit-popup-dots i:nth-child(2) { animation-delay: 0.18s; }
.benefit-overlay .benefit-popup-dots i:nth-child(3) { animation-delay: 0.36s; }

@keyframes benefit-overlay-bounce {
        0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
        40%           { transform: translateY(-4px); opacity: 1; }
}

/* ---- The payment QR --------------------------------------------------------- */

.benefit-overlay .benefit-popup-qrbox {
        margin: 0 0 12px;
        border: 1px solid #e7e5e4;
        border-radius: 10px;
        background: #ffffff;
        padding: 10px;
        text-align: center;
}

.benefit-overlay .benefit-popup-qrbox[hidden] { display: none; }

.benefit-overlay .benefit-popup-qrhint {
        margin: 0;
        color: #78716c;
        font-size: 0.75rem;
        line-height: 1.4;
}

.benefit-overlay .benefit-popup-qr {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2px 0 8px;
}

/* Size from the "QR Code Size" setting — see the card's custom property. */
.benefit-overlay .benefit-popup-qr svg {
        width: var(--benefit-qr-size, 180px);
        height: var(--benefit-qr-size, 180px);
        max-width: 100%;
        background: #ffffff;
        border: 1px solid #e7e5e4;
        border-radius: 8px;
}

/* ---- "Continues to the gateway" countdown ------------------------------------- */

.benefit-overlay .benefit-qr-redirect {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px 10px;
        margin: 0 0 10px;
        color: #78716c;
        font-size: 0.8rem;
}

.benefit-overlay .benefit-qr-redirect[hidden] { display: none; }

.benefit-overlay .benefit-qr-keep {
        border: 0;
        padding: 0;
        background: none;
        color: #059669;
        font-size: 0.82rem;
        font-weight: 600;
        text-decoration: underline;
        cursor: pointer;
}

.benefit-overlay .benefit-qr-keep:focus-visible {
        outline: 3px solid #10b981;
        outline-offset: 2px;
        border-radius: 2px;
}

/* ---- Timer -------------------------------------------------------------------- */

.benefit-overlay .benefit-popup-timer {
        margin: 0 0 10px;
        color: #78716c;
        font-size: 0.8rem;
}

.benefit-overlay .benefit-popup-timer[hidden] { display: none; }

.benefit-overlay .benefit-popup-countdown {
        font-weight: 700;
        color: #44403c;
        font-variant-numeric: tabular-nums;
}

/* ---- Buttons -------------------------------------------------------------------- */

.benefit-overlay .benefit-popup-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0 0 4px;
}

.benefit-overlay .benefit-popup-actions[hidden] { display: none; }

.benefit-overlay .benefit-popup-btn {
        display: inline-block;
        border-radius: 10px;
        padding: 11px 16px;
        font-size: 0.95rem;
        font-weight: 700;
        text-decoration: none;
        cursor: pointer;
        border: 1px solid transparent;
        transition: transform 0.08s ease, box-shadow 0.15s ease, background-color 0.15s ease;
        font-family: inherit;
}

.benefit-overlay .benefit-popup-btn:focus-visible {
        outline: 3px solid #10b981;
        outline-offset: 2px;
}

.benefit-overlay .benefit-popup-btn-primary {
        background: #059669;
        color: #ffffff;
        box-shadow: 0 12px 24px -12px rgba(5, 150, 105, 0.65);
}

.benefit-overlay .benefit-popup-btn-primary:hover,
.benefit-overlay .benefit-popup-btn-primary:focus {
        background: #047857;
        color: #ffffff;
}

.benefit-overlay .benefit-popup-btn-primary:active { transform: translateY(1px); }

.benefit-overlay .benefit-popup-btn-secondary {
        background: #ffffff;
        color: #44403c;
        border-color: #d6d3d1;
}

.benefit-overlay .benefit-popup-btn-secondary:hover,
.benefit-overlay .benefit-popup-btn-secondary:focus {
        background: #fafaf9;
        color: #1c1917;
}

/* ---- Footer ------------------------------------------------------------------------ */

.benefit-overlay .benefit-popup-foot {
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid #f5f5f4;
        color: #78716c;
        font-size: 0.75rem;
}

/* ---- The page notice left behind after the dialog closes ------------------------------ */

.benefit-overlay-notice.woocommerce-message {
        margin: 0 0 1.5em;
}

/* ---- Order receipt / success popup (v5.9.5) ---------------------------------------------
 *
 * The AJAX success card the dialog swaps to when the payment lands: order
 * meta rows, the items list (its own scroll box so a 20-line order never
 * grows the dialog unbounded), totals, payment + transaction references,
 * then "Continue" / "Print receipt".
 */

.benefit-overlay .benefit-receipt-card { text-align: left; }

.benefit-overlay .benefit-receipt-card .benefit-popup-head,
.benefit-overlay .benefit-receipt-card .benefit-popup-status { text-align: center; }

.benefit-overlay .benefit-receipt-meta {
        list-style: none;
        display: grid;
        gap: 6px;
        margin: 0 0 12px;
        padding: 0;
}

.benefit-overlay .benefit-receipt-meta li {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        background: #fafaf9;
        border: 1px solid #e7e5e4;
        border-radius: 8px;
        padding: 8px 12px;
        min-width: 0;
}

.benefit-overlay .benefit-receipt-meta span {
        color: #78716c;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        white-space: nowrap;
}

.benefit-overlay .benefit-receipt-meta strong {
        font-size: 0.88rem;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}

.benefit-overlay .benefit-receipt-items {
        margin: 0 0 12px;
        border: 1px solid #e7e5e4;
        border-radius: 10px;
        overflow: hidden;
}

.benefit-overlay .benefit-receipt-items-head {
        margin: 0;
        padding: 8px 12px;
        background: #fafaf9;
        border-bottom: 1px solid #e7e5e4;
        color: #78716c;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
}

/* Long orders scroll inside the box — the dialog never grows unbounded. */
.benefit-overlay .benefit-receipt-items-list {
        max-height: 192px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #d6d3d1 transparent;
}

.benefit-overlay .benefit-receipt-items-list::-webkit-scrollbar { width: 8px; }
.benefit-overlay .benefit-receipt-items-list::-webkit-scrollbar-thumb { background: #d6d3d1; border-radius: 4px; }

.benefit-overlay .benefit-receipt-item {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 12px;
        border-bottom: 1px solid #f5f5f4;
        font-size: 0.88rem;
}

.benefit-overlay .benefit-receipt-item:last-child { border-bottom: 0; }

.benefit-overlay .benefit-receipt-item-name {
        color: #1c1917;
        min-width: 0;
        overflow-wrap: break-word;
}

.benefit-overlay .benefit-receipt-item-qty {
        color: #78716c;
        font-size: 0.78rem;
        white-space: nowrap;
}

.benefit-overlay .benefit-receipt-item-total {
        font-weight: 600;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
}

.benefit-overlay .benefit-receipt-totals {
        list-style: none;
        margin: 0 0 12px;
        padding: 0;
        display: grid;
        gap: 4px;
}

.benefit-overlay .benefit-receipt-totals li,
.benefit-overlay .benefit-receipt-pay li {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 2px 2px;
        font-size: 0.86rem;
        color: #57534e;
}

.benefit-overlay .benefit-receipt-totals strong,
.benefit-overlay .benefit-receipt-pay strong {
        font-variant-numeric: tabular-nums;
        color: #1c1917;
        text-align: right;
}

.benefit-overlay .benefit-receipt-totals .benefit-receipt-grand {
        margin-top: 4px;
        padding-top: 8px;
        border-top: 1px solid #e7e5e4;
        font-size: 0.98rem;
        color: #1c1917;
        font-weight: 600;
}

.benefit-overlay .benefit-receipt-grand strong { font-weight: 800; color: #065f46; }

.benefit-overlay .benefit-receipt-pay {
        list-style: none;
        margin: 0 0 12px;
        padding: 8px 12px;
        display: grid;
        gap: 4px;
        border: 1px dashed #e7e5e4;
        border-radius: 10px;
}

.benefit-overlay .benefit-receipt-pay li { font-size: 0.82rem; color: #78716c; padding: 0; }

.benefit-overlay .benefit-receipt-pay strong { color: #44403c; font-weight: 600; }

.benefit-overlay .benefit-receipt-thanks {
        margin: 0 0 6px;
        color: #57534e;
        font-size: 0.88rem;
        text-align: center;
}

.benefit-overlay .benefit-receipt-print-hint {
        margin: 0 0 8px;
        color: #78716c;
        font-size: 0.75rem;
        text-align: center;
}

.benefit-overlay .benefit-receipt-actions { margin: 0 0 4px; }

/* The receipt as a clean printable invoice (v5.9.5): the body class the
 * receipt adds hides the whole checkout page (the overlay is the only
 * direct child left visible), the backdrop disappears and the card
 * prints static, full-width, no buttons. Only applied while the receipt
 * is the active card — printing the checkout page at any other moment
 * stays untouched. */
@media print {
        body.benefit-receipt-open > *:not(.benefit-overlay) { display: none !important; }

        body.benefit-receipt-open .benefit-overlay {
                position: static;
                background: #ffffff;
        }

        body.benefit-receipt-open .benefit-overlay-backdrop { display: none !important; }

        body.benefit-receipt-open .benefit-overlay-scroll {
                position: static;
                overflow: visible;
                padding: 0;
                display: block;
        }

        body.benefit-receipt-open .benefit-popup-card {
                box-shadow: none;
                border: 0;
                max-width: 520px;
                margin: 0 auto;
        }

        body.benefit-receipt-open .benefit-receipt-actions,
        body.benefit-receipt-open .benefit-receipt-print-hint,
        body.benefit-receipt-open .benefit-popup-dots,
        body.benefit-receipt-open .benefit-popup-logo { display: none !important; }

        body.benefit-receipt-open .benefit-receipt-items-list {
                max-height: none;
                overflow: visible;
        }

        body.benefit-receipt-open .benefit-receipt-pay { border-style: solid; }
}

/* ---- Small screens ----------------------------------------------------------------------- */

@media (max-width: 420px) {
        .benefit-overlay .benefit-popup-card { padding: 18px 14px 14px; }

        .benefit-overlay .benefit-popup-head h1 { font-size: 1.25rem; }

        .benefit-overlay .benefit-popup-summary { grid-template-columns: 1fr; }

        .benefit-overlay .benefit-receipt-item-name { font-size: 0.84rem; }

        .benefit-overlay .benefit-receipt-meta strong { font-size: 0.82rem; }
}

/* ---- Reduced motion ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
        .benefit-overlay .benefit-popup-dots i { animation: none; opacity: 0.6; }

        .benefit-overlay .benefit-popup-btn { transition: none; }
}