/*!
 * WooKit — Checkout
 * Minimal 2-mode (Persoană fizică / Firmă) checkout that rides the native WC
 * checkout. Uses --wookit-* design tokens so it inherits the theme look.
 */

.wookit-checkout {
    font-family: var( --wookit-font, inherit ) !important;
    color: var( --wookit-body, inherit ) !important;
    margin: 1.5rem 0 !important;
    /* Respond to the container width (Elementor column), not the viewport. */
    container-type: inline-size;
    container-name: wookit-checkout;
}

.wookit-checkout *,
.wookit-checkout *::before,
.wookit-checkout *::after { box-sizing: border-box !important; }

/* [hidden] must beat any theme display rule (company block toggling). */
.wookit-checkout [hidden] { display: none !important; }

.wookit-checkout--empty {
    padding: 24px !important;
    text-align: center !important;
    color: var( --wookit-muted, #6b7280 ) !important;
    background: var( --wookit-surface-alt, #f5f5f5 ) !important;
    border-radius: var( --wookit-radius-md, 8px ) !important;
}

/* ── Layout: details left, order review right ─────────────────────────────── */
.wookit-checkout__grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 20px;
    align-items: start;
}

/* The billing details panel is itself a container so its fields can respond
   to the panel width (which differs from the whole checkout width). */
.wookit-checkout__details {
    container-type: inline-size;
    container-name: wookit-details;
    min-width: 0;
}

.wookit-checkout__review { min-width: 0; }

/* Stack details/review when the checkout container gets narrow. */
@container wookit-checkout ( max-width: 820px ) {
    .wookit-checkout__grid { grid-template-columns: 1fr; }
}

.wookit-checkout__panel {
    background: var( --wookit-surface, #fff ) !important;
    border: 1px solid var( --wookit-border, #e2e4e7 ) !important;
    border-radius: var( --wookit-radius-md, 8px ) !important;
    padding: 18px !important;
}

.wookit-checkout__title {
    margin: 0 0 14px !important;
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    color: var( --wookit-text, inherit ) !important;
    letter-spacing: -0.01em !important;
}

/* ── Person-type switch — sliding segmented toggle ──────────────────────────
   Refactor strategy (bulletproof against host themes):
   1. `body` prefix bumps specificity to 0,3,1 so theme rules using
      .elementor-element-XXXX or .woocommerce-checkout button don't win.
   2. `display: flex` (not grid) — themes target flex containers far less
      aggressively than grid, and `flex: 1 1 0` on each button locks equal
      width regardless of inherited `min-height` / `width` from `button`.
   3. EXPLICIT 46px height (not auto) — themes that ship `button { min-height:
      50px }` can no longer inflate the container into a tall oval.
   4. Button padding is HORIZONTAL only; vertical centering via flex. The
      parent height owns the y-axis, the button just centers inside it.   */
body .wookit-checkout .wookit-checkout__switch {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    width: 100% !important;
    max-width: 320px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 4px !important;
    margin: 0 auto 18px !important;
    background: var( --wookit-surface-alt, #f1f5f9 ) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    user-select: none;
}

body .wookit-checkout .wookit-checkout__switch .wookit-checkout__switch-thumb {
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
    width: calc( 50% - 4px ) !important;
    height: calc( 100% - 8px ) !important;
    background: var( --wookit-surface, #ffffff ) !important;
    border-radius: 999px !important;
    box-shadow: 0 1px 4px rgba( 15, 23, 42, 0.14 ) !important;
    transition: transform 220ms cubic-bezier( 0.4, 0, 0.2, 1 );
    z-index: 0;
    pointer-events: none;
    flex: 0 0 auto !important;
}

body .wookit-checkout .wookit-checkout__switch.is-company .wookit-checkout__switch-thumb {
    transform: translateX( 100% );
}

body .wookit-checkout .wookit-checkout__switch .wookit-checkout__switch-opt,
body .wookit-checkout .wookit-checkout__switch .wookit-checkout__switch-opt:hover,
body .wookit-checkout .wookit-checkout__switch .wookit-checkout__switch-opt:focus,
body .wookit-checkout .wookit-checkout__switch .wookit-checkout__switch-opt:active {
    position: relative !important;
    z-index: 1 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    /* `display: flex` (not inline-flex) + `align-self: stretch` is the
       defense-in-depth combo that forces the button to fill the parent's
       cross-axis (38px = 46px parent height minus 4px padding × 2) so
       `align-items: center` actually has a 38px box to center text inside.
       Inline-flex + auto height proved unreliable across themes that ship
       generic `button { line-height: ... }` rules. */
    display: flex !important;
    align-self: stretch !important;
    flex: 1 1 0 !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 38px !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-shadow: none !important;
    color: var( --wookit-muted, #64748b ) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    transition: color 180ms ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

body .wookit-checkout .wookit-checkout__switch .wookit-checkout__switch-opt.is-active,
body .wookit-checkout .wookit-checkout__switch .wookit-checkout__switch-opt.is-active:hover {
    color: var( --wookit-accent, #6366f1 ) !important;
    background: transparent !important;
}

body .wookit-checkout .wookit-checkout__switch .wookit-checkout__switch-opt:focus-visible {
    outline: 2px solid var( --wookit-accent, #6366f1 ) !important;
    outline-offset: 2px !important;
}

@media ( prefers-reduced-motion: reduce ) {
    body .wookit-checkout .wookit-checkout__switch .wookit-checkout__switch-thumb { transition: none; }
}

/* Single-allowed-country: WC renders the country as a static label, not a
   select. Make that read as an intentional value. */
.wookit-checkout #billing_country_field strong {
    font-weight: 600 !important;
    color: var( --wookit-text, inherit ) !important;
}

/* ── Company block ────────────────────────────────────────────────────────── */
.wookit-checkout__company {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
    padding: 10px 0 4px !important;
}

.wookit-checkout__company .wookit-checkout__cui-hint { grid-column: 1 / -1; }

@container wookit-details ( max-width: 520px ) {
    .wookit-checkout__company { grid-template-columns: 1fr; }
}

.wookit-checkout__cui-hint {
    margin: 2px 0 0 !important;
    font-size: 0.78rem !important;
    color: var( --wookit-muted, #6b7280 ) !important;
}

/* Name fields are mandatory in their mode (company → company+CUI, individual →
   first+last) — show a required mark, not WC's "(optional)" suffix. */
.wookit-checkout .wookit-company-field .optional,
.wookit-checkout .wookit-individual-field .optional { display: none !important; }
.wookit-checkout .wookit-company-field label::after,
.wookit-checkout .wookit-individual-field label::after {
    content: " *";
    color: var( --wookit-danger-text, #b32d2e ) !important;
    font-weight: 700 !important;
}

/* ── WC form rows ─────────────────────────────────────────────────────────── */
/* WooCommerce's own woocommerce.css sets .form-row-first/.form-row-last to
   width:47% + float:left, which beats our grid (the item stays 47% inside its
   track). Neutralize WC's float/width — the CSS grid handles the columns, so
   every row fills its track (full width on mobile / 1-col). */
.wookit-checkout .form-row,
.wookit-checkout .form-row-first,
.wookit-checkout .form-row-last,
.wookit-checkout .form-row-wide {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0 0 12px !important;
    /* !important to beat WooCommerce's .woocommerce(-page) form .form-row-first
       { width:47%; float:left } which is more specific than our selectors. */
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

.wookit-checkout .wookit-checkout__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}

.wookit-checkout .wookit-checkout__fields .form-row-wide { grid-column: 1 / -1; }

@container wookit-details ( max-width: 520px ) {
    .wookit-checkout .wookit-checkout__fields { grid-template-columns: 1fr; }
    .wookit-checkout .wookit-checkout__fields .form-row { grid-column: 1 / -1; }
}

.wookit-checkout .form-row label {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var( --wookit-text, inherit ) !important;
}

.wookit-checkout .form-row .required { color: var( --wookit-danger-text, #b32d2e ) !important; border: 0 !important; }
.wookit-checkout .form-row .optional { color: var( --wookit-muted, #9ca3af ) !important; font-weight: 400 !important; }

.wookit-checkout .form-row input.input-text,
.wookit-checkout .form-row input[type="text"],
.wookit-checkout .form-row input[type="tel"],
.wookit-checkout .form-row input[type="email"],
.wookit-checkout .form-row input[type="number"],
.wookit-checkout .form-row select {
    width: 100%;
    padding: 0.6rem 0.7rem !important;
    border: 1.5px solid var( --wookit-border-input, #d1d5db ) !important;
    border-radius: var( --wookit-radius-sm, 6px ) !important;
    background: var( --wookit-surface, #fff ) !important;
    color: var( --wookit-text, inherit ) !important;
    font-family: inherit !important;
    font-size: 0.92rem !important;
    line-height: 1.3 !important;
}

/* ── Country / state select2 (selectWoo) — make it look like our inputs,
   not a box-in-a-box. The container is just a wrapper (no border); the inner
   "selection" is the styled control. ──────────────────────────────────────── */
.wookit-checkout .form-row .select2-container { width: 100% !important; }

.wookit-checkout .select2-container--default .select2-selection--single {
    height: auto;
    min-height: 42px;
    padding: 0.5rem 0.7rem !important;
    display: flex;
    align-items: center;
    border: 1.5px solid var( --wookit-border-input, #d1d5db ) !important;
    border-radius: var( --wookit-radius-sm, 6px ) !important;
    background: var( --wookit-surface, #fff ) !important;
}

.wookit-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
    line-height: 1.3 !important;
    color: var( --wookit-text, inherit ) !important;
    font-size: 0.92rem !important;
}

.wookit-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 8px;
}

.wookit-checkout .select2-container--open .select2-selection--single,
.wookit-checkout .select2-container--focus .select2-selection--single {
    border-color: var( --wookit-accent, #2271b1 ) !important;
}

.wookit-checkout .form-row input:focus,
.wookit-checkout .form-row select:focus {
    outline: none !important;
    border-color: var( --wookit-accent, #2271b1 ) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORDER REVIEW — modern summary (keeps WC's table/shipping/payment hooks)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sticky on wide layouts so the summary follows while filling the form. */
@container wookit-checkout ( min-width: 821px ) {
    .wookit-checkout__review .wookit-checkout__panel {
        position: sticky;
        top: 20px;
    }
}

/* WC's own wrapper around the review-order table — themes sometimes constrain
   max-width on it; force it to fill its parent panel. */
.wookit-checkout .woocommerce-checkout-review-order {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* The full table/tbody/tfoot chain is converted to flex columns. The previous
   `display: table` + `tbody: block` mix didn't stretch — once tbody becomes
   block, the table layout algorithm sees "no row groups", computes intrinsic
   width from the (now non-table) block child, and `width: 100%` on the table
   no longer fills the parent. Going all-flex bypasses table sizing entirely:
   each level is a flex column, every <tr> is a flex row at width: 100%. */
.wookit-checkout .woocommerce-checkout-review-order-table {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 0.9rem !important;
    box-sizing: border-box !important;
}

/* Hide the default table head — the section title already says "Your order". */
.wookit-checkout .woocommerce-checkout-review-order-table thead { display: none !important; }

.wookit-checkout .woocommerce-checkout-review-order-table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

.wookit-checkout .woocommerce-checkout-review-order-table tfoot {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Every row stretches to full container width (no more table-cell sizing). */
.wookit-checkout .woocommerce-checkout-review-order-table tr {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Neutralize WooCommerce's .shop_table cell borders/backgrounds so they don't
   fight our card styling. */
.wookit-checkout .woocommerce-checkout-review-order-table th,
.wookit-checkout .woocommerce-checkout-review-order-table td {
    display: block !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
    font-variant-numeric: tabular-nums;
}

/* ── Each cart line = a self-contained, light-bordered card (no grey) ──────── */
/* The ROW is a flex container so the border closes around the whole item.
   Spacing between cards comes from tbody's `gap: 8px` (above) — no margin
   needed here, which keeps the gap consistent without extra trailing space. */
.wookit-checkout .woocommerce-checkout-review-order-table .cart_item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px !important;
    margin: 0 !important;
    background: var( --wookit-surface, #fff ) !important;
    border: 1px solid var( --wookit-border, #e2e4e7 ) !important;
    border-radius: var( --wookit-radius-md, 8px ) !important;
}

.wookit-checkout .woocommerce-checkout-review-order-table .cart_item td {
    padding: 0 !important;
}

.wookit-checkout .woocommerce-checkout-review-order-table .cart_item .product-name {
    flex: 1 1 auto;
    min-width: 0;
}

.wookit-checkout .woocommerce-checkout-review-order-table .cart_item .product-total {
    flex: 0 0 auto;
    text-align: right !important;
    white-space: nowrap !important;
}

.wookit-checkout .woocommerce-checkout-review-order-table .product-name {
    color: var( --wookit-text, inherit ) !important;
    font-weight: 600 !important;
    padding-right: 12px !important;
}

/* Line item: thumbnail + info */
.wookit-checkout__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.wookit-checkout__item-thumb {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var( --wookit-radius-sm, 6px ) !important;
    overflow: hidden;
    background: var( --wookit-surface-alt, #f5f5f5 ) !important;
    box-shadow: 0 0 0 1px var( --wookit-border, #e2e4e7 ) !important;
}

.wookit-checkout__item-thumb img {
    width: 48px !important;
    height: 48px !important;
    object-fit: cover;
    display: block;
    border-radius: inherit !important;
    margin: 0 !important;
}

.wookit-checkout__item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wookit-checkout__item-name {
    font-weight: 600 !important;
    color: var( --wookit-text, inherit ) !important;
    line-height: 1.35 !important;
}

/* WC item meta (incl. "Part of bundle: …") under the name */
.wookit-checkout__item-info .variation,
.wookit-checkout__item-info dl.variation {
    margin: 2px 0 0 !important;
    font-size: 0.78rem !important;
    color: var( --wookit-muted, #6b7280 ) !important;
    line-height: 1.35 !important;
}
.wookit-checkout__item-info .variation dt,
.wookit-checkout__item-info .variation dd {
    display: inline;
    margin: 0 !important;
    font-weight: 500 !important;
}
.wookit-checkout__item-info .variation dd { margin-right: 6px !important; }
.wookit-checkout__item-info .variation dd p { display: inline; margin: 0 !important; }

/* ── Bundle "option" card in the summary (grouped display) ────────────────────
   Same structure as the cart card: image on the left, then a column holding the
   title + the shared product list directly beneath it. The product list + price
   styling come from the SHARED component (assets/css/core/bundle-display.css). */
.wookit-summary-bundle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.wookit-summary-bundle__body {
    flex: 1 1 auto;
    min-width: 0;
}
.wookit-summary-bundle__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px !important;
}
.wookit-summary-bundle__title {
    font-weight: 700 !important;
    color: var( --wookit-text, inherit ) !important;
    line-height: 1.3 !important;
}

/* ── Out-of-stock marking on review lines (these block checkout) ───────────── */
/* Red rail down the left of an offending bundle option so it's easy to spot. */
.wookit-summary-bundle-row.wookit-line--oos {
    box-shadow: inset 3px 0 0 0 var( --wookit-danger, #dc2626 );
}

/* Discreet (soft) red badge next to a single line / bundle title that can't be
   fulfilled — red text on a light red wash with a thin border, not a loud fill. */
.wookit-line-oos-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.6 !important;
    color: var( --wookit-danger, #dc2626 ) !important;
    background: color-mix( in srgb, var( --wookit-danger, #dc2626 ) 10%, transparent ) !important;
    border: 1px solid color-mix( in srgb, var( --wookit-danger, #dc2626 ) 28%, transparent ) !important;
    border-radius: var( --wookit-radius-pill, 999px ) !important;
    white-space: nowrap;
    vertical-align: middle;
}

/* Badge sits centred on the option card's TOP border — same placement as the
   "Selected" badge on the product-page bundle picker. Opaque soft-red fill so
   the card border doesn't show through. */
.wookit-checkout .woocommerce-checkout-review-order-table .cart_item.wookit-line--oos {
    position: relative;
}
.wookit-checkout .woocommerce-checkout-review-order-table .cart_item.wookit-line--oos .wookit-line-oos-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate( -50%, -50% );
    margin: 0 !important;
    z-index: 3;
    background: color-mix( in srgb, var( --wookit-danger, #dc2626 ) 10%, #fff ) !important;
    border: 1px solid color-mix( in srgb, var( --wookit-danger, #dc2626 ) 32%, transparent ) !important;
    box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.07 ) !important;
}

/* The bundle price block (struck catalog over discounted total) is the SHARED
   .wookit-bundle-grouped-price component; the cell just right-aligns it. */

/* WC prints qty as "× 2" on single lines — keep it plain + bold so it reads the
   same as the bundle "N×" prefix (shared .wookit-bundle-line-qty), not a pill. */
.wookit-checkout .woocommerce-checkout-review-order-table .product-quantity {
    display: inline-block;
    margin-left: 5px !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    font-size: 0.8em !important;
    font-weight: 700 !important;
    color: var( --wookit-text, inherit ) !important;
    font-variant-numeric: tabular-nums;
    vertical-align: baseline !important;
}

.wookit-checkout .woocommerce-checkout-review-order-table .product-total,
.wookit-checkout .woocommerce-checkout-review-order-table td.product-total {
    text-align: right !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
    color: var( --wookit-text, inherit ) !important;
}

/* Active line price (simple products) in accent — matches the bundle's
   discounted total. Scoped to .cart_item so tfoot totals stay neutral. */
.wookit-checkout .woocommerce-checkout-review-order-table .cart_item .product-total {
    color: var( --wookit-accent, #2271b1 ) !important;
    font-weight: 700 !important;
}

/* Subtotal / shipping / fee rows — flex row with label left, value right. */
.wookit-checkout .woocommerce-checkout-review-order-table tfoot tr {
    justify-content: space-between !important;
    align-items: baseline !important;
}
.wookit-checkout .woocommerce-checkout-review-order-table tfoot th,
.wookit-checkout .woocommerce-checkout-review-order-table tfoot td {
    flex: 0 0 auto !important;
    padding: 9px 0 !important;
    color: var( --wookit-muted, #6b7280 ) !important;
    font-weight: 500 !important;
}
.wookit-checkout .woocommerce-checkout-review-order-table tfoot tr td { text-align: right !important; }
.wookit-checkout .woocommerce-checkout-review-order-table tfoot tr th { font-weight: 500 !important; }

/* Divider on the ROW (not th/td) so it's one continuous line across the full
   width — th + td are separate flex items with a gap, so a per-cell border
   reads as a broken line. */
.wookit-checkout .woocommerce-checkout-review-order-table tfoot tr:not(:last-child) {
    border-bottom: 1px solid var( --wookit-border, #eceef0 ) !important;
}

/* ── Shipping method selection — full-width cards (matches payment methods) ──
   Break the row out of the tfoot "label-left / value-right" flex so the package
   label ("Livrare") becomes a heading and each courier option is a stacked card.
   The markup is WC-standard (ul#shipping_method > li), so this works regardless
   of which courier plugin (Woot etc.) populates the rates. */
.wookit-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping {
    display: block !important;
    border-bottom: 0 !important;
    padding: 4px 0 6px !important;
}
.wookit-checkout .woocommerce-checkout-review-order-table .shipping th {
    display: block !important;
    width: 100% !important;
    padding: 12px 0 9px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var( --wookit-text, inherit ) !important;
    text-align: left !important;
    vertical-align: top !important;
}
.wookit-checkout .woocommerce-checkout-review-order-table .shipping td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
}
.wookit-checkout .woocommerce-checkout-review-order-table .shipping ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
.wookit-checkout .woocommerce-checkout-review-order-table .shipping ul li {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1.5px solid var( --wookit-border, #e2e4e7 ) !important;
    border-radius: var( --wookit-radius-md, 8px ) !important;
    background: var( --wookit-surface, #fff ) !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: border-color 150ms ease, background-color 150ms ease;
}
.wookit-checkout .woocommerce-checkout-review-order-table .shipping ul li:hover {
    border-color: var( --wookit-accent, #2271b1 ) !important;
}
/* Selected card — thin accent border on the option whose radio is checked. */
.wookit-checkout .woocommerce-checkout-review-order-table .shipping ul li:has( input:checked ) {
    border-color: var( --wookit-accent, #2271b1 ) !important;
}
.wookit-checkout .woocommerce-checkout-review-order-table .shipping ul li input[type="radio"] {
    flex: 0 0 auto !important;
    margin: 0 !important;
    accent-color: var( --wookit-accent, #2271b1 );
}
.wookit-checkout .woocommerce-checkout-review-order-table .shipping ul li label {
    flex: 1 1 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    font-weight: 600 !important;
    color: var( --wookit-text, inherit ) !important;
    cursor: pointer !important;
}
.wookit-checkout .woocommerce-checkout-review-order-table .shipping ul li label .amount,
.wookit-checkout .woocommerce-checkout-review-order-table .shipping ul li label .woocommerce-Price-amount {
    font-weight: 600 !important;
    white-space: nowrap !important;
}

/* Grand total */
.wookit-checkout .woocommerce-checkout-review-order-table .order-total th {
    padding-top: 13px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var( --wookit-text, inherit ) !important;
    border-top: 2px solid var( --wookit-border, #e2e4e7 ) !important;
}
.wookit-checkout .woocommerce-checkout-review-order-table .order-total td {
    padding-top: 13px !important;
    border-top: 2px solid var( --wookit-border, #e2e4e7 ) !important;
}
.wookit-checkout .woocommerce-checkout-review-order-table .order-total .amount {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: var( --wookit-accent, #2271b1 ) !important;
}

/* ── Coupon / voucher (last block before the place-order button) ──────────── */
.wookit-coupon {
    padding: 18px 0 !important;
}

.wookit-coupon__form {
    display: flex;
    gap: 8px;
}

.wookit-coupon__msg {
    margin-top: 8px !important;
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
}
.wookit-coupon__msg.is-error   { color: var( --wookit-danger-text, #b32d2e ) !important; }
.wookit-coupon__msg.is-success { color: var( --wookit-success-text, #166534 ) !important; }

.wookit-coupon__input,
.wookit-checkout .wookit-coupon__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.55rem 0.7rem !important;
    border: 1.5px solid var( --wookit-border-input, #d1d5db ) !important;
    border-radius: var( --wookit-radius-sm, 6px ) !important;
    background: var( --wookit-surface, #fff ) !important;
    color: var( --wookit-text, inherit ) !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
}

.wookit-coupon__apply,
.wookit-coupon__apply:hover,
.wookit-coupon__apply:focus {
    appearance: none !important;
    -webkit-appearance: none !important;
    flex-shrink: 0 !important;
    padding: 0 16px !important;
    min-height: 0 !important;
    border: 1.5px solid var( --wookit-accent, #2271b1 ) !important;
    border-radius: var( --wookit-radius-sm, 6px ) !important;
    background: transparent !important;
    color: var( --wookit-accent, #2271b1 ) !important;
    font-family: inherit !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background-color 150ms ease, color 150ms ease !important;
}

.wookit-coupon__apply:hover {
    background: var( --wookit-accent, #2271b1 ) !important;
    color: var( --wookit-accent-fg, #fff ) !important;
}

.wookit-coupon__apply:disabled { opacity: 0.5 !important; cursor: default !important; }

.wookit-coupon__applied-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px !important;
}

.wookit-coupon__applied {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var( --wookit-success-text, #166534 ) !important;
    background: var( --wookit-success-soft, #dcfce7 ) !important;
    border-radius: 999px !important;
}

.wookit-coupon__applied-check { font-weight: 700 !important; }

.wookit-coupon__applied-amount {
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
}
.wookit-coupon__applied-amount .woocommerce-Price-amount,
.wookit-coupon__applied-amount bdi { color: inherit !important; }

.wookit-coupon__remove,
.wookit-coupon__remove:hover,
.wookit-coupon__remove:focus {
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba( 0, 0, 0, 0.08 ) !important;
    color: inherit !important;
    font-size: 14px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.wookit-coupon__remove:hover { background: rgba( 0, 0, 0, 0.18 ) !important; }

/* ── Final totals (below shipping + payment selects, above place order) ───── */
.wookit-checkout__totals {
    width: 100%;
    border: 0 !important;
    border-collapse: collapse;
    background: transparent !important;
    margin: 6px 0 14px !important;
    font-size: 0.9rem !important;
    font-variant-numeric: tabular-nums;
}

/* B2C (incl-VAT) vs B2B (net + VAT) totals: render both, show the one matching
   the person-type switch. The `--company` class lives on the form (root), set by
   the switch JS, so it persists across WC's AJAX order-review refresh. */
.wookit-checkout__totals--company { display: none; }
.wookit-checkout--company .wookit-checkout__totals--individual { display: none; }
.wookit-checkout--company .wookit-checkout__totals--company { display: table; }

/* "Total fără TVA" subtotal line on the B2B table — set apart from the per-row
   list as a running net subtotal, but lighter than the final amount due. */
.wookit-checkout__totals .wookit-net-total th,
.wookit-checkout__totals .wookit-net-total td {
    padding-top: 11px !important;
    border-top: 1px solid var( --wookit-border, #e2e4e7 ) !important;
    font-weight: 700 !important;
    color: var( --wookit-text, inherit ) !important;
}

/* Kill any theme/WC row background (e.g. the grey behind the subtotal). */
.wookit-checkout__totals tr,
.wookit-checkout__totals th,
.wookit-checkout__totals td {
    background: transparent !important;
}

.wookit-checkout__totals th,
.wookit-checkout__totals td {
    padding: 8px 0 !important;
    text-align: left !important;
    border: 0 !important;
    font-weight: 500 !important;
    color: var( --wookit-muted, #6b7280 ) !important;
}

.wookit-checkout__totals td { text-align: right !important; }

.wookit-checkout__totals tr:not(.order-total):not(:last-child) th,
.wookit-checkout__totals tr:not(.order-total):not(:last-child) td {
    border-bottom: 1px solid var( --wookit-border, #eceef0 ) !important;
}

.wookit-checkout__totals .order-total th,
.wookit-checkout__totals .order-total td {
    padding-top: 13px !important;
    border-top: 2px solid var( --wookit-border, #e2e4e7 ) !important;
    font-weight: 700 !important;
    color: var( --wookit-text, inherit ) !important;
    font-size: 1rem !important;
}

.wookit-checkout__totals .order-total .amount {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    color: var( --wookit-accent, #2271b1 ) !important;
}

/* "(includes X TVA)" — discreet, on its own line, smaller + muted so it
   doesn't compete visually with the total amount. */
.wookit-checkout__totals .order-total .includes_tax,
.wookit-checkout__totals .order-total small.includes_tax {
    display: block !important;
    margin-top: 4px !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: var( --wookit-muted, #6b7280 ) !important;
}

/* Reset the inner price span inside .includes_tax so it doesn't pick up the
   big accent styling from the .order-total .amount rule above. */
.wookit-checkout__totals .order-total .includes_tax .amount,
.wookit-checkout__totals .order-total .includes_tax .woocommerce-Price-amount,
.wookit-checkout__totals .order-total .includes_tax bdi {
    font-size: inherit !important;
    font-weight: 500 !important;
    color: inherit !important;
}

/* Shipping selection (kept in the upper review table) */
.wookit-checkout .woocommerce-checkout-review-order-table .shipping th {
    padding: 10px 0 !important;
    font-weight: 600 !important;
    color: var( --wookit-text, inherit ) !important;
    vertical-align: top !important;
}

/* Section heading for the payment block — divider + title that visually
   separates "Plată" from the shipment cards above (injected via
   woocommerce_review_order_before_payment). Mirrors the shipping package
   heading (.shipping th) so both sections read as siblings. */
.wookit-checkout__section-title--payment {
    margin: 20px 0 11px !important;
    padding-top: 20px !important;
    border-top: 1px solid var( --wookit-border, #eceef0 ) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var( --wookit-text, inherit ) !important;
}

/* ── Payment methods — card-like rows ─────────────────────────────────────── */
.wookit-checkout #payment {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

.wookit-checkout #payment ul.payment_methods {
    list-style: none !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wookit-checkout #payment ul.payment_methods li {
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1.5px solid var( --wookit-border, #e2e4e7 ) !important;
    border-radius: var( --wookit-radius-md, 8px ) !important;
    background: var( --wookit-surface, #fff ) !important;
    cursor: pointer !important;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.wookit-checkout #payment ul.payment_methods li:hover {
    border-color: var( --wookit-accent, #2271b1 ) !important;
}

/* Selected card — thin accent border, same as the shipping options above. */
.wookit-checkout #payment ul.payment_methods li:has( input:checked ) {
    border-color: var( --wookit-accent, #2271b1 ) !important;
}

.wookit-checkout #payment ul.payment_methods li label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600 !important;
    color: var( --wookit-text, inherit ) !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.wookit-checkout #payment ul.payment_methods li input[type="radio"] { accent-color: var( --wookit-accent, #2271b1 ); }

/* Payment method description → small, muted secondary text under the label
   (no box, no arrow) — e.g. the "Plătești la curier când ajunge coletul" hint. */
.wookit-checkout #payment .payment_box {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 4px 0 0 28px !important; /* indent under the radio + label */
    margin: 4px 0 0 !important;
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
    color: var( --wookit-muted, #6b7280 ) !important;
}
.wookit-checkout #payment .payment_box::before,
.wookit-checkout #payment .payment_box::after { display: none !important; } /* drop WC's little arrow */
.wookit-checkout #payment .payment_box p { margin: 0 !important; }
.wookit-checkout #payment .payment_box p + p { margin-top: 4px !important; }

/* Place order button — match WooKit primary button look (beat theme/WC). */
.wookit-checkout #place_order,
.wookit-checkout #place_order:hover,
.wookit-checkout #place_order:focus,
.wookit-checkout #place_order:active {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0.9rem 1.5rem !important;
    min-height: 50px !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-shadow: none !important;
    color: var( --wookit-accent-fg, #fff ) !important;
    background: var( --wookit-accent, #2271b1 ) !important;
    border: 0 !important;
    border-radius: var( --wookit-radius-md, 8px ) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background-color 150ms ease, transform 150ms ease !important;
}

.wookit-checkout #place_order:hover {
    background: var( --wookit-accent-hover, var( --wookit-accent, #2271b1 ) ) !important;
}

.wookit-checkout #place_order:active { transform: translateY( 1px ) !important; }

.wookit-checkout .woocommerce-terms-and-conditions-wrapper {
    margin: 12px 0 !important;
    font-size: 0.82rem !important;
    color: var( --wookit-muted, #6b7280 ) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ORDER RECEIVED / THANK-YOU PAGE
   WooCommerce's stock thankyou markup, restyled to match the WooKit checkout.
   Scoped to .wookit-order-received (the wrapper added by the checkout shortcode
   on the order-received / order-pay endpoints).
   ════════════════════════════════════════════════════════════════════════ */
.wookit-order-received {
    max-width: 760px !important;
    /* margin-x auto must beat .wookit-checkout's `margin: 1.5rem 0 !important`
       (both classes sit on the same element). */
    margin-left: auto !important;
    margin-right: auto !important;
    color: var( --wookit-text, inherit );
}

/* Our own centred title (replaces the theme's left-aligned page title once
   that one is hidden — see Page Settings → Hide Title in the builder). */
.wookit-order-received__title {
    margin: 0 0 20px !important;
    text-align: center !important;
    font-weight: 800 !important;
    color: var( --wookit-text, inherit ) !important;
}

/* "Continuă cumpărăturile" — secondary button between the title and the order
   details. Centered to sit under the centered title. */
.wookit-order-received__back {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 28px !important;
    padding: 0.6rem 1.2rem !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var( --wookit-accent, #2271b1 ) !important;
    background: transparent !important;
    border: 1.5px solid var( --wookit-border, #e2e4e7 ) !important;
    border-radius: var( --wookit-radius-md, 8px ) !important;
    text-decoration: none !important;
    transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}
.wookit-order-received__back:hover,
.wookit-order-received__back:focus {
    border-color: var( --wookit-accent, #2271b1 ) !important;
    background: var( --wookit-surface-alt, #f7f9fc ) !important;
}

/* "Thank you. Your order has been received." */
.wookit-order-received .woocommerce-thankyou-order-received {
    margin: 0 0 20px !important;
    padding: 14px 18px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var( --wookit-success-text, #166534 ) !important;
    background: var( --wookit-success-soft, #dcfce7 ) !important;
    border: none !important;
    border-radius: var( --wookit-radius-md, 8px ) !important;
}
.wookit-order-received .woocommerce-thankyou-order-received::before { display: none !important; }

/* Overview list: order no. / date / email / total / payment → a clean card. */
.wookit-order-received ul.woocommerce-order-overview {
    list-style: none !important;
    margin: 0 0 26px !important;
    padding: 4px 18px !important;
    display: flex;
    flex-direction: column;
    border: 1px solid var( --wookit-border, #e2e4e7 ) !important;
    border-radius: var( --wookit-radius-md, 8px ) !important;
    background: var( --wookit-surface, #fff ) !important;
}
.wookit-order-received ul.woocommerce-order-overview li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin: 0 !important;
    padding: 11px 0 !important;
    border: none !important;
    border-bottom: 1px solid var( --wookit-border, #eceef0 ) !important;
    font-size: 0.88rem !important;
    text-transform: none !important;
    color: var( --wookit-muted, #6b7280 ) !important;
}
.wookit-order-received ul.woocommerce-order-overview li:last-child { border-bottom: none !important; }
.wookit-order-received ul.woocommerce-order-overview li strong {
    margin: 0 !important;
    text-align: right;
    color: var( --wookit-text, inherit ) !important;
    font-weight: 700 !important;
}

/* Section titles ("Order details", "Billing address"). */
.wookit-order-received .woocommerce-order-details__title,
.wookit-order-received .woocommerce-column__title {
    margin: 0 0 12px !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var( --wookit-text, inherit ) !important;
}

/* Order details: the table carries `.woocommerce-checkout-review-order-table`
   (set in our order/order-details.php override), so it inherits the EXACT same
   grouped card layout as the checkout review — nothing extra to style here. */
.wookit-order-received .woocommerce-order-details { margin-bottom: 28px !important; }

/* Customer / billing + shipping address → card(s). */
.wookit-order-received .woocommerce-customer-details { margin-bottom: 8px !important; }
.wookit-order-received .woocommerce-columns {
    display: flex !important;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0 !important;
}
.wookit-order-received .woocommerce-columns .woocommerce-column { flex: 1 1 260px; min-width: 0; }
.wookit-order-received .woocommerce-customer-details address {
    padding: 16px 18px !important;
    border: 1px solid var( --wookit-border, #e2e4e7 ) !important;
    border-radius: var( --wookit-radius-md, 8px ) !important;
    background: var( --wookit-surface, #fff ) !important;
    font-style: normal !important;
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
    color: var( --wookit-text, inherit ) !important;
}
.wookit-order-received .woocommerce-customer-details--email,
.wookit-order-received .woocommerce-customer-details--phone {
    margin: 6px 0 0 !important;
    color: var( --wookit-muted, #6b7280 ) !important;
}

/* Bundle "reducere" row — show the saving in success green, both on the
   checkout totals and the order-received order details. */
.wookit-checkout__totals .wookit-bundle-discount td,
.wookit-checkout__totals .wookit-bundle-discount td .woocommerce-Price-amount,
.wookit-order-received .order_item_totals_wookit_discount td,
.wookit-order-received .order_item_totals_wookit_discount td .woocommerce-Price-amount {
    color: var( --wookit-success-text, #166534 ) !important;
    font-weight: 700 !important;
}