/*
 * Novus — iOS-stil på Mina sidor.
 *
 * Johnny 2026-10-17: *«ja gör samma stil på mina sidor»* — efter att appen
 * (`css/app.css`, avsnittet «iOS-STIL I HELA APPEN») fått iPhones utseende.
 * Samma familj här: svart botten, grupperade ytor i #1C1C1E utan ram, tunna
 * avdelare, blå knappar och länkar utan versaler, blå vald flik.
 *
 * ⛔ EGEN FIL, laddad bara av mina.html och EFTER sajt.css. `sajt.css` bär
 * också den publika sajten — en ändring där hade gjort om startsidan.
 * ⚠️ Alla regler börjar med `body.minsida` så de väger tyngre än sajtens
 * `.minsida …` utan `!important`. Tas `body` bort slutar de gälla tyst.
 * ⚠️ Ingen backdrop-filter på listerna: sajt.css förklarar att iOS Safari då
 * kan sluta rita om en fast list under rullning. Solid färg i stället.
 */
body.minsida {
  --ios-bg: #000; --ios-grupp: #1C1C1E; --ios-grupp2: #2C2C2E; --ios-linje: #38383A;
  --ios-gra: #8E8E93; --ios-bla: #0A84FF; --ios-rod: #FF453A; --ios-gron: #30D158;
  --dis: var(--ios-gra); --ram: var(--ios-linje);
  background: var(--ios-bg);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Lokalbilden bakom allt tas bort — iOS-listor står på svart, och fotot gjorde
   texten svårläst (se skärmbilden 2026-10-17: loggan i bilden genom texten). */
body.minsida::before { background: var(--ios-bg); }

/* ── Ramen: navigationslist överst, flikrad nederst ─────────────────────── */
body.minsida .apphuvud { background: #121214; border-bottom: .5px solid var(--ios-linje); }
body.minsida .apphuvud-ut { color: var(--ios-bla); font-weight: 500; font-size: 1rem; }
body.minsida .bottenmeny { background: #121214; border-top: .5px solid var(--ios-linje); }
body.minsida .bottenflik { color: var(--ios-gra); }
body.minsida .bottenflik span { font-size: .66rem; font-weight: 500; letter-spacing: 0; }
body.minsida .bottenflik.aktiv, body.minsida .bottenflik.aktiv svg { color: var(--ios-bla); }
body.minsida .dorrlist { background: #121214; border-top: .5px solid var(--ios-linje); }
body.minsida .dorrknapp { border: 0; border-radius: 14px; background: var(--ios-bla);
  letter-spacing: 0; font-weight: 600; }
body.minsida .dorrknapp .ring { border-radius: 14px; }
body.minsida .dorrknapp:disabled { background: var(--ios-grupp); color: var(--ios-gra); }

/* ── Rubriker: iOS stora rubriker, inga spärrade versaler ───────────────── */
body.minsida .vy-rubrik { font-size: 2rem; font-weight: 700; letter-spacing: -.02em;
  text-transform: none; color: #fff; margin: .2rem 0 .8rem; }
body.minsida h2:not(.vy-rubrik):not(.dold-rubrik) { letter-spacing: -.01em; text-transform: none; }
body.minsida .etikett { color: var(--ios-gra); letter-spacing: .02em; text-transform: uppercase;
  font-size: .78rem; font-weight: 500; }
body.minsida .etikett::before { display: none; }
body.minsida .dis { color: var(--ios-gra); }

/* Tillbaka: iOS bakåtknapp — blå text med vinkel, ingen ram. */
body.minsida .tillbaka { border: 0; padding: .4rem 0; color: var(--ios-bla); font-size: 1.05rem; }
body.minsida .tillbaka:active { background: none; opacity: .5; color: var(--ios-bla); }

/* ── Grupperade ytor ────────────────────────────────────────────────────── */
body.minsida .panel, body.minsida .profilkort, body.minsida .kop-oppna,
body.minsida .kort, body.minsida .grind {
  background: var(--ios-grupp); border: 0; border-radius: 12px; box-shadow: none; }
body.minsida .kort:hover { border: 0; box-shadow: none; }
body.minsida .kort.framhavd { background: var(--ios-grupp); box-shadow: inset 0 0 0 1.5px var(--ios-bla); }
body.minsida .kort.vald { box-shadow: inset 0 0 0 2px var(--ios-bla); }
body.minsida .kort li svg { color: var(--ios-bla); }
body.minsida .kort .typ { color: var(--ios-gra); letter-spacing: .02em; }

/* Profilkortet: etikett och värde som en iOS-tabellrad. */
body.minsida .profilkort { padding: 0 1rem; }
body.minsida .pk-etikett { font-size: 1rem; letter-spacing: 0; text-transform: none; color: #fff; }
body.minsida .profilkort strong { font-weight: 400; color: var(--ios-gra); }
body.minsida .profilkort > div + div, body.minsida .profilkort .pk-fot { border-top: .5px solid var(--ios-linje); }

/* Listrader och avdelare. */
body.minsida .navrad, body.minsida .minrad, body.minsida .panel .fallbar {
  border-color: var(--ios-linje); border-bottom-width: .5px; }
body.minsida .navrad:active { background: var(--ios-grupp2); }
body.minsida .nr-titel { font-weight: 400; }
body.minsida .nr-pil { border-color: #5A5A5F; }
body.minsida .minrad .n { font-weight: 500; }

/* «Köp medlemskap» är en listrad, inte en ram. */
body.minsida .kop-oppna { font-weight: 400; }
body.minsida .kop-oppna .pil { color: #5A5A5F; }

/* ── Knappar ────────────────────────────────────────────────────────────── */
body.minsida .knapp { background: var(--ios-bla); color: #fff; border: 0; border-radius: 12px;
  text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 1rem;
  padding: .85rem 1.4rem; box-shadow: none; }
body.minsida .knapp:hover { box-shadow: none; }
body.minsida .knapp.tom { background: var(--ios-grupp2); color: var(--ios-bla); }
body.minsida .knapp.fara { background: transparent; color: var(--ios-rod); }
body.minsida .knapp.liten { padding: .55rem 1rem; font-size: .92rem; }
body.minsida .knapp[disabled] { opacity: .45; }

/* Märken. */
body.minsida .statuspill { border: 0; font-weight: 500; }
body.minsida .statuspill.aktiv { background: rgba(48, 209, 88, .16); color: var(--ios-gron); }
body.minsida .statuspill.ingen { background: var(--ios-grupp2); color: var(--ios-gra); }

/* ── Formulär: fälten som iOS-inmatning ─────────────────────────────────── */
body.minsida .min-falt label { font-weight: 500; }
body.minsida .min-falt input, body.minsida .min-falt textarea, body.minsida .min-falt select {
  background: var(--ios-grupp2); border: 0; border-radius: 10px; color: #fff; }
body.minsida .min-falt input:focus { outline: 2px solid var(--ios-bla); outline-offset: 0; }
body.minsida input[type="checkbox"] { accent-color: var(--ios-gron); }

/* Sidfoten: länkar i systemblått. */
body.minsida .app-slut a { color: var(--ios-bla); }

/* Rutan om introduktionspriser: en grupperad yta med blå kant till vänster,
   som en iOS-upplysning — inte sajtens glödande ram. */
body.minsida .oppningsruta { background: var(--ios-grupp); border: 0;
  border-left: 3px solid var(--ios-bla); border-radius: 12px; margin: .4rem 0 1.2rem;
  padding: 1rem 1.1rem; }
body.minsida .oppningsruta h3 { font-size: 1.15rem; font-weight: 600; }
body.minsida .oppningsruta p { color: var(--ios-gra); font-size: .95rem; }

/* Knapparna bredvid telefonfältet bar sajtens spärrade text. */
body.minsida .telrad .knapp { letter-spacing: 0; font-size: .92rem; font-weight: 600; }

/* ⛔ «Novus på hemskärmen» syns inte i Medlemskap. Johnny 2026-10-17: *«ta bort
   hemskärmsrutan på medlemskap»* — den lade sig över priserna, alltså över det
   man kommit dit för att välja. Rutan ritas av js/installera.js; här döljs den
   bara så länge Medlemskap är vald vy, och syns som förut i de andra vyerna. */
body.minsida:has(#vy-medlemskap:not([hidden])) #installera { display: none; }

/* ── Köpguiden (js/mina.js → kopGuide): en ruta, en fråga i taget ──────── */
body.minsida .kopguide { display: flex; flex-direction: column; }
body.minsida .guide-fraga { margin: 1.1rem 0 .45rem 1rem; font-size: .8rem; font-weight: 500;
  color: var(--ios-gra); text-transform: uppercase; letter-spacing: .03em; }
body.minsida .guide-fraga:first-child { margin-top: .3rem; }
body.minsida .guide-lista { margin: 0; }
body.minsida .guide-lista .nr-under { white-space: normal; }
body.minsida .guide-extra { color: var(--ios-gron); font-size: .8rem; line-height: 1.3; }
body.minsida .guide-bock { color: var(--ios-bla); font-size: 1.15rem; font-weight: 600; flex: none; }
body.minsida .navrad.guide-vald .nr-titel { color: var(--ios-bla); }
body.minsida .navrad:disabled { cursor: default; opacity: .55; }
body.minsida .guide-fot { margin: .45rem 1rem 0; color: var(--ios-gra); font-size: .82rem; line-height: 1.4; }
body.minsida .guide-knapp { margin-top: 1.2rem; width: 100%; }
body.minsida .guide-hej { margin: .7rem 1rem 0; color: var(--ios-gron); font-weight: 600; font-size: .95rem; }
body.minsida .guide-krock { margin: .6rem 0 0; padding: .9rem 1rem; border-radius: 12px;
  background: rgba(255,255,255,.06); display: flex; flex-wrap: wrap; gap: .5rem; }
@keyframes guideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes guidePepp { 0% { opacity: 0; transform: scale(.92); } 60% { opacity: 1; transform: scale(1.04); } 100% { transform: none; } }
@keyframes guideBock { 0% { transform: scale(.4); } 70% { transform: scale(1.25); } 100% { transform: none; } }
body.minsida .kopguide .guide-in { animation: guideIn .38s cubic-bezier(.2,.8,.2,1) both; }
body.minsida .kopguide .guide-hej.guide-in { animation-name: guidePepp; transform-origin: left center; }
body.minsida .kopguide .guide-bock { animation: guideBock .3s ease-out; display: inline-block; }
@media (prefers-reduced-motion: reduce) {
  body.minsida .kopguide .guide-in, body.minsida .kopguide .guide-bock { animation: none; }
}
body.minsida .benefits-intyg { display: flex; flex-direction: column; gap: .7rem; margin-top: .9rem; }
body.minsida .intyg-order { padding: .8rem 1rem; border-radius: 12px; border: 1px solid var(--ios-grupp2, #2c2c2e);
  background: var(--ios-grupp, #1c1c1e); color: inherit; font: inherit; }
body.minsida .intyg-kryss { align-items: flex-start; line-height: 1.4; }
body.minsida .guide-krock p { margin: 0 0 .3rem; width: 100%; line-height: 1.4; }
body.minsida .kopguide > .kort { margin-top: 1rem; }

/* Bekräftelsearket före betalningen — samma familj. ⚠️ Den gula rutan om
   återkommande dragningar behåller sin färg: den är en varning, inte pynt. */
body.minsida .ark-ruta { background: var(--ios-grupp); border-top: 0; border-radius: 14px 14px 0 0; }
body.minsida .ark-etikett { letter-spacing: .03em; color: var(--ios-gra); }
body.minsida .ark-ruta h3 { font-weight: 700; }
body.minsida .ark-pris { font-weight: 700; }
body.minsida .ark-kampanj { background: rgba(10, 132, 255, .16); border: 0; }
body.minsida .ark-abonnemang { border: 0; }
body.minsida .ark-period > div { border-bottom: .5px solid var(--ios-linje); }
body.minsida .ark-avtal { background: var(--ios-grupp2); border: 0; border-radius: 10px; }
body.minsida .ark-villkor a { color: var(--ios-bla); }
body.minsida .ark-villkor input[type=checkbox] { accent-color: var(--ios-bla); }
body.minsida .ark-ruta .knapp.tom { background: transparent; color: var(--ios-bla); }

/* ── Butiken: varukort (2026-10-25) ─────────────────────────────────────────
   Johnny: «luftigt stilrent». Två i bredd på telefonen, tre från 620 px. Bilden
   är kvadratisk och fyller rutan; text och pris står fritt under, utan ram, så
   bilden bär kortet. Hela kortet är en knapp. */
body.minsida .varor {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 1rem; margin-top: 1.2rem;
}
@media (min-width: 620px) { body.minsida .varor { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body.minsida .vara {
  all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: .2rem;
  cursor: pointer; min-width: 0; -webkit-tap-highlight-color: transparent;
}
body.minsida .vara:focus-visible { outline: 2px solid var(--ios-bla); outline-offset: 4px; border-radius: 14px; }
body.minsida .vara-bild {
  position: relative; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden;
  background: var(--ios-grupp); margin-bottom: .55rem;
  transition: transform .15s ease;
}
body.minsida .vara:active .vara-bild { transform: scale(.97); }
body.minsida .vara-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.minsida .vara-bild.tom {
  display: grid; place-items: center; color: var(--ios-gra);
  font-size: 2.4rem; font-weight: 300; letter-spacing: .02em;
}
body.minsida .vara-slut {
  position: absolute; left: .55rem; top: .55rem; padding: .2rem .55rem; border-radius: 999px;
  background: rgba(0, 0, 0, .7); color: #fff; font-size: .72rem; font-weight: 600;
}
body.minsida .vara.slut { cursor: default; }
body.minsida .vara.slut .vara-bild img { opacity: .45; }
body.minsida .vara.laddar { opacity: .5; }
body.minsida .vara-namn { color: #fff; font-size: .98rem; font-weight: 600; line-height: 1.25; }
body.minsida .vara-text {
  color: var(--ios-gra); font-size: .84rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.minsida .vara-pris { color: #fff; font-size: .95rem; font-weight: 400; margin-top: .15rem; }

/* Storleksval i köprutan. */
.ark-storlekar { display: grid; gap: .5rem; margin: .4rem 0 .6rem; }
.ark-storlek-rubrik { margin: 0; font-size: .85rem; color: var(--ios-gra, #8E8E93); }
.ark-storlekar.kravs .ark-storlek-rubrik { color: var(--ios-rod, #FF453A); }
.ark-storlek-knappar { display: flex; flex-wrap: wrap; gap: .5rem; }
.ark-storlek-knappar .storlek {
  min-width: 3.2rem; padding: .7rem .9rem; border-radius: 10px; font: inherit; font-weight: 600;
  background: var(--ios-grupp2, #2C2C2E); color: #fff; border: 1.5px solid transparent; cursor: pointer;
}
.ark-storlek-knappar .storlek[aria-checked="true"] { border-color: var(--ios-bla, #0A84FF); background: rgba(10, 132, 255, .18); }