/* ============================================
   FAN Woo — Branded Cart & Checkout (v1.2.0)
   Restyles WooCommerce cart + checkout pages to
   match the FullArchNetwork design system. Loaded
   only on cart/checkout pages.
   ============================================ */

:root {
    --fan-navy:        hsl(220, 60%, 15%);
    --fan-navy-deep:   hsl(220, 70%, 8%);
    --fan-teal:        hsl(212, 90%, 45%);
    --fan-teal-dark:   hsl(212, 90%, 38%);
    --fan-teal-light:  hsl(212, 90%, 95%);
    --fan-gold:        hsl(38, 92%, 50%);
    --fan-bg:          hsl(220, 25%, 98%);
    --fan-fg:          hsl(220, 30%, 12%);
    --fan-card:        #ffffff;
    --fan-muted:       hsl(220, 16%, 92%);
    --fan-muted-fg:    hsl(220, 10%, 45%);
    --fan-border:      hsl(220, 16%, 88%);
    --fan-radius:      12px;
    --fan-radius-sm:   8px;
    --fan-shadow:      0 4px 12px -2px hsl(220 30% 12% / 0.08), 0 2px 4px hsl(220 30% 12% / 0.04);
    --fan-shadow-lg:   0 12px 32px -8px hsl(220 30% 12% / 0.12);
    --fan-font-display:'Oswald','Inter',system-ui,-apple-system,Segoe UI,sans-serif;
    --fan-font-body:   'Barlow','Inter',system-ui,-apple-system,Segoe UI,sans-serif;
}

/* ── Page wrapper ─────────────────────────── */
body.woocommerce-cart, body.woocommerce-checkout {
    background: var(--fan-bg);
    font-family: var(--fan-font-body);
    color: var(--fan-fg);
}
body.woocommerce-cart .woocommerce, body.woocommerce-checkout .woocommerce {
    max-width: 1180px; margin: 32px auto; padding: 0 20px;
}
.woocommerce-cart h1, .woocommerce-checkout h1,
.woocommerce-cart .entry-title, .woocommerce-checkout .entry-title {
    font-family: var(--fan-font-display); font-weight: 600;
    letter-spacing: 0.01em; color: var(--fan-navy); margin-bottom: 24px;
}

/* ── Cart table ───────────────────────────── */
.woocommerce table.shop_table {
    background: var(--fan-card);
    border: 1px solid var(--fan-border);
    border-radius: var(--fan-radius);
    box-shadow: var(--fan-shadow);
    border-collapse: separate; border-spacing: 0;
    overflow: hidden;
}
.woocommerce table.shop_table thead {
    background: var(--fan-navy); color: #fff;
}
.woocommerce table.shop_table thead th {
    color: #fff; font-family: var(--fan-font-display);
    font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
    font-size: 12px; padding: 16px 18px; border: 0;
}
.woocommerce table.shop_table tbody td {
    padding: 20px 18px; border-top: 1px solid var(--fan-border);
    vertical-align: middle; color: var(--fan-fg);
}
.woocommerce table.shop_table .product-name a {
    color: var(--fan-navy); font-weight: 600; text-decoration: none;
}
.woocommerce table.shop_table .product-name a:hover { color: var(--fan-teal); }
.woocommerce table.shop_table .product-price,
.woocommerce table.shop_table .product-subtotal,
.woocommerce table.shop_table .amount {
    color: var(--fan-navy); font-weight: 700;
}
.woocommerce a.remove {
    color: var(--fan-muted-fg) !important;
    background: var(--fan-muted); border-radius: 50%;
    width: 26px; height: 26px; line-height: 24px;
}
.woocommerce a.remove:hover {
    background: hsl(0, 78%, 50%) !important; color: #fff !important;
}

/* ── Quantity input ───────────────────────── */
.woocommerce .quantity input.qty {
    border: 1px solid var(--fan-border);
    border-radius: var(--fan-radius-sm);
    padding: 8px 10px; height: 40px; min-width: 64px;
    font-family: var(--fan-font-body); color: var(--fan-fg);
}
.woocommerce .quantity input.qty:focus {
    outline: 0; border-color: var(--fan-teal);
    box-shadow: 0 0 0 3px var(--fan-teal-light);
}

/* ── Buttons (cart + checkout) ────────────── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce #place_order {
    background: var(--fan-teal) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--fan-radius-sm) !important;
    font-family: var(--fan-font-body) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    padding: 12px 22px !important;
    height: 46px;
    line-height: 1 !important;
    box-shadow: var(--fan-shadow);
    transition: all 0.18s ease;
    text-transform: none !important;
    font-size: 14px !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce #place_order:hover {
    background: var(--fan-teal-dark) !important;
    transform: translateY(-1px);
    box-shadow: var(--fan-shadow-lg);
}
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order {
    background: var(--fan-navy) !important;
}
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover {
    background: var(--fan-navy-deep) !important;
}
.woocommerce a.button.wc-backward,
.woocommerce a.checkout-button {
    width: 100%; text-align: center;
}
.woocommerce a.checkout-button {
    background: var(--fan-navy) !important;
    height: 54px; font-size: 15px !important;
}

/* ── Coupon + update row ──────────────────── */
.woocommerce .cart .coupon { display: flex; gap: 8px; align-items: center; }
.woocommerce .cart .coupon input.input-text {
    border: 1px solid var(--fan-border);
    border-radius: var(--fan-radius-sm);
    padding: 10px 14px; height: 46px;
    font-family: var(--fan-font-body);
}
.woocommerce .cart .coupon input.input-text:focus {
    outline: 0; border-color: var(--fan-teal);
    box-shadow: 0 0 0 3px var(--fan-teal-light);
}

/* ── Cart totals card ─────────────────────── */
.woocommerce .cart_totals,
.woocommerce-checkout #order_review {
    background: var(--fan-card);
    border: 1px solid var(--fan-border);
    border-radius: var(--fan-radius);
    box-shadow: var(--fan-shadow);
    padding: 24px 26px;
}
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading {
    font-family: var(--fan-font-display);
    color: var(--fan-navy); font-weight: 600;
    margin: 0 0 16px; font-size: 20px;
    padding-bottom: 12px; border-bottom: 2px solid var(--fan-muted);
}
.woocommerce .cart_totals table,
.woocommerce-checkout #order_review table.shop_table {
    background: transparent; border: 0; box-shadow: none;
}
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td,
.woocommerce-checkout #order_review table th,
.woocommerce-checkout #order_review table td {
    border: 0; border-bottom: 1px solid var(--fan-muted);
    padding: 14px 0; background: transparent;
}
.woocommerce .cart_totals .order-total .amount,
.woocommerce-checkout .order-total .amount {
    color: var(--fan-teal); font-size: 22px; font-weight: 800;
}

/* ── Checkout form fields ─────────────────── */
.woocommerce-checkout .col2-set, .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: 100%; max-width: none; }
.woocommerce-checkout #customer_details {
    background: var(--fan-card);
    border: 1px solid var(--fan-border);
    border-radius: var(--fan-radius);
    box-shadow: var(--fan-shadow);
    padding: 28px 30px; margin-bottom: 24px;
}
.woocommerce-checkout h3 {
    font-family: var(--fan-font-display);
    color: var(--fan-navy); font-weight: 600;
    font-size: 18px; margin: 0 0 18px;
}
.woocommerce form .form-row label {
    color: var(--fan-fg); font-weight: 600; font-size: 13px;
    margin-bottom: 6px; display: block;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-container .select2-selection--single {
    border: 1px solid var(--fan-border) !important;
    border-radius: var(--fan-radius-sm) !important;
    padding: 12px 14px !important;
    height: 46px !important;
    font-family: var(--fan-font-body);
    font-size: 14px;
    background: #fff;
    box-shadow: none !important;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.woocommerce form .form-row textarea { height: auto !important; min-height: 100px; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    outline: 0;
    border-color: var(--fan-teal) !important;
    box-shadow: 0 0 0 3px var(--fan-teal-light) !important;
}
.woocommerce form .form-row.woocommerce-invalid input.input-text {
    border-color: hsl(0, 78%, 50%) !important;
}

/* ── Payment box ──────────────────────────── */
.woocommerce-checkout #payment {
    background: var(--fan-bg) !important;
    border: 1px solid var(--fan-border);
    border-radius: var(--fan-radius);
    margin-top: 18px; padding: 8px;
}
.woocommerce-checkout #payment ul.payment_methods {
    background: #fff; border-radius: var(--fan-radius-sm);
    padding: 16px 18px; border: 0;
}
.woocommerce-checkout #payment ul.payment_methods li {
    padding: 8px 0; border-bottom: 1px solid var(--fan-muted);
}
.woocommerce-checkout #payment ul.payment_methods li:last-child { border-bottom: 0; }
.woocommerce-checkout #payment ul.payment_methods li label {
    color: var(--fan-navy); font-weight: 600;
}
.woocommerce-checkout #payment div.payment_box {
    background: var(--fan-teal-light) !important;
    color: var(--fan-fg);
    border-radius: var(--fan-radius-sm);
    padding: 16px 18px; margin-top: 10px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment .form-row.place-order {
    background: #fff; padding: 18px; margin: 0;
    border-radius: var(--fan-radius-sm); margin-top: 8px;
}
.woocommerce-checkout #place_order { width: 100%; height: 56px; font-size: 16px !important; }

/* ── Notices ──────────────────────────────── */
.woocommerce-message, .woocommerce-info, .woocommerce-error,
.woocommerce-noreviews, p.no-comments {
    border-top: 0 !important;
    border-radius: var(--fan-radius-sm);
    padding: 14px 18px 14px 50px !important;
    background: var(--fan-card);
    box-shadow: var(--fan-shadow);
    color: var(--fan-fg);
    font-family: var(--fan-font-body);
}
.woocommerce-message { border-left: 4px solid hsl(160, 70%, 40%); }
.woocommerce-info    { border-left: 4px solid var(--fan-teal); }
.woocommerce-error   { border-left: 4px solid hsl(0, 78%, 50%); }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before {
    color: var(--fan-teal); top: 16px; left: 18px;
}
.woocommerce-message::before { color: hsl(160, 70%, 40%); }
.woocommerce-error::before   { color: hsl(0, 78%, 50%); }

/* ── Two-column checkout layout ───────────── */
@media (min-width: 900px) {
    .woocommerce-checkout form.checkout {
        display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: start;
    }
    .woocommerce-checkout #customer_details { grid-column: 1; margin-bottom: 0; }
    .woocommerce-checkout h3#order_review_heading,
    .woocommerce-checkout #order_review { grid-column: 2; }
    .woocommerce-checkout h3#order_review_heading { margin-bottom: 0; }
}

/* ── Hide noisy default extras ────────────── */
.woocommerce-cart-form .actions .button[name="update_cart"] {
    background: transparent !important; color: var(--fan-navy) !important;
    border: 1px solid var(--fan-border) !important;
}
.woocommerce-cart-form .actions .button[name="update_cart"]:hover {
    border-color: var(--fan-teal) !important; color: var(--fan-teal) !important;
}

/* ============================================
   v1.3.0 — Cart page polish
   ============================================ */

/* Cart page hero header */
body.woocommerce-cart .woocommerce::before {
    content: "Your Cart";
    display: block;
    font-family: var(--fan-font-display);
    font-size: 32px; font-weight: 600; letter-spacing: 0.01em;
    color: var(--fan-navy);
    padding-bottom: 6px; margin-bottom: 4px;
}
body.woocommerce-cart .woocommerce::after {
    content: "Review your subscription before checkout. You'll be billed securely via Stripe.";
    display: block; color: var(--fan-muted-fg); font-size: 14px;
    margin-bottom: 24px;
}

/* Two-column cart layout on desktop */
@media (min-width: 980px) {
    .woocommerce-cart .woocommerce-cart-form {
        float: none; width: auto; display: block;
    }
    .woocommerce-cart-form, .woocommerce .cart-collaterals {
        display: block;
    }
    body.woocommerce-cart .woocommerce {
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        gap: 28px;
        align-items: start;
    }
    body.woocommerce-cart .woocommerce::before,
    body.woocommerce-cart .woocommerce::after,
    body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
        grid-column: 1 / -1;
    }
    body.woocommerce-cart .woocommerce-cart-form { grid-column: 1; }
    body.woocommerce-cart .cart-collaterals {
        grid-column: 2; width: 100% !important; float: none !important;
        position: sticky; top: 24px;
    }
    body.woocommerce-cart .cart-collaterals .cart_totals {
        width: 100% !important; float: none !important;
    }
}

/* Product thumbnails */
.woocommerce table.shop_table .product-thumbnail img {
    width: 72px; height: 72px; object-fit: cover;
    border-radius: var(--fan-radius-sm);
    border: 1px solid var(--fan-border);
    background: var(--fan-muted);
}

/* Subscription cycle badge under product name */
.woocommerce table.shop_table .product-name dl.variation,
.woocommerce table.shop_table .product-name .wc-item-meta {
    margin-top: 8px; font-size: 12px; color: var(--fan-muted-fg);
}
.woocommerce table.shop_table .product-name .wc-item-meta li,
.woocommerce table.shop_table .product-name dl.variation dd {
    margin: 2px 0; padding: 0;
}

/* Recurring price label (WC Subscriptions) */
.woocommerce-Price-amount + .subscription-details,
.subscription-price .woocommerce-Price-amount,
.subscription-details {
    color: var(--fan-teal) !important; font-weight: 700;
}

/* Cart actions bar */
.woocommerce-cart-form .actions {
    padding: 18px !important; background: var(--fan-card);
    border: 1px solid var(--fan-border); border-top: 0;
    border-radius: 0 0 var(--fan-radius) var(--fan-radius);
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.woocommerce-cart-form table.shop_table {
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    border-bottom: 0;
}

/* Trust row under totals */
.woocommerce .cart_totals::after {
    content: "🔒  Secure checkout · Cancel anytime · Powered by Stripe";
    display: block; margin-top: 18px; padding-top: 16px;
    border-top: 1px dashed var(--fan-border);
    color: var(--fan-muted-fg); font-size: 12px; text-align: center;
}

/* Empty cart state */
.cart-empty.woocommerce-info {
    text-align: center; padding: 48px 24px !important;
    font-size: 16px;
}
.return-to-shop { text-align: center; margin-top: 20px; }

/* Mobile tightening */
@media (max-width: 600px) {
    body.woocommerce-cart .woocommerce::before { font-size: 26px; }
    .woocommerce table.shop_table thead { display: none; }
    .woocommerce table.shop_table tbody td {
        display: block; width: 100% !important; text-align: left !important;
        padding: 10px 16px;
    }
    .woocommerce table.shop_table tbody tr {
        display: block; padding: 10px 0; border-bottom: 1px solid var(--fan-muted);
    }
    .woocommerce-cart-form .actions { flex-direction: column; align-items: stretch; }
    .woocommerce-cart-form .actions .button { width: 100%; }
}