/**
 * OzuPay Checkout — Payment Modal & Deposit Summary
 * @package OzuPay
 */

/* ── Design Tokens (used by sticky bar, pay prompt, and non-modal components) ── */
:root {
    --ozp-green:    #00A651;
    --ozp-green-d:  #00883F;
    --ozp-green-12: rgba(0,166,81,.12);
    --ozp-green-25: rgba(0,166,81,.25);
    --ozp-red:      #EF4444;
    --ozp-red-12:   rgba(239,68,68,.12);
    /* dark tokens used by sticky bar only */
    --ozp-bg-1:     #0F172A;
    --ozp-bg-3:     #162032;
    --ozp-bg-4:     #1B2433;
    --ozp-t0:       #F0F4F8;
    --ozp-t1:       #CBD5E1;
    --ozp-t2:       #94A3B8;
    --ozp-t3:       #64748B;
    --ozp-b:        rgba(255,255,255,.07);
    --ozp-b2:       rgba(255,255,255,.12);
    --ozp-r:        10px;
    --ozp-r-s:      6px;
    --ozp-r-l:      14px;
}

/* ── Deposit Summary (checkout page, before modal) ───────────────────────── */

.ozupay-deposit-summary {
    margin: 12px 0;
    padding: 12px;
    /* !important + solid background (not the translucent --ozp-green-12
       tint): this box's dark text is only legible against an opaque light
       background. A translucent tint composites with whatever sits behind
       it, so on a checkout theme with a dark page background (by design,
       not a "dark mode" override) the tint renders near-black and the text
       becomes unreadable regardless of !important — confirmed live on the
       demo site's own intentionally-dark checkout theme. */
    background: #ECFDF3 !important;
    border: 1px solid var(--ozp-green-25) !important;
    border-radius: var(--ozp-r-s);
    font-size: 14px;
    color: #111827 !important;
}

.ozupay-deposit-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 8px;
}

.ozupay-deposit-table td {
    padding: 6px 4px;
    color: #374151 !important;
}

.ozupay-deposit-table td:last-child {
    text-align: right;
    font-weight: 600;
    color: #111827 !important;
}

.ozupay-checkout-notice {
    margin: 8px 0 0;
    font-size: 12px;
    color: #555;
    font-style: italic;
}

.ozupay-cod-no-deposit-notice {
    margin: 12px 0;
    padding: 12px;
    /* !important + solid background — see .ozupay-deposit-summary above:
       the translucent --ozp-green-12 tint composites with the page
       background behind it, so it goes near-black (and this notice's dark
       text illegible) on a checkout theme with a dark page background. */
    background: #ECFDF3 !important;
    border: 1px solid var(--ozp-green-25) !important;
    border-radius: var(--ozp-r-s);
    font-size: 14px;
    color: #111827 !important;
}

.ozupay-mpesa-note {
    font-size: 12px;
    color: #555;
    margin-top: 6px;
}

/* ── Gateway phone field ↔ billing phone de-duplication ──────────────────── */
/* checkout.js collapses the gateway's own phone input to this summary line
   when the page has a billing phone field holding a valid M-Pesa number. */

.ozupay-mpesa-phone-summary {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.ozupay-mpesa-phone-summary[hidden],
.ozupay-mpesa-phone-input-block[hidden] {
    display: none !important;
}

.ozupay-mpesa-phone-summary-number {
    white-space: nowrap;
}

.ozupay-mpesa-phone-summary-edit {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
    margin-left: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #00A651 !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.ozupay-mpesa-phone-summary-edit:hover {
    color: #00883F !important;
}

/* ── Gateway icon (M-Pesa in the payment method list) ────────────────────
   WooCommerce doesn't cap payment gateway icon size itself — without this,
   the source PNG (128x128, shared with the WP admin menu and WooCommerce →
   Payments icon) renders at native size inside the classic checkout's
   ul.payment_methods label and the Blocks checkout's radio-control layout. */
ul.payment_methods li img,
.wc-block-components-payment-method-label img,
.wc-block-components-radio-control__option-layout__description img {
    max-width: 24px;
    max-height: 24px;
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ── Currency gate (grey out gateway when store currency isn't KES) ─────── */

li.ozupay-mpesa-currency-disabled,
.ozupay-mpesa-currency-disabled.wc-block-components-radio-control__option {
    opacity: .5;
    cursor: not-allowed;
}

li.ozupay-mpesa-currency-disabled label,
.ozupay-mpesa-currency-disabled.wc-block-components-radio-control__option label {
    cursor: not-allowed;
    pointer-events: none;
}

.ozupay-mpesa-currency-note {
    margin: 4px 0 0;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.4;
    color: #92400E;
    background: #FEF3C7;
    border: 1px solid rgba(146,64,14,.25);
    border-radius: var(--ozp-r-s);
}

.ozupay-mpesa-currency-notice {
    font-size: 13px;
    color: #92400E;
    background: #FEF3C7;
    border: 1px solid rgba(146,64,14,.25);
    border-radius: var(--ozp-r-s);
    padding: 8px 12px;
    margin: 0;
}

/* ── Payment Waiting Modal (Light Theme) ─────────────────────────────────── */

.ozupay-mpesa-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,23,42,.55);
    backdrop-filter: blur(4px);
    animation: ozupay-fade-in 0.22s ease;
    padding: 16px;
    box-sizing: border-box;
}

.ozupay-mpesa-backdrop[hidden],
.ozupay-mpesa-sticky-bar[hidden] {
    display: none !important;
}

.ozupay-mpesa-backdrop.is-dismissed {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.26s ease;
}

.ozupay-mpesa-waiting-sheet {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #ffffff;
    border-radius: 20px;
    padding: 22px 20px 20px;
    box-shadow: 0 24px 64px rgba(0,0,0,.18);
    animation: ozupay-scale-in 0.24s cubic-bezier(0.34,1.2,0.64,1);
    color: #0F172A;
    font-size: 14px;
    line-height: 1.5;
}

/* Reset theme-added top margins */
.ozupay-mpesa-waiting-header,
.ozupay-mpesa-waiting-title,
.ozupay-mpesa-waiting-amount,
.ozupay-mpesa-waiting-subtitle,
.ozupay-mpesa-status-pill,
.ozupay-section {
    margin-top: 0 !important;
}

/* Close button */
#ozupay-mpesa-waiting-backdrop .ozupay-mpesa-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    border-radius: 50% !important;
    background: #F1F5F9 !important;
    border: none !important;
    color: #64748B !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: none !important;
    transition: background 0.15s, color 0.15s;
    z-index: 10;
    padding: 0 !important;
}
#ozupay-mpesa-waiting-backdrop .ozupay-mpesa-close-btn:hover {
    background: #E2E8F0 !important;
    color: #0F172A !important;
}
#ozupay-mpesa-waiting-backdrop .ozupay-mpesa-close-btn:focus-visible {
    outline: 2px solid rgba(0,166,81,.4);
    outline-offset: 2px;
    box-shadow: none !important;
}

/* Header — side padding keeps the centred title clear of the absolutely-
   positioned close button now that nothing sits above the header. */
.ozupay-mpesa-waiting-header {
    text-align: center;
    margin-bottom: 12px;
    padding: 0 36px;
}

.ozupay-mpesa-waiting-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: #ECFDF3;
    border-radius: 14px;
    margin: 0 auto 12px;
    transition: background 0.3s;
}

.ozupay-mpesa-waiting-icon-wrap.is-failed { background: #FEF2F2; }

/* Animated rings hidden in light theme */
.ozupay-icon-ring { display: none; }

.ozupay-mpesa-icon-phone {
    width: 24px;
    height: 24px;
    color: #00A651;
    transition: color 0.3s;
}
.ozupay-mpesa-waiting-icon-wrap.is-failed .ozupay-mpesa-icon-phone { color: #EF4444; }

.ozupay-mpesa-waiting-title {
    font-size: 20px;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 6px;
    line-height: 1.25;
}

/* The amount being approved — visible before the customer types their PIN,
   without having to open the manual-payment panel. */
.ozupay-mpesa-waiting-amount {
    font-size: 22px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 6px;
    line-height: 1.2;
}

.ozupay-mpesa-waiting-subtitle {
    font-size: 14px;
    color: #475569;
    margin: 0;
    line-height: 1.5;
}

/* Status pill */
.ozupay-mpesa-status-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    justify-content: center;
    background: #ECFDF3;
    border: 1px solid rgba(0,166,81,.25);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #00A651;
    margin: 0 auto 16px;
    width: fit-content;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.ozupay-mpesa-status-pill.is-confirmed {
    background: #ECFDF3;
    border-color: rgba(0,166,81,.25);
    color: #00A651;
}

.ozupay-mpesa-status-pill.is-failed,
.ozupay-mpesa-status-pill.is-timedout {
    background: #FEF2F2;
    border-color: rgba(239,68,68,.25);
    color: #EF4444;
}

/* A real payment arrived, just short of what was due — "needs attention",
   not "failed"; amber rather than red so the tone doesn't read as alarming
   as a declined push. */
.ozupay-mpesa-status-pill.is-underpaid {
    background: #FEF6EC;
    border-color: rgba(217,119,6,.25);
    color: #B45309;
}

/* Safaricom has confirmed the payment but the receipt-bearing callback has not
   landed. Green like a success (the money did move — nothing here should read as
   a problem the customer must act on) but the dot keeps blinking, because the
   order is genuinely still pending and not yet complete. */
.ozupay-mpesa-status-pill.is-pending_confirmation {
    background: #ECFDF3;
    border-color: rgba(0,166,81,.25);
    color: #00A651;
}

.ozupay-mpesa-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00A651;
    flex-shrink: 0;
    animation: ozupay-dot-blink 1.2s ease-in-out infinite;
}
.ozupay-mpesa-status-pill.is-confirmed .ozupay-mpesa-status-dot { animation: none; background: #00A651; }
.ozupay-mpesa-status-pill.is-failed    .ozupay-mpesa-status-dot,
.ozupay-mpesa-status-pill.is-timedout  .ozupay-mpesa-status-dot { animation: none; background: #EF4444; }
.ozupay-mpesa-status-pill.is-underpaid .ozupay-mpesa-status-dot { animation: none; background: #D97706; }

.ozupay-mpesa-poll-countdown {
    opacity: 0.6;
    font-variant-numeric: tabular-nums;
    font-size: 0.9em;
}

/* Section cards — both options get equal visual weight: a tinted background,
   an accent-coloured border, and a coloured "OPTION N" badge (instead of the
   old plain gray label text, which read as faint/disabled and gave no signal
   that Option 2 was just as usable as Option 1). */
.ozupay-section {
    background: #ffffff;
    border: 1.5px solid #C8D5E0;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
    color: #0F172A;
}

.ozupay-section:last-of-type {
    margin-bottom: 0;
}

.ozupay-section--stk {
    background: #F0FBF4;
    border-color: rgba(0,166,81,.35);
}

.ozupay-section--manual {
    background: #F0F6FE;
    border-color: rgba(37,99,235,.35);
}

.ozupay-section p,
.ozupay-section li,
.ozupay-section label {
    color: #475569;
}

.ozupay-mpesa-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: nowrap;
}

/* Accordion: headers become clickable toggles for the STK / Paybill panels.
   A visible border + shadow-on-hover signal "this is a pressable card", not
   just a plain text row — addresses "not obvious that it's clickable". */
.ozupay-mpesa-section-header[role="button"] {
    cursor: pointer;
    margin: -4px -4px 6px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.ozupay-mpesa-section-header[role="button"]:hover {
    background: rgba(255,255,255,.65);
    border-color: rgba(15,23,42,.12);
    box-shadow: 0 1px 3px rgba(15,23,42,.08);
}
.ozupay-mpesa-section-header[role="button"]:active {
    background: rgba(15,23,42,.06);
}
.ozupay-mpesa-section-header[role="button"]:focus-visible {
    outline: 2px solid rgba(0,166,81,.4);
    outline-offset: 2px;
}

.ozupay-section-chevron {
    position: relative;
    font-size: 12px;
    color: #475569;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: rgba(15,23,42,.06);
}
.ozupay-section-chevron::before {
    content: "+";
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}
.ozupay-section-chevron.is-open::before {
    content: "\2212"; /* minus sign, not a hyphen — renders at the same width as "+" */
}

.ozupay-mpesa-section-content[hidden] {
    display: none;
}

.ozupay-mpesa-option-label {
    font-size: 10px;
    font-weight: 700;
    color: #334155;
    background: rgba(15,23,42,.07);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 5px;
    flex-shrink: 0;
}

.ozupay-section--stk .ozupay-mpesa-option-label {
    color: #00703A;
    background: rgba(0,166,81,.15);
}

.ozupay-section--manual .ozupay-mpesa-option-label {
    color: #1D4ED8;
    background: rgba(37,99,235,.14);
}

.ozupay-mpesa-section-name {
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
    flex: 1;
    min-width: 0;
}

.ozupay-mpesa-badge-recommended {
    background: #00A651;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

/* STK context message */
.ozupay-mpesa-stk-message {
    font-size: 13px;
    color: #475569;
    margin-bottom: 10px;
    line-height: 1.5;
}

/* Deposit amounts block */
.ozupay-mpesa-amounts-block {
    background: #ffffff;
    border: 1px solid #C8D5E0;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 13px;
}
.ozupay-amount-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    color: #0F172A;
}
.ozupay-amount-row + .ozupay-amount-row {
    border-top: 1px solid #C8D5E0;
    margin-top: 5px;
    padding-top: 7px;
    color: #475569;
    font-size: 12px;
}
.ozupay-amount-row--highlight strong {
    color: #0F172A;
    font-size: 15px;
    font-weight: 700;
}

/* WooCommerce price override */
#ozupay-mpesa-waiting-backdrop .woocommerce-Price-amount,
#ozupay-mpesa-waiting-backdrop .woocommerce-Price-amount bdi,
#ozupay-mpesa-waiting-backdrop bdi,
#ozupay-mpesa-waiting-backdrop .woocommerce-Price-currencySymbol {
    color: inherit !important;
}

/* Phone + retry inline row */
.ozupay-mpesa-phone-edit { margin-bottom: 0; }

.ozupay-mpesa-phone-edit-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #0F172A;
    margin-bottom: 6px;
}

.ozupay-mpesa-phone-retry-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

#ozupay-mpesa-waiting-backdrop .ozupay-mpesa-phone-edit-input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    border: 1.5px solid #C8D5E0;
    border-radius: 8px;
    padding: 12px 12px;
    font-size: 14px;
    color: #0F172A;
    background: #ffffff;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    box-shadow: none !important;
}
#ozupay-mpesa-waiting-backdrop .ozupay-mpesa-phone-edit-input:focus {
    border-color: #00A651;
    box-shadow: 0 0 0 3px rgba(0,166,81,.12) !important;
}
#ozupay-mpesa-waiting-backdrop .ozupay-mpesa-phone-edit-input.is-invalid {
    border-color: #EF4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
}
#ozupay-mpesa-waiting-backdrop .ozupay-mpesa-phone-edit-input:disabled {
    background: #F8FAFC;
    color: #94A3B8;
    cursor: not-allowed;
}

.ozupay-phone-edit-hint { display: none; }

/* Retry button — compact, inline */
#ozupay-mpesa-waiting-backdrop .ozupay-btn--retry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    background: #00A651;
    color: #fff;
    border: none !important;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s;
    box-shadow: none !important;
    flex-shrink: 0;
    line-height: 1;
}
#ozupay-mpesa-waiting-backdrop .ozupay-btn--retry:hover:not(:disabled):not(.is-exhausted) {
    background: #00883F;
}
#ozupay-mpesa-waiting-backdrop .ozupay-btn--retry:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,166,81,.25) !important;
}
#ozupay-mpesa-waiting-backdrop .ozupay-btn--retry:active:not(:disabled):not(.is-exhausted) {
    background: #006B30;
}
#ozupay-mpesa-waiting-backdrop .ozupay-btn--retry:disabled,
#ozupay-mpesa-waiting-backdrop .ozupay-btn--retry.is-exhausted {
    background: #E2E8F0;
    color: #94A3B8;
    cursor: not-allowed;
}

.ozupay-retry-hint { display: none; }

.ozupay-mpesa-retry-exhausted-msg {
    font-size: 12px;
    color: #64748B;
    background: #FEF2F2;
    border: 1px solid rgba(239,68,68,.2);
    border-radius: 6px;
    padding: 6px 10px;
    margin-top: 8px;
    line-height: 1.4;
    text-align: center;
}

/* OR divider */
.ozupay-or-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    color: #94A3B8;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.ozupay-or-divider::before,
.ozupay-or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #E2E8F0;
}

/* Nested divider — QR code alternative inside the Paybill/Till panel; tighter
   margins since it separates content within a panel, not between panels. */
.ozupay-or-divider--nested {
    margin: 10px 0 6px;
    text-transform: none;
    font-weight: 600;
    letter-spacing: normal;
}

/* Payment details table */
.ozupay-mpesa-payment-details {
    background: #F8FAFC;
    border: 1px solid #C8D5E0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}
.ozupay-mpesa-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
}
.ozupay-mpesa-detail-row + .ozupay-mpesa-detail-row {
    border-top: 1px solid #E2E8F0;
}
.ozupay-mpesa-detail-label {
    font-size: 13px;
    color: #64748B;
    flex-shrink: 0;
    margin-right: 12px;
}
.ozupay-mpesa-detail-value {
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
    text-align: right;
    word-break: break-all;
}

/* Custom instructions */
.ozupay-mpesa-custom-instructions,
.ozupay-mpesa-custom-instructions p,
.ozupay-mpesa-custom-instructions li,
.ozupay-mpesa-custom-instructions span {
    color: #475569 !important;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 6px;
}

/* Manual steps */
.ozupay-mpesa-manual-steps {
    padding-left: 20px;
    margin: 0 0 10px;
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
}
.ozupay-mpesa-manual-steps li { margin-bottom: 3px; }
.ozupay-mpesa-manual-steps li:last-child { margin-bottom: 0; }
.ozupay-mpesa-manual-steps li::marker { color: #00A651; font-weight: 700; }

/* USSD hint */
.ozupay-mpesa-ussd-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #475569;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
}
.ozupay-mpesa-ussd-hint svg { flex-shrink: 0; color: #94A3B8; }
.ozupay-mpesa-ussd-hint strong {
    color: #0F172A;
    font-family: monospace;
    font-size: 13px;
}

/* Transaction code */
.ozupay-code-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #0F172A;
    margin-bottom: 6px;
}
.ozupay-required {
    color: #EF4444;
    margin-left: 1px;
}
.ozupay-code-input-group {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}
#ozupay-mpesa-waiting-backdrop .ozupay-mpesa-code-input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    border: 1.5px solid #C8D5E0;
    border-radius: 8px;
    padding: 12px 12px;
    font-size: 14px;
    font-family: monospace;
    text-transform: uppercase;
    color: #0F172A;
    background: #ffffff;
    caret-color: #00A651;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    box-shadow: none !important;
}
#ozupay-mpesa-waiting-backdrop .ozupay-mpesa-code-input:focus {
    border-color: #00A651;
    box-shadow: 0 0 0 3px rgba(0,166,81,.12) !important;
}
#ozupay-mpesa-waiting-backdrop .ozupay-mpesa-code-input::placeholder {
    text-transform: none;
    color: #94A3B8;
    font-family: inherit;
    font-size: 13px;
}
#ozupay-mpesa-waiting-backdrop .ozupay-mpesa-code-input:disabled {
    background: #F8FAFC;
    color: #94A3B8;
    cursor: not-allowed;
    caret-color: transparent;
}

.ozupay-btn--submit {
    background: #0F172A;
    color: #fff;
    border: none !important;
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.18s;
    box-shadow: none !important;
}
.ozupay-btn--submit:hover:not(:disabled) { background: #1E293B; }
.ozupay-btn--submit:disabled {
    background: #E2E8F0;
    color: #94A3B8;
    cursor: not-allowed;
}

.ozupay-mpesa-code-feedback {
    display: none;
    font-size: 13px;
    line-height: 1.5;
    margin: 6px 0 0;
    padding: 8px 12px;
    border-radius: 8px;
}
.ozupay-mpesa-code-feedback.is-success {
    display: block;
    background: #ECFDF3;
    color: #00A651;
    border: 1px solid rgba(0,166,81,.25);
}
.ozupay-mpesa-code-feedback.is-error {
    display: block;
    background: #FEF2F2;
    color: #EF4444;
    border: 1px solid rgba(239,68,68,.25);
}

/* Paybill auto-confirm notice (defers the contact-us note when C2B fallback is active) */
.ozupay-mpesa-autoconfirm-notice {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #475569;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: var(--ozp-r-s);
    padding: 8px 12px;
    margin-bottom: 10px;
}
.ozupay-mpesa-autoconfirm-notice svg { flex-shrink: 0; color: #94A3B8; }

/* Manual contact note (free edition) */
.ozupay-mpesa-manual-contact-note {
    font-size: 12px;
    color: #64748B;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: var(--ozp-r-s);
    padding: 8px 10px;
    margin-top: 12px;
    text-align: center;
    line-height: 1.5;
}

/* Dismiss */
.ozupay-mpesa-dismiss-wrap {
    text-align: center;
    margin: 14px 0 0;
}
.ozupay-mpesa-dismiss-btn {
    background: none;
    border: none;
    font-size: 13px;
    color: #64748B;
    cursor: pointer;
    padding: 10px 8px;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s;
    box-shadow: none !important;
}
.ozupay-mpesa-dismiss-btn:hover { color: #0F172A; }

/* Choose another payment method (cancels the order) */
.ozupay-mpesa-cancel-wrap {
    text-align: center;
    margin: 4px 0 0;
    padding-top: 10px;
    border-top: 1px solid #E2E8F0;
}
.ozupay-btn--cancel-order {
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 600;
    color: #00A651;
    cursor: pointer;
    padding: 10px 8px;
    transition: color 0.15s;
    box-shadow: none !important;
}
.ozupay-btn--cancel-order:hover { color: #00883F; }
.ozupay-btn--cancel-order:disabled { opacity: .6; cursor: not-allowed; }

/* Inline "cancel while STK still pending" confirm — replaces window.confirm() */
.ozupay-mpesa-cancel-confirm {
    text-align: left;
    background: #FEF6EC;
    border: 1px solid rgba(217,119,6,.25);
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 8px;
}
.ozupay-mpesa-cancel-confirm p {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #92400E !important;
}
.ozupay-mpesa-cancel-confirm-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ozupay-mpesa-cancel-confirm-actions .ozupay-btn--cancel-order { padding: 8px 10px; }
.ozupay-btn--secondary {
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 600;
    color: #64748B;
    cursor: pointer;
    padding: 8px 10px;
    transition: color 0.15s;
    box-shadow: none !important;
}
.ozupay-btn--secondary:hover { color: #0F172A; }

/* Free branding */
.ozupay-free-branding {
    text-align: center;
    font-size: 11px;
    color: #94A3B8;
    margin-top: 10px;
}
.ozupay-free-branding a { color: #94A3B8; text-decoration: none; }
.ozupay-free-branding a:hover { color: #64748B; }

/* ── Sticky mini-bar (dark) ──────────────────────────────────────────────── */

.ozupay-mpesa-sticky-bar {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - 32px);
    z-index: 99998;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--ozp-bg-1);
    color: var(--ozp-t1);
    border: 1px solid var(--ozp-b2);
    border-radius: 24px;
    padding: 8px 14px 8px 12px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
    animation: ozupay-slide-up-bar 0.22s ease;
}
@keyframes ozupay-slide-up-bar {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.ozupay-mpesa-sticky-bar.is-confirmed {
    background: var(--ozp-green-d);
    border-bottom-color: transparent;
    color: #fff;
}
.ozupay-mpesa-sticky-bar.is-failed {
    background: #991b1b;
    border-bottom-color: transparent;
    color: #fff;
}

.ozupay-mpesa-sticky-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ozp-green);
    flex-shrink: 0;
    animation: ozupay-dot-blink 1.2s ease-in-out infinite;
}
.ozupay-mpesa-sticky-bar.is-confirmed .ozupay-mpesa-sticky-dot,
.ozupay-mpesa-sticky-bar.is-failed    .ozupay-mpesa-sticky-dot { animation: none; background: currentColor; }

#ozupay-mpesa-sticky-text { flex: 1; }

.ozupay-mpesa-sticky-open {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--ozp-r-s);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
}
.ozupay-mpesa-sticky-open:hover { background: rgba(255,255,255,.2); }

/* ── Blocks Checkout ─────────────────────────────────────────────────────── */

.ozupay-blocks-deposit-summary {
    margin-top: 10px;
    padding: 10px;
    /* !important + solid background — see .ozupay-deposit-summary above:
       the translucent --ozp-green-12 tint composites with the page
       background behind it and goes near-black on a dark checkout theme. */
    background: #ECFDF3 !important;
    border: 1px solid var(--ozp-green-25) !important;
    border-radius: 4px;
    font-size: 13px;
    color: #374151 !important;
}

.ozupay-blocks-stk-notice {
    font-size: 12px;
    color: #555;
    margin: 6px 0 0;
}

/* ── Pay Prompt (no STK sent yet — email link revisit) ───────────────────── */

.ozupay-mpesa-pay-prompt {
    max-width: 480px;
    margin: 16px auto;
}
.ozupay-mpesa-pay-prompt-inner {
    background: var(--ozp-bg-1);
    border: 1px solid var(--ozp-b2);
    border-left: 3px solid var(--ozp-green);
    border-radius: 10px;
    padding: 16px 20px;
    text-align: center;
    color: var(--ozp-t0);
}
.ozupay-mpesa-pay-prompt-icon { margin-bottom: 8px; color: var(--ozp-green); }
.ozupay-mpesa-pay-prompt-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--ozp-t0);
}
.ozupay-pay-prompt-desc {
    font-size: 13px;
    color: var(--ozp-t2);
    margin: 0 0 10px;
    line-height: 1.5;
}
.ozupay-mpesa-pay-prompt-amount {
    font-size: 14px;
    font-weight: 600;
    color: var(--ozp-t1);
    margin: 0 0 12px;
}
.ozupay-mpesa-pay-prompt-phone {
    text-align: left;
    margin-bottom: 12px;
}
.ozupay-mpesa-pay-prompt-phone label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ozp-t2);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
#ozupay-mpesa-pay-prompt .ozupay-mpesa-pay-prompt-phone-input {
    width: 100% !important;
    padding: 12px !important;
    font-size: 15px !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid var(--ozp-b2) !important;
    border-radius: 6px !important;
    color: var(--ozp-t0) !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color .15s;
    box-shadow: none !important;
}
#ozupay-mpesa-pay-prompt .ozupay-mpesa-pay-prompt-phone-input::placeholder { color: var(--ozp-t3) !important; }
#ozupay-mpesa-pay-prompt .ozupay-mpesa-pay-prompt-phone-input:focus {
    border-color: var(--ozp-green) !important;
    background: rgba(255,255,255,.11) !important;
}
#ozupay-mpesa-pay-prompt .ozupay-mpesa-pay-prompt-phone-input.is-invalid {
    border-color: #EF4444 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
}
.ozupay-btn--pay-prompt {
    display: block;
    width: 100%;
    padding: 12px;
    background: var(--ozp-green);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}
.ozupay-btn--pay-prompt:hover:not(:disabled) { background: var(--ozp-green-d); }
.ozupay-btn--pay-prompt:disabled { opacity: .6; cursor: not-allowed; }
.ozupay-mpesa-pay-prompt-feedback {
    margin-top: 10px;
    font-size: 13px;
    color: var(--ozp-red);
}

/* ── Balance pay (order-pay page) ────────────────────────────────────────── */

.woocommerce-page .woocommerce-order-pay #order_review .shop_table { font-size: 13px; }
.woocommerce-page .woocommerce-order-pay #order_review .shop_table th,
.woocommerce-page .woocommerce-order-pay #order_review .shop_table td { padding: 5px 8px; }
.woocommerce-page .woocommerce-order-pay #order_review .shop_table tfoot tr:first-child td,
.woocommerce-page .woocommerce-order-pay #order_review .shop_table tfoot tr:first-child th { padding-top: 8px; }
.woocommerce-page .woocommerce-order-pay #order_review h3,
.woocommerce-page .woocommerce-order-pay #order_review h2 { font-size: 14px; margin-bottom: 8px; }
.woocommerce-page .woocommerce-order-pay .ozupay-mpesa-phone-wrap label { font-size: 13px; margin-bottom: 3px; }
.woocommerce-page .woocommerce-order-pay .ozupay-phone-field { font-size: 13px; padding: 6px 10px; }
.woocommerce-page .woocommerce-order-pay #ozupay_mpesa_phone_hint { font-size: 11px; margin-top: 2px; }

/* ── Place Order loading state ───────────────────────────────────────────── */

@keyframes ozp-spin { to { transform: rotate(360deg); } }

.ozupay-mpesa-place-order-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ozp-spin .7s linear infinite;
    flex-shrink: 0;
}

#place_order.ozupay-mpesa-btn--placing {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
    opacity: .9;
}

/* Standalone status banner — sits above WooCommerce's own blockUI overlay
   (which otherwise hides the button's own loading text) so the customer
   always sees what is happening while the order/STK push is prepared. */
.ozupay-mpesa-placing-overlay {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100050;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #0F172A;
    color: #F0F4F8;
    border-radius: 999px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 12px 32px rgba(0,0,0,.25);
    animation: ozupay-fade-in 0.18s ease;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
}

.ozupay-mpesa-placing-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #00A651;
    border-radius: 50%;
    animation: ozp-spin .7s linear infinite;
    flex-shrink: 0;
}

.ozupay-mpesa-placing-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 480px) {
    .ozupay-mpesa-placing-overlay {
        top: 10px;
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* ── Mobile adjustments ──────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .ozupay-mpesa-backdrop {
        padding: 0;
        align-items: flex-end;
    }
    .ozupay-mpesa-waiting-sheet {
        border-radius: 20px 20px 0 0;
        max-height: 92vh;
        padding: 20px 16px 32px;
    }
    .ozupay-mpesa-section-header {
        flex-wrap: wrap;
        gap: 6px;
    }
    .ozupay-mpesa-detail-label { font-size: 12px; }
    .ozupay-mpesa-detail-value { font-size: 13px; }
}

/* ── Keyframes ───────────────────────────────────────────────────────────── */

@keyframes ozupay-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ozupay-scale-in {
    from { transform: scale(0.95); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
@keyframes ozupay-dot-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}