/* ============================================================
   ComedySpeaker.com — Main Stylesheet
   ============================================================ */

:root {
  --cs-navy:            #1B2A4A;
  --cs-navy-dark:       #111B30;
  --cs-brand-text:      #b8c5d6;
  --cs-gold:            #F5C518;
  --cs-gold-hover:      #e0b000;
  --cs-link-hover:      #E63946;
  --cs-brand-comedy:    #F5C518;
  --cs-brand-speaker:   #ffffff;
  --cs-brand-dotcom:    #F5C518;
  --cs-red:             #E63946;
  --cs-light-bg:        #F4F6F9;
  --cs-text:            #212529;
  --cs-muted:           #6c757d;
  --cs-border:          #dee2e6;
  --cs-white:           #ffffff;
  --cs-radius:          10px;
  --cs-radius-lg:       16px;
  --cs-shadow:          0 4px 20px rgba(0,0,0,0.08);
  --cs-shadow-lg:       0 8px 40px rgba(0,0,0,0.12);
}

/* ---- BASE ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--cs-text);
  background: var(--cs-light-bg);
  line-height: 1.6;
}

a { color: var(--cs-navy); }
a:hover { color: var(--cs-link-hover); }

h1, h2, h3, h4, h5, h6 { font-weight: 700; }

.cs-main { min-height: 70vh; }

/* ---- COLORS ---- */
.bg-navy       { background-color: var(--cs-navy) !important; }
.bg-navy-dark  { background-color: var(--cs-navy-dark) !important; }
.bg-gold       { background-color: var(--cs-gold) !important; }
.text-gold     { color: var(--cs-gold) !important; }
.text-navy     { color: var(--cs-navy) !important; }
.text-red      { color: var(--cs-red) !important; }

/* ---- BUTTONS ---- */
.btn-gold {
  background-color: var(--cs-gold);
  color: var(--cs-navy-dark);
  font-weight: 700;
  border: none;
  transition: background 0.2s, transform 0.15s;
}
.btn-gold:hover {
  background-color: var(--cs-gold-hover);
  color: var(--cs-navy-dark);
  transform: translateY(-1px);
}
.btn.btn-green {
  background-color: #198754;
  color: #fff;
  font-weight: 700;
  border: none;
  transition: background 0.2s, transform 0.15s;
}
.btn.btn-green:hover,
.btn.btn-green:focus,
.btn.btn-green:active {
  background-color: #146c43;
  color: #fff;
  transform: translateY(-1px);
}
.btn-navy {
  background-color: var(--cs-navy);
  color: #fff;
  font-weight: 600;
  border: none;
}
.btn-navy:hover { background-color: var(--cs-navy-dark); color: #fff; }
.btn-outline-navy {
  border: 1px solid var(--cs-navy);
  color: var(--cs-navy);
  font-weight: 600;
  background: transparent;
}
.btn-outline-navy:hover {
  background-color: var(--cs-navy);
  color: #fff;
}
.btn-outline-gold {
  border: 2px solid var(--cs-gold);
  color: var(--cs-gold);
  font-weight: 600;
}
.btn-outline-gold:hover {
  background: var(--cs-gold);
  color: var(--cs-navy-dark);
}

/* ---- NAVBAR ---- */
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  font-size: 1rem;
  padding: 0.4rem 0.65rem;
  transition: color 0.2s;
}
.navbar-dark .navbar-nav .nav-link:hover { color: var(--cs-gold); }

/* Below the lg breakpoint the navbar collapses into a stacked mobile menu (#mainNav).
   The user-icon dropdown defaults to Bootstrap/Popper's position:absolute — inside a
   scrollable #mainNav that clips it at the scroll boundary instead of letting it flow
   normally, so content below "My Dashboard" (Edit Profile, Messages, Log Out, etc.)
   could never be reached no matter how much padding/scroll room #mainNav itself got.
   Force the dropdown to render in normal document flow on mobile (Bootstrap's own
   documented fix for dropdowns inside a collapsed navbar — equivalent to the
   data-bs-display="static" toggle option) so it just pushes content down like any
   other stacked menu item, and #mainNav's own scroll naturally reaches all of it. */
@media (max-width: 991.98px) {
  .navbar-dark .navbar-nav .nav-link { padding: 0.25rem 0.65rem; }
  #mainNav {
    /* 100vh is the LARGEST possible mobile viewport (browser chrome hidden) — sizing
       against it leaves the last item physically rendered under the browser's own
       address bar/toolbar even when fully scrolled. 100dvh tracks the actual visible
       area; the vh rule above it is the fallback for browsers without dvh support. */
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 40px));
  }
  #mainNav .dropdown-menu {
    position: static !important;
    transform: none !important;
    max-height: none;
    overflow-y: visible;
    margin-top: .25rem;
  }
}
.navbar-brand { font-size: 1.4rem; letter-spacing: -0.5px; }

/* ---- HERO ---- */
.hero {
  background: linear-gradient(135deg, var(--cs-navy-dark) 0%, var(--cs-navy) 50%, #2a3f6b 100%);
  color: #fff;
  padding: 32px 0 28px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(245,197,24,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.2;
  font-weight: 800;
}
.hero p.lead { font-size: clamp(1rem, 2.5vw, 1.25rem); opacity: 0.9; }
.hero-search {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border-radius: var(--cs-radius-lg);
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.15);
}
.hero-search .form-control, .hero-search .form-select {
  border: none;
  background: rgba(255,255,255,0.95);
  padding: 0.45rem 0.75rem;
  font-size: .875rem;
}
.hero-stats {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.hero-stat strong { font-size: 1.8rem; color: var(--cs-gold); display: block; line-height: 1; }
.hero-stat span   { font-size: 0.85rem; opacity: 0.75; }

/* ---- SECTION TITLES ---- */
.section-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--cs-navy);
  margin-bottom: 0.5rem;
}
.section-sub {
  color: var(--cs-muted);
  font-size: 1.05rem;
  margin-bottom: 2rem;
}
.section-divider {
  width: 60px;
  height: 4px;
  background: var(--cs-gold);
  border-radius: 2px;
  margin: 0.5rem 0 1.5rem;
}

/* ---- SPEAKER CARDS ---- */
.speaker-card {
  background: var(--cs-white);
  border-radius: var(--cs-radius-lg);
  overflow: hidden;
  box-shadow: var(--cs-shadow);
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid var(--cs-border);
  height: 100%;
}
.speaker-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cs-shadow-lg);
}
.speaker-card .speaker-photo {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  object-position: top center;
}
.speaker-card .speaker-photo-placeholder {
  width: 100%;
  aspect-ratio: 3/2;
  background: linear-gradient(135deg, #e8edf5, #d0d9e8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--cs-navy);
  opacity: 0.4;
}
.speaker-card .card-body { padding: 0.85rem; }
.speaker-card .speaker-name { font-size: 1rem; font-weight: 700; margin-bottom: 0.2rem; }
.speaker-card .speaker-types { font-size: 0.68rem; color: var(--cs-muted); margin-bottom: 0.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.speaker-card .speaker-location { font-size: 0.75rem; color: var(--cs-muted); }
.speaker-card .speaker-fee { font-weight: 700; color: var(--cs-navy); font-size: 0.88rem; }
.speaker-card .tier-badge { position: absolute; top: 10px; right: 10px; }
.speaker-card .featured-ribbon {
  position: absolute;
  top: 14px;
  left: -28px;
  background: var(--cs-gold);
  color: var(--cs-navy-dark);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 32px;
  transform: rotate(-45deg);
  letter-spacing: 0.5px;
}
.speaker-card-wrapper { position: relative; overflow: hidden; border-radius: var(--cs-radius-lg); }

/* ---- FAV TOGGLE BUTTON ---- */
.fav-toggle-btn {
  top: 8px;
  right: 8px;
  z-index: 10;
  background: rgba(255,255,255,.92);
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  cursor: pointer;
  transition: transform .15s;
}
.fav-toggle-btn i { font-size: 1rem; color: #adb5bd; pointer-events: none; }
.fav-toggle-btn.is-saved i { color: #dc3545; }
.fav-toggle-btn:hover { transform: scale(1.2); background: #fff; }
.fav-toggle-btn:hover i { color: #dc3545; }

/* ---- FEATURED BANNER (top strip on search cards) ---- */
.speaker-card-featured-banner {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--cs-gold);
  color: var(--cs-navy-dark);
  font-size: 0.7rem;
  font-weight: 800;
  text-align: center;
  padding: 2px;
  letter-spacing: 1px;
  z-index: 2;
}

/* ---- SPEAKER SHORT BIO (search cards) ---- */
.speaker-short-bio {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: 0.72rem;
  color: var(--cs-muted);
  margin: 0.25rem 0 0;
}

/* ---- TYPE GRID TILE (comedy types / event types grids) ---- */
.cs-type-tile {
  text-align: center;
  padding: 0.75rem;
  background: var(--cs-white);
  border-radius: var(--cs-radius);
  border: 1px solid var(--cs-border);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.cs-type-tile:hover { border-color: var(--cs-gold); transform: translateY(-2px); }
.cs-type-tile.cs-type-tile-gold:hover { background: #fffdf0; }
.cs-type-tile i { font-size: 1.5rem; }
.cs-type-tile span { font-size: 0.85rem; font-weight: 600; color: var(--cs-navy); }

/* ---- PROFILE PAGE ---- */
.profile-header {
  background: linear-gradient(135deg, var(--cs-navy-dark), var(--cs-navy));
  color: #fff;
  padding: 3rem 0 2rem;
}
.profile-photo-lg {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--cs-gold);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.profile-photo-placeholder {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  border: 4px solid var(--cs-gold);
}
.profile-name { font-size: 2.2rem; font-weight: 800; }
.profile-card {
  background: var(--cs-white);
  border-radius: var(--cs-radius-lg);
  padding: 1.75rem;
  box-shadow: var(--cs-shadow);
  margin-bottom: 1.5rem;
}
.profile-card h4 {
  color: var(--cs-navy);
  border-bottom: 2px solid var(--cs-gold);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

/* ---- VIDEO GRID ---- */
.video-thumb {
  position: relative;
  border-radius: var(--cs-radius);
  overflow: hidden;
  cursor: pointer;
  background: #000;
}
.video-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; opacity: 0.85; }
.video-thumb .play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-thumb .play-btn i {
  font-size: 3.5rem;
  color: rgba(255,255,255,0.9);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
  transition: transform 0.2s;
}
.video-thumb:hover .play-btn i { transform: scale(1.15); }

/* ---- TESTIMONIALS ---- */
.testimonial-card {
  background: var(--cs-white);
  border-radius: var(--cs-radius);
  padding: .75rem 1rem;
  border-left: 3px solid var(--cs-gold);
}
.testimonial-quote { font-size: .92rem; font-style: italic; color: #555; margin-bottom: .4rem; line-height: 1.55; }
.testimonial-quote::before { content: '\201C'; font-size: 1.2rem; color: var(--cs-gold); line-height: 0; vertical-align: -0.4em; margin-right: 2px; }
.testimonial-author { font-weight: 700; font-size: .82rem; color: var(--cs-navy); display: inline; }
.testimonial-title  { font-size: .82rem; color: var(--cs-muted); display: inline; }

/* ---- PRICING ---- */
.pricing-card {
  background: var(--cs-white);
  border-radius: var(--cs-radius-lg);
  padding: 2.5rem 2rem;
  box-shadow: var(--cs-shadow);
  border: 2px solid var(--cs-border);
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
  height: 100%;
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--cs-shadow-lg); }
.pricing-card.featured {
  border-color: var(--cs-gold);
  background: linear-gradient(180deg, #fffdf0 0%, #fff 100%);
}
.pricing-card .popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cs-gold);
  color: var(--cs-navy-dark);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 18px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}
.pricing-card .price-amount { font-size: 2.5rem; font-weight: 800; color: var(--cs-navy); line-height: 1; }
.pricing-card .price-period { font-size: 0.9rem; color: var(--cs-muted); }
.pricing-card .feature-list { list-style: none; padding: 0; }
.pricing-card .feature-list li { padding: 0.4rem 0; font-size: 0.95rem; }
.pricing-card .feature-list li i { width: 20px; margin-right: 6px; }
.pricing-card .feature-list li .bi-check-circle-fill { color: #28a745; }
.pricing-card .feature-list li .bi-x-circle-fill      { color: #dc3545; }

/* ---- DASHBOARD ---- */
.dash-stat-card {
  background: var(--cs-white);
  border-radius: var(--cs-radius-lg);
  padding: .6rem .75rem;
  box-shadow: var(--cs-shadow);
  border-left: 3px solid var(--cs-navy);
  text-align: center;
  transition: box-shadow .2s, transform .2s;
}
.dash-stat-card.gold  { border-left-color: var(--cs-gold); }
.dash-stat-card.red   { border-left-color: var(--cs-red); }
.dash-stat-card.green { border-left-color: #28a745; }

/* Attention state — used when action is required */
@keyframes dash-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,53,69,.4), var(--cs-shadow); }
  60%      { box-shadow: 0 0 0 8px rgba(220,53,69,.0), var(--cs-shadow); }
}
.dash-stat-card.attention {
  border-left: 4px solid #dc3545;
  background: linear-gradient(135deg,#fff5f5,#fff);
  animation: dash-pulse 2s ease-in-out infinite;
}
.dash-stat-card.attention .dash-stat-number { color: #dc3545; }
.dash-stat-card.attention-warning {
  border-left: 4px solid #f5a623;
  background: linear-gradient(135deg,#fffbea,#fff);
}
.dash-stat-card.attention-warning .dash-stat-number { color: #856404; }

/* Section cards that need attention */
.dash-section-attention {
  border: 2px solid #dc3545 !important;
  box-shadow: 0 0 0 3px rgba(220,53,69,.12) !important;
}
.dash-section-attention .dash-section-header {
  background: #dc3545 !important;
  color: #fff !important;
}
.dash-section-attention .dash-section-header h5,
.dash-section-attention .dash-section-header a,
.dash-section-attention .dash-section-header .text-navy { color: #fff !important; }
.dash-section-attention .dash-section-header .btn-outline-secondary {
  border-color: rgba(255,255,255,.6);color:#fff;
}
.dash-section-attention .dash-section-header .btn-outline-secondary:hover { background:rgba(255,255,255,.15); }

.dash-section-warning {
  border: 2px solid #f5a623 !important;
  box-shadow: 0 0 0 3px rgba(245,166,35,.12) !important;
}
.dash-section-warning .dash-section-header {
  background: #fff3cd !important;
}
.dash-section-warning .dash-section-header h5 { color: #856404 !important; }

.dash-stat-number { font-size: 1.4rem; font-weight: 800; color: var(--cs-navy); line-height: 1; }
.dash-stat-label  { font-size: 0.68rem; color: var(--cs-muted); margin-top: 0.2rem; line-height:1.2; }

.dash-sidebar {
  background: var(--cs-white);
  border-radius: var(--cs-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--cs-shadow);
}
.dash-nav .nav-link {
  color: var(--cs-text);
  padding: 0.6rem 0.75rem;
  border-radius: var(--cs-radius);
  font-weight: 500;
  transition: background 0.15s;
}
.dash-nav .nav-link:hover, .dash-nav .nav-link.active {
  background: var(--cs-light-bg);
  color: var(--cs-navy);
}
.dash-nav .nav-link i { width: 20px; }

/* On mobile, the last dash-nav link (Close Account, etc.) sits flush against the bottom
   of the screen with no breathing room — easy to confuse with, or have it covered by,
   the mobile browser's own bottom toolbar (back/forward/share buttons) layered on top
   of the page content. env(safe-area-inset-bottom) covers notched/gesture-bar devices;
   the flat fallback covers browsers that don't support env() at all. */
@media (max-width: 991.98px) {
  .dash-nav { padding-bottom: calc(160px + env(safe-area-inset-bottom, 160px)); }
}

/* ---- FORMS ---- */
.form-card {
  background: var(--cs-white);
  border-radius: var(--cs-radius-lg);
  padding: 2rem;
  box-shadow: var(--cs-shadow);
}
.form-label { font-weight: 600; color: var(--cs-navy); }
/* Muted placeholder text — overrides Bootstrap default across the entire platform */
::placeholder {
  color: #b0b7c3 !important;
  opacity: 1 !important;
}
/* Extra specificity for Bootstrap-styled inputs */
.form-control::placeholder,
.form-select::placeholder,
input.form-control::placeholder,
textarea.form-control::placeholder {
  color: #b0b7c3 !important;
  opacity: 1 !important;
}

.form-control:focus, .form-select:focus {
  border-color: var(--cs-gold);
  box-shadow: 0 0 0 0.2rem rgba(245,197,24,0.25);
}
.tier-upgrade-notice {
  background: linear-gradient(135deg, #fff9e6, #fffdf0);
  border: 1px solid var(--cs-gold);
  border-radius: var(--cs-radius);
  padding: 1rem;
  font-size: 0.9rem;
}

/* ---- SEARCH RESULTS ---- */
.search-sidebar {
  background: var(--cs-white);
  border-radius: var(--cs-radius-lg);
  padding: 1rem;
  box-shadow: var(--cs-shadow);
  position: sticky;
  top: 80px;
}
.search-sidebar h5 { font-size: 0.9rem; }
.search-sidebar .form-label { font-size: 0.78rem; margin-bottom: 0.2rem; }
.search-sidebar .mb-3 { margin-bottom: 0.6rem !important; }
.search-sidebar .form-control,
.search-sidebar .form-select { font-size: 0.8rem; padding: 0.3rem 0.55rem; }
.search-sidebar .btn { font-size: 0.8rem; padding: 0.35rem 0.75rem; }
.search-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.filter-tag {
  background: var(--cs-light-bg);
  border: 1px solid var(--cs-border);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cs-navy);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ---- MESSAGES ---- */
.message-sidebar {
  background: var(--cs-white);
  border-radius: var(--cs-radius-lg);
  overflow: hidden;
  box-shadow: var(--cs-shadow);
  height: 70vh;
  overflow-y: auto;
}
.message-thread-item {
  padding: 1rem;
  border-bottom: 1px solid var(--cs-border);
  cursor: pointer;
  transition: background 0.15s;
}
.message-thread-item:hover, .message-thread-item.active { background: var(--cs-light-bg); }
.message-thread-item.unread .thread-subject { font-weight: 700; }
.message-area {
  background: var(--cs-white);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow);
  height: 70vh;
  display: flex;
  flex-direction: column;
}
.message-list {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}
.message-bubble {
  max-width: 75%;
  padding: 0.75rem 1rem;
  border-radius: 18px;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}
.message-bubble.sent {
  background: var(--cs-navy);
  color: #fff;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}
.message-bubble.received {
  background: var(--cs-light-bg);
  color: var(--cs-text);
  border-bottom-left-radius: 4px;
}
.message-input-area {
  padding: 1rem;
  border-top: 1px solid var(--cs-border);
}

/* ---- REVIEWS ---- */
.review-card {
  background: var(--cs-white);
  border-radius: var(--cs-radius-lg);
  padding: .75rem 1rem;
  box-shadow: var(--cs-shadow);
  margin-bottom: .75rem;
}

/* ---- ADMIN ---- */
.admin-sidebar {
  background: var(--cs-navy-dark);
  min-height: 100vh;
  padding: 1rem 0;
}
.admin-nav .nav-link {
  color: rgba(255,255,255,0.7);
  padding: 0.28rem 0.75rem;
  font-size: 0.8rem;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.admin-nav .nav-link:hover, .admin-nav .nav-link.active {
  color: var(--cs-gold);
  background: rgba(255,255,255,0.05);
}
.admin-nav .nav-link i { width: 16px; font-size: 0.82rem; flex-shrink: 0; }
.admin-nav .nav-link .badge { margin-left: auto; font-size: .6rem; padding: .22em .45em; }
.admin-nav hr { border-color: rgba(255,255,255,0.1); margin: .4rem 0; }
.admin-content { padding: 2rem; }

/* Same fix as .dash-nav (speaker/planner dashboards) — the last admin-nav link sits
   flush against the bottom of the screen on mobile with no breathing room, easily
   covered by the mobile browser's own bottom toolbar. */
@media (max-width: 991.98px) {
  .admin-nav { padding-bottom: calc(160px + env(safe-area-inset-bottom, 160px)); }
}
.admin-header { color: var(--cs-navy); margin-bottom: 2rem; }
.admin-table th { background: var(--cs-light-bg); font-weight: 700; color: var(--cs-navy); font-size: 0.85rem; }
.admin-card { background: #fff; border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); padding: 1.25rem; box-shadow: 0 1px 4px rgba(0,0,0,.06); }

/* ---- BREADCRUMB ---- */
.breadcrumb-nav {
  background: var(--cs-white);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--cs-border);
  font-size: 0.85rem;
}
.breadcrumb-item a { color: var(--cs-navy); text-decoration: none; }
.breadcrumb-item.active { color: var(--cs-muted); }

/* ---- HELP PAGES ---- */
.help-sidebar { position: sticky; top: 80px; }
.help-toc .nav-link {
  color: var(--cs-muted);
  font-size: 0.9rem;
  padding: 0.35rem 0;
  border-left: 2px solid transparent;
  padding-left: 0.75rem;
}
.help-toc .nav-link:hover, .help-toc .nav-link.active {
  color: var(--cs-navy);
  border-left-color: var(--cs-gold);
}
.help-article h2 { color: var(--cs-navy); margin-top: 2rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--cs-gold); }
.help-article h3 { color: var(--cs-navy); margin-top: 1.5rem; }
.faq-item { border: 1px solid var(--cs-border); border-radius: var(--cs-radius); overflow: hidden; margin-bottom: 0.5rem; }
.faq-question { background: var(--cs-white); padding: 1rem 1.25rem; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.faq-question:hover { background: var(--cs-light-bg); }
.faq-answer { padding: 1rem 1.25rem; background: var(--cs-light-bg); font-size: 0.95rem; }

/* ---- HOME — HOW IT WORKS ---- */
.how-step { text-align: center; padding: 2rem 1.5rem; }
.how-step .step-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--cs-navy), #2a3f6b);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 2rem;
  color: var(--cs-gold);
  box-shadow: 0 4px 16px rgba(27,42,74,0.3);
}
.how-step h4 { font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--cs-navy); }
.how-step p  { font-size: 0.9rem; color: var(--cs-muted); }

/* ---- CTA BAND ---- */
.cta-band {
  background: linear-gradient(135deg, var(--cs-navy-dark), var(--cs-navy));
  color: #fff;
  padding: 5rem 0;
  text-align: center;
}
.cta-band h2 { font-size: 2.2rem; font-weight: 800; margin-bottom: 1rem; }
.cta-band p  { opacity: 0.85; font-size: 1.1rem; margin-bottom: 2rem; }

/* ---- BADGES / STATUS ---- */
.status-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.status-pending  { background: #fff3cd; color: #856404; }
.status-active   { background: #d1e7dd; color: #0f5132; }
.status-confirmed{ background: #cff4fc; color: #055160; }
.status-completed{ background: #d1e7dd; color: #0f5132; }
.status-cancelled{ background: #f8d7da; color: #842029; }
.status-declined { background: #f8d7da; color: #842029; }
.status-suspended{ background: #e2e3e5; color: #383d41; }

/* ---- NOTIFICATION BELL ---- */
.notif-badge {
  position: absolute;
  top: 2px;
  right: -2px;
  width: 10px;
  height: 10px;
  background: var(--cs-red);
  border-radius: 50%;
  border: 2px solid var(--cs-navy);
}

/* ---- MODALS ---- */
.modal-header { background: var(--cs-navy); color: #fff; }
.modal-header .modal-title { color: #fff !important; }
.modal-header .btn-close { filter: invert(1); }

/* ---- PHOTO UPLOAD ---- */
.photo-upload-area {
  border: 2px dashed var(--cs-border);
  border-radius: var(--cs-radius);
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s;
}
.photo-upload-area:hover { border-color: var(--cs-gold); }
.photo-upload-area img { max-width: 150px; max-height: 150px; object-fit: cover; border-radius: 50%; }

/* ---- COMMISSION SPLIT VISUAL ---- */
.split-bar {
  height: 28px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
}
.split-bar .speaker-side { background: var(--cs-navy); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.8rem; font-weight: 700; }
.split-bar .site-side    { background: var(--cs-gold);  display: flex; align-items: center; justify-content: center; color: var(--cs-navy-dark); font-size: 0.8rem; font-weight: 700; }

/* ---- FOOTER ---- */
.cs-footer { background: var(--cs-navy); }
.cs-footer, .cs-footer .footer-text { color: var(--cs-brand-text); }
.cs-footer h5, .cs-footer h6 { color: var(--cs-gold); }
.cs-footer .footer-link { color: var(--cs-brand-text); text-decoration: none; transition: color .15s; }
.cs-footer .footer-link:hover { color: var(--cs-gold); }
.cs-footer .footer-social { color: var(--cs-brand-text); font-size: 1.25rem; transition: color .15s; }
.cs-footer .footer-social:hover { color: var(--cs-gold); }
.cs-footer .footer-divider { border-color: rgba(255,255,255,.12) !important; }
.cs-footer .footer-copy { color: var(--cs-brand-text); opacity: .7; }

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  /* iOS Safari auto-zooms the page when a focused input's font-size is under 16px —
     Bootstrap's *-sm form controls default to 14px, so bump them back up on mobile. */
  .form-control-sm, .form-select-sm { font-size: 1rem; }

  .hero { padding: 22px 0 18px; }
  .hero h1 { font-size: 1.75rem; }
  .hero-stats { gap: 1rem; }
  .profile-name { font-size: 1.6rem; }
  .section-title { font-size: 1.6rem; }
  .cta-band h2 { font-size: 1.7rem; }
  .message-area { height: 60vh; }
  .message-sidebar { height: auto; max-height: 300px; }
  .search-sidebar { position: static !important; top: auto; }
}

@media (max-width: 575px) {
  /* Hero */
  .hero { padding: 18px 0 14px; }
  .hero h1 { font-size: 1.55rem; line-height: 1.25; }
  .hero p.lead { font-size: 0.95rem; }
  .hero-stats { gap: 0.75rem; flex-wrap: nowrap; }
  .hero-stat strong { font-size: 1.35rem; }
  .hero-stat span { font-size: 0.75rem; }
  .hero-search { padding: 1rem; }

  /* Speaker profile header — stack vertically & center */
  .profile-header .row { flex-direction: column; }
  .profile-header .col-auto,
  .profile-header .col,
  .profile-header .col-md-3 { width: 100% !important; text-align: center; }
  .profile-header .d-flex { justify-content: center; }
  .profile-photo-lg {
    width: 110px;
    height: 110px;
  }
  .profile-photo-placeholder {
    width: 110px;
    height: 110px;
    font-size: 3.5rem;
    margin: 0 auto;
  }
  .profile-name { font-size: 1.4rem; }

  /* Sections */
  .section-title { font-size: 1.4rem; }
  .cta-band { padding: 3rem 0; }
  .cta-band h2 { font-size: 1.5rem; }
  .cta-band p { font-size: 0.95rem; }

  /* How-it-works steps */
  .how-step { padding: 1.25rem 1rem; }
  .how-step .step-icon { width: 60px; height: 60px; font-size: 1.5rem; }
}

/* ---- ANIMATIONS ---- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.4s ease forwards; }

/* ---- PRINT ---- */
.print-logo { display: none; }   /* hidden on screen — only shown when printing */
@media print {
  .navbar, footer, .cs-footer, .breadcrumb-nav, .dash-sidebar, .no-print,
  .modal, .offcanvas, .toast-container { display: none !important; }
  .print-logo { display: block !important; position: fixed; top: 8px; right: 12px; z-index: 9999; }
  body { background: #fff !important; }
  .container { max-width: 100% !important; }
  .card, .shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }
  a { text-decoration: none !important; color: inherit !important; }
}