/* =========================
   Variabler & grundinställning
   ========================= */
   :root {
    --bg: #000;
    --surface: #fff;
    --surface-2: #f9f9f9;
    --text: #383838;
    --muted: #383838;
    --brand: #54b747;
    --brand-2: #54b747;
    --link: #54b747;
    --ok: #54b747;
    --maxw: 1120px;
    --radius: 16px;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }
  
  * { box-sizing: border-box; }
  

  #oppettider {
    background: #ececec;
  }

  html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
  }

  main {background: #f9f9f9;}
  
  body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
  }
  
  a { color: var(--link); text-decoration: none; }
  a:hover { text-decoration: underline; }
  
  img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    display: block;
  }

  figure img {
    box-shadow: var(--shadow);
  }
  
  .container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 20px;
  }
  
  /* =========================
     Header
     ========================= */

  .topbar {
    display: flex; align-items: center; justify-content: space-between; padding: 14px 0;
  }
  .brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: .3px; }
  .brand__logo { width: 36px; height: 36px; border-radius: 10px; background: var(--brand); display: inline-block; }
  nav {margin-left: 24px;}
  nav ul { list-style: none; display: flex; gap: 0px; padding: 0; margin: 0; align-items: center; }
  nav a { color: #ccc; opacity: .9; font-weight: 600; padding: 12px 18px; border-radius: 24px; }
  nav a.active { 

    background: #fff;
    color: #000;
   }
  
  /* =========================
     Hero
     ========================= */
  .hero { padding: clamp(36px, 6vw, 88px) 0; }
  .hero figure { height: 100%; width: 100%; }
  .hero img { height: 100%; width: 100%; object-fit: cover; }
  
  .hero__wrap {
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: center;
  }
  
  .hero__card {
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    padding: clamp(18px, 3vw, 28px);
    border-radius: calc(var(--radius) + 4px);
    box-shadow: var(--shadow);
  }
  
  .eyebrow {
    display: inline-block; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--brand-2); font-weight: 700; margin-bottom: 6px;
  }
  
  h1 { font-size: clamp(28px, 4.2vw, 48px); line-height: 1.1; margin: 0 0 10px; }
  
  .lead { font-size: clamp(16px, 1.4vw, 18px); color: var(--muted); margin: 12px 0 20px; }
  
  /* HERO-PRIS: scope:a så det inte påverkar listpriser */
  .hero .price {
    font-weight: 800;
    font-size: clamp(22px, 3vw, 28px);
    color: var(--text);
  }
  .hero .price small { font-weight: 600; color: var(--muted); }
  
  /* =========================
     Knappar & CTA
     ========================= */
  .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
  figure { margin: 0; }
  
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 32px; font-weight: 700; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08); background: var(--brand); color: #fff; box-shadow: var(--shadow);
  }
  .btn:hover { filter: brightness(.98); text-decoration: none; }
  .btn.alt { background: transparent; color: var(--text); border-color: rgba(255,255,255,.15); }
  
  /* =========================
     Grid & kort
     ========================= */
  .grid { display: grid; gap: 22px; }
  .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  
  .card {
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    padding: 18px; border-radius: var(--radius); box-shadow: var(--shadow);
  }
  .card h3 { margin: 6px 0 8px; margin-bottom: 12px;}
  
  /* =========================
     Sektioner
     ========================= */
  .section { padding: clamp(48px, 5vw, 96px) 0; }
  .section__header { margin-bottom: 20px; }
  .section__header h2 { margin: 0 0 6px; font-size: clamp(22px, 3vw, 34px);     line-height: 1.1; padding-bottom: 12px }
  .section__header p { color: var(--muted); margin: 0; }
  
  /* =========================
     Övriga komponenter
     ========================= */
  .note {
    border: 1px dashed rgba(0,0,0,.1);
    color: var(--text); padding: 14px; border-radius: var(--radius);
    background: #fff;
  }
  .hours { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; }
  .hours strong { font-weight: 700; }
  .hours .time { justify-self: end; color: var(--muted); }
  
  .badge {
    display: inline-block; padding: 6px 10px; border-radius: 999px;
    background: #383838; color: #fff; font-weight: 700; font-size: .85rem;
  }
  
  abbr {text-decoration: none;}
  
  .faq details {
    background: #1a2028; border-radius: var(--radius); margin-bottom: 10px; padding: 14px;
    border: 1px solid rgba(255,255,255,.06);
  }
  .faq summary { cursor: pointer; font-weight: 700; }
  
  /* =========================
     Footer
     ========================= */
  footer { background: #0a0d11; color: #ccc; border-top: 1px solid rgba(255,255,255,.08); padding: 32px 0; }
  footer a {color: #fff;}
  address { font-style: normal; color: var(--muted); }
  footer address {color: #ccc;}
  
  /* =========================
     Booking-lista (accordion)
     ========================= */
  
  /* Referens uppe till höger (tidigare "17268") */
  .booking .ref {
    position: absolute; top: 12px; right: 16px; color: #fff; opacity: .25; font-size: 12px;
  }
  
  /* Kategori-accordion */
  .category {
    margin: 0 0 14px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: calc(var(--radius) + 2px);
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    box-shadow: var(--shadow);
    overflow: clip;
  }
  .category summary::-webkit-details-marker { display: none; }
  .category summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--surface) 80%, var(--surface-2) 80%);
    border-bottom: 1px solid rgba(255,255,255,.06);
    user-select: none;
  }
  .category summary h3 { margin: 0; font-size: 1.05rem; font-weight: 700; }
  .category summary::after {
    content: ""; margin-left: auto; inline-size: 8px; block-size: 8px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(-45deg); opacity: .8; transition: transform .2s ease;
  }
  .category[open] summary::after { transform: rotate(135deg); }
  
  /* Lista med tjänster */
  .services { margin: 0; padding: 0; list-style: none; }
  .services li {padding-bottom: 24px;}
  .service {
    display: grid; grid-template-columns: 1fr auto;
    align-items: center; gap: 8px 16px;
    padding: 12px 14px;
    border-top: 1px solid rgba(0,0,0,.06);
    border-bottom: 1px solid rgba(0,0,0,.06);
    transition: background-color .15s ease;
  }
  .service:first-child { border-top: 0; }
  .service:hover { background: rgba(0,0,0,.03); }
  
  .service h4 { margin: 0; font-weight: 700; font-size: 1rem; }
  
  /* Pris/metarad – fixad layout */
  .service p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: .95rem;
    display: inline-flex;          /* radbryt snyggt på små skärmar */
    gap: .35rem .6rem;
    flex-wrap: wrap;
    align-items: baseline;
    font-variant-numeric: tabular-nums;  /* jämna siffror */
  }
  
  /* Gör priset tydligt */
  .service p span:first-of-type {
    color: var(--text);
    font-weight: 700;
  }
  
  /* Automatiskt "·" före sista span (Läs mer) */
  .service p span + span::before {
    content: "·";
    opacity: .6;
    margin: 0 .35rem;
  }
  
  
  /* Friskvård-märke i listan (scope:a till services) */
  .services .badge {
    margin: 0 0 6px; padding: 4px 8px; border-radius: 999px;
    background: #ceeeda; color: #0f3d2a; font-weight: 700; font-size: .75rem;
  }
  
  /* Boka-knappen */
  .book {
    display: flex; align-items: center; justify-content: center;
    padding: 10px 14px; min-width: 92px; width: fit-content;
    border-radius: 999px; font-weight: 800; text-decoration: none;
    background: none; color: #fff;
    border: 1px solid var(--brand); box-shadow: var(--shadow);
    transition: filter .15s ease, transform .05s ease;
    color: var(--brand); font-weight: 500;
    margin-top: 12px;
  }
  .book:hover { filter: brightness(.98); }
  .book:active { transform: translateY(1px); }
  
  /* Tangentbordsfokus (även på summary) */
  .book:focus-visible,
  .category summary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(255,255,255,.06);
    border-color: transparent;
  }
  
  /* =========================
     Responsivitet
     ========================= */

     .split {display: flex; gap: 48px; align-items: center;}
     .split div {width: 100%; max-width: 400px;}
     figure {width: 100%; min-width: 50%;}
    .split.reverse {flex-direction: row-reverse;}

    .hero__card {margin-left: -72px;}

    .closeNav {display: none; background: none; border: 0;}

    .openNav {display: none; background: none; border: 0;}

    .closeNavBtn {display: none; justify-content: flex-end; background: none; border: 0; margin-top: -12px; margin-right: -24px;}
    .openNavBtn {display: none; justify-content: flex-end; background: none; border: 0;}
    .closeNavBtn button {background: none; border: 0;}

#start {display: none;}
    @media (max-width: 980px) {#start {display: block;}}

  @media (max-width: 980px) {
    nav {
      width: 100%;
      position: fixed;
      top: 0;
      height: 100vh;
      right: -100%;
      transition: right 0.35s;
      margin-left: 0;
     }
     .brand {margin-right: auto;}
     .brand svg {max-height: 38px; width: auto;}
     nav a {text-align: center;}
     nav ul li:last-child a {margin-top: 32px;}
     .closeNavBtn {display: flex; justify-content: flex-end;}
     .openNavBtn {display: block;}
     nav.active {right: 0;}
     .openNav {display: block;}
     .closeNav {display: block; z-index: 1; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}

     nav ul {
      position: absolute; right: 0;
      background: #000;
      width: 100%;
      height: 100%;
      max-width: 270px;
      display: block; padding: 32px;
      z-index: 2;
    }

    nav ul a {width: 100%; display: block;}

    .hero__wrap { grid-template-columns: 1fr; }
    .grid.two, .grid.three { grid-template-columns: 1fr; }
    .split {flex-direction: column;}
    .split.reverse {flex-direction: column;}
    .hero__card { margin-left: 0;}
  }


  
  @media (max-width: 720px) {
    .service { grid-template-columns: 1fr; align-items: start; }
    .book { width: 100%; margin-top: 6px; }

    .hero img {max-height: 370px;}

  }
  
  /* Divider längst ned */
  .divider {
    margin: 20px 0 0; border: 0; height: 1px; background: rgba(255,255,255,.08);
  }
  

.timerow {height: 72px; display: flex; align-items: center;     border-bottom: 1px solid rgba(0, 0, 0, .06);}
div .timerow:last-child {border-bottom: 0;}
.time {margin-left: auto;}

@media (max-width: 550px) { 
  .timerow {display: block; height: auto; margin-bottom: 16px; padding-bottom: 16px;}
  div .timerow:last-child {margin-bottom: 0;}
}

#site-header {position: sticky; z-index: 100; background: #000; top: 0; left: 0; padding-left: 16px; padding-right: 8px;}

#offer {margin: 0; padding: 0; margin-left: 6px; margin-right: 6px;}

#offer .offer {
  display: flex; gap: 24px;
}

.offer {background: #fff6e0; padding: 32px; border: 1px #d1caba solid; border-radius: 24px;}

.offer img {width: 100%; object-fit: cover;}
.offer div {width: 100%;}
@media (max-width: 980px) {
  .offer {display: block !important;}
  .offer img {margin-bottom: 24px;}
}

h2 {margin-top: 0;}



/* Baslayout */
.ratings {
  --card-bg: #fff;
  --card-bd: #e6e6e6;
  --text: #1f2328;
  --muted: #70757a;
  --brand-google: #4285F4;
  --brand-boka: #111827;
  --star: #f5a623;   /* ”amber” */
  --star-bg: #e5e7eb;/* ljusgrå */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  align-items: start;
}

@media (prefers-color-scheme: dark) {
  .ratings {
    --card-bg: #fff;
    --card-bd: #ccc;
    --muted: #9aa3ad;
    --star-bg: #ccc;
  }
}

.rating-card {
  background: var(--card-bg);

  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04);
  color: var(--text);
}

/* Provider-rad */
.provider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-weight: 600;
}
.provider-logo {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  font-weight: 800;
  color: #fff;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.provider-logo.google { background: var(--brand-google); }
.provider-logo.boka   { background: var(--brand-boka); }
.provider-name { font-size: 16px; }

/* Stjärnor (pure CSS) */
.stars {
  position: relative;
  display: inline-block;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 2px;
}
.stars-base,
.stars-fill {
  font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", ui-sans-serif, system-ui, -apple-system, sans-serif;
  /* Använder text-stjärnor för maximal kompatibilitet */
}
.stars-base {
  color: var(--star-bg);
}
.stars-fill {
  color: var(--star);
  position: absolute;
  top: 0; left: 0;
  width: calc(var(--rating) / 5 * 100%); /* 4.5 → 90% fyllning */
  overflow: hidden;
  white-space: nowrap;
}

/* Sifferrad */
.scoreline {
  margin-top: 8px;
  color: var(--text);
  font-size: 15px;
}
.scoreline .value { font-weight: 700; }
.scoreline .slash,
.scoreline .best { color: var(--muted); }
.scoreline .count { color: var(--muted); margin-left: 6px; }

/* Uppdateringsrad */
.last-updated {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  padding-left: 12px;
  opacity: 0.5;
}