/* ==========================================================================
   Tiphereth — HikaShop checkout overrides
   Loaded by YOOtheme automatically (LoadThemeHead → style:theme-custom).
   Target only HikaShop checkout/cart so we do not affect the rest of the site.
   ========================================================================== */

/* --- 1. Container fits the viewport, no horizontal overflow on mobile --- */
#hikashop_checkout,
.hikashop_checkout_page,
.hikashop_checkout_cart {
    max-width: 100%;
    box-sizing: border-box;
}

.hikashop_checkout_cart {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Force the cart table to use the available width and break long lines */
.hikashop_checkout_cart > table,
#hikashop_checkout table.hikashop_cart_listing {
    width: 100% !important;
    max-width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    word-break: break-word;
}

.hikashop_checkout_cart td,
.hikashop_checkout_cart th {
    padding: 8px 6px;
    vertical-align: middle;
    word-break: break-word;
}

/* Right-align price/total columns so the value never sits on the screen edge */
.hikashop_cart_product_price_value,
.hikashop_cart_product_total_value,
.hikashop_cart_shipping_value,
.hikashop_cart_payment_value,
.hikashop_cart_total_value,
.hikashop_cart_coupon_value,
.hikashop_cart_additional_value {
    text-align: right;
    white-space: nowrap;
}

/* --- 2. Mobile: stack each row so the totals never get clipped --- */
@media (max-width: 767px) {

    /* Hide the table header row; we will inline labels via data-title */
    .hikashop_checkout_cart thead {
        display: none;
    }

    /* Each row becomes a card */
    .hikashop_checkout_cart > table,
    .hikashop_checkout_cart > table > tbody,
    .hikashop_checkout_cart > table > tfoot {
        display: block;
        width: 100%;
    }

    .hikashop_checkout_cart > table > tbody > tr,
    .hikashop_checkout_cart > table > tfoot > tr {
        display: block;
        width: 100%;
        padding: 8px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .hikashop_checkout_cart > table > tbody > tr > td,
    .hikashop_checkout_cart > table > tfoot > tr > td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 4px 8px;
        border: 0;
        text-align: right;
    }

    /* Inject the column label on the left side using the data-title HikaShop
       already puts on the <td>. Falls back gracefully if missing. */
    .hikashop_checkout_cart > table > tbody > tr > td[data-title]::before,
    .hikashop_checkout_cart > table > tfoot > tr > td[data-title]::before {
        content: attr(data-title);
        font-weight: 600;
        text-align: left;
        flex: 1 1 auto;
        word-break: break-word;
        opacity: 0.85;
    }

    /* The product image cell should not show a label, just the image */
    .hikashop_cart_product_image_value::before,
    .hikashop_cart_product_image_value[data-title]::before {
        content: "" !important;
    }

    .hikashop_cart_product_image_value img {
        max-width: 80px;
        height: auto;
    }

    /* Final totals row — bigger, clearer */
    .hikashop_cart_total_row td.hikashop_cart_total_value,
    .hikashop_cart_total_row .hikashop_checkout_cart_final_total {
        font-size: 1.15rem;
        font-weight: 700;
    }

    /* Quantity input should not blow up the row */
    .hikashop_checkout_cart input[type="text"],
    .hikashop_checkout_cart input[type="number"] {
        max-width: 70px;
    }
}

/* --- 3. Step blocks (address / shipping / payment) keep their gutter --- */
@media (max-width: 767px) {
    #hikashop_checkout_shipping,
    #hikashop_checkout_payment,
    #hikashop_checkout_address,
    #hikashop_checkout_billing_address,
    #hikashop_checkout_shipping_address,
    #hikashop_checkout_fields,
    #hikashop_checkout_login,
    #hikashop_checkout_terms,
    #hikashop_checkout_coupon {
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }

    /* Address form: stop two-column field layouts on narrow screens */
    #hikashop_checkout_address .hikashop_address_left,
    #hikashop_checkout_address .hikashop_address_right,
    #hikashop_checkout_billing_address .hk-row-fluid > [class*="hkc-md-"],
    #hikashop_checkout_shipping_address .hk-row-fluid > [class*="hkc-md-"] {
        width: 100% !important;
        float: none !important;
        display: block !important;
        margin-left: 0 !important;
    }

    /* Buttons row: never push the primary CTA off-screen */
    .hikashop_checkout_buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .hikashop_checkout_buttons .btn,
    .hikashop_checkout_buttons input[type="submit"] {
        flex: 1 1 100%;
    }
}

/* --- 4. Pre-address state: hide everything that depends on an address.
       Shipping, payment, coupon, cart totals and the cart product list all
       need an address to render meaningful content (no shipping = no totals,
       no payment surcharge, etc.). Until the user fills the address and
       clicks Next, show only the address form + the address-step buttons.
       JS removes .pre-address once an address is saved on the cart, then
       the rest of the checkout reveals itself with real values.
       Container classes used are stable; the IDs have step/pos suffixes. */
.hikashop_checkout_page.pre-address .hikashop_checkout_shipping,
.hikashop_checkout_page.pre-address .hikashop_checkout_payment,
.hikashop_checkout_page.pre-address .hikashop_checkout_coupon {
    display: none !important;
}

/* --- 5. Cosmetic: tighten the HikaShop alert blocks so they don't dominate --- */
#hikashop_checkout .hikashop_error,
#hikashop_checkout .alert-error {
    padding: 10px 14px;
    border-radius: 6px;
    margin: 10px 0;
}

/* --- 6. Checkout layout & UX -----------------------------------------------
   Goals on every viewport (especially mobile):
   1. The user sees what they are buying (cart preview) before any payment UI.
   2. Each section is a clearly bordered card with a heading, no ambiguity
      about where billing ends and shipping begins.
   3. The primary action (Next/Finish) is sticky on mobile so the user
      never has to scroll past totals + payment + cart products to find it.
   ------------------------------------------------------------------------- */

/* Make the checkout container a flex column so we can re-order blocks
   without touching the PHP templates. */
#hikashop_checkout {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Visual order — top-down information flow matching common ecommerce
   checkouts (Shopify / Amazon style): identify first, then details,
   then review order, then pay. The cart preview sits right above the
   Finish button so the user confirms what they're buying just before
   committing. Lower number = appears earlier.                         */
.hikashop_checkout_login     { order: 1; }   /* email / login (identify) */
.hikashop_checkout_address   { order: 2; }   /* billing + shipping address */
.hikashop_checkout_fields    { order: 3; }   /* custom item fields */
.hikashop_checkout_shipping  { order: 4; }   /* shipping method */
.hikashop_checkout_payment   { order: 5; }   /* payment method */
.hikashop_checkout_coupon    { order: 6; }   /* coupon */
.hikashop_checkout_status    { order: 7; }   /* status / notes */
.hikashop_checkout_cart      { order: 8; }   /* order review — just above CTA */
.hikashop_checkout_terms     { order: 9; }   /* terms acceptance */
.hikashop_checkout_buttons   { order: 10; }  /* submit */

/* Card styling per block — works on top of any HikaShop / YOOtheme theme. */
.hikashop_checkout_cart,
.hikashop_checkout_login,
.hikashop_checkout_address,
.hikashop_checkout_fields,
.hikashop_checkout_shipping,
.hikashop_checkout_payment,
.hikashop_checkout_coupon,
.hikashop_checkout_status,
.hikashop_checkout_terms {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Tighten the legend/headings inside each block. */
.hikashop_checkout_cart legend,
.hikashop_checkout_address legend,
.hikashop_checkout_shipping legend,
.hikashop_checkout_payment legend,
.hikashop_checkout_coupon legend,
.hikashop_checkout_terms legend {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 10px;
    padding: 0;
    border: 0;
    width: auto;
}

/* Submit button block: pulls the primary CTA visually forward. */
.hikashop_checkout_buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: transparent;
    border: 0;
    padding: 0;
}

.hikashop_checkout_buttons .buttons_left {
    flex: 0 1 auto;
}

.hikashop_checkout_buttons .buttons_right {
    flex: 1 1 auto;
    text-align: right;
}

#hikabtn_checkout_next {
    width: 100%;
    max-width: 100%;
    padding: 14px 22px;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
}

/* Mobile: sticky CTA so the user can always submit without scrolling. */
@media (max-width: 767px) {
    #hikashop_checkout {
        padding-bottom: 90px; /* leaves room behind the sticky bar */
    }

    .hikashop_checkout_buttons {
        position: sticky;
        bottom: 0;
        z-index: 50;
        margin: 0 -8px;
        padding: 10px 12px;
        background: #fff;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
        flex-direction: column-reverse;
    }

    .hikashop_checkout_buttons .buttons_left,
    .hikashop_checkout_buttons .buttons_right {
        width: 100%;
        text-align: center;
    }

    .hikashop_checkout_buttons .buttons_left a {
        display: inline-block;
        padding: 8px 12px;
        opacity: 0.8;
        font-size: 0.9rem;
    }

    /* Hide the floating progress bar separator (clear:both spacer) */
    .hikashop_checkout_buttons > div[style*="clear:both"] {
        display: none;
    }
}

/* Cart preview right above the CTA: scannable label so the user knows
   the block below the address/payment forms is the final order review. */
.hikashop_checkout_cart::before {
    content: "Review your order";
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 10px;
}

/* "Change guest information" button + edit pencils — make them
   recognisable as actions, not decoration. */
.hikashop_checkout_address .hikashop_checkout_address_edit,
.hikashop_checkout_address .hikashop_address_edit_button {
    font-size: 0.85rem;
    color: inherit;
    opacity: 0.7;
}

.hikashop_checkout_address .hikashop_checkout_address_edit:hover,
.hikashop_checkout_address .hikashop_address_edit_button:hover {
    opacity: 1;
}