/* =========================================================
   Chronic Therapy — standard WooCommerce checkout brand skin
   (Option A, Phase 2). Loaded only on the main /checkout/.
   Visual only — no payment logic. Scoped to the WC checkout
   so it can't leak to other pages.
   ========================================================= */

body.woocommerce-checkout {
    --ct-teal: #487170; --ct-teal-deep: #2f514f; --ct-mint: #f4f8f7;
    --ct-ink: #1c2422; --ct-ink-soft: #4a5552; --ct-line: #e2e8e6; --ct-gold: #b9914f;
    background: var(--ct-mint);
}
body.woocommerce-checkout,
body.woocommerce-checkout input,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea,
body.woocommerce-checkout button {
    font-family: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---- Content width + page title ---- */
.woocommerce-checkout .entry-title,
.woocommerce-checkout h1.entry-title,
body.woocommerce-checkout .entry-title {
    font-family: "Newsreader", Georgia, "Times New Roman", serif !important;
    font-weight: 500 !important; letter-spacing: -.01em !important; color: var(--ct-ink) !important;
    border: none !important; border-bottom: none !important; margin-bottom: 1.2rem !important;
}
/* Gold eyebrow above the page title, matching the rest of the portal */
body.woocommerce-checkout .entry-title::before {
    content: "Secure checkout"; display: block;
    font-family: "Hanken Grotesk", sans-serif; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; font-size: .74rem; color: var(--ct-gold); margin-bottom: .35rem;
}

/* ---- Section headings ---- */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3 {
    font-family: "Newsreader", Georgia, serif !important; font-weight: 500 !important;
    color: var(--ct-ink) !important; font-size: 1.35rem !important;
}

/* ---- Links + required marks ---- */
.woocommerce-checkout a { color: var(--ct-teal-deep) !important; }
.woocommerce-checkout .required { color: var(--ct-gold) !important; border: 0; }

/* ---- Coupon: a quiet, low-prominence link living inside the order-summary
   card, just under the "Your order" heading. Not a banner, not a card — so
   customers without a code aren't nudged off to go code-hunting. ---- */
/* Hidden until JS relocates it into the order card (no flash at the top). */
.woocommerce-form-coupon-toggle { display: none !important; }
body.ct-coupon-ready .woocommerce-form-coupon-toggle { display: block !important; margin: 0 0 .65rem !important; }
.woocommerce-form-coupon-toggle .woocommerce-info {
    display: block !important; background: transparent !important; border: 0 !important;
    box-shadow: none !important; padding: 0 !important; margin: 0 !important;
    color: var(--ct-ink-soft) !important; font-weight: 400 !important;
}
.woocommerce-form-coupon-toggle .woocommerce-info::before { display: none !important; } /* kill the info "i" icon */
.ct-coupon-link {
    display: inline-flex !important; align-items: center !important; gap: .4rem;
    color: var(--ct-teal-deep) !important; font-family: "Hanken Grotesk", sans-serif !important;
    font-weight: 500 !important; font-size: .9rem !important;
    text-decoration: underline !important; text-underline-offset: 2px !important;
}
.ct-coupon-link::before {
    content: ""; width: 1rem; height: 1rem; flex: none; background: var(--ct-teal);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21.41 11.58l-9-9A2 2 0 0 0 11 2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 .59 1.42l9 9a2 2 0 0 0 2.82 0l7-7a2 2 0 0 0 0-2.84zM6.5 8A1.5 1.5 0 1 1 8 6.5 1.5 1.5 0 0 1 6.5 8z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21.41 11.58l-9-9A2 2 0 0 0 11 2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 .59 1.42l9 9a2 2 0 0 0 2.82 0l7-7a2 2 0 0 0 0-2.84zM6.5 8A1.5 1.5 0 1 1 8 6.5 1.5 1.5 0 0 1 6.5 8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ct-coupon-link:hover { color: var(--ct-teal) !important; }

/* Other (non-coupon) notices keep a soft branded look */
.woocommerce-checkout .woocommerce-info:not(.woocommerce-form-coupon-toggle .woocommerce-info) {
    background: #fff !important; border: 1px solid var(--ct-line) !important; border-radius: 14px !important; color: var(--ct-ink-soft) !important;
}

/* The revealed code field + Apply, inline under the link (no card-in-card).
   NB: never set `display` on .checkout_coupon — its inline display:none/block is
   what WooCommerce's slideToggle animates. */
.checkout_coupon.woocommerce-form-coupon {
    border: 0 !important; background: transparent !important; padding: .55rem 0 0 !important; margin: 0 !important; overflow: hidden;
}
.checkout_coupon.woocommerce-form-coupon p:not(.form-row) { display: none !important; } /* drop the "if you have a coupon…" helper line */
.checkout_coupon .form-row { margin: 0 !important; padding: 0 !important; }
.checkout_coupon .form-row-first { float: left !important; width: 66% !important; }
.checkout_coupon .form-row-last { float: right !important; width: 30% !important; }
.checkout_coupon .input-text {
    width: 100% !important; height: 44px !important; background: var(--ct-mint) !important;
    border: 1px solid var(--ct-line) !important; border-radius: 10px !important;
}
.checkout_coupon .button {
    width: 100% !important; height: 44px !important; padding: 0 !important;
    background: var(--ct-teal) !important; border-radius: 10px !important; color: #fff !important; border: 0 !important;
    font-family: "Hanken Grotesk", sans-serif !important; font-weight: 600 !important;
}
.checkout_coupon::after { content: ""; display: block; clear: both; }

/* ---- Cards: customer details + order review ---- */
#customer_details,
.woocommerce-checkout #order_review {
    background: #fff !important; border: 1px solid var(--ct-line) !important; border-radius: 16px !important;
    box-shadow: 0 2px 10px rgba(31,58,57,.06) !important; padding: 1.1rem 1.2rem !important;
}
#customer_details { margin-bottom: .9rem; }
/* The "Your order" heading lives INSIDE the card now (one clean block) */
body.woocommerce-checkout #order_review h3#order_review_heading,
body.woocommerce-checkout #order_review #order_review_heading,
.woocommerce-checkout #order_review_heading {
    margin: 0 0 .7rem 0 !important; padding: 0 !important; border: none !important;
    text-align: left !important; display: block !important; width: 100% !important; float: none !important;
    font-family: "Newsreader", Georgia, serif !important; font-weight: 500 !important; font-size: 1.25rem !important; color: var(--ct-ink) !important;
}
/* Kill any nested borders/boxes inside the single order card */
.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table,
.woocommerce-checkout #order_review #payment,
.woocommerce-checkout #order_review #payment .payment_methods { border: none !important; background: transparent !important; box-shadow: none !important; }
/* Sticky order summary on desktop so the total + CTA stay in view */
@media (min-width: 993px) {
    .woocommerce-checkout #order_review { position: sticky; top: 1.2rem; }
}
@media (min-width: 993px) {
    /* Two-column inner billing/shipping reads cleaner with a gap */
    #customer_details .col2-set { display: flex; gap: 1.6rem; }
    #customer_details .col-1, #customer_details .col-2 { width: 50%; float: none; }
}

/* ---- Form fields ---- */
.woocommerce-checkout .form-row label { font-weight: 600 !important; color: var(--ct-ink) !important; font-size: .84rem !important; }
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea.input-text,
.woocommerce-checkout .select2-container--default .select2-selection--single {
    border: 1px solid var(--ct-line) !important; border-radius: 10px !important; min-height: 46px !important;
    padding: .55rem .9rem !important; background: #fff !important; color: var(--ct-ink) !important;
    font-size: .95rem !important; box-shadow: none !important; line-height: 1.4 !important;
}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
    border-color: var(--ct-teal) !important; box-shadow: 0 0 0 3px rgba(72,113,112,.12) !important; outline: none !important;
}
.select2-container--default .select2-selection--single { height: 46px !important; display: flex; align-items: center; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px !important; }
.select2-dropdown { border-color: var(--ct-line) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--ct-teal) !important; }

/* ---- Order review table ---- */
.woocommerce-checkout-review-order-table { border: none !important; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td { border: none !important; padding: .5rem 0 !important; }
/* Drop the PRODUCT / SUBTOTAL column headers — the thumbnailed list is self-evident */
.woocommerce-checkout-review-order-table thead { display: none !important; }
/* Line items: thumbnail tile + name + qty pill; price in ink, vertically centred */
.woocommerce-checkout-review-order-table .cart_item td {
    border-bottom: 1px solid #eef1f0 !important; padding: .6rem 0 !important; vertical-align: middle !important;
}
.woocommerce-checkout-review-order-table .product-name {
    font-family: "Newsreader", Georgia, serif !important; font-weight: 500 !important; color: var(--ct-ink) !important; line-height: 1.3;
}
.woocommerce-checkout-review-order-table .cart_item .product-total,
.woocommerce-checkout-review-order-table .cart_item .product-total .woocommerce-Price-amount {
    color: var(--ct-ink) !important; font-weight: 500; white-space: nowrap;
}
/* Totals: quiet labels, ink figures. Single divider above the subtotal group,
   another above the total — no per-row ledger lines. */
.woocommerce-checkout-review-order-table tfoot th { font-weight: 400; color: var(--ct-ink-soft) !important; }
.woocommerce-checkout-review-order-table tfoot td,
.woocommerce-checkout-review-order-table tfoot .woocommerce-Price-amount { color: var(--ct-ink) !important; }
.woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-checkout-review-order-table .cart-subtotal td { border-top: 1px solid var(--ct-line) !important; padding-top: .8rem !important; }
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals td { text-align: right; font-size: .82rem; line-height: 1.4; color: var(--ct-ink-soft) !important; }
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals .woocommerce-Price-amount { font-weight: 600; color: var(--ct-ink) !important; }
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
    border-top: 1px solid var(--ct-line) !important; padding-top: .8rem !important; vertical-align: baseline !important;
}
.woocommerce-checkout-review-order-table .order-total th {
    font-family: "Newsreader", Georgia, serif !important; font-weight: 500 !important; font-size: 1.15rem; color: var(--ct-ink) !important;
}
.woocommerce-checkout-review-order-table .order-total .amount,
.woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount {
    color: var(--ct-ink) !important; font-weight: 700; font-size: 1.4rem;
}

/* ---- Payment methods ---- */
.woocommerce-checkout #payment { background: transparent !important; border: none !important; border-radius: 0 !important; }
.woocommerce-checkout #payment ul.payment_methods {
    border: none !important; padding: 0 !important; margin: 0 !important; list-style: none !important;
    display: flex; flex-direction: column; gap: .45rem;
}
/* Compact each method to a single row: radio + label + brand logos inline-right;
   any payment box (card fields) wraps full-width below. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
    list-style: none !important; background: #fff; border: 1px solid var(--ct-line); border-radius: 11px;
    padding: .55rem .85rem; display: flex; flex-wrap: wrap; align-items: center;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(input:checked) {
    border-color: var(--ct-teal); background: #fbfdfc;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"] {
    flex: none; margin: 0 .55rem 0 0 !important;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
    flex: 1 1 auto; display: flex !important; align-items: center; gap: .5rem; margin: 0 !important; min-width: 0;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > .payment_box { flex: 0 0 100%; }
.woocommerce-checkout #payment label { font-weight: 600 !important; color: var(--ct-ink) !important; }
/* Gateway logo images were stacking large under the label — cap height, push right. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label img {
    height: 26px !important; width: auto !important; max-width: 48px; margin: 0 0 0 auto !important;
    display: inline-block; vertical-align: middle; padding: 0 !important;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label img + img { margin-left: .35rem !important; }
.woocommerce-checkout input[type="radio"],
.woocommerce-checkout input[type="checkbox"] { accent-color: var(--ct-teal); width: 18px; height: 18px; }
.woocommerce-checkout #payment .payment_box {
    background: var(--ct-mint) !important; border-radius: 10px !important; margin-top: .6rem !important;
}
.woocommerce-checkout #payment .payment_box::before { display: none !important; }
.woocommerce-checkout #payment .about_paypal,
.woocommerce-checkout #payment .woocommerce-privacy-policy-text { color: var(--ct-ink-soft) !important; }

/* ---- Place order button (Credit Card path) ---- */
.woocommerce-checkout #payment #place_order,
.woocommerce-checkout #place_order {
    background: var(--ct-teal) !important; color: #fff !important; border: none !important; border-radius: 999px !important;
    font-family: "Hanken Grotesk", sans-serif !important; font-weight: 600 !important; font-size: 1.02rem !important;
    min-height: 54px !important; padding: .6rem 1.5rem !important; box-shadow: 0 8px 24px rgba(72,113,112,.28) !important;
    text-shadow: none !important; width: 100% !important; float: none !important; display: block !important;
}
/* WooCommerce floats the place-order row; clear it so what follows sits below */
.woocommerce-checkout #payment .place-order { overflow: hidden; }
.woocommerce-checkout #payment #place_order:hover { background: var(--ct-teal-deep) !important; }

/* Keep the gateway-rendered wallet buttons (Apple/Google Pay) as-is — branded
   by the wallet vendors; just give them breathing room. */
.woocommerce-checkout #payment .payment_box img { vertical-align: middle; }

/* Make the privacy-policy link actually visible */
.woocommerce-checkout #payment .woocommerce-privacy-policy-text { color: var(--ct-ink-soft) !important; font-size: .82rem; line-height: 1.5; }
.woocommerce-checkout #payment .woocommerce-privacy-policy-text a { color: var(--ct-teal-deep) !important; text-decoration: underline !important; font-weight: 600; }

/* Trust line under the submit button */
.ct-checkout-trust {
    display: flex; align-items: center; justify-content: center; gap: .4rem; margin: .8rem 0 .2rem;
    font-family: "Hanken Grotesk", sans-serif; font-size: .82rem; color: var(--ct-ink-soft);
    clear: both; width: 100%;
}
.ct-checkout-trust svg { width: 14px; height: 14px; stroke: var(--ct-teal); fill: none; flex: none; }

/* "What happens next" reassurance note in the order card */
.ct-checkout-note {
    display: flex; gap: .55rem; align-items: flex-start; margin: .7rem 0 .2rem; padding: .6rem .85rem;
    background: var(--ct-mint); border: 1px solid var(--ct-line); border-radius: 11px;
    font-family: "Hanken Grotesk", sans-serif; font-size: .8rem; color: var(--ct-ink-soft); line-height: 1.45;
}
.ct-checkout-note svg { width: 16px; height: 16px; stroke: var(--ct-teal); fill: none; flex: none; margin-top: .1rem; }

/* ---- Tidy the address form into rows (flex grid; reliable pairing) ---- */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    display: flex; flex-wrap: wrap; gap: 0 1rem;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row {
    width: 100%; float: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box;
}
.woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { width: calc(50% - .5rem) !important; }
.woocommerce-checkout .form-row-wide { width: 100% !important; }
/* Always-Australia country field: submitted but hidden */
.woocommerce-checkout .ct-field-hidden { display: none !important; }

/* ---- Item count in the order heading ---- */
.woocommerce-checkout #order_review_heading .ct-order-count {
    font-family: "Hanken Grotesk", sans-serif; font-weight: 500; font-size: .9rem; color: var(--ct-ink-soft);
}

/* ---- Product tiles + qty pill in the order summary ---- */
/* Line item = tile | (name stacked over qty pill) */
.woocommerce-checkout-review-order-table td.product-name {
    display: flex !important; align-items: center; gap: .7rem;
}
.woocommerce-checkout-review-order-table .ct-rev-thumb {
    flex: none; width: 48px; height: 48px; margin: 0;
    background: var(--ct-mint); border: 1px solid var(--ct-line); border-radius: 11px;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.woocommerce-checkout-review-order-table .ct-rev-thumb img {
    width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 10px;
    display: block; margin: 0 !important; background: transparent;
}
.woocommerce-checkout-review-order-table .ct-rev-info {
    display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
}
.woocommerce-checkout-review-order-table .ct-rev-title {
    font-family: "Newsreader", Georgia, serif !important; font-weight: 500; color: var(--ct-ink); line-height: 1.3;
}
.woocommerce-checkout-review-order-table .ct-rev-qty {
    margin-top: 5px; font-family: "Hanken Grotesk", sans-serif; font-size: .72rem; color: var(--ct-ink-soft);
    background: var(--ct-mint); border: 1px solid var(--ct-line); border-radius: 999px;
    padding: 1px 9px; white-space: nowrap;
}

/* ---- Mobile: stack State + Postcode (State select truncates at half width) ---- */
@media (max-width: 600px) {
    .woocommerce-checkout #billing_state_field,
    .woocommerce-checkout #billing_postcode_field { width: 100% !important; }
}

/* ---- Focus the checkout: hide the floating chat + scroll-top here ---- */
body.woocommerce-checkout call-us-selector,
body.woocommerce-checkout #ast-scroll-top { display: none !important; }

/* ---- Spacing polish ---- */
.woocommerce-checkout .col2-set, .woocommerce-checkout #customer_details { margin-bottom: 1.3rem; }
.woocommerce-checkout #payment .place-order { margin-top: .4rem; }
/* Wallet (Apple/Google Pay) selected: hide the green Pay button — the gateway
   renders its own "Buy with …" button, so only that should be shown. */
.woocommerce-checkout #payment.ct-wallet-pay #place_order { display: none !important; }

/* ---- Express checkout band: the whole #payment block hoisted to the top ----
   functions.php moves the live #payment node into #ct-express-slot (the form's
   first child), so the methods + wallet button sit above the delivery form.
   The slot spans full width above the two columns; give it the same card look
   as the other panels. #payment keeps its own (vertical) method styling. */
#ct-express-slot {
    width: 100% !important; float: none !important; clear: both; box-sizing: border-box; margin: 0 0 1.3rem;
}
body.ct-express-top #ct-express-slot #payment {
    background: #fff !important; border: 1px solid var(--ct-line) !important; border-radius: 16px !important;
    box-shadow: 0 2px 10px rgba(31,58,57,.06) !important; padding: 1.1rem 1.2rem !important;
}
#ct-express-slot #payment::before {
    content: "Express checkout"; display: block;
    font-family: "Newsreader", Georgia, serif; font-weight: 500; font-size: 1.25rem;
    color: var(--ct-ink); margin: 0 0 .8rem;
}

/* ---- Wallet selected: all details come from the wallet sheet ----
   Apple/Google Pay supply name, email, phone and the billing + delivery address,
   so the whole Billing & Shipping card is hidden (JS also drops every field's
   "required"). A short note in the express panel explains where the details come
   from. Card payments show the full form. */
body.ct-wallet-address #customer_details { display: none !important; }
body.ct-wallet-address #ct-express-slot #payment::after {
    content: "Your name and delivery address will be taken from your Apple Pay / Google Pay wallet.";
    display: block; margin-top: .7rem; padding: .6rem .85rem;
    background: var(--ct-mint); border: 1px solid var(--ct-line); border-radius: 11px;
    font-family: "Hanken Grotesk", sans-serif; font-size: .8rem; color: var(--ct-ink-soft); line-height: 1.45;
}

/* ---- Bottom duplicate Pay button ----
   Credit Card payers who have to type their address (new patients) end up
   scrolled well past the Express checkout band at the top by the time the form
   is filled in. This mirrors that button at the very bottom of the page — same
   look, same label, wired in functions.php to just click the real #place_order.
   Hidden for wallets: their address form is hidden too, so there's nothing to
   scroll past and the express band's own "Buy with…" button already covers it. */
#ct-bottom-pay-wrap { width: 100%; margin: 1.3rem 0 0; }
body.ct-wallet-address #ct-bottom-pay-wrap { display: none !important; }
#ct-bottom-place-order {
    background-color: #487170 !important; color: #fff !important; border: none !important; border-radius: 999px !important;
    font-family: "Hanken Grotesk", sans-serif !important; font-weight: 600 !important; font-size: 1.02rem !important;
    min-height: 54px !important; padding: .6rem 1.5rem !important; box-shadow: 0 8px 24px rgba(72,113,112,.28) !important;
    text-shadow: none !important; width: 100% !important; float: none !important; display: block !important; cursor: pointer;
}
#ct-bottom-place-order:hover { background-color: #2f514f !important; }
#ct-bottom-pay-wrap .ct-checkout-trust { margin: .8rem 0 0; }