/* Badstuas eget utseende.
 *
 * Skrevet fra bunnen for denne bransjen, og med vilje uten en eneste linje
 * fra panel.css: verkstedpanelet er bygget for en travel dag foran en skjerm i
 * verkstedhallen, dette er bygget for en kunde som sitter i sofaen og skal
 * kjenne at det er godt aa vaere medlem.
 *
 * Rolig, lyst og med dyp marineblaa som eneste kraftige farge. Ingen
 * bakgrunnsfiltre og ingen loopende animasjoner: sida skal vaere lett aa
 * tegne ogsaa paa en gammel maskin og en telefon paa dagslys.
 */

:root {
  --dyp: #12303c;          /* marineblaa: knapper, overskrifter */
  --dyp-mork: #0c222c;
  --gronn: #0d3b2e;        /* medlemsmerket */
  --grunn: #f6f6f4;        /* sidebakgrunn */
  --kort: #ffffff;
  --kant: #e3e5e3;
  --tekst: #1a2226;
  --dempet: #6b7780;
  --gul: #f0ede6;
  --feilrod: #a3261c;
  --radius: 14px;
  --skygge: 0 1px 2px rgba(18, 48, 60, .06);
}

* { box-sizing: border-box; }

/* hidden-attributtet maa vinne over display i klassene under. Uten denne
   ville .avatar (display:grid) staa og lyse selv om vi har skjult den. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--grunn);
  color: var(--tekst);
  font: 15px/1.55 ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------- merkevaren */

.merke {
  font-weight: 600;
  letter-spacing: .22em;
  font-size: 17px;
  color: var(--dyp);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
}
.merke small {
  display: block;
  font-size: 9px;
  letter-spacing: .3em;
  color: var(--dempet);
  margin-top: 3px;
  font-weight: 500;
}
/* Har bedriften lastet opp en logo, er DEN merket. Da skal ingenting av
   bokstavsperringen over gjelde - bare bildet, i en hoyde som ikke flytter
   resten av topplinja. */
.merke.med-logo { letter-spacing: normal; }
.merke.med-logo img {
  display: block;
  height: 38px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
}
@media (max-width: 560px) { .merke.med-logo img { height: 30px; max-width: 150px; } }

/* ------------------------------------------------------------- toppen */

header.topp {
  background: var(--kort);
  border-bottom: 1px solid var(--kant);
}
.topp-inn {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 22px;
}
nav.faner { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
nav.faner button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--dempet);
  cursor: pointer;
  border-radius: 0;
}
nav.faner button[aria-selected="true"] { color: var(--dyp); border-bottom-color: var(--dyp); font-weight: 600; }
nav.faner button:hover { color: var(--tekst); }
/* Handlingsknapper i topplinja (Book besok) er knapper, ikke faner. De skal
   staa midt i linja, ikke strekke seg etter fanene. */
nav.faner .knapp { align-self: center; margin-left: 6px; }

.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--dyp); color: #fff;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  flex: none;
}

/* -------------------------------------------------------------- flate */

main { max-width: 1080px; margin: 0 auto; padding: 28px 20px 64px; }
h1 { font-size: 27px; margin: 0 0 4px; letter-spacing: -.01em; }
h2 { font-size: 19px; margin: 0 0 10px; letter-spacing: -.01em; }
h3 { font-size: 15px; margin: 0 0 6px; }
p.under { color: var(--dempet); margin: 0 0 22px; }

.rutenett { display: grid; gap: 16px; grid-template-columns: repeat(12, 1fr); }
.kort {
  background: var(--kort);
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--skygge);
  grid-column: span 12;
}
.kort.halv { grid-column: span 6; }
.kort.tredel { grid-column: span 4; }
.kort.tofjerde { grid-column: span 8; }
@media (max-width: 760px) {
  .kort.halv, .kort.tredel, .kort.tofjerde { grid-column: span 12; }
  .topp-inn { flex-wrap: wrap; gap: 12px; }
  nav.faner { width: 100%; margin-left: 0; overflow-x: auto; order: 5; }
  /* Flaggene blir staaende paa linja med merket, ikke nederst under fanene. */
  .topp-inn .sprakvalg { margin-left: auto; }
}

/* ---------------------------------------------------------- spraakvalg */

.sprakvalg { display: flex; gap: 4px; flex: none; }
.sprakvalg button {
  display: grid; place-items: center;
  width: 34px; height: 28px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: 7px;
  cursor: pointer; opacity: .55;
}
.sprakvalg button:hover { opacity: .9; }
.sprakvalg button[aria-pressed="true"] { opacity: 1; border-color: var(--kant); background: var(--kort); }
.sprakvalg button:focus-visible { outline: 2px solid var(--dyp); outline-offset: 1px; }
.sprakvalg svg { width: 22px; height: 16px; display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }

.stempel {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dempet);
  margin: 0 0 12px;
}

/* ------------------------------------------------------------ knapper */

.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--kant);
  background: var(--kort);
  color: var(--tekst);
  border-radius: 9px;
  font: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.knapp:hover { border-color: #c9cdc9; }
.knapp.primar { background: var(--dyp); border-color: var(--dyp); color: #fff; }
.knapp.primar:hover { background: var(--dyp-mork); }
.knapp.stor { padding: 13px 24px; font-size: 15px; }
.knapp[disabled] { opacity: .5; cursor: not-allowed; }
.knapp.lenke { border: 0; background: none; padding: 6px 0; color: var(--dyp); text-decoration: underline; }
.rad { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* -------------------------------------------------------------- skjema */

label { display: block; font-size: 13px; color: var(--dempet); margin: 14px 0 5px; }
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=date], select, textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--kant);
  border-radius: 9px;
  font: inherit;
  background: var(--kort);
  color: var(--tekst);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--dyp);
  outline-offset: -1px;
  border-color: var(--dyp);
}
textarea { min-height: 84px; resize: vertical; }
.hjelp { font-size: 13px; color: var(--dempet); margin: 6px 0 0; }

.feil {
  background: #fdf2f1; border: 1px solid #f0cdc9; color: var(--feilrod);
  padding: 11px 14px; border-radius: 9px; margin: 14px 0; font-size: 14px;
}
.klar {
  background: #eef5f0; border: 1px solid #cfe3d6; color: #16603f;
  padding: 11px 14px; border-radius: 9px; margin: 14px 0; font-size: 14px;
}

/* ---------------------------------------------------------- medlemsmerke */

.medlemsmerke {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--kant); border-radius: 12px;
  padding: 12px 16px; background: var(--kort);
}
.medlemsmerke.ritual { border-color: #cfe0d6; background: #f2f7f4; }
.medlemsmerke .ikon {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: grid; place-items: center; background: var(--gul); color: var(--dyp);
}
.medlemsmerke.ritual .ikon { background: var(--gronn); color: #fff; }
.medlemsmerke b { display: block; font-size: 15px; }
.medlemsmerke span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dempet); }

/* ------------------------------------------------------------- fordeler */

.fordeler { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .fordeler { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .fordeler { grid-template-columns: 1fr; } }
.fordel { display: flex; gap: 10px; }
.fordel .ikon {
  width: 32px; height: 32px; border-radius: 8px; flex: none;
  background: var(--gul); color: var(--dyp); display: grid; place-items: center;
}
.fordel b { display: block; font-size: 14px; }
.fordel small { color: var(--dempet); font-size: 12.5px; }

/* --------------------------------------------------------------- valg */

.valg {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--kant); background: var(--kort);
  border-radius: 12px; padding: 16px 18px; cursor: pointer;
  font: inherit; color: inherit; margin-bottom: 10px;
}
.valg:hover { border-color: #b9c3bd; }
.valg[aria-pressed="true"] { border-color: var(--dyp); box-shadow: inset 0 0 0 1px var(--dyp); }
.valg b { display: block; font-size: 16px; }
.valg small { color: var(--dempet); }
.valg .pris { float: right; font-weight: 600; }

/* -------------------------------------------------------------- tider */

.tider { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.tider button {
  padding: 11px 6px; border: 1px solid var(--kant); background: var(--kort);
  border-radius: 9px; font: inherit; font-size: 14px; cursor: pointer;
}
.tider button:hover { border-color: #b9c3bd; }
.tider button[aria-pressed="true"] { background: var(--dyp); border-color: var(--dyp); color: #fff; }

/* Hvor fullt tida er (badstue-fyll.js regner ut fargen). Fargen glir jevnt
   fra hvit (ledig) til sterk blaa (nesten fullt), og blir roed naar det er
   fullt. Valgt tid beholder fargen og faar en tykk ring, saa man ser baade
   valget og hvor fullt det er. */
.tider button.fyll,
.tider button.fyll[aria-pressed="true"] {
  background: var(--fyll-bg); border-color: var(--fyll-kant); color: var(--fyll-tekst);
}
.tider button.fyll-full { background: #c62828; border-color: #b02222; color: #fff; }
.tider button[class*="fyll"][aria-pressed="true"] {
  font-weight: 700; outline: 3px solid var(--dyp); outline-offset: 2px;
}
.tider button[disabled] { cursor: not-allowed; }
/* Ikke fullt, men ikke plass til hele folget: fargen staar, men dempet. */
.tider button.uten-plass:not(.fyll-full) { opacity: .45; }

.fyll-forklaring {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px;
  font-size: 12.5px; color: var(--dempet);
}
.fyll-forklaring span { display: inline-flex; align-items: center; gap: 6px; }
.fyll-forklaring i {
  height: 14px; border-radius: 4px; border: 1px solid var(--kant); display: inline-block;
}
.fyll-forklaring i.fyll-stripe {
  width: 72px; background: linear-gradient(to right, #fff, rgb(31,95,214));
}
.fyll-forklaring i.fyll-full { width: 14px; background: #c62828; border-color: #b02222; }

.datoer { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.datoer button {
  flex: none; min-width: 72px; padding: 9px 10px; border: 1px solid var(--kant);
  background: var(--kort); border-radius: 9px; font: inherit; cursor: pointer; text-align: center;
}
.datoer button b { display: block; font-size: 15px; }
.datoer button small { color: var(--dempet); font-size: 11.5px; text-transform: capitalize; }
.datoer button[aria-pressed="true"] { background: var(--dyp); border-color: var(--dyp); color: #fff; }
.datoer button[aria-pressed="true"] small { color: #b9c9d0; }
.datoer button[disabled] { opacity: .38; cursor: not-allowed; }

/* -------------------------------------------------------------- lister */

.linje {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--kant);
}
.linje:last-child { border-bottom: 0; }
.linje .h { color: var(--dempet); font-size: 13.5px; }
.sum { display: flex; justify-content: space-between; padding-top: 12px; font-weight: 600; font-size: 17px; }

table.liste { width: 100%; border-collapse: collapse; font-size: 14px; }
table.liste th {
  text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dempet); padding: 0 10px 8px 0; font-weight: 600;
  border-bottom: 1px solid var(--kant);
}
table.liste td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--kant); vertical-align: top; }
table.liste tr:last-child td { border-bottom: 0; }
table.liste tbody tr.klikkbar { cursor: pointer; }
table.liste tbody tr.klikkbar:hover { background: #fafaf8; }

.merkelapp {
  display: inline-block; padding: 2px 9px; border-radius: 99px;
  font-size: 12px; font-weight: 600; border: 1px solid var(--kant); color: var(--dempet);
  white-space: nowrap;
}
.merkelapp.gronn { background: #eef5f0; border-color: #cfe3d6; color: #16603f; }
.merkelapp.gul { background: #fdf6e6; border-color: #eddfba; color: #7a5b12; }
.merkelapp.rod { background: #fdf2f1; border-color: #f0cdc9; color: var(--feilrod); }

.tomt { color: var(--dempet); padding: 22px 0; text-align: center; }
.tall { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }

/* -------------------------------------------------------------- vindu */

.overlegg {
  position: fixed; inset: 0; background: rgba(18, 34, 38, .42);
  display: grid; place-items: center; padding: 20px; z-index: 50;
}
.vindu {
  background: var(--kort); border-radius: 16px; padding: 26px;
  width: 100%; max-width: 520px; max-height: 88vh; overflow: auto;
}
.stegtall { color: var(--dempet); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }

/* "Opprett konto": et skjema paa papir, ikke et kort med runde felt.
   Georgia finnes overalt, saa det kommer ingen nedlasting av skrift. */
.vindu:has(.kontoskjema) { border-radius: 4px; padding: 30px 28px 20px; max-width: 440px; }
.kontoskjema h2 { font: 400 28px/1.2 Georgia, "Times New Roman", serif; letter-spacing: 0; color: var(--dyp); margin-bottom: 6px; }
.kontoskjema p.under { margin-bottom: 14px; }
.kontoskjema label { color: var(--tekst); font-size: 14px; margin: 18px 0 0; }
.kontoskjema input[type=text], .kontoskjema input[type=email],
.kontoskjema input[type=tel], .kontoskjema select {
  border: 0; border-bottom: 1px solid #9aa5a8; border-radius: 0;
  padding: 7px 0 8px; background: transparent;
}
.kontoskjema input:focus, .kontoskjema select:focus {
  outline: 0; border-bottom: 2px solid var(--dyp); padding-bottom: 7px;
}
.kontoskjema details summary { text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.kontoskjema details summary::-webkit-details-marker { display: none; }
.kontoskjema details a { color: var(--dyp); overflow-wrap: anywhere; }
.kontoskjema #nSend { display: block; width: 100%; margin-top: 22px; border-radius: 3px; }
.kontoskjema #nAvbryt { display: block; margin: 8px auto 0; color: var(--dempet); }

footer.bunn { text-align: center; color: var(--dempet); font-size: 12.5px; padding: 26px 20px 40px; }
footer.bunn a { color: var(--dempet); }

/* ------------------------------------------------- topplinja i panelet
 *
 * De ansatte gaar mellom Dagen, Medlemmer, Medlemskap og Oppsett hele dagen.
 * Da MAA linja se lik ut paa alle fire, og det maa vaere tydelig hvor du er.
 *
 * Markupen kommer fra topplinje.js, den samme som resten av systemet bruker.
 * Utseendet her folger panel.css, saa de to sidene av badstua ikke ser ut som
 * to ulike produkter.
 */
header.panel {
  position: sticky; top: 0; z-index: 20;
  background: var(--kort); border-bottom: 1px solid var(--kant);
  padding: 0; display: block;
}
/* Full bredde, og NOYAKTIG samme innrykk som panel.html bruker (10px 16px).
 *
 * Dette er ikke pynt. Var topplinja midtstilt her og i full bredde paa Dagen,
 * hoppet menyen sidelengs hver gang du byttet side - og det er den eneste
 * tingen paa skjermen som skal staa helt stille. */
header.panel .linje {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 16px;
}
header.panel .strekk { flex: 1; }

header.panel .merkeblokk { display: flex; align-items: center; gap: 11px; min-width: 0; }
header.panel .logo {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px;
  background: var(--dyp); color: #fff; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
header.panel .logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
header.panel .navn {
  display: block; font-weight: 650; font-size: 15.5px; letter-spacing: -.012em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw;
}
header.panel .under {
  display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dempet); margin-top: -1px;
}

header.panel nav.meny {
  display: flex; gap: 2px; background: var(--grunn);
  border: 1px solid var(--kant); border-radius: 11px; padding: 3px;
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
header.panel nav.meny::-webkit-scrollbar { display: none; }
header.panel nav.meny a {
  padding: 6px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500;
  color: var(--dempet); text-decoration: none; white-space: nowrap;
}
header.panel nav.meny a:hover { color: var(--tekst); background: rgba(18, 48, 60, .05); }
/* Hvor du ER. Tydelig nok til aa se i et oeyekast: hvit brikke, egen skygge
   og kraftigere tekst - ikke bare en litt annen graatone. */
/* MERK at tykkelsen IKKE endres.
 *
 * Fet skrift er bredere enn vanlig, og siden menyen er hoyrestilt ville hele
 * raden flyttet seg noen piksler hver gang du byttet side. Brikken og fargen
 * er tydelig nok, og da staar menyen helt stille. */
header.panel nav.meny a[aria-current="page"] {
  background: var(--kort); color: var(--dyp);
  box-shadow: 0 1px 2px rgba(18, 48, 60, .1), 0 0 0 1px var(--kant);
}

/* ------------------------------------------------- produktkort med bilde
 *
 * Bildet er et PLUSS, ikke en forutsetning. Uten bilde staar kortet nøyaktig
 * som for - ingen tom ramme, ingen graa boks der bildet "skulle" vaert. Det
 * er med vilje: de fleste badstuer legger inn bilder etter hvert, og fram til
 * da skal sida se ferdig ut, ikke uferdig.
 */
.valg .innhold { display: block; }
.valg.med-bilde {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.valg.med-bilde img {
  width: 150px;
  flex: 0 0 150px;
  object-fit: cover;
  display: block;
  /* Bildet kan vaere hva som helst; hoyden foelger teksten ved siden av, saa
     to kort med ulikt lange beskrivelser ikke blir ujevne. */
  align-self: stretch;
}
.valg.med-bilde .innhold { padding: 16px 18px; flex: 1; min-width: 0; }
@media (max-width: 560px) {
  .valg.med-bilde { display: block; }
  .valg.med-bilde img { width: 100%; flex: none; height: 140px; }
}