/* =============================================================
   Timebestilling – pasientens side
   =============================================================

   Tekstfeltene får IKKE stil her. De hører til den ene feltstilen i
   bnett-design.css, der `.bntm` nå står sammen med `.bnms`, `.bnfilter`
   og de andre. Står stilen to steder, blir den to stiler.

   Dette arket gjør tre ting: tidene, skjemaets egen struktur, og
   kvitteringen.
   ============================================================= */

/*
 * [hidden] må settes eksplisitt her.
 *
 * Nettleserens egen regel er `[hidden]{display:none}` i UA-stilarket, og
 * ENHVER regel vi selv skriver vinner over den. `.bntm__dag{display:grid}`
 * og `.bntm__dager{display:flex}` gjorde derfor at skjulte dager sto der
 * likevel – fem dager i stedet for fire, og tidene sto igjen under
 * kvitteringen etter at forespørselen var sendt.
 *
 * Testen fant det ikke, fordi den talte `[data-bntm-dag]:not([hidden])` –
 * altså attributtet, ikke om noe faktisk var synlig. Nå måler den høyde.
 */
.bntm [hidden]{ display:none !important; }

.bntm{
  --bntm-linje:#dfe5e0;
  --bntm-tekst:#18392f;
  --bntm-dus:#5a6b62;
  --bntm-gronn:#245044;
  --bntm-gronn-mork:#245044;
  --bntm-flate:#f7faf4;
}

/* ---- tjenesten over tidene ---- */

.bntm__tjeneste{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:0 0 14px;
  font:600 17px/1.3 var(--bnett-font-head, -apple-system, system-ui, sans-serif);
  color:var(--bntm-tekst);
}
.bntm__lengde{
  font:500 13px/1 var(--bnett-font-body, -apple-system, system-ui, sans-serif);
  color:var(--bntm-dus);
  padding:4px 9px; border-radius:999px; background:#eef5e9;
}

/* ---- dagene ---- */

.bntm__dager{ display:flex; flex-direction:column; gap:12px; }

.bntm__dag{
  display:grid; grid-template-columns:92px 1fr; gap:12px; align-items:start;
}
/* Dagnavnet og tidene leses som én setning: «I morgen / 09:00 10:00 11:00».
   Under 460px blir 92 piksler for mye av en smal skjerm, og dagnavnet
   legger seg over i stedet. */
.bntm__dagnavn{
  min-width:0;
  padding-top:9px;
  font:600 14px/1.2 var(--bnett-font-body, -apple-system, system-ui, sans-serif);
  color:var(--bntm-dus);
}

.bntm__tider{ display:flex; flex-wrap:wrap; gap:8px; min-width:0; }

.bntm__tid{
  flex:0 0 auto;
  /* Brikken er en <button> ute og en <span> i forhaandsvisningen. Uten
     inline-flex ville spennet ikke sentrere teksten slik knappen gjoer,
     og de to ville sett ulike ut i akkurat det bildet som skal vise
     hvordan det blir. */
  display:inline-flex; align-items:center; justify-content:center;
  box-sizing:border-box;
  /* 44px høyde er ikke pynt: det er minste trygge trykkflate på en
     telefon, og disse knappene er hele poenget med blokken. */
  min-height:44px; min-width:72px;
  padding:10px 14px;
  font:600 15px/1 var(--bnett-font-body, -apple-system, system-ui, sans-serif);
  font-variant-numeric:tabular-nums;
  color:var(--bntm-gronn-mork);
  background:#ffffff;
  border:1.5px solid var(--bntm-linje);
  border-radius:7px;
  cursor:pointer;
  transition:border-color .12s ease, background-color .12s ease, color .12s ease;
}
.bntm__tid:hover{ border-color:var(--bntm-gronn); background:var(--bntm-flate); }
.bntm__tid:focus-visible{
  outline:none; border-color:var(--bntm-gronn);
  box-shadow:0 0 0 3px rgba(56,128,81,.18);
}
.bntm__tid--valgt{
  color:#ffffff; background:var(--bntm-gronn); border-color:var(--bntm-gronn);
}

.bntm .bntm__flere{
  margin-top:14px; padding:10px 16px; min-height:44px;
  font:600 14px/1 var(--bnett-font-body, -apple-system, system-ui, sans-serif);
  color:var(--bntm-gronn-mork); background:transparent;
  border:1.5px solid var(--bntm-linje); border-radius:999px; cursor:pointer;
}
.bntm .bntm__flere:hover{ border-color:var(--bntm-gronn); background:var(--bntm-flate); }

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

.bntm__tom{
  margin:0; padding:16px 18px;
  font:400 15px/1.5 var(--bnett-font-body, -apple-system, system-ui, sans-serif);
  color:var(--bntm-dus);
  background:var(--bntm-flate); border-radius:8px;
}

/* ---- skjemaet ---- */

.bntm__skjema{
  margin-top:20px; padding:18px;
  background:var(--bntm-flate);
  border:1px solid var(--bntm-linje);
  border-radius:8px;
}

.bntm__valgt{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  margin:0 0 16px; padding-bottom:14px;
  border-bottom:1px solid var(--bntm-linje);
  font:600 16px/1.35 var(--bnett-font-body, -apple-system, system-ui, sans-serif);
  color:var(--bntm-tekst);
}
.bntm .bntm__bytt{
  padding:0; min-height:0;
  font:500 14px/1.4 var(--bnett-font-body, -apple-system, system-ui, sans-serif);
  color:var(--bntm-gronn-mork); background:none; border:0;
  text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}

.bntm__rad{ margin-bottom:14px; }
.bntm__rad--to{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bntm__rad--to > div{ min-width:0; }

.bntm__merke{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin-bottom:6px;
  font:600 14px/1.3 var(--bnett-font-body, -apple-system, system-ui, sans-serif);
  color:var(--bntm-tekst);
}
.bntm__valgfri, .bntm__teller{
  font-weight:400; font-size:13px; color:var(--bntm-dus);
}
.bntm__teller{ margin-left:auto; font-variant-numeric:tabular-nums; }

/* Bredden settes HER, ikke i den delte feltstilen – komponenten vet hvor
   feltet står, stilarket for felter gjør ikke det. */
.bntm .bntm__felt{ width:100%; box-sizing:border-box; }
.bntm .bntm__felt--tekst{ resize:vertical; min-height:76px; }

.bntm__felle{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.bntm__personvern{
  margin:0 0 16px;
  font:400 13px/1.55 var(--bnett-font-body, -apple-system, system-ui, sans-serif);
  color:var(--bntm-dus);
}
.bntm__personvern strong{ color:var(--bntm-tekst); }

.bntm__handling{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

.bntm .bntm__send{
  min-height:48px; padding:13px 24px;
  font:600 16px/1 var(--bnett-font-body, -apple-system, system-ui, sans-serif);
  color:#ffffff; background:var(--bntm-gronn);
  border:0; border-radius:999px; cursor:pointer;
  transition:background-color .12s ease;
}
.bntm .bntm__send:hover{ background:var(--bntm-gronn-mork); }
.bntm .bntm__send:disabled{ opacity:.6; cursor:default; }

.bntm__status{
  font:500 14px/1.45 var(--bnett-font-body, -apple-system, system-ui, sans-serif);
  color:var(--bntm-dus);
}
.bntm__status--feil{ color:#b42318; }

/* ---- kvitteringen ---- */

.bntm__kvittering{
  margin-top:8px; padding:22px 20px;
  text-align:center;
  background:#eef5e9; border-radius:8px;
}
.bntm__hake{
  display:grid; place-items:center;
  width:46px; height:46px; margin:0 auto 12px;
  color:#ffffff; background:var(--bntm-gronn); border-radius:50%;
}
.bntm__kvittering h3{
  margin:0 0 10px;
  font:600 19px/1.3 var(--bnett-font-head, -apple-system, system-ui, sans-serif);
  color:var(--bntm-tekst);
}
.bntm__kvittering p{
  margin:0 auto 10px; max-width:48ch;
  font:400 15px/1.55 var(--bnett-font-body, -apple-system, system-ui, sans-serif);
  color:var(--bntm-tekst);
}
.bntm__kvitteringSmatt{ font-size:13px !important; color:var(--bntm-dus) !important; }

.bntm__statuslenke{
  display:inline-block; margin-top:6px;
  font:600 15px/1 var(--bnett-font-body, -apple-system, system-ui, sans-serif);
  color:var(--bntm-gronn-mork);
}

/* ---- statussiden ---- */

.bntm--status{
  padding:20px; border-radius:8px;
  background:var(--bntm-flate); border:1px solid var(--bntm-linje);
}
.bntm--status-bekreftet{ background:#eef5e9; border-color:#c9e0bd; }
.bntm--status-utlopt{ background:#f7f7f6; }

.bntm__statustittel{
  margin:0 0 8px;
  font:600 19px/1.3 var(--bnett-font-head, -apple-system, system-ui, sans-serif);
  color:var(--bntm-tekst);
}
.bntm__statustekst{
  margin:0 0 10px;
  font:400 15px/1.55 var(--bnett-font-body, -apple-system, system-ui, sans-serif);
  color:var(--bntm-tekst);
}
.bntm__statussmatt{
  margin:0;
  font:400 13px/1.5 var(--bnett-font-body, -apple-system, system-ui, sans-serif);
  color:var(--bntm-dus);
}

/* ---- smal skjerm ---- */

@media (max-width:460px){
  .bntm__dag{ grid-template-columns:1fr; gap:6px; }
  .bntm__dagnavn{ padding-top:0; }
  .bntm__rad--to{ grid-template-columns:1fr; }
  .bntm__skjema{ padding:16px 14px; }
  .bntm .bntm__send{ width:100%; }
  .bntm__handling{ gap:10px; }
}


/* =============================================================
   Forhåndsvisningen i Min side
   =============================================================

   Her skal behandleren SE hvordan det blir, ikke kunne bestille hos seg
   selv. Brikkene er <span>, ikke <button>: et knappeelement som ikke gjør
   noe, er et løfte som ikke holdes.
   ============================================================= */

.bntm__forhaandsnote{
  margin:0 0 14px; padding:9px 12px;
  font:500 13px/1.45 var(--bnett-font-body, -apple-system, system-ui, sans-serif);
  color:var(--bntm-dus);
  background:#f1f3f0; border-radius:6px;
}

.bntm__tid--dod{ cursor:default; }
.bntm__tid--dod:hover{ border-color:var(--bntm-linje); background:#ffffff; }

.bntm__forhaandsskjema{
  margin:16px 0 0; padding:14px 16px;
  font:400 14px/1.5 var(--bnett-font-body, -apple-system, system-ui, sans-serif);
  color:var(--bntm-dus);
  border:1.5px dashed var(--bntm-linje); border-radius:8px;
}

.bntm--plass{
  padding:18px 20px;
  border:1.5px dashed var(--bntm-linje); border-radius:8px;
  background:#fbfcfa;
}
.bntm__plasstittel{
  margin:0 0 6px;
  font:600 15px/1.3 var(--bnett-font-body, -apple-system, system-ui, sans-serif);
  color:var(--bntm-tekst);
}
.bntm__plasstekst{
  margin:0;
  font:400 14px/1.55 var(--bnett-font-body, -apple-system, system-ui, sans-serif);
  color:var(--bntm-dus);
}