/* =============================================================================
   Leka TMS — Checkout & Cart Styles
   checkout-new.css
   ============================================================================= */


/* ── 1. CSS Custom Properties ──────────────────────────────────────────────── */

:root {
    --sp-4:  4px;
    --sp-8:  8px;
    --sp-12: 12px;
    --sp-16: 16px;
    --sp-20: 20px;
    --sp-24: 24px;
    --sp-32: 32px;
    --sp-48: 48px;
    --sp-64: 64px;
}


/* ── 2. Utility Classes ─────────────────────────────────────────────────────── */

.padding-0   { padding:    0 !important; }
.margin-top-0 { margin-top: 0 !important; }


/* ── 3. Shipping Method List ────────────────────────────────────────────────── */
/* Afleveradres verbergen wanneer bezorging geselecteerd of dropship-only */
/*.leka-delivery-selected .woocommerce-shipping-fields {
    display: none !important;
}*/

/* .shipping_address standaard verborgen — JS toont het bij 'Op een ander adres' */
.shipping_address {
    display: none;
}

#shipping_method > li {
    flex-wrap:       wrap;
    justify-content: flex-start !important;
    align-items:     flex-start !important;
}

#shipping_method > li > .leka-shipping-breakdown {
    margin-top:  6px;
    margin-left: 0;
    flex-grow:   3;
    flex-basis:  100%;
}

#shipping_method > li > .leka-shipping-breakdown ul {
    margin-left: 20px;
    margin-top:  6px;
}

#shipping_method > li > .leka-shipping-breakdown ul li small {
    margin: 0 auto 0 0;
}

/* Hide shipping method labels — price shown separately */
#shipping_method_0_leka_shipping_vdt + label,
#shipping_method_1_leka_shipping_clg + label {
    font-size: 0;
}

#shipping_method_0_leka_shipping_vdt + label .woocommerce-Price-amount,
#shipping_method_1_leka_shipping_clg + label .woocommerce-Price-amount {
    font-size: 16px;
}

/* Hide default WooCommerce shipping row when our combined row is present */
tr.shipping:not(.leka-shipping-combined) {
    display: none !important;
}

/* Hide shipping destination + calculator when a pickup breakdown is shown */
.woocommerce-shipping-totals:has(.is-pickup-breakdown) .woocommerce-shipping-destination,
.woocommerce-shipping-totals:has(.is-pickup-breakdown) .woocommerce-shipping-calculator {
    display: none;
}


/* ── 4. Order Totals Shipping Row ───────────────────────────────────────────── */

.yk-order-totals__row--shipping {
    flex-wrap: wrap;
}

.yk-order-totals__row--shipping > span:last-child {
    font-size:       small !important;
    justify-content: flex-start !important;
    flex-wrap:       wrap;
}

.yk-order-totals__row--shipping .woocommerce-shipping-methods {
    flex-wrap:   wrap;
    width:       100%;
    align-items: flex-start !important;
}

.yk-order-totals__row--shipping:not(.leka-shipping-combined) {
    display: none !important;
}

.yk-order-totals__row > span:first-child {
    flex: none !important;
}


/* ── 5. Pickup Radio Cards ──────────────────────────────────────────────────── */

/* --- Heading above the cards --- */
.pickup-field-heading {
    display:        block !important;
    color:          var(--color-text-heading, #0F1932) !important;
    font-family:    var(--Font-Family-Heading, Montserrat), sans-serif !important;
    font-size:      var(--Font-Size-XL, 20px) !important;
    font-style:     normal !important;
    font-weight:    700 !important;
    line-height:    125% !important;
    letter-spacing: -0.4px !important;
    margin-bottom:  12px !important;
}

/* --- Card list --- */
.pickup-radio-options {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    padding:        0;
    margin:         0px 0 0;
}

.pickup-radio-options li {
    list-style-type: none;
    margin-bottom: 0px;
}

/* --- Individual card label --- */
.pickup-radio-options li label {
    display:         flex !important;
    flex-direction:  row !important;
    flex-wrap:       wrap !important;
    align-items:     center;
    gap:             0;
    padding:         12px 16px;
    cursor:          pointer;
    color:           var(--color-text-body, #616161) !important;
    font-size:       var(--Font-Size-S, 14px) !important;
    font-style:      normal !important;
    font-weight:     500 !important;
    line-height:     150% !important;
    border-radius:   var(--Corner-radius-Surface, 4px);
    border:          1px solid rgba(224, 224, 224, 0.35);
    background:      var(--Gray-50, #FAFAFA);
    transition:      border 0.15s ease, background 0.15s ease;
}

/* Selected state */
.pickup-radio-options li:has(input[type="radio"]:checked) label {
    border:     2px solid var(--Brand-Green, #4FA0C1);
    background: rgba(79, 160, 193, 0.10);
}

/* Keyboard focus ring */
.pickup-radio-options li:has(input[type="radio"]:focus-visible) label {
    outline:        2px solid var(--Brand-Green, #4FA0C1);
    outline-offset: 2px;
}

/* Hide native radio visually — keep it accessible/focusable */
.pickup-radio-options li label input[type="radio"] {
    position: absolute;
    opacity:  0;
    width:    1px;
    height:   1px;
    margin:   -1px;
    overflow: hidden;
    clip:     rect(0 0 0 0);
}

/* --- Icon + label row inside card --- */
.pickup-option-icon-text {
    display:        flex !important;
    flex-direction: row !important;
    align-items:    center;
    gap:            12px;
    width:          100%;
}

.pickup-option-icon-text span {
    color:       #616161 !important;
    font-family: "Area Normal", sans-serif !important;
    font-size:   14px !important;
    font-style:  normal !important;
    font-weight: 500 !important;
    line-height: 150% !important;
}

.pickup-option-icon {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
}

/* --- Subtext below icon row --- */
.pickup-option-subtext {
    color:       var(--color-text-body, #616161) !important;
    font-family: "Area Normal", sans-serif !important;
    font-size:   12px !important;
    font-style:  normal !important;
    font-weight: 500 !important;
    line-height: 150% !important;
    text-align:  left !important;
}

/* --- Extra info / tooltip area --- */
.pickup-option-extra-info {
    position: relative;
}

.pickup-option-extra-info .pickup-option-subtext {
    display:       block;
    padding-right: 30px;
}

.more-info-icon {
    position:        absolute;
    top:             0;
    right:           0;
    width:           20px;
    height:          20px;
    display:         flex;
    justify-content: center;
    align-items:     center;
}


/* ── 6. Tooltip ─────────────────────────────────────────────────────────────── */

.tooltip-popup {
    position:       absolute;
    background:     #333;
    color:          #fff;
    padding:        6px 10px;
    border-radius:  4px;
    font-size:      12px;
    line-height:    1.4;
    max-width:      220px;
    white-space:    normal;
    z-index:        9999;
    pointer-events: none;
}

.tooltip-popup::after {
    content: '';
    position: absolute;
    border:   5px solid transparent;
}

.tooltip-popup.tooltip-top::after {
    top:       100%;
    left:      50%;
    transform: translateX(-50%);
    border-top-color: #333;
}


/* ── 7. Billing Address Fields ──────────────────────────────────────────────── */

.woocommerce-billing-fields {
    background-image: linear-gradient(
        to bottom,
        #ffffff 0%,
        #ffffff 60%,
        transparent 60%,
        transparent 100%
    ) !important;
    padding-left:   0 !important;
    padding-right:  0 !important;
    padding-top:    var(--sp-16) !important;
    padding-bottom: 0 !important;
    border-radius:  .25rem;
}

.woocommerce-billing-fields > h3 {
    padding-left:  var(--sp-16) !important;
    padding-right: var(--sp-16) !important;
}

.woocommerce-billing-fields__field-wrapper {
    padding-left:   var(--sp-16) !important;
    padding-right:  var(--sp-16) !important;
    padding-bottom: var(--sp-16) !important;
    border-radius:  .25rem !important;
    background:     #ffffff !important;
}

.woocommerce-shipping-fields {
    padding: var(--sp-20) var(--sp-32) !important;
}


/* ── 8. Pickup / Billing Notice Field ───────────────────────────────────────── */

.pickup-extra-info-field,
.leka-billing-address-notice {
    background:    var(--yk-white);
    border-radius: .25rem;
}

.pickup-extra-info-field:not(.padding-0),
.leka-billing-address-notice:not(.padding-0) {
    padding: var(--sp-16) !important;
}

.leka-billing-address-notice {
    margin-top: var(--sp-12) !important;
}

.leka-billing-address-notice p {
    font-size: var(--Font-Size-S, 14px) !important;
    color:     var(--color-text-body, #616161) !important;
}

#pickup_whole_order_field h3,
#pickup_allowed_products_field h3 {
    margin-bottom: 0.5rem !important;
}

#pickup_whole_order_field:not(.margin-top-0),
#pickup_allowed_products_field:not(.margin-top-0),
#pickup_delivery_only_field:not(.margin-top-0) {
    margin-top: 0.75rem !important;
}


/* ── 9. Billing Address Mini-Form (cart totals) ─────────────────────────────── */

.leka-billing-address-prompt__text {
    text-align:    left !important;
    margin-bottom: .75rem !important;
}

.leka-billing-address-form label {
    text-align: left;
}

.leka-billing-submit {
    margin-top: .75rem !important;
}


/* ── 10. Shipping Calculation Debug Info ────────────────────────────────────── */

.leka-calculation-info {
    margin-top: 5px;
    padding:    5px;
    border:     1px solid #ccc;
}

.leka-calculation-info-winner  { background-color: #fffacd; font-weight: bold; }
.leka-calculation-info-error   { color: red; }
.leka-calculation-info-warning { color: orange; }
.leka-calculation-info-success { color: green; }