/**
 * Career Camps — single product redesign v2
 * Based on the approved model (ccnp-product-page__9_CapFixed.html)
 * Brand blue: #144C89.
 */

:root{
  --cc-blue:#144C89;
  --cc-blue-hover:#0F3A6B;
  --cc-grey:#5E5F61;
  --cc-bg:#F6F7F9;
  --cc-paper:#FFFFFF;
  --cc-ink:#1A1A1A;
  --cc-line:#E2E5E9;
  --cc-line-strong:#C8CDD3;
  --cc-soft-blue:#E8F0F7;
  --cc-orange:#E85D04;
  --cc-orange-hover:#D14D00;
  --cc-font: 'Inter', system-ui, -apple-system, sans-serif;
}
/**
 * .cc-hero uses width:100vw + negative margins to bleed edge-to-edge
 * (see further down). 100vw includes the browser's scrollbar width,
 * which normally only exists once the page is tall enough to need
 * one — as the hero's own images/fonts finish loading and the page's
 * height settles, the scrollbar can appear or disappear, changing
 * what 100vw actually equals in px and causing a brief visible seam
 * right at the hero's edge (shows, then self-corrects a moment
 * later). Forcing the vertical scrollbar track to always be reserved
 * — present or not — keeps 100vw a constant value from the very
 * first paint, so there's nothing for the hero's width to visibly
 * "settle into".
 */
html{overflow-y:scroll;}

/* Scope almost everything to .cc-product so this never leaks into the
   rest of the theme (header/footer/other pages stay untouched). */
/**
 * zoom (not transform:scale) is deliberate here — it's the CSS
 * equivalent of the browser's own zoom feature the client confirmed
 * looks right at 110%. transform:scale() would have been the more
 * "standard" choice, but it creates a new containing block for any
 * descendant using position:relative + left:50%/negative-margin
 * vw tricks (exactly what .cc-hero's full-bleed background relies
 * on) — that's the same failure mode that broke an earlier full-
 * bleed attempt elsewhere on this page when nested inside an
 * Elementor container with its own transform. zoom avoids that
 * entirely since it doesn't establish a new containing block.
 * Supported in Chrome, Edge, and Safari; Firefox added support in
 * 2024 (v126+) — on any older Firefox it silently has no effect and
 * the page just renders at 100% like before, not broken.
 */
.cc-product{font-family:var(--cc-font);color:var(--cc-ink);line-height:1.55;-webkit-font-smoothing:antialiased;background:var(--cc-bg);zoom:1.1;}
.cc-product *{box-sizing:border-box;}
.cc-product .wrap{max-width:1100px;margin:0 auto;padding:0 40px;}
.cc-product img{max-width:100%;display:block;}
body{overflow-x:hidden;}

/* ---------- hero ---------- */
.cc-hero{
  background:var(--cc-blue);border-bottom:1px solid var(--cc-blue-hover);padding:56px 0 44px;
  /* full-bleed: extend edge-to-edge even when embedded inside a
     narrower/padded container (e.g. an Elementor column), instead of
     being boxed in by that container's own width. */
  width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;
}
.cc-hero-inner{max-width:1100px;margin:0 auto;padding:0 40px;text-align:center;}
.cc-eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.3px;color:#fff;background:rgba(255,255,255,.14);padding:6px 14px;border-radius:20px;margin-bottom:18px;}
.cc-hero h1{font-family:var(--cc-font);font-size:36px;font-weight:700;color:#fff;letter-spacing:-.6px;line-height:1.2;margin-bottom:16px;}
/* Same exact size/weight/color as h1 above on purpose — a second,
   independently-editable promotional line that can show under the
   real H1 (or in its place, if "Hide hero title (H1)" is on), without
   being a second literal <h1> on the page for SEO/accessibility. */
.cc-hero-promo{font-family:var(--cc-font);font-size:36px;font-weight:700;color:#fff;letter-spacing:-.6px;line-height:1.2;margin-bottom:16px;}
.cc-hero-blurb{font-size:16px;color:rgba(255,255,255,.85);max-width:560px;margin:0 auto 28px;line-height:1.6;}

.cc-trust-bar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;font-size:12px;color:rgba(255,255,255,.85);margin-bottom:28px;line-height:1.5;}
.cc-trust-bar span{white-space:nowrap;}
.cc-trust-bar strong{font-weight:700;color:#fff;}
/* Each stat/audience line and its leading "|" separator are one
   .cc-trust-item unit (see cc_render_trust_bar()) so flex-wrap moves
   them to the next line together — otherwise a long audience line can
   wrap on its own while its separator is short enough to stay behind,
   leaving an orphaned "|" dangling at the end of the previous line. */
.cc-trust-bar .cc-sep{color:rgba(255,255,255,.35);margin-right:14px;}

/* ---------- what's included (hero) ---------- */
/* Deliberately a light card even though it sits inside the dark-blue
   .cc-hero — per the approved reference, this box stays light
   (soft-blue bg, dark ink text) as a contrasting card floating on the
   dark hero, rather than inheriting the hero's white-on-dark
   treatment like the badge/title/blurb/trust-bar above it do. */
.cc-included-block{background:var(--cc-soft-blue);border:1px solid #D0E0F0;border-radius:10px;padding:24px 28px;text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.18);max-width:780px;margin:0 auto;}
.cc-included-block h2{font-size:15px;font-weight:600;color:var(--cc-blue);margin-bottom:16px;text-align:center;}
.cc-included-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 32px;}
.cc-included-item{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--cc-ink);font-weight:500;}
.cc-included-item::before{content:"✓";color:var(--cc-blue);font-weight:700;flex-shrink:0;}

/* ---------- shared section styling ---------- */
/**
 * Widened from 900px to 1200px at the client's request so "Continue
 * Your Learning Journey" could show genuinely wide cards. This is a
 * plain CSS max-width + margin:0 auto — no viewport units, no
 * negative-margin breakout, no position tricks — so unlike the
 * earlier full-bleed attempts, there's nothing here for a transformed
 * Elementor ancestor to break. Worst case, if the actual Elementor
 * container this is embedded in is narrower than 1200px, this simply
 * gets capped at whatever width that container actually allows — a
 * normal, harmless CSS outcome, not a broken/clipped one.
 */
.cc-main{max-width:1100px;margin:0 auto;padding:40px 40px 80px;}
.cc-section{margin-bottom:48px;}
.cc-section-title{font-family:var(--cc-font);font-size:28px;font-weight:700;color:var(--cc-ink);margin-bottom:24px;letter-spacing:-.3px;}
.cc-section-title.centered{text-align:center;}
.cc-section-sub{font-size:14px;color:var(--cc-grey);margin-bottom:20px;}
.cc-section-sub.centered{text-align:center;margin-left:auto;margin-right:auto;}

/* ---------- schedule table ---------- */
.cc-dates-wrap{background:var(--cc-paper);border:1px solid var(--cc-line);border-radius:10px;overflow:hidden;}
/* minmax(0, Nfr) on the first 3 columns stops long text (e.g.
   "Washington, DC · Onsite") from silently widening that one row's
   track and shifting Price/buttons rightward compared to other rows
   (paired with the ellipsis truncation on .cc-date-when/.cc-date-
   where/.cc-date-price below).
   The 4th column (actions) instead gets a real MINIMUM px floor —
   minmax(268px, 1.6fr) — not just a max like the others. .cc-main
   caps out at 900px wide regardless of screen size, which caps this
   row's available content width at a hard ceiling too (~780px minus
   gaps); at that ceiling a plain "1.6fr" share works out to well
   under what the Get Your Quote + Reserve Your Seat buttons actually
   need, and — because grid items aren't clipped by default — the
   overflow doesn't get hidden, it visually spills left on top of the
   Price column. The floor guarantees the actions column is never
   smaller than the buttons actually require (268px matches the
   compact button widths in .cc-date-actions below), so there's
   nothing left to overflow. */
.cc-dates-header{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr) minmax(0,.45fr) minmax(284px,1.6fr);gap:10px;padding:12px 20px;background:var(--cc-soft-blue);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--cc-blue);border-bottom:1px solid var(--cc-line);}
.cc-dates-scroll{max-height:403px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--cc-line-strong) var(--cc-bg);}
.cc-dates-scroll::-webkit-scrollbar{width:8px;}
.cc-dates-scroll::-webkit-scrollbar-thumb{background:var(--cc-line-strong);border-radius:100px;}
.cc-date-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr) minmax(0,.45fr) minmax(284px,1.6fr);gap:10px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--cc-line);font-size:14px;}
.cc-date-row:last-child{border-bottom:none;}
.cc-date-row:hover{background:#F9FAFB;}
.cc-date-when{font-weight:600;color:var(--cc-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cc-date-where{color:var(--cc-grey);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cc-date-price{font-size:17px;font-weight:700;color:var(--cc-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Two fixed-width columns (not just the first) so both buttons line
   up as one consistent block on every row — same width, same start
   x — and the whole block sits flush at the right edge of the cell,
   matching the approved reference. Sized to fit inside the 268px
   floor above with a little breathing room (116 + 8 + 144 = 268).
   The quote-slot column stays a separate fixed column (rather than
   plain flex right-packing) because YITH swaps its content for a
   shorter text message once a variation is already in the shopper's
   quote list (see schedule-rows.php note); without a fixed column
   that state would still shift Reserve Your Seat out of alignment
   with the rows above/below it. */
.cc-date-actions{display:grid;grid-template-columns:112px 164px;gap:8px;align-items:center;justify-content:end;justify-items:stretch;}
.cc-quote-slot{display:flex;align-items:center;min-height:38px;width:100%;}
/* Defensive catch-all: whatever markup YITH renders inside this slot
   (its wrapper divs can vary by version), nothing in there should
   carry its own margin — margin is what causes a button to sit off
   vertical-center relative to Reserve Your Seat next to it, and this
   guarantees it regardless of which exact elements YITH prints. */
.cc-quote-slot *{margin:0 !important;}
/* YITH's "already in quote list" state: button is hidden, and a text
   message + "Browse the list" link print instead. Style them to sit
   quietly in the fixed-width slot instead of looking like stray text. */
.cc-quote-slot .yith-ywraq-add-button.hide{display:none !important;}
.cc-quote-slot .yith_ywraq_add_item_response_message{font-size:12px;color:var(--cc-grey);line-height:1.3;margin:0 0 2px;}
.cc-quote-slot .yith_ywraq_add_item_browse_message{font-size:12px;}
.cc-quote-slot .yith_ywraq_add_item_browse_message a{color:var(--cc-blue);font-weight:600;text-decoration:none;}
.cc-quote-slot .yith_ywraq_add_item_browse_message a:hover{text-decoration:underline;}
/* YITH Request-a-Quote ships its own CSS for .add-request-quote-button
   (different height/border-radius/font/colors than our design) that
   otherwise overrides the compact outline style here. That CSS also
   uses !important in places, so !important vs !important comes down
   to a specificity tie-break, then load order. The repeated class
   (".add-request-quote-button.add-request-quote-button") is a
   standard trick to raise this selector's specificity above YITH's
   without inventing a class that doesn't exist in the markup; the
   real fix for load order is priority 20 on
   cc_enqueue_single_product_redesign_assets() so this file is queued
   after YITH's and the theme's. */
.cc-date-actions .add-request-quote-button,
.cc-date-actions a.add-request-quote-button.add-request-quote-button{
  all:unset;box-sizing:border-box;cursor:pointer;
}
.cc-date-actions .yith-ywraq-add-to-quote,
.cc-date-actions .yith-ywraq-add-button{
  /* !important is required here specifically because YITH prints an
     inline style="display:block" (or "display:none") directly in the
     HTML of .yith-ywraq-add-button (see templates/add-to-quote.php) —
     an inline style attribute always beats a plain stylesheet rule
     regardless of selector specificity, no matter the load order, so
     without !important this div stayed display:block and kept its own
     default vertical margin, which is what was nudging the button out
     of vertical center relative to Reserve Your Seat next to it. */
  margin:0 !important;padding:0 !important;display:flex !important;width:100%;
  align-items:center;box-sizing:border-box;
}
.cc-date-actions a.add-request-quote-button.add-request-quote-button{
  display:flex !important;width:100% !important;align-items:center !important;justify-content:center !important;text-align:center !important;
  padding:9px 8px !important;border-radius:8px !important;font-size:13px !important;
  font-weight:600 !important;font-family:inherit !important;line-height:1.2 !important;
  background:var(--cc-paper) !important;background-color:var(--cc-paper) !important;color:var(--cc-blue) !important;
  border:1px solid var(--cc-line-strong) !important;text-decoration:none !important;
  white-space:nowrap;box-sizing:border-box;box-shadow:0 1px 2px rgba(16,24,40,.06) !important;
}
.cc-date-actions a.add-request-quote-button.add-request-quote-button:hover{
  border-color:var(--cc-blue) !important;background:var(--cc-soft-blue) !important;background-color:var(--cc-soft-blue) !important;
}
.cc-date-actions form{margin:0;display:flex;width:100%;}
.cc-date-actions form .cc-btn-reserve{width:100%;padding:9px 6px;font-size:12.5px;letter-spacing:.1px;}
.cc-quote-slot > .cc-btn{width:100%;padding:9px 8px;}
.cc-date-actions > .cc-btn{width:100%;padding:9px 8px;}

.cc-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:6px;font-size:13px;font-weight:600;text-decoration:none;border:none;cursor:pointer;font-family:inherit;transition:background .15s;white-space:nowrap;box-sizing:border-box;}
.cc-btn-primary{background:var(--cc-blue);color:#fff;}
.cc-btn-primary:hover{background:var(--cc-blue-hover);color:#fff;}
.cc-btn-reserve{background:var(--cc-orange);color:#fff;}
.cc-btn-reserve:hover{background:var(--cc-orange-hover);color:#fff;}
.cc-btn-outline{background:var(--cc-paper);color:var(--cc-blue);border:1px solid var(--cc-line-strong);border-radius:8px;box-shadow:0 1px 2px rgba(16,24,40,.06);}
.cc-btn-outline:hover{border-color:var(--cc-blue);background:var(--cc-soft-blue);}

.cc-dates-note{display:flex;align-items:center;justify-content:center;gap:12px 16px;flex-wrap:wrap;font-size:14px;color:var(--cc-ink);font-weight:500;padding:14px 20px;background:#FAFBFC;border-top:1px solid var(--cc-line);text-align:center;}
.cc-dates-note .cc-volume-note{width:100%;font-size:13px;font-weight:400;color:var(--cc-grey);margin-top:2px;}
.cc-team-btn{display:inline-flex;align-items:center;background:var(--cc-blue);color:#fff;padding:8px 14px;border-radius:6px;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;border:none;cursor:pointer;}
.cc-team-btn:hover{background:var(--cc-blue-hover);}
.cc-team-btn:disabled{opacity:.6;cursor:default;}

/* ---------- facts / trust strip ---------- */
.cc-facts{background:var(--cc-blue);color:#fff;border-radius:16px;padding:28px 32px;margin-bottom:48px;box-shadow:0 8px 24px rgba(0,75,140,.18);display:flex;align-items:center;gap:28px;}
.cc-facts-left{flex:0 0 auto;max-width:220px;padding-right:28px;border-right:1px solid rgba(255,255,255,.25);text-align:center;}
.cc-facts-left .cc-facts-sub{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;opacity:.7;margin-bottom:6px;}
.cc-facts-left .cc-facts-title{font-size:17px;font-weight:700;letter-spacing:-.2px;line-height:1.3;}
.cc-facts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;flex:1;text-align:left;}
.cc-fact-item .cc-fact-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;opacity:.7;margin-bottom:6px;}
.cc-fact-item .cc-fact-num{font-size:15px;font-weight:600;line-height:1.35;}

/* ---------- why choose us ---------- */
.cc-why-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.cc-why-card{background:var(--cc-paper);border:1px solid var(--cc-line);border-radius:8px;padding:20px;}
.cc-why-card h3{font-size:15px;font-weight:600;color:var(--cc-ink);margin-bottom:6px;}
.cc-why-card p{font-size:14px;color:var(--cc-grey);line-height:1.5;}

/* ---------- tabs (Description / Additional tabs) ---------- */
.cc-tabs-section{margin-bottom:48px;}
.cc-tabs-header{text-align:center;margin-bottom:28px;}
.cc-tabs-title{font-family:var(--cc-font);font-size:28px;font-weight:700;color:var(--cc-ink);letter-spacing:-.4px;}
.cc-tabs-box{background:var(--cc-paper);border:1px solid var(--cc-line);border-radius:12px;overflow:hidden;}
/* Reset the theme's/WooCommerce's own default tab styling (border,
   background, padding, box-shadow) on the outer wrapper WooCommerce
   itself prints — otherwise it can show through as a second, nested
   box inside .cc-tabs-box, especially once a tab is opened. */
.cc-tabs-box .woocommerce-tabs,
.cc-tabs-box .wc-tabs-wrapper{
  border:none !important;background:none !important;padding:0 !important;
  margin:0 !important;box-shadow:none !important;
}
.cc-tabs-box ul.tabs,
.cc-tabs-box ul.tabs li{
  box-shadow:none !important;border-radius:0 !important;list-style:none !important;
}
.cc-tabs-box ul.tabs li::before{content:none !important;}
.cc-tabs-box ul.tabs{display:flex;flex-wrap:wrap;gap:0;background:#F0F3F7;border-bottom:1px solid var(--cc-line);padding:0 8px;margin:0;list-style:none;}
.cc-tabs-box ul.tabs li{margin:0;}
.cc-tabs-box ul.tabs li a{display:inline-block;padding:14px 22px;font-size:14px;font-weight:600;color:var(--cc-grey);background:transparent;border:none;cursor:pointer;font-family:inherit;border-radius:8px 8px 0 0;margin-top:8px;transition:all .15s;text-decoration:none;}
.cc-tabs-box ul.tabs li a:hover{color:var(--cc-blue);}
/* WooCommerce's own tabs script calls .focus() on the active tab link
   as soon as the page loads (a deliberate accessibility behavior, so
   keyboard/screen-reader users know which tab is selected) — not just
   on click. That script-triggered focus matches :focus-visible in
   Chromium browsers even before any user interaction, which is why a
   focus ring could show up immediately on page load. The active tab's
   white background already communicates "selected" on its own, so we
   drop the outline entirely instead of replacing it with a ring. */
.cc-tabs-box ul.tabs li a:focus{outline:none;}
.cc-tabs-box ul.tabs li.active a{background:var(--cc-paper);color:var(--cc-ink);border:none;}
.cc-tabs-box .woocommerce-Tabs-panel{
  display:none;padding:28px 32px 32px !important;font-size:15px;color:var(--cc-grey);box-sizing:border-box;
  border:none !important;background:var(--cc-paper) !important;margin:0 !important;box-shadow:none !important;
}
.cc-tabs-box .woocommerce-Tabs-panel.active{display:block;}
.cc-tabs-box .woocommerce-Tabs-panel h2,
.cc-tabs-box .woocommerce-Tabs-panel h3{font-family:var(--cc-font);font-size:18px;font-weight:700;color:var(--cc-blue);margin-bottom:14px;}
.cc-tabs-box .woocommerce-Tabs-panel p{font-size:15px;color:var(--cc-grey);line-height:1.65;margin-bottom:14px;}
.cc-tabs-box .woocommerce-Tabs-panel p:last-child{margin-bottom:0;}
.cc-tabs-box .woocommerce-Tabs-panel ul{margin:12px 0 0 18px;color:var(--cc-grey);font-size:14px;}
.cc-tabs-box .woocommerce-Tabs-panel li{margin-bottom:6px;line-height:1.5;}

.cc-outline-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px;}
.cc-outline-card{background:#F8FAFC;border:1px solid var(--cc-line);border-radius:8px;padding:14px 16px;}
.cc-outline-card h4{font-size:14px;font-weight:600;color:var(--cc-blue);margin-bottom:4px;}
.cc-outline-card p{font-size:13px;color:var(--cc-grey);line-height:1.45;margin:0;}

/* ---------- help banner ---------- */
.cc-help-banner{background:var(--cc-blue);color:#fff;text-align:center;padding:26px 36px;border-radius:14px;margin:0 0 48px;box-shadow:0 8px 24px rgba(0,75,140,.18);}
.cc-help-banner h2{font-size:28px;font-weight:700;margin-bottom:10px;letter-spacing:-.3px;line-height:1.3;color:#fff;}
.cc-help-banner p{font-size:15px;opacity:.9;margin-bottom:18px;}
.cc-help-banner .cc-btn{background:#A8C5D8;color:var(--cc-blue);padding:12px 28px;border-radius:24px;font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;}
.cc-help-banner .cc-btn:hover{background:#fff;}

/* ---------- course outline / FAQ accordion ---------- */
.cc-faq{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;}
.cc-faq details{border-bottom:1px solid var(--cc-line);padding:16px 0;}
.cc-faq details:last-child{border-bottom:1px solid var(--cc-line);}
.cc-faq summary{font-size:15px;font-weight:600;color:var(--cc-ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;line-height:1.4;}
.cc-faq summary::-webkit-details-marker{display:none;}
.cc-faq summary::after{content:"+";font-size:18px;color:var(--cc-blue);font-weight:500;flex-shrink:0;line-height:1;}
.cc-faq details[open] summary::after{content:"–";}
.cc-faq details[open] summary{margin-bottom:10px;}
.cc-faq p{font-size:14px;color:var(--cc-grey);line-height:1.55;padding-right:24px;margin:0;}
.cc-outline-bullets{list-style:none !important;margin:0;padding-right:24px;font-size:12px;color:var(--cc-grey);line-height:1.6;}
.cc-outline-bullets li{list-style:none !important;list-style-type:none !important;position:relative;padding-left:16px;margin-bottom:6px;}
.cc-outline-bullets li:last-child{margin-bottom:0;}
.cc-outline-bullets li::before{content:"–";position:absolute;left:0;top:0;color:var(--cc-blue) !important;}
.cc-faq.cc-outline-extra{margin-top:0;}
.cc-faq.cc-outline-extra[hidden]{display:none;}
.cc-outline-toggle-wrap{text-align:center;margin-top:24px;}
.cc-outline-toggle-wrap .cc-btn{padding:11px 28px;}

/* ---------- related training ---------- */
/* Previously tried to break out of .cc-main's 900px cap with the
   100vw/negative-margin "full-bleed" trick for more room per card.
   That broke when embedded inside Elementor: Elementor wraps sections
   in a container that typically has overflow:hidden, which clips the
   "extra" width the trick tries to claim instead of letting it
   expand — the section then renders as if it has more space than it
   actually gets, so the 4 real cards bunch up on the left with a
   large empty gap on the right.
   This instead reclaims .cc-main's own 40px side padding for just
   this section (margin:0 -40px), which is a completely safe move —
   it never asks for space beyond .cc-main's own actual box, so there
   is no ancestor/viewport dependency to break. It gets this section
   from ~820px up to the full ~900px .cc-main provides, without any
   breakout risk. */
.cc-related-section{margin-bottom:48px;}
.cc-related-header{text-align:center;margin-bottom:28px;}
.cc-related-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--cc-blue);margin-bottom:8px;}
.cc-related-title{font-family:var(--cc-font);font-size:28px;font-weight:700;color:var(--cc-ink);letter-spacing:-.4px;}
/* WooCommerce's own related.php template prints its own unstyled
   "<h2>Related products</h2>" heading inside the ".related.products"
   wrapper it outputs — separate from, and directly below, our own
   "Continue Your Learning Journey" title above. It carries no theme
   styling at all, which is why it showed up as plain, oversized
   serif-ish text. We already have our own heading for this section,
   so WooCommerce's native one is hidden rather than restyled. */
.cc-related-section .related.products > h2{display:none;}
/* flex + justify-content:center (not a fixed grid-template-columns)
   on purpose: with a 4-column grid, if fewer than 4 related products
   exist for a given product, the grid still reserves 4 slots, so the
   real cards bunch up on the left with empty space on the right
   instead of centering as a group. Flex-wrap centers whatever number
   of cards actually renders — 2, 3, or 4 — as one balanced row. */
.cc-related-section ul.products{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;list-style:none;margin:0;padding:0;}
.cc-related-section ul.products li.product{background:var(--cc-paper);border:1px solid var(--cc-line);border-radius:12px;padding:24px;display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 260px;max-width:270px;}
.cc-related-section ul.products li.product img{border-radius:8px;margin-bottom:14px;aspect-ratio:1;object-fit:cover;background:#F0F3F7;width:100%;}
.cc-related-section ul.products li.product h2,
.cc-related-section ul.products li.product h3{font-size:14px;font-weight:600;color:var(--cc-ink);margin-bottom:8px;line-height:1.35;}
.cc-related-section ul.products li.product .price{font-size:15px;font-weight:600;color:var(--cc-ink);margin-bottom:14px;display:block;}
.cc-related-section ul.products li.product .button{margin-top:auto;align-self:center;padding:10px 18px;background:var(--cc-blue);color:#fff;border-radius:6px;font-size:13px;font-weight:600;text-decoration:none;}
.cc-related-section ul.products li.product .button:hover{background:var(--cc-blue-hover);}
.cc-related-section ul.products li.product .onsale{background:var(--cc-orange);color:#fff;font-size:10px;font-weight:600;padding:3px 8px;border-radius:4px;margin-bottom:8px;display:inline-block;}

/* ---------- bottom cta ---------- */
.cc-cta{background:var(--cc-soft-blue);border:1px solid #D0E0F0;border-radius:10px;padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:16px;}
.cc-cta h2{font-size:18px;font-weight:700;color:var(--cc-ink);margin-bottom:4px;}
.cc-cta p{font-size:14px;color:var(--cc-grey);margin:0;}
.cc-cta .cc-btn{flex-shrink:0;padding:12px 22px;font-size:14px;}

@media (max-width:760px){
  .cc-hero-inner,.cc-main{padding-left:20px;padding-right:20px;}
  .cc-hero h1{font-size:26px;}
  .cc-hero-promo{font-size:26px;}
  .cc-included-grid,.cc-outline-grid,.cc-why-grid{grid-template-columns:1fr;}
  .cc-dates-header,.cc-date-row{grid-template-columns:1fr;gap:4px;}
  .cc-dates-header{display:none;}
  .cc-date-row{padding:16px 20px;}
  .cc-date-actions{justify-content:flex-start;margin-top:6px;}
  .cc-facts{flex-direction:column;align-items:flex-start;gap:20px;}
  .cc-facts-left{max-width:100%;padding-right:0;border-right:none;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:16px;width:100%;}
  .cc-facts-grid{grid-template-columns:1fr 1fr;width:100%;}
  .cc-related-section ul.products li.product{flex:1 1 45%;max-width:none;}
  .cc-related-title{font-size:24px;}
  .cc-cta{flex-direction:column;text-align:center;}
  .cc-tabs-box ul.tabs{flex-wrap:wrap;padding:8px 8px 0;}
  .cc-tabs-box ul.tabs li a{padding:10px 14px;font-size:13px;margin-top:0;}
  .cc-tabs-box .woocommerce-Tabs-panel{padding:20px !important;}
  .cc-tabs-title{font-size:24px;}
  .cc-section-title{font-size:22px;}
  .cc-faq{grid-template-columns:1fr;gap:0;}
  .cc-help-banner{padding:22px 20px;}
  .cc-help-banner h2{font-size:22px;}
}

/* ---------- floating dates widget ---------- */
/* Fixed to the left edge of the viewport so it stays on screen while
   scrolling, showing only the dates from "Upcoming Sessions" as
   quick jump links to the real table at #schedule. Only shown above
   1400px viewport width — below that there isn't reliable clear
   margin space next to the ~1210px main content column (.cc-main's
   1100px max-width + its 40px side padding, x the 1.1 zoom applied to
   .cc-product), so hiding it there is what keeps it from ever
   overlapping page content on narrower/laptop screens. */
.cc-floating-dates{
  position:fixed;left:110px;top:300px;width:190px;max-height:340px;
  overflow:hidden;background:var(--cc-paper);border:1px solid var(--cc-line);
  border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.14);
  z-index:40;transition:width .25s ease;
  /* Entrance effect: slides in from the left and fades in shortly
     after the page loads, instead of just appearing instantly. */
  animation:cc-floating-dates-in .55s cubic-bezier(.22,1,.36,1) .35s both;
}
@keyframes cc-floating-dates-in{
  from{opacity:0;transform:translateX(-24px);}
  to{opacity:1;transform:translateX(0);}
}
.cc-floating-dates-title{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:#fff;background:var(--cc-orange);position:relative;
  padding:12px 34px 12px 16px;border-radius:9px 9px 0 0;text-align:center;
}
.cc-floating-dates-title-text{display:block;}
/* Optional per-product subtitle (see "floating_dates_subtitle" ACF
   field) shown right under the "Upcoming Sessions" label — normal
   case/weight and slightly translucent so it reads as a secondary
   line rather than competing with the title above it. */
.cc-floating-dates-subtitle{
  display:block;font-size:11px;font-weight:500;text-transform:none;
  letter-spacing:normal;opacity:.85;margin-top:3px;line-height:1.3;
}
.cc-floating-dates.cc-collapsed .cc-floating-dates-subtitle{display:none;}
.cc-floating-dates-body{max-height:calc(340px - 44px);overflow-y:auto;padding:2px 16px 12px;}
/* Collapse/expand tab — a small round button on the title bar. Click
   toggles .cc-collapsed on the parent, which hides the body and title
   text and shrinks the whole widget down to just this button, so it
   takes up almost no space when someone doesn't want it on screen but
   don't want to lose it either. The chosen state is remembered in
   localStorage (see setupFloatingDatesToggle() in
   single-product-redesign.js) so it stays collapsed/expanded as the
   shopper moves between product pages, instead of resetting itself
   on every page load. */
.cc-floating-dates-toggle{
  position:absolute !important;top:9px !important;right:8px !important;
  width:24px !important;height:24px !important;min-width:0 !important;min-height:0 !important;
  border-radius:50% !important;background:rgba(255,255,255,.25) !important;
  border:none !important;outline:none !important;box-shadow:none !important;
  color:#fff !important;cursor:pointer;margin:0 !important;padding:0 !important;
  display:flex !important;align-items:center;justify-content:center;
  font-size:15px !important;line-height:1 !important;font-weight:400 !important;
  text-transform:none !important;letter-spacing:normal !important;
  transition:background .15s;
}
.cc-floating-dates-toggle-icon{display:block;pointer-events:none;}
.cc-floating-dates-toggle:hover{background:rgba(255,255,255,.4) !important;}
.cc-floating-dates.cc-collapsed{width:44px;}
.cc-floating-dates.cc-collapsed .cc-floating-dates-title{
  padding:12px 8px;border-radius:9px;
}
.cc-floating-dates.cc-collapsed .cc-floating-dates-title-text{display:none;}
.cc-floating-dates.cc-collapsed .cc-floating-dates-body{display:none;}
.cc-floating-dates.cc-collapsed .cc-floating-dates-toggle{
  position:static !important;margin:0 auto !important;background:rgba(255,255,255,.3) !important;
}
.cc-floating-dates-list{list-style:none;margin:0;padding:0;}
.cc-floating-dates-list li{border-bottom:1px solid var(--cc-line);}
.cc-floating-dates-list li:last-child{border-bottom:none;}
.cc-floating-dates-list a{display:block;padding:8px 2px;font-size:13px;font-weight:600;color:var(--cc-ink);text-decoration:none;line-height:1.3;}
.cc-floating-dates-list a:hover{color:var(--cc-blue);}
@media (max-width:1400px){
  .cc-floating-dates{display:none;}
}

/* ---------- floating "Get Quote" button ---------- */
/* bottom:190px is a deliberate guess at clearing the existing "Back
   to Top" button and chat-widget bubble stacked in that corner (both
   come from other plugins/theme features, not this package, so their
   exact heights aren't something this CSS can know for certain) — it
   may need a small adjustment once checked against the live site. */
.cc-floating-quote-btn{
  position:fixed;right:24px;bottom:190px;z-index:60;
  background:var(--cc-orange);color:#fff;font-size:14px;font-weight:700;
  padding:14px 26px;border-radius:100px;text-decoration:none;
  box-shadow:0 8px 20px rgba(0,0,0,.25);transition:transform .15s,box-shadow .15s;
}
.cc-floating-quote-btn:hover{background:var(--cc-orange-hover);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.3);color:#fff;}
@media (max-width:760px){
  .cc-floating-quote-btn{right:16px;bottom:160px;padding:12px 20px;font-size:13px;}
}