/**
 * WooCommerce Hybrid Checkout — Inline Payment Styles
 * File: assets/css/oso-checkout-woo.css
 * @package OSO
 * @since   1.4.0
 */

/* ============================================================
   PAYMENT STEP WRAPPER (DIV B)
   ============================================================ */

#oso-woo-payment-step {
    margin-top: 16px;
    font-family: inherit;
}

.oso-woo-payment-inner {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--oso-container-radius, 12px);
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ============================================================
   BACK BUTTON
   ============================================================ */

.oso-woo-back-btn {
    align-self: flex-start;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
    font-size: 13px;
    padding: 6px 14px;
    transition: background 0.2s, color 0.2s;
    line-height: 1.4;
}

.oso-woo-back-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

/* ============================================================
   TITLE
   ============================================================ */

.oso-woo-payment-title {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 12px;
}

/* ============================================================
   LOADING SPINNERS
   ============================================================ */

.oso-woo-loading,
.oso-woo-processing {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6b7280;
    font-size: 14px;
    padding: 8px 0;
}

.oso-woo-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #e5e7eb;
    border-top-color: var(--oso-accent, #1e73be);
    border-radius: 50%;
    animation: oso-woo-spin 0.7s linear infinite;
    flex-shrink: 0;
}

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

/* ============================================================
   ERROR AREA
   ============================================================ */

.oso-woo-error-area {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    color: #b91c1c;
    font-size: 13px;
    padding: 10px 14px;
    line-height: 1.5;
}

/* ============================================================
   REDIRECT NOTICE
   ============================================================ */

.oso-woo-redirect-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    color: #92400e;
    font-size: 13px;
    padding: 10px 14px;
}

/* ============================================================
   GATEWAY TABS (when multiple gateways)
   ============================================================ */

.oso-woo-gateway-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.oso-woo-tab-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    color: #4b5563;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
    line-height: 1.3;
}

.oso-woo-tab-btn.oso-woo-tab--generic:hover {
    border-color: #cbd5e1;
    background: #f3f4f6;
    color: #1f2937;
}

.oso-woo-tab-btn.oso-woo-tab--generic.oso-woo-tab-active {
    border-color: #94a3b8;
    background: #f3f4f6;
    color: #1f2937;
    font-weight: 700;
}

/* Stripe — fixed light blue (text stays dark, independent of --oso-accent) */
.oso-woo-tab-btn.oso-woo-tab--stripe {
    color: #4b5563;
    background: #f8fbff;
    border-color: #dbeafe;
}

.oso-woo-tab-btn.oso-woo-tab--stripe:hover,
.oso-woo-tab-btn.oso-woo-tab--stripe.oso-woo-tab-active {
    color: #1f2937;
    background: #eff6ff;
    border-color: #93c5fd;
    font-weight: 700;
}

/* WooPay / WooCommerce Payments — fixed light purple */
.oso-woo-tab-btn.oso-woo-tab--woopay {
    color: #4b5563;
    background: #faf8ff;
    border-color: #e9e0ff;
}

.oso-woo-tab-btn.oso-woo-tab--woopay:hover,
.oso-woo-tab-btn.oso-woo-tab--woopay.oso-woo-tab-active {
    color: #1f2937;
    background: #f5f3ff;
    border-color: #c4b5fd;
    font-weight: 700;
}

/* COD — fixed light green */
.oso-woo-tab-btn.oso-woo-tab--cod {
    color: #4b5563;
    background: #f7fdf9;
    border-color: #d1fae5;
}

.oso-woo-tab-btn.oso-woo-tab--cod:hover,
.oso-woo-tab-btn.oso-woo-tab--cod.oso-woo-tab-active {
    color: #1f2937;
    background: #f0fdf4;
    border-color: #86efac;
    font-weight: 700;
}

.oso-woo-tab-icon img {
    height: 20px;
    width: auto;
    max-width: 50px;
    object-fit: contain;
    vertical-align: middle;
}

/* ============================================================
   PAYMENT FIELDS CONTAINER
   Wraps the HTML returned by gateway->payment_fields()
   ============================================================ */

.oso-woo-gateway-panel {
    padding: 4px 0;
}

/* Override WC default form styles inside our container */
#oso-woo-fields-wrap .form-row,
#oso-woo-fields-wrap p.form-row {
    margin: 0 0 12px !important;
    padding: 0 !important;
}

#oso-woo-fields-wrap label {
    font-size: 13px !important;
    color: #374151 !important;
    font-weight: 500 !important;
    display: block;
    margin-bottom: 4px !important;
}

#oso-woo-fields-wrap input[type="text"],
#oso-woo-fields-wrap input[type="email"],
#oso-woo-fields-wrap input[type="tel"],
#oso-woo-fields-wrap select,
#oso-woo-fields-wrap textarea {
    width: 100% !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    padding: 9px 12px !important;
    box-sizing: border-box !important;
    color: #1f2937 !important;
    background: #fff !important;
    transition: border-color 0.2s !important;
    outline: none !important;
}

#oso-woo-fields-wrap input:focus,
#oso-woo-fields-wrap select:focus,
#oso-woo-fields-wrap textarea:focus {
    border-color: var(--oso-accent, #1e73be) !important;
    box-shadow: 0 0 0 2px rgba(181,122,87,0.12) !important;
}

/* Stripe Elements iframe container — WC Stripe placeholders + our own */
#oso-woo-fields-wrap .StripeElement,
#oso-woo-fields-wrap #wc-stripe-card-element,
#oso-woo-fields-wrap #oso-stripe-card-el {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 12px 14px;
    background: #fff;
    min-height: 44px;
    transition: border-color 0.2s, box-shadow 0.2s;
    margin-bottom: 10px;
}

#oso-woo-fields-wrap .StripeElement--focus,
#oso-woo-fields-wrap #wc-stripe-card-element.StripeElement--focus,
#oso-woo-fields-wrap #oso-stripe-card-el.StripeElement--focus {
    border-color: var(--oso-accent, #1e73be);
    box-shadow: 0 0 0 2px rgba(181,122,87,0.12);
}

#oso-woo-fields-wrap .StripeElement--invalid,
#oso-woo-fields-wrap #oso-stripe-card-el.StripeElement--invalid {
    border-color: #ef4444;
}

/* Stripe card validation error below element */
.oso-stripe-card-errors {
    color: #dc2626;
    font-size: 12px;
    margin-top: -6px;
    margin-bottom: 8px;
}

/* Hide orphaned empty Stripe placeholder divs (the "gray box" that appears when Stripe's
   own JS hasn't mounted anything there — e.g. #wc-stripe-upe-element when we mount our
   card inside it via .oso-stripe-card-injected instead). An empty div with no children
   other than whitespace is hidden. We can't use :empty because browsers may add text nodes,
   so we target the known Stripe IDs when they contain only our injected element. */
#oso-woo-fields-wrap #wc-stripe-upe-element:empty,
#oso-woo-fields-wrap #wc-stripe-card-element:empty,
#oso-woo-fields-wrap #wc-stripe-exp-element:empty,
#oso-woo-fields-wrap #wc-stripe-cvc-element:empty,
#oso-woo-fields-wrap .wc-stripe-elements-field:empty {
    display: none !important;
}

/* Card element injected via smart-insert fallback */
#oso-woo-fields-wrap .oso-stripe-card-injected {
    margin: 10px 0;
}

/* Hide WC default "Place Order" button that may come from payment_fields() */
#oso-woo-fields-wrap #place_order,
#oso-woo-fields-wrap .woocommerce-checkout-payment .place-order,
#oso-woo-fields-wrap button[type="submit"] {
    display: none !important;
}

/* Hide redundant WC checkout wrappers */
#oso-woo-fields-wrap .woocommerce-checkout-payment,
#oso-woo-fields-wrap ul.wc_payment_methods {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

#oso-woo-fields-wrap .payment_box {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* ============================================================
   SAVED PAYMENT METHODS (WC Payments / WC Stripe saved cards)

   WC Payments renders:
     <ul>
       <li class="woocommerce-SavedPaymentMethods-token">
         <input type="radio">   ← sibling, NOT inside label
         <label>Visa ending…</label>
       </li>
     </ul>

   Strategy: make <li> the flex row (radio + label side-by-side),
   add the border/background to <li>, reset <label> to plain text.
   ============================================================ */

/* List reset */
#oso-woo-fields-wrap ul.woocommerce-SavedPaymentMethods,
#oso-woo-fields-wrap ul.wc-saved-payment-methods {
    list-style: none !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* ── Each row = flex container (border here, not on label) ── */
#oso-woo-fields-wrap .woocommerce-SavedPaymentMethods-token,
#oso-woo-fields-wrap .woocommerce-SavedPaymentMethods-new,
#oso-woo-fields-wrap ul.wc-saved-payment-methods li {
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 11px 14px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 10px !important;
    background: #f9fafb !important;
    transition: border-color 0.2s, background 0.2s !important;
    cursor: pointer !important;
    margin: 0 !important;
}

#oso-woo-fields-wrap .woocommerce-SavedPaymentMethods-token:hover,
#oso-woo-fields-wrap .woocommerce-SavedPaymentMethods-new:hover,
#oso-woo-fields-wrap ul.wc-saved-payment-methods li:hover {
    border-color: var(--oso-accent, #1e73be) !important;
    background: #fdf8f5 !important;
}

/* Selected row */
#oso-woo-fields-wrap .woocommerce-SavedPaymentMethods-token:has(input:checked),
#oso-woo-fields-wrap .woocommerce-SavedPaymentMethods-new:has(input:checked),
#oso-woo-fields-wrap ul.wc-saved-payment-methods li:has(input:checked) {
    border-color: var(--oso-accent, #1e73be) !important;
    background: #fdf8f5 !important;
}

/* ── Radio button (left side) ── */
#oso-woo-fields-wrap .woocommerce-SavedPaymentMethods-token input[type="radio"],
#oso-woo-fields-wrap .woocommerce-SavedPaymentMethods-new input[type="radio"],
#oso-woo-fields-wrap ul.wc-saved-payment-methods li input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    accent-color: var(--oso-accent, #1e73be) !important;
    margin: 0 !important;
    cursor: pointer !important;
    order: 0 !important;
}

/* ── Label (right side — plain text, no extra box) ── */
#oso-woo-fields-wrap .woocommerce-SavedPaymentMethods-token label,
#oso-woo-fields-wrap .woocommerce-SavedPaymentMethods-new label,
#oso-woo-fields-wrap ul.wc-saved-payment-methods li label {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    cursor: pointer !important;
    /* Reset: remove any box-like styling */
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    order: 1 !important;
}

/* Card emoji before saved-card labels */
#oso-woo-fields-wrap .woocommerce-SavedPaymentMethods-token label::before {
    content: "💳";
    font-size: 14px;
    flex-shrink: 0;
    line-height: 1;
}

/* "Use a new payment method" row */
#oso-woo-fields-wrap .woocommerce-SavedPaymentMethods-new {
    border-style: dashed !important;
    background: transparent !important;
}

#oso-woo-fields-wrap .woocommerce-SavedPaymentMethods-new label {
    color: var(--oso-accent, #1e73be) !important;
    font-weight: 500 !important;
}

#oso-woo-fields-wrap .woocommerce-SavedPaymentMethods-new label::before {
    content: "＋";
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    color: var(--oso-accent, #1e73be);
    line-height: 1;
}

/* "Use a new payment method" as plain link variant */
#oso-woo-fields-wrap a.woocommerce-SavedPaymentMethods-saveNew {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--oso-accent, #1e73be);
    text-decoration: underline;
    cursor: pointer;
}

/* Divider above new card form */
#oso-woo-fields-wrap .wc-payment-form,
#oso-woo-fields-wrap #wc-woocommerce_payments-cc-form,
#oso-woo-fields-wrap #wc-stripe-cc-form {
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid #f3f4f6 !important;
}

/* ============================================================
   PAY BUTTON
   Mirrors .oso-submit visually but uses explicit padding/height
   (not height:100%) because it lives outside .oso-col-btn.
   All dynamic values come from the same CSS variables that
   .oso-submit uses, so admin color/radius settings apply here too.
   ============================================================ */

.oso-woo-pay-btn {
    /* Layout */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 24px !important;
    margin-top: 4px;

    /* Visual — same variables as .oso-submit */
    background: var(--oso-accent) !important;
    color: var(--oso-btn-text, #fff) !important;
    border: none !important;
    border-radius: var(--oso-btn-radius, 8px) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.3px;
    white-space: nowrap !important;
    cursor: pointer;
    outline: none !important;

    /* Same shadow formula as .oso-submit */
    box-shadow: 0 4px 12px color-mix(in srgb, var(--oso-accent) 25%, transparent) !important;

    /* Smooth transitions */
    transition: all 0.2s ease !important;
}

.oso-woo-pay-btn:hover {
    background: var(--oso-accent-hover, var(--oso-accent)) !important;
    transform: scale(1.015) !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--oso-accent) 35%, transparent) !important;
}

.oso-woo-pay-btn:active {
    transform: scale(0.98) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--oso-accent) 20%, transparent) !important;
}

.oso-woo-pay-btn:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* ============================================================
   TRANSITION ANIMATION (Step A ↔ Step B)
   ============================================================ */

.oso-woo-fade-in {
    animation: oso-woo-fadeIn 0.3s ease forwards;
}

@keyframes oso-woo-fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}