/* ═══════════════════════════════════════════════════════
   VARIANTI — WOOCOMMERCE DARK THEME OVERRIDES
═══════════════════════════════════════════════════════ */

/* ── Checkout page header ── */
.checkout-header {
    text-align: center;
    margin-bottom: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* ── Two-column checkout layout ── */
.checkout-wrapper .woocommerce {
    width: 100%;
}

.checkout-wrapper form.woocommerce-checkout {
    display: grid;
    grid-template-columns: 1fr 420px;
    grid-template-rows: auto auto;
    gap: 32px;
    align-items: start;
}

.checkout-wrapper #customer_details {
    grid-column: 1;
    grid-row: 1;
}

.checkout-wrapper #order_review_heading {
    grid-column: 2;
    grid-row: 1 / 3;
    display: none; /* heading is inside the card below */
}

.checkout-wrapper #order_review {
    grid-column: 2;
    grid-row: 1 / 3;
}

/* ── Glass card wrapper for each section ── */
.checkout-wrapper .woocommerce-billing-fields,
.checkout-wrapper #order_review {
    background: rgba(18,6,0,0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,100,50,0.22);
    border-radius: 20px;
    padding: 32px;
}

/* ── Section headings ── */
.woocommerce-checkout h3,
.woocommerce-checkout h3#order_review_heading {
    font-size: 20px;
    font-weight: 700;
    color: #f7f7f7;
    margin: 0 0 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-family: 'Inter', 'Noto Sans Georgian', sans-serif;
}

/* ── Hide fields not needed for digital products ── */
.woocommerce-checkout #ship-to-different-address,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row.address-field,
.woocommerce-checkout p#billing_company_field,
.woocommerce-checkout p#billing_address_1_field,
.woocommerce-checkout p#billing_address_2_field,
.woocommerce-checkout p#billing_city_field,
.woocommerce-checkout p#billing_state_field,
.woocommerce-checkout p#billing_postcode_field,
.woocommerce-checkout p#billing_country_field {
    display: none !important;
}

/* ── Form rows ── */
.woocommerce form .form-row {
    margin-bottom: 18px;
    padding: 0;
}

.woocommerce form .form-row label {
    color: #94979c;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
    font-family: 'Inter', 'Noto Sans Georgian', sans-serif;
    letter-spacing: 0.02em;
}

.woocommerce form .form-row label .required {
    color: #FF7441;
    margin-left: 2px;
}

/* ── Input fields ── */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 12px !important;
    padding: 13px 16px !important;
    font-size: 16px !important; /* 16px minimum prevents iOS auto-zoom on input focus */
    color: #f7f7f7 !important;
    width: 100% !important;
    font-family: 'Inter', 'Noto Sans Georgian', sans-serif !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: rgba(255,116,65,0.6) !important;
    box-shadow: 0 0 0 3px rgba(255,116,65,0.1) !important;
}

.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder {
    color: #555860 !important;
}

/* ── Side-by-side first/last name ── */
.checkout-wrapper .woocommerce-billing-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

.checkout-wrapper p#billing_first_name_field,
.checkout-wrapper p#billing_last_name_field {
    grid-column: span 1;
}

.checkout-wrapper p#billing_email_field,
.checkout-wrapper p#billing_phone_field {
    grid-column: span 1;
}

/* ── Select arrow ── */
.woocommerce form .form-row select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394979c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 40px !important;
}

/* ── Order summary table ── */
.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

.woocommerce-checkout-review-order-table th {
    color: #94979c;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-align: left;
}

.woocommerce-checkout-review-order-table td {
    color: #f7f7f7;
    font-size: 15px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    text-align: right;
}

.woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-checkout-review-order-table .cart-subtotal td,
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
    border-bottom: none;
    padding-top: 18px;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
    font-size: 22px;
    font-weight: 700;
    color: #f7f7f7;
}

.woocommerce-checkout-review-order-table .order-total td {
    color: #FF7441;
}

/* ── Suppress WooCommerce blockUI loading overlay and spinner ── */
/*
 * WC fires blockUI when switching payment methods (AJAX).
 * Default: white background + 0.6 opacity = everything looks washed-out/gray.
 * No parent prefix — the broad selector ensures it matches immediately on
 * insertion regardless of where WC places the element, preventing the white flash.
 * transition:none stops any opacity fade-in that could reveal the white bg.
 */
.blockUI.blockOverlay {
    background: rgba(9,1,0,0.45) !important;
    background-image: none !important;
    opacity: 1 !important;
    transition: none !important;
    -webkit-transition: none !important;
    border-radius: inherit !important;
    cursor: wait !important;
}
/* Hide the circular spinner entirely */
.blockUI.blockMsg,
.blockUI.blockPage {
    display: none !important;
    opacity: 0 !important;
}
.blockUI.blockOverlay::before,
.blockUI.blockOverlay::after {
    display: none !important;
    content: none !important;
}

/* ── Payment methods box ── */
#payment {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    padding: 20px !important;
    margin-top: 0 !important;
}

#payment .payment_methods {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    border: none;
}

#payment .payment_methods li {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

#payment .payment_methods li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

#payment .payment_methods li label {
    color: #f7f7f7 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── BOG payment_box base — JS also forces these inline ── */
#payment .payment_methods li .payment_box {
    background: rgba(12,4,0,0.82) !important;
    border: 1px solid rgba(255,116,65,0.2) !important;
    border-radius: 10px !important;
    padding: 16px !important;
    margin-top: 10px !important;
    color: #94979c !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Target elements with BOG-injected inline styles */
#payment .payment_methods li .payment_box [style] {
    background: transparent !important;
    background-color: transparent !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* Dark scrollbar inside the payment box */
#payment .payment_methods li .payment_box::-webkit-scrollbar {
    height: 5px;
}
#payment .payment_methods li .payment_box::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.04);
    border-radius: 9999px;
}
#payment .payment_methods li .payment_box::-webkit-scrollbar-thumb {
    background: rgba(255,116,65,0.45);
    border-radius: 9999px;
}

/* BOG Part-by-Part / Installment table — full width, no column collapse */
#payment .payment_methods li .payment_box table {
    width: 100% !important;
    border-collapse: collapse !important;
}
#payment .payment_methods li .payment_box td,
#payment .payment_methods li .payment_box th {
    white-space: nowrap !important;
    padding: 8px 16px !important;
    min-width: 120px !important;
    background: transparent !important;
    border-color: rgba(255,255,255,0.06) !important;
}

/* ── Force dark theme on all BOG plugin injected content ── */
/* BOG injects its own white-background containers inside .payment_box */
#payment .payment_methods li .payment_box *,
#payment .payment_methods li .payment_box div,
#payment .payment_methods li .payment_box p,
#payment .payment_methods li .payment_box span,
#payment .payment_methods li .payment_box ul,
#payment .payment_methods li .payment_box li,
#payment .payment_methods li .payment_box label {
    background: transparent !important;
    color: #94979c !important;
    border-color: rgba(255,255,255,0.1) !important;
    font-family: 'Inter', 'Noto Sans Georgian', sans-serif !important;
}

/* BOG installment amount/highlight text — keep it readable */
#payment .payment_methods li .payment_box strong,
#payment .payment_methods li .payment_box b,
#payment .payment_methods li .payment_box .amount,
#payment .payment_methods li .payment_box [class*="amount"],
#payment .payment_methods li .payment_box [class*="price"],
#payment .payment_methods li .payment_box [class*="total"] {
    color: #f7f7f7 !important;
    background: transparent !important;
}

/* BOG installment range slider track and thumb */
#payment .payment_methods li .payment_box input[type="range"] {
    accent-color: #FF7441 !important;
    width: 100% !important;
    background: transparent !important;
    cursor: pointer !important;
    margin: 8px 0 !important;
}

/* BOG inner card/box containers — force dark */
#payment .payment_methods li .payment_box > div,
#payment .payment_methods li .payment_box > div > div {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* BOG list items inside payment_box */
#payment .payment_methods li .payment_box ul li {
    color: #94979c !important;
    background: transparent !important;
    border-color: rgba(255,255,255,0.06) !important;
}
#payment .payment_methods li .payment_box ul li::before,
#payment .payment_methods li .payment_box ul li::marker {
    color: #FF7441 !important;
}

/* BOG month labels / per-month text */
#payment .payment_methods li .payment_box [class*="month"],
#payment .payment_methods li .payment_box [class*="Month"],
#payment .payment_methods li .payment_box [class*="per"] {
    color: #94979c !important;
    background: transparent !important;
}

/* BOG selected/active state inside payment_box */
#payment .payment_methods li .payment_box input[type="radio"] {
    accent-color: #FF7441 !important;
}

/* Ensure no white backgrounds leak through from BOG plugin injected elements */
#payment .payment_methods li .payment_box table,
#payment .payment_methods li .payment_box thead,
#payment .payment_methods li .payment_box tbody,
#payment .payment_methods li .payment_box tr,
#payment .payment_methods li .payment_box th,
#payment .payment_methods li .payment_box td {
    background: transparent !important;
    /* Use a brighter color so amounts are clearly readable on the dark background */
    color: #d0d4db !important;
    border-color: rgba(255,255,255,0.08) !important;
}
#payment .payment_methods li .payment_box th {
    color: #94979c !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

#payment input[type="radio"] {
    accent-color: #FF7441;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ── Place order button ── */
#place_order,
.woocommerce #place_order {
    background: #FF7441 !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    border-radius: 9999px !important;
    padding: 16px 32px !important;
    border: 2px solid rgba(255,255,255,0.12) !important;
    cursor: pointer !important;
    width: 100% !important;
    font-family: 'Inter', 'Noto Sans Georgian', sans-serif !important;
    transition: opacity 0.2s !important;
    box-shadow: none !important;
    text-shadow: none !important;
    margin-top: 8px !important;
}

#place_order:hover {
    opacity: 0.88 !important;
}

/* ── WooCommerce notices ── */
/* Hide "added to cart" success messages on checkout — irrelevant, no cart page */
.woocommerce-notices-wrapper .woocommerce-message { display: none !important; }

.woocommerce-info {
    background: rgba(18,6,0,0.65) !important;
    border-top: 3px solid #FF7441 !important;
    color: #f7f7f7 !important;
    border-radius: 0 0 12px 12px !important;
    padding: 16px 20px !important;
    margin-bottom: 24px !important;
}

.woocommerce-error {
    background: rgba(18,6,0,0.65) !important;
    border-top: 3px solid #ef4444 !important;
    color: #f7f7f7 !important;
    border-radius: 0 0 12px 12px !important;
    padding: 16px 20px !important;
    margin-bottom: 24px !important;
    list-style: none !important;
}

.woocommerce-error a,
.woocommerce-info a,
.woocommerce-message a {
    color: #FF7441 !important;
}

/* ── Validation errors ── */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
    border-color: #ef4444 !important;
}

.woocommerce form .form-row.woocommerce-invalid label {
    color: #ef4444 !important;
}

/* ── Privacy policy text ── */
.woocommerce-checkout .woocommerce-privacy-policy-text {
    font-size: 13px;
    color: #555860;
    margin-bottom: 12px;
    line-height: 1.6;
}

/* ── Terms & conditions wrapper — dark card style ── */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #94979c;
    line-height: 1.5;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label {
    color: #94979c !important;
    font-size: 13px !important;
    cursor: pointer;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label a {
    color: #FF7441 !important;
    text-decoration: underline;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
    accent-color: #FF7441;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    cursor: pointer;
}

/* ── Cart page ── */
.woocommerce-cart-form table.shop_table {
    background: rgba(18,6,0,0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,100,50,0.18);
    border-radius: 16px;
    overflow: hidden;
    border-collapse: separate;
    width: 100%;
}

.woocommerce-cart-form table.shop_table th {
    background: rgba(255,116,65,0.06);
    color: #94979c;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,100,50,0.15);
    text-align: left;
}

.woocommerce-cart-form table.shop_table td {
    color: #f7f7f7;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* ── Cart totals ── */
.cart_totals {
    background: rgba(18,6,0,0.65) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,100,50,0.18) !important;
    border-radius: 16px !important;
    padding: 28px !important;
}

.cart_totals h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #f7f7f7 !important;
    margin-bottom: 20px !important;
}

.cart_totals table th,
.cart_totals table td {
    color: #f7f7f7 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 12px 0 !important;
    font-size: 15px !important;
}

.checkout-button,
a.checkout-button {
    background: #FF7441 !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    border-radius: 9999px !important;
    padding: 14px 28px !important;
    border: 2px solid rgba(255,255,255,0.12) !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    margin-top: 16px !important;
    text-decoration: none !important;
    transition: opacity 0.2s !important;
}

.checkout-button:hover { opacity: 0.88 !important; }

/* ── Cart quantity controls ── */
.woocommerce-cart .quantity input,
.cart .quantity input {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 8px !important;
    color: #f7f7f7 !important;
    font-size: 15px !important;
    width: 60px !important;
    text-align: center !important;
    padding: 8px !important;
}

/* Hide quantity input for digital courses — show plain "1" */
.woocommerce-cart .quantity { display: none !important; }

/* ── Cart product name ── */
.woocommerce-cart-form .cart_item .product-name a {
    color: #f7f7f7 !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

.woocommerce-cart-form .cart_item .product-name .variation {
    color: #94979c !important;
    font-size: 13px !important;
    margin-top: 4px !important;
}

/* ── Cart remove button ── */
.woocommerce-cart-form a.remove {
    color: #94979c !important;
    font-size: 18px !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}
.woocommerce-cart-form a.remove:hover { color: #ef4444 !important; }

/* ── Update cart button ── */
.woocommerce-cart-form button[name="update_cart"] {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: #94979c !important;
    border-radius: 9999px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    font-family: 'Inter', 'Noto Sans Georgian', sans-serif !important;
}

/* ── Coupon input ── */
.woocommerce-cart-form .coupon input {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 10px !important;
    color: #f7f7f7 !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    width: 200px !important;
}
.woocommerce-cart-form .coupon button {
    background: transparent !important;
    border: 1px solid rgba(255,116,65,0.4) !important;
    color: #FF7441 !important;
    border-radius: 9999px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    font-family: 'Inter', 'Noto Sans Georgian', sans-serif !important;
    margin-left: 8px !important;
}

/* ── Cart totals box ── */
.cart-collaterals {
    margin-top: 40px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

.cart_totals {
    background: rgba(18,6,0,0.65) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255,100,50,0.22) !important;
    border-radius: 20px !important;
    padding: 32px !important;
    width: 100% !important;
    max-width: 380px !important;
}

.cart_totals h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #f7f7f7 !important;
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.cart_totals table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 24px !important;
}

.cart_totals table th {
    color: #94979c !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 10px 0 !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.cart_totals table td {
    color: #f7f7f7 !important;
    font-size: 15px !important;
    padding: 10px 0 !important;
    text-align: right !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.cart_totals .order-total th,
.cart_totals .order-total td {
    font-size: 20px !important;
    font-weight: 700 !important;
    border-bottom: none !important;
    padding-top: 16px !important;
    color: #f7f7f7 !important;
}

.cart_totals .order-total td { color: #FF7441 !important; }

.wc-proceed-to-checkout {
    margin-top: 0 !important;
    padding: 0 !important;
}

.wc-proceed-to-checkout .checkout-button,
.wc-proceed-to-checkout a.checkout-button {
    background: #FF7441 !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    border-radius: 9999px !important;
    padding: 15px 28px !important;
    border: 2px solid rgba(255,255,255,0.12) !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    text-decoration: none !important;
    transition: opacity 0.2s !important;
    font-family: 'Inter', 'Noto Sans Georgian', sans-serif !important;
}

.wc-proceed-to-checkout .checkout-button:hover { opacity: 0.88 !important; }

/* ── Responsive — stack to single column on mobile ── */
@media (max-width: 860px) {
    .checkout-wrapper form.woocommerce-checkout {
        grid-template-columns: 1fr;
    }

    .checkout-wrapper #order_review {
        grid-column: 1;
        grid-row: auto;
    }

    .checkout-wrapper .woocommerce-billing-fields__field-wrapper {
        grid-template-columns: 1fr;
    }
}

/* ── Confirm button loading spinner ── */
@keyframes co-spin {
    to { transform: rotate(360deg); }
}
.co-modal-confirm.is-loading::after {
    content: '';
    display: inline-block;
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: co-spin 0.7s linear infinite;
    margin-left: 10px;
    flex-shrink: 0;
}
.co-modal-confirm.is-loading { pointer-events: none; opacity: 0.8; }