/* Redigeraren: formulär till vänster, telefonen till höger. På mobil ligger
   förhandsvisningen bakom en knapp och öppnas i helskärm. */

.redigerare { min-height: 100vh; }
.topp {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 4rem;
  padding: 0 1rem;
  background: rgba(240, 235, 226, .96);
  border-bottom: 1px solid var(--kant);
}
.topp .ordmarke span { display: none; }
@media (min-width: 560px) { .topp .ordmarke span { display: inline; } .topp { padding: 0 1.5rem; } }
.sparat { flex: 1; min-width: 0; font-size: .85rem; color: var(--dampad); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topp-knappar { display: flex; gap: .5rem; }

/* Första steget: "Vad firar ni?" med ett stort svartvitt foto (valkomst.js).
   Fotot till vänster, valen som en redaktionell lista till höger. Bytet
   mellan foton är bara opacitet. Under topplisten, så att språk syns. */
.valkomst-oppen, .valkomst-oppen body { overflow: hidden; }
/* Redigerarens egna verktyg hör inte hemma i det första steget. */
.valkomst-oppen #stegnav, .valkomst-oppen .visa-forhand, .valkomst-oppen #topp-las-upp, .valkomst-oppen .sparat { visibility: hidden; }
.valkomst {
  position: fixed; inset: 4rem 0 0; z-index: 35;
  display: grid; grid-template-rows: 38svh minmax(0, 1fr);
  background: var(--papper); overflow: hidden;
}
.valkomst-foto { position: relative; overflow: hidden; background: #1b1714; }
.valkomst-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center 25%; opacity: 0; transition: opacity .55s linear;
}
.valkomst-foto img.aktiv { opacity: 1; }
.valkomst-foto img[data-for="student"] { object-position: 60% 30%; }
.valkomst-text { overflow-y: auto; padding: 1.75rem var(--gutter) 2.5rem; }
.valkomst-rubrik { margin-top: .75rem; font-size: clamp(2.6rem, 9vw, 5rem); font-weight: 400; line-height: .98; letter-spacing: -.045em; }
.valkomst-ingress { max-width: 30rem; margin-top: 1rem; color: var(--dampad); line-height: 1.55; }
.valkomst-val { list-style: none; margin: 1.75rem 0 0; padding: 0; border-top: 1px solid var(--kant-stark); }
.valkomst-val a {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: baseline; column-gap: .5rem;
  padding: 1.05rem .25rem; border-bottom: 1px solid var(--kant-stark);
  text-decoration: none; color: var(--blaeck); transition: background-color .2s var(--ut), padding .25s var(--ut);
}
/* En tom ring som blir ett rött lacksigill när raden väljs */
.valkomst-nr {
  align-self: center; grid-row: 1 / span 2; width: .7rem; height: .7rem;
  border-radius: 52% 47% 50% 46% / 48% 53% 47% 52%;
  box-shadow: inset 0 0 0 1.5px var(--kant-stark);
  transition: background-color .2s var(--ut), box-shadow .2s var(--ut);
}
.valkomst-val a:hover .valkomst-nr, .valkomst-val a:focus-visible .valkomst-nr, .valkomst-val a.vald .valkomst-nr {
  background: var(--rod, #c42121);
  box-shadow: inset 0 0 0 .14rem var(--rod, #c42121), inset 0 0 0 .19rem rgba(255, 255, 255, .3);
}
.valkomst-namn { font-size: clamp(1.35rem, 4.6vw, 1.75rem); letter-spacing: -.03em; line-height: 1.15; }
.valkomst-val small { grid-column: 2; font-size: .85rem; color: var(--dampad); }
.valkomst-val a::after {
  content: ""; grid-column: 3; grid-row: 1 / span 2; align-self: center; width: 1.1rem; height: 1.1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11m-4-4.5L15.5 10 11 14.5' fill='none' stroke='%23210c02' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .35; transition: opacity .2s var(--ut), transform .25s var(--ut);
}
.valkomst-val a:hover, .valkomst-val a:focus-visible, .valkomst-val a.vald { background: rgba(255, 255, 255, .55); padding-left: .75rem; }
.valkomst-val a:hover::after, .valkomst-val a:focus-visible::after, .valkomst-val a.vald::after { opacity: 1; transform: translateX(3px); }
.valkomst-val a:focus-visible { outline: 2px solid var(--blaeck); outline-offset: -2px; }
.valkomst.vald .valkomst-val a:not(.vald) { opacity: .45; }
@media (min-width: 900px) {
  .valkomst { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .valkomst-text { display: flex; flex-direction: column; justify-content: safe center; padding: 3rem clamp(2rem, 5vw, 5.5rem); }
  .valkomst-val { max-width: 34rem; }
}
@media (prefers-reduced-motion: reduce) {
  .valkomst-foto img, .valkomst-val a, .valkomst-val a::after { transition: none; }
}

.arbetsyta { display: grid; }

/* Stegnavigering: hoppa mellan stegen, bocka för det som är ifyllt */
.stegnav {
  position: sticky;
  top: 4rem;
  z-index: 35;
  display: flex;
  gap: .4rem;
  padding: .55rem 1rem;
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(240, 235, 226, .96);
  border-bottom: 1px solid var(--kant);
}
.stegnav::-webkit-scrollbar { display: none; }
.stegnav a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2.25rem;
  padding: 0 .85rem;
  border-radius: 9999px;
  background: var(--vit);
  color: var(--dampad);
  font-weight: 500;
  font-size: .82rem;
  text-decoration: none;
}
.stegnav a.klar { color: var(--blaeck); }
.stegnav a.klar::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--gron); }
.stegnav a.aktiv { background: var(--blaeck); color: var(--papper); }
@media (min-width: 1000px) { .stegnav { padding: .55rem 1.5rem; } }
.steg { scroll-margin-top: 7.5rem; }

/* Banderoller överst i panelen */
.banderoll { display: grid; gap: .8rem; padding: 1.1rem 1.25rem; border-radius: 16px; background: var(--blaeck); color: var(--papper); }
.banderoll-ljus { background: var(--isbla); color: var(--blaeck); }
.banderoll-knappar { display: flex; flex-wrap: wrap; gap: .5rem; }
.banderoll .knapp { justify-self: start; }
.banderoll:not(.banderoll-ljus) .knapp { background: var(--papper); color: var(--blaeck); }
#sparat-epost { color: var(--rod); font-weight: 600; }
@media (min-width: 1000px) {
  .arbetsyta { grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); }
}

.panel { padding: 1rem 1rem 7rem; display: grid; gap: 1rem; align-content: start; }
@media (min-width: 560px) { .panel { padding: 1.5rem 1.5rem 7rem; } }
@media (min-width: 1000px) { .panel { padding: 1.5rem 1.5rem 4rem; border-right: 1px solid var(--kant); } }

.steg { display: grid; gap: 1rem; padding: 1.5rem; border-radius: 24px; background: var(--vit); scroll-margin-top: 5rem; }
.steg-rubrik { display: flex; align-items: center; gap: .75rem; font-size: 1.35rem; line-height: 1.15; letter-spacing: -.02em; }
.steg-nr { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--papper); font-family: var(--mono); font-size: .85rem; }
.hjalp { font-size: .85rem; line-height: 1.5; color: var(--dampad); }
.falt-etikett { font-weight: 600; font-size: .875rem; }

.textknapp {
  justify-self: start;
  min-height: 2.75rem;
  padding: .3rem 0;
  border: 0;
  background: none;
  color: var(--blaeck);
  font: 500 .9rem/1.4 var(--sans);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.textknapp:hover { color: var(--rod); }

/* Mall och palett */
.mallval { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.tillfallen { display: flex; flex-wrap: wrap; gap: .45rem; }
.tillfalle { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: 9999px; background: var(--papper); font-weight: 500; font-size: .9rem; cursor: pointer; }
.tillfalle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tillfalle:has(input:checked) { background: var(--blaeck); color: var(--papper); }
.tillfalle:has(input:focus-visible) { outline: 2px solid var(--rod); outline-offset: 2px; }
.mallval-kort { position: relative; display: grid; gap: .5rem; padding: .5rem; border-radius: 16px; background: var(--papper); cursor: pointer; text-align: center; font-weight: 600; font-size: .9rem; }
.mallval-kort img { width: 100%; aspect-ratio: 1 / 1.2; object-fit: cover; object-position: top; border-radius: 10px; }
.mallval-kort input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mallval-kort:has(input:checked) { box-shadow: inset 0 0 0 2px var(--blaeck); }
.mallval-kort:has(input:focus-visible) { outline: 2px solid var(--rod); outline-offset: 2px; }
.paletter { display: flex; flex-wrap: wrap; gap: .5rem; }
.palett { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem .35rem .4rem; border-radius: 9999px; background: var(--papper); font-size: .85rem; font-weight: 500; cursor: pointer; }
.palett input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.palett-prov { width: 1.6rem; height: 1.6rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(33, 12, 2, .15); }
.palett:has(input:checked) { box-shadow: inset 0 0 0 2px var(--blaeck); }
.palett:has(input:focus-visible) { outline: 2px solid var(--rod); outline-offset: 2px; }

/* AI-rutan */
.ai-ruta { display: grid; gap: .8rem; padding: 1.1rem; border-radius: 16px; background: var(--isbla); }
.ai-rubrik { display: flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .95rem; }
.ai-rubrik svg { width: 1.1rem; height: 1.1rem; color: var(--bla); }
.ai-ruta .knapp { justify-self: start; }
.ai-ruta .falt input, .ai-ruta .falt select, .ai-ruta .falt textarea { border-color: rgba(33, 12, 2, .18); }

.extra { border-radius: 16px; background: var(--papper); padding: .2rem 1rem; }
.extra summary { padding: .8rem 0; cursor: pointer; font-weight: 600; font-size: .9rem; }
.extra[open] { padding-bottom: 1rem; display: grid; gap: .9rem; }
.personlig-tag { display: inline-block; margin-left: .4rem; padding: .1rem .5rem; border-radius: 9999px; background: var(--blaeck); color: var(--papper); font-size: .68rem; font-weight: 600; letter-spacing: .06em; vertical-align: .1em; }

/* Listor */
.lista { display: grid; gap: .75rem; }
.lista:empty { display: none; }
.rad { display: grid; gap: .7rem; padding: 1rem; border-radius: 16px; background: var(--papper); }
.rad-schema { grid-template-columns: minmax(0, 6rem) minmax(0, 1fr); }
.ta-bort { font-size: .82rem; color: var(--dampad); }

/* Media */
.uppladdning { display: grid; gap: .7rem; }
.filknapp { position: relative; justify-self: start; overflow: hidden; }
.filknapp input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.filknapp:focus-within { outline: 2px solid var(--rod); outline-offset: 3px; }
.media-forhand { display: flex; align-items: center; gap: 1rem; }
.media-forhand img, .media-forhand video { width: 5.5rem; height: 5.5rem; object-fit: cover; border-radius: 12px; background: var(--papper); }

/* Adress */
.adressfalt { display: flex; align-items: stretch; border: 1px solid var(--kant-stark); border-radius: 12px; background: var(--vit); overflow: hidden; }
.adressfalt:focus-within { outline: 2px solid var(--blaeck); border-color: var(--blaeck); }
.adress-bas { display: flex; align-items: center; padding: 0 .1rem 0 .9rem; color: var(--dampad); font-size: .95rem; white-space: nowrap; }
.falt .adressfalt input { border: 0; border-radius: 0; min-width: 0; padding-left: .1rem; }
.falt .adressfalt input:focus { outline: none; }

/* Lås upp */
.steg-las { box-shadow: inset 0 0 0 2px var(--blaeck); }
.las-rubrik { margin-top: .75rem; font-size: 1.2rem; letter-spacing: -.02em; }
#las-sektion { display: grid; gap: 1rem; }
/* Kontot i steg 9: inloggning eller "Sparat på kontot" */
.konto-ruta { display: grid; gap: .75rem; padding: 1.25rem; border-radius: 18px; background: var(--papper); }
.konto-ruta .las-rubrik { margin-top: 0; }
.konto-ruta .meddelande:empty { display: none; }
.inloggad { display: grid; gap: .25rem; }
.inloggad p:first-child { display: flex; align-items: center; gap: .55rem; font-weight: 600; word-break: break-all; }
.inloggad-prick { flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--gron); }
.paketval { display: grid; gap: .6rem; }
@media (min-width: 480px) { .paketval { grid-template-columns: 1fr 1fr; } }
.paket { position: relative; display: grid; gap: .2rem; padding: 1rem; border: 1px dashed var(--kant-stark); border-radius: 16px; background: var(--papper); cursor: pointer; }
.paket input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.paket:has(input:checked) { border: 2px solid var(--blaeck); background: var(--vit); padding: calc(1rem - 1px); }
.paket:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.paket:has(input:focus-visible) { outline: 2px solid var(--rod); outline-offset: 2px; }
.paket-namn { font-weight: 600; }
.paket-pris { font-size: 1.5rem; letter-spacing: -.03em; }
.paket-text { font-size: .82rem; color: var(--dampad); line-height: 1.4; }
.las-knapp { width: 100%; }
.upplast-text { font-weight: 600; }
.upplast-lank a { font-size: 1.1rem; word-break: break-all; }

/* Förhandsvisningen */
.forhand { display: none; }
@media (min-width: 1000px) {
  .forhand {
    position: sticky;
    top: 7rem;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 7rem);
    padding: 1rem 1.5rem 1.5rem;
  }
}
.forhand-verktyg { display: flex; justify-content: center; gap: .5rem; padding-bottom: .75rem; }
.forhand-stang { display: none; }
.telefon-yta { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-start; }
.telefon {
  width: 390px;
  height: 844px;
  flex: none;
  border-radius: 44px;
  overflow: hidden;
  background: #111;
  padding: 10px;
  box-shadow: 0 40px 80px -40px rgba(33, 12, 2, .6), 0 0 0 1px rgba(33, 12, 2, .2);
  transform-origin: top center;
}
.telefon iframe { width: 100%; height: 100%; border: 0; border-radius: 34px; background: var(--papper); display: block; }

.visa-forhand { position: fixed; z-index: 45; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); transform: translateX(-50%); box-shadow: 0 12px 30px -10px rgba(33, 12, 2, .5); }
@media (min-width: 1000px) { .visa-forhand { display: none; } }

.visar-forhand { overflow: hidden; }
.visar-forhand .forhand {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: .75rem .75rem 1rem;
  background: var(--papper);
}
.visar-forhand .forhand-stang { display: inline-flex; }
.telefon-yta { overflow: hidden; }
/* På mobilen är skärmen redan en telefon: ingen ram, full storlek. */
.visar-forhand .telefon-yta { align-items: stretch; }
.visar-forhand .telefon { width: 100%; height: 100%; padding: 0; border-radius: 16px; transform: none !important; box-shadow: 0 0 0 1px var(--kant); }
.visar-forhand .telefon iframe { border-radius: 16px; }
.visar-forhand .visa-forhand { display: none; }

/* Telefonen som en iPhone 17 Pro (samma som på säljsidan, i fasta mått) */
.telefon { position: relative; padding: 10px; border-radius: 58px; background: #050505; overflow: visible;
  box-shadow: 0 0 0 1.5px #1b1a19, 0 0 0 5.5px #c9c3b9, 0 0 0 6.5px #8d877e, inset 0 0 0 1px rgba(255,255,255,.06), 0 50px 90px -40px rgba(33,12,2,.65), 0 18px 34px -18px rgba(33,12,2,.4); }
.telefon iframe { border-radius: 48px; }
.telefon::before { content: ""; position: absolute; z-index: 3; top: 21px; left: 50%; width: 116px; height: 34px; transform: translateX(-50%); border-radius: 9999px; background: #000; pointer-events: none; }
.telefon::after { content: ""; position: absolute; top: 0; bottom: 0; left: -10px; right: -10px; pointer-events: none;
  background: linear-gradient(to bottom, transparent 17%, #a39d94 17% 21%, transparent 21% 25%, #a39d94 25% 32.5%, transparent 32.5% 34.5%, #a39d94 34.5% 42%, transparent 42%) left / 4px 100% no-repeat,
    linear-gradient(to bottom, transparent 27%, #a39d94 27% 39%, transparent 39% 57%, #8f8980 57% 64.5%, transparent 64.5%) right / 4px 100% no-repeat; }
.telefon-yta { overflow: visible; padding-top: 8px; }
.visar-forhand .telefon::before, .visar-forhand .telefon::after { display: none; }
.visar-forhand .telefon { background: transparent; }

/* Egen färg och logga (Personlig) */
.egen-farg-rad { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .75rem; }
.egen-farg { display: inline-flex; align-items: center; gap: .65rem; min-height: 2.75rem; cursor: pointer; font-size: .92rem; }
.egen-farg input[type="color"] { width: 2.4rem; height: 2.4rem; padding: 0; border: 1px solid var(--kant-stark); border-radius: 50%; background: none; cursor: pointer; }
.egen-farg input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.egen-farg input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.egen-farg small { color: var(--dampad); }
.logga-forhand img { object-fit: contain; padding: .5rem; background: repeating-conic-gradient(#e7e1d6 0 25%, #fff 0 50%) 50% / 12px 12px; }