/*
 * GLAS PÅ WEBBEN — DESIGN-FACIT »Ytor och kanter i hela appen – GLAS«. FÖRE INLOGGNING OCH PÅ
 * WEBBEN: MÖRK toning i marinblå (Marielles val A, Cowork 17:1x) med GULDGLAS i rutorna
 * (Marielles val 2026-09-27, Cowork 17:5x) och marinblå text i dem. Inne i appen efter
 * inloggning: ljus toning och ljust glas (oförändrat).
 *
 * EN GEMENSAM FIL för marknadssidan (sv, en och de nio genererade), radera-konto och
 * e-post-bekräftelsen. Den läggs SIST i <head>, efter sidans egen <style>, och ändrar bara
 * ytor och färger – ingen text, inga priser, inga mått på rutorna.
 *
 * Värdena är appens (`src/utils/theme.js`: `sidbakgrundMork`, `GULD_GLAS_BG`,
 * `GULD_RESERV_BG`, `glasreflex`, `knappPrimar`, `chipMork`, `textPaMork`). Provet
 * `src/components/pages/glas-fore-inloggning.test.jsx` jämför dem. Kontrasten för den
 * marinblå texten är räknad i theme.js (sämsta fall 5,2:1).
 *
 * RESERV UTAN BLUR: rutorna får först den TÄTA guldtonen (rgba(226,200,140,.95)) med samma
 * kant och skugga. Glaset läggs på bara där webbläsaren klarar backdrop-filter (@supports).
 */

/* ── Mörk toning; logotypens ruta (#0E1C32) är första stoppet och smälter in ── */
:root { color-scheme: dark; }
body {
  background-color: #0E1C32;
  background-image:
    radial-gradient(60% 50% at 20% 15%, rgba(200,168,74,.28), transparent 60%),
    radial-gradient(50% 45% at 85% 75%, rgba(255,255,255,.07), transparent 60%),
    linear-gradient(160deg, #0E1C32 0%, #12233D 55%, #0A1628 100%);
  background-attachment: fixed;
}

/* ── Avsnitten: toningen syns igenom, text direkt på botten är ljus ────────── */
.hero, .marine { background: transparent; }
.section-head h2, .path-title b, main.wrap > h1, main.wrap > h2 { color: #F4EDE2; }
.section-head p, .price-note, main.wrap > .lead, main.wrap > p, main.wrap > ul li { color: #B9C6D4; }
.eyebrow, .path-title span { color: #C8A84A; }
main.wrap > p a, main.wrap > ul a { color: #C8A84A; }

/* ── Rutorna: tät guldton först … ────────────────────────────────────────── */
.feature, .plan, .trust-card, main.wrap .card, main.kort {
  position: relative;
  background: rgba(226,200,140,.95);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 1px 0 0 rgba(255,255,255,.5), 0 12px 30px rgba(15,27,45,.16);
}
/* Det framhävda priskortet: starkare guldkant, som Media i appen. */
.plan.featured { border: 2px solid #8A6A18; }
main.kort { padding: 28px 24px; }

/* … och guldglas där blur finns. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .feature, .plan, .trust-card, main.wrap .card, main.kort {
    background: linear-gradient(160deg, rgba(236,214,160,.84), rgba(210,180,100,.75));
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
  }
}

/* Ljusreflexen över hela rutan – tar aldrig ett klick – men UNDER texten (Marielle 18:3x:
   »texten blir blekare«): rutan är en egen stapel och reflexen ligger på z-index -1. */
.feature, .plan, .trust-card, main.wrap .card, main.kort { isolation: isolate; }
.feature::after, .plan::after, .trust-card::after, main.wrap .card::after, main.kort::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.55) 0%, transparent 38%, transparent 70%, rgba(255,255,255,.25) 100%);
}

/* Text INNE i guldrutorna: marinblå (även ikoner, pris och länkar). Butiksknapparna i
   priskorten är mörka med guldkant som förut och behåller sin ljusa text. */
.feature h3, .feature p, .feature .ic,
.plan .plan-name, .plan .plan-price, .plan .plan-price span, .plan .plan-headline,
.plan .plan-body, .plan .plan-note, .plan .free, .plan li, .plan .webblank,
.trust-card .tier .who, .trust-card .tier .what,
main.wrap .card p, main.wrap .card li, main.wrap .card h2, main.wrap .card h3, main.wrap .card a,
main.kort h1, main.kort p, main.kort .liten { color: #0E1C32; }
.feature .ic { background: rgba(255,255,255,.35); }
.trust-card .tier { border-bottom-color: rgba(14,28,50,.18); }
/* Guldknappen i en guldruta: mörkare kant och skugga, så att den syns mot guldet. */
:is(.feature, .plan, .trust-card, main.wrap .card, main.kort) :is(.btn-gold, .mail, a.knapp) {
  border-color: #8A6A18;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 16px rgba(14,28,50,.35);
}

/* ── Knapparna ─────────────────────────────────────────────────────────────── */
/* Primärknappen i guld (knappPrimar). */
.btn-gold, .mail, a.knapp {
  background: linear-gradient(180deg, rgba(222,192,112,.95), rgba(200,168,74,.95));
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 16px rgba(138,106,24,.3);
  color: #0E1C32;
}
/* Sekundärknappar och butiksknapparna DIREKT PÅ BOTTEN: mörkt glas, ljus text (chipMork).
   Valt/hovrat läge i guld som i dag. Butiksknapparna inne i de ljusa planrutorna är som förut. */
.btn-outline-light, .hero .butik, .final .butik {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.25);
  color: #F4EDE2;
}
.btn-outline-light:hover, .hero .butik:hover, .final .butik:hover {
  background: #C8A84A;
  border-color: #C8A84A;
  color: #0E1C32;
}