/* ============================================================
   TRACKNORDIC — CART PAGE (kurv-side skabelon)
   Lys variant: hvid baggrund, navy tekst (#1A293F), blå
   signal-accent (#0096FF), Onest, bløde radier. Matcher
   slide-in-kurv-panelet.

   VIGTIGT: kun de rent kosmetiske .tn-*-klasser styles her.
   Alle WooCommerce-klasser/hooks (.woocommerce-cart-form,
   .cart_item, input.qty, #coupon_code, button[name=update_cart],
   .checkout-button ...) er uændrede i skabelonerne, så AJAX-
   opdatering/fjern, kuponer, antal, fragt og plugins virker som
   i core.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&display=swap');

:root {
    --tn-blue:        #0096FF;
    --tn-blue-deep:   #0A82E6;
    --tn-blue-soft:   rgba(0, 150, 255, .10);
    --tn-blue-glow:   rgba(0, 150, 255, .35);
    --tn-navy:        #1A293F;
    --tn-text:        #1A293F;
    --tn-text-soft:   rgba(26, 41, 63, .62);
    --tn-text-faint:  rgba(26, 41, 63, .42);
    --tn-bg:          #FFFFFF;
    --tn-bg-2:        #F5F7FA;
    --tn-surface:     #F1F5F9;
    --tn-surface-2:   #E6EDF4;
    --tn-line:        rgba(26, 41, 63, .10);
    --tn-line-2:      rgba(26, 41, 63, .16);
    --tn-danger:      #C0341B;
    --tn-font: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --tn-ease: cubic-bezier(0.23, 1, 0.32, 1);
    --tn-radius:    16px;
    --tn-radius-sm: 10px;

    /* Delt grid så kolonne-hoved og vare-rækker flugter */
    --tn-cart-cols: 92px minmax(0, 1fr) 116px 128px 116px 44px;
    --tn-cart-gap: 18px;
}

/* ---- Scope: kun på kurv-siden ---- */
.woocommerce-cart .woocommerce {
    font-family: var(--tn-font);
    color: var(--tn-text);
}
.woocommerce-cart .woocommerce a { color: var(--tn-blue); }

/* ---- To-kolonne layout wrapper (åbnes/lukkes via tn-cart.php) ---- */
.tn-cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}
.tn-cart-layout .woocommerce-cart-form { margin: 0; }
.tn-cart-layout .cart-collaterals {
    width: auto;
    margin: 0;
    position: sticky;
    top: 24px;
}
.tn-cart-layout .cart-collaterals::before,
.tn-cart-layout .cart-collaterals::after { display: none; }

/* ═══════════════════════════════════════════
   VARE-LISTE
   ═══════════════════════════════════════════ */
.tn-cart {
    background: var(--tn-bg);
    border: 1px solid var(--tn-line);
    border-radius: var(--tn-radius);
    overflow: hidden;
}

/* Kolonne-hoved (kun desktop) */
.tn-cart__head {
    display: grid;
    grid-template-columns: var(--tn-cart-cols);
    gap: var(--tn-cart-gap);
    align-items: center;
    padding: 16px 22px;
    background: var(--tn-bg-2);
    border-bottom: 1px solid var(--tn-line);
}
.tn-cart__col-th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tn-text-soft);
}
.tn-cart__col-th--product  { grid-column: 1 / 3; }
.tn-cart__col-th--price    { grid-column: 3; }
.tn-cart__col-th--qty      { grid-column: 4; text-align: center; }
.tn-cart__col-th--subtotal { grid-column: 5; }

.tn-cart__items { display: block; }

.tn-cart__item {
    display: grid;
    grid-template-columns: var(--tn-cart-cols);
    gap: var(--tn-cart-gap);
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--tn-line);
}
.tn-cart__item:last-child { border-bottom: none; }

/* Billede */
.tn-cart__media { grid-column: 1; }
.tn-cart__media a { display: block; }
.tn-cart__media img {
    width: 92px;
    height: 92px;
    object-fit: cover;
    border-radius: var(--tn-radius-sm);
    border: 1px solid var(--tn-line);
    background: var(--tn-surface);
    display: block;
}

/* Navn + meta */
.tn-cart__info { grid-column: 2; min-width: 0; }
.tn-cart__info a {
    color: var(--tn-navy);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.35;
    letter-spacing: -0.005em;
    transition: color .2s var(--tn-ease);
}
.tn-cart__info a:hover { color: var(--tn-blue); }
.tn-cart__info .variation,
.tn-cart__info dl {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--tn-text-soft);
    line-height: 1.5;
}
.tn-cart__info .variation dt,
.tn-cart__info .variation dd { display: inline; margin: 0; }
.tn-cart__info .backorder_notification {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--tn-danger);
}

/* Pris + subtotal */
.tn-cart__price   { grid-column: 3; }
.tn-cart__subtotal { grid-column: 5; }
.tn-cart__price,
.tn-cart__subtotal {
    font-size: 15px;
    font-weight: 700;
    color: var(--tn-navy);
    letter-spacing: -0.01em;
}
.tn-cart__price bdi,
.tn-cart__subtotal bdi,
.tn-cart__price .amount,
.tn-cart__subtotal .amount { color: inherit; }
.tn-cart__price del,
.tn-cart__subtotal del {
    color: var(--tn-text-faint);
    font-weight: 500;
    font-size: 13px;
    margin-right: 4px;
}
.tn-cart__price ins,
.tn-cart__subtotal ins {
    text-decoration: none;
    color: var(--tn-blue);
}

/* Antal-vælger (WooCommerce input.qty) */
.tn-cart__qty { grid-column: 4; justify-self: center; }
.tn-cart__qty .quantity {
    display: inline-flex;
    align-items: center;
}
.tn-cart__qty input.qty {
    width: 68px;
    height: 42px;
    text-align: center;
    font-family: var(--tn-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--tn-navy);
    background: var(--tn-bg);
    border: 1px solid var(--tn-line-2);
    border-radius: var(--tn-radius-sm);
    padding: 0 6px;
    transition: border-color .2s var(--tn-ease), box-shadow .2s var(--tn-ease);
    -moz-appearance: textfield;
}
.tn-cart__qty input.qty:focus {
    outline: none;
    border-color: var(--tn-blue);
    box-shadow: 0 0 0 3px var(--tn-blue-soft);
}
.tn-cart__qty input.qty::-webkit-outer-spin-button,
.tn-cart__qty input.qty::-webkit-inner-spin-button { opacity: 1; }

/* Fjern-knap */
.tn-cart__remove { grid-column: 6; justify-self: center; }
.tn-cart__remove a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 22px;
    line-height: 1;
    color: var(--tn-text-faint) !important;
    background: transparent;
    text-decoration: none;
    transition: background-color .16s var(--tn-ease), color .16s var(--tn-ease), transform .12s var(--tn-ease);
}
.tn-cart__remove a.remove:hover {
    background: rgba(192, 52, 27, .10);
    color: var(--tn-danger) !important;
    transform: scale(1.05);
}

/* ═══════════════════════════════════════════
   AKTIONER (kupon + opdater)
   ═══════════════════════════════════════════ */
.tn-cart__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 20px 0 0;
}
.tn-cart__coupon {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
}
.tn-cart__coupon input#coupon_code {
    height: 46px;
    min-width: 200px;
    flex: 0 1 260px;
    padding: 0 16px;
    font-family: var(--tn-font);
    font-size: 14px;
    color: var(--tn-navy);
    background: var(--tn-bg);
    border: 1px solid var(--tn-line-2);
    border-radius: var(--tn-radius-sm);
    transition: border-color .2s var(--tn-ease), box-shadow .2s var(--tn-ease);
}
.tn-cart__coupon input#coupon_code::placeholder { color: var(--tn-text-faint); }
.tn-cart__coupon input#coupon_code:focus {
    outline: none;
    border-color: var(--tn-blue);
    box-shadow: 0 0 0 3px var(--tn-blue-soft);
}
.tn-cart__update { margin-left: auto; }

/* ═══════════════════════════════════════════
   KNAPPER
   ═══════════════════════════════════════════ */
.tn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 22px;
    font-family: var(--tn-font);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    border-radius: var(--tn-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1;
    transition: transform .18s var(--tn-ease), background-color .25s var(--tn-ease),
                border-color .25s var(--tn-ease), color .25s var(--tn-ease), box-shadow .25s var(--tn-ease);
}
.tn-btn--primary {
    background: var(--tn-blue);
    color: #fff;
    box-shadow: 0 8px 22px -12px var(--tn-blue-glow);
}
.tn-btn--primary:hover {
    background: var(--tn-blue-deep);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -10px var(--tn-blue-glow);
}
.tn-btn--primary:active { transform: translateY(0); }
.tn-btn--ghost {
    background: var(--tn-bg);
    color: var(--tn-navy);
    border-color: var(--tn-line-2);
}
.tn-btn--ghost:hover {
    background: var(--tn-blue-soft);
    border-color: var(--tn-blue);
    color: var(--tn-blue-deep);
}
.tn-btn--block { width: 100%; }

/* ═══════════════════════════════════════════
   ORDREOVERSIGT (totals)
   ═══════════════════════════════════════════ */
.tn-totals {
    background: var(--tn-bg);
    border: 1px solid var(--tn-line);
    border-radius: var(--tn-radius);
    padding: 24px;
}
.tn-totals__head { margin-bottom: 4px; }
.tn-totals__title {
    font-family: var(--tn-font);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--tn-navy);
    margin: 0 0 6px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--tn-line);
    position: relative;
}
.tn-totals__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 34px;
    height: 3px;
    border-radius: 3px;
    background: var(--tn-blue);
}
.tn-totals__table {
    width: 100%;
    border-collapse: collapse;
    margin: 6px 0 20px;
}
.tn-totals__table th,
.tn-totals__table td {
    padding: 12px 0;
    font-size: 14px;
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--tn-line);
    vertical-align: top;
}
.tn-totals__table th {
    font-weight: 500;
    color: var(--tn-text-soft);
}
.tn-totals__table td {
    text-align: right;
    font-weight: 600;
    color: var(--tn-navy);
}
.tn-totals__table td .amount,
.tn-totals__table td bdi { color: inherit; }
.tn-totals__table .cart-discount td { color: var(--tn-blue); }
.tn-totals__table small { color: var(--tn-text-faint); font-weight: 400; }

/* Fragt-rækken (radioknapper / kalkulator) */
.tn-totals__table .shipping td,
.tn-totals__table .woocommerce-shipping-totals td { font-weight: 500; }
.tn-totals__table ul#shipping_method {
    margin: 0;
    padding: 0;
    list-style: none;
}
.tn-totals__table ul#shipping_method li {
    margin: 0 0 6px;
    font-weight: 500;
    color: var(--tn-navy);
}
.tn-totals__table ul#shipping_method li:last-child { margin-bottom: 0; }
.tn-totals__table .woocommerce-shipping-destination {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: var(--tn-text-soft);
    font-weight: 400;
}

/* Total-rækken fremhævet */
.tn-totals__table .order-total th {
    font-size: 15px;
    font-weight: 700;
    color: var(--tn-navy);
}
.tn-totals__table .order-total td {
    font-family: var(--tn-font);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--tn-navy);
}
.tn-totals__table .order-total th,
.tn-totals__table .order-total td { border-bottom: none; padding-bottom: 4px; }

/* Proceed to checkout */
.tn-totals .wc-proceed-to-checkout { padding: 6px 0 0; }
.tn-totals .wc-proceed-to-checkout .checkout-button { margin: 0; }
.tn-totals .wc-proceed-to-checkout > a:not(.checkout-button) {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 13px;
    color: var(--tn-text-soft);
}
.tn-totals .shipping-calculator-button { color: var(--tn-blue); }

/* ═══════════════════════════════════════════
   TOM KURV
   ═══════════════════════════════════════════ */
.tn-cart-empty {
    max-width: 520px;
    margin: 20px auto;
    text-align: center;
    padding: 40px 24px;
}
.tn-cart-empty__icon {
    width: 92px;
    height: 92px;
    margin: 0 auto 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tn-blue-soft);
    color: var(--tn-blue);
    border: 1px solid var(--tn-line-2);
    border-radius: var(--tn-radius);
}
.tn-cart-empty__icon svg { width: 38px; height: 38px; stroke: currentColor; fill: none; }
.tn-cart-empty__title {
    font-family: var(--tn-font);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--tn-navy);
    margin: 0 0 10px;
}
/* WooCommerce's egen tom-besked (via wc_empty_cart_message) */
.woocommerce-cart .cart-empty.woocommerce-info,
.tn-cart-empty__msg {
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 28px;
    font-size: 15px;
    color: var(--tn-text-soft);
    line-height: 1.6;
}
.woocommerce-cart .cart-empty.woocommerce-info::before { display: none; }
.tn-cart-empty .return-to-shop { margin: 0; }

/* ═══════════════════════════════════════════
   NOTIFIKATIONER (kupon anvendt / kurv opdateret / fejl)
   ═══════════════════════════════════════════ */
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-error {
    font-family: var(--tn-font);
    border-radius: var(--tn-radius-sm);
    border: 1px solid var(--tn-line);
    border-left: 3px solid var(--tn-blue);
    background: var(--tn-bg-2);
    color: var(--tn-navy);
    padding: 14px 18px;
    font-size: 14px;
    list-style: none;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.woocommerce-cart .woocommerce-error {
    border-left-color: var(--tn-danger);
    background: #FFF3F3;
    color: var(--tn-danger);
}
.woocommerce-cart .woocommerce-message .button,
.woocommerce-cart .woocommerce-error .button,
.woocommerce-cart .woocommerce-info .button {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    background: var(--tn-blue);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

/* Cross-sells (flyttet til under kurven af tn-cart.php) */
.woocommerce-cart .cross-sells {
    max-width: 1200px;
    margin: 48px auto 0;
}
.woocommerce-cart .cross-sells > h2 {
    font-family: var(--tn-font);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--tn-navy);
    margin: 0 0 20px;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 980px) {
    .tn-cart-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .tn-cart-layout .cart-collaterals { position: static; }
}

@media (max-width: 680px) {
    .tn-cart__head { display: none; }

    .tn-cart__item {
        grid-template-columns: 72px 1fr;
        gap: 6px 16px;
        position: relative;
        padding: 18px 18px;
    }
    .tn-cart__media {
        grid-column: 1;
        grid-row: 1 / span 2;
    }
    .tn-cart__media img { width: 72px; height: 72px; }
    .tn-cart__info {
        grid-column: 2;
        grid-row: 1;
        padding-right: 40px; /* plads til fjern-knap */
    }

    /* Pris / antal / subtotal som label:værdi-rækker */
    .tn-cart__price,
    .tn-cart__qty,
    .tn-cart__subtotal {
        grid-column: 2;
        justify-self: stretch;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 0 0;
    }
    .tn-cart__price::before,
    .tn-cart__qty::before,
    .tn-cart__subtotal::before {
        content: attr(data-title);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--tn-text-soft);
    }
    .tn-cart__qty { justify-self: stretch; }

    .tn-cart__remove {
        position: absolute;
        top: 14px;
        right: 12px;
        grid-column: auto;
    }

    .tn-cart__actions { flex-direction: column; align-items: stretch; }
    .tn-cart__coupon { flex-wrap: wrap; }
    .tn-cart__coupon input#coupon_code { flex: 1 1 100%; min-width: 0; }
    .tn-cart__coupon .tn-btn { flex: 1 1 100%; }
    .tn-cart__update { margin-left: 0; width: 100%; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .tn-btn, .tn-cart__info a, .tn-cart__remove a.remove { transition: none !important; }
}

/* ============================================================
   HÆRDNING MOD TEMA-OVERSTYRING
   Temaets og WooCommerce's globale styles (fx .button.alt,
   floated .cart-collaterals) er mere specifikke end de øvrige
   regler ovenfor. Blokken her scopes under .woocommerce-cart
   .woocommerce og bruger målrettet !important, så TrackNordic-
   designet vinder — uden at røre nogen funktionalitet.
   ============================================================ */

/* ---- Layout: tving grid-børnene ind i deres spor ---- */
.woocommerce-cart .woocommerce .tn-cart-layout { width: 100%; }
.woocommerce-cart .tn-cart-layout > .woocommerce-cart-form,
.woocommerce-cart .tn-cart-layout > .cart-collaterals {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.woocommerce-cart .tn-cart-layout > .cart-collaterals {
    min-width: 0;
    overflow: visible !important;
}
.woocommerce-cart .tn-cart-layout .cart_totals {
    width: auto !important;
    float: none !important;
}
/* Fjern evt. tema-hr/linjer i totals-området */
.woocommerce-cart .tn-cart-layout .cart-collaterals hr { display: none !important; }

/* ---- Knapper: vind over tema + WooCommerce globale knap-styles ---- */
.woocommerce-cart .woocommerce a.tn-btn,
.woocommerce-cart .woocommerce button.tn-btn,
.woocommerce-cart .woocommerce input.tn-btn {
    text-shadow: none !important;
    text-decoration: none !important;
    font-family: var(--tn-font) !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
}
/* Primær (Gå til kassen, Tilbage til shoppen) */
.woocommerce-cart .woocommerce a.tn-btn--primary,
.woocommerce-cart .woocommerce button.tn-btn--primary,
.woocommerce-cart .woocommerce input.tn-btn--primary,
.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button {
    background: var(--tn-blue) !important;
    background-color: var(--tn-blue) !important;
    background-image: none !important;
    color: #fff !important;
    border: 1px solid transparent !important;
}
.woocommerce-cart .woocommerce a.tn-btn--primary:hover,
.woocommerce-cart .woocommerce button.tn-btn--primary:hover,
.woocommerce-cart .woocommerce input.tn-btn--primary:hover,
.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: var(--tn-blue-deep) !important;
    color: #fff !important;
    border-color: transparent !important;
}
/* Sekundær / outline (Anvend, Opdater kurv) */
.woocommerce-cart .woocommerce a.tn-btn--ghost,
.woocommerce-cart .woocommerce button.tn-btn--ghost,
.woocommerce-cart .woocommerce input.tn-btn--ghost {
    background: var(--tn-bg) !important;
    background-color: var(--tn-bg) !important;
    background-image: none !important;
    color: var(--tn-navy) !important;
    border: 1px solid var(--tn-line-2) !important;
}
.woocommerce-cart .woocommerce a.tn-btn--ghost:hover,
.woocommerce-cart .woocommerce button.tn-btn--ghost:hover,
.woocommerce-cart .woocommerce input.tn-btn--ghost:hover {
    background-color: var(--tn-blue-soft) !important;
    border-color: var(--tn-blue) !important;
    color: var(--tn-blue-deep) !important;
}

/* ---- Vare-linje: neutralisér tema-tabelrester ---- */
.woocommerce-cart .woocommerce table.tn-totals__table,
.woocommerce-cart .woocommerce table.tn-totals__table th,
.woocommerce-cart .woocommerce table.tn-totals__table td {
    background: none !important;
}
.woocommerce-cart .woocommerce .tn-cart img { box-shadow: none !important; }