/* ==========================================================================
   Meister Carbon Cleaners – Single CSS (dark red/grey theme)
   Drop-in for /assets/style.css
   ========================================================================== */

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

:root{
  --red: #c82333;          /* primary brand red */
  --red-600:#b21f2d;
  --bg:  #0b0b0d;          /* near-black background */
  --dark:#131417;          /* header / card base */
  --mid: #1c1f24;          /* panels */
  --line:#2a2f36;          /* borders */
  --text:#e7e7e9;          /* main text */
  --muted:#b7b9c2;         /* secondary text */
  --link:#dbe5ff;          /* link */
  --success:#18a05e;
  --warning:#f59f00;
}

body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, "Helvetica Neue", Arial, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Prevent purple/blue default link states */
a { color: var(--link); text-decoration: none; }
a:hover, a:focus { color: var(--red); text-decoration: none; }
a:visited { color: var(--link); }

/* Headings */
h1,h2,h3,h4{ margin: .2rem 0 .6rem; line-height: 1.2; }
h1{ font-size: clamp(2rem, 3.2vw, 2.6rem); }
h2{ font-size: clamp(1.4rem, 2.2vw, 1.8rem); color: var(--red); }
h3{ font-size: 1.05rem; color: #fff; }

/* Utility */
.container{ width: min(1200px, 92%); margin: 0 auto; }
.section{ padding: 3rem 0; }
.center{ text-align:center; }
.m-0{ margin:0!important; }
.mt-1{ margin-top: .5rem!important; }
.mt-2{ margin-top: 1rem!important; }
.mt-3{ margin-top: 1.5rem!important; }
.mb-2{ margin-bottom: 1rem!important; }
.hidden{ display:none!important; }

/* Honeycomb background (subtle) */
.honeycomb{
  background:
    radial-gradient(transparent 28%, rgba(255,255,255,.05) 29%, transparent 30%) 0 0/44px 44px,
    radial-gradient(transparent 28%, rgba(255,255,255,.04) 29%, transparent 30%) 22px 26px/44px 44px,
    linear-gradient(var(--bg), var(--dark));
}

/* ---------- Header / Navigation ---------- */
.site-header{
  position: sticky; top: 0; z-index: 1000;
  background: var(--dark);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

.logo{
  color: #fff; font-weight: 900; letter-spacing: .2px; font-size: 1.4rem;
}
.logo-highlight{ color: var(--red); }

.site-header .container{
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 0;
}

.main-nav ul{ list-style: none; display: flex; gap: 1.25rem; margin: 0; padding: 0; }
.main-nav a{ color: #fff; font-weight: 700; }
.main-nav a:hover{ color: var(--red); }

/* Dropdown */
.main-nav .dropdown{ position: relative; }
.main-nav .dropdown-content{
  display: none; position: absolute; top: 100%; left: 0;
  background: var(--mid); border: 1px solid var(--line);
  border-radius: 8px; min-width: 220px; padding: .35rem 0;
  box-shadow: 0 12px 26px rgba(0,0,0,.45);
}
.main-nav .dropdown-content li a{
  display: block; padding: .65rem 1rem; color: #e9ebf5; font-weight: 600;
}
.main-nav .dropdown-content li a:hover{ background: rgba(255,255,255,.04); color: var(--red); }
.main-nav .dropdown:hover .dropdown-content,
.main-nav .dropdown:focus-within .dropdown-content{ display:block; }

/* Book button in nav */
.nav-book{
  border: 2px solid var(--red); color:#fff; padding: .35rem .8rem;
  border-radius: 8px; transition: background .2s ease;
}
.nav-book:hover{ background: var(--red); color: #fff; }

/* ---------- Hero ---------- */
.hero{
  background: linear-gradient(180deg, #0e0f13 0%, #0b0b0d 100%);
  padding: 4.5rem 0 3.5rem;
  border-bottom: 1px solid var(--line);
}
.hero-inner{
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items: center;
}
.hero-text p{ color: var(--muted); }
.highlight{ color: var(--red); }
.hero-graphic{ display:flex; justify-content:center; }
.blob{
  width: 360px; height: 360px; border-radius: 28px;
  background: radial-gradient(65% 65% at 35% 35%, rgba(200,35,51,.25), rgba(200,35,51,.05) 60%, transparent 70%),
              linear-gradient(145deg, #101216, #0a0a0c);
  border: 1px solid var(--line); box-shadow: inset 0 0 60px rgba(200,35,51,.12), 0 0 80px rgba(200,35,51,.08);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.hero-logo{ max-width: 82%; height: auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,.65)); }

.hero .hero-buttons{ display:flex; gap:.75rem; margin-top:1rem; }

/* ---------- Buttons ---------- */
.btn{
  background: var(--red); color:#fff; font-weight: 800;
  border: none; padding: .7rem 1.05rem; border-radius: 10px;
  cursor: pointer; display:inline-block; transition: transform .05s ease, background .2s ease;
}
.btn:hover{ background: var(--red-600); transform: translateY(-1px); }

.btn-secondary{
  background: transparent; color: var(--red); border: 2px solid var(--red);
  padding: .6rem 1rem; border-radius: 10px; font-weight: 800;
}
.btn-secondary:hover{ background: rgba(200,35,51,.12); }

/* ---------- Cards / Grids / Sections ---------- */
.grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.card{
  background: var(--mid);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.2rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

.services{ padding: 3rem 0; }
.services-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.service-link{ display:block; }
.service-card{
  background: var(--mid); border:1px solid var(--line); border-radius:12px;
  padding:1rem; min-height: 150px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.service-card h3{ margin-top:0; color:#fff; }
.service-card p{ color: var(--muted); margin:.4rem 0 0; }
.service-card .price-tag{ margin-top:.6rem; display:inline-block; color:#fff; background:#1b2129; border:1px solid var(--line); border-radius:8px; padding:.25rem .5rem; }
.service-card:hover{ transform: translateY(-3px); border-color: var(--red); box-shadow: 0 18px 34px rgba(0,0,0,.45); }

/* ---------- Forms (Calculator / Booking / Auth) ---------- */
form{ width:100%; }
.form-row{ display:flex; flex-direction: column; gap: .4rem; margin: .65rem 0; }
.form-row.inline{ flex-direction: row; gap: .6rem; align-items: center; }
label{ font-weight:700; color:#fff; }
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="time"], select, textarea{
  background: #0f1216; color: #fff; border:1px solid var(--line);
  border-radius: 10px; padding: .65rem .75rem; outline: none;
}
input::placeholder, textarea::placeholder{ color:#8a8f99; }
input:focus, select:focus, textarea:focus{ border-color: var(--red); box-shadow: 0 0 0 3px rgba(200,35,51,.15); }

.checkbox-row{ flex-direction: row; align-items: center; gap: .6rem; }
.calc-result{ font-weight:900; color:#fff; background:#11151a; border:1px solid var(--line); padding:.75rem 1rem; border-radius:10px; display:inline-block; }

.calculator-section .calc-form{ max-width: 680px; }

/* ---------- Tables (dashboards) ---------- */
.dash-table{ width:100%; border-collapse: collapse; background: var(--mid); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.dash-table th, .dash-table td{ padding:.75rem .9rem; border-bottom:1px solid var(--line); }
.dash-table th{ color:#cbd6ff; background:#15181d; text-transform:uppercase; letter-spacing:.4px; font-size:.8rem; }
.dash-table tr:last-child td{ border-bottom:none; }
.badge{ padding:.18rem .45rem; border-radius:6px; font-size:.78rem; }
.badge.pending{ background:#1f2630; color:#e0e6ff; border:1px solid #2d3440; }
.badge.confirmed{ background:#10221a; color:#bff4db; border:1px solid #1a3a2a; }
.badge.done{ background:#1f1a10; color:#ffe4a6; border:1px solid #3b3217; }
.badge.cancelled{ background:#2b1416; color:#ffb6be; border:1px solid #462126; }

/* ---------- Footer ---------- */
.site-footer{
  border-top: 1px solid var(--line); background: #0e1013; color: var(--muted);
  padding: 1.4rem 0; text-align: center; margin-top: 2.5rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  .hero-inner{ grid-template-columns: 1fr; text-align: center; }
  .hero-graphic{ order: -1; margin-bottom: 1rem; }
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
  .grid{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .site-header .container{ flex-wrap: wrap; gap:.6rem; }
  .main-nav ul{ flex-wrap: wrap; gap: .9rem 1rem; }
  .main-nav .dropdown{ position: static; }
  .main-nav .dropdown-content{ position: static; display:none; border:none; padding:0; background:transparent; box-shadow:none; }
  .main-nav .dropdown:hover .dropdown-content{ display:block; }
  .services-grid{ grid-template-columns: 1fr; }
  .blob{ width: 300px; height: 300px; }
}

/* ---------- Optional “hero-dark” banner using a background image ---------- */
.hero-dark{
  padding: 5rem 0 3.2rem;
  background:
    linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.75)),
    url('/assets/Revive Engine Efficiency.png') center/cover no-repeat;
  border-bottom: 1px solid var(--line);
}
.hero-dark h1{ margin-bottom:.5rem; }
.hero-dark p{ max-width: 720px; color: #d2d6e0; }

/* FAQ <details> styling */
details.card > summary { cursor: pointer; outline: none; list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after {
  content: "▾"; float: right; color:#a6adbb; transition: transform .2s;
}
details[open].card > summary::after { transform: rotate(180deg); }

/* Spacing under <summary> so text below isn't cramped */
details.card > *:not(summary) { margin-top: .6rem; }

.alert{padding:12px 14px;border-radius:10px;margin:10px 0;border:1px solid transparent}
.alert.error{background:#3b1a1d;border-color:#7a1b22;color:#ffd6d9}
.alert.success{background:#163221;border-color:#1f804a;color:#c6f3d1}
/* ===== Mobile Header & Drawer ===== */
.site-header{position:sticky;top:0;z-index:50;background:#222529;border-bottom:1px solid #2c2f35}
.nav-wrap{max-width:1100px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;letter-spacing:.2px;color:#e7ebf2;text-decoration:none}
.brand b{color:#e21b2c}
.brand i{opacity:.8;font-style:normal}
.brand.small{font-size:1rem}

.nav-desktop{display:flex;gap:20px;align-items:center}
.nav-desktop>a{color:#e7ebf2;text-decoration:none;opacity:.9}
.nav-desktop>a:hover{opacity:1}
.nav-dropdown{position:relative}
.nav-dropdown .dropbtn{background:transparent;border:1px solid #444;border-radius:10px;padding:8px 12px;color:#e7ebf2;cursor:pointer}
.nav-dropdown .dropdown-menu{position:absolute;right:0;top:120%;background:#1c1f24;border:1px solid #2e3238;border-radius:12px;min-width:180px;display:none;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.nav-dropdown.open .dropdown-menu{display:block}
.dropdown-menu a{display:block;padding:10px 12px;color:#e7ebf2;text-decoration:none}
.dropdown-menu a:hover{background:#262a31}
.btn-outline{border:2px solid #e21b2c;color:#e7ebf2;border-radius:12px;padding:8px 14px}
.btn-outline:hover{background:#e21b2c}

.hamburger{display:none;gap:6px;flex-direction:column;justify-content:center;align-items:center;width:44px;height:38px;border:1px solid #3a3f46;border-radius:10px;background:#1d2126}
.hamburger span{display:block;width:20px;height:2px;background:#e7ebf2}

/* Drawer */
.mobile-drawer{position:fixed;inset:0 auto 0 0;width:min(82vw,360px);background:#181b20;border-right:1px solid #2b2f36;transform:translateX(-100%);transition:transform .25s ease;z-index:70;display:flex;flex-direction:column}
.mobile-drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #2b2f36}
.drawer-close{background:#262b31;border:1px solid #3a3f46;color:#e7ebf2;border-radius:10px;width:38px;height:34px;font-size:20px;line-height:1}
.drawer-nav{padding:8px 12px}
.drawer-link{display:block;color:#e7ebf2;text-decoration:none;padding:12px 10px;border-radius:10px}
.drawer-link:hover{background:#20242a}
.drawer-group{margin-top:10px;padding-top:8px;border-top:1px dashed #333}
.drawer-label{color:#9ea6b5;font-size:.9rem;margin:6px 2px}
.drawer-sublink{display:block;color:#e7ebf2;text-decoration:none;padding:10px 10px;border-radius:10px;opacity:.95}
.drawer-sublink:hover{background:#20242a}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60}
.no-scroll{overflow:hidden}

/* Responsive behaviour */
@media (max-width: 960px){
  .nav-desktop{display:none}
  .hamburger{display:flex}
}

/* ===== Form & Card responsive polish ===== */
.section .container{max-width:1100px;margin:0 auto;padding:16px}
.card{background:#1f2328;border:1px solid #2a2f37;border-radius:14px;padding:20px 18px;margin:12px 0}
.card h1,.card h2{margin:0 0 10px 0}

.form label{display:block;margin:10px 0 6px 2px;color:#cfd6e4}
.form input,.form select,.form textarea{
  width:100%;border:1px solid #353b45;background:#0f1216;color:#e7ebf2;
  border-radius:10px;padding:12px 12px;outline:none
}
.form input:focus,.form select:focus,.form textarea:focus{border-color:#e21b2c;box-shadow:0 0 0 2px rgba(226,27,44,.25)}
.form-row{display:flex;gap:10px}
.form-row.inline{align-items:center}
.btn{background:#e21b2c;border:none;border-radius:12px;padding:10px 14px;color:#fff;cursor:pointer}
.btn-secondary{background:#2a2f37;border:1px solid #3a414c;color:#e7ebf2}

@media (max-width: 640px){
  .section .container{padding:12px}
  .form-row.inline{flex-direction:column;align-items:stretch}
  .btn,.btn-secondary,.btn-outline{width:100%}
  .nav-wrap{padding:10px 12px}
}

/* tables and badges (dashboards) */
.dash-table{width:100%;border-collapse:separate;border-spacing:0 6px}
.dash-table thead th{color:#9ea6b5;font-weight:600;text-align:left;padding:8px}
.dash-table tbody td{background:#161a1f;border:1px solid #252a31;border-left:none;border-right:none;padding:10px}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid #333}
.badge.done{background:#143522;border-color:#1e6d3f;color:#a4e4ba}
.badge.cancelled{background:#391a1f;border-color:#7a1b22;color:#ffcdd2}

/* --- Login form layout tweaks --- */
.form-actions{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:12px;
}
.form-actions .btn{ padding:10px 22px; }
.form-actions .create-link{ margin-left:auto; }     /* push to the right */

.form-subactions{ margin-top:10px; }                /* "Forgot password?" under Login */

/* turn both helper links into clean text links */
.link-ghost{
  display:inline-block; color:#cfd6e4; text-decoration:underline; opacity:.9;
}
.link-ghost:hover{ opacity:1; color:#ffffff; }

/* Mobile: stack everything neatly */
@media (max-width:640px){
  .form-actions{ flex-direction:column; align-items:stretch; }
  .form-actions .btn{ width:100%; }
  .form-actions .create-link{ width:100%; text-align:center; margin-left:0; }
  .form-subactions{ text-align:center; }
}

/* Brand a touch larger on desktop */
.brand{font-size:1.45rem}        /* was smaller */
@media (max-width: 960px){
  .brand{font-size:1.15rem}      /* mobile stays perfect */
}

/* Plain text link under the Login button */
.form-foot{margin-top:12px}
.link-ghost{
  display:inline-block;
  color:#cfd6e4;
  text-decoration:underline;
  opacity:.9
}
.link-ghost:hover{opacity:1;color:#ffffff}
.alert{padding:12px;border-radius:10px;margin:10px 0}
.alert.error{background:#3b1d22;border:1px solid #7a1b22;color:#ffdadd}
.alert.success{background:#1d3526;border:1px solid #1e6d3f;color:#a4e4ba}
.alert a{color:#ffffff;text-decoration:underline}
/* --- NAV / VISIBILITY FIXES -------------------------------------------- */

/* Desktop-first defaults */
.show-sm { display: none; }          /* hidden on desktop */
.hide-sm { display: flex; }          /* visible on desktop */

.topbar { background:#1f2327; border-bottom:1px solid rgba(255,255,255,.06); }
.topbar .nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; }
.brand{ font-weight:800; font-size:1.45rem; color:#e6ebf3; text-decoration:none; }
.brand-accent{ color:#e31b23; }

.menu{ display:flex; align-items:center; gap:24px; }
.nav-link{ color:#dbe2ea; text-decoration:none; padding:6px 2px; }
.nav-link:hover{ color:#fff; }

/* Dropdowns */
.dropdown{ position:relative; }
.dropdown-toggle{ background:none; border:none; color:#dbe2ea; cursor:pointer; padding:6px 2px; }
.dropdown-menu{
  position:absolute; top:100%; right:0;
  background:#2a2f35; border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:8px; min-width:220px;
  display:none; z-index:50; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.dropdown-menu.show{ display:block; }
.dropdown-item{ display:block; color:#e7edf6; text-decoration:none; padding:10px 12px; border-radius:8px; }
.dropdown-item:hover{ background:#363c44; }
.dropdown-sep{ height:1px; background:rgba(255,255,255,.08); margin:6px 0; }

/* Book button */
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:12px; text-decoration:none; }
.btn-primary{ background:#ff1f2b; color:#fff; }
.btn-primary:hover{ filter:brightness(1.05); }

/* Hamburger */
.hamburger{ background:#7c7f83; border:0; border-radius:12px; padding:10px; cursor:pointer; }
.hamburger span{ display:block; width:22px; height:2px; background:#e7edf6; margin:4px 0; }

/* Drawer (mobile menu) */
.drawer{
  position:fixed; top:0; right:0; width:320px; max-width:85vw; height:100vh;
  background:#1f2327; color:#e7edf6; box-shadow:-20px 0 50px rgba(0,0,0,.45);
  transform:translateX(100%); transition:transform .28s ease; z-index:100;
  display:block; /* keep it out of flow but ready */
}
.drawer.open{ transform:translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:18px; border-bottom:1px solid rgba(255,255,255,.07); }
.drawer-close{ background:none; border:0; color:#e7edf6; font-size:28px; cursor:pointer; }
.drawer-body{ padding:14px 18px; height:calc(100vh - 64px); overflow:auto; }
.drawer-link{ display:block; color:#e7edf6; text-decoration:none; padding:12px 10px; border-radius:10px; }
.drawer-link:hover{ background:#2a2f35; }
.drawer-section-title{ margin:16px 0 8px; opacity:.65; font-weight:700; font-size:.92rem; }

/* Hide the drawer entirely on desktop so it doesn't occupy page flow */
@media (min-width: 961px){
  .drawer{ display:none; }
}

/* Small screens: swap visibility */
@media (max-width: 960px){
  .show-sm{ display:inline-flex; }
  .hide-sm{ display:none; }

  .menu{ display:none; }               /* desktop menu hidden on mobile */
  .brand{ font-size:1.25rem; }
}
.nav-login{position:relative; display:inline-block;}
.nav-login > .menu{
  display:none; position:absolute; right:0; top:100%;
  background:#0f1216; border:1px solid #262c35; border-radius:10px;
  min-width:180px; padding:8px;
  z-index:50;
}
.nav-login:hover > .menu{display:block;}
.nav-login .menu a{display:block; padding:8px 10px; text-decoration:none;}
.nav a.btn.btn-primary{margin-left:8px;}

/* ===== Hero artwork ===== */
.hero--with-art {
  position: relative;
  overflow: hidden;
  min-height: clamp(420px, 58vh, 720px);
  background:
    radial-gradient(1200px 600px at -10% 10%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(135deg, #0b0d10 0%, #121418 100%);
}

/* Subtle top-to-bottom darkening so text always pops */
.hero--with-art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.45) 100%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 3; /* above artwork */
}

/* Honeycomb on the left */
.hero__honeycomb {
  position: absolute;
  z-index: 1;
  width: clamp(2400px, 42vw, 680px);
  height: clamp(1350px, 42vw, 680px);
  left: max(-160px, -8vw);
  top: max(-120px, -6vw);
  background: url("/assets/img/hydrogen-clean-hero.jpg") center/contain no-repeat;
  opacity: .18;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
  mix-blend-mode: screen; /* gives a nice techy glow on dark bg */
}

 /* ===== Landing page polish ===== */
  .hero.landing{
    position:relative;
    background:
      linear-gradient(180deg, rgba(7,9,12,.70) 0%, rgba(7,9,12,.85) 60%, rgba(7,9,12,.95) 100%),
      url('/assets/img/hydrogen-clean-hero.jpg') center/cover no-repeat;
    padding:72px 0;
}
@media (max-width:640px){ .hero.landing{ padding:56px 0; } }
  .hero .cta-subcopy{ display:block; margin-top:6px; color:#a7b2be; font-size:.95rem; }
  .trust-strip{ margin-top:10px; color:#cbd5e1; font-size:.95rem; }

/* Mobile: keep it clean */
@media (max-width: 780px) {
  .hero__car {
    right: -18vw;
    bottom: -24px;
    width: min(115vw, 720px);
    opacity: .9;
  }
  .hero__honeycomb {
    left: -28vw;
    top: -22vw;
    opacity: .12;
  }
}

/* Respect data saving */
@media (prefers-reduced-data: reduce) {
  .hero__car, .hero__honeycomb { display: none; }
}
/* --- iframe carousel fixes --- */
.carousel, .slide { border-radius:14px; overflow:hidden; }
.slide { position: relative; }
.slides { will-change: transform; backface-visibility: hidden; }

/* Responsive 16:9 wrapper so FB iframe renders correctly */
.iframe-wrap{
  position:relative;
  width:100%;
  padding-top:56.25%; /* 16:9 */
  background:#000;
  border-radius:12px;
  overflow:hidden;
}
.iframe-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100% !important; /* override any earlier .slide iframe height */
  border:0;
  z-index:1; /* keep it on top of siblings */
}

/* Keep dots visually tied to the card */
.card .dots { margin-top:10px; position:relative; z-index:2; }
/* --- Video carousel (fade, mixed ratios, no crop) --- */
#showcase .slides {
  position: relative;
  transition: height .35s ease; /* smoothly adjusts height */
}
#showcase .slide {
  position: absolute; left:0; right:0; top:0;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
#showcase .slide.active {
  opacity: 1; pointer-events: auto;
}

/* Rounded corners + clipping */
.carousel, #showcase .slide { border-radius:14px; overflow:hidden; }

/* Aspect-ratio wrappers (per slide) */
.iframe-wrap {
  width: 100%;
  background:#000;
  border-radius:12px;
  overflow:hidden;
  aspect-ratio: 16 / 9;              /* default 16:9 */
}
.iframe-wrap.ratio-9x16 { aspect-ratio: 9 / 16; }   /* vertical */
.iframe-wrap.ratio-4x5  { aspect-ratio: 4 / 5; }    /* if needed later */

/* Full-fit iframe inside wrapper */
.iframe-wrap iframe {
  width:100%; height:100%;
  border:0;
}

/* Keep dots centered with card content */
.card .dots { margin-top:10px; position:relative; z-index:2; }
/* Fade-mode carousels (mixed aspect ratios, no crop) */
.carousel[data-mode="fade"] .slides {
  position: relative;
  transition: height .35s ease;
}
.carousel[data-mode="fade"] .slide {
  position: absolute; left:0; right:0; top:0;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.carousel[data-mode="fade"] .slide.active {
  opacity: 1; pointer-events: auto;
}

/* Rounded corners + clipping */
.carousel, .carousel .slide { border-radius:14px; overflow:hidden; }

/* Aspect-ratio wrappers (declare per slide) */
.iframe-wrap { width:100%; background:#000; border-radius:12px; overflow:hidden; aspect-ratio:16/9; }
.iframe-wrap.ratio-9x16 { aspect-ratio:9/16; } /* vertical Reels */
.iframe-wrap.ratio-4x5  { aspect-ratio:4/5; }  /* optional */

.iframe-wrap iframe { width:100%; height:100%; border:0; }

/* Optional: tame very tall verticals on small screens */
@media (max-width:480px){
  .iframe-wrap.ratio-9x16 { max-height:80vh; }
}
/* captions under each video/post */
.video-card { display:block; }
.video-card .testimonial-note{
  margin-top:8px; color:var(--muted); font-size:14px; line-height:1.4;
}

/* extra ratios if you need them */
.iframe-wrap.ratio-2x1 { aspect-ratio: 2 / 1; }
.iframe-wrap.ratio-1x1 { aspect-ratio: 1 / 1; }
@media (max-width:480px){
  .iframe-wrap.ratio-9x16 { max-height: 75vh; } /* was 80vh */
}
/* FB post wrapper: responsive width, capped height with scroll */
.fb-wrap{
  width:100%;
  max-height:70vh;           /* keep posts from getting too tall */
  border-radius:12px;
  overflow:auto;             /* scroll inside if content is long */
  background:#000;
  padding:8px;               /* subtle breathing room around the post */
}

/* Force FB widget to fill width of its container */
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe{ width:100% !important; }
.fb-wrap{ max-height: 90vh; }
/* Mobile refinements */
@media (max-width: 640px){
  .carousel[data-mode="fade"] .slides{ transition: height .25s ease; }
  .iframe-wrap{ border-radius:10px; }              /* softer corners on small screens */
  .iframe-wrap.ratio-9x16{ max-height:76vh; }      /* keep vertical Reels in view */
  .fb-wrap{ max-height:76vh; padding:6px; }        /* FB posts: cap height, less padding */
  #testimonials .video-card .testimonial-note{ font-size:13px; }
  .dots{ margin-top:8px; }
  .dot{ width:8px; height:8px; }
}
@media (max-width: 380px){
  .iframe-wrap.ratio-9x16, .fb-wrap{ max-height:72vh; } /* extra cap on very small phones */
}
/* Generic fade-mode (you already have this) … */

/* Auto-height flow layout for carousels that set data-autoheight="true" */
.carousel[data-mode="fade"][data-autoheight="true"] .slides{
  position: static;
  height: auto !important;          /* ignore any inline height */
}
.carousel[data-mode="fade"][data-autoheight="true"] .slide{
  position: relative;
  display: none;                     /* only show the active slide */
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.carousel[data-mode="fade"][data-autoheight="true"] .slide.active{
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* FB post wrapper: sensible before/after render, capped height */
.fb-wrap{
  width:100%;
  min-height:260px;
  max-height:70vh;                   /* prevent ultra-tall posts */
  border-radius:12px;
  overflow:auto;
  background:#0d0f12;
  padding:8px;
}

/* Make FB widget fill the container width */
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe{ width:100% !important; }

/* Mobile tweaks */
@media (max-width:640px){
  .fb-wrap{ max-height:76vh; padding:6px; }
}
@media (max-width:380px){
  .fb-wrap{ max-height:72vh; }
}

/* Responsive styles for the admin bookings table */
@media (max-width: 768px) {
  /* Transform the table into a block layout on small screens */
  .container.card table,
  .container.card thead,
  .container.card tbody,
  .container.card th,
  .container.card td,
  .container.card tr {
    display: block;
  }
  /* Hide the header row (since labels are added via ::before) */
  .container.card thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  /* Style each row as a card */
  .container.card tr {
    border: 1px solid #2a2f36;
    margin-bottom: 12px;
    border-radius: 8px;
    background: #111418;
    padding: 8px;
  }
  /* Reset cell styles and set up label positioning */
  .container.card td {
    border: none;
    position: relative;
    padding-left: 50%;
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: left;
    white-space: normal;
  }
  /* Define the labels for each column (adjust these if you reorder columns) */
  .container.card td:nth-of-type(1)::before { content: "When"; }
  .container.card td:nth-of-type(2)::before { content: "Service"; }
  .container.card td:nth-of-type(3)::before { content: "Details"; }
  .container.card td:nth-of-type(4)::before { content: "Total"; }
  .container.card td:nth-of-type(5)::before { content: "Customer"; }
  .container.card td:nth-of-type(6)::before { content: "Status"; }
  .container.card td:nth-of-type(7)::before { content: "Actions"; }
  /* Style the labels themselves */
  .container.card td::before {
    position: absolute;
    left: 16px;
    top: 0;
    bottom: 0;
    width: 40%;
    font-weight: 700;
    color: #9fb0bf;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}