/* UK Coin Hunt — Checkout page (2026 refresh)
 * Styles native WooCommerce checkout output to match the 2026 visual system.
 * Scoped to body.woocommerce-checkout.
 *
 * Primary fix: .col-1 / .col-2 in WC's markup collides with Bootstrap grid
 * classes (which would make the fields 8.3% wide). We override with a proper
 * 2-column layout inside .col2-set.
 */

:root {
    --ck-gold:      #cfa362;
    --ck-gold-dark: #b88d4f;
    --ck-gold-line: rgba(207, 163, 98, 0.35);
    --ck-ink:       #1c1c1e;
    --ck-muted:     #6b6258;
    --ck-bg:        #ffffff;
    --ck-ivory:     #faf7f2;
    --ck-soft:      #faf4e8;
    --ck-line:      rgba(28, 28, 30, 0.10);
    --ck-danger:    #b8453f;
    --ck-success:   #2e8c5a;
}

body.woocommerce-checkout {
    font-family: 'Poppins', Arial, sans-serif;
    color: var(--ck-ink);
}

/* (Bootstrap Icons content overrides removed — the font now loads correctly
 * after the http→https filter fix, so the natural outlined icons render.) */

/* ===== Overall page container spacing ===== */
body.woocommerce-checkout .woocommerce {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 32px) clamp(32px, 5vw, 72px);
}

/* Kill the stray <br> the page template emits between header and content. */
body.woocommerce-checkout > br { display: none; }

/* ===== Hero banner (matches contact-2026 / faq-2026 pattern) ===== */
body.woocommerce-checkout .ukch-page-hero {
    position: relative;
    margin-top: -45px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: clamp(40px, 6vw, 80px);
    padding: clamp(56px, 8vw, 104px) 24px clamp(28px, 4vw, 48px);
    text-align: center;
    background:
        radial-gradient(ellipse at top left,  rgba(207,163,98,0.10), transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(207,163,98,0.08), transparent 55%),
        linear-gradient(180deg, #f6ecda 0%, #faf4e8 100%);
    border-bottom: 1px solid var(--ck-gold-line);
    overflow: hidden;
}
body.dark-mode.woocommerce-checkout .ukch-page-hero {
    background:
        radial-gradient(ellipse at top left,  rgba(207,163,98,0.18), transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(207,163,98,0.12), transparent 55%),
        linear-gradient(180deg, #1e1e1e 0%, #242424 100%);
    border-bottom-color: rgba(207,163,98,0.25);
}
body.woocommerce-checkout .ukch-page-hero__inner {
    max-width: 760px;
    margin: 0 auto;
}
body.woocommerce-checkout .ukch-page-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ck-gold-dark);
    margin-bottom: 18px;
}
body.woocommerce-checkout .ukch-page-hero__eyebrow::before,
body.woocommerce-checkout .ukch-page-hero__eyebrow::after {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--ck-gold);
    opacity: 0.7;
}
body.woocommerce-checkout .ukch-page-hero__title {
    margin: 0 0 14px;
    font-family: 'Lora', Georgia, serif;
    font-weight: 500;
    font-size: clamp(34px, 5.2vw, 56px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ck-ink);
}
body.dark-mode.woocommerce-checkout .ukch-page-hero__title { color: #f3eddf; }
body.woocommerce-checkout .ukch-page-hero__sub {
    max-width: 620px;
    margin: 0 auto;
    color: var(--ck-muted);
    font-family: 'Poppins', Arial, sans-serif;
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.6;
}
body.dark-mode.woocommerce-checkout .ukch-page-hero__sub { color: #b8b0a3; }

/* ===== 2-column grid: form + sticky order summary =====
 * The checkout <form> uses display:contents so its children participate
 * in this grid directly. The extras card (login, coupon toggle, points)
 * sits OUTSIDE the form (avoids nested <form> stripping) but still slots
 * into the sidebar visually via grid-column / grid-row placement. */
body.woocommerce-checkout .ukch-checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
    grid-template-rows: min-content 1fr;
    gap: clamp(24px, 3vw, 40px);
    align-items: start;
}
body.woocommerce-checkout .ukch-checkout-form { display: contents; }
body.woocommerce-checkout .ukch-checkout-main {
    min-width: 0;
    grid-column: 1;
    grid-row: 1 / span 2;
}
body.woocommerce-checkout .ukch-checkout-extras {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}
body.woocommerce-checkout .ukch-order-card {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    position: sticky;
    top: clamp(16px, 4vw, 100px);
}
@media (max-width: 980px) {
    body.woocommerce-checkout .ukch-checkout-grid { grid-template-columns: 1fr; }
    body.woocommerce-checkout .ukch-checkout-main,
    body.woocommerce-checkout .ukch-checkout-extras,
    body.woocommerce-checkout .ukch-order-card {
        grid-column: 1;
        grid-row: auto;
        position: static;
        top: auto;
    }
}

/* ===== Coupon toggle at top ===== */
body.woocommerce-checkout .woocommerce-form-coupon-toggle {
    margin: 0 0 24px;
    padding: 14px 20px;
    background: var(--ck-ivory);
    border: 1px solid var(--ck-gold-line);
    border-radius: 12px;
    font-size: 14px;
    color: var(--ck-ink);
}
body.woocommerce-checkout .woocommerce-info {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    color: var(--ck-ink) !important;
    font-size: 14px;
}
body.woocommerce-checkout .woocommerce-info::before { display: none !important; }
body.woocommerce-checkout .woocommerce-info a.showcoupon {
    color: var(--ck-gold-dark);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid var(--ck-gold-line);
    transition: color .15s ease, border-color .15s ease;
}
body.woocommerce-checkout .woocommerce-info a.showcoupon:hover {
    color: var(--ck-gold);
    border-bottom-color: var(--ck-gold);
}

/* Coupon form (hidden by default, shown when link clicked) */
body.woocommerce-checkout form.checkout_coupon {
    margin: 0 0 24px !important;
    padding: 20px !important;
    background: var(--ck-bg) !important;
    border: 1px solid var(--ck-line) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(28,28,30,0.03), 0 8px 24px rgba(28,28,30,0.04);
}
body.woocommerce-checkout form.checkout_coupon .form-row { padding: 0 !important; }

/* ===== Points widget (YITH Points & Rewards) — match cart page ===== */
body.woocommerce-checkout .ywpar_apply_discounts,
body.woocommerce-checkout form[class*="ywpar"],
body.woocommerce-checkout [class*="ywpar_"] {
    max-width: 1140px;
    margin: 0 0 24px;
    padding: 20px 24px;
    background: var(--ck-bg);
    border: 1px solid var(--ck-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(28,28,30,0.03), 0 10px 30px rgba(28,28,30,0.04);
    font-size: 14px;
    color: var(--ck-ink);
}
body.woocommerce-checkout .ywpar_apply_discounts strong,
body.woocommerce-checkout [class*="ywpar_"] strong { color: var(--ck-gold-dark); font-weight: 600; }
body.woocommerce-checkout [class*="ywpar_"] input[type="number"],
body.woocommerce-checkout [class*="ywpar_"] input[type="text"] {
    width: 90px;
    padding: 8px 10px;
    margin: 0 6px;
    border: 1px solid var(--ck-line);
    border-radius: 8px;
    background: #fdfbf6;
    font-size: 14px;
    text-align: center;
}
body.woocommerce-checkout [class*="ywpar_"] input[type="submit"],
body.woocommerce-checkout [class*="ywpar_"] button {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    margin-top: 8px;
    background: linear-gradient(180deg, var(--ck-gold) 0%, var(--ck-gold-dark) 100%);
    border: 1px solid var(--ck-gold-dark);
    border-radius: 999px;
    color: #ffffff;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    width: auto;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(207,163,98,0.28);
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
body.woocommerce-checkout [class*="ywpar_"] input[type="submit"]:hover,
body.woocommerce-checkout [class*="ywpar_"] button:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 10px 24px rgba(207,163,98,0.34);
}

/* ===== CUSTOMER DETAILS (billing + shipping) =====
 * .col-1 / .col-2 in WC's markup would normally collide with Bootstrap's
 * grid classes (which would make them 8.33% wide). Inside the left column
 * we stack them vertically (billing, then shipping) — the RIGHT column
 * is now the sticky order summary, so we don't split billing/shipping
 * side-by-side anymore. */
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout .col2-set {
    display: block !important;
    margin-bottom: 32px;
    width: 100% !important;
    max-width: none !important;
    float: none !important;
}
body.woocommerce-checkout #customer_details > .col-1,
body.woocommerce-checkout #customer_details > .col-2,
body.woocommerce-checkout .col2-set > .col-1,
body.woocommerce-checkout .col2-set > .col-2 {
    flex: unset !important;
    width: 100% !important;
    max-width: none !important;
    padding: 24px !important;
    margin: 0 0 20px !important;
    background: var(--ck-bg);
    border: 1px solid var(--ck-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(28,28,30,0.03), 0 8px 24px rgba(28,28,30,0.04);
}
body.woocommerce-checkout #customer_details > .col-2:empty,
body.woocommerce-checkout .col2-set > .col-2:empty {
    display: none !important;
}

/* ===== Section headings (Billing details / Additional information / Your order) ===== */
body.woocommerce-checkout h3,
body.woocommerce-checkout #order_review_heading {
    margin: 0 0 18px !important;
    font-family: 'Lora', Georgia, serif !important;
    font-size: clamp(22px, 2.6vw, 28px) !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em;
    color: var(--ck-ink) !important;
    text-align: left !important;
}

/* ===== Form fields ===== */
body.woocommerce-checkout .form-row,
body.woocommerce-checkout p.form-row {
    display: flex !important;
    flex-direction: column;
    margin: 0 0 16px !important;
    padding: 0 !important;
    width: 100% !important;
}
body.woocommerce-checkout .form-row-first,
body.woocommerce-checkout .form-row-last,
body.woocommerce-checkout .form-row.form-row-first,
body.woocommerce-checkout .form-row.form-row-last {
    width: calc(50% - 8px) !important;
    float: none !important;
}
/* Login form (returning customers) — stack full width, not split 50/50.
 * The WC login form on checkout sits inside .ukch-checkout-extras without a
 * .woocommerce-form-login wrapper, so scope to the extras card too. */
body.woocommerce-checkout .woocommerce-form-login .form-row,
body.woocommerce-checkout .woocommerce-form-login .form-row-first,
body.woocommerce-checkout .woocommerce-form-login .form-row-last,
body.woocommerce-checkout form.login .form-row,
body.woocommerce-checkout form.login .form-row-first,
body.woocommerce-checkout form.login .form-row-last,
body.woocommerce-checkout .ukch-checkout-extras .form-row,
body.woocommerce-checkout .ukch-checkout-extras .form-row-first,
body.woocommerce-checkout .ukch-checkout-extras .form-row-last {
    width: 100% !important;
}
body.woocommerce-checkout .form-row.form-row-wide,
body.woocommerce-checkout p.form-row-wide {
    width: 100% !important;
}
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

body.woocommerce-checkout .form-row label {
    display: block !important;
    width: 100% !important;
    margin: 0 0 6px !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ck-muted) !important;
}
body.woocommerce-checkout .form-row label.screen-reader-text {
    position: absolute !important;
    clip: rect(1px,1px,1px,1px) !important;
    height: 1px !important; width: 1px !important; overflow: hidden !important;
}
body.woocommerce-checkout .form-row .required { color: var(--ck-gold-dark); text-decoration: none; }
body.woocommerce-checkout .form-row .optional { color: var(--ck-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .select2-container .select2-selection,
body.woocommerce-checkout .select2-container--default .select2-selection--single {
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1px solid var(--ck-line) !important;
    border-radius: 10px !important;
    background: #fdfbf6 !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    font-size: 15px !important;
    color: var(--ck-ink) !important;
    min-height: 48px !important;
    line-height: 1.3 !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
body.woocommerce-checkout .form-row textarea { min-height: 96px !important; resize: vertical; }
body.woocommerce-checkout .form-row input.input-text:focus,
body.woocommerce-checkout .form-row textarea:focus,
body.woocommerce-checkout .form-row select:focus,
body.woocommerce-checkout .select2-container--focus .select2-selection {
    border-color: var(--ck-gold) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(207,163,98,0.18) !important;
    outline: none;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
    line-height: 24px !important;
    color: var(--ck-ink) !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 12px !important;
    right: 10px !important;
}

/* Validation states */
body.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout .form-row.woocommerce-invalid select,
body.woocommerce-checkout .form-row.woocommerce-invalid .select2-selection {
    border-color: var(--ck-danger) !important;
    box-shadow: 0 0 0 3px rgba(184,69,63,0.12) !important;
}
body.woocommerce-checkout .form-row.woocommerce-validated input.input-text {
    border-color: var(--ck-success) !important;
}

/* "Create an account" checkbox */
body.woocommerce-checkout .form-row.create-account {
    flex-direction: row !important;
    align-items: center;
    gap: 10px;
    margin: 8px 0 16px !important;
}
body.woocommerce-checkout input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: var(--ck-gold);
}

/* ===== Sidebar shell ===== */
body.woocommerce-checkout .ukch-checkout-sidebar {
    background: transparent;
    padding: 0;
    border: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ===== Extras card (coupon toggle + points messages) =====
 * Captured from `woocommerce_before_checkout_form` so the loose info blocks
 * sit in their own 2026 card above the order summary. */
body.woocommerce-checkout .ukch-checkout-extras {
    padding: 20px 22px;
    background: var(--ck-bg);
    border: 1px solid var(--ck-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(28,28,30,0.03), 0 10px 30px rgba(28,28,30,0.04);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
body.woocommerce-checkout .ukch-checkout-extras > * { margin: 0 !important; }
body.woocommerce-checkout .ukch-checkout-extras > * + * {
    padding-top: 14px;
    border-top: 1px solid var(--ck-line);
}

/* Coupon toggle (anchor link) */
body.woocommerce-checkout .ukch-checkout-extras .woocommerce-form-coupon-toggle {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 13px;
    color: var(--ck-muted);
    line-height: 1.5;
}
body.woocommerce-checkout .ukch-checkout-extras .woocommerce-form-coupon-toggle a.showcoupon {
    color: var(--ck-gold-dark);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--ck-gold-line);
}
body.woocommerce-checkout .ukch-checkout-extras .woocommerce-form-coupon-toggle a.showcoupon:hover {
    color: var(--ck-gold);
    border-bottom-color: var(--ck-gold);
}

/* Coupon form (revealed when toggle clicked) */
body.woocommerce-checkout .ukch-checkout-extras form.checkout_coupon {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}
body.woocommerce-checkout .ukch-checkout-extras form.checkout_coupon p:first-child { display: none; }
body.woocommerce-checkout .ukch-checkout-extras form.checkout_coupon .form-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: stretch;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}
body.woocommerce-checkout .ukch-checkout-extras form.checkout_coupon .form-row input[type="text"] {
    flex: 1 1 auto;
    width: auto !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    border: 1px solid var(--ck-line) !important;
    border-radius: 10px !important;
    background: #fdfbf6 !important;
    font-size: 14px !important;
    min-height: 42px !important;
}
body.woocommerce-checkout .ukch-checkout-extras form.checkout_coupon .form-row .button,
body.woocommerce-checkout .ukch-checkout-extras form.checkout_coupon button[name="apply_coupon"] {
    margin: 0 !important;
    flex: 0 0 auto;
    padding: 10px 18px !important;
    white-space: nowrap;
}

/* Points messages */
body.woocommerce-checkout .ukch-checkout-extras > [id^="yith-par-message"],
body.woocommerce-checkout .ukch-checkout-extras > .woocommerce-cart-notice {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ck-ink);
    text-align: left;
}
/* Hide the YITH trophy/img — its asset doesn't pick up our theme tones, so
 * it shows in dark mode but vanishes against light. Cleaner to drop it. */
body.woocommerce-checkout .ukch-checkout-extras [id^="yith-par-message"] > img:first-child,
body.woocommerce-checkout .ukch-checkout-extras [id^="yith-par-message"] img.ywpar-icon {
    display: none !important;
}
body.woocommerce-checkout .ukch-checkout-extras [id^="yith-par-message"]::before,
body.woocommerce-checkout .ukch-checkout-extras .woocommerce-info::before {
    display: none !important;
}
body.woocommerce-checkout .ukch-checkout-extras strong {
    color: var(--ck-gold-dark);
    font-weight: 600;
}

/* Points redemption: `You have N points. Use [42] points...` form layout */
body.woocommerce-checkout .ukch-checkout-extras [id^="yith-par-message"] form,
body.woocommerce-checkout .ukch-checkout-extras .ywpar_apply_discounts {
    margin: 8px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
body.woocommerce-checkout .ukch-checkout-extras input[type="number"],
body.woocommerce-checkout .ukch-checkout-extras input[type="text"]:not([name="coupon_code"]):not(.input-text) {
    width: 64px;
    padding: 6px 10px;
    margin: 0 4px;
    border: 1px solid var(--ck-line);
    border-radius: 8px;
    background: #fdfbf6;
    color: var(--ck-ink);
    font-size: 14px;
    text-align: center;
    line-height: 1.3;
    min-height: 32px;
}
/* Login form inputs inside extras card — full width, left-aligned, dark surface */
body.woocommerce-checkout .ukch-checkout-extras input.input-text {
    width: 100% !important;
    text-align: left !important;
    margin: 0 !important;
}
body.dark-mode.woocommerce-checkout .ukch-checkout-extras input.input-text {
    background: #1f1f1f !important;
    border-color: rgba(242, 234, 221, 0.18) !important;
    color: #f2eadd !important;
}
/* Chrome autofill — kill the white background + black text it forces */
body.dark-mode.woocommerce-checkout .ukch-checkout-extras input.input-text:-webkit-autofill,
body.dark-mode.woocommerce-checkout .ukch-checkout-extras input.input-text:-webkit-autofill:hover,
body.dark-mode.woocommerce-checkout .ukch-checkout-extras input.input-text:-webkit-autofill:focus {
    -webkit-text-fill-color: #f2eadd !important;
    -webkit-box-shadow: 0 0 0 1000px #1f1f1f inset !important;
    caret-color: #f2eadd !important;
}
body.woocommerce-checkout input.input-text:-webkit-autofill,
body.woocommerce-checkout input.input-text:-webkit-autofill:hover,
body.woocommerce-checkout input.input-text:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ck-ink) !important;
    -webkit-box-shadow: 0 0 0 1000px #fdfbf6 inset !important;
    caret-color: var(--ck-ink) !important;
}
body.dark-mode.woocommerce-checkout input.input-text:-webkit-autofill,
body.dark-mode.woocommerce-checkout input.input-text:-webkit-autofill:hover,
body.dark-mode.woocommerce-checkout input.input-text:-webkit-autofill:focus {
    -webkit-text-fill-color: #f2eadd !important;
    -webkit-box-shadow: 0 0 0 1000px #1f1f1f inset !important;
    caret-color: #f2eadd !important;
}
body.woocommerce-checkout .ukch-checkout-extras input[type="number"]:focus,
body.woocommerce-checkout .ukch-checkout-extras input[type="text"]:focus {
    border-color: var(--ck-gold);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(207,163,98,0.18);
    outline: none;
}
body.woocommerce-checkout .ukch-checkout-extras .button,
body.woocommerce-checkout .ukch-checkout-extras input[type="submit"] {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px !important;
    margin-top: 8px !important;
    background: linear-gradient(180deg, var(--ck-gold) 0%, var(--ck-gold-dark) 100%) !important;
    border: 1px solid var(--ck-gold-dark) !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    width: auto !important;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(207,163,98,0.22);
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
    text-transform: none !important;
}
body.woocommerce-checkout .ukch-checkout-extras .button:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 8px 18px rgba(207,163,98,0.30);
}

/* ===== Your Order review card ===== */
body.woocommerce-checkout .ukch-order-card {
    background: var(--ck-bg);
    border: 1px solid var(--ck-line);
    border-radius: 14px;
    padding: 22px 24px 24px;
    box-shadow: 0 1px 2px rgba(28,28,30,0.03), 0 10px 30px rgba(28,28,30,0.04);
    overflow: hidden;
}
body.woocommerce-checkout .ukch-order-card #order_review_heading {
    margin: 0 0 14px !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid var(--ck-line);
    background: transparent !important;
}
body.woocommerce-checkout .ukch-order-card #order_review,
body.woocommerce-checkout .ukch-order-card .woocommerce-checkout-review-order {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body.woocommerce-checkout .ukch-checkout-sidebar #order_review_heading {
    margin: 0 0 14px !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid var(--ck-line);
}
body.woocommerce-checkout #order_review,
body.woocommerce-checkout .woocommerce-checkout-review-order {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
body.woocommerce-checkout table.shop_table,
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    background: transparent !important;
    margin: 0 0 16px !important;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 14px;
}
/* The order table sits inside .ukch-order-card which is the right grid column.
 * Force display: block so the shipping row break-out (display:block on tr/td)
 * actually consumes the full sidebar width. */
body.woocommerce-checkout .ukch-order-card table.shop_table,
body.woocommerce-checkout .ukch-order-card tbody,
body.woocommerce-checkout .ukch-order-card tfoot {
    display: block !important;
    width: 100% !important;
}
body.woocommerce-checkout .ukch-order-card thead { display: block !important; width: 100% !important; }
body.woocommerce-checkout .ukch-order-card thead tr,
body.woocommerce-checkout .ukch-order-card tbody tr.cart_item,
body.woocommerce-checkout .ukch-order-card tfoot tr {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    column-gap: 16px !important;
    width: 100% !important;
}
body.woocommerce-checkout .ukch-order-card tfoot tr.shipping,
body.woocommerce-checkout .ukch-order-card tfoot tr.woocommerce-shipping-totals {
    display: block !important; /* keep the block override for shipping; label above options */
}
body.woocommerce-checkout .ukch-order-card thead th,
body.woocommerce-checkout .ukch-order-card tbody td,
body.woocommerce-checkout .ukch-order-card tfoot th,
body.woocommerce-checkout .ukch-order-card tfoot td {
    display: block !important;
    width: auto !important;
    border: 0 !important;
}
/* Kill any plugin-added background on the order rows so the order card surface
 * is the only background showing — the user reported a "black box" behind the
 * later cart items, which was a `tr.cart_item { background: #1f1f1f }` rule
 * applied somewhere outside our stylesheets. */
body.woocommerce-checkout .ukch-order-card tr,
body.woocommerce-checkout .ukch-order-card thead tr,
body.woocommerce-checkout .ukch-order-card tbody tr,
body.woocommerce-checkout .ukch-order-card tfoot tr,
body.woocommerce-checkout .ukch-order-card tr.cart_item {
    background: transparent !important;
}
body.woocommerce-checkout .shop_table th,
body.woocommerce-checkout .shop_table td {
    padding: 12px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ck-line) !important;
    background: transparent !important;
    text-align: left !important;
    font-weight: 500;
    color: var(--ck-ink);
}
body.woocommerce-checkout .shop_table thead th {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 12px;
    color: var(--ck-muted);
    font-weight: 600;
}
body.woocommerce-checkout .shop_table td.product-total,
body.woocommerce-checkout .shop_table td.product-subtotal,
body.woocommerce-checkout .shop_table .order-total td { text-align: right !important; }
body.woocommerce-checkout .shop_table tr.order-total th,
body.woocommerce-checkout .shop_table tr.order-total td {
    padding-top: 18px !important;
    border-bottom: 0 !important;
    font-family: 'Lora', Georgia, serif;
    font-size: 18px;
    font-weight: 500;
}
body.woocommerce-checkout .shop_table tr.order-total td {
    text-align: right;
}
body.woocommerce-checkout .shop_table tr.order-total .amount {
    color: var(--ck-gold-dark);
    font-size: 24px;
}
/* Push "(includes £X.XX VAT)" onto its own line, smaller and muted, so the
 * total amount and VAT note stop running together. */
body.woocommerce-checkout .shop_table tr.order-total .includes_tax {
    display: block;
    margin-top: 4px;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--ck-muted);
    line-height: 1.4;
}
body.woocommerce-checkout .shop_table tr.order-total .includes_tax .amount,
body.woocommerce-checkout .shop_table tr.order-total .includes_tax .woocommerce-Price-amount {
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--ck-muted);
}

/* ===== Shipping methods row =====
 * Promote the shipping table row into block layout so the methods get the
 * full width of the order card instead of being cramped into a table cell. */
body.woocommerce-checkout tr.shipping,
body.woocommerce-checkout tr.woocommerce-shipping-totals {
    display: block !important;
    padding: 14px 0 !important;
    border-top: 1px solid var(--ck-line) !important;
    border-bottom: 1px solid var(--ck-line) !important;
}
body.woocommerce-checkout tr.shipping th,
body.woocommerce-checkout tr.woocommerce-shipping-totals th {
    display: block !important;
    width: 100% !important;
    padding: 0 0 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 12px;
    color: var(--ck-muted) !important;
    font-weight: 600;
    border: 0 !important;
    background: transparent !important;
}
body.woocommerce-checkout tr.shipping td,
body.woocommerce-checkout tr.woocommerce-shipping-totals td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
body.woocommerce-checkout #shipping_method,
body.woocommerce-checkout .woocommerce-shipping-methods {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
body.woocommerce-checkout #shipping_method li,
body.woocommerce-checkout .woocommerce-shipping-methods li {
    list-style: none !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid var(--ck-line);
    border-radius: 10px;
    background: var(--ck-ivory);
    font-size: 14px;
    color: var(--ck-ink);
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    transition: border-color .15s ease, background .15s ease;
}
body.woocommerce-checkout #shipping_method li:has(input:checked) {
    border-color: var(--ck-gold);
    background: #fff;
}
body.woocommerce-checkout #shipping_method li label,
body.woocommerce-checkout .woocommerce-shipping-methods li label {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--ck-ink) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
    cursor: pointer;
    flex: 1;
    white-space: normal !important;
}
body.woocommerce-checkout #shipping_method li input[type="radio"] {
    width: 16px; height: 16px;
    accent-color: var(--ck-gold);
    margin: 0;
    flex-shrink: 0;
}

/* ===== Payment methods ===== */
body.woocommerce-checkout #payment,
body.woocommerce-checkout .woocommerce-checkout-payment {
    background: transparent !important;
    border: 0 !important;
    margin-top: 20px;
}
body.woocommerce-checkout #payment ul.payment_methods {
    list-style: none !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    border: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body.woocommerce-checkout #payment ul.payment_methods > li {
    padding: 14px 16px !important;
    border: 1px solid var(--ck-line) !important;
    border-radius: 12px !important;
    background: var(--ck-bg) !important;
    transition: border-color .15s ease, background .15s ease;
    list-style: none;
}
body.woocommerce-checkout #payment ul.payment_methods > li:hover {
    border-color: var(--ck-gold-line) !important;
}
body.woocommerce-checkout #payment ul.payment_methods input[type="radio"]:checked + label,
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:has(input:checked) {
    border-color: var(--ck-gold) !important;
    background: var(--ck-ivory) !important;
}
body.woocommerce-checkout #payment ul.payment_methods label {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--ck-ink) !important;
    margin: 0 !important;
    padding: 0 0 0 8px !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
body.woocommerce-checkout #payment ul.payment_methods label img {
    max-height: 24px;
    width: auto;
    vertical-align: middle;
}
body.woocommerce-checkout #payment ul.payment_methods .payment_box {
    margin: 12px 0 0 !important;
    padding: 14px !important;
    background: var(--ck-ivory) !important;
    border-radius: 10px !important;
    font-size: 13px;
    color: var(--ck-muted);
}
body.woocommerce-checkout #payment ul.payment_methods .payment_box::before { display: none !important; }

/* Privacy policy notice */
body.woocommerce-checkout .woocommerce-privacy-policy-text {
    margin: 16px 0 !important;
    padding: 14px 18px !important;
    background: var(--ck-ivory) !important;
    border-radius: 10px !important;
    font-size: 14px;
    color: var(--ck-ink);
}
body.woocommerce-checkout .woocommerce-privacy-policy-text a,
body.woocommerce-checkout .woocommerce-privacy-policy-link {
    color: var(--ck-gold-dark) !important;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid var(--ck-gold-line);
}
body.woocommerce-checkout .woocommerce-privacy-policy-text a:hover {
    color: var(--ck-gold) !important;
    border-bottom-color: var(--ck-gold);
}

/* Terms checkbox */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    margin: 16px 0;
    padding: 14px 16px;
    background: var(--ck-ivory);
    border-radius: 10px;
}
body.woocommerce-checkout .form-row.validate-required .woocommerce-form__label {
    font-size: 13px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--ck-ink) !important;
    font-weight: 500 !important;
}

/* Place Order button */
body.woocommerce-checkout #place_order,
body.woocommerce-checkout button[name="woocommerce_checkout_place_order"] {
    width: 100% !important;
    padding: 16px 28px !important;
    background: linear-gradient(180deg, var(--ck-gold) 0%, var(--ck-gold-dark) 100%) !important;
    border: 1px solid var(--ck-gold-dark) !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    text-transform: none !important;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(207,163,98,0.30);
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
    margin-top: 12px;
}
body.woocommerce-checkout #place_order:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 14px 30px rgba(207,163,98,0.36);
}

/* Messages */
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-NoticeGroup {
    list-style: none !important;
    margin: 0 0 20px !important;
    padding: 14px 18px !important;
    border-radius: 10px !important;
    border: 1px solid var(--ck-line) !important;
    background: var(--ck-ivory) !important;
    color: var(--ck-ink) !important;
    font-size: 14px;
}
body.woocommerce-checkout .woocommerce-error {
    border-color: rgba(184,69,63,0.35) !important;
    background: rgba(184,69,63,0.06) !important;
}

/* Bootstrap button resets for anything that snuck through */
body.woocommerce-checkout .button,
body.woocommerce-checkout input[type="submit"].button {
    background: linear-gradient(180deg, var(--ck-gold) 0%, var(--ck-gold-dark) 100%) !important;
    border: 1px solid var(--ck-gold-dark) !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    letter-spacing: 0.02em;
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

/* ===== Dark mode ===== */
/* Card surfaces */
body.dark-mode.woocommerce-checkout #customer_details > .col-1,
body.dark-mode.woocommerce-checkout #customer_details > .col-2,
body.dark-mode.woocommerce-checkout .col2-set > .col-1,
body.dark-mode.woocommerce-checkout .col2-set > .col-2,
body.dark-mode.woocommerce-checkout .ukch-checkout-extras,
body.dark-mode.woocommerce-checkout .ukch-order-card,
body.dark-mode.woocommerce-checkout #payment ul.payment_methods > li {
    background: #222 !important;
    border-color: rgba(242, 234, 221, 0.10) !important;
    color: #f2eadd !important;
}
body.dark-mode.woocommerce-checkout .ukch-order-card #order_review_heading {
    border-bottom-color: rgba(242, 234, 221, 0.10) !important;
}
/* Sub-divider between extras-card sections */
body.dark-mode.woocommerce-checkout .ukch-checkout-extras > * + * {
    border-top-color: rgba(242, 234, 221, 0.10) !important;
}
/* Shipping option pills */
body.dark-mode.woocommerce-checkout #shipping_method li,
body.dark-mode.woocommerce-checkout .woocommerce-shipping-methods li {
    background: #1f1f1f !important;
    border-color: rgba(242, 234, 221, 0.12) !important;
    color: #f2eadd !important;
}
body.dark-mode.woocommerce-checkout #shipping_method li:has(input:checked) {
    background: #2a2a2a !important;
    border-color: var(--ck-gold) !important;
}
body.dark-mode.woocommerce-checkout #shipping_method li label,
body.dark-mode.woocommerce-checkout .woocommerce-shipping-methods li label {
    color: #f2eadd !important;
}
/* Inputs INSIDE the dark cards (extras + coupon form) */
body.dark-mode.woocommerce-checkout .ukch-checkout-extras input[type="number"],
body.dark-mode.woocommerce-checkout .ukch-checkout-extras input[type="text"],
body.dark-mode.woocommerce-checkout .ukch-checkout-extras form.checkout_coupon input[type="text"] {
    background: #1f1f1f !important;
    border-color: rgba(242, 234, 221, 0.18) !important;
    color: #f2eadd !important;
}
body.dark-mode.woocommerce-checkout .ukch-checkout-extras input[type="number"]:focus,
body.dark-mode.woocommerce-checkout .ukch-checkout-extras input[type="text"]:focus {
    background: #2a2a2a !important;
    border-color: var(--ck-gold) !important;
}
/* Order table strip */
body.dark-mode.woocommerce-checkout tr.shipping,
body.dark-mode.woocommerce-checkout tr.woocommerce-shipping-totals {
    border-top-color: rgba(242, 234, 221, 0.10) !important;
    border-bottom-color: rgba(242, 234, 221, 0.10) !important;
}

/* ===== blockUI overlay (fired by WC during AJAX update e.g. when toggling
 * "Ship to a different address?") =====
 * Default jQuery blockUI emits a stark white opaque rectangle over the order
 * review. Tame it: make it a subtle scrim that matches the surface, with a
 * thin gold spinner. */
body.woocommerce-checkout .blockUI.blockOverlay,
body.woocommerce-checkout .blockUI.blockMsg {
    background: rgba(250, 247, 242, 0.55) !important;
    opacity: 1 !important;
    cursor: default !important;
    border-radius: 14px;
}
body.woocommerce-checkout .blockUI.blockOverlay::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 28px; height: 28px;
    margin: -14px 0 0 -14px;
    border: 2px solid var(--ck-gold-line);
    border-top-color: var(--ck-gold);
    border-radius: 50%;
    animation: ukch-spin .9s linear infinite;
}
@keyframes ukch-spin { to { transform: rotate(360deg); } }
body.dark-mode.woocommerce-checkout .blockUI.blockOverlay,
body.dark-mode.woocommerce-checkout .blockUI.blockMsg {
    background: rgba(34, 34, 34, 0.65) !important;
}
body.dark-mode.woocommerce-checkout .woocommerce-privacy-policy-text,
body.dark-mode.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    background: #1f1f1f !important;
    border: 1px solid rgba(242, 234, 221, 0.10) !important;
    color: #f2eadd !important;
}
/* Error / message notices */
body.dark-mode.woocommerce-checkout .woocommerce-message,
body.dark-mode.woocommerce-checkout .wc-block-components-notice-banner {
    background: #1f1f1f !important;
    border-color: rgba(242, 234, 221, 0.10) !important;
    color: #f2eadd !important;
}
body.dark-mode.woocommerce-checkout ul.woocommerce-error li {
    background: transparent !important;
    border: 0 !important;
    color: #f2eadd !important;
}
/* Outer wrappers should be transparent in dark mode (the inner notice has its
 * own surface). The light-mode default applies a cream bg here too, so we
 * override with a transparent dark surface. */
body.dark-mode.woocommerce-checkout .woocommerce-NoticeGroup,
body.dark-mode.woocommerce-checkout .woocommerce-notices-wrapper {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}
body.dark-mode.woocommerce-checkout .woocommerce-error {
    background: rgba(184, 69, 63, 0.18) !important;
    border-color: rgba(184, 69, 63, 0.45) !important;
    color: #f2eadd !important;
}
body.dark-mode.woocommerce-checkout .woocommerce-error li,
body.dark-mode.woocommerce-checkout .woocommerce-error a {
    color: #f2eadd !important;
}
body.dark-mode.woocommerce-checkout .form-row.validate-required .woocommerce-form__label,
body.dark-mode.woocommerce-checkout .woocommerce-privacy-policy-text { color: #f2eadd !important; }
body.dark-mode.woocommerce-checkout h3,
body.dark-mode.woocommerce-checkout #order_review_heading,
body.dark-mode.woocommerce-checkout .shop_table th,
body.dark-mode.woocommerce-checkout .shop_table td,
body.dark-mode.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.dark-mode.woocommerce-checkout .woocommerce-info,
body.dark-mode.woocommerce-checkout #payment ul.payment_methods label { color: #f2eadd !important; }
body.dark-mode.woocommerce-checkout .form-row label { color: #b8aea0 !important; }
body.dark-mode.woocommerce-checkout .form-row input.input-text,
body.dark-mode.woocommerce-checkout .form-row textarea,
body.dark-mode.woocommerce-checkout .form-row select,
body.dark-mode.woocommerce-checkout .select2-container--default .select2-selection--single {
    background: #1f1f1f !important;
    border-color: rgba(242, 234, 221, 0.15) !important;
    color: #f2eadd !important;
}
/* Select2 selected-value text. Without this, the inner __rendered
 * span keeps its default near-black colour and reads as illegible
 * black-on-dark (the previous rule only colours the outer wrapper). */
body.dark-mode.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered,
body.dark-mode.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #f2eadd !important;
}
/* Select2 arrow tip — recolour so it doesn't disappear on dark bg. */
body.dark-mode.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #b8aea0 transparent transparent transparent !important;
}
body.dark-mode.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #b8aea0 transparent !important;
}

/* Select2 floating DROPDOWN.
 *
 * IMPORTANT: select2 appends its dropdown panel to <body> directly —
 * not inside body.woocommerce-checkout — so the dark-mode-scoped rules
 * above don't reach it. We scope to `body.dark-mode .select2-dropdown`
 * which catches the open dropdown wherever it gets attached. The
 * country select on the cart / my-account / register pages picks up
 * the same dark styling as a bonus. */
body.dark-mode .select2-container--default .select2-dropdown,
body.dark-mode .select2-container--open .select2-dropdown {
    background: #1f1f1f !important;
    border-color: rgba(242, 234, 221, 0.18) !important;
    color: #f2eadd !important;
}
body.dark-mode .select2-container--default .select2-dropdown .select2-search--dropdown {
    padding: 6px;
    background: #1f1f1f !important;
}
body.dark-mode .select2-container--default .select2-dropdown .select2-search--dropdown .select2-search__field {
    background: #161311 !important;
    color: #f2eadd !important;
    border: 1px solid rgba(242, 234, 221, 0.18) !important;
    border-radius: 6px;
}
body.dark-mode .select2-container--default .select2-dropdown .select2-search__field:focus {
    border-color: var(--ck-gold) !important;
    outline: none !important;
}
body.dark-mode .select2-container--default .select2-dropdown .select2-results__options {
    background: #1f1f1f !important;
}
body.dark-mode .select2-container--default .select2-dropdown .select2-results__option {
    background: #1f1f1f !important;
    color: #f2eadd !important;
}
/* Hovered / keyboard-focused option — gold accent on dark */
body.dark-mode .select2-container--default .select2-dropdown .select2-results__option--highlighted,
body.dark-mode .select2-container--default .select2-dropdown .select2-results__option--highlighted[aria-selected] {
    background: rgba(207, 163, 98, 0.18) !important;
    color: var(--ck-gold) !important;
}
/* Currently-selected option (the country already picked) */
body.dark-mode .select2-container--default .select2-dropdown .select2-results__option[aria-selected="true"],
body.dark-mode .select2-container--default .select2-dropdown .select2-results__option--selected {
    background: rgba(207, 163, 98, 0.10) !important;
    color: var(--ck-gold) !important;
}
/* "No results found" empty state */
body.dark-mode .select2-container--default .select2-dropdown .select2-results__option--disabled,
body.dark-mode .select2-container--default .select2-dropdown .select2-results__message {
    color: #b8aea0 !important;
    background: transparent !important;
}
body.dark-mode.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.dark-mode.woocommerce-checkout #payment ul.payment_methods .payment_box,
body.dark-mode.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    background: #1f1f1f !important;
}
body.dark-mode.woocommerce-checkout #payment ul.payment_methods .payment_box,
body.dark-mode.woocommerce-checkout #payment ul.payment_methods .payment_box * {
    color: #f2eadd !important;
}
/* Selected payment method — cream → dark surface in dark mode */
body.dark-mode.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:has(input:checked),
body.dark-mode.woocommerce-checkout #payment ul.payment_methods input[type="radio"]:checked + label {
    background: #2a2a2a !important;
    border-color: var(--ck-gold) !important;
    color: #f2eadd !important;
}
body.dark-mode.woocommerce-checkout .shop_table th,
body.dark-mode.woocommerce-checkout .shop_table td { border-bottom-color: rgba(242, 234, 221, 0.10) !important; }

/* Coupon toggle + revealed coupon form: dark surface + light text */
body.dark-mode.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.dark-mode.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
body.dark-mode.woocommerce-checkout form.checkout_coupon {
    background: #1f1f1f !important;
    border-color: rgba(242, 234, 221, 0.10) !important;
    color: #f2eadd !important;
}
body.dark-mode.woocommerce-checkout .ukch-checkout-extras .woocommerce-form-coupon-toggle,
body.dark-mode.woocommerce-checkout .ukch-checkout-extras .woocommerce-form-coupon-toggle .woocommerce-info,
body.dark-mode.woocommerce-checkout .ukch-checkout-extras .woocommerce-form-login-toggle,
body.dark-mode.woocommerce-checkout .ukch-checkout-extras .woocommerce-form-login-toggle .woocommerce-info,
body.dark-mode.woocommerce-checkout .ukch-checkout-extras form.checkout_coupon {
    background: transparent !important;
    border: 0 !important;
    color: #f2eadd !important;
}
body.dark-mode.woocommerce-checkout form.checkout_coupon input[type="text"] {
    background: #2a2a2a !important;
    border-color: rgba(242, 234, 221, 0.18) !important;
    color: #f2eadd !important;
}

/* YITH points messages — text color in dark mode */
body.dark-mode.woocommerce-checkout [id^="yith-par-message"],
body.dark-mode.woocommerce-checkout [id^="yith-par-message"] *,
body.dark-mode.woocommerce-checkout .ukch-checkout-extras [id^="yith-par-message"],
body.dark-mode.woocommerce-checkout .ukch-checkout-extras [id^="yith-par-message"] *,
body.dark-mode.woocommerce-checkout .ukch-checkout-extras .woocommerce-cart-notice,
body.dark-mode.woocommerce-checkout .ukch-checkout-extras .ywpar_apply_discounts,
body.dark-mode.woocommerce-checkout .ukch-checkout-extras .ywpar_apply_discounts * {
    color: #f2eadd !important;
}
body.dark-mode.woocommerce-checkout [id^="yith-par-message"] strong,
body.dark-mode.woocommerce-checkout .ukch-checkout-extras strong {
    color: var(--ck-gold) !important;
}
/* Standalone (non-extras) YITH widget surface in dark mode */
body.dark-mode.woocommerce-checkout > [id^="yith-par-message"],
body.dark-mode.woocommerce-checkout .ywpar_apply_discounts,
body.dark-mode.woocommerce-checkout form[class*="ywpar"],
body.dark-mode.woocommerce-checkout [class*="ywpar_"] {
    background: #222 !important;
    border-color: rgba(242, 234, 221, 0.10) !important;
}


/* =====================================================================
 * APPLY POINTS button — broader selector
 *
 * The narrower [class*="ywpar_"] match earlier in this file only covers
 * buttons that sit inside an element whose own class contains `ywpar_`.
 * In some YITH versions the "Apply discount" button lives inside a
 * generic .yith_ywpar_apply_points_form / [id^="yith-par-message"]
 * wrapper and inherits a black background from a different rule. The
 * fallback below paints the gold gradient on every button inside any
 * YITH points / discounts surface, regardless of nesting.
 * ===================================================================== */
body.woocommerce-checkout [id^="yith-par-message"] button,
body.woocommerce-checkout [id^="yith-par-message"] input[type="submit"],
body.woocommerce-checkout form[class*="ywpar"] button,
body.woocommerce-checkout form[class*="ywpar"] input[type="submit"],
body.woocommerce-checkout .ywpar_apply_discounts button,
body.woocommerce-checkout .ywpar_apply_discounts input[type="submit"],
body.woocommerce-checkout .yith_ywpar_apply_points_form button,
body.woocommerce-checkout .yith_ywpar_apply_points_form input[type="submit"] {
    background: linear-gradient(180deg, var(--ck-gold) 0%, var(--ck-gold-dark) 100%) !important;
    background-color: var(--ck-gold) !important;
    border: 1px solid var(--ck-gold-dark) !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    padding: 10px 22px !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    cursor: pointer !important;
    box-shadow: 0 6px 18px rgba(207,163,98,0.28) !important;
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease !important;
}
/* Hover: distinct colour shift, not just a brightness bump.
 * Background flips from gold gradient to deep ink, white text stays,
 * and the gold border reads as a hairline accent — same idea as the
 * homepage Add-to-Cart button hover state. */
body.woocommerce-checkout [id^="yith-par-message"] button:hover,
body.woocommerce-checkout [id^="yith-par-message"] input[type="submit"]:hover,
body.woocommerce-checkout form[class*="ywpar"] button:hover,
body.woocommerce-checkout form[class*="ywpar"] input[type="submit"]:hover,
body.woocommerce-checkout .ywpar_apply_discounts button:hover,
body.woocommerce-checkout .ywpar_apply_discounts input[type="submit"]:hover,
body.woocommerce-checkout .yith_ywpar_apply_points_form button:hover,
body.woocommerce-checkout .yith_ywpar_apply_points_form input[type="submit"]:hover,
body.woocommerce-checkout [id^="yith-par-message"] button:focus-visible,
body.woocommerce-checkout form[class*="ywpar"] button:focus-visible,
body.woocommerce-checkout .ywpar_apply_discounts button:focus-visible,
body.woocommerce-checkout .yith_ywpar_apply_points_form button:focus-visible {
    background: var(--ck-ink) !important;
    background-color: var(--ck-ink) !important;
    border-color: var(--ck-gold-dark) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(28, 28, 30, 0.32) !important;
}

/* Dark mode: hover swaps to a paler gold-dark surface so the change
 * is still visible against the dark page bg. */
body.dark-mode.woocommerce-checkout [id^="yith-par-message"] button:hover,
body.dark-mode.woocommerce-checkout form[class*="ywpar"] button:hover,
body.dark-mode.woocommerce-checkout .ywpar_apply_discounts button:hover,
body.dark-mode.woocommerce-checkout .yith_ywpar_apply_points_form button:hover {
    background: #f2eadd !important;
    background-color: #f2eadd !important;
    border-color: var(--ck-gold) !important;
    color: var(--ck-ink) !important;
    box-shadow: 0 10px 24px rgba(207, 163, 98, 0.30) !important;
}


/* =====================================================================
 * PAYMENT METHOD label — keep the radio + label inline
 *
 * Klarna and PayPal each render a label that contains: a text node
 * (e.g. "Pay in full today"), an SVG/IMG logo, and a "What is Klarna?"
 * link. Default WC layout puts a <br> or block helper after the
 * primary text which forces the helper line BELOW the radio, breaking
 * the inline appearance the user expects.
 *
 * Fix: lock the <li> to a flex row so radio + label always sit on the
 * same line, allow the label content to wrap onto a second line if
 * it must but keep the radio anchored at the start, and unify the
 * inline image alignment.
 * ===================================================================== */
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
}
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method
    > input[type="radio"] {
    flex: 0 0 auto !important;
    margin: 0 !important;
}
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method
    > label {
    flex: 1 1 auto !important;
    min-width: 0;
    display: inline-flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0 !important;
    line-height: 1.4 !important;
}
/* Klarna's helper link ("What is Klarna?") and similar wrap below the
 * primary label text on narrow rows but stay on the same row when there
 * is space. */
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method
    > label a {
    color: var(--ck-gold-dark) !important;
    text-decoration: underline !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-bottom: 0 !important;
}
/* The .payment_box (gateway form area) is a sibling block — push it
 * onto its own line so it doesn't try to share the flex row. */
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method
    > .payment_box {
    flex: 1 0 100%;
}


/* =====================================================================
 * CARD FORM inputs (and any payment-box inputs)
 *
 * The "Pay securely using your credit or debit card" block contains
 * inputs for card number / expiry / CVC. Default WC styling leaves
 * them with a transparent / white background that reads badly inside
 * our ivory payment_box, especially in dark mode where the underlying
 * surface is dark and the inputs end up barely visible.
 * ===================================================================== */
body.woocommerce-checkout #payment .payment_box input[type="text"],
body.woocommerce-checkout #payment .payment_box input[type="email"],
body.woocommerce-checkout #payment .payment_box input[type="tel"],
body.woocommerce-checkout #payment .payment_box input[type="number"],
body.woocommerce-checkout #payment .payment_box select,
body.woocommerce-checkout #payment .payment_box .wc-credit-card-form input,
body.woocommerce-checkout #payment .payment_box .wc-square-credit-card-form input {
    width: 100% !important;
    padding: 12px 14px !important;
    background: #ffffff !important;
    color: var(--ck-ink) !important;
    border: 1px solid var(--ck-line) !important;
    border-radius: 10px !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body.woocommerce-checkout #payment .payment_box input:focus,
body.woocommerce-checkout #payment .payment_box select:focus {
    outline: none !important;
    border-color: var(--ck-gold) !important;
    box-shadow: 0 0 0 3px rgba(207, 163, 98, 0.18) !important;
}
body.woocommerce-checkout #payment .payment_box label {
    display: block;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ck-ink);
}
body.woocommerce-checkout #payment .payment_box .form-row {
    margin: 0 0 12px !important;
}
/* Iframe-based card fields (Stripe Elements / Square) — pad the
 * iframe wrapper so it visually matches the native inputs. */
body.woocommerce-checkout #payment .payment_box .wc-stripe-elements-field,
body.woocommerce-checkout #payment .payment_box .square-input--credit-card {
    padding: 12px 14px !important;
    background: #ffffff !important;
    border: 1px solid var(--ck-line) !important;
    border-radius: 10px !important;
}

/* Dark-mode equivalents for the inputs above. */
body.dark-mode.woocommerce-checkout #payment .payment_box input[type="text"],
body.dark-mode.woocommerce-checkout #payment .payment_box input[type="email"],
body.dark-mode.woocommerce-checkout #payment .payment_box input[type="tel"],
body.dark-mode.woocommerce-checkout #payment .payment_box input[type="number"],
body.dark-mode.woocommerce-checkout #payment .payment_box select,
body.dark-mode.woocommerce-checkout #payment .payment_box .wc-credit-card-form input,
body.dark-mode.woocommerce-checkout #payment .payment_box .wc-stripe-elements-field,
body.dark-mode.woocommerce-checkout #payment .payment_box .square-input--credit-card {
    background: #1f1c19 !important;
    color: #f2eadd !important;
    border-color: rgba(242, 234, 221, 0.18) !important;
}
body.dark-mode.woocommerce-checkout #payment .payment_box input:focus,
body.dark-mode.woocommerce-checkout #payment .payment_box select:focus {
    border-color: var(--ck-gold) !important;
    box-shadow: 0 0 0 3px rgba(207, 163, 98, 0.22) !important;
}
body.dark-mode.woocommerce-checkout #payment .payment_box label {
    color: #f2eadd !important;
}


/* =====================================================================
 * PLACE ORDER button — inline spinner state
 *
 * checkout-button-feedback.js adds .is-loading to #place_order on
 * `checkout_place_order` and removes it on `checkout_error`. The
 * pseudo-element below replaces the button's visible text with a
 * spinning circle anchored INSIDE the button itself, so the user
 * never has to look up to the centre of the viewport for feedback.
 *
 * The default WC blockUI overlay still appears on top of the form,
 * but the button-side spinner is what the user's eye is already on.
 * ===================================================================== */
body.woocommerce-checkout #place_order.is-loading,
body.woocommerce-checkout button[name="woocommerce_checkout_place_order"].is-loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}
body.woocommerce-checkout #place_order.is-loading::after,
body.woocommerce-checkout button[name="woocommerce_checkout_place_order"].is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: ukch-checkout-btn-spin 0.7s linear infinite;
}
@keyframes ukch-checkout-btn-spin {
    to { transform: rotate(360deg); }
}

/* Hide WooCommerce's default blockUI overlay/spinner on the checkout
 * form. WC's blockUI puts a loading icon in the GEOMETRIC CENTRE of
 * whatever it blocks — for a tall checkout form that lands somewhere
 * around payment methods, far above where the user clicked Place Order
 * at the bottom. Result: user sees a dimmed page and no spinner in
 * their viewport, so they think nothing's happening.
 *
 * The inline button spinner (#place_order.is-loading::after above)
 * already gives feedback right where the user clicked. We don't need
 * the additional confusing centre-spinner. We DO keep the overlay's
 * click-blocking behaviour by leaving pointer-events: none alone — WC
 * adds .processing on the form which our button rule already covers
 * with pointer-events: none on .is-loading. */
body.woocommerce-checkout form.checkout > .blockUI,
body.woocommerce-checkout form.checkout .blockUI.blockOverlay,
body.woocommerce-checkout form.checkout .blockUI.blockMsg,
body.woocommerce-checkout #order_review .blockUI,
body.woocommerce-checkout #order_review .blockUI.blockOverlay,
body.woocommerce-checkout #order_review .blockUI.blockMsg {
    display: none !important;
}


/* =====================================================================
 * REVIEW ORDER — product thumbnails + scrollable cart rows
 *
 * Theme review-order.php template adds 60x60 thumbnails to each row
 * (.ukch-review-cart-row) and tags the <tbody> as scrollable
 * (.ukch-review-cart-scroll). For long carts the row area scrolls
 * inside a max-height of ~340px while the totals stay anchored.
 *
 * NOTE: <tbody> is `display: table-row-group` and can't be made
 * scrollable directly. The trick is to set `display: block` on the
 * tbody and add an explicit max-height — the rows then become
 * block-level scroll children. We also force the table itself to
 * `display: block` (with `width: 100%`) so the tbody's block layout
 * doesn't break the table's column alignment.
 * ===================================================================== */
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
    display: table !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table .ukch-review-cart-scroll {
    display: block;
    max-height: 340px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Subtle gold scrollbar to match the brand */
    scrollbar-width: thin;
    scrollbar-color: var(--ck-gold) transparent;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table .ukch-review-cart-scroll::-webkit-scrollbar {
    width: 8px;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table .ukch-review-cart-scroll::-webkit-scrollbar-track {
    background: transparent;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table .ukch-review-cart-scroll::-webkit-scrollbar-thumb {
    background: var(--ck-gold-line);
    border-radius: 999px;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table .ukch-review-cart-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--ck-gold);
}
/* Each <tr> needs to be a block-table-row hybrid so the columns stay
 * aligned even though the tbody is `display: block`. We give every
 * row a flex layout: name on the left, subtotal on the right. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table .ukch-review-cart-scroll > tr {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--ck-line);
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table .ukch-review-cart-scroll > tr:last-child {
    border-bottom: 0;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table .ukch-review-cart-scroll > tr > .product-name {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table .ukch-review-cart-scroll > tr > .product-total {
    flex: 0 0 auto;
    text-align: right;
    padding: 0 !important;
    border: 0 !important;
    font-weight: 600;
    color: var(--ck-ink);
    white-space: nowrap;
}
/* The row content: thumbnail + text */
body.woocommerce-checkout .ukch-review-cart-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
body.woocommerce-checkout .ukch-review-cart-thumb-wrap {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    background: var(--ck-ivory);
    border: 1px solid var(--ck-line);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.woocommerce-checkout .ukch-review-cart-thumb-wrap img,
body.woocommerce-checkout img.ukch-review-cart-thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    box-sizing: border-box;
    display: block;
}
body.woocommerce-checkout .ukch-review-cart-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--ck-ink);
}
body.woocommerce-checkout .ukch-review-cart-text .product-quantity {
    color: var(--ck-muted);
    font-weight: 500;
    margin-left: 4px;
}

/* Dark mode — thumbnail tile bg + scrollbar tones + READABLE TEXT.
 * `--ck-ink` is #1c1c1e which is invisible on the dark body bg, so
 * the row text and subtotal need explicit cream colours here. */
body.dark-mode.woocommerce-checkout .ukch-review-cart-thumb-wrap {
    background: #1f1c19;
    border-color: rgba(242, 234, 221, 0.18);
}
body.dark-mode.woocommerce-checkout .woocommerce-checkout-review-order-table .ukch-review-cart-scroll > tr {
    border-bottom-color: rgba(242, 234, 221, 0.10);
}
body.dark-mode.woocommerce-checkout .woocommerce-checkout-review-order-table .ukch-review-cart-scroll {
    scrollbar-color: var(--ck-gold) transparent;
}
body.dark-mode.woocommerce-checkout .ukch-review-cart-text,
body.dark-mode.woocommerce-checkout .ukch-review-cart-text a {
    color: #f2eadd !important;
}
body.dark-mode.woocommerce-checkout .ukch-review-cart-text .product-quantity {
    color: #b8b0a3 !important;
}
body.dark-mode.woocommerce-checkout .woocommerce-checkout-review-order-table .ukch-review-cart-scroll > tr > .product-total {
    color: #f2eadd !important;
}
/* Order totals in <tfoot> — Subtotal / Shipping / Total — also need
 * cream text in dark mode since the default uses --ck-ink. */
body.dark-mode.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
body.dark-mode.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
    color: #f2eadd !important;
}
body.dark-mode.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
body.dark-mode.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
    color: var(--ck-gold) !important;
}


/* =====================================================================
 * CHECKOUT CONFIRMATION MODAL
 *
 * checkout-confirm-modal.js intercepts the Place Order click and
 * injects this modal showing every value the customer entered.
 * They have to tick "I confirm my details are correct" AND click
 * "Confirm and pay" before the order actually submits — so when an
 * address is wrong, we have a record they explicitly confirmed it.
 *
 * Visible structure (matches the brand's gold/ivory/Lora language):
 *   - Full-screen dimmed overlay
 *   - Centred card with a serif heading + intro paragraph
 *   - Stacked rows: Email / Phone / Billing / Shipping / Shipping method
 *     / Payment method / Order total
 *   - Required checkbox
 *   - Two buttons: Edit details (cancel) + Confirm and pay (gold)
 * ===================================================================== */
body.ukch-confirm-open { overflow: hidden; }

.ukch-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(28, 28, 30, 0.55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    animation: ukch-confirm-fade .2s ease-out;
}
@keyframes ukch-confirm-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.ukch-confirm-modal {
    width: 100%;
    max-width: 540px;
    background: var(--ck-bg);
    color: var(--ck-ink);
    border: 1px solid var(--ck-gold-line);
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    padding: clamp(20px, 4vw, 32px);
    font-family: 'Poppins', Arial, sans-serif;
    animation: ukch-confirm-slide .25s ease-out;
}
@keyframes ukch-confirm-slide {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.ukch-confirm-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 8px;
}
.ukch-confirm-modal h2 {
    margin: 0;
    font-family: 'Lora', Georgia, serif;
    font-size: clamp(20px, 2.5vw, 26px);
    font-weight: 500;
    line-height: 1.2;
    color: var(--ck-ink);
}
.ukch-confirm-close {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    border: 0;
    background: transparent;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    color: var(--ck-muted);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.ukch-confirm-close:hover,
.ukch-confirm-close:focus-visible {
    background: var(--ck-ivory);
    color: var(--ck-ink);
    outline: none;
}
.ukch-confirm-intro {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ck-muted);
}
.ukch-confirm-rows {
    border: 1px solid var(--ck-line);
    border-radius: 10px;
    background: var(--ck-ivory);
    overflow: hidden;
}
.ukch-confirm-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--ck-line);
    font-size: 13.5px;
    line-height: 1.5;
}
.ukch-confirm-row:last-child { border-bottom: 0; }
.ukch-confirm-row__label {
    font-weight: 600;
    color: var(--ck-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
    padding-top: 1px;
}
.ukch-confirm-row__value {
    color: var(--ck-ink);
    word-break: break-word;
}
.ukch-confirm-row__value em {
    color: var(--ck-muted);
    font-style: normal;
}
.ukch-confirm-missing {
    color: var(--ck-danger) !important;
    font-style: normal !important;
}

.ukch-confirm-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0 6px;
    padding: 12px 14px;
    background: rgba(207, 163, 98, 0.08);
    border: 1px solid var(--ck-gold-line);
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ck-ink);
}
.ukch-confirm-checkbox input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 2px;
    width: 18px;
    height: 18px;
    accent-color: var(--ck-gold-dark);
    cursor: pointer;
}

.ukch-confirm-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.ukch-confirm-actions button {
    flex: 1 1 auto;
    min-width: 140px;
    padding: 12px 18px;
    border-radius: 999px;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.ukch-confirm-cancel {
    background: transparent;
    color: var(--ck-ink);
    border: 1px solid var(--ck-line);
}
.ukch-confirm-cancel:hover,
.ukch-confirm-cancel:focus-visible {
    border-color: var(--ck-gold-dark);
    color: var(--ck-gold-dark);
    outline: none;
}
.ukch-confirm-submit {
    background: linear-gradient(180deg, var(--ck-gold) 0%, var(--ck-gold-dark) 100%);
    border: 1px solid var(--ck-gold-dark);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(207, 163, 98, 0.28);
}
.ukch-confirm-submit:hover:not(:disabled),
.ukch-confirm-submit:focus-visible:not(:disabled) {
    background: var(--ck-ink);
    border-color: var(--ck-gold-dark);
    color: #ffffff;
    outline: none;
}
.ukch-confirm-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* In-modal spinner state — replaces the button's text with an inline
 * rotating circle while the order is being processed. The modal stays
 * open during submission; on success the page navigates away (modal
 * is gone with it), on error the modal closes and the parent-page
 * scroll-to-error kicks in. */
.ukch-confirm-submit.is-loading {
    color: transparent !important;
    position: relative;
    opacity: 1; /* override the :disabled 0.5 so the button stays vibrant */
    cursor: wait;
}
.ukch-confirm-submit.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: ukch-checkout-btn-spin 0.7s linear infinite;
}
/* While submitting, mute the modal so it reads as "processing": fade
 * the cancel button + checkbox, and dim the rows so the user's eye
 * goes to the spinning button. */
.ukch-confirm-overlay.is-submitting .ukch-confirm-cancel,
.ukch-confirm-overlay.is-submitting .ukch-confirm-close,
.ukch-confirm-overlay.is-submitting .ukch-confirm-checkbox {
    opacity: 0.55;
    pointer-events: none;
}
.ukch-confirm-overlay.is-submitting .ukch-confirm-rows {
    opacity: 0.7;
}

/* Mobile — stack the row label above the value */
@media (max-width: 480px) {
    .ukch-confirm-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* Dark mode */
body.dark-mode .ukch-confirm-overlay {
    background: rgba(0, 0, 0, 0.7);
}
body.dark-mode .ukch-confirm-modal {
    background: #1f1c19;
    color: #f2eadd;
    border-color: rgba(242, 234, 221, 0.10);
}
body.dark-mode .ukch-confirm-modal h2 { color: #f2eadd; }
body.dark-mode .ukch-confirm-intro    { color: #b8b0a3; }
body.dark-mode .ukch-confirm-rows {
    background: #161311;
    border-color: rgba(242, 234, 221, 0.08);
}
body.dark-mode .ukch-confirm-row {
    border-bottom-color: rgba(242, 234, 221, 0.08);
}
body.dark-mode .ukch-confirm-row__label { color: #b8b0a3; }
body.dark-mode .ukch-confirm-row__value { color: #f2eadd; }
body.dark-mode .ukch-confirm-checkbox  {
    background: rgba(207, 163, 98, 0.10);
    border-color: rgba(207, 163, 98, 0.35);
    color: #f2eadd;
}
body.dark-mode .ukch-confirm-cancel    { color: #f2eadd; border-color: rgba(242, 234, 221, 0.18); }
body.dark-mode .ukch-confirm-cancel:hover { color: var(--ck-gold); border-color: var(--ck-gold); }
body.dark-mode .ukch-confirm-close     { color: #b8b0a3; }

/* Pay-for-order page (`/checkout/order-pay/{id}/`): the default WC `.shop_table`
   has zero horizontal cell padding so on mobile the "× 1" qty column visually
   touches the "£X" subtotal column. Add breathing room between cells, mobile
   only — desktop keeps the default WC styling. */
@media (max-width: 767.98px) {
    body.woocommerce-order-pay .shop_table.order_details td,
    body.woocommerce-order-pay .shop_table.order_details th {
        padding: 10px 12px !important;
    }
    body.woocommerce-order-pay .shop_table.order_details td.product-quantity {
        text-align: center;
        padding-left: 14px !important;
        padding-right: 14px !important;
        white-space: nowrap;
    }
    body.woocommerce-order-pay .shop_table.order_details td.product-subtotal,
    body.woocommerce-order-pay .shop_table.order_details td.product-total {
        text-align: right;
        padding-left: 14px !important;
    }
    body.woocommerce-order-pay .shop_table.order_details tfoot th,
    body.woocommerce-order-pay .shop_table.order_details tr.cart-subtotal th,
    body.woocommerce-order-pay .shop_table.order_details tr.shipping th,
    body.woocommerce-order-pay .shop_table.order_details tr.order-total th {
        padding-right: 14px !important;
    }
}
body.dark-mode .ukch-confirm-close:hover { background: rgba(242, 234, 221, 0.06); color: #f2eadd; }

/* ===========================================================
 * Address validator warning (UK postcode → city/county check).
 * Rendered by assets/js/checkout-address-validator.js when the
 * customer's entered town/county doesn't match what the postcode
 * actually maps to on postcodes.io. Non-blocking — they can
 * dismiss and proceed.
 * =========================================================== */
.ukch-addr-warning {
    margin: 8px 0 12px;
    padding: 12px 14px;
    background: #fff8e1;
    border: 1px solid #f5d36b;
    border-left: 4px solid #cfa362;
    border-radius: 8px;
    color: #4a3a18;
    font-size: 14px;
    line-height: 1.45;
}
.ukch-addr-warning__title {
    font-weight: 600;
    margin-bottom: 4px;
}
.ukch-addr-warning__body {
    margin-bottom: 10px;
}
.ukch-addr-warning__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.ukch-addr-warning__fix {
    background: #cfa362 !important;
    color: #1c1c1e !important;
    border: 0 !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    cursor: pointer;
}
.ukch-addr-warning__fix:hover { background: #b88d4f !important; }
.ukch-addr-warning__dismiss {
    background: transparent;
    color: #4a3a18;
    border: 0;
    padding: 8px 4px;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}
.ukch-addr-warning__dismiss:hover { color: #1c1c1e; }

body.dark-mode .ukch-addr-warning {
    background: #2a2418;
    border-color: rgba(207, 163, 98, 0.4);
    color: #f2eadd;
}
body.dark-mode .ukch-addr-warning__dismiss { color: #b8aea0; }
body.dark-mode .ukch-addr-warning__dismiss:hover { color: #f2eadd; }