/* ========================================================================== 
   Ganjeh Kala — WooCommerce shipping methods
   Canonical styling for the real WooCommerce classic shipping markup.
   ========================================================================== */
.woocommerce-shipping-methods {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    direction: rtl;
    box-sizing: border-box;
}

.woocommerce-shipping-methods > li {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

.woocommerce-shipping-methods > li > input[type="radio"][name^="shipping_method"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}

/*
 * WooCommerce's native label is mostly plain text + optional price markup.
 * Do not make it a column/flex wrapper: doing so turns its anonymous text
 * nodes into separate flex items and causes the compact/broken badges seen
 * on checkout. Keep the text flow intact and position the radio indicator.
 */
.woocommerce-shipping-methods > li > label {
    position: relative;
    display: block !important;
    width: 100% !important;
    min-width: 0;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: var(--gk-border-width, 1px) solid var(--gk-border-color, #e5e7eb);
    border-radius: var(--gk-radius-md, 10px);
    background: var(--gk-surface, #fff);
    color: var(--gk-text, #111827);
    box-sizing: border-box;
    cursor: pointer;
    text-align: right !important;
    line-height: 1.85;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.woocommerce-shipping-methods > li > input[type="radio"][name^="shipping_method"] + label {
    padding-inline-end: 42px !important;
}

.woocommerce-shipping-methods > li > input[type="radio"][name^="shipping_method"] + label::before {
    content: "";
    position: absolute;
    inset-inline-start: auto;
    inset-inline-end: 14px;
    top: 50%;
    width: 16px;
    height: 16px;
    border: 2px solid var(--gk-border-color, #d1d5db);
    border-radius: 50%;
    box-sizing: border-box;
    transform: translateY(-50%);
    background: var(--gk-surface, #fff);
}

.woocommerce-shipping-methods > li:hover > label {
    border-color: color-mix(in srgb, var(--gk-primary) 55%, var(--gk-border-color, #e5e7eb));
    background: color-mix(in srgb, var(--gk-primary) 2.5%, var(--gk-surface, #fff));
}

/* CSS owns selected state; the JS class remains as a backward-compatible hook. */
.woocommerce-shipping-methods > li > input[type="radio"]:checked + label,
.woocommerce-shipping-methods > li.gk-shipping-card--active > label {
    border-color: var(--gk-primary);
    background: color-mix(in srgb, var(--gk-primary) 7%, var(--gk-surface, #fff));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gk-primary) 14%, transparent);
}

.woocommerce-shipping-methods > li > input[type="radio"]:checked + label::before,
.woocommerce-shipping-methods > li.gk-shipping-card--active > input[type="radio"] + label::before {
    border: 5px solid var(--gk-primary);
}

.woocommerce-shipping-methods > li > input[type="radio"]:focus-visible + label {
    outline: 3px solid color-mix(in srgb, var(--gk-primary) 30%, transparent);
    outline-offset: 2px;
}

.woocommerce-shipping-methods > li > label .amount,
.woocommerce-shipping-methods > li > label bdi {
    white-space: nowrap;
}

/* Optional enriched shipping markup remains supported. */
.gk-shipping-card__content {
    display: grid;
    gap: 3px;
    width: 100%;
    min-width: 0;
}

.gk-shipping-card__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-width: 0;
}

.gk-shipping-card__title,
.gk-shipping-card__description,
.gk-shipping-card__eta,
.gk-shipping-card__price {
    min-width: 0;
    overflow-wrap: anywhere;
}

.gk-shipping-card__title,
.gk-shipping-card__price {
    font-size: .9rem;
    font-weight: 600;
}

.gk-shipping-card__description,
.gk-shipping-card__eta {
    font-size: .78rem;
    color: var(--gk-neutral-600, #64748b);
}

.gk-shipping-card__price .amount,
.gk-shipping-card__price bdi {
    white-space: nowrap;
}

/* Checkout review: shipping needs the full content width on phones/tablets. */
@media (max-width: 768px) {
    body.gk-checkout-layout table.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals.shipping,
    body.gk-checkout-layout table.woocommerce-checkout-review-order-table tfoot tr.shipping {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    body.gk-checkout-layout table.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals.shipping > th,
    body.gk-checkout-layout table.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals.shipping > td,
    body.gk-checkout-layout table.woocommerce-checkout-review-order-table tfoot tr.shipping > th,
    body.gk-checkout-layout table.woocommerce-checkout-review-order-table tfoot tr.shipping > td {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        text-align: right !important;
    }

    body.gk-checkout-layout table.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals.shipping > th,
    body.gk-checkout-layout table.woocommerce-checkout-review-order-table tfoot tr.shipping > th {
        padding-bottom: 0 !important;
    }

    body.gk-checkout-layout table.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals.shipping > td,
    body.gk-checkout-layout table.woocommerce-checkout-review-order-table tfoot tr.shipping > td {
        padding-top: 0 !important;
    }

    body.gk-checkout-layout .woocommerce-shipping-methods,
    body.gk-checkout-layout .woocommerce-shipping-methods > li {
        width: 100% !important;
    }

    .woocommerce-shipping-methods > li > label {
        min-height: 46px;
        padding: 10px 11px !important;
        border-radius: 11px;
        font-size: 12.5px;
        line-height: 1.85;
    }

    .woocommerce-shipping-methods > li > input[type="radio"][name^="shipping_method"] + label {
        padding-inline-end: 40px !important;
    }

    .woocommerce-shipping-methods > li > input[type="radio"][name^="shipping_method"] + label::before {
        inset-inline-end: 13px;
    }
}