/* =========================================================
   HAPPYMILEZ v2 — theme layer on top of Bootstrap 5.
   Bootstrap supplies the grid/breakpoints/components; this file
   only supplies brand colors, type, and the custom look of each
   component. Mobile-first — Bootstrap's own breakpoints
   (576 / 768 / 992 / 1200 / 1400) drive all responsive behavior.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700;1,800;1,900&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --black:        #000000;
  --bg:           #0a0a0a;
  --bg-header:    #090909;
  --bg-page:      #0c0d0d;
  --surface:      #1c1c1d;
  --surface-2:    #1f1f1f;
  --surface-3:    #262626;
  --border-subtle: rgba(255,255,255,.09);
  --border-orange: rgba(246,139,9,.45);

  --accent:       #f68b09;
  --accent-dark:  #d97906;
  --accent-light: #ffb655;
  --bs-primary:   #f68b09;

  --beige:        #fae8d3;
  --brown-card:   #7e4a0c;

  --footer-top:   #17191e;
  --footer-bot:   #33200a;

  --white:        #ffffff;
  --text:         #f5f5f5;
  --text-dim:     #b7b7b7;
  --text-muted:   #8a8a8a;
  --text-on-beige:#1a1a1a;

  --green:        #35c46a;

  --font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-card: 0 10px 30px rgba(0,0,0,.35);
}

body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; }
a{ color:inherit; text-decoration:none; }
a:hover{ color:inherit; }
h1,h2,h3,h4,h5{ font-family: var(--font-display); font-weight:900; text-transform:uppercase; letter-spacing:.01em; margin:0; }
p{ margin:0; }

.text-accent{ color: var(--accent) !important; }
.text-accent-italic{ color: var(--accent); font-style:italic; }
.text-accent-outline{ color:transparent; -webkit-text-stroke:1.5px var(--accent); text-stroke:1.5px var(--accent); font-style:italic; }
.text-dim{ color: var(--text-dim) !important; }
.text-muted-2{ color: var(--text-muted) !important; }
.bg-page{ background: var(--bg-page); }
.bg-surface{ background: var(--surface); }
.section-title{ font-size: clamp(1.6rem, 3vw, 2.1rem); }

/* =========================== buttons =========================== */
.btn-accent{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:.85rem 1.75rem; border-radius: 10px;
  font-weight:600; border:none; white-space:nowrap; background: var(--accent); color:#fff;
  transition: transform .15s ease, background .15s ease;
}
.btn-accent:hover{ background: var(--accent-light); color:#fff; transform:translateY(-1px); }
.btn-outline-accent{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:.85rem 1.75rem; border-radius: 10px;
  font-weight:600; background:transparent; color: var(--white); border:1.5px solid var(--border-orange);
}
.btn-outline-accent:hover{ border-color: var(--accent); background: rgba(246,139,9,.08); color:var(--white); }
.btn-sm-pill{ padding:.55rem 1.1rem; font-size:.9rem; }
/* full-width form-submit CTAs (e.g. Contact page "Send Message") are the one
   button style the design keeps as a true stadium pill, unlike the small
   rounded-rect radius used everywhere else. */
.btn-full-pill{ border-radius:var(--radius-pill) !important; }

/* =========================== header / nav =========================== */
.site-header{ background: var(--bg-header); border-bottom:1px solid var(--border-subtle); }
.navbar-brand{ font-family:var(--font-display); font-weight:800; font-size:1.15rem; letter-spacing:.03em; color:var(--white) !important; }
.site-header .nav-link{ font-weight:500; color:var(--text-dim) !important; font-size:.98rem; }
.site-header .nav-link:hover, .site-header .nav-link.active{ color:var(--white) !important; }
.site-header .nav-link.active{ color:var(--accent) !important; }
.nav-auth-pill{ display:flex; align-items:center; background:var(--accent); border-radius:var(--radius-pill); overflow:hidden; }
.nav-auth-pill a{ color:#fff; font-weight:600; padding:.6rem 1.1rem; font-size:.9rem; }
.nav-auth-pill span{ width:1px; align-self:stretch; background:rgba(0,0,0,.25); margin:8px 0; }
.navbar-toggler{ border:none; padding:0; }
.navbar-toggler:focus{ box-shadow:none; }
.navbar-toggler .bar{ display:block; width:24px; height:2px; background:#fff; margin:5px 0; border-radius:2px; }
.dash-topbar{ display:flex; align-items:center; gap:14px; }

/* =========================== hero (home) =========================== */
.home-hero{ position:relative; overflow:hidden; min-height:600px; display:flex; align-items:center; color:var(--white); }
.home-hero-bg{ position:absolute; top:0; right:0; height:100%; width:56%; object-fit:cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%); }
.home-hero .hero-content{ position:relative; z-index:1; padding:64px 0; }
.home-hero h1{ font-size: clamp(2.4rem, 6vw, 4rem); font-style:italic; }
.home-hero p.lead-copy{ color: var(--text-dim); font-size:1.1rem; margin-top:18px; max-width:460px; }
@media (max-width:767.98px){
  .home-hero{ min-height:0; }
  .home-hero-bg{ width:100%; left:0; opacity:.5; -webkit-mask-image:none; mask-image:none; }
  .home-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.9) 100%); }
  .home-hero .hero-content{ padding:48px 0; }
}

/* generic page hero (photo bg, dark gradient) */
.page-hero{ position:relative; overflow:hidden; color:var(--white); padding:60px 0 80px; }
.page-hero::after{ content:""; position:absolute; inset:0; z-index:0;
  background: linear-gradient(90deg, rgba(0,0,0,.9) 25%, rgba(0,0,0,.4) 65%, rgba(0,0,0,.15) 100%); }
.page-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; }
.page-hero .container, .page-hero .container-fluid{ position:relative; z-index:1; }
.page-hero h1{ font-size: clamp(2rem, 4.5vw, 3rem); }

/* search bar (shared) */
.search-bar{ display:flex; align-items:center; gap:10px; background:rgba(8,8,8,.62);
  border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-pill); padding:6px; max-width:520px; }
.search-bar .search-icon{ width:40px; height:40px; border-radius:50%; background:var(--accent); flex:none;
  display:flex; align-items:center; justify-content:center; }
.search-bar .search-icon img{ filter:brightness(0) invert(1); width:16px; height:16px; }
.search-bar input{ flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--white); font-size:.98rem; }
.search-bar input::placeholder{ color:var(--text-muted); }
.search-bar input:focus{ box-shadow:none; background:transparent; color:var(--white); }
.search-bar button.btn-accent{ border-radius:10px; flex:none; }

/* search pill (icon on right — events/listing pages) */
.search-pill{ display:flex; align-items:center; background:#3c3c3c; border:none; border-radius:var(--radius-pill);
  padding:4px 4px 4px 24px; max-width:900px; width:100%; }
.search-pill input{ flex:1; min-width:0; background:transparent; border:none; outline:none; color:#fff; font-size:1rem; }
.search-pill input::placeholder{ color:#d6d6d6; }
.search-pill input:focus{ box-shadow:none; background:transparent; color:#fff; }
.search-pill .icon{ width:44px; height:44px; border-radius:50%; background:var(--accent); flex:none;
  display:flex; align-items:center; justify-content:center; }
.search-pill .icon img{ width:16px; height:16px; filter:brightness(0) invert(1); }

/* filter bar */
.filter-bar{ display:flex; align-items:center; justify-content:flex-end; gap:16px; color:var(--text-dim); font-size:.95rem; flex-wrap:wrap; }
.filter-dd{ display:inline-flex; align-items:center; gap:8px; color:var(--text); }
.filter-dd img.ic{ width:18px; height:18px; }
.filter-dd img.caret{ width:10px; height:6px; margin-left:2px; }
.filter-divider{ width:1px; height:18px; background:var(--border-subtle); }
@media (max-width:575.98px){ .filter-bar{ justify-content:center; } }

/* =========================== public blog: category slider + search =========================== */
/* Category pills sit in a horizontally-scrollable strip with left/right nav buttons (a la a
   carousel) so an arbitrary number of categories never wraps or overflows the page -- the
   scroll buttons just nudge the strip, actual scrolling/momentum is native overflow-x. Search box
   sits underneath, centered, and both drive blog-list.js's AJAX refresh of #blogListContainer
   (see Views/Blog/Index.cshtml + _BlogListPartial.cshtml) -- no full page reload on filter/search. */
.blog-filter-bar{ display:flex; flex-direction:column; align-items:center; gap:18px; max-width:900px; margin:0 auto; }

.blog-cat-row{ display:flex; align-items:center; gap:10px; width:100%; }

.blog-cat-nav{ flex:none; width:38px; height:38px; border-radius:50%; border:1px solid var(--border-subtle);
  background:var(--surface); color:var(--text-dim); font-size:1rem; line-height:1; display:flex;
  align-items:center; justify-content:center; cursor:pointer; transition:border-color .15s ease, color .15s ease; }
.blog-cat-nav:hover{ border-color:var(--border-orange); color:var(--accent); }
.blog-cat-nav:disabled{ opacity:.35; cursor:default; }
.blog-cat-nav:disabled:hover{ border-color:var(--border-subtle); color:var(--text-dim); }

.blog-cat-scroll{ flex:1; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; }
.blog-cat-scroll::-webkit-scrollbar{ display:none; }

.blog-cat-pills{ display:inline-flex; gap:10px; padding:2px 2px; white-space:nowrap; }

.blog-cat-pill{ flex:none; white-space:nowrap; padding:10px 22px; border-radius:var(--radius-pill);
  background:var(--surface); border:1px solid var(--border-subtle); color:var(--text-dim);
  font-size:.92rem; font-weight:600; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.blog-cat-pill:hover{ border-color:var(--border-orange); color:var(--text); }
.blog-cat-pill.active{ background:var(--accent); border-color:var(--accent); color:#111; }

.blog-search-box{ position:relative; width:100%; max-width:420px; }
.blog-search-box input{ width:100%; background:var(--surface); border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill); padding:12px 46px 12px 20px; color:var(--text); font-size:.95rem; outline:none; }
.blog-search-box input:focus{ border-color:var(--border-orange); }
.blog-search-box input::placeholder{ color:var(--text-dim); }
.blog-search-box input::-webkit-search-cancel-button{ filter:invert(1); opacity:.6; }
.blog-search-icon{ position:absolute; right:18px; top:50%; transform:translateY(-50%); pointer-events:none; display:flex; }
.blog-search-icon img{ width:16px; height:16px; opacity:.6; filter:brightness(0) invert(1); }

@media (min-width:768px){
  .blog-filter-bar{ flex-direction:row; align-items:center; justify-content:center; }
  .blog-cat-row{ flex:1; min-width:0; }
  .blog-search-box{ flex:none; width:280px; }
}

/* Dims the results briefly while an AJAX refresh is in flight (blog-list.js toggles this class)
   so a slow request reads as "loading", not a frozen page. */
#blogListContainer.is-loading{ opacity:.5; pointer-events:none; transition:opacity .15s ease; }

/* =========================== event cards =========================== */
.event-card{ background:var(--black); border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  overflow:hidden; transition: transform .18s ease, border-color .18s ease; height:100%; }
.event-card:hover{ transform:translateY(-4px); border-color:var(--border-orange); }
.event-card .thumb{ aspect-ratio:4/3; overflow:hidden; }
.event-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.event-card .body{ padding:16px 18px 20px; }
.event-card h4{ font-size:1.02rem; font-weight:700; text-transform:none; letter-spacing:0; }
.event-card .meta{ display:flex; align-items:center; gap:6px; color:var(--text-muted); font-size:.82rem; margin-top:8px; flex-wrap:wrap; }
.event-card .meta img{ width:14px; height:14px; }
.event-card .meta span{ display:inline-flex; align-items:center; gap:6px; }

.event-card-white{ background:var(--white); color:#111; border-radius:var(--radius-md); overflow:hidden; height:100%; }
.event-card-white .thumb{ aspect-ratio:4/3; overflow:hidden; }
.event-card-white .thumb img{ width:100%; height:100%; object-fit:cover; }
.event-card-white .body{ padding:16px 18px 20px; }
.event-card-white h4{ font-size:1.05rem; color:#111; text-transform:none; letter-spacing:0; }
.event-card-white .date{ color:var(--accent); font-size:.85rem; margin-top:6px; font-weight:600; }
.event-card-white .price{ margin-top:10px; color:#111; font-size:.95rem; }
.event-card-white .price b{ color:var(--accent); font-size:1.15rem; }

/* Blog thumbnail override -- unlike Event photos (real photographs, where a bit of edge cropping
   from object-fit:cover is harmless), a Blog thumbnail is typically a generated "cover" graphic
   with its own headline/text baked into the image right up to the edges, and every post's cover
   comes in a slightly different aspect ratio. Forcing that into Events' fixed 4:3 cover box
   cropped words off the sides ("LONG-DISTANCE" -> "G-DISTANCE"); forcing it into any OTHER fixed
   box via object-fit:contain instead just traded that for visible white letterbox bars, since a
   fixed box can only exactly match one specific ratio. The only way to get neither artifact for
   images of varying ratios is to not force a fixed box at all -- aspect-ratio:auto + height:auto
   lets each card's image render at its own natural height, so the box always exactly matches the
   image with nothing cropped and nothing left blank (cards in the same row may end up slightly
   different heights as a result -- an acceptable tradeoff since these images already vary in
   ratio post to post). !important is needed on every property here: the markup is
   <div class="thumb blog-thumb">, so plain ".blog-thumb"/".blog-thumb img" (1-2 classes) is LOWER
   specificity than the existing ".event-card-white .thumb"/".event-card-white .thumb img" rules
   above (2-3 classes) and silently loses to them regardless of source order otherwise. */
.event-card-white .thumb.blog-thumb{ aspect-ratio:auto !important; height:auto !important; background:var(--white) !important; }
.event-card-white .thumb.blog-thumb img{ width:100% !important; height:auto !important; object-fit:unset !important; display:block; }

/* =========================== pagination (Blog + Events listings) =========================== */
/* Bootstrap's own pagination defaults (white pills, blue active state, blue link text) clash hard
   with this site's dark/orange theme -- restyled here to match the category-pill look used
   elsewhere on the public site instead. */
.pagination{ gap:8px; }
.pagination .page-link{ background:var(--surface); border:1px solid var(--border-subtle); color:var(--text-dim);
  border-radius:var(--radius-pill) !important; min-width:42px; text-align:center; padding:8px 16px;
  margin:0 !important; transition:background .15s ease, border-color .15s ease, color .15s ease; }
.pagination .page-link:hover{ background:var(--surface-2); border-color:var(--border-orange); color:var(--text); }
.pagination .page-link:focus{ box-shadow:none; }
.pagination .page-item.active .page-link{ background:var(--accent); border-color:var(--accent); color:#111; }
.pagination .page-item.disabled .page-link{ background:transparent; border-color:var(--border-subtle); color:var(--text-muted); opacity:.4; }

/* Fallback for a card whose Event has no ThumbnailImageUrl yet -- keeps the same 4:3 box instead
   of a broken/empty <img>, until the admin uploads one. */
.thumb-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:var(--surface); }
.thumb-placeholder img{ width:32px; height:32px; opacity:.5; }

/* =========================== download app band =========================== */
.download-band{ position:relative; background:var(--beige); color:var(--text-on-beige); border-radius:var(--radius-lg); overflow:hidden; }
.download-band .copy{ padding:46px; }
.download-band h2{ font-size:clamp(1.6rem, 3vw, 2.3rem); }
.download-band .copy p{ margin-top:10px; color:#3a3a3a; }
.download-band .badges{ display:flex; flex-direction:column; gap:10px; margin-top:26px; }
.download-band .badges img{ height:44px; width:auto; }
.download-band .art{ display:flex; align-items:flex-end; justify-content:center; height:100%; min-height:340px; }
.download-band .art img{ max-height:340px; width:auto; margin-top:-40px; }
@media (max-width:767.98px){
  .download-band .copy{ padding:36px 28px 6px; text-align:center; }
  .download-band .badges{ flex-direction:row; justify-content:center; }
  .download-band .art{ min-height:0; padding-bottom:16px; }
  .download-band .art img{ max-height:230px; margin-top:0; }
}

/* footer badges (stacked, smaller) */
.footer-badges{ display:flex; flex-direction:column; gap:10px; }
.footer-badges img{ width:auto; }

/* =========================== FAQ =========================== */
.faq-block{ text-align:center; }
.faq-block h2{ font-size:clamp(1.8rem,4vw,2.6rem); letter-spacing:.08em; }
.accordion-item.faq-item{ background:var(--surface); border:1px solid var(--border-subtle); position:relative;
  border-radius:10px !important; overflow:hidden; margin-bottom:12px; }
.accordion-item.faq-item::before{
  content:""; position:absolute; left:14px; top:18px; width:2px; height:20px; background:var(--accent); z-index:1;
}
.accordion-item.faq-item .accordion-button{ background:var(--surface); color:var(--text); font-weight:500; box-shadow:none;
  padding:18px 22px; }
.accordion-item.faq-item .accordion-button:not(.collapsed){ background:var(--surface); color:var(--text); }
.accordion-item.faq-item .accordion-button::after{ filter:brightness(0) saturate(100%) invert(60%) sepia(70%) saturate(3000%) hue-rotate(0deg); }
.accordion-item.faq-item .accordion-body{ color:var(--text-dim); font-size:.94rem; padding:0 22px 20px; }

/* =========================== testimonials =========================== */
.testimonial-strip{ background:var(--bg-page); padding:64px 0 40px; }
.testimonial-card{ background:linear-gradient(160deg, var(--brown-card), #4c2c08); border-radius:var(--radius-md); padding:26px; height:100%; }
.testimonial-card p{ font-size:.92rem; font-weight:600; color:#fbe9d6; line-height:1.6; }
.testimonial-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:16px; }
.testimonial-card .stars img{ height:14px; }
.testimonial-quote{ font-size:2.1rem; line-height:1; color:rgba(255,255,255,.5); font-family:Georgia,serif; }
.testimonial-person{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.testimonial-person img{ width:40px; height:40px; border-radius:50%; object-fit:cover; }
.testimonial-person .name{ font-weight:700; font-size:.92rem; }
.testimonial-person .role{ color:#e8caa5; font-size:.78rem; }
.carousel-indicators.carousel-dots{ position:static; display:flex; gap:8px; justify-content:center; margin:20px 0 0; }
.carousel-indicators.carousel-dots [data-bs-target]{
  width:8px !important; height:8px !important; padding:0; margin:0; border:none !important;
  border-radius:50%; background-color:rgba(255,255,255,.25); display:block; opacity:1;
  text-indent:-9999px; }
.carousel-indicators.carousel-dots [data-bs-target].active{ background-color:#fff; }

/* =========================== footer =========================== */
.site-footer{ background:linear-gradient(180deg, var(--footer-top) 0%, var(--footer-bot) 100%); padding:40px 0 26px; }
.footer-brand .brand-heading{ font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:1.4rem; font-style:italic; }
.footer-brand p{ color:var(--text-dim); margin-top:14px; font-size:.92rem; max-width:280px; }
.footer-col h5{ color:var(--accent); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px; font-weight:700; }
.footer-col ul{ list-style:none; padding:0; margin:0; }
.footer-col ul li{ margin-bottom:12px; }
.footer-col ul a{ color:var(--text-dim); font-size:.92rem; }
.footer-col ul a:hover{ color:var(--white); }
.footer-app p{ color:var(--text-dim); font-size:.85rem; margin:10px 0 14px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:36px; padding-top:20px; color:var(--text-muted); font-size:.82rem; text-align:center; }

/* =========================== forms =========================== */
.form-control, .form-select{ background:var(--surface); border:1px solid var(--border-subtle); color:var(--white);
  border-radius:10px; padding:.85rem 1rem; }
.form-control:focus, .form-select:focus{ background:var(--surface); border-color:var(--accent); color:var(--white); box-shadow:none; }
.form-control::placeholder{ color:var(--text-muted); }
.form-label{ font-weight:600; font-size:.92rem; margin-bottom:9px; }
/* Bootstrap's default select arrow is near-black and invisible on our dark fields — swap for a visible accent-orange chevron */
.form-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23f68b09' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; background-size:14px 10px;
}
.form-select:disabled{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 5l6 6 6-6'/%3E%3C/svg%3E"); }
/* Bootstrap/the browser's default disabled-field style is a light/near-white background —
   fine on a light page, but it renders as a jarring white box on this dark theme (e.g. the
   read-only Email/Mobile Number fields on Edit Personal Information). Keep the same dark
   surface, just dim the text a little to still read as non-editable. */
.form-control:disabled, .form-select:disabled{ background-color:var(--surface); color:var(--text-dim); opacity:1; }
/* Native <input type="date">/<input type="time"> chrome (the calendar icon + the popup
   calendar/time picker itself) is drawn by the browser, not by our CSS — by default it assumes
   a light page and renders a light/white icon swatch that looks broken here. color-scheme tells
   the browser to draw that native chrome in its dark variant instead, so the icon and the
   popup calendar itself both match the page. */
input[type="date"], input[type="time"]{ color-scheme:dark; }
/* Native <select multiple> option highlighting can't be restyled directly in most browsers;
   a background *gradient* is the one trick Chromium/Edge/Safari honor for a selected <option>,
   so this is what actually recolors the highlight to the theme's accent instead of the
   browser's default grey. */
select[multiple] option:checked{ background:linear-gradient(0deg, var(--accent) 0%, var(--accent) 100%); color:#1a0e02; }

/* auth cards (login/otp) */
.auth-wrap{ position:relative; min-height:680px; display:flex; align-items:center; overflow:hidden; }
.auth-bg{ position:absolute; inset:0; object-fit:cover; object-position:75% center; width:100%; height:100%; z-index:-1; }
.auth-card{ background:var(--surface-2); border:1.5px solid var(--border-orange); border-radius:var(--radius-lg); padding:44px 40px;
  max-width:480px; margin:60px 0 60px 8%; box-shadow:var(--shadow-card); }
.auth-card .back img{ width:20px; height:20px; filter:brightness(0) invert(1); }
.auth-card h2{ text-align:center; font-size:1.5rem; margin-top:14px; }
.auth-card .sub{ text-align:center; color:var(--text-dim); font-size:1rem; margin-top:14px; }
.auth-card .hint{ text-align:center; color:var(--text-muted); font-size:.85rem; margin-top:6px; }
.auth-card input.form-control{ border:1.5px solid rgba(255,255,255,.55); text-align:left; }
.auth-card input.form-control:focus{ border-color:var(--accent); }
.otp-inputs{ display:flex; gap:14px; justify-content:center; margin-top:26px; }
.otp-inputs input{ width:60px; height:60px; text-align:center; font-size:1.3rem; font-weight:700; border-radius:12px;
  background:#eeeeee; border:none; color:#161616; }
.btn-auth-submit{ display:flex; align-items:center; justify-content:space-between; width:100%; background:var(--accent);
  border:none; border-radius:16px; padding:8px 8px 8px 26px; color:#fff; font-weight:700; font-size:1.05rem; margin-top:28px; }
.btn-auth-submit:hover{ color:#fff; }
.btn-auth-submit .left{ display:flex; align-items:center; gap:12px; }
.btn-auth-submit .left img{ width:22px; height:22px; }
.btn-auth-submit .circle{ width:44px; height:44px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
.btn-auth-submit .circle img{ width:17px; height:17px; }
.auth-terms{ text-align:center; color:var(--text-dim); font-size:.82rem; margin-top:22px; line-height:1.7; }
.auth-terms a{ color:var(--text); text-decoration:underline; }

/* overlay / modal cards (registration, payment, ticket) */
.overlay-backdrop{ background:rgba(0,0,0,.72); min-height:100vh; padding:60px 16px; }
.overlay-card{ background:var(--surface-2); border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  max-width:940px; margin:0 auto; padding:40px 50px; box-shadow:var(--shadow-card); }
.overlay-card.narrow{ max-width:560px; }
.overlay-head{ display:flex; align-items:center; gap:16px; margin-bottom:40px; }
.overlay-head .back img{ width:20px; height:20px; filter:brightness(0) invert(1); }
.overlay-head h2{ font-size:1.5rem; flex:1; text-align:center; margin-right:22px; }
@media (max-width:575.98px){
  .overlay-card{ padding:28px 22px; }
  .overlay-head h2{ font-size:1.15rem; }
}

.pill-option{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:12px;
  border:1px solid var(--border-subtle); background:var(--surface); margin-bottom:12px; cursor:pointer; }
.pill-option.selected{ border-color:var(--accent); background:rgba(246,139,9,.08); }
.pill-option .ic{ width:36px; height:36px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; flex:none; }
.pill-option .ic img{ width:18px; height:18px; filter:brightness(0) invert(1); }
.pill-option .txt{ flex:1; }
.pill-option .txt .t{ font-weight:600; font-size:.95rem; }
.pill-option .txt .p{ color:var(--text-muted); font-size:.78rem; margin-top:2px; }
.pill-option .radio{ width:22px; height:22px; border-radius:50%; border:2px solid var(--text-muted); flex:none;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; color:transparent; }
.pill-option.selected .radio{ border-color:var(--accent); background:var(--accent); color:#fff; }

/* icon-prefixed floating-label fields (participant info + edit-profile forms) —
   the design shows a static two-line stack (small muted label, bold value below)
   inside the field, not Bootstrap's default floating/border-overlap label, so the
   floating animation is disabled and the label is pinned to the top of the field. */
.icon-field{ position:relative; margin-bottom:16px; }
.icon-field .field-ic{ position:absolute; left:16px; top:26px; transform:translateY(-50%); width:19px; height:19px; z-index:5; pointer-events:none; }
.icon-field .form-control, .icon-field .form-select{ padding-left:46px; min-height:62px; }
.icon-field textarea.form-control{ padding-top:30px; }
.icon-field textarea ~ .field-ic{ top:26px; }
.icon-field > label{ left:46px !important; color:var(--text-muted) !important; }
.icon-field.form-floating .field-ic{ top:31px; }
.icon-field.form-floating > .form-control,
.icon-field.form-floating > .form-select{ height:auto; padding-top:29px !important; padding-bottom:5px !important; line-height:1.2 !important; }
.icon-field.form-floating > label,
.icon-field.form-floating > .form-control ~ label,
.icon-field.form-floating > .form-control:focus ~ label,
.icon-field.form-floating > .form-control:not(:placeholder-shown) ~ label,
.icon-field.form-floating > .form-select ~ label{
  position:absolute !important; top:0 !important; left:46px !important; height:auto !important;
  padding:9px 0 0 !important; margin:0 !important; opacity:1 !important; transform:none !important;
  font-size:.72rem !important; font-weight:600 !important; background:transparent !important; pointer-events:none;
  transition:none !important; line-height:1 !important;
}
.gender-options{ display:flex; align-items:center; gap:22px; background:var(--surface); border:1px solid var(--border-subtle);
  border-radius:10px; padding:0 18px; min-height:62px; flex-wrap:wrap; }
.gender-options .opt{ display:flex; align-items:center; gap:8px; color:var(--text); font-size:.92rem; cursor:pointer; }
.gender-options input[type=radio]{ accent-color:var(--accent); width:16px; height:16px; }

.summary-box{ border-top:1px dashed var(--border-subtle); border-bottom:1px dashed var(--border-subtle); padding:18px 0; margin:22px 0; }
.summary-row{ display:flex; justify-content:space-between; padding:6px 0; color:var(--text-dim); font-size:.9rem; }
.summary-row.total{ color:var(--white); font-weight:700; font-size:1rem; border-top:1px solid var(--border-subtle); margin-top:8px; padding-top:14px; }
.summary-row.total b{ color:var(--accent); }

.pay-method{ display:flex; align-items:center; gap:14px; padding:15px 18px; border-radius:12px;
  border:1px solid var(--border-subtle); background:var(--surface); margin-bottom:12px; cursor:pointer; }
.pay-method.selected{ border-color:var(--accent); background:rgba(246,139,9,.08); }
.pay-method img{ width:26px; height:26px; }
.pay-method .name{ flex:1; font-weight:600; font-size:.95rem; }
.pay-method .radio{ width:20px; height:20px; border-radius:50%; border:2px solid var(--text-muted); }
.pay-method.selected .radio{ border-color:var(--accent); background:radial-gradient(var(--accent) 0 45%, transparent 50%); }
.amount-payable{ background:linear-gradient(90deg, var(--accent), #ffab33); border-radius:14px; padding:20px 22px;
  display:flex; align-items:center; gap:16px; margin-bottom:24px; color:#fff; position:relative; overflow:hidden; }
.amount-payable .ic{ width:52px; height:52px; border-radius:50%; background:rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; flex:none; z-index:1; }
.amount-payable .ic img{ width:24px; height:24px; filter:brightness(0) invert(1); }
.amount-payable::after{
  content:""; position:absolute; right:18px; top:50%; transform:translateY(-50%);
  width:120px; height:120px; pointer-events:none; opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='46' fill='none' stroke='white' stroke-width='2.5'/%3E%3Cpath d='M22 62 L22 44 L34 54 L50 30 L66 54 L78 44 L78 62 Z' fill='white'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:contain;
}

.ticket-icon{ width:100px; margin:0 auto 22px; }
.ticket-msg{ text-align:center; }
.ticket-msg .hi{ color:var(--accent); font-weight:700; }
.ticket-detail{ background:var(--surface); border-radius:12px; padding:6px 20px; margin:24px 0; }
.ticket-detail .row-line{ display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--border-subtle); font-size:.92rem; }
.ticket-detail .row-line:last-child{ border-bottom:none; }
.ticket-detail .row-line .ic{ width:36px; height:36px; border-radius:50%; border:1.5px solid var(--accent); display:flex; align-items:center; justify-content:center; flex:none; background:rgba(0,0,0,.2); }
.ticket-detail .row-line .ic img{ width:17px; height:17px; }
.ticket-thanks{ text-align:center; color:var(--accent); font-weight:700; font-size:.85rem; margin-top:20px; }
.ticket-thanks span{ display:block; color:var(--text-muted); font-weight:400; margin-top:3px; }

/* event detail */
.event-hero-banner{ width:100%; display:block; aspect-ratio:1560/508; object-fit:cover; }

/* Blog hero banner override -- same root cause as the thumbnail fix above: Events' hero banner
   is a fixed ultra-wide 1560:508 (~3.07:1) strip via object-fit:cover, tuned for real event
   photography where losing some top/bottom is harmless. A Blog banner is a generated cover
   graphic with faces/text placed close to the frame edges at a much less extreme ratio (closer
   to 16:9/3:2), so squeezing it into that 3:1 strip cropped off the top of people's heads and
   text banners (reported: "FINISH LINE" and a runner's head both cut off). Dropping the fixed
   ratio/object-fit here (aspect-ratio:auto + height:auto, matching .blog-thumb's approach) lets
   the banner render at its own natural height instead -- guaranteed no cropping for any upload
   ratio, at the cost of the hero's height varying slightly post to post. ".event-hero-banner
   .blog-hero-banner" (both classes) beats plain ".event-hero-banner" on specificity so this
   doesn't need !important, but the properties are the same ones .blog-thumb already had to fight
   for, so this stays consistent with that fix. */
.event-hero-banner.blog-hero-banner{ aspect-ratio:auto; height:auto; object-fit:unset; }
.event-info-bar{ background:var(--surface); border-radius:var(--radius-md); position:relative; z-index:2; padding:26px 10px; }
.info-item{ display:flex; align-items:center; gap:14px; padding:10px 22px; }
.info-item img{ width:26px; height:26px; }
.info-item .v{ font-weight:700; font-size:1rem; }
.info-item .l{ color:var(--text-muted); font-size:.8rem; margin-top:2px; }
.info-divider{ width:1px; align-self:stretch; border-left:1.5px dashed var(--border-subtle); }
.event-checks{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px 40px; margin-top:34px; }
.event-checks span{ display:inline-flex; align-items:center; gap:8px; color:var(--text-dim); font-size:.95rem; }
.event-checks img{ width:18px; height:18px; }
.about-event p{ color:var(--text-dim); line-height:1.85; font-size:1rem; margin-top:20px; }
.about-event-col{ display:flex; align-items:center; padding:48px max(24px,4vw) 48px max(24px, calc((100% - 1200px)/2 + 12px)); }
.route-map-col{ min-height:340px; }
.route-map-img{ width:100%; height:100%; min-height:340px; object-fit:cover; display:block; border-radius:var(--radius-lg) 0 0 var(--radius-lg); }
@media (max-width:991.98px){
  .about-event-col{ padding:40px 24px 0; }
  .route-map-img{ border-radius:0; margin-top:32px; }
}
.icon-white{ filter:brightness(0) invert(1); }
.detail-tabs{ border-bottom:1px solid var(--border-subtle); }
.detail-tabs .nav-link{ color:var(--text-muted); font-weight:600; font-size:.95rem; border:none; border-bottom:2px solid transparent; padding:14px 2px; margin-right:34px; }
.detail-tabs .nav-link.active{ color:var(--accent); background:transparent; border-color:var(--accent); }
.checklist{ display:flex; flex-direction:column; gap:14px; margin-top:22px; }
.checklist .item{ display:flex; align-items:center; gap:12px; color:var(--text-dim); font-size:.95rem; }
.checklist img{ width:20px; height:20px; }
.map-frame{ border:1px solid var(--border-orange); border-radius:var(--radius-md); overflow:hidden; }

/* =========================== dashboard =========================== */
.dash-sidebar{ background:var(--surface); border-radius:var(--radius-md); padding:26px 22px; }
.dash-profile{ display:flex; align-items:center; gap:14px; padding-bottom:22px; margin-bottom:16px; border-bottom:1px solid var(--border-subtle); }
.dash-profile img{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid var(--accent); }
.dash-profile .name{ font-weight:700; }
.dash-nav a{ display:flex; align-items:center; gap:14px; padding:13px 14px; border-radius:10px; color:var(--text-dim); font-weight:500; font-size:.95rem; margin-bottom:6px; }
.dash-nav a img{ width:19px; height:19px; opacity:.85; }
.dash-nav a:hover{ background:rgba(255,255,255,.05); color:var(--white); }
.dash-nav a.active{ background:var(--accent); color:#1a0e02; font-weight:700; }
.dash-nav a.active img{ filter:brightness(0); opacity:1; }
.dash-main h1{ font-size:1.6rem; }
.dash-section-title{ margin:26px 0 16px; font-size:1.1rem; font-weight:700; text-transform:none; }

.dash-event-card{ display:flex; align-items:center; gap:18px; background:var(--surface); border-radius:12px; padding:16px 18px; margin-bottom:16px; }
.dash-event-card .thumb{ width:96px; height:76px; border-radius:8px; overflow:hidden; flex:none; }
.dash-event-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.dash-event-card .info{ flex:1; min-width:0; }
.dash-event-card h4{ font-size:1.02rem; text-transform:none; letter-spacing:0; }
.dash-event-card .date{ color:var(--accent); font-size:.85rem; margin-top:4px; }
.dash-event-card .right{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; flex:none; }
.dash-event-card.lg{ align-items:stretch; padding:18px; }
.dash-event-card.lg .thumb{ width:280px; height:210px; flex-shrink:0; }
.dash-event-card.lg h4{ font-size:1.5rem; font-weight:800; }
.dash-event-card.lg .date{ font-size:1rem; margin-top:8px; }
.dash-tags{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.dash-tags span{ background:var(--surface-2); border:1px solid var(--border-subtle); border-radius:6px; padding:5px 12px; font-size:.8rem; color:var(--text-dim); font-weight:600; }
@media (max-width:575.98px){
  .dash-event-card.lg{ flex-direction:column; }
  .dash-event-card.lg .thumb{ width:100%; height:180px; }
}

.status-pill{ padding:8px 16px; border-radius:8px; font-size:.85rem; font-weight:700; display:inline-flex; align-items:center; gap:8px; }
.status-pill.confirmed{ background:var(--accent); color:#fff; }
.status-pill.confirmed img{ width:13px; height:13px; filter:brightness(0) invert(1); }
/* Non-confirmed registration states -- the original design mockup never had to show these
   since every demo booking was a fabricated "Confirmed" row (see Dashboard/RegisteredEvents). */
.status-pill.pending{ background:var(--surface-2); color:var(--accent); border:1px solid var(--border-orange); }
.status-pill.failed{ background:rgba(220,53,69,.15); color:#ff6b6b; border:1px solid rgba(220,53,69,.4); }
.status-pill.cancelled{ background:var(--surface-2); color:var(--text-dim); border:1px solid var(--border-subtle); }

/* Bootstrap modal, dark-themed to match the rest of the public site (used by Registration
   History's participant-details popup). */
.modal-content{ background:var(--surface); color:var(--text); border:1px solid var(--border-subtle); border-radius:var(--radius-md); }
.modal-header{ border-bottom:1px solid var(--border-subtle); }
.modal-footer{ border-top:1px solid var(--border-subtle); }
.modal-header .btn-close{ filter:invert(1) grayscale(1) brightness(1.6); }
.modal-backdrop.show{ opacity:.75; }
.paid-status{ color:var(--green); font-weight:700; }

.nav-account-pill{ display:flex; align-items:center; gap:8px; background:var(--accent); border-radius:var(--radius-pill); padding:.55rem 1.1rem .55rem .8rem; font-weight:600; font-size:.9rem; color:#fff; }
.nav-account-pill img.avatar-ic{ width:16px; height:16px; filter:brightness(0) invert(1); }
.nav-account-pill img.chev{ width:11px; height:7px; filter:brightness(0) invert(1); }

.filter-tabs .nav-link{ padding:.55rem 1.3rem; border-radius:var(--radius-pill); border:1px solid var(--border-subtle);
  font-size:.88rem; font-weight:600; color:var(--text-dim); }
.filter-tabs .nav-link.active{ background:var(--accent); color:#1a0e02; border-color:var(--accent); }

.receipt-row{ display:flex; align-items:center; gap:20px; padding:20px 0; border-bottom:1px solid var(--border-subtle); flex-wrap:wrap; }
.receipt-row:last-child{ border-bottom:none; }
.receipt-row .thumb{ width:96px; height:76px; border-radius:8px; overflow:hidden; flex:none; }
.receipt-row .thumb img{ width:100%; height:100%; object-fit:cover; }
.receipt-row .info{ flex:1; min-width:200px; }
.receipt-row .info h4{ font-size:1.15rem; }
.receipt-row .info .date{ color:var(--accent); margin-top:4px; font-size:.92rem; }
.receipt-row .info .bib{ color:var(--text-muted); font-size:.82rem; margin-top:6px; }

.reg-event-row{ display:flex; align-items:center; gap:22px; padding:22px 0; border-bottom:1px solid var(--border-subtle); flex-wrap:wrap; }
.reg-event-row:last-child{ border-bottom:none; }
.reg-event-row .thumb{ width:180px; height:130px; border-radius:10px; overflow:hidden; flex:none; }
.reg-event-row .thumb img{ width:100%; height:100%; object-fit:cover; }
.reg-event-row .info{ flex:1; min-width:220px; }
.reg-event-row .info h4{ font-size:1.3rem; }
.reg-event-row .info .date{ color:var(--accent); margin-top:6px; }
.reg-event-row .tags{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.reg-event-row .tags span{ background:var(--surface-2); border:1px solid var(--border-subtle); border-radius:6px; padding:5px 12px; font-size:.78rem; color:var(--text-dim); font-weight:600; }
.reg-event-row .actions{ display:flex; flex-direction:column; gap:10px; align-items:flex-end; flex:none; }

.table-dark-custom{ width:100%; border-collapse:collapse; }
.table-dark-custom thead th{ background:var(--accent); color:#1a0e02; text-align:left; padding:12px 16px; font-size:.82rem; text-transform:uppercase; letter-spacing:.03em; }
.table-dark-custom thead th:first-child{ border-radius:8px 0 0 8px; }
.table-dark-custom thead th:last-child{ border-radius:0 8px 8px 0; }
.table-dark-custom tbody td{ padding:16px; border-bottom:1px solid var(--border-subtle); font-size:.92rem; }
.table-dark-custom tbody tr:last-child td{ border-bottom:none; }
.paid-status{ color:var(--green); font-weight:700; }

/* about page */
.about-hero{ position:relative; overflow:hidden; min-height:560px; display:flex; align-items:center; color:#fff; }
.about-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; }
.about-hero .content{ padding:70px 0 130px; max-width:640px; }
.about-hero h1{ font-size:clamp(2.1rem,4.6vw,3.2rem); line-height:1.15; }
.about-hero .eyebrow{ display:flex; align-items:center; gap:12px; color:var(--accent); font-size:.85rem; letter-spacing:.15em; text-transform:uppercase; margin-bottom:16px; font-weight:600; }
.about-hero .eyebrow .dash{ width:34px; height:2px; background:var(--accent); }
.about-hero p{ color:#e8e8e8; margin-top:16px; font-size:1.02rem; max-width:520px; }
@media (max-width:767.98px){ .about-hero{ min-height:0; } .about-hero .content{ padding:56px 0 90px; } }

.founders-grid img{ border-radius:var(--radius-lg); width:100%; }
.team-card img{ border-radius:var(--radius-md); aspect-ratio:1/1.05; object-fit:cover; width:100%; }
.team-card .name{ font-weight:700; margin-top:14px; }
.team-card .role{ color:var(--text-dim); font-size:.88rem; margin-top:3px; }

/* contact page — the source photo (contact-team.png) already has its own blank left
   panel baked in for the copy to sit over, so it is used whole as a full-bleed section
   background (uncropped, unmodified) and the heading/rule are simply positioned by CSS
   over that blank area. No decorative elements are drawn on top of it — everything else
   (dots, blob, icons) is already part of the source image. */
.contact-hero{ position:relative; overflow:hidden; min-height:420px; display:flex; align-items:center; color:#141414; }
.contact-hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0;
}
.contact-hero .container{ position:relative; z-index:1; padding-top:56px; padding-bottom:56px; }
.contact-hero-copy{ max-width:560px; }
.contact-hero h1{ font-size:clamp(1.9rem,4vw,2.6rem); color:#141414; }
.contact-hero .rule{ display:flex; align-items:center; margin-top:6px; }
.contact-hero .rule::before{ content:""; width:110px; height:2px; background:var(--accent); display:inline-block; margin-right:12px; }
.contact-hero .rule .dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none; }
.contact-card{ background:var(--surface); border-radius:var(--radius-md); padding:22px 24px; margin-bottom:16px; display:flex; gap:16px; align-items:flex-start; }
.contact-card .ic{ width:48px; height:48px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; flex:none; }
.contact-card .ic img{ width:20px; height:20px; filter:brightness(0) invert(1); }
.contact-card h4{ font-size:1.05rem; text-transform:none; letter-spacing:0; margin-bottom:4px; }
.contact-card p{ color:var(--text-dim); font-size:.88rem; margin:0; }
.contact-card.highlight{ background:var(--beige); color:#1a1a1a; align-items:center; }
.contact-card.highlight h4{ color:var(--accent-dark); font-size:1.1rem; }
.contact-card.highlight p{ color:#1a1a1a; font-weight:600; }
.contact-support-box{ border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:26px; }
/* below desktop, the wide source photo no longer has room to show its blank left panel
   AND the subject at once, so it moves above the copy as a normal banner instead of a
   text-overlay background — the image itself is still shown whole, just repositioned. */
@media (max-width:991.98px){
  .contact-hero{ min-height:0; display:block; background:linear-gradient(120deg, #f5f0ea 0%, #f8ddc0 60%, #f2a862 100%); }
  .contact-hero-bg{ position:relative; width:100%; height:220px; object-position:75% center; }
  .contact-hero .container{ padding-top:26px; }
  .contact-hero-copy{ max-width:none; }
}

/* legal pages */
.legal-nav a{ display:block; padding:14px 0; color:#fff; font-size:1.15rem; font-weight:500; line-height:1.35; }
.legal-nav a.active{ color:var(--accent); font-weight:700; }
.legal-content h1{ font-size:1.8rem; }
.legal-content .eff{ color:var(--text-muted); font-size:.85rem; margin-top:8px; }
.legal-content p{ color:var(--text-dim); margin:16px 0; font-size:.96rem; line-height:1.7; }
.legal-content h2{ font-size:1.35rem; margin-top:34px; margin-bottom:6px; text-transform:none; }
.legal-content h3{ font-size:1.05rem; font-weight:700; color:#fff; text-transform:none; margin-top:22px; margin-bottom:2px; }
.legal-content ul{ list-style:none; padding:0; margin:10px 0 0; color:var(--text-dim); font-size:.96rem; line-height:1.9; }
.legal-content strong{ color:#fff; }