/* Dizajnios skin for WooCommerce's own Cart/Checkout block pages (spec:
   Sergio, 2026-08-30, "everything must be in dizajnios") — these are
   WooCommerce Blocks (wc-block-*, not the classic [woocommerce_checkout]
   shortcode, confirmed live via the checkout page's block markup), so this
   overrides WC's own component classes rather than styling from scratch;
   scoped to body.woocommerce-cart/.woocommerce-checkout (classes WordPress
   itself adds to <body> on these two pages) so nothing else on the site is
   touched. */

/* Colors point at autofliper-dark's shared --af-* tokens (Sloj 1,
   2026-09-20) — see afc-frontend.css's :root block for the full
   rationale. */
body.woocommerce-cart, body.woocommerce-checkout {
    --afc-accent: var(--af-accent);
    --afc-accent-hover: color-mix(in srgb, var(--af-accent) 82%, black);
    --afc-ink: var(--af-ink);
    --afc-ink2: var(--af-ink-2);
    --afc-bg: var(--af-surface-2);
    --afc-white: var(--af-surface);
    --afc-line: var(--af-line);
    --afc-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --afc-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --afc-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --afc-sh: 0 1px 3px rgba(20,16,18,.05), 0 8px 24px rgba(20,16,18,.06);

    /* WooCommerce Blocks' own theming hooks — overriding these covers
       anything the component library reads its accent color from directly,
       on top of the more specific per-component rules below. */
    --wc-blocks-primary: var(--af-accent) !important;
    --wp--preset--color--primary: var(--af-accent) !important;
}
html.af-dark body.woocommerce-cart, html.af-dark body.woocommerce-checkout {
    --afc-sh: 0 1px 3px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.35);
}

body.woocommerce-cart .entry-content, body.woocommerce-checkout .entry-content,
body.woocommerce-cart .wc-block-cart, body.woocommerce-checkout .wc-block-checkout {
    font-family: var(--afc-font) !important;
    color: var(--afc-ink) !important;
}

/* Section headings ("Your cart", "Contact information", "Shipping address"...) */
body.woocommerce-cart h1, body.woocommerce-checkout h1,
body.woocommerce-cart .wp-block-post-title, body.woocommerce-checkout .wp-block-post-title {
    font-family: var(--afc-display) !important; font-weight: 700 !important;
}
.wc-block-components-checkout-step__title,
.wc-block-components-title,
.wc-block-cart__totals-title {
    font-family: var(--afc-display) !important; font-weight: 700 !important; color: var(--afc-ink) !important;
}

/* Cards: cart line items, order summary, each checkout step — same white/
   rounded/shadow language as afc-frontend.css's .afc-sec. Only the OUTER
   wrapper of each area gets the card treatment — the order-summary block
   nests INSIDE .wc-block-components-sidebar, and giving both a card look
   doubled up as a border-within-a-border around the same content
   (Sergio circled this live on desktop, 2026-08-31), so the inner block
   stays bare and just contributes padding. */
.wc-block-cart-items, .wc-block-components-sidebar,
.wc-block-components-checkout-step,
.wc-block-components-panel {
    background: var(--afc-white) !important;
    border: 1px solid var(--afc-line) !important;
    border-radius: 16px !important;
    box-shadow: var(--afc-sh) !important;
}
.wc-block-cart__totals-title,
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block {
    /* Checkout's own inner order-summary block ships a hardcoded
       ~20%-opacity border WooCommerce itself sets — not something we ever
       declared, so !important border:none is the only way to actually
       remove it, not just "not add one" (confirmed live via getComputedStyle,
       2026-08-31: this exact border was the ghost outline Sergio circled
       around the sidebar on a wide desktop screen — CART and CHECKOUT use
       DIFFERENTLY NAMED classes for the equivalent block, so the fix
       shipped earlier for one didn't cover the other). Deliberately NOT
       touching .wc-block-components-checkout-order-summary__title here —
       that's the mobile accordion TOGGLE, which has its own intentional
       glass-card styling further down this file.
    */
    background: none !important; border: none !important; box-shadow: none !important;
}
.wc-block-components-checkout-step {
    padding: 20px 22px !important; margin-bottom: 14px !important;
}
.wc-block-components-checkout-step__container { border: none !important; box-shadow: none !important; }

/* Inputs — same rounded/mono-adjacent field language as the rest of the site. */
.wc-block-components-text-input input,
.wc-block-components-textarea input,
.wc-block-components-combobox input,
select.wc-block-components-select__select {
    border: 1px solid var(--afc-line) !important; border-radius: 10px !important;
    font-family: var(--afc-font) !important; color: var(--afc-ink) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-combobox input:focus {
    border-color: var(--afc-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--afc-accent) 14%, transparent) !important;
    outline: none !important;
}
.wc-block-components-text-input label,
.wc-block-components-checkbox label { font-family: var(--afc-font) !important; }

/* Payment method / radio rows */
.wc-block-components-radio-control__option {
    border: 1px solid var(--afc-line) !important; border-radius: 12px !important; margin-bottom: 8px !important;
}
.wc-block-components-radio-control__input:checked ~ .wc-block-components-radio-control__label-group,
.wc-block-components-radio-control__option:has(input:checked) {
    border-color: var(--afc-accent) !important;
}
.wc-block-components-radio-control__input { accent-color: var(--afc-accent) !important; }

/* Buttons — HIG filled-red with a real glow, same spring press feel as the
   rest of dizajnios (Sergio, 2026-08-30: "mnogo vise ios, glow, shadows"). */
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
a.wp-element-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-container a {
    background: linear-gradient(155deg, #d64444, var(--afc-accent) 60%) !important; color: var(--af-accent-ink) !important; border: none !important;
    border-radius: 12px !important; font-family: var(--afc-display) !important; font-weight: 700 !important;
    /* Glow at REST, not just on :hover — a screenshot never shows :hover,
       and most visitors here are on a phone with no cursor at all
       (Sergio, 2026-08-31: "ne vidi se promene"). Bright core + soft bloom. */
    box-shadow:
        0 1px 2px rgba(0,0,0,.12),
        0 3px 10px color-mix(in srgb, var(--afc-accent) 45%, transparent),
        0 0 24px color-mix(in srgb, var(--afc-accent) 38%, transparent) !important;
    transition: background .2s ease, transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease !important;
}
.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
    background: linear-gradient(155deg, #e05252, var(--afc-accent-hover) 60%) !important; color: var(--af-accent-ink) !important;
    box-shadow:
        0 2px 4px rgba(0,0,0,.14),
        0 6px 18px color-mix(in srgb, var(--afc-accent) 55%, transparent),
        0 0 36px color-mix(in srgb, var(--afc-accent) 55%, transparent) !important;
    transform: translateY(-1px) !important;
}
.wc-block-components-button:not(.is-link):active { transform: scale(.97) !important; box-shadow: 0 1px 4px color-mix(in srgb, var(--afc-accent) 30%, transparent) !important; }
.wc-block-components-button.is-link { color: var(--afc-accent) !important; }

/* Step cards: soft lift + glow on the field group currently in focus, so
   the form feels alive rather than static — glass-ish highlight along the
   top edge, same "physical surface catching light" language as the
   packages cards and the credits balance card. */
.wc-block-components-checkout-step {
    position: relative !important; overflow: hidden !important;
    transition: box-shadow .3s cubic-bezier(.22,1,.36,1) !important;
}
.wc-block-components-checkout-step::before {
    content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important;
    background: linear-gradient(165deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 25%) !important;
}
.wc-block-components-checkout-step:focus-within {
    box-shadow: 0 2px 8px rgba(20,16,18,.06), 0 16px 36px rgba(20,16,18,.09), 0 0 0 1px color-mix(in srgb, var(--afc-accent) 10%, transparent) !important;
}
.wc-block-components-radio-control__option { transition: border-color .2s ease, box-shadow .2s ease !important; }
.wc-block-components-radio-control__option:has(input:checked) {
    box-shadow: 0 0 0 1px var(--afc-accent), 0 4px 14px color-mix(in srgb, var(--afc-accent) 18%, transparent) !important;
}

/* Prices — tabular mono, matching every other number on the site. */
.woocommerce-Price-amount,
.wc-block-components-formatted-money-amount,
.wc-block-components-totals-item__value {
    font-family: var(--afc-mono) !important; font-variant-numeric: tabular-nums !important; font-weight: 600 !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-weight: 700 !important; color: var(--afc-ink) !important;
}

/* Hairline separators instead of WooCommerce's default heavier borders. */
.wc-block-components-totals-item { border-top: 1px solid var(--afc-line) !important; }
.wc-block-cart-items__header { border-bottom: 1px solid var(--afc-line) !important; }

/* ═══════════════════════════════════════════════════════════════
   ROUND 2 (Sergio, 2026-08-31): "10x better", explicitly more iOS —
   glass, glow, real shadows, animation — and mobile is the priority
   surface ("99% of users will be mobile").
   ═══════════════════════════════════════════════════════════════ */

/* NOT a gray page background — the footer right below is white, and gray
   fading into white read as a broken empty seam, not "breathing room"
   (Sergio, 2026-08-31: "footer je beli, a ovo dole je sivo... bolje je sa
   spacerom samo je lose" — the spacer/gap itself was fine, the color
   mismatch was the actual problem). Cards carry their own lift via shadow
   against plain white, same as every other dizajnios page on the site
   (afc-frontend.css never sets a page-wide background either). */
body.woocommerce-cart, body.woocommerce-checkout { background: var(--afc-white) !important; }

/* Header clearance + footer breathing room (Sergio, 2026-08-31: "dodaj
   spacer od headera i spacer kod footera"). #af-header is position:fixed,
   ~84px tall — the checkout content actually started at 68px before this,
   16px UNDER the header (confirmed live via getBoundingClientRect), so the
   very top of "Contact information" was physically hidden behind it. */
/* .wc-block-checkout is, confusingly, shared by TWO nested elements here
   (.wp-block-woocommerce-checkout — the real outer wrapper — AND, one
   level in, .wc-block-components-sidebar-layout) — a plain .wc-block-checkout
   selector matched both and doubled this padding (confirmed live via
   className dump, 2026-08-31: 116px asked for, 232px rendered). Anchoring
   on .wp-block-woocommerce-checkout specifically, which only the real
   outer wrapper carries, fixes that. */
body.woocommerce-cart .wc-block-cart, body.woocommerce-checkout .wp-block-woocommerce-checkout {
    padding-top: 108px !important;
    padding-bottom: max(40px, env(safe-area-inset-bottom)) !important;
}
@media (min-width: 601px) {
    body.woocommerce-cart .wc-block-cart, body.woocommerce-checkout .wp-block-woocommerce-checkout { padding-top: 116px !important; }
}
/* The main column's last block (Place Order + terms) carries its own
   trailing margin on top of the above — trimming it too so the button
   isn't floating in extra dead space before the footer (Sergio, 2026-08-31:
   flagged the gap below Place Order specifically, twice). */
.wc-block-checkout__main > *:last-child { margin-bottom: 0 !important; }
.wp-block-woocommerce-checkout-actions-block { margin-bottom: 0 !important; }

/* Bigger, richer step cards: deeper shadow, real rounded scale, more
   internal air. */
.wc-block-components-checkout-step,
.wc-block-cart-items, .wc-block-components-sidebar,
.wp-block-woocommerce-cart-order-summary-block {
    border-radius: 20px !important;
    box-shadow: 0 1px 2px rgba(20,16,18,.04), 0 12px 28px rgba(20,16,18,.07) !important;
}
.wc-block-components-checkout-step { padding: 22px 20px !important; }
@media (min-width: 601px) { .wc-block-components-checkout-step { padding: 24px 26px !important; } }

/* Every tappable control gets a real 48px+ target and a spring press —
   this is the mobile-first part: thumbs, not cursors. */
.wc-block-components-text-input input,
.wc-block-components-combobox input,
select.wc-block-components-select__select,
.wc-block-components-radio-control__option {
    min-height: 50px !important;
}
.wc-block-components-checkbox__input, .wc-block-components-radio-control__input { width: 20px !important; height: 20px !important; }
.wc-block-components-radio-control__option:active,
.wc-block-components-checkbox:active { transform: scale(.985) !important; }
.wc-block-components-radio-control__option { transition: border-color .2s ease, box-shadow .2s ease, transform .12s cubic-bezier(.34,1.56,.64,1) !important; }

/* Payment method row: glow ring + soft red wash when selected, not just a
   thin border — reads as "chosen" from across the room, not just up close. */
.wc-block-components-radio-control__option:has(input:checked) {
    background: color-mix(in srgb, var(--afc-accent) 4%, var(--afc-white)) !important;
    box-shadow: 0 0 0 1.5px var(--afc-accent), 0 4px 16px color-mix(in srgb, var(--afc-accent) 22%, transparent) !important;
}

/* ─── Mobile order-summary accordion (WooCommerce's own collapsible
   total, shown instead of the sidebar under ~600px) — was completely
   unstyled default-WC. This is the FIRST thing a mobile visitor sees on
   checkout, so it carries real weight here: glass surface, glowing price,
   rotating chevron, content fades+slides in on expand. */
.wc-block-components-checkout-order-summary__title {
    background: color-mix(in srgb, var(--afc-white) 88%, transparent) !important;
    backdrop-filter: saturate(180%) blur(20px) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    border: 1px solid var(--afc-line) !important; border-radius: 18px !important;
    padding: 16px 18px !important; margin-bottom: 14px !important;
    box-shadow: 0 1px 2px rgba(20,16,18,.04), 0 10px 24px rgba(20,16,18,.06) !important;
    cursor: pointer !important; transition: box-shadow .25s ease, transform .12s cubic-bezier(.34,1.56,.64,1) !important;
}
.wc-block-components-checkout-order-summary__title:active { transform: scale(.99) !important; }
.wc-block-components-checkout-order-summary__title-text {
    font-family: var(--afc-display) !important; font-weight: 700 !important; font-size: 14px !important; color: var(--afc-ink) !important;
}
.wc-block-components-checkout-order-summary__title-price {
    font-family: var(--afc-mono) !important; font-weight: 700 !important; color: var(--afc-accent) !important;
    text-shadow: 0 0 18px color-mix(in srgb, var(--afc-accent) 35%, transparent) !important;
}
.wc-block-components-checkout-order-summary__title-icon svg { transition: transform .25s cubic-bezier(.34,1.56,.64,1) !important; color: var(--afc-ink2) !important; }
.wc-block-components-checkout-order-summary__title[aria-expanded="true"] .wc-block-components-checkout-order-summary__title-icon svg { transform: rotate(180deg) !important; }
.wc-block-components-checkout-order-summary__content {
    animation: afcSummaryIn .3s cubic-bezier(.22,1,.36,1) both !important;
    background: var(--afc-white) !important; border: 1px solid var(--afc-line) !important; border-radius: 18px !important;
    padding: 14px 18px 4px !important; margin: -6px 0 14px !important; box-shadow: var(--afc-sh) !important;
}
@keyframes afcSummaryIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    body.woocommerce-cart *, body.woocommerce-checkout * { transition: none !important; animation: none !important; }
    .wc-block-components-checkout-order-summary__content { opacity: 1 !important; transform: none !important; }
}

/* Below the point where WooCommerce collapses the sidebar into the
   accordion toggle above, the sidebar wrapper itself has nothing left to
   show but that one toggle — giving IT a card too just doubled up as a
   faint outline sitting around the real (glass) card, confirmed live on a
   375px viewport, 2026-08-31. The toggle already carries the card look;
   the wrapper goes bare. */
@media (max-width: 704px) {
    .wc-block-checkout__sidebar {
        background: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important;
    }
}

/* Not a dizajnios thing — a real, separate bug found while checking these
   pages (Sergio, 2026-08-30 video): the site header's own logo renders at
   its native 300x300 file size here instead of the normal 34px-tall version
   everywhere else. Same #af-header/.af-logo markup as every other page
   (confirmed live via DOM inspection) — WooCommerce Blocks' own CSS just
   happens to load after autofliper-header's and wins the cascade on this
   one property. Restoring the real site-wide size here rather than
   guessing at WooCommerce's load order. */
body.woocommerce-cart #af-header .af-logo img,
body.woocommerce-checkout #af-header .af-logo img,
body.woocommerce-order-received #af-header .af-logo img {
    height: 34px !important; width: auto !important; max-width: 34px !important;
}

/* ═══════════════════════════════════════════════════════════════
   ORDER RECEIVED ("Thank you") — classic WooCommerce template, not
   WC Blocks, so different selectors than the cart/checkout rules above.
   Was completely unstyled and jammed against the fixed header (Sergio,
   2026-08-30 screenshot) — same dizajnios treatment as the rest, plus
   real spacing from #af-header (fixed, ~84px tall).
   ═══════════════════════════════════════════════════════════════ */
body.woocommerce-order-received {
    --afc-accent: var(--af-accent); --afc-accent-hover: color-mix(in srgb, var(--af-accent) 82%, black); --afc-ink: var(--af-ink); --afc-ink2: var(--af-ink-2);
    --afc-bg: var(--af-surface-2); --afc-white: var(--af-surface); --afc-line: var(--af-line);
    --afc-green: var(--af-success); --afc-green-bg: color-mix(in srgb, var(--af-success) 15%, var(--af-surface));
    --afc-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --afc-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --afc-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --afc-sh: 0 1px 3px rgba(20,16,18,.05), 0 8px 24px rgba(20,16,18,.06);
}
html.af-dark body.woocommerce-order-received {
    --afc-sh: 0 1px 3px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.35);
}
body.woocommerce-order-received .entry-content,
body.woocommerce-order-received main,
body.woocommerce-order-received #content {
    max-width: 640px !important; margin: 0 auto !important;
    padding: calc(84px + 32px) 16px 48px !important; /* clears the fixed #af-header, then real breathing room */
    font-family: var(--afc-font) !important; color: var(--afc-ink) !important;
}
body.woocommerce-order-received .woocommerce-notice,
body.woocommerce-order-received .woocommerce-thankyou-order-received {
    display: flex !important; align-items: center !important; gap: 12px !important;
    background: var(--afc-green-bg) !important; color: var(--afc-green) !important;
    font-family: var(--afc-display) !important; font-weight: 700 !important; font-size: 15px !important;
    padding: 16px 20px !important; border-radius: 14px !important; margin: 0 0 20px !important;
}
body.woocommerce-order-received .woocommerce-notice::before,
body.woocommerce-order-received .woocommerce-thankyou-order-received::before {
    content: "✓" !important; display: flex !important; align-items: center !important; justify-content: center !important;
    width: 22px !important; height: 22px !important; border-radius: 50% !important; background: var(--afc-green) !important;
    color: var(--af-accent-ink) !important; font-size: 12px !important; font-weight: 700 !important; flex-shrink: 0 !important;
}
body.woocommerce-order-received ul.woocommerce-order-overview {
    display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important;
    list-style: none !important; margin: 0 0 20px !important; padding: 0 !important;
}
body.woocommerce-order-received ul.woocommerce-order-overview li {
    background: var(--afc-white) !important; border: 1px solid var(--afc-line) !important; border-radius: 14px !important;
    padding: 14px 16px !important; box-shadow: var(--afc-sh) !important; font-size: 13px !important;
}
body.woocommerce-order-received ul.woocommerce-order-overview li strong {
    display: block !important; font-family: var(--afc-mono) !important; font-size: 14px !important; font-weight: 700 !important;
    color: var(--afc-ink) !important; margin-top: 2px !important;
}
body.woocommerce-order-received h2 {
    font-family: var(--afc-display) !important; font-size: 16px !important; font-weight: 700 !important;
    margin: 28px 0 14px !important; color: var(--afc-ink) !important;
}
body.woocommerce-order-received table.woocommerce-table,
body.woocommerce-order-received address {
    background: var(--afc-white) !important; border: 1px solid var(--afc-line) !important; border-radius: 14px !important;
    box-shadow: var(--afc-sh) !important; font-size: 13.5px !important;
}
body.woocommerce-order-received table.woocommerce-table { border-collapse: separate !important; overflow: hidden !important; width: 100% !important; }
body.woocommerce-order-received table.woocommerce-table th,
body.woocommerce-order-received table.woocommerce-table td { padding: 12px 16px !important; border-bottom: 1px solid var(--afc-line) !important; }
body.woocommerce-order-received table.woocommerce-table tfoot tr:last-child th,
body.woocommerce-order-received table.woocommerce-table tfoot tr:last-child td { border-bottom: none !important; font-weight: 700 !important; }
body.woocommerce-order-received table.woocommerce-table .woocommerce-Price-amount { font-family: var(--afc-mono) !important; font-weight: 600 !important; }
body.woocommerce-order-received address { padding: 16px 18px !important; font-style: normal !important; line-height: 1.7 !important; }