/**
*   Name:       Nolix Checkout — visual polish (styles only)
*   Version:    1.0
*   For:        Nolix.ir — Flatsome Child Theme (WooCommerce, Persian/RTL)
*   Scope:      ONLY the checkout page. No markup/template changes.
*               Loaded after nolix-cart.css, which already supplies the
*               branded background + shared green tokens for .woocommerce-checkout.
*
*   Fixes (per request):
*     A) Two-column balance — the billing form was 58.33% (large-7) while the
*        order summary was squeezed (~38%), forcing the product title to wrap
*        into 6 lines. Rebalanced to a comfortable ~54% / ~44%.
*     B) Validation icon overlap — the green tick (background-image) on the
*        email / phone-style inputs sat on top of the typed text in RTL.
*        Reserve space for it and pin it to the empty (left) edge.
*     C) Field consistency — uniform input height, radius, border and even
*        vertical rhythm between form rows.
**/

/* =========================================================
   Checkout-local values
   ========================================================= */
body.woocommerce-checkout {
    --co-green:       var(--nolix-brand-accent, #5EAC12);
    --co-field-h:     52px;
    --co-field-radius:14px;
    --co-field-border:#E2E2E2;
    --co-field-bg:    #FFFFFF;
    --co-gap:         18px;   /* vertical rhythm between rows */
    --co-icon-space:  40px;   /* room reserved for the green tick */
}

/* =========================================================
   A) Two-column balance
   Flatsome gives the form .large-7 (58.33%) and leaves the
   .checkout-sidebar to fill the rest. Rebalance both.
   ========================================================= */
/* Real structure (Flatsome): form.checkout > .row > .large-7 (billing)
   + .large-5 (which contains .checkout-sidebar > #order_review).
   Rebalance the two TRUE row columns, not the inner sidebar. */
@media (min-width: 850px) {
    body.woocommerce-checkout form.checkout .row > .col.large-7 {
        flex: 0 1 54% !important;
        max-width: 54% !important;
    }

    /* Widen the summary column so the product title stops wrapping hard */
    body.woocommerce-checkout form.checkout .row > .col.large-5 {
        flex: 0 1 44% !important;
        max-width: 44% !important;
    }

    /* Inner sidebar must fill its (now wider) column */
    body.woocommerce-checkout .checkout-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Let the product name in the summary breathe (no premature wrapping) */
body.woocommerce-checkout .checkout-sidebar table.shop_table td.product-name,
body.woocommerce-checkout #order_review td.product-name {
    line-height: 1.7;
    word-spacing: normal;
}
/* Keep the "× 1" quantity tied to its name nicely */
body.woocommerce-checkout #order_review .product-quantity {
    white-space: nowrap;
}

/* =========================================================
   B) Validation icon overlap (green tick)
   The tick is a background-image painted on the input itself.
   In RTL the text starts at the right, so park the icon at the
   LEFT edge and reserve padding-left so text never sits under it.
   ========================================================= */
body.woocommerce-checkout form.checkout input.input-text[type="email"] {
    background-position: left 12px center !important;  /* logical left edge */
    background-repeat: no-repeat !important;
    background-size: 18px 18px !important;
    padding-left: var(--co-icon-space) !important;     /* reserve icon space only where an icon exists */
}

/* =========================================================
   C) Field consistency — height, radius, border, rhythm
   ========================================================= */
body.woocommerce-checkout #customer_details .input-text,
body.woocommerce-checkout #customer_details .fl-input,
body.woocommerce-checkout #customer_details select,
body.woocommerce-checkout #customer_details .select2-selection,
body.woocommerce-checkout #customer_details textarea {
    min-height: var(--co-field-h);
    border-radius: var(--co-field-radius) !important;
    border: 1px solid var(--co-field-border) !important;
    background-color: var(--co-field-bg) !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Textarea (order notes) keeps its own taller height */
body.woocommerce-checkout #customer_details textarea {
    min-height: 96px;
    padding-top: 12px;
}

/* Focus state — subtle green ring, on-brand */
body.woocommerce-checkout #customer_details .input-text:focus,
body.woocommerce-checkout #customer_details .fl-input:focus,
body.woocommerce-checkout #customer_details textarea:focus,
body.woocommerce-checkout #customer_details .select2-container--focus .select2-selection {
    border-color: var(--co-green) !important;
    box-shadow: 0 0 0 3px rgba(94, 172, 18, .15) !important;
    outline: none !important;
}

/* Even vertical rhythm between rows (kill uneven margins) */
body.woocommerce-checkout #customer_details p.form-row {
    margin-bottom: var(--co-gap) !important;
}
body.woocommerce-checkout #customer_details p.form-row:last-child {
    margin-bottom: 0 !important;
}

/* Make select2 / native selects match the input height precisely */
body.woocommerce-checkout #customer_details .select2-container .select2-selection--single {
    height: var(--co-field-h) !important;
    display: flex;
    align-items: center;
}
body.woocommerce-checkout #customer_details .select2-container--default
    .select2-selection--single .select2-selection__rendered {
    line-height: var(--co-field-h) !important;
}

/* Floating label vertical centering stays aligned with the new height */
body.woocommerce-checkout .fl-wrap .fl-label {
    top: 50%;
    transform: translateY(-50%);
}
body.woocommerce-checkout .fl-wrap.fl-is-active .fl-label {
    top: 10px;
    transform: none;
}

/* =========================================================
   E) Payment gateway logos — uniform height, keep aspect ratio
   The three gateway logos ship at very different sizes:
     Melli   38×63  (tall/narrow)
     Saman   100×50 (2:1)
     Parsian 186×70 (wide)
   Normalize them to one logical height so the row looks tidy,
   with object-fit:contain so none of them gets stretched.
   ========================================================= */
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method label img,
body.woocommerce-checkout ul.payment_methods li.wc_payment_method label img {
    height: 40px !important;
    width: auto !important;
    max-width: 120px !important;     /* cap the wide Parsian logo */
    object-fit: contain !important;
    vertical-align: middle !important;
    margin: 0 0 0 10px !important;    /* RTL: space between logo and label text */
    float: none !important;
    display: inline-block !important;
}

/* Keep label inline so the bank name + logo stay on one line with the
   radio (radio is a sibling of label). Just vertically center the img. */
body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method > label {
    display: inline !important;
    line-height: 40px;
}

/* =========================================================
   D) Mobile — stack cleanly, no icon collision on small screens
   ========================================================= */
@media (max-width: 849px) {
    body.woocommerce-checkout .checkout-sidebar {
        max-width: 100% !important;
        width: 100% !important;
        margin-top: 24px;
    }
    body.woocommerce-checkout #customer_details .input-text,
    body.woocommerce-checkout #customer_details .fl-input {
        font-size: 16px; /* prevent iOS zoom-on-focus */
    }
}