/**
 * KVISVIK TØMMERHOTELL — hotell-leie.css
 * Utseendet til «Lei et rom»: et innsjekkingskort fra resepsjonen, kremhvitt papir med messingkant og
 * et grønt hotellbånd øverst. Hører til hotell-leie.js.
 * Plassering : /home/kvisvik/public_html/hotell.kvisvik.no/hotell-leie.css
 * Versjon    : 1.0.0
 * Dato       : 26.10.2026 kl. 10:48
 * Utviklet av: Tormod Kvisvik
 * Firma      : Kvisvik Nettutvikling · org.nr 981309820
 * Web        : https://kvisvik.no
 * E-post     : kundeservice@kvisvik.no
 * Kvisvik Tømmerhotell er et produkt av Kvisvik Nettutvikling.
 * Et webhotell du kan gå inn i: hvert nettsted har sitt eget rom.
 * https://hotell.kvisvik.no
 *
 * v1.0.0 (26.10.2026 kl. 10:48): ny fil.
 *
 * LÆRING: alle klassene begynner med «lr-», så ingenting her kan krangle med gjesteboka («gb-») eller
 * resten av hotellet. Skriftene er systemskrifter, fordi CSP-en bare tillater skrifter fra egen server.
 */

.lr-bakgrunn {
  position: fixed; inset: 0; z-index: 91;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(10, 6, 3, .72);
  overflow-y: auto;
}
.lr-bakgrunn[hidden] { display: none !important; }
html.lr-aapen { overflow: hidden; }

.lr {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 0 0 24px;
  color: #2a1d12;
  background:
    repeating-linear-gradient(0deg, rgba(91, 70, 40, .035) 0 1px, transparent 1px 28px),
    #fbf6ea;
  border: 3px solid #c99b45;
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .6), inset 0 0 0 5px #fbf6ea, inset 0 0 0 6px rgba(201, 155, 69, .7);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem; line-height: 1.5;
}

.lr-lukk {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 40px; height: 40px;
  font-size: 1.8rem; line-height: 1; color: #f6efe2;
  background: transparent; border: 0; border-radius: 50%; cursor: pointer;
}
.lr-lukk:hover { background: rgba(255, 255, 255, .14); }
.lr button:focus-visible, .lr input:focus-visible, .lr textarea:focus-visible, .lr a:focus-visible {
  outline: 3px solid #1f6b9a; outline-offset: 2px;
}

/* Hotellbåndet øverst på kortet */
.lr-topp {
  padding: 18px 56px 16px 28px; margin: 0 0 16px;
  color: #f6efe2;
  background: linear-gradient(180deg, #2f4a39, #22372a);
  border-bottom: 3px solid #c99b45;
  border-radius: 9px 9px 0 0;
}
.lr-merke { margin: 0 0 2px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #e8cf8f; }
.lr-tittel { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 2rem; font-weight: 700; color: #fff7e4; }
.lr-tittel:focus { outline: none; }
.lr-under { margin: 2px 0 0; color: #e6dcc4; font-size: 1.05rem; }

.lr-skjema { padding: 0 28px; }
.lr-om { margin: 0 0 14px; }
.lr-personvern { margin: 2px 0 14px; padding: .6em .8em; font-size: .9rem; background: rgba(214, 171, 85, .22); border-radius: 8px; }
.lr-rad { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.lr-felt { margin: 0 0 12px; min-width: 0; }
.lr-felt label { display: block; margin-bottom: 3px; font-weight: 600; }
.lr-krav { color: #a3281c; }
.lr-valgfri { font-weight: 400; color: #6b5640; }
.lr-felt input, .lr-felt textarea {
  display: block; width: 100%; box-sizing: border-box; padding: .55em .7em; font: inherit; color: #1d2b4a;
  background: #fffdf7; border: 1.5px solid #8a7355; border-radius: 6px;
}
.lr-felt textarea { resize: vertical; min-height: 4.8em; }
.lr-felt [aria-invalid="true"] { border-color: #a3281c; background: #fff4f2; }
.lr-hjelp { margin: 3px 0 0; font-size: .85rem; color: #6b5640; }
.lr-feil { margin: 4px 0 0; font-size: .9rem; font-weight: 600; color: #a3281c; }

/* Skjult fra mennesker, synlig for roboter (honningkrukka) */
.lr-honning { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.lr-turnstile { margin: 0 0 10px; }
.lr-tsinfo { margin: 0 0 10px; font-size: .88rem; color: #6b5640; }
.lr-tsinfo:empty { display: none; }
.lr-tsinfo.er-feil { color: #7d1a10; font-weight: 600; }

.lr-status { margin: 0 0 12px; font-weight: 600; }
.lr-status:empty { display: none; }
.lr-status.er-feil { padding: .6em .8em; color: #7d1a10; background: #fbe4e0; border-radius: 8px; }
.lr-status.er-ok { padding: .8em 1em; color: #17462c; background: #dcefe2; border-radius: 8px; }
.lr-status:focus { outline: 3px solid #1f6b9a; outline-offset: 2px; }

/* Etter sending står bare takken igjen */
.lr-skjema.er-sendt > :not(.lr-status) { display: none; }

.lr-send {
  padding: .7em 1.6em; font: inherit; font-weight: 700; color: #2a1a0e;
  background: #d6ab55; border: 0; border-radius: 999px; cursor: pointer;
}
.lr-send:hover:not(:disabled) { background: #f0cf86; }
.lr-send:disabled { opacity: .6; cursor: default; }

/* Knappen i toppen av resepsjonen */
.lr-knapp { font: inherit; font-weight: 600; cursor: pointer; }

@media (max-width: 680px) {
  .lr-bakgrunn { padding: 8px; align-items: flex-end; }
  .lr { max-height: calc(100dvh - 16px); }
  .lr-topp { padding: 14px 52px 12px 16px; }
  .lr-tittel { font-size: 1.6rem; }
  .lr-skjema { padding: 0 16px; }
  .lr-rad { grid-template-columns: 1fr; }
  .lr-felt input, .lr-felt textarea { font-size: 16px; }   /* hindrer at iOS zoomer inn */
}