/* ==========================================================================
   Nova Auto – Global Styles (Bootstrap 5 companion)
   Order: 1) Theme & Base, 2) Layout/Utils, 3) Navbar, 4) Hero,
          5) Advantages, 6) Services (Parallax + Tiles), 7) Panel/About,
          8) Split Blocks, 9) Testimonials, 10) Contacts,
          11) Shared Components, 12) Repair, 13) Auto-EL, 14) Dæk & Fælge,
          15) Drejearbejde
   ========================================================================== */

/* 1) THEME TOKENS & BASE -------------------------------------------------- */
:root{
  --cr-red:#e53935;
  --cr-red-600:#c62828;
  --cr-dark:#0f1114;
  --cr-gray:#1a1d22;
  --cr-light:#f8f9fb;
}

html{ scroll-behavior:smooth; }

body{
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:#dce0e6;
  background:var(--cr-dark);
}

h1,h2,h3,h4{
  font-family:Montserrat, system-ui, Inter, sans-serif;
  letter-spacing:.3px;
}

/* 2) LAYOUT & UTILITIES --------------------------------------------------- */
.container-narrow{ max-width:1024px; }

section{ padding:64px 0; }

.section-light{ background:#fff; color:#2a2f36; }
.section-dark{ background:#191c21; }
.section-darker{ background:#14171c; }

.btn-red{ background:var(--cr-red); border-color:var(--cr-red); color:#fff; }
.btn-red:hover,.btn-red:focus{ background:var(--cr-red-600); border-color:var(--cr-red-600); color:#fff; }

.muted{ color:#9aa6b2; }
.lead-light{ color:#d5dbe4; }
.divider{ height:1px; background:rgba(255,255,255,.08); }

/* 3) NAVBAR --------------------------------------------------------------- */
.navbar{ background:#f0f2f4; }
.navbar-brand{ font-weight:800; }
.navbar .nav-link{ color:#151339; }
.navbar .nav-link:hover,.navbar .nav-link:focus{ color:#A4161A; }

/* 4) HERO ----------------------------------------------------------------- */
.hero{
  position:relative; min-height:78vh; display:grid; place-items:center;
  text-align:center; overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.65));
  z-index:1;
}
.hero>*{ position:relative; z-index:2; }
.hero h1{ font-weight:900; font-size:clamp(2.2rem, 5vw + 1rem, 5rem); line-height:1; text-transform:uppercase; }
.hero h1 .thin{ font-weight:300; display:block; letter-spacing:.08em; }
.hero p{ max-width:820px; margin:auto; color:#cbd3df; }

/* 5) ADVANTAGES ----------------------------------------------------------- */
.adv i{ font-size:1.8rem; color:var(--cr-red); }
.adv h6{ font-weight:800; }
.hex{
  border:2px solid var(--cr-red); border-radius:1rem; width:52px; height:52px;
  display:grid; place-items:center;
}

/* 6) SERVICES (PARALLAX + CLICKABLE TILES) -------------------------------- */
.services-parallax{
  position:relative;
  background:url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?q=80&w=2400&auto=format&fit=crop') center/cover no-repeat fixed;
  color:#fff;                 /* default text inside is white */
  --bs-heading-color:#fff;    /* make Bootstrap headings white */
}
.services-parallax::before{
  content:''; position:absolute; inset:0; background:rgba(0,0,0,.55); z-index:0;
}
.services-parallax>*{ position:relative; z-index:1; }

/* Clickable service tiles */
.service-tiles .tile{
  position:relative; display:block; border-radius:1rem; overflow:hidden;
  background:#0b0e13; aspect-ratio:4 / 3; color:#fff; text-decoration:none;
  box-shadow:0 .5rem 1.25rem rgba(0,0,0,.25);
  transition:transform .2s ease, box-shadow .2s ease;
}
.service-tiles .tile__bg{
  position:absolute; inset:0; background-position:center; background-size:cover;
  transform:scale(1.04); transition:transform .5s ease;
  filter:saturate(1.05) contrast(1.05);
}
.service-tiles .tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,.6) 80%);
  transition:opacity .3s ease;
}
.service-tiles .tile__body{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1rem 1.2rem 1.15rem; display:flex; flex-direction:column; gap:.25rem;
}
.service-tiles .tile h6{ margin:0; text-transform:uppercase; letter-spacing:.02em; font-weight:700; }
.service-tiles .tile small{ opacity:.9; }
.service-tiles .tile__cta{
  position:absolute; right:.9rem; top:.9rem; z-index:2;
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.25);
}
.service-tiles .tile__cta i{ color:#fff; }
.service-tiles .tile:hover{ box-shadow:0 1rem 2rem rgba(0,0,0,.35); transform:translateY(-2px); }
.service-tiles .tile:hover .tile__bg{ transform:scale(1.08); }
.service-tiles .tile:focus-visible{ outline:3px solid var(--cr-red); outline-offset:2px; }

/* 7) PANEL / ABOUT -------------------------------------------------------- */
.panel{
  background:var(--cr-gray); color:#e8eef9;     /* light text in dark panel */
  border-radius:1rem; padding:2rem;
  border:1px solid rgba(255,255,255,.06);
  --bs-heading-color:#fff;                      /* ensure headings are white */
}
.panel .text-muted{ color:#cfd6dc !important; }
.panel .bi{ color:#fff; opacity:.85; }

/* 8) SPLIT BLOCKS --------------------------------------------------------- */
.split{ min-height:360px; }
.bg-image{ background-position:center; background-size:cover; }
.red-block{ background:var(--cr-red); color:#fff; }

/* 9) TESTIMONIALS --------------------------------------------------------- */
.testi .avatar{ width:96px; height:96px; border-radius:50%; object-fit:cover; }

/* 10) CONTACTS ------------------------------------------------------------ */
.contacts{
  position:relative;
  background:url('https://images.unsplash.com/photo-1517940310602-26535839fe01?q=80&w=2400&auto=format&fit=crop') center/cover no-repeat;
}
.contacts::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.7));
}
.contacts>*{ position:relative; z-index:2; }

/* 11) SHARED COMPONENTS --------------------------------------------------- */
/* Side navigation links (service pages) */
.side-link{
  display:flex; align-items:center; padding:.55rem .6rem; border-radius:.6rem;
  color:#e8eef9; text-decoration:none; border:1px solid rgba(255,255,255,.06);
}
.side-link:hover{ background:#151920; }
.side-link.active{ background:rgba(229,57,53,.12); border-color:rgba(229,57,53,.3); }

/* Small helpers */
.list-dot{ position:relative; padding-left:1.15rem; }
.list-dot::before{
  content:''; position:absolute; left:.25rem; top:.6rem; width:6px; height:6px;
  border-radius:50%; background:#fff; opacity:.6;
}
.bullet i{ color:var(--cr-red); }
.content-small p{ margin-bottom:.85rem; }

/* Feature cards (used on Serviceeftersyn) */
.feature-cards .card-feature{
  background:#fff; border:1px solid #eaeef5; border-radius:1rem;
  padding:1.25rem 1.25rem 1.15rem;
  box-shadow:0 .35rem 1rem rgba(15,17,20,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature-cards .card-feature:hover{
  transform:translateY(-2px);
  box-shadow:0 .75rem 1.5rem rgba(15,17,20,.12);
  border-color:#e3e8f2;
}
.feature-cards .icon-sq{
  width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
  margin-bottom:.75rem; background:rgba(229,57,53,.10);
  border:1px solid rgba(229,57,53,.25); color:var(--cr-red);
}
.feature-cards .icon-sq i{ font-size:1.35rem; line-height:1; }
.feature-cards h3{ letter-spacing:.2px; }
@media (max-width:575.98px){
  .feature-cards .card-feature{ padding:1rem; }
  .feature-cards .icon-sq{ width:52px; height:52px; border-radius:12px; }
}

/* 12) REPAIR (reparation.html) ------------------------------------------- */
.repair-visual{}

.repair-flow{
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(145deg,#1a1d22,#0f1216);
  border:1px solid rgba(255,255,255,.06);
  border-radius:1rem; padding:14px 16px;
  box-shadow:0 .6rem 1.2rem rgba(0,0,0,.25); overflow:auto;
}
.repair-flow .flow-step{ min-width:140px; text-align:center; color:#eaf0f9; }
.repair-flow .flow-icon{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:rgba(229,57,53,.12); border:1px solid rgba(229,57,53,.28);
  color:var(--cr-red); margin:0 auto 6px;
}
.repair-flow .flow-icon i{ font-size:1.15rem; line-height:1; }
.repair-flow .flow-connector{
  height:2px; width:44px; flex:0 0 44px; border-radius:2px;
  background:linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,.08));
}

.issue-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.issue-chips .chip{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.45rem .65rem; border-radius:999px;
  border:1px solid #e7ecf6; background:#fff; color:#1d232b;
  font-weight:600; font-size:.9rem;
}
.issue-chips .chip i{ color:var(--cr-red); }

.mini-card{
  background:#fff; border:1px solid #eaeef5; border-radius:1rem; padding:1.15rem;
  box-shadow:0 .35rem 1rem rgba(15,17,20,.06);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.mini-card:hover{ transform:translateY(-2px); box-shadow:0 .75rem 1.5rem rgba(15,17,20,.12); border-color:#e3e8f2; }
.mini-icon{
  width:44px; height:44px; border-radius:11px; display:grid; place-items:center;
  background:rgba(229,57,53,.10); border:1px solid rgba(229,57,53,.25);
  color:var(--cr-red); margin-bottom:.5rem;
}
.mini-icon i{ font-size:1.15rem; }

.repair-cta{
  display:flex; align-items:center; gap:14px;
  background:var(--cr-red); color:#fff; border-radius:.9rem;
  padding:.85rem 1rem; box-shadow:0 .8rem 1.6rem rgba(229,57,53,.25);
}
.repair-cta .stat{ font-weight:700; white-space:nowrap; }
.repair-cta .stat i{ color:#fff; }

/* 13) AUTO-EL (auto-el.html) --------------------------------------------- */
/* Optional compact flow (if used elsewhere) */
.el-flow{
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(145deg,#1a1d22,#0f1216);
  border:1px solid rgba(255,255,255,.06);
  border-radius:1rem; padding:14px 16px;
  box-shadow:0 .6rem 1.2rem rgba(0,0,0,.25); overflow:auto;
}
.el-flow .step{ min-width:142px; text-align:center; color:#eaf0f9; }
.el-flow .ico{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:rgba(229,57,53,.12); border:1px solid rgba(229,57,53,.28);
  color:var(--cr-red); margin:0 auto 6px;
}
.el-flow .ico i{ font-size:1.15rem; }
.el-flow .line{
  height:2px; width:44px; flex:0 0 44px; border-radius:2px;
  background:linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,.08));
}

/* Fault chips */
.fault-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.fault-chips .chip{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.45rem .65rem; border-radius:999px;
  border:1px solid #e7ecf6; background:#fff; color:#1d232b; font-weight:600; font-size:.9rem;
}
.fault-chips .chip i{ color:var(--cr-red); }

/* EL – Creative set (.elx*) */
.elx{}
.elx-icons .elx-tile{
  display:flex; align-items:center; gap:.75rem;
  background:#fff; border:1px solid #eaeef5; border-radius:1rem;
  padding:.9rem 1rem; text-decoration:none; color:#1d232b;
  box-shadow:0 .35rem 1rem rgba(15,17,20,.06);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.elx-icons .elx-tile:hover{ transform:translateY(-2px); box-shadow:0 .75rem 1.5rem rgba(15,17,20,.12); border-color:#e3e8f2; }
.elx-icons .ico-ring{
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:
    radial-gradient(closest-side, rgba(229,57,53,.12) 65%, transparent 66%) padding-box,
    conic-gradient(from 220deg, rgba(229,57,53,.25), rgba(229,57,53,.05)) border-box;
  border:1px solid rgba(229,57,53,.25); color:var(--cr-red);
}
.elx-icons .ico-ring i{ font-size:1.25rem; }

.elx-vertical{ position:relative; margin-left:.3rem; }
.elx-vertical::before{
  content:""; position:absolute; left:17px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(#e7ecf6,#dfe5f1); border-radius:2px;
}
.elx-vertical .elx-step{ display:flex; gap:.75rem; position:relative; padding:.35rem 0 .6rem 0; }
.elx-vertical .elx-step .dot{
  flex:0 0 34px; height:34px; border-radius:50%; display:grid; place-items:center;
  color:var(--cr-red); background:#fff; border:1px solid rgba(229,57,53,.28);
}
.elx-vertical .elx-step .dot i{ font-size:1rem; line-height:1; }
.elx-vertical .elx-step .body small{ color:#6b7891; }

.elx-media{
  display:flex; gap:.75rem; background:var(--cr-gray);
  border:1px solid rgba(255,255,255,.06); border-radius:1rem;
  padding:1rem; color:#e8eef9;
}
.elx-media-ico{
  width:44px; height:44px; border-radius:11px; display:grid; place-items:center;
  background:rgba(229,57,53,.15); border:1px solid rgba(229,57,53,.28); color:var(--cr-red);
}
.elx-media ul li{ display:flex; align-items:center; gap:.35rem; }
.elx-media ul i{ color:#fff; opacity:.9; }

.elx-kpis{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--cr-red); color:#fff; border-radius:.9rem;
  padding:.9rem 1rem; box-shadow:0 .8rem 1.6rem rgba(229,57,53,.25);
}
.elx-kpis .kpi{ display:flex; flex-direction:column; align-items:flex-start; }
.elx-kpis .kpi .num{ font-weight:900; font-size:1.15rem; line-height:1; }
.elx-kpis .kpi .lbl{ font-size:.85rem; opacity:.95; }

.accordion-button .bi{ color:var(--cr-red); }

/* 14) DÆK & FÆLGE (daek-faelge.html) ------------------------------------- */
.season-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.season-chips .chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .8rem; border-radius:999px; border:1px solid #e7ecf6;
  background:#fff; color:#1d232b; font-weight:600; font-size:.95rem;
}
.season-chips .chip i{ color:var(--cr-red); }
.season-chips .chip.active{ background:rgba(229,57,53,.08); border-color:rgba(229,57,53,.35); }

.ty-service{
  background:#fff; border:1px solid #eaeef5; border-radius:1rem; padding:1.1rem;
  box-shadow:0 .35rem 1rem rgba(15,17,20,.06); transition:.18s; height:100%;
}
.ty-service:hover{ transform:translateY(-2px); box-shadow:0 .75rem 1.5rem rgba(15,17,20,.12); border-color:#e3e8f2; }
.ty-ico{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:rgba(229,57,53,.10); border:1px solid rgba(229,57,53,.25);
  color:var(--cr-red); margin-bottom:.6rem;
}
.ty-ico i{ font-size:1.15rem; }

.ty-dark{
  background:var(--cr-gray); border:1px solid rgba(255,255,255,.06);
  border-radius:1rem; padding:1.15rem; color:#e8eef9;
}

.label-badges{ display:flex; flex-wrap:wrap; gap:10px; }
.label-badges .badge-eu{
  display:flex; align-items:center; gap:.4rem;
  border:1px solid #eaeef5; border-radius:.65rem;
  padding:.45rem .6rem; font-weight:700;
  box-shadow:0 .25rem .75rem rgba(15,17,20,.06);
}
.badge-eu i{ color:var(--cr-red); }
.badge-eu small{ font-weight:600; color:#6b7891; }

.mount-flow{
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(145deg,#1a1d22,#0f1216);
  border:1px solid rgba(255,255,255,.06);
  border-radius:1rem; padding:14px 16px;
  box-shadow:0 .6rem 1.2rem rgba(0,0,0,.25); overflow:auto;
}
.mount-flow .step{
  /* hard reset to keep dark look (avoid global .step collisions) */
  min-width:150px; text-align:center; color:#eaf0f9;
  background:transparent !important; border:0 !important;
  box-shadow:none !important; padding:0 !important;
}
.mount-flow .dot{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:rgba(229,57,53,.12); border:1px solid rgba(229,57,53,.28);
  color:var(--cr-red); margin:0 auto 6px;
}
.mount-flow .dot i{ font-size:1.15rem; }
.mount-flow .line{
  height:2px; width:44px; flex:0 0 44px; border-radius:2px;
  background:linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,.08));
}

.hotel-band{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--cr-red); color:#fff; border-radius:.9rem;
  padding:.9rem 1rem; box-shadow:0 .8rem 1.6rem rgba(229,57,53,.25);
}
.hotel-band .kpi{ font-weight:800; white-space:nowrap; }

/* 15) DREJEARBEJDE (drejearbejde.html) ----------------------------------- */
/* Spec ribbon under title */
.spec-ribbon{ display:flex; flex-wrap:wrap; gap:.5rem; }
.spec-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .6rem; border-radius:.6rem; font-weight:700;
  background:rgba(229,57,53,.12); border:1px solid rgba(229,57,53,.30);
  color:#fff;
}
.spec-chip i{ opacity:.9; }

/* Light feature cards (small variant) */
.fcard{
  background:#fff; border:1px solid #eaeef5; border-radius:1rem; padding:1.1rem; height:100%;
  box-shadow:0 .35rem 1rem rgba(15,17,20,.06); transition:.18s;
}
.fcard:hover{ transform:translateY(-2px); box-shadow:0 .75rem 1.5rem rgba(15,17,20,.12); border-color:#e3e8f2; }
.f-ico{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:rgba(229,57,53,.10); border:1px solid rgba(229,57,53,.25);
  color:var(--cr-red); margin-bottom:.55rem;
}

/* 3-step process track (SCOPED – avoids mount-flow conflicts) */
.track{
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:.5rem; align-items:center;
}
@media (max-width:768px){
  .track{ grid-template-columns:1fr; gap:.75rem; }
  .track .arrow{ display:none; }
}
.track .step{
  background:#fff; border:1px solid #eaeef5; border-radius:.9rem; padding:.8rem;
  box-shadow:0 .25rem .75rem rgba(15,17,20,.06);
}
.track .step .badge-ico{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
  background:#f6f8fc; color:var(--cr-red); border:1px solid #e7ecf6;
}
.track .arrow{ color:#d0d7e6; }

/* Case image + caption */
.case{
  position:relative; border-radius:1rem; overflow:hidden;
  box-shadow:0 .6rem 1.2rem rgba(0,0,0,.25);
}
.case .cap{
  position:absolute; left:0; right:0; bottom:0; padding:.65rem .9rem; color:#fff;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.65)); font-size:.95rem;
}

/* Benefit card (white) */
.benefits{
  background:#fff; border:1px solid #eaeef5; border-radius:1rem; padding:1.1rem;
  box-shadow:0 .35rem 1rem rgba(15,17,20,.06);
}
.benefits li{ display:flex; gap:.45rem; align-items:flex-start; }
.benefits li i{ color:var(--cr-red); }