/* IllumiWeb Checkout Suite — frontend
   A calm, confident, conversion-minded checkout. Two-column on desktop (form +
   persistent summary), single column with a collapsible summary on mobile. */
:root { --iwc-cs-accent: #2271b1; --iwc-cs-ease: cubic-bezier(.22,.61,.36,1); }

.iwc-checkout-steps .iwc-cs { max-width: 1080px; margin: 0 auto; }
.iwc-cs__form, .iwc-cs__summary { font-family: var(--iwc-cs-font, inherit); }

/* ── Theme-resistance ────────────────────────────────────────────────────────
   Page-builder themes (WPBakery, etc.) ship their own WooCommerce checkout CSS —
   floats on #order_review, .col2-set columns, widths — that fight our grid. We
   scope everything under the body class and neutralize those inside our container
   so our layout always wins regardless of theme. */
body.iwc-checkout-steps .woocommerce-checkout .iwc-cs__layout { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
body.iwc-checkout-steps .iwc-cs .iwc-cs__main { float: none !important; width: auto !important; min-width: 0; margin: 0 !important; }
body.iwc-checkout-steps .iwc-cs #order_review,
body.iwc-checkout-steps .iwc-cs #customer_details,
body.iwc-checkout-steps .iwc-cs .col2-set,
body.iwc-checkout-steps .iwc-cs .col-1,
body.iwc-checkout-steps .iwc-cs .col-2 { float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
body.iwc-checkout-steps .iwc-cs__summary { float: none !important; position: sticky; }
/* The summary must sit in the grid's right column, never float over content. */
body.iwc-checkout-steps .iwc-cs__layout > .iwc-cs__summary { grid-column: 2; grid-row: 1; }
body.iwc-checkout-steps .iwc-cs__layout > .iwc-cs__main { grid-column: 1; grid-row: 1; }

/* ── Progress indicator ──────────────────────────────────────────────────── */
.iwc-cs-progress { display: flex; list-style: none; margin: 0 0 32px; padding: 0; }
.iwc-cs-progress__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; color: #9ca3af; font-size: 13px; font-weight: 600; }
.iwc-cs-progress__item::before { content: ''; position: absolute; top: 16px; left: -50%; width: 100%; height: 2px; background: #e5e7eb; z-index: 0; transition: background .3s var(--iwc-cs-ease); }
.iwc-cs-progress__item:first-child::before { display: none; }
.iwc-cs-progress__num { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; background: #e5e7eb; color: #6b7280; display: flex; align-items: center; justify-content: center; font-weight: 700; transition: background .25s var(--iwc-cs-ease), color .25s var(--iwc-cs-ease), transform .2s var(--iwc-cs-ease); }
.iwc-cs-progress__item.is-current .iwc-cs-progress__num { background: var(--iwc-cs-accent); color: #fff; transform: scale(1.08); box-shadow: 0 4px 12px color-mix(in srgb, var(--iwc-cs-accent) 40%, transparent); }
.iwc-cs-progress__item.is-done .iwc-cs-progress__num { background: var(--iwc-cs-accent); color: #fff; }
.iwc-cs-progress__item.is-done { cursor: pointer; color: var(--iwc-cs-accent); }
.iwc-cs-progress__item.is-current { color: var(--iwc-cs-accent); }
.iwc-cs-progress__item.is-done::before,
.iwc-cs-progress__item.is-current::before { background: var(--iwc-cs-accent); }

/* ── Steps ───────────────────────────────────────────────────────────────────
   Three real step containers (contact / shipping / payment). Inactive steps are
   off-screen at FULL WIDTH (never display:none) so payment iframes in the payment
   step stay measurable and initialize. */
.iwc-cs__step { position: absolute; left: -9999px; top: 0; width: 100%; opacity: 0; pointer-events: none; }
.iwc-cs__step.is-active { position: static; left: auto; opacity: 1; pointer-events: auto; animation: iwc-cs-fade .28s var(--iwc-cs-ease); }
@keyframes iwc-cs-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.iwc-cs__panel { margin-bottom: 20px; }
.iwc-cs__review-title { margin: 0 0 16px; font-size: 18px; }

/* Contact step: relocated fields + "buying as a company" toggle. */
.iwc-checkout-steps .iwc-cs-contact-slot { margin-bottom: 4px; }
/* Desktop: two per row — first/last name, then phone/email. */
@media (min-width: 601px) {
    .iwc-checkout-steps .iwc-cs-contact-slot { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
    .iwc-checkout-steps .iwc-cs-contact-slot > .form-row { width: auto !important; float: none !important; margin-right: 0 !important; }
    /* company toggle + company row span the full width */
    .iwc-checkout-steps .iwc-cs-company-toggle,
    .iwc-checkout-steps .iwc-cs-company-row { grid-column: 1 / -1; }
}
/* ── UNIFIED toggle checkboxes (step 1 company, step 2 ship-to-diff + note):
   one size, one font, one look, everywhere. ─────────────────────────────── */
.iwc-checkout-steps .iwc-cs-company-toggle,
.iwc-checkout-steps .iwc-cs-notes-toggle,
.iwc-checkout-steps .iwc-cs #ship-to-different-address label {
    display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 14px;
    font-family: inherit; font-size: 14px !important; font-weight: 600; line-height: 1.35;
    cursor: pointer; color: #444; text-transform: none; letter-spacing: normal;
}
.iwc-checkout-steps .iwc-cs-company-toggle input,
.iwc-checkout-steps .iwc-cs-notes-toggle input,
.iwc-checkout-steps .iwc-cs #ship-to-different-address input {
    width: 18px !important; height: 18px; margin: 0; flex: 0 0 18px;
    accent-color: var(--iwc-cs-accent); cursor: pointer;
}
/* WC renders the ship-to-diff checkbox inside an <h3>: strip the heading look. */
.iwc-checkout-steps .iwc-cs #ship-to-different-address {
    margin: 0; padding: 0; border: 0; line-height: 1.35;
    font-family: inherit; font-size: 14px; font-weight: 600;
    text-transform: none; letter-spacing: normal;
}

/* ── Step-2 toggles row: 2 columns, same rhythm as the step indicators.
   Below it, reveal order is fixed by JS: notes textarea first, then the extra
   shipping address, then the shipping methods. ─────────────────────────── */
.iwc-checkout-steps .iwc-cs-toggles {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px;
    align-items: center; margin: 14px 0 6px;
}
.iwc-checkout-steps .iwc-cs-toggles .iwc-cs-notes-toggle,
.iwc-checkout-steps .iwc-cs-toggles #ship-to-different-address label { margin: 0; }
.iwc-checkout-steps .iwc-cs-company-row { animation: iwc-cs-fade .2s var(--iwc-cs-ease); }
/* Address step slot */
.iwc-checkout-steps .iwc-cs-address-slot { margin-bottom: 8px; }

/* ── Nav buttons ─────────────────────────────────────────────────────────── */
.iwc-cs__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
.iwc-cs__back { background: 0; border: 0; color: #6b7280; cursor: pointer; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; padding: 8px 4px; }
.iwc-cs__back::before { content: '\2190'; }
.iwc-cs__back:hover { color: var(--iwc-cs-accent); }
.iwc-cs__next { position: relative; margin-left: auto; background: var(--iwc-cs-btn, var(--iwc-cs-accent)) !important; border-color: var(--iwc-cs-btn, var(--iwc-cs-accent)) !important; color: var(--iwc-cs-btn-text, #fff) !important; font-weight: 700 !important; padding: 14px 28px !important; border-radius: 11px !important; transition: filter .15s, transform .1s; }
.iwc-cs__next:hover { filter: brightness(1.06); }
.iwc-cs__next:active { transform: scale(.98); }
.iwc-cs__next.is-loading { color: transparent !important; pointer-events: none; }
.iwc-cs__next.is-loading::after { content: ''; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: iwc-cs-spin .7s linear infinite; }
@keyframes iwc-cs-spin { to { transform: rotate(360deg); } }

/* Progressive address unlock — locked fields read as not-yet-active. */
.iwc-checkout-steps .iwc-cs-locked,
.iwc-checkout-steps .iwc-cs-locked-row input,
.iwc-checkout-steps .iwc-cs-locked-row select { background: #f6f6f8 !important; color: #b6b6be !important; cursor: not-allowed !important; }
.iwc-checkout-steps .iwc-cs-locked-row { opacity: .55; transition: opacity .25s var(--iwc-cs-ease); }
.iwc-checkout-steps .iwc-cs-locked-row label { color: #b6b6be !important; }

/* Inline field error accent (complements WooCommerce's own) */
.iwc-cs__form .iwc-cs-invalid input,
.iwc-cs__form .iwc-cs-invalid select,
.iwc-cs__form .iwc-cs-invalid textarea { border-color: #d63638 !important; box-shadow: 0 0 0 2px rgba(214,54,56,.12) !important; }

/* ── Persistent order summary ────────────────────────────────────────────── */
.iwc-cs__summary { position: sticky; top: 24px; background: #fbfbfc; border: 1px solid #ececf0; border-radius: 16px; overflow: hidden; }
.iwc-cs__summary-toggle { display: none; width: 100%; align-items: center; gap: 10px; padding: 16px 18px; background: 0; border: 0; cursor: pointer; font-size: 14px; font-weight: 700; color: #1d2327; }
.iwc-cs__summary-toggle-label { display: inline-flex; align-items: center; gap: 8px; }
.iwc-cs__summary-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--iwc-cs-accent); color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.iwc-cs__summary-toggle-total { margin-left: auto; }
.iwc-cs__summary-chevron { transition: transform .2s var(--iwc-cs-ease); }
.iwc-cs__summary-body { padding: 20px; }
.iwc-cs__summary-items { list-style: none; margin: 0 0 16px; padding: 0; }
.iwc-cs__summary-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #f0f0f3; }
.iwc-cs__summary-thumb { position: relative; }
.iwc-cs__summary-thumb img { width: 52px; height: 52px; object-fit: cover; border-radius: 9px; background: #eee; }
.iwc-cs__summary-qty { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #33333a; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.iwc-cs__summary-name { font-size: 13px; font-weight: 600; line-height: 1.35; color: #1d2327; }
.iwc-cs__summary-price { font-size: 13px; font-weight: 700; white-space: nowrap; }
.iwc-cs__summary-totals { padding-top: 4px; }
.iwc-cs__summary-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; }
.iwc-cs__summary-row--muted { color: #8a8a93; font-size: 13px; }
.iwc-cs__trust { display: flex; align-items: center; gap: 7px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #f0f0f3; color: #1a9f4b; font-size: 12.5px; font-weight: 600; }

/* ── Thank-you ───────────────────────────────────────────────────────────── */
.iwc-cs-thankyou { text-align: center; max-width: 620px; margin: 0 auto 36px; font-family: var(--iwc-cs-font, inherit); }
.iwc-cs-thankyou__check { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%; background: color-mix(in srgb, var(--iwc-cs-accent) 14%, #fff); color: var(--iwc-cs-accent); display: flex; align-items: center; justify-content: center; animation: iwc-cs-pop .4s var(--iwc-cs-ease); }
@keyframes iwc-cs-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
.iwc-cs-thankyou__heading { font-size: 29px; margin: 0 0 10px; }
.iwc-cs-thankyou__message { color: #555; font-size: 15px; line-height: 1.6; }

/* ── Responsive ──────────────────────────────────────────────────────────────
   IMPORTANT: the desktop grid is defined with high specificity
   (body.iwc-checkout-steps .woocommerce-checkout .iwc-cs__layout), so the mobile
   override MUST match that specificity or it loses and the fields stay crammed
   next to the 360px summary. We mirror the selector exactly. */
@media (max-width: 900px) {
    body.iwc-checkout-steps .woocommerce-checkout .iwc-cs__layout,
    body.iwc-checkout-steps .iwc-cs__layout {
        display: block !important;   /* single column — fields get the full width */
        gap: 0 !important;
    }
    body.iwc-checkout-steps .iwc-cs__layout > .iwc-cs__main {
        grid-column: auto !important; grid-row: auto !important;
        width: 100% !important; float: none !important;
    }
    /* Summary pinned to the BOTTOM, full width, collapsed by default. */
    body.iwc-checkout-steps .iwc-cs__layout > .iwc-cs__summary {
        grid-column: auto !important; grid-row: auto !important;
        order: 99; position: static !important; width: 100% !important;
        margin-top: 24px;
    }
    .iwc-cs__summary-toggle { display: flex !important; }
    .iwc-cs__summary-body { display: none; padding-top: 0; }
    .iwc-cs__summary.is-open .iwc-cs__summary-body { display: block; }
    .iwc-cs__summary.is-open .iwc-cs__summary-chevron { transform: rotate(180deg); }

    /* Fields always full width on mobile — never crammed. */
    body.iwc-checkout-steps .iwc-cs__form .form-row,
    body.iwc-checkout-steps .iwc-cs__form .form-row-first,
    body.iwc-checkout-steps .iwc-cs__form .form-row-last,
    body.iwc-checkout-steps .iwc-cs__form .form-row-wide {
        width: 100% !important; float: none !important; clear: both !important;
        margin-right: 0 !important; padding-right: 0 !important;
    }
    body.iwc-checkout-steps .iwc-cs__form input,
    body.iwc-checkout-steps .iwc-cs__form select,
    body.iwc-checkout-steps .iwc-cs__form textarea { width: 100% !important; box-sizing: border-box; }
}
@media (max-width: 480px) {
    .iwc-cs-progress__label { font-size: 11px; }
    .iwc-cs__next { width: 100%; }
    .iwc-cs__nav { flex-wrap: wrap; }
    .iwc-checkout-steps .iwc-cs { padding-left: 4px; padding-right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .iwc-cs__step.is-active, .iwc-cs-thankyou__check { animation: none; }
    .iwc-cs-progress__num, .iwc-cs__next, .iwc-cs__summary-chevron { transition: none; }
    .iwc-cs__next.is-loading::after { animation: none; }
}

/* ── Editable cart on checkout page ──────────────────────────────────────── */
.iwc-checkout-steps .iwc-cs-cart { position: relative; margin: 0 0 28px; padding: 18px 20px; background: #fbfbfc; border: 1px solid #ececf0; border-radius: 14px; }
.iwc-checkout-steps .iwc-cs-cart__title { margin: 0 0 12px; font-size: 15px; }
.iwc-checkout-steps .iwc-cs-cart__items { list-style: none; margin: 0; padding: 0; }
.iwc-checkout-steps .iwc-cs-cart__item { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f0f3; }
.iwc-checkout-steps .iwc-cs-cart__item:last-child { border-bottom: 0; }
.iwc-checkout-steps .iwc-cs-cart__item.is-removing { opacity: .4; }
.iwc-checkout-steps .iwc-cs-cart__thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: 9px; background: #eee; }
.iwc-checkout-steps .iwc-cs-cart__name { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.iwc-checkout-steps .iwc-cs-cart__price { font-size: 12.5px; color: #6b7280; margin-top: 2px; }
.iwc-checkout-steps .iwc-cs-cart__qty { display: inline-flex; align-items: center; border: 1px solid #e3e3e8; border-radius: 8px; overflow: hidden; background: #fff; }
.iwc-checkout-steps .iwc-cs-cart__qty.is-loading { opacity: .5; pointer-events: none; }
.iwc-checkout-steps .iwc-cs-cart__qty--fixed { min-width: 28px; text-align: center; color: #6b7280; font-size: 13px; }
.iwc-checkout-steps .iwc-cs-cart__qbtn { width: 28px; height: 28px; border: 0; background: #fafafb; cursor: pointer; font-size: 15px; color: #333; }
.iwc-checkout-steps .iwc-cs-cart__qbtn:hover { background: #eeeef1; }
.iwc-checkout-steps .iwc-cs-cart__qnum { min-width: 32px; text-align: center; font-size: 13px; font-weight: 600; }
.iwc-checkout-steps .iwc-cs-cart__remove { width: 26px; height: 26px; border-radius: 50%; border: 0; background: 0; color: #c2c2cc; font-size: 17px; cursor: pointer; }
.iwc-checkout-steps .iwc-cs-cart__remove:hover { background: #fdecec; color: #d63638; }
.iwc-checkout-steps .iwc-cs-cart__empty { color: #888; padding: 10px 0; margin: 0; }
.iwc-checkout-steps .iwc-cs-cart__toast { position: absolute; left: 16px; right: 16px; bottom: 12px; padding: 10px 14px; border-radius: 9px; background: #23232a; color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; pointer-events: none; }
.iwc-checkout-steps .iwc-cs-cart__toast.is-show { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .iwc-checkout-steps .iwc-cs-cart__toast { transition: none; } }
@media (max-width: 480px) {
    .iwc-checkout-steps .iwc-cs-cart { padding: 14px 14px; }
    .iwc-checkout-steps .iwc-cs-cart__item { grid-template-columns: 48px 1fr auto; gap: 10px; row-gap: 8px; }
    .iwc-checkout-steps .iwc-cs-cart__thumb img { width: 48px; height: 48px; }
    .iwc-checkout-steps .iwc-cs-cart__qty { grid-column: 2 / 4; justify-self: start; margin-top: 4px; }
    .iwc-checkout-steps .iwc-cs-cart__remove { grid-column: 3; grid-row: 1; }
}

/* ── Step 3 payment focus ────────────────────────────────────────────────────
   The right-hand summary card now carries subtotal/shipping/total (synced live),
   so on the payment step we de-emphasize WooCommerce's own totals table on the
   left and keep the focus on shipping method + payment. We DON'T remove shipping
   rows (they carry the method selector) or the payment block. */
.iwc-checkout-steps #order_review .shop_table thead,
.iwc-checkout-steps #order_review .shop_table .cart-subtotal,
.iwc-checkout-steps #order_review .shop_table .order-total,
.iwc-checkout-steps #order_review .shop_table .woocommerce-shipping-totals,
.iwc-checkout-steps #order_review .shop_table tbody .cart_item {
    display: none !important;
}
.iwc-checkout-steps #order_review .shop_table { border: 0 !important; margin-bottom: 8px; }

/* Step 2 shipping method chooser (surfaced via order-review fragment). */
.iwc-checkout-steps .iwc-cs-ship { margin: 18px 0 8px; padding: 16px 18px; background: #fbfbfc; border: 1px solid #ececf0; border-radius: 12px; }
.iwc-checkout-steps .iwc-cs-ship__title { margin: 0 0 10px; font-size: 15px; }
.iwc-checkout-steps .iwc-cs-ship__list { list-style: none; margin: 0; padding: 0; }
.iwc-checkout-steps .iwc-cs-ship__row { padding: 4px 0; }
.iwc-checkout-steps .iwc-cs-ship__row label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.iwc-checkout-steps .iwc-cs-ship__row input { width: auto !important; margin: 0; }
.iwc-checkout-steps .iwc-cs-ship__cost { margin-left: auto; font-weight: 700; }
.iwc-checkout-steps .iwc-cs-ship__empty { color: #888; font-size: 13px; margin: 0; }
/* Shipping methods NEVER show before the address is complete: both copies stay
   hidden until checkout-summary-sync.js marks the .iwc-cs root ready. Safe to
   display:none — no gateway iframes live in here, and WC's order-review
   fragments replace the blocks by selector regardless of visibility. */
.iwc-checkout-steps .iwc-cs:not(.iwc-cs-ship--ready) .iwc-cs-ship { display: none !important; }
.iwc-checkout-steps .iwc-cs.iwc-cs-ship--ready .iwc-cs-ship { animation: iwc-cs-fade .28s var(--iwc-cs-ease); }

/* ── Shipping chooser placement: ONE visible copy per breakpoint ─────────────
   Desktop (>900px): the summary-card copy, top-right above the totals; the
   in-form step-2 copy is hidden. Mobile: the step-2 copy under the address
   fields; the summary copy is hidden. Both re-render from the WC session on
   every update_checkout, so they can never disagree. */
@media (min-width: 901px) {
    .iwc-checkout-steps .iwc-cs.iwc-cs-ship--ready .iwc-cs-ship[data-iwc-ship] { display: none !important; }
}
@media (max-width: 900px) {
    .iwc-checkout-steps .iwc-cs .iwc-cs-ship[data-iwc-ship-summary] { display: none !important; }
}
/* Summary-card copy styling: quiet card section above the totals. */
.iwc-checkout-steps .iwc-cs__summary .iwc-cs-ship { margin: 4px 0 14px; padding-bottom: 12px; border-bottom: 1px solid #ececf0; }
.iwc-checkout-steps .iwc-cs__summary .iwc-cs-ship__title { font-size: 13px; font-weight: 700; margin: 0 0 6px; }
.iwc-checkout-steps .iwc-cs__summary .iwc-cs-ship__row label { font-size: 13px; align-items: flex-start; }
.iwc-checkout-steps .iwc-cs__summary .iwc-cs-ship__row input { margin-top: 3px; accent-color: var(--iwc-cs-accent); }
/* Multiple options in the summary card: a compact dropdown. */
.iwc-checkout-steps .iwc-cs__summary .iwc-cs-ship__select {
    width: 100%; box-sizing: border-box; margin: 2px 0 0;
    padding: 9px 30px 9px 11px; font-size: 13px; font-weight: 600; color: #1d2327;
    border: 1px solid #d8d8e0; border-radius: 8px; background: #fff; cursor: pointer;
}
.iwc-checkout-steps .iwc-cs__summary .iwc-cs-ship__select:focus {
    outline: none; border-color: var(--iwc-cs-accent); box-shadow: 0 0 0 2px rgba(34,113,177,.15);
}
/* Estimated delivery — same quiet treatment as the "Secure, encrypted
   payment" trust line, in neutral ink (it's information, not a guarantee). */
.iwc-checkout-steps .iwc-cs-ship__eta {
    display: flex; align-items: center; gap: 7px; margin-top: 10px;
    color: #6b7280; font-size: 12.5px; font-weight: 600;
}
.iwc-checkout-steps .iwc-cs-ship__eta strong { color: #1d2327; font-weight: 700; }
.iwc-checkout-steps .iwc-cs__summary .iwc-cs-ship__eta { margin-top: 9px; }
.iwc-checkout-steps .iwc-cs__notes { margin-bottom: 18px; }
/* Delivery-note block (the toggle itself lives in the .iwc-cs-toggles row). */
.iwc-checkout-steps .iwc-cs-notes-slot { margin: 4px 0; }
.iwc-checkout-steps .iwc-cs-notes-block { margin-top: 4px; }
.iwc-checkout-steps .iwc-cs-notes-block h3 { display: none; } /* WC's "Additional information" heading — the toggle already labels it */
.iwc-checkout-steps .iwc-cs-notes-block textarea { min-height: 76px; width: 100%; box-sizing: border-box; }

/* Live total row in the summary card. */
.iwc-checkout-steps .iwc-cs__summary-row--total { font-weight: 800; font-size: 16px; border-top: 1px solid #ececf0; margin-top: 6px; padding-top: 10px; }

/* Summary card stays sticky/always-on (desktop). */
@media (min-width: 901px) {
    .iwc-checkout-steps .iwc-cs__summary { position: sticky; top: 20px; }
}

/* ── Step 2 address layout ───────────────────────────────────────────────────
   Row 1: Country + Province/State side by side. Row 2: street address (full).
   Row 3: second address line (full). Row 4: City + Postal code. Source order is
   set server-side (IWC_Checkout_Fields::address_layout) so the 2-col grid pairs
   rows naturally; any extra/custom field defaults to a full-width row. Applies
   to billing AND the ship-to-a-different-address group. */
.iwc-checkout-steps .iwc-cs__step[data-step="shipping"] #customer_details .woocommerce-billing-fields__field-wrapper,
.iwc-checkout-steps .iwc-cs__step[data-step="shipping"] #customer_details .woocommerce-shipping-fields__field-wrapper {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px;
}
/* Unknown/custom rows: full width by default. */
.iwc-checkout-steps .iwc-cs__step[data-step="shipping"] #customer_details .woocommerce-billing-fields__field-wrapper > .form-row,
.iwc-checkout-steps .iwc-cs__step[data-step="shipping"] #customer_details .woocommerce-shipping-fields__field-wrapper > .form-row {
    grid-column: 1 / -1; width: 100%; float: none;
}
/* Street pinned to ROW 1, second line ROW 2, City + Postal code ROW 3, and
   Country + Province LAST (row 4). EXPLICIT grid placement on purpose:
   WooCommerce's locale script (address-i18n.js) re-sorts address rows in the
   DOM per country, so relying on source order alone is not enough — these six
   fields render in our layout no matter what order the DOM ends up in.
   (Server-side priorities still set a matching DOM order so keyboard tabbing
   follows the visual order.) */
.iwc-checkout-steps .iwc-cs__step[data-step="shipping"] #customer_details #billing_address_1_field,
.iwc-checkout-steps .iwc-cs__step[data-step="shipping"] #customer_details #shipping_address_1_field { grid-row: 1; grid-column: 1 / -1; }
.iwc-checkout-steps .iwc-cs__step[data-step="shipping"] #customer_details #billing_address_2_field,
.iwc-checkout-steps .iwc-cs__step[data-step="shipping"] #customer_details #shipping_address_2_field { grid-row: 2; grid-column: 1 / -1; }
.iwc-checkout-steps .iwc-cs__step[data-step="shipping"] #customer_details #billing_city_field,
.iwc-checkout-steps .iwc-cs__step[data-step="shipping"] #customer_details #shipping_city_field { grid-row: 3; grid-column: 1; }
.iwc-checkout-steps .iwc-cs__step[data-step="shipping"] #customer_details #billing_postcode_field,
.iwc-checkout-steps .iwc-cs__step[data-step="shipping"] #customer_details #shipping_postcode_field { grid-row: 3; grid-column: 2; }
.iwc-checkout-steps .iwc-cs__step[data-step="shipping"] #customer_details #billing_country_field,
.iwc-checkout-steps .iwc-cs__step[data-step="shipping"] #customer_details #shipping_country_field { grid-row: 4; grid-column: 1; }
.iwc-checkout-steps .iwc-cs__step[data-step="shipping"] #customer_details #billing_state_field,
.iwc-checkout-steps .iwc-cs__step[data-step="shipping"] #customer_details #shipping_state_field { grid-row: 4; grid-column: 2; }
/* Compact spacing for the whole shipping step. */
.iwc-checkout-steps .iwc-cs__step[data-step="shipping"] .form-row { margin-bottom: 12px; }
.iwc-checkout-steps .iwc-cs__step[data-step="shipping"] .form-row label { margin-bottom: 3px; font-size: 13px; }
@media (max-width: 600px) {
    .iwc-checkout-steps .iwc-cs__step[data-step="shipping"] #customer_details .woocommerce-billing-fields__field-wrapper,
    .iwc-checkout-steps .iwc-cs__step[data-step="shipping"] #customer_details .woocommerce-shipping-fields__field-wrapper { display: block; }
    .iwc-checkout-steps .iwc-cs__step[data-step="shipping"] .form-row { width: 100% !important; }
}

/* ── Address search-first mode (Google autocomplete on) ──────────────────────
   One search box; the manual billing rows stay hidden until a place is chosen
   or "enter manually" is clicked. Classes are only added AFTER Google actually
   initializes (checkout-address.js), so a blocked/failed Google never hides
   anything — the fields work by hand. */
.iwc-checkout-steps .iwc-cs-addr-search { margin: 0 0 16px; }
.iwc-checkout-steps .iwc-cs-addr-search__label { display: block; margin-bottom: 3px; font-size: 13px; font-weight: 600; }
.iwc-checkout-steps .iwc-cs-addr-search__input { width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 15px; border: 1px solid #cfcfd6; border-radius: 8px; }
.iwc-checkout-steps .iwc-cs-addr-search__input:focus { outline: none; border-color: var(--iwc-cs-accent, #2271b1); box-shadow: 0 0 0 2px rgba(34,113,177,.15); }
.iwc-checkout-steps .iwc-cs-addr-search.iwc-cs-invalid .iwc-cs-addr-search__input { border-color: #b32d2e; }
.iwc-checkout-steps .iwc-cs-addr-search__manual { display: inline-block; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--iwc-cs-accent, #2271b1); font-size: 13px; text-decoration: underline; cursor: pointer; }
.iwc-checkout-steps .iwc-cs__step.iwc-cs-addr--search:not(.iwc-cs-addr--filled) #customer_details .woocommerce-billing-fields__field-wrapper > .iwc-cs-addr-row { display: none; }
/* Once revealed, the pre-filled rows fade in under the search box. */
.iwc-checkout-steps .iwc-cs__step.iwc-cs-addr--filled #customer_details .woocommerce-billing-fields__field-wrapper > .iwc-cs-addr-row { animation: iwc-cs-fade .28s var(--iwc-cs-ease); }

/* Inline hint when Continue is blocked by required fields. */
.iwc-checkout-steps .iwc-cs__nav-hint { align-self: center; color: #b32d2e; font-size: 13px; margin-left: 12px; }


/* ── Step 3: payment methods as TABS ─────────────────────────────────────────
   WooCommerce renders gateways as a stacked <ul.wc_payment_methods> of
   <li><input radio><label>Title</label><div.payment_box>…</div></li>.
   We keep that DOM 100% intact (moving gateway containers reloads Stripe/
   PayPal iframes) and restyle it: each label becomes a tab, the payment boxes
   flow below the tab row full-width, and WC's own JS keeps showing only the
   selected box. Clicking a tab = clicking the label = checking the radio, so
   zero extra JS and every gateway behaves exactly as on a stock checkout. */
body.iwc-checkout-steps .iwc-cs #payment ul.wc_payment_methods {
    display: flex; flex-wrap: wrap; gap: 8px;
    list-style: none; margin: 0 0 4px; padding: 0;
}
body.iwc-checkout-steps .iwc-cs #payment ul.wc_payment_methods > li.wc_payment_method { display: contents; }
/* The radio itself: visually hidden but keyboard-focusable (a11y). Matches by
   type, not class — plugins that skip .input-radio were leaking a native black
   radio dot into the tab. A branded check indicator (below) takes its place. */
body.iwc-checkout-steps .iwc-cs #payment ul.wc_payment_methods input[name="payment_method"] {
    position: absolute !important; width: 1px; height: 1px; margin: 0; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Branded CHECK INDICATOR inside each tab: a soft rounded box that fills with
   the gateway's brand color (or the accent) and a white check when selected —
   the selection state is visible even before the panel opens. */
body.iwc-checkout-steps .iwc-cs #payment ul.wc_payment_methods > li > label::before {
    content: ''; flex: 0 0 18px; width: 18px; height: 18px; box-sizing: border-box;
    border: 2px solid #c9c9d4; border-radius: 6px; background: #fff;
    transition: border-color .18s, background-color .18s;
}
body.iwc-checkout-steps .iwc-cs #payment ul.wc_payment_methods > li > input[type="radio"]:checked + label::before {
    border-color: var(--iwc-tab-brand);
    background: var(--iwc-tab-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
/* Operator-picked gateway logos (media library, via WC's own icon filter). */
body.iwc-checkout-steps .iwc-cs #payment ul.wc_payment_methods > li > label img.iwc-cs-pay-logo {
    max-height: 24px; width: auto; display: inline-block;
}
/* Tab row: MAX 4 tabs per row; each tab is a quarter of the row regardless of
   how many gateways exist (1 tab stays compact instead of stretching full
   width; 5+ wrap to a second row). */
body.iwc-checkout-steps .iwc-cs #payment ul.wc_payment_methods > li > label {
    order: 0; flex: 0 1 calc(25% - 6px); min-width: 150px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    margin: 0; padding: 13px 14px; cursor: pointer;
    background: #fafafb; border: 1px solid #e2e2e8; border-radius: 10px;
    font-weight: 600; font-size: 14px; color: #4b5563; text-align: center;
    transition: border-color .18s, background .18s, color .18s, box-shadow .18s;
}
body.iwc-checkout-steps .iwc-cs #payment ul.wc_payment_methods > li > label:hover { border-color: #c9c9d4; color: #1d2327; }
body.iwc-checkout-steps .iwc-cs #payment ul.wc_payment_methods > li > label img { max-height: 24px; width: auto; }
/* Active tab: the shopper's selection is unmistakable. Uses the gateway's own
   brand color when one is set (see BRANDING below), else the suite accent. */
body.iwc-checkout-steps .iwc-cs #payment ul.wc_payment_methods > li > label {
    --iwc-tab-brand: var(--iwc-cs-accent);
}
body.iwc-checkout-steps .iwc-cs #payment ul.wc_payment_methods > li > input[type="radio"]:checked + label {
    background: #fff; color: #1d2327;
    border-color: var(--iwc-tab-brand);
    box-shadow: inset 0 -3px 0 var(--iwc-tab-brand), 0 1px 6px rgba(0,0,0,.06);
}
body.iwc-checkout-steps .iwc-cs #payment ul.wc_payment_methods > li > input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--iwc-tab-brand); outline-offset: 2px;
}

/* ── BRANDING: color-branded tabs with the payment company's identity ────────
   Each gateway's <li> keeps its payment_method_{gateway_id} class even with
   display:contents, so brand a gateway by targeting its label through the li:

       body.iwc-checkout-steps .iwc-cs #payment li.payment_method_YOUR_ID > label {
           --iwc-tab-brand: #HEX;                          <- active color
           background-image: url(YOUR_LOGO.svg);           <- optional logo
           background-repeat: no-repeat;
           background-position: center;
           background-size: auto 20px;
           color: transparent; font-size: 0;               <- logo replaces text
       }

   Find the gateway id in WooCommerce > Settings > Payments (or inspect the li
   class). Gateways that already ship an icon <img> in their label show it
   automatically next to the title. Two common ones pre-branded below —
   substring-matched so plugin variants (ppcp-gateway, stripe_cc...) catch. */
body.iwc-checkout-steps .iwc-cs #payment li[class*="payment_method_ppcp"] > label,
body.iwc-checkout-steps .iwc-cs #payment li[class*="payment_method_paypal"] > label {
    --iwc-tab-brand: #0070ba;
}
body.iwc-checkout-steps .iwc-cs #payment li[class*="payment_method_stripe"] > label {
    --iwc-tab-brand: #635bff;
}
/* Panels: below the whole tab row, full width. WC's JS shows only the checked
   gateway's box — it opens as the selected tab's panel. */
body.iwc-checkout-steps .iwc-cs #payment ul.wc_payment_methods div.payment_box {
    order: 1; width: 100%; box-sizing: border-box;
    margin: 2px 0 0; padding: 18px 16px;
    background: #fff; border: 1px solid #e2e2e8; border-top: 3px solid var(--iwc-cs-accent);
    border-radius: 10px; font-size: 14px;
    animation: iwc-cs-fade .22s var(--iwc-cs-ease);
}
body.iwc-checkout-steps .iwc-cs #payment ul.wc_payment_methods div.payment_box::before { display: none !important; } /* kill WC's speech-bubble arrow */
@media (max-width: 600px) {
    body.iwc-checkout-steps .iwc-cs #payment ul.wc_payment_methods > li > label { flex-basis: calc(50% - 4px); min-width: calc(50% - 4px); }
}


/* reCAPTCHA before the Place Order button. */
body.iwc-checkout-steps .iwc-cs .iwc-cs-recaptcha { margin: 14px 0 12px; min-height: 78px; }
.woocommerce-checkout .iwc-cs-recaptcha { margin: 14px 0 12px; }


/* ── Placeholder-first fields (steps 1 + 2): consistent, label-free rhythm ───
   Field labels are hidden VISUALLY ONLY (screen-reader-accessible — never
   display:none, and never checkbox labels: the company / ship-to-different /
   create-account toggles keep their visible text). Placeholders carry the
   field names, derived server-side with required (*) / (optional) markers. */
.iwc-checkout-steps .iwc-cs__step[data-step="contact"] .form-row > label:not(.checkbox),
.iwc-checkout-steps .iwc-cs__step[data-step="shipping"] .form-row > label:not(.checkbox) {
    position: absolute !important; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}
/* With labels gone, the placeholder IS the field name — keep it legible. */
.iwc-checkout-steps .iwc-cs__step[data-step="contact"] .form-row input::placeholder,
.iwc-checkout-steps .iwc-cs__step[data-step="shipping"] .form-row input::placeholder,
.iwc-checkout-steps .iwc-cs__step[data-step="shipping"] .form-row textarea::placeholder {
    color: #8b8b95; opacity: 1;
}
/* Tighter rows: the label used to provide the vertical rhythm. */
.iwc-checkout-steps .iwc-cs__step[data-step="contact"] .form-row { margin-bottom: 12px; }

/* "Billing details" header gone: the step title + progress already say where
   the shopper is. (The shipping-fields h3 is the ship-to-different toggle —
   untouched; the additional-fields h3 was already hidden.) */
.iwc-checkout-steps .iwc-cs__step[data-step="shipping"] .woocommerce-billing-fields > h3 { display: none; }


/* Active-state fallbacks via :has() — cover gateways whose radio is NOT the
   label's adjacent sibling (the '+ label' rules miss those). */
body.iwc-checkout-steps .iwc-cs #payment ul.wc_payment_methods > li:has(input[name="payment_method"]:checked) > label {
    background: #fff; color: #1d2327;
    border-color: var(--iwc-tab-brand);
    box-shadow: inset 0 -3px 0 var(--iwc-tab-brand), 0 1px 6px rgba(0,0,0,.06);
}
body.iwc-checkout-steps .iwc-cs #payment ul.wc_payment_methods > li:has(input[name="payment_method"]:checked) > label::before {
    border-color: var(--iwc-tab-brand);
    background: var(--iwc-tab-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

/* ── Summary coupon: quiet expandable under the shipping method ───────────── */
.iwc-checkout-steps .iwc-cs-coupon { margin: 4px 0 14px; padding-bottom: 12px; border-bottom: 1px solid #ececf0; }
.iwc-checkout-steps .iwc-cs-coupon.is-loading { opacity: .55; pointer-events: none; }
.iwc-checkout-steps .iwc-cs-coupon__toggle {
    display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
    color: var(--iwc-cs-accent); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline;
}
.iwc-checkout-steps .iwc-cs-coupon__form { display: flex; gap: 8px; margin-top: 8px; }
.iwc-checkout-steps .iwc-cs-coupon__form[hidden] { display: none !important; } /* author display beats [hidden] otherwise */
.iwc-checkout-steps .iwc-cs-coupon__msg[hidden] { display: none !important; }
.iwc-checkout-steps .iwc-cs-coupon__input {
    flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 8px 11px;
    font-size: 13px; border: 1px solid #d8d8e0; border-radius: 8px;
}
.iwc-checkout-steps .iwc-cs-coupon__input:focus { outline: none; border-color: var(--iwc-cs-accent); box-shadow: 0 0 0 2px rgba(34,113,177,.15); }
.iwc-checkout-steps .iwc-cs-coupon__apply {
    flex: 0 0 auto; padding: 8px 14px !important; font-size: 13px !important; font-weight: 700;
    border-radius: 8px !important; border: 0; background: var(--iwc-cs-btn, var(--iwc-cs-accent)) !important;
    color: var(--iwc-cs-btn-text, #fff) !important; cursor: pointer;
}
.iwc-checkout-steps .iwc-cs-coupon__applied {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px;
}
.iwc-checkout-steps .iwc-cs-coupon__code {
    font-weight: 700; color: #1a7f37; background: #e9f7ee; border-radius: 6px; padding: 2px 8px;
    text-transform: uppercase; letter-spacing: .02em; font-size: 12px;
}
.iwc-checkout-steps .iwc-cs-coupon__amount { margin-left: auto; font-weight: 700; color: #1a7f37; }
.iwc-checkout-steps .iwc-cs-coupon__remove {
    width: 22px; height: 22px; border: 0; border-radius: 50%; background: none;
    color: #c2c2cc; font-size: 16px; line-height: 1; cursor: pointer;
}
.iwc-checkout-steps .iwc-cs-coupon__remove:hover { color: #b32d2e; }
.iwc-checkout-steps .iwc-cs-coupon__msg { margin: 7px 0 0; font-size: 12.5px; color: #b32d2e; }
.iwc-checkout-steps .iwc-cs__summary-row--discount .iwc-cs__sum-val { color: #1a7f37; font-weight: 700; }

/* ── Big page "Checkout" header gone (user spec — cleanest checkout). Hidden
   with the screen-reader pattern, not deleted: the page keeps its h1 for
   assistive tech + SEO. Scoped to the stepped checkout only. Selector set
   covers the common theme title wrappers. */
body.iwc-checkout-steps .entry-title,
body.iwc-checkout-steps .page-title,
body.iwc-checkout-steps .entry-header > h1,
body.iwc-checkout-steps .page-header > h1,
body.iwc-checkout-steps h1.wp-block-post-title {
    position: absolute !important; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* Tabs are OURS: gateway plugins inject their own icon sprites and helper
   links into the label (PayPal's dark roundel + "What is PayPal?" — the
   phantom second checkbox). Hide everything except the operator-picked logo. */
body.iwc-checkout-steps .iwc-cs #payment ul.wc_payment_methods > li > label img:not(.iwc-cs-pay-logo),
body.iwc-checkout-steps .iwc-cs #payment ul.wc_payment_methods > li > label a {
    display: none !important;
}


/* ── Interac e-Transfer instruction card (thank-you page) ──────────────────── */
.iwc-interac {
    max-width: 620px; margin: 22px 0; padding: 20px 22px;
    background: #fff; border: 1px solid #e2e2e8; border-radius: 12px;
    border-top: 4px solid var(--iwc-cs-accent, #2271b1);
}
.iwc-interac__title { margin: 0 0 12px; font-size: 18px; }
.iwc-interac__steps { margin: 0 0 12px; padding-left: 20px; }
.iwc-interac__steps li { margin-bottom: 8px; font-size: 14.5px; line-height: 1.5; }
.iwc-interac__amount, .iwc-interac__ref { white-space: nowrap; }
.iwc-interac__email { word-break: break-all; }
.iwc-interac__note { margin: 0; font-size: 13px; color: #6b7280; font-weight: 600; }