/* ==========================================================================
   UKSE Course Card — Design Variants (CSS-only)
   Design B is default. Toggle: ?card_design=A (original) | C | D | E
   Body class: card-design-b (default) | card-design-c | card-design-d | card-design-e

   SAFETY: Does NOT change display:grid, column class names, data-* attributes,
   .is-expanded toggle, calculator input classes, button class names, or
   visibility:visible!important from phase XII-H.3.
   ========================================================================== */


/* ==========================================================================
   SHARED COMPACT RULES — apply to ALL variants (B, C, D, E)
   Goal: shorter card height without sacrificing legibility.
   ========================================================================== */

/* ── Tighter card padding & row gap ── */
body[class*="card-design-"] .course-card {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    row-gap: 0.35rem;
}

/* ── Col-details: tighten gap between title / school / taxonomies ── */
body[class*="card-design-"] .course-card .col-details {
    gap: 0.1rem;
}

/* ── School name: 2px below title ── */
body[class*="card-design-"] .course-card .course-school {
    margin: 2px 0 0;
    line-height: 1.3;
}

/* ── Title: tighter line-height ── */
body[class*="card-design-"] .course-card .course-title {
    line-height: 1.25;
    margin: 0;
}

/* ── Taxonomy row: tighter ── */
body[class*="card-design-"] .course-card .course-taxonomies {
    margin: 0.15rem 0 0.1rem;
    gap: 0.25rem;
}

/* ── Tax chips: rounded pill (9999px) across all variants ── */
body[class*="card-design-"] .course-card .tax-chip,
body[class*="card-design-"] .course-card .tax-type,
body[class*="card-design-"] .course-card .tax-city,
body[class*="card-design-"] .course-card .tax-hours,
body[class*="card-design-"] .course-card .tax-level,
body[class*="card-design-"] .course-card .tax-schedule,
body[class*="card-design-"] .course-card .tax-extra {
    border-radius: 9999px;
}

/* ── Logo column: rounded rect container ── */
body[class*="card-design-"] .course-card .col-logo {
    background: #F8F9FB;
    border-radius: 10px;
    border-right: none;
    padding: 0.4rem 0.5rem;
}

/* ── Calculator: tighten vertical spacing between lines ── */
body[class*="card-design-"] .course-card .col-calc {
    gap: 0.15rem !important;
}

body[class*="card-design-"] .course-card .col-calc .calc-row {
    gap: 0.1rem;
}

body[class*="card-design-"] .course-card .col-calc .course-calculator__line {
    margin: 0.15rem 0;
}

body[class*="card-design-"] .course-card .col-calc .course-calculator__line--total {
    margin: 0.15rem 0 0;
}

body[class*="card-design-"] .course-card .col-calc label {
    margin-bottom: 0;
}

/* ── Total line: flex-wrap so strikethrough + savings flow naturally ── */
body[class*="card-design-"] .course-card .course-calculator__line--total {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    line-height: 1.3;
}

/* ── Promo savings: display:contents so del/badge become flex children ── */
body[class*="card-design-"] .course-card .ukse-card-promo-savings {
    display: contents;
}

/* Strikethrough price: stays on row 1 next to discounted total */
body[class*="card-design-"] .course-card .ukse-card-promo-savings del {
    font-size: 0.78rem;
    color: #999;
    opacity: 0.7;
    order: 0;
}

/* Discount badge: wraps to row 2 */
body[class*="card-design-"] .course-card .ukse-card-promo-savings .ukse-promo-save {
    font-size: 11px;
    padding: 1px 5px;
    line-height: 1.3;
}

/* Saved amount: stays with badge on row 2 */
body[class*="card-design-"] .course-card .ukse-card-promo-savings .ukse-promo-saved {
    font-size: 12px;
}

/* ── Promo badge: compact ── */
body[class*="card-design-"] .course-card .promo-badge {
    padding: 3px 10px;
    font-size: 12px;
}

/* ── Buttons: slightly tighter ── */
body[class*="card-design-"] .course-card .col-actions .btn {
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
}

/* ── Stepper wrap / weeks input: reduce height ── */
body[class*="card-design-"] .course-card .ukse-stepper-wrap {
    height: 26px !important;
}

body[class*="card-design-"] .course-card .col-calc .course-calculator__weeks,
body[class*="card-design-"] .course-card .col-calc select,
body[class*="card-design-"] .course-card .ukse-stepper-wrap .course-calculator__weeks {
    height: 24px !important;
    padding: 0 0.3rem !important;
    font-size: 0.82rem;
    box-sizing: border-box;
}

body[class*="card-design-"] .course-card .ukse-stepper {
    width: 28px;
    height: 24px !important;
    font-size: 0.9rem;
}

body[class*="card-design-"] .course-card .course-calculator__label {
    font-size: 0.82rem;
    line-height: 1.2;
    min-height: 0;
}

/* ── Calculator hint: tighter ── */
body[class*="card-design-"] .course-card .course-calculator__hint {
    margin-top: 0.1rem;
    font-size: 0.75rem;
}

/* ── Course excerpt/description: tighter if present ── */
body[class*="card-design-"] .course-card .course-card__excerpt,
body[class*="card-design-"] .course-card .course-excerpt {
    margin: 0.1rem 0 0;
    font-size: 0.85rem;
    line-height: 1.35;
}


/* ==========================================================================
   DESIGN B — "Clean Minimal" (Airbnb-inspired)
   Feel: Spacious, calm, trustworthy. Less visual noise.
   ========================================================================== */

/* ── Card container ── */
body.card-design-b .course-card {
    border-radius: 16px;
    border-color: #E8EBF0;
    box-shadow: 0 3px 10px rgba(0, 0, 50, 0.06);
    background-color: #FFFFFF;
    background-image: none;
    padding: 0.75rem 1.5rem;
}

body.card-design-b .course-card:hover,
body.card-design-b .course-card:focus-within {
    border-color: #D4D8E0;
    box-shadow: 0 6px 20px rgba(0, 0, 50, 0.08);
}

/* Logo column: uses shared rounded rect, B-specific bg */

/* ── Title ── */
body.card-design-b .course-card .course-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1a1a2e;
}

/* ── School name ── */
body.card-design-b .course-card .course-school {
    font-size: 0.9rem;
    font-weight: 500;
    color: #6B7280;
}

/* Tax chips: pills via shared rule (9999px) */

/* ── Calculator: subtle panel ── */
body.card-design-b .course-card .col-calc {
    background: #F8F9FB;
    border-radius: 10px;
    padding: 0.75rem 0.85rem;
}

/* ── Buttons: softened radius ── */
body.card-design-b .course-card .btn-view {
    border-radius: 10px;
}

body.card-design-b .course-card .btn-compare {
    border-radius: 10px;
}

body.card-design-b .course-card .btn-quote {
    border-radius: 10px;
    background: #000032;
    box-shadow: 0 4px 12px rgba(0, 0, 50, 0.15);
}

body.card-design-b .course-card .btn-quote:hover,
body.card-design-b .course-card .btn-quote:focus {
    background: #0a0a4a;
    box-shadow: 0 6px 16px rgba(0, 0, 50, 0.22);
    filter: none;
}

/* ── Promo card (B): subtle pink gradient + soft accent ── */
body.card-design-b .course-card.course-card--has-promo {
    background: linear-gradient(145deg, #FFFBFD 0%, #FFF6F9 100%);
    border-left: 2px solid rgba(230, 0, 126, 0.3);
}

body.card-design-b .course-card.course-card--has-promo .promo-badge {
    border-radius: 8px;
}


/* ==========================================================================
   DESIGN C — "Information Dense" (Booking.com-inspired)
   Feel: Efficient, data-first, professional. More info in less space.
   ========================================================================== */

/* ── Card container ── */
body.card-design-c .course-card {
    border-radius: 8px;
    border-color: #DADCE0;
    box-shadow: none;
    background-color: #FFFFFF;
    background-image: none;
    padding: 0.6rem 0.875rem;
}

body.card-design-c .course-card:hover,
body.card-design-c .course-card:focus-within {
    border-color: #BABFC5;
    box-shadow: 0 2px 8px rgba(0, 0, 50, 0.08);
}

/* Logo column: shared rounded rect; C keeps smaller image */

body.card-design-c .course-card .col-logo img {
    max-width: 120px;
    max-height: 45px;
}

/* ── Title: deep blue ── */
body.card-design-c .course-card .course-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #003580;
}

/* ── School name ── */
body.card-design-c .course-card .course-school {
    font-size: 0.85rem;
    font-weight: 500;
    color: #6B7280;
}

/* ── Tax chips: tiny uppercase pills (radius from shared rule) ── */
body.card-design-c .course-card .tax-chip {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.45rem;
}

body.card-design-c .course-card .tax-type {
    background-color: #003580;
    border-color: #003580;
    color: #FFFFFF;
}

/* ── Calculator: left-border separator ── */
body.card-design-c .course-card .col-calc {
    border-left: 2px solid #E8EBF0;
    padding-left: 0.75rem;
}

/* ── Total line: top-border divider ── */
body.card-design-c .course-card .col-calc .course-calculator__line--total {
    border-top: 1px solid #E8EBF0;
    padding-top: 0.35rem;
    margin-top: 0.35rem;
}

/* ── Buttons: sharp rectangles ── */
body.card-design-c .course-card .btn-view {
    border-radius: 4px;
    border-color: #003580 !important;
    color: #003580 !important;
}

body.card-design-c .course-card .btn-view:hover,
body.card-design-c .course-card .btn-view:focus {
    background-color: rgba(0, 53, 128, 0.06) !important;
    border-color: #002a66 !important;
    color: #003580 !important;
}

body.card-design-c .course-card .btn-compare {
    border-radius: 4px;
}

body.card-design-c .course-card .btn-quote {
    border-radius: 4px;
    background: #003580;
    box-shadow: none;
}

body.card-design-c .course-card .btn-quote:hover,
body.card-design-c .course-card .btn-quote:focus {
    background: #002a66;
    box-shadow: 0 2px 6px rgba(0, 53, 128, 0.2);
    filter: none;
}

/* ── Promo card (C) ── */
body.card-design-c .course-card.course-card--has-promo {
    background: #FFFAFC;
    background-image: none;
    border-left: 4px solid #E6007E;
}

body.card-design-c .course-card.course-card--has-promo .promo-badge {
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 12px;
}

body.card-design-c .course-card.course-card--has-promo .ukse-card-promo-savings {
    font-size: 12px;
}


/* ==========================================================================
   DESIGN D — "Premium" (Stripe-inspired)
   Feel: Sophisticated, premium, typographic hierarchy. Minimal color except CTAs.
   ========================================================================== */

/* ── Card container ── */
body.card-design-d .course-card {
    border-radius: 12px;
    border-color: #E5E5E5;
    box-shadow: 0 1px 2px rgba(0, 0, 50, 0.04), 0 1px 3px rgba(0, 0, 50, 0.03);
    background-color: #FFFFFF;
    background-image: none;
    padding: 0.75rem 1.75rem;
}

@media (min-width: 901px) {
    body.card-design-d .course-card {
        column-gap: 1.75rem;
    }
}

body.card-design-d .course-card:hover,
body.card-design-d .course-card:focus-within {
    border-color: #D0D0D0;
    box-shadow: 0 4px 12px rgba(0, 0, 50, 0.06), 0 1px 3px rgba(0, 0, 50, 0.04);
}

/* Logo column: shared rounded rect; D uses wider right padding for whitespace */
body.card-design-d .course-card .col-logo {
    padding-right: 1rem;
}

/* ── Title: larger, tracked ── */
body.card-design-d .course-card .course-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0A2540;
    letter-spacing: -0.02em;
}

/* ── School name: uppercase, tracked, subtle ── */
body.card-design-d .course-card .course-school {
    font-size: 0.85rem;
    font-weight: 500;
    color: #8898AA;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Tax chips: border-only, transparent bg (pill radius from shared rule) ── */
body.card-design-d .course-card .tax-chip {
    background-color: transparent;
    border: 1px solid #D4D8E0;
    color: #5A6878;
    font-weight: 500;
}

body.card-design-d .course-card .tax-type {
    background-color: transparent;
    border-color: rgba(236, 72, 153, 0.35);
    color: #BE185D;
}

body.card-design-d .course-card .tax-city {
    background-color: transparent;
    border-color: rgba(155, 81, 224, 0.3);
    color: #6D28D9;
}

body.card-design-d .course-card .tax-hours {
    background-color: transparent;
    border-color: rgba(255, 159, 64, 0.35);
    color: #C05621;
}

body.card-design-d .course-card .tax-level {
    background-color: transparent;
    border-color: rgba(34, 148, 210, 0.3);
    color: #2294D2;
}

body.card-design-d .course-card .tax-schedule,
body.card-design-d .course-card .tax-extra {
    background-color: transparent;
    color: #5A6878;
}

/* ── Calculator: paneled with border ── */
body.card-design-d .course-card .col-calc {
    background: #F6F9FC;
    border: 1px solid #E8EBF0;
    border-radius: 8px;
    padding: 0.75rem 0.85rem;
}

/* ── Buttons: 8px radius ── */
body.card-design-d .course-card .btn-view {
    border-radius: 8px;
    border-color: #C4CCE4 !important;
    color: #5A6878 !important;
    font-weight: 500;
}

body.card-design-d .course-card .btn-view:hover,
body.card-design-d .course-card .btn-view:focus {
    background-color: rgba(90, 104, 120, 0.06) !important;
    border-color: #A0A8B8 !important;
    color: #4A5868 !important;
}

body.card-design-d .course-card .btn-compare {
    border-radius: 8px;
    border-color: #C4CCE4 !important;
    color: #5A6878 !important;
}

body.card-design-d .course-card .btn-compare:hover,
body.card-design-d .course-card .btn-compare:focus {
    background-color: rgba(90, 104, 120, 0.06) !important;
    border-color: #A0A8B8 !important;
    color: #4A5868 !important;
}

body.card-design-d .course-card .btn-quote {
    border-radius: 8px;
    background: linear-gradient(90deg, #FF4FB2 0%, #E6007E 100%);
    box-shadow: 0 4px 10px rgba(230, 0, 126, 0.2);
}

body.card-design-d .course-card .btn-quote:hover,
body.card-design-d .course-card .btn-quote:focus {
    box-shadow: 0 6px 14px rgba(230, 0, 126, 0.28);
    filter: brightness(1.03);
}

/* ── Promo card (D): magenta-tinted border, white bg ── */
body.card-design-d .course-card.course-card--has-promo {
    background: #FFFFFF;
    background-image: none;
    border: 1px solid rgba(230, 0, 126, 0.2);
    border-left: 3px solid #E6007E;
}

body.card-design-d .course-card.course-card--has-promo .promo-badge {
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(230, 0, 126, 0.15);
}


/* ==========================================================================
   DESIGN E — "Premium Dark CTA" (Design D variant)
   Identical to Design D except Get Quote CTA is solid navy instead of magenta.
   ========================================================================== */

/* ── Card container (same as D) ── */
body.card-design-e .course-card {
    border-radius: 12px;
    border-color: #E5E5E5;
    box-shadow: 0 1px 2px rgba(0, 0, 50, 0.04), 0 1px 3px rgba(0, 0, 50, 0.03);
    background-color: #FFFFFF;
    background-image: none;
    padding: 0.75rem 1.75rem;
}

@media (min-width: 901px) {
    body.card-design-e .course-card {
        column-gap: 1.75rem;
    }
}

body.card-design-e .course-card:hover,
body.card-design-e .course-card:focus-within {
    border-color: #D0D0D0;
    box-shadow: 0 4px 12px rgba(0, 0, 50, 0.06), 0 1px 3px rgba(0, 0, 50, 0.04);
}

/* Logo column: shared rounded rect; E uses wider right padding like D */
body.card-design-e .course-card .col-logo {
    padding-right: 1rem;
}

/* ── Title (same as D) ── */
body.card-design-e .course-card .course-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0A2540;
    letter-spacing: -0.02em;
}

/* ── School name (same as D) ── */
body.card-design-e .course-card .course-school {
    font-size: 0.85rem;
    font-weight: 500;
    color: #8898AA;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Tax chips (same as D, pill radius from shared rule) ── */
body.card-design-e .course-card .tax-chip {
    background-color: transparent;
    border: 1px solid #D4D8E0;
    color: #5A6878;
    font-weight: 500;
}

body.card-design-e .course-card .tax-type {
    background-color: transparent;
    border-color: rgba(236, 72, 153, 0.35);
    color: #BE185D;
}

body.card-design-e .course-card .tax-city {
    background-color: transparent;
    border-color: rgba(155, 81, 224, 0.3);
    color: #6D28D9;
}

body.card-design-e .course-card .tax-hours {
    background-color: transparent;
    border-color: rgba(255, 159, 64, 0.35);
    color: #C05621;
}

body.card-design-e .course-card .tax-level {
    background-color: transparent;
    border-color: rgba(34, 148, 210, 0.3);
    color: #2294D2;
}

body.card-design-e .course-card .tax-schedule,
body.card-design-e .course-card .tax-extra {
    background-color: transparent;
    color: #5A6878;
}

/* ── Calculator (same as D) ── */
body.card-design-e .course-card .col-calc {
    background: #F6F9FC;
    border: 1px solid #E8EBF0;
    border-radius: 8px;
    padding: 0.75rem 0.85rem;
}

/* ── Buttons: View/Compare (same as D) ── */
body.card-design-e .course-card .btn-view {
    border-radius: 8px;
    border-color: #C4CCE4 !important;
    color: #5A6878 !important;
    font-weight: 500;
}

body.card-design-e .course-card .btn-view:hover,
body.card-design-e .course-card .btn-view:focus {
    background-color: rgba(90, 104, 120, 0.06) !important;
    border-color: #A0A8B8 !important;
    color: #4A5868 !important;
}

body.card-design-e .course-card .btn-compare {
    border-radius: 8px;
    border-color: #C4CCE4 !important;
    color: #5A6878 !important;
}

body.card-design-e .course-card .btn-compare:hover,
body.card-design-e .course-card .btn-compare:focus {
    background-color: rgba(90, 104, 120, 0.06) !important;
    border-color: #A0A8B8 !important;
    color: #4A5868 !important;
}

/* ── Get Quote CTA: SOLID NAVY (the only difference from D) ── */
body.card-design-e .course-card .btn-quote {
    border-radius: 8px;
    background: #0A2540;
    box-shadow: 0 4px 10px rgba(10, 37, 64, 0.2);
}

body.card-design-e .course-card .btn-quote:hover,
body.card-design-e .course-card .btn-quote:focus {
    background: #1a1a4e;
    box-shadow: 0 6px 14px rgba(10, 37, 64, 0.25);
    filter: none;
}

/* ── Promo card (same as D) ── */
body.card-design-e .course-card.course-card--has-promo {
    background: #FFFFFF;
    background-image: none;
    border: 1px solid rgba(230, 0, 126, 0.2);
    border-left: 3px solid #E6007E;
}

body.card-design-e .course-card.course-card--has-promo .promo-badge {
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(230, 0, 126, 0.15);
}


/* ==========================================================================
   RESPONSIVE OVERRIDES
   Keep variant visuals consistent at tablet/mobile breakpoints.
   ========================================================================== */

/* ── 1024px and below: 2-column stacking ── */
@media (max-width: 1024px) {
    /* Design B */
    body.card-design-b .course-card {
        padding: 0.75rem 1.25rem;
    }

    /* Design C */
    body.card-design-c .course-card {
        padding: 0.5rem 0.75rem;
    }
    body.card-design-c .course-card .col-calc {
        border-left: none;
        border-top: 1px solid #E8EBF0;
        padding-left: 0;
        padding-top: 0.4rem;
    }

    /* Design D */
    body.card-design-d .course-card {
        padding: 0.75rem 1.25rem;
    }

    /* Design E */
    body.card-design-e .course-card {
        padding: 0.75rem 1.25rem;
    }
}

/* ── 768px and below: single-column stacking ── */
@media (max-width: 768px) {
    /* Design B */
    body.card-design-b .course-card {
        padding: 0.6rem 1rem;
        border-radius: 12px;
    }

    /* Design C */
    body.card-design-c .course-card {
        padding: 0.5rem 0.625rem;
        border-radius: 6px;
    }

    /* Design D */
    body.card-design-d .course-card {
        padding: 0.6rem 1rem;
    }

    /* Design E */
    body.card-design-e .course-card {
        padding: 0.6rem 1rem;
    }
}