/* styles.css */
:root{
  /* Default = dark (kan ändras via data-theme eller systeminställning) */
  --bg:#0f0f0f;          /* mörkare bakgrund */
  --card:#151515;        /* mörkare cards */
  --text:#f2f2f2;
  --muted:#bdbdbd;
  --stroke:#303030;      /* lite mer definition runt cards/btn */

  --btn:#242424;         /* ljusare knappar */
  --btnHover:#2f2f2f;    /* lite ljusare hover */

  --accent:#F79917;
  --accentHover: color-mix(in srgb, var(--accent) 82%, #fff);

  --ok:#28c17a;
  --okhover:#18e786;
  --warn:#ffb020;

  --inputBg:#1b1b1b;     /* inputs mellan card och btn */
  --shadow:0 10px 30px rgba(0,0,0,.45);
}

/* Light mode */
html[data-theme="light"]{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#111827;
  --muted:#b3b3b3;
  --stroke:#e5e7eb;
  --btn:#f3f4f6;
  --btnHover:#e5e7eb;

  --inputBg:#ffffff;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --accentHover: color-mix(in srgb, var(--accent) 88%, #000);

}

*{ box-sizing:border-box; }
html,
body{
  height: 100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.wrap{
  width:100%;
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
  padding:22px;
  flex:1 0 auto;
}


.top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; margin-bottom:18px;
}
h1{ margin:0; letter-spacing:.2px; }
.sub{ margin:6px 0 0; color:var(--muted); }

.card{
  width:100%;
  max-width:100%;
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:18px;
  box-shadow: var(--shadow);
}

.wrap > .card{
  width:100%;
}

.progress{
  display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap;
}
.pill{
  padding:6px 10px;
  border:1px solid var(--stroke);
  border-radius:999px;
  color:var(--muted);
  background:rgba(255,255,255,.02);
}
.pill.active{
  border-color:rgba(228,75,75,.45);
  color:var(--text);
}

.step h2{
  margin: 8px 0 14px;
  font-size: 18px;      /* ändra storlek här */
  font-weight: 800;    /* tjocklek */
  letter-spacing: -0.02em;
  text-align: center;
  line-height: 1.15;
}
.block{ padding:14px; border:1px solid var(--stroke); border-radius:14px; margin:12px 0; }
.blockHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:-20px;
}

.blockHead h3{
  margin:0;
  font-size:15px;
  color:var(--text);
  font-weight:800; /* behåll rubrikkänslan */
}

/* Dölj rubriken visuellt men behåll layouten */
#blkFindBy .blockHead h3{
  visibility: hidden;
}
.findByTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin:0 0 10px;
}

.findByTop .hint{
  margin:0;
}

.findByTop .formResetBtn{
  align-self:flex-start;
}
.findByTopRow{
  position:relative;
  min-height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 10px;
}

.findByTopRow #findByIntroHint{
  margin:0;
  text-align:center;
  padding:0 44px;
}

.findByTopRow .formResetBtn{
  position:absolute;
  top:0;
  right:0;
  z-index:1;
}
.stepTitleRow{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 32px;
  margin: 8px 0 0px;
  padding: 0 44px; /* ger plats så rubriken förblir centrerad trots knapp */
}

.stepTitleRow h2{
  margin: 0; /* vi flyttar marginalen till .stepTitleRow istället */
  font-size: 17px;
}

.stepTitleRow .formResetBtn{
  position: absolute;
  right: 0;
  top: 40%;
  transform: translateY(-50%);
  z-index: 1;
}

.hint{
  text-align: center;
  margin: 0 0 10px;
  color:var(--muted);
  font-size:13px;
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
#cflBaseOptions{
  display:flex;
  gap:12px;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding-bottom:6px;
}

#cflBaseOptions .btn.option{
  flex:1 1 0;
  min-width:120px;
}

#cflBaseOptions .btn.option.isTile{
  aspect-ratio: 1 / 2.35; /* lite högre */
}


@media (max-width: 420px){
  .grid{ gap:10px; }
  .btn.option.isTile{ padding:8px; }
  .btn.option.isTile .optImg{ width:64px; height:64px; }
  .option .title{ font-size:13px; }
  .option .meta{ font-size:11px; }
}

@media (max-width: 420px){
  #findByTabs .btn.option.isTile{
    aspect-ratio: 1 / 1.5;
  }
}
/* =====================================================
   FIND MY LIGHT BY – gör ENBART de 3 startknapparna högre
   (utan att påverka andra knappar)
   ===================================================== */
#findByTabs .btn.option.isTile{
  aspect-ratio: 1 / 1.95; /* öka/sänk vid behov (1/1.15 = lite, 1/1.30 = mer) */
}

.siteHeader{
  background: transparent;
  padding: 18px 0 0px;
}

.siteHeaderInner{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 5px;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 64px;
}

/* Loggan i mitten */
.brand{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;

  text-decoration: none;
  color: var(--text);
}

.logoText{
  font-family: "BBH Bogle", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 22px;
  line-height: 1.05;
}

.logoSub{
  font-family: "Google Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.1;
  opacity: .85;
  margin-top: 2px;
}

/* Actions till höger */
.topActions{
  display: flex;
  align-items: center;
  gap: 10px;

  align-self: flex-start;
}

html[data-theme="dark"] .btnSettings{
  filter: invert(1.5) contrast(1.1);
}
/* ✅ Left actions (language button) */
.leftActions{
  position: absolute;
  top: 2px;
  left: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Round language button */
#btnLangQuick{
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--btn) 60%, transparent);
  display: grid;
  place-items: center;
}

/* Match your “lift up” feeling like settings */
#btnLangQuick{
  position: relative;
  left: 10px;
  top: -10px; /* same as #btnSettings */
}

/* Round language button */
#btnLangQuick{
  width: 30px;
  height: 30px;
  padding: 0;
  border-color: #fff;
  border-radius: 999px;
  background: color-mix(in srgb, var(--btn) 60%, transparent);
  display: grid;
  place-items: center;

  /* ADD THIS */
  border: 1px solid var(--stroke);
}

/* ADD THIS: white border in dark mode */
html:not([data-theme="light"]) #btnLangQuick{
  border-color: rgba(255,255,255,.7);
}

#btnLangQuick:hover{
  background: color-mix(in srgb, var(--btnHover) 100%, transparent);
}

#btnLangQuick:focus-visible{
  outline: 2px solid var(--stroke);
  outline-offset: 2px;
}

/* Flag inside (circular crop) */
#btnLangQuick img{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  object-fit: center;
  display: block;
}

/* IMPORTANT: never invert flags in dark mode */
html:not([data-theme="light"]) #btnLangQuick img,
html[data-theme="light"] #btnLangQuick img{
  filter: none !important;
}

/* Mobile: keep in top-left corner (like settings is top-right) */
@media (max-width: 520px){
  .leftActions{
    position: absolute;
    top: 2px;
    left: 2px;
  }
}


/* Flytta settings-knappen upp (desktop + mobil) */
#btnSettings{
  position: relative;
  top: -20px; /* <-- justera värdet tills det sitter perfekt */
  right: 0px;
}


@media (max-width: 520px){
  .siteHeaderInner{
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    padding-top: 14px;
    padding-bottom: 0px;
  }

  .brand{
    position: static;
    transform: none;
  }

  .topActions{
    position: absolute;
    top: 2px;
    right: 2px;
  }
}

.siteFooter{
  background: transparent;
  padding: 20px 0 10px;  /* 10px “luft” från botten */
}

.siteFooterInner{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}

/* Länkar överst */
.footerLinks{
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* Behåll storlek men ge samma färg som loggan */
.footerLinks a{
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
}

.footerLinks a:hover{
  text-decoration: underline;
}

.footerFineprint{
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;

  margin-bottom: 12px;
}

.row{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-top:10px; }
.label{ display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:13px; }
input{
  width:220px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background: var(--inputBg);
  color:var(--text);
  outline:none;
}

.btn{
  border:1px solid var(--stroke);
  background:var(--btn);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  transition:background .15s ease, transform .04s ease;
  text-align:left;
}
.btn:hover{ background:var(--btnHover); }
.btn:active{ transform:translateY(1px); }
.btn.ghost{ background:transparent; }

/* Option buttons (default) */
.option{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.option .title{ font-weight:600; }
.option .meta{ font-size:12px; color:var(--muted); }

/* Inline “image/icon” container (SVG) */
.option .optIcon{
  display:none;            /* syns bara i tile-varianten */
}

/* Tile buttons: bild i mitten, text i botten */
.btn.option.isTile{
  aspect-ratio: 1 / 1;
  padding: 12px;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  gap: 6px;
}

/* Bilden: auto-margins gör att den hamnar i mitten och trycker ner texten */
.btn.option.isTile .optImg{
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;

  margin: auto 0;      /* <-- nyckeln: centrerar bilden vertikalt */
  flex: 0 0 auto;
}

/* Viktigt: se till att selected-masken aldrig blockerar klick */
.btn.option.isTile{
  position: relative;
}

.btn.option.isTile::before,
.btn.option.isTile.selected::before{
  pointer-events: none;
}

/* Dark mode: gör ikonerna vita (invertera svart -> vitt) */
/* Dark mode – behåll originalfärg på formulärknapparnas bilder */
html:not([data-theme="light"]) .formResetBtn img,
html:not([data-theme="light"]) #btnSettings .spSettingsIcon{
  filter: invert(1) brightness(1.05);
}

/* Light mode: behåll original (svarta) */
html[data-theme="light"] .btn.option.isTile .optImg,
html[data-theme="light"] .formResetBtn img,
html[data-theme="light"] #btnSettings .spSettingsIcon{
  filter: none;
}

.btn.option.isTile .title{
  font-weight: 600;
}

.btn.option.isTile .meta{
  font-size: 12px;
  color: var(--muted);
}

/* Selected (default): grön border + grön inset-ring */
.btn.selected{
  border-color: var(--ok);
  box-shadow: 0 0 0 2px var(--ok) inset;
}

/* Dark mode: lägg till en diskret glow runt knappen */
html:not([data-theme="light"]) .btn.selected{
  box-shadow:
    0 0 0 2px var(--ok) inset,
    0 0 18px rgba(40,193,122,.28);
}

.btn:disabled{
  cursor:not-allowed;

  /* Undvik att "mörka ner allt" så text blir oläslig */
  opacity: 1;

  /* Theme-säkert: funkar i både dark och light */
  background: var(--btn);
  /* Lite mer "disabled"-känsla (fallback är raden ovan) */
  background: color-mix(in srgb, var(--btn) 70%, var(--bg));

  color: var(--muted);
  border-color: var(--stroke);
}

/* Se till att hover inte ändrar disabled */
.btn:disabled:hover{
  background: var(--btn);
  background: color-mix(in srgb, var(--btn) 70%, var(--bg));
}

/* Disabled tiles: tona ner bild och håll text tydlig */
.btn.option:disabled .optImg{
  opacity: .45;
  filter: grayscale(1);
}

.btn.option:disabled .title,
.btn.option:disabled .meta{
  color: var(--muted);
}

.warn{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,176,32,.35);
  background:rgba(255,176,32,.06);
  color:#ffd28a;
  font-size:13px;
}

.resultTop{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; margin-bottom:14px;
}
.resultActions{ display:flex; gap:10px; }
.resultGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
}
.resultItem{
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:14px;
  background:rgba(255,255,255,.02);
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  color:var(--muted);
  margin-bottom:10px;
}
.badge b{ color:var(--text); }
.kv{ margin:6px 0 10px; color:var(--muted); font-size:13px; }
.buyRow{ display:flex; gap:10px; flex-wrap:wrap; }

.foot{ color:var(--muted); margin-top:14px; font-size:13px; }
code{ color:#ffd28a; }

/* Smooth theme transition */
html, body,
.card, .block,
.btn, input,
.pill, .resultItem,
.warn {
  transition:
    background-color 220ms ease,
    color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

a {
  transition:
    background-color 220ms ease,
    color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

/* === Grid endast för formuläret (INTE globala cards / terms / about) === */
#step1 .grid,
#step2 .grid,
#step3 .grid,
#resultCard .grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

/* Knapparna ska kunna krympa utan att tvinga radbrytning */
.btn.option {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  width: 100% !important;
}

/* Gör att bilder och text skalar snyggt även på små mobiler */
.btn.option.isTile{
  --tileAR: 1 / 1;                 /* default = square */
  aspect-ratio: var(--tileAR);
  padding: 8px;
}

.btn.option.isTile .optImg{
  width: 48px;
  height: 48px;
  object-fit: contain;
}
/* WATTAGE: fler (smalare) knappar per rad */
#wattPresets{
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* 5 per rad på desktop */
}

@media (max-width: 900px){
  #wattPresets{
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 per rad på mindre skärmar */
  }
}

@media (max-width: 420px){
  #wattPresets{
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 per rad på mobil så det inte blir löjligt smått */
  }
}

/* Ta bort min-width som annars tvingar grid-cellerna att bli för stora */
#wattPresets .btn.option{
  min-width: 0;
}

/* (valfritt men snyggt) lite tajtare padding så de känns mindre */
#wattPresets .btn.option.isTile{
  padding: 8px 6px;
}
#wattPresets .btn.option > *{
  margin: 0 auto;
}

#blkWatt .row{
  width: 100%;
  justify-content: center;
}

#blkWatt .row > #wattPresets{
  flex: 1 1 100%;
  width: 100%;
}

/* ✅ Startknapparna ("Find my light by") – högre */
#findByTabs .btn.option.isTile{
  --tileAR: 1 / 1.30;              /* ändra här om du vill ännu högre/lägre */
}

/* ✅ Övriga “stående” tile-knappar i formuläret – lite högre */
#findByOptions .btn.option.isTile,
#socketOptions .btn.option.isTile,
#spotShapeOptions .btn.option.isTile,
#wattPresets .btn.option.isTile,
#purposeOptions .btn.option.isTile,
#cctOptions .btn.option.isTile{
  --tileAR: 1 / 1.18;
}

/* Type of technology: lite högre tiles */
#findByOptions [data-step="technology"] .btn.option.isTile{
  min-height: 150px;   /* höjden du är ute efter */
  max-height: 250px;
  padding-top: 14px;
  padding-bottom: 14px;
}

@media (min-width: 560px){
  #findByOptions [data-step="technology"] .grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

#switchOptions .btn.option{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;

  aspect-ratio: 1 / 1.18;
  padding: 12px;
}

#switchOptions .btn.option .optImg{
  width: 48px;
  height: 48px;
  object-fit: contain;
  display:block;
  margin: auto 0;
  flex: 0 0 auto;
}

#switchOptions .btn.option .title{
  font-weight: 600;
}

#switchOptions .btn.option .meta{
  font-size: 12px;
  color: var(--muted);
}
#purposeOptions .btn.option,
#cctOptions .btn.option{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;

  aspect-ratio: 1 / 1.18;
  padding: 12px;
}

#purposeOptions .btn.option .optImg,
#cctOptions .btn.option .optImg{
  width: 48px;
  height: 48px;
  object-fit: contain;
  display:block;
  margin: auto 0;
  flex: 0 0 auto;
}

#purposeOptions .btn.option .title,
#cctOptions .btn.option .title{
  font-weight: 600;
}

#purposeOptions .btn.option .meta,
#cctOptions .btn.option .meta{
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 420px){
  #purposeOptions .btn.option,
  #cctOptions .btn.option{ padding:8px; }

  #purposeOptions .btn.option .optImg,
  #cctOptions .btn.option .optImg{ width:64px; height:64px; }
}


@media (max-width: 420px){
  #switchOptions .btn.option{ padding:8px; }
  #switchOptions .btn.option .optImg{ width:64px; height:64px; }
}

/* =====================================================
   ABOUT US – PAGE SCOPED STYLING
   ===================================================== */

/* Identifiera sidan */
.aboutPage {}

/* --- Header (About us) --- */
.aboutPage .top h1{
  font-size: 28px;
  line-height: 1.1;
  margin-bottom: 6px;
}

.aboutPage .top .sub{
  font-size: 14px;
  line-height: 1.4;
}

/* --- Card --- */
.aboutPage .aboutCard{
  overflow: hidden;
}

/* --- Bild --- */
.aboutPage .aboutImg{
  width: 100%;
  display: block;

  height: 420px;
  object-fit: cover;

  border: 1px solid color-mix(in srgb, var(--stroke) 55%, transparent);
  border-radius: 10px;
  box-shadow: none;

  margin-bottom: 16px;
}

/* --- Rubrik i kortet (Vår idé) --- */
.aboutPage .aboutText h2{
  font-size: 20px;
  line-height: 1.2;
  margin-bottom: 10px;
  text-align: center;
}

/* --- Brödtext --- */
.aboutPage .aboutText p{
  font-size: 15px;
  line-height: 1.55;
  color: none;
  margin: 0;
}

/* Avstånd mellan stycken */
.aboutPage .aboutText p + p{
  margin-top: 14px;
}

/* --- Mobiljustering --- */
@media (max-width: 520px){
  .aboutPage .top h1{
    font-size: 24px;
  }

  .aboutPage .aboutImg{
    height: 300px;
  }

  .aboutPage .aboutText p{
    font-size: 14px;
  }
}

.siteFooter{
  flex-shrink: 0;
}

/* =====================================================
   TERMS PAGE – WIDTH + FULL HEIGHT + INNER SCROLL
   ===================================================== */

/* Gör Terms-sidan bredare än standard-wrap och minska “luften” */
.termsPage .wrap{
  max-width: 1100px;                 /* <-- ändra till 1200/1280 om du vill */
  margin: 0 auto;
  padding-left: clamp(12px, 2vw, 20px);
  padding-right: clamp(12px, 2vw, 20px);
  padding-top: 18px;
  padding-bottom: 18px;

  flex: 1 0 auto;
}

/* Viktigt: Terms-layout ska vara column (inte row) */
.termsWrap{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;                     /* behövs för att inner-scroll ska funka */
}

/* Din tomma "top" (layout-paritet) ska inte påverka bredd/flow */
.termsPage .termsWrap > .top{
  display: none;
}

/* Ytterkortet */
.termsCard{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;

  /* behåll din fullhöjd-känsla, men gör det flex-vänligt */
  flex: 1 1 auto;
  min-height: 0;
  height: calc(100dvh - 220px);
}

/* Titel */
.termsHeader{
  flex: 0 0 auto;
  text-align: center;
}

.termsTitle{
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.termsMeta{
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* Ruta i rutan (scroll) */
.termsInner{
  flex: 1 1 auto;
  min-height: 0;

  background: var(--bg);
  border: 1px solid var(--stroke);
  border-radius: 12px;

  padding: 14px;                     /* lite mindre = mindre “luft” */
  overflow-y: auto;
}

/* Texten */
.termsText{
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: 14px;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* Notisen längst ner */
.termsFooterNote{
  flex: 0 0 auto;
  margin-top: -10px;
  font-size: 11px;
  text-align: center;
}

/* ===== FORM RESET ICON (ISOLERAD) ===== */
.formResetBtn{
  all: unset;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  cursor:pointer;
  flex:0 0 auto;
}

.formResetBtn img{
  width:22px;
  height:22px;
  display:block;
  pointer-events:none;
}
/* Selected tile icon = exakt var(--ok) (mask), ingen hue-rotate-trix */
html:not([data-theme="light"]) .btn.option.isTile.selected .optImg{
  display:none; /* vi ritar ikonen via ::before istället */
}

/* Visa originalbild även när selected i dark mode */
html:not([data-theme="light"]) .btn.option.isTile.selected .optImg{
  display: block;
}

html:not([data-theme="light"]) .btn.option.isTile.selected::before{
  content: none;
}

/* Responsiv ikonstorlek (skalar med skärmen men har min/max) */
.btn.option.isTile{
  --tileIcon: clamp(65px, 12vw, 120px);
}

/* ===== FORM IMG SCALE // OVERRIDE // ===== */

/* Vanlig bild-ikon */
.btn.option.isTile .optImg{
  width: var(--tileIcon);
  height: var(--tileIcon);
  object-fit: contain;
}

/* Mask-ikonen (selected i dark mode) */
html:not([data-theme="light"]) .btn.option.isTile.selected::before{
  width: var(--tileIcon);
  height: var(--tileIcon);
}

/* =====================================================
   FAQ PAGE – ACCORDION (PAGE SCOPED)
   ===================================================== */

.faqPage{
  flex: 1 0 auto;
}

.faqHero{
  text-align: center;
  padding: 22px;
}

.faqTitle{
  margin: 6px 0 8px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.faqLead{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.faqList{
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Varje FAQ-rad = smalt avlångt “kort” */
.faqItem{
  width: 100%;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Ta bort default marker */
.faqItem > summary{
  list-style: none;
}
.faqItem > summary::-webkit-details-marker{
  display: none;
}

.faqQ{
  cursor: pointer;
  user-select: none;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 14px;
}

.faqQText{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.faqIcon{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: block;
  background: transparent;
  border: 0;
  border-radius: 0;
  transition: transform 60ms cubic-bezier(.4,0,.2,1);
}

.faqItem[open] .faqIcon{
  transform: rotate(-180deg);
}

.faqQ:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
  border-radius: 12px;
}

.faqA{
  padding: 0 14px 14px;
  border-top: 0;
}
.faqA p{
  margin: 12px 0 0;
  color: color-mix(in srgb, var(--text) 80%, var(--muted));
  font-size: 13px;
  line-height: 1.6;
}

/* FAQ – chevron icon theme handling */
html:not([data-theme="light"]) .faqIcon{
  filter: invert(1) brightness(1.05);
}

html[data-theme="light"] .faqIcon{
  filter: none;
}

/* Mobil finlir */
@media (max-width: 520px){
  .faqHero{ padding: 18px; }
  .faqTitle{ font-size: 20px; }
  .faqQ{ padding: 12px 12px; }
  .faqA{ padding: 0 12px 12px; }
}

/* =====================================================
   LIGHTING SCHOOL – PAGE
   ===================================================== */

.schoolPage{
  flex: 1 0 auto;
}

/* Hero */
.schoolHero{
  text-align: center;
  padding: 22px;
}
.schoolTitle{
  margin: 6px 0 8px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.schoolLead{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* =====================================================
   TOPICS (6 portrait tiles, 2 rader, egna bilder)
   ===================================================== */

.schoolTopics{
  margin: 14px auto 0;      /* centrera */
  max-width: 980px;         /* ✅ stoppar “gigantiska” tiles */
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* default */
  gap: 12px;
}

/* Tile (stående rektangel) */
.schoolTile{
  border: 1px solid var(--stroke);
  background: var(--card);          /* ✅ samma som övrigt innehåll */
  color: var(--text);
  border-radius: 16px;
  box-shadow: var(--shadow);
  cursor: pointer;

  padding: 12px;
  aspect-ratio: 3 / 4;
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  transition: background .15s ease, transform .04s ease, border-color 220ms ease, box-shadow 220ms ease;
}

/* Hover: subtil “lyft”, utan annan bakgrundsfärg */
.schoolTile:hover{
  background: var(--card);
  border-color: color-mix(in srgb, var(--stroke) 60%, var(--text));
}
.schoolTile:active{ transform: translateY(1px); }

/* Bild i mitten */
.schoolTileIcon{
  flex: 1 1 auto;
  width: 100%;
  display: grid;
  place-items: center;
}

.schoolIconImg{
  width: clamp(40px, 4vw, 72px);  /* ✅ mindre i stor vy */
  height: auto;
  max-height: 72%;
  object-fit: contain;
  display: block;
}

/* Text längst ner */
.schoolTileLabel{
  margin-top: 10px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--text);
  opacity: .95;
}

/* Active marker */
.schoolTile.isActive{
  border-color: var(--ok);
  box-shadow: 0 0 0 2px var(--ok) inset;
}
html:not([data-theme="light"]) .schoolTile.isActive{
  box-shadow:
    0 0 0 2px var(--ok) inset,
    0 0 18px rgba(40,193,122,.28);
}

/* =====================================================
   COMPACT MODE (AVSTÄNGD) – behåll samma storlek
   ===================================================== */

/* Vi låter isCompact vara kvar som “state” i JS, men den ändrar inget visuellt */
.schoolTopics.isCompact{}

/* (ingen nedskalning, ingen hide av text, ingen bild-resize) */

/* =====================================================
   CONTENT HEADER
   ===================================================== */

.schoolContent{
  margin-top: 14px;
}
.schoolSectionTitleRow{
  margin: 12px 0 12px;
  text-align: center;
}
.schoolSectionTitle{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.schoolSectionSub{
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

/* =====================================================
   LIST (FAQ-lik)
   ===================================================== */

.schoolList{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.schoolItem{
  width: 100%;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ta bort default marker */
.schoolItem > summary{
  list-style: none;
}
.schoolItem > summary::-webkit-details-marker{
  display: none;
}

/* question row */
.schoolQ{
  cursor: pointer;
  user-select: none;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 14px;
}

.schoolQText{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* chevron = enbart bild, ingen rotation */
.schoolChevron{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: block;
}
.schoolItem[open] .schoolChevron{
  transform: rotate(-180deg);
  transition: transform 60ms cubic-bezier(.4,0,.2,1);
  opacity: 0.9;
}
/* Dark mode: invertera chevron-ikonen i Lighting School */
html:not([data-theme="light"]) .schoolChevron{
  filter: invert(1) brightness(1.05);
}


/* Light mode: behåll original */
html[data-theme="light"] .schoolChevron{
  filter: none;
}

/* answer */
.schoolA{
  padding: 0 14px 14px;
}

/* Bas-typografi inuti svar (tillåter styling) */
.schoolA p{
  margin: 12px 0 0;
  color: color-mix(in srgb, var(--text) 80%, var(--muted));
  font-size: 13px;
  line-height: 1.65;
}
.schoolA ul{
  margin: 12px 0 0;
  padding-left: 18px;
  color: color-mix(in srgb, var(--text) 80%, var(--muted));
  font-size: 13px;
  line-height: 1.65;
}
.schoolA li + li{ margin-top: 6px; }

/* Smått textstöd */
.schoolSmall{
  font-size: 12px;
  color: var(--muted);
}

/* Callout-box du kan använda i svaren */
.schoolCallout{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--stroke) 60%, transparent);
  background: color-mix(in srgb, var(--bg) 60%, var(--card));
  color: color-mix(in srgb, var(--text) 85%, var(--muted));
  font-size: 13px;
  line-height: 1.55;
}

/* Bilder i svar */
.schoolImg{
  width: 100%;
  display: block;
  margin-top: 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--stroke) 55%, transparent);
}

/* Mobil – behåll 3 kolumner (2 rader), inga scrollbars */
@media (max-width: 520px){
  .schoolTopics{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .schoolTile{
    border-radius: 14px;
    padding: 10px;
    aspect-ratio: 3 / 4;
  }
  .schoolIconImg{
    width: clamp(34px, 10vw, 58px);
  }
}

/* Större vyer: fler kolumner så de inte blir enorma */
@media (min-width: 900px){
  .schoolTopics{
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 per rad */
    max-width: 1100px;
  }
}

@media (min-width: 1200px){
  .schoolTopics{
    grid-template-columns: repeat(6, minmax(0, 1fr)); /* 6 per rad */
    max-width: 1200px;
  }
}

/* =====================================================
   404 – PAGE
   ===================================================== */

.notFoundPage{
  flex: 1 0 auto;
}

/* Centrera 404-kortet i mitten av skärmen */
.notFoundWrap{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;

  /* ✅ Detta stoppar kortet från att slå i kanterna på smala skärmar */
  padding: clamp(14px, 4vw, 24px);
}

/* Kortet */
.notFoundCard{
  text-align: center;

  /* ✅ Tar aldrig mer plats än vad som finns innanför paddingen */
  width: min(520px, 100%);
  max-width: 520px;

  padding: clamp(16px, 4vw, 26px) clamp(14px, 4vw, 18px);
}

/* 404 */
.notFoundCode{
  font-size: clamp(52px, 18vw, 110px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;
}

/* Rubrik + text */
.notFoundTitle{
  margin: 8px 0 0;
  font-size: clamp(16px, 4.4vw, 18px);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.notFoundText{
  margin: 8px 0 0;
  color: var(--muted);
  font-size: clamp(12px, 3.6vw, 13px);
  line-height: 1.55;
}

/* Knapp under kortet */
.notFoundActions{
  width: 100%;
  max-width: 520px;
  display: flex;
  justify-content: center;
}

.notFoundBtn{
  width: 100%;
  max-width: 360px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: clamp(10px, 3.6vw, 12px) clamp(12px, 3.8vw, 14px);

  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 10px; /* mindre rundade hörn */
  box-shadow: var(--shadow);

  text-decoration: none;
  color: var(--text);

  transition:
    background .15s ease,
    transform .04s ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.notFoundBtn:hover{
  background: var(--btnHover);
}

.notFoundBtn:active{
  transform: translateY(1px);
}

.notFoundBtnText{
  flex: 1;
  text-align: center;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.01em;
}

/* Kvadratisk ikon längst till höger */
.notFoundBtnIcon{
  width: clamp(16px, 4.5vw, 18px);
  height: clamp(16px, 4.5vw, 18px);
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
  border-radius: 0;
}

/* Theme-säker ikon */
html:not([data-theme="light"]) .notFoundBtnIcon{
  filter: invert(1) brightness(1.05);
}
html[data-theme="light"] .notFoundBtnIcon{
  filter: none;
}

.subBlock{
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 55%, var(--card));
}

.subBlockTitle{
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.inlineExpand{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
}

/* =====================================================
   FORM – KATEGORI-RUBRIKER i EXPAND-PANELEN
   (Type of technology / Type of bulb / Type of usage osv)
   ===================================================== */

#findByPanel .hint{
  margin: 18px 0 10px; /* <-- mer luft uppåt, lite kvar nedåt */
  color: color-mix(in srgb, var(--text) 100%, var(--muted)) !important;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* App intro under "Find my light by" */
.appIntro{
  margin-top: 12px;
  text-align: center;
}

.appIntro h3{
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 800;
}

.appIntro p{
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

/* =====================================================
   RESULTS CARD
   ===================================================== */

.resultsCard{
  margin-top: 30px;
  /* Behåll .card's default padding/border */
}

.resultsCard .resultItem{
  width: 100%;
  border: 1px solid var(--stroke);  /* ✅ grå border runt hela innehållet */
  border-radius: 14px;
  padding: 14px;
  background: transparent;
  text-align: center;
}

.resultsHeader{
  display: block;
  margin: 2px 0 14px;
}

.resultsHeader h2{
  margin: 0;
  font-size: clamp(2px, 7vw, 22px);
  font-weight: 900;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.resultsHeader .sub{
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.resultItem h3{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
}

.resultMeta{
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.btnPrimary{
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(340px, 100%);
  margin: 0 auto;
  font-weight: 800;
  text-align: center;
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
  text-decoration: none;
}

.btnPrimary:hover{
  background-color: var(--okhover);
  border-color: var(--okhover);
  text-decoration: none;
}

.btnPrimary:visited{
  color: #fff;
  text-decoration: none;
}
/* Provider override: AliExpress */
.btnPrimary.btnProviderAli{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btnPrimary.btnProviderAli:hover{
  background: var(--accentHover);
  border-color: var(--accentHover);
}

.btnPrimary.btnProviderAli:visited{
  color: #fff;
}

.resultsNote{
  margin: 14px 0 0;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

/* Klickbar result-note utan hover/bakgrund */
.resultsNote[role="button"]{
  cursor: pointer;
}

/* =====================================================
   RESULTS – LOADING OVERLAY
   ===================================================== */

/* Gör overlay-positionering möjlig */
.resultsCard .resultItem{
  position: relative;
  overflow: hidden;
}

/* När vi laddar: tona ner cardet lite */
.resultsCard.isLoading{
  opacity: .92;
}

/* Innehållet finns kvar (så kortets storlek/layout ändras inte) */
.resultsInner{
  transform: translateZ(0);
}

/* Under loading: göm innehållet med opacity (ingen “snap”) */
.resultsCard.isLoading .resultsInner{
  opacity: 0;
  transform: scale(0.985);
  pointer-events: none;
}

/* Overlay finns alltid men är normalt osynlig */
.resultsLoader{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  background: color-mix(in srgb, var(--card) 55%, transparent);

  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

/* Under loading: visa overlay */
.resultsCard.isLoading .resultsLoader{
  opacity: 1;
  pointer-events: auto;
}

/* Liten badge så gif:en känns “inbyggd” i din UI-stil */
.resultsLoaderBadge{
  width: 112px;
  height: 112px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}

/* Gif-storlek */
.resultsLoaderGif{
  width: 74px;
  height: 74px;
  display: block;
  object-fit: contain;

  /* default = darkmode: behåll original */
  filter: none;
}

/* Lightmode: invertera vit gif så den blir mörk */
html[data-theme="light"] .resultsLoaderGif{
  filter: opacity(0.25) invert(1.5) contrast(1.1);
}

/* Punch-scale på innehållet (påverkar inte layout/kortets storlek) */
.resultsInner{
  transform: translateZ(0); /* bra för smoother transform */
}

/* Klass som triggas av JS efter loading */
.resultsCard .resultsInner.punchIn{
  animation: resultsPunchIn 820ms cubic-bezier(.2, 1.2, .2, 1);
  will-change: transform, opacity;
}

@keyframes resultsPunchIn{
  0%   { transform: scale(0.985); opacity: .8; }
  55%  { transform: scale(1.035); opacity: 1; }
  75%  { transform: scale(0.995); }
  100% { transform: scale(1); }
}

/* =====================================================
   BTN OPTION - img override
   ===================================================== */
/* Mono cliparts (socket/switch/tech) -> invert i darkmode */
html:not([data-theme="light"]) .btn.option[data-mono="1"] .optImg{
  filter: invert(1) brightness(1.05);
}

html[data-theme="light"] .btn.option[data-mono="1"] .optImg{
  filter: none;
}

/* Disabled: behåll invert + tona ner */
.btn.option:disabled[data-mono="1"] .optImg{
  filter: invert(1) brightness(1.05) grayscale(1);
  opacity: .45;
}

html[data-theme="light"] .btn.option:disabled[data-mono="1"] .optImg{
  filter: grayscale(1);
  opacity: .45;
}

/* ==========================
   LUMEN PICKER (after CCT)
   ========================== */
.lumenPicker{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding-top:6px;
}

.lumenIcon{
  width:78px;
  height:78px;
  border-radius:999px;
  background: #fff;
  /* box-shadow styrs i JS för "ljus-glow" */
}

.lumenHint{
  text-align:center;
  max-width:46ch;
}

.lumenSlider{
  width:min(360px, 100%);
  height: 28px;
}

.lumenHintWrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
}

.lumenHintTitle{
  padding-top: 30px;
  text-transform: uppercase;
  color: var(--text);
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
}

.lumenHintSub{
  font-style: italic;
  text-align: center;
  font-size: 0.8em;
  padding-bottom: 10px;
  margin: 0;
  color: var(--muted);
}

/* Mjuk text-swap när lumens-hinten ändras */
.lumenHintTitle,
.lumenHintSub{
  transition: opacity 200ms ease, transform 100ms ease, filter 160ms ease;
  will-change: opacity, transform, filter;
}

.lumenHintWrap.isHintSwap .lumenHintTitle,
.lumenHintWrap.isHintSwap .lumenHintSub{
  opacity: 0;
  transform: translateY(-6px);
  filter: blur(2px);
}

/* Respektera "reduce motion" */
@media (prefers-reduced-motion: reduce){
  .lumenHintTitle,
  .lumenHintSub{
    transition: none;
  }
}

#btnSetLumens{
  width: min(320px, 100%);
  text-align: center;
  font-weight: 700;
  color: #fff;              /* alltid vit text */
  text-decoration: none;
}