/* ================================================================
   iGURUS — COURSE DETAIL REDESIGN  v1.0  (prefix: cdp-)
   Flat design system override — white bg · #A41034 accent · Fraunces serif
   Load AFTER course-details-premium.css so these rules win in cascade.
================================================================ */

/* ── Font import (Fraunces + Inter) ─────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,700;1,9..144,400;1,9..144,700&family=Inter:wght@400;500;600;700&display=swap');

/* ── 10% side gutters — override Bootstrap container inside hero/body */
.cdp-hero .container,
.cdp-body .container {
    max-width:     100% !important;
    padding-left:  0    !important;
    padding-right: 0    !important;
}

/* ── Keep the cream+dot from ig-theme as the page background ────
   Hero and body sections are transparent so dots show through.
   Individual cards (tabs, sidebar, preview) stay white.
────────────────────────────────────────────────────────────────── */

/* ── Undo page-components.css double-shift on .main-area.fix ──
   page-components sets margin-left:-5vw on .main-area.fix globally.
   cdp-hero / cdp-body also have their own -5vw margins, so we get
   a double-shift. Remove it from the outer wrapper for this page.
────────────────────────────────────────────────────────────────── */
main.main-area.fix {
    margin-left:  0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ── Design token overrides ─────────────────────────────────── */
:root {
    --cdp-brand:       #A41034;
    --cdp-brand-dark:  #8B0E2A;
    --cdp-brand-light: rgba(164,16,52,.07);
    --cdp-text:        #111827;
    --cdp-muted:       #6B7280;
    --cdp-bg:          #FFFFFF;
    --cdp-bg-light:    #F9FAFB;
    --cdp-border:      #E5E7EB;
    --cdp-gold:        #F59E0B;
    --cdp-shadow:      0 2px 12px rgba(0,0,0,.07);
    --cdp-shadow-lg:   0 4px 28px rgba(0,0,0,.10);
}

/* ════════════════════════════════════════════════════════════
   1. HERO — transparent so dot-grid shows; content cards are white
════════════════════════════════════════════════════════════ */
.cdp-hero {
    background-color:  transparent !important;
    background-image:  none        !important;
    border-bottom:     1px solid rgba(164,16,52,.10) !important;
    padding-top:       40px !important;
    padding-bottom:    40px !important;
    margin-bottom:     0    !important;
    margin-left:  0 !important;
    margin-right: 0 !important;
    padding-left: 10% !important;
    padding-right: 10% !important;
    overflow-x:   visible !important;
}

/* Remove gradient glow overlay */
.cdp-hero::before { display: none !important; }

/* Hero text must be dark and crisp on the dot-grid background */
.cdp-breadcrumb .breadcrumb-item,
.cdp-title,
.cdp-avg-score,
.cdp-review-count,
.cdp-student-count,
.cdp-instructor-row {
    text-shadow: none !important;
}

/* Breadcrumb — dark-on-white */
.cdp-breadcrumb .breadcrumb-item,
.cdp-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #9CA3AF !important;
}
.cdp-breadcrumb .breadcrumb-item a {
    color: #6B7280 !important;
}
.cdp-breadcrumb .breadcrumb-item a:hover { color: #A41034 !important; }
.cdp-breadcrumb .breadcrumb-item.active { color: #374151 !important; }

/* Category badge */
.cdp-badge {
    background: #A41034 !important;
    color:      #FFFFFF !important;
}
.cdp-badge:hover { background: #8B0E2A !important; color: #FFFFFF !important; }

/* Title — Fraunces serif, dark */
.cdp-title {
    font-family:    'Fraunces', Georgia, serif !important;
    font-size:      clamp(26px, 4vw, 46px) !important;
    font-weight:    700 !important;
    color:          #111827 !important;
    letter-spacing: -0.025em !important;
    line-height:    1.12 !important;
    text-transform: none !important;
}

/* Rating row */
.cdp-avg-score    { color: #F59E0B !important; }
.cdp-hero-stars i { color: #F59E0B !important; }
.cdp-review-count { color: #6B7280 !important; }
.cdp-sep          { color: #D1D5DB !important; }
.cdp-student-count {
    color: #6B7280 !important;
}
.cdp-student-count i { color: #A41034 !important; }

/* Instructor row */
.cdp-instructor-row { color: #6B7280 !important; }
.cdp-hero-avatar {
    border: 2px solid #E5E7EB !important;
}
.cdp-hero-instructor-link {
    color:        #A41034 !important;
    font-weight:  600 !important;
    border-bottom: 1px solid rgba(164,16,52,.3) !important;
}
.cdp-hero-instructor-link:hover {
    color:        #8B0E2A !important;
    border-color: #8B0E2A !important;
}

/* Meta chips */
.cdp-chip {
    background: #F9FAFB !important;
    border:     1px solid #E5E7EB !important;
    color:      #374151 !important;
}
.cdp-chip i { color: #9CA3AF !important; }

/* ── Preview card (right column) — no float, flush layout ── */
.cdp-preview-card {
    border:     1px solid #E5E7EB !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.08) !important;
    transform:  none !important;          /* kill translateY(32px) bleed into body */
    border-radius: 14px !important;
}
.cdp-preview-thumb::after {
    background: rgba(0,0,0,.22) !important;
}
.cdp-preview-card:hover .cdp-preview-thumb::after {
    background: rgba(0,0,0,.10) !important;
}
/* right column vertically centered in hero */
.cdp-hero-right {
    align-items: center !important;
    padding-left: 24px !important;
}

/* ════════════════════════════════════════════════════════════
   2. BODY — transparent so dot-grid shows through
════════════════════════════════════════════════════════════ */
.cdp-body {
    background-color: transparent !important;
    background-image: none        !important;
    margin-top:       0           !important;
    padding-top:      32px        !important;
    padding-bottom:   48px        !important;
    margin-left:  0 !important;
    margin-right: 0 !important;
    padding-left: 10% !important;
    padding-right: 10% !important;
    overflow-x:   visible !important;
}

/* Section titles → Fraunces */
.cdp-section-title,
.cdp-section-subtitle {
    font-family:    'Fraunces', Georgia, serif !important;
    font-weight:    700 !important;
    text-transform: none !important;
    color:          #111827 !important;
}
.cdp-section-title {
    border-bottom-color: #E5E7EB !important;
}

/* ── Tab nav ─────────────────────────────────────────────── */
.cdp-tab-nav {
    background:    #FFFFFF !important;
    border-bottom: 2px solid #E5E7EB !important;
    box-shadow:    none !important;
}
.cdp-tab-btn         { color: #6B7280 !important; }
.cdp-tab-btn:hover   { color: #111827 !important; }
.cdp-tab-btn.active  {
    color:              #A41034 !important;
    border-bottom-color: #A41034 !important;
}

/* ── Accordion ───────────────────────────────────────────── */
.cdp-chapter-num {
    background: #A41034 !important;
    color:      #FFFFFF !important;
}
.cdp-chapter-title { color: #111827 !important; }

/* Chapter title → Inter (keep body font, serif reserved for display) */
.cdp-accordion-btn.accordion-button {
    background: #F9FAFB !important;
}
.cdp-accordion-btn.accordion-button:not(.collapsed) {
    background: #FFFFFF !important;
    color:      #111827 !important;
}

/* Lesson badge — free preview */
.cdp-lesson-badge-free {
    color:      #16a34a !important;
    background: rgba(22,163,74,.09) !important;
}

/* ── Instructor card ─────────────────────────────────────── */
.cdp-instructor-card-role { color: #A41034 !important; }

/* ── Reviews ─────────────────────────────────────────────── */
.cdp-rating-fill  { background: #F59E0B !important; }
.cdp-reviews-stars i { color: #F59E0B !important; }
.cdp-review-stars i  { color: #F59E0B !important; }
.cdp-review-stars i.far { color: #D1D5DB !important; }

/* ════════════════════════════════════════════════════════════
   3. SIDEBAR — clean card, no negative-margin float
════════════════════════════════════════════════════════════ */
.cdp-sidebar-card {
    border:      1px solid #E5E7EB !important;
    box-shadow:  0 2px 12px rgba(0,0,0,.07) !important;
    margin-top:  0 !important;           /* kill -48px float */
    border-radius: 14px !important;
}

/* Price in Fraunces */
.cdp-price-current,
.cdp-price-free {
    font-family: 'Fraunces', Georgia, serif !important;
    font-weight: 700 !important;
    color:       #111827 !important;
    font-size:   34px !important;
}
.cdp-price-free { color: #16a34a !important; }

/* Discount badge */
.cdp-price-badge {
    background: #A41034 !important;
    color:      #FFFFFF !important;
}

/* Includes list */
.cdp-sidebar-includes-title {
    color:      #111827 !important;
    font-size:  11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
}
.cdp-includes-list li i { color: #A41034 !important; }
.cdp-inc-label          { color: #111827 !important; }
.cdp-includes-val       { color: #374151 !important; }

/* Share section title */
.cdp-sidebar-share-title {
    color:       #111827 !important;
    font-size:   11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
}

/* ── CTA buttons ─────────────────────────────────────────── */
.cdp-btn-enroll {
    background: #A41034 !important;
    box-shadow: 0 4px 16px rgba(164,16,52,.28) !important;
    border-radius: 10px !important;
}
.cdp-btn-enroll:hover {
    background: #8B0E2A !important;
    box-shadow: 0 6px 24px rgba(164,16,52,.40) !important;
}

/* Mobile sticky bar */
.cdp-mobile-cta {
    background:  #FFFFFF !important;
    border-top:  1px solid #E5E7EB !important;
    box-shadow:  0 -2px 12px rgba(0,0,0,.08) !important;
}

/* ════════════════════════════════════════════════════════════
   4. DESCRIPTION BODY TYPOGRAPHY
════════════════════════════════════════════════════════════ */
.cdp-description      { color: #374151 !important; }
.cdp-description h2,
.cdp-description h3   { color: #111827 !important; }

/* ════════════════════════════════════════════════════════════
   5. MOBILE THUMBNAIL
════════════════════════════════════════════════════════════ */
.cdp-mobile-thumb {
    border:     1px solid #E5E7EB !important;
    box-shadow: var(--cdp-shadow) !important;
}

/* ════════════════════════════════════════════════════════════
   6. RESPONSIVE ADJUSTMENTS
════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .cdp-hero  { padding: 28px 5% 28px !important; }
    /* Bottom padding must stay >= course-details-premium.css's 100px reserve
       for the fixed .cdp-mobile-cta bar shown below this same breakpoint —
       this file loads after premium.css and wins on !important, so it has
       to carry the real value itself rather than premium.css's rule. */
    .cdp-body  { padding: 24px 5% 100px !important; }
    .cdp-title { font-size: clamp(20px, 5vw, 30px) !important; }
    .cdp-preview-card { transform: none !important; }
}
@media (max-width: 767.98px) {
    .cdp-hero  { padding: 20px 4% 20px !important; }
    .cdp-body  { padding: 20px 4% 100px !important; }
    .cdp-title { font-size: 20px !important; }
}

/* ════════════════════════════════════════════════════════════
   7. LAYOUT ALIGNMENT — match header 10vw gutters
   #content-wrapper normally caps at max-width:1340px + margin:0 auto,
   adding ~95px of auto-margin per side on top of body's 10vw = ~229px
   total extra indent per side. Remove the cap for the course-detail
   page so body's own 10vw/5vw/16px gap is the ONLY side offset,
   aligning the left/right edge flush with the header.
════════════════════════════════════════════════════════════ */
#wrapper.no-sidebar #content-wrapper:has(.cdp-hero) {
    max-width: 100% !important;
}
/* All breakpoints ≥576px: body padding is the sole side gap */
.cdp-hero,
.cdp-body {
    padding-left:  0 !important;
    padding-right: 0 !important;
    margin-left: 7% !important;
    margin-right: 7% !important;
}
/* ≤575px: body drops to 0 padding — sections supply the 16px edge gap */
@media (max-width: 575px) {
    .cdp-hero { padding-left: 16px !important; padding-right: 16px !important; }
    .cdp-body { padding-left: 16px !important; padding-right: 16px !important; }
}