/*
 * Fiskekort Booking – felles stilark
 * Endre farger og typografi her for å påvirke alle sider.
 */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;600;700&display=swap');

/* ── Fargepalett ─────────────────────────────────────────────────── */
:root {
  --fjord:  #1a3a4a;   /* mørk fjordblå – header, sidebar */
  --vatn:   #2a6b7c;   /* mellomblå – knapper, lenker */
  --mousse: #4a9e72;   /* elvegrønn – positive statuser */
  --sand:   #e8dcc8;   /* varm beige */
  --skum:   #f5f0e8;   /* nesten hvit – sidebakgrunn */
  --border: #c8d8d4;   /* kantlinjer */
  --text:   #1c2b34;   /* nesten svart – brødtekst */
  --muted:  #6b8a95;   /* dempet – sekundærtekst */
  --accent: #e05c34;   /* terrakotta – feil, varsler */

  /* Kalender-statuser */
  --avail-bg:   #a8e6bf;
  --avail-bd:   #3f9166;
  --partial-bg: #fff3cd;
  --partial-bd: #f5c842;
  --sold-bg:    #fde8e4;
  --sold-bd:    #e8a090;

  --shadow: 0 2px 12px rgba(26,58,74,0.08);
  --shadow-lg: 0 8px 32px rgba(26,58,74,0.14);
}

/* ── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  background: var(--skum);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
}

/* ── Auth-kortlayout (login, register, forgot, reset) ────────────── */
body.auth-page {
  background: linear-gradient(160deg, var(--fjord) 0%, #0e2535 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.auth-card {
  background: white;
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.32);
  width: 100%;
  max-width: 420px;
  overflow: hidden;
}
.auth-card.wide { max-width: 460px; }
.auth-header {
  background: var(--fjord);
  padding: 28px 36px 24px;
  text-align: center;
  color: white;
}
.auth-header .icon { font-size: 2.2rem; height: 1em; width: auto; margin: 0 auto 8px; display: block; }
.auth-header h1 { font-size: 1.4rem; font-weight: 700; }
.auth-header p  { opacity: 0.68; font-size: 0.85rem; margin-top: 4px; }

/* Icon images replacing the fishing rod / tent emoji – scale with the
   font-size of whatever element they sit in, like an emoji glyph would. */
.icon-img { height: 1em; width: auto; vertical-align: -0.15em; }
.auth-body { padding: 28px 36px; }

/* ── Felles skjema-elementer ─────────────────────────────────────── */
.field { margin-bottom: 15px; }
.field label,
.form-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}
.field input,
input[type=text], input[type=email], input[type=password],
input[type=number], input[type=tel], input[type=date],
input[type=datetime-local], select, textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  font-size: 0.93rem;
  font-family: inherit;
  color: var(--text);
  background: var(--skum);
  transition: border-color 0.18s, background 0.18s;
}
.field input:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--vatn);
  background: white;
}
textarea { resize: vertical; min-height: 80px; }
.field .hint { font-size: 0.74rem; color: var(--muted); margin-top: 4px; }

/* ── Knapper ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  border: none;
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.btn:hover  { filter: brightness(1.08); }
.btn:active { filter: brightness(0.94); }
.btn-primary { background: var(--vatn);   color: white; }
.btn-success { background: var(--mousse); color: white; }
.btn-danger  { background: var(--accent); color: white; }
.btn-warn    { background: #f5a623;       color: white; }
.btn-ghost   { background: white; border: 1.5px solid var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--vatn); color: var(--vatn); filter: none; }
.btn-full    { width: 100%; padding: 13px; font-size: 1rem; }
.btn-sm      { padding: 4px 11px; font-size: 0.78rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }

/* ── Alerts / meldinger ──────────────────────────────────────────── */
.alert { padding: 10px 14px; border-radius: 7px; font-size: 0.88rem; margin-bottom: 16px; }
.alert-error   { background: #fdecea; border: 1px solid #e57373; color: #b71c1c; }
.alert-success { background: #e8f5ee; border: 1px solid var(--mousse); color: #1a4a32; }
.alert-warn    { background: #fff8e1; border: 1px solid #f5c842; color: #6d4c00; }
.alert-info    { background: #e3f0f8; border: 1px solid #7fb8d4; color: #0d3a52; }

/* ── Husk-meg / checkbox ─────────────────────────────────────────── */
.remember {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.88rem; color: var(--muted);
  margin-bottom: 18px; cursor: pointer;
}
.remember input { width: auto; accent-color: var(--vatn); }

/* ── Skillelinje og hjelpetekster ────────────────────────────────── */
hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.text-center { text-align: center; }
.text-muted  { color: var(--muted); font-size: 0.88rem; }
.link-row    { text-align: center; font-size: 0.88rem; color: var(--muted); }
.link-row a  { color: var(--vatn); font-weight: 700; text-decoration: none; }
.link-row a:hover { text-decoration: underline; }

/* ── Spinner ─────────────────────────────────────────────────────── */
.spinner {
  display: inline-block; width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle; margin-right: 5px;
}
@keyframes spin { to { transform: rotate(360deg); } }