/* =====================================================
   BESTILL BORD — NYTT DESIGN (v2, uten bordkart)
   Fokus: a11y, responsiv, polert, null eksterne libs
   Matcher ny booking.html (chips, availability-grid, summary)
   ===================================================== */

/* --------------------
   CSS CUSTOM PROPERTIES
   -------------------- */
:root{
  /* Core palette (dark default) */
  --bg:#0b0b0d;
  --surface:#131316;
  --glass1:rgba(255,255,255,.06);
  --glass2:rgba(255,255,255,.035);
  --stroke:#2a2a30;
  --text:#f7f7f9;
  --muted:#aeb3bc;
  --accent:#d4b483;     /* beige */
  --accent-2:#f3e1b9;
  --ok:#36d399;
  --warn:#ffd56b;
  --bad:#ff7a7a;
  --shadow:0 18px 48px rgba(0,0,0,.5);
  --radius:18px;
  --radius-sm:12px;
  --ring:0 0 0 3px rgba(212,180,131,.28);

  /* Typography */
  --font:system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial;
  --fs-0:.92rem;  /* small */
  --fs-1:1rem;    /* base  */
  --fs-2:1.125rem;
  --fs-3:1.5rem;
  --fs-4:2rem;
}

/* Optional light mode support (toggle via [data-theme="light"]) */
[data-theme="light"]{
  --bg:#f7f7fb; --surface:#ffffff; --glass1:rgba(0,0,0,.05); --glass2:rgba(0,0,0,.025);
  --stroke:#e5e7ef; --text:#101114; --muted:#5a5f6d; --shadow:0 10px 30px rgba(0,0,0,.08);
}

/* --------------------
   BASE / ACCESSIBILITY
   -------------------- */
.booking-hero{
  padding:3.25rem 1rem 1.25rem;
  background:
    radial-gradient(1200px 520px at 20% -10%, rgba(212,180,131,.10), transparent 60%),
    radial-gradient(1000px 420px at 120% 0%, rgba(128,195,255,.06), transparent 60%),
    linear-gradient(180deg,#0a0a0c 0%, #0b0b0d 60%, transparent 100%);
}
.booking-hero .h1{ color:var(--text); margin:0 0 .25rem; letter-spacing:.2px }
.booking-hero .lead{ color:#e7e7eb; opacity:.9 }

.booking-shell{ background:var(--bg); color:var(--text); }

/* Screen-reader only utility */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0;
}

/* Focus ring */
:where(button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible{
  outline:none; box-shadow:var(--ring);
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}

/* High-contrast / forced colors */
@media (forced-colors:active){
  .glass, .booking-card, .plan-card{ border:1px solid CanvasText; }
  .chip{ border:1px solid CanvasText; }
}

/* --------------------
   LAYOUT GRID
   -------------------- */
.booking-shell{ padding:1rem 0 4rem }
.booking-grid{
  display:grid; grid-template-columns:minmax(560px,1.35fr) .85fr; gap:24px; align-items:start;
  max-width:1280px; margin:0 auto;
}
@media (max-width:1200px){ .booking-grid{ grid-template-columns:minmax(520px,1.2fr) .9fr; } }
@media (max-width:992px){ .booking-grid{ grid-template-columns:1fr; gap:18px; } }

/* Card / glass */
.glass{
  background:linear-gradient(180deg, var(--glass1), var(--glass2));
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:saturate(120%) blur(8px);
}

/* --------------------
   CHIPS
   -------------------- */
.chipbar{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; width:100% }
.chip{
  appearance:none; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16); color:#f0f0f4;
  padding:.55rem .95rem; border-radius:999px; font:700 var(--fs-0)/1 var(--font);
  letter-spacing:.2px; cursor:pointer; user-select:none;
  transition: transform .18s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.chip:hover{ transform:translateY(-1px); border-color:var(--accent) }
.chip.is-active{
  background:linear-gradient(180deg, var(--accent), #e8cc9c);
  color:#111; border-color:var(--accent); box-shadow:0 6px 16px rgba(212,180,131,.28)
}
.chip:disabled{ opacity:.55; cursor:not-allowed }

/* --------------------
   BOOKING FORM
   -------------------- */
.booking-card{
  display:block;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:2px solid rgba(212,180,131,.85);
  border-radius:14px; padding:18px; box-shadow:var(--shadow)
}
.booking-card .h3{ margin:0 0 .6rem; color:var(--text) }
.step{ margin-top:14px }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:660px){ .two-col{ grid-template-columns:1fr } }
.form-label{ color:var(--text); margin-bottom:.4rem; font:600 var(--fs-0)/1 var(--font) }

.selected-box{
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px dashed rgba(212,180,131,.55);
  border-radius:10px; padding:.8rem 1rem; min-height:52px; color:#eaeaf0; font-weight:650
}

/* Inputs */
.selskapers-input, .form-select.selskapers-select{
  background:#0f0f14; border:1px solid var(--accent); color:#fff;
  border-radius:10px; padding:.6rem .75rem; font:500 var(--fs-1)/1.2 var(--font);
}
.selskapers-input::placeholder{ color:#b7b7bf }
.selskapers-input:focus, .form-select.selskapers-select:focus{ box-shadow:var(--ring) }

/* Calendar icon */
.input-with-icon{ position:relative }
.calendar-icon{
  position:absolute; right:.8rem; top:50%; transform:translateY(-50%);
  width:1.1rem; height:1.1rem; fill:var(--accent); pointer-events:none
}

/* CTA */
.btn-custom{
  background:linear-gradient(180deg, var(--accent), #e8cc9c); color:#121212;
  border-radius:12px; padding:.9rem 1.05rem; border:0; font-weight:800; letter-spacing:.15px;
  transition: transform .15s ease, box-shadow .25s ease, filter .2s ease
}
.btn-custom:hover{ transform:translateY(-1px); box-shadow:0 14px 24px rgba(212,180,131,.3) }
.btn-custom:disabled{ opacity:.6; cursor:not-allowed; filter:grayscale(.2) }

/* Ghost button variant (for “Logg inn”/“Fortsett som gjest”) */
.btn-ghost{
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:var(--text);
  padding:.7rem .9rem; border-radius:10px; font-weight:700;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.btn-ghost:hover{ transform:translateY(-1px); border-color:var(--accent) }

/* Text utils */
.muted{ color:var(--muted) }
.small{ font-size:var(--fs-0) }

/* Alerts */
.alert{
  border-radius:10px; padding:.75rem 1rem; font:500 var(--fs-0)/1.25 var(--font)
}
.alert-info{ background:rgba(128,195,255,.12); border:1px solid rgba(128,195,255,.32); color:#cfe6ff }
.alert-success{ background:rgba(63,186,138,.12); border:1px solid rgba(63,186,138,.32); color:#bff0df }
.alert-danger{ background:rgba(255,122,122,.12); border:1px solid rgba(255,122,122,.32); color:#ffd0d0 }

/* --------------------
   AVAILABILITY PANEL
   -------------------- */
.plan-card{ padding:16px }
.plan-top{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:12px }

/* Grid med tider */
.availability-grid{
  display:flex; flex-direction:column; gap:10px;
}
.availability-row{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}

/* Tids-knapper arver .chip; litt større tappetreff og monospaced tallfølelse */
.availability-grid .chip{
  padding:.6rem 1rem;
  letter-spacing:.3px;
}

/* Aktivt valgt tid i grid */
.availability-grid .chip.is-active{
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#121212;
}

/* “I dag / pilknapper” i toppseksjon */
#today-chip[aria-current="date"]{
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  border-color:rgba(255,255,255,.22);
}

/* Oppsummering-kortet inne i høyre kolonne */
#summary{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(212,180,131,.45);
}

/* --------------------
   VALIDATION STATES (enkle)
   -------------------- */
/* Vis kun feilstil NÅR feltet er berørt, eller skjema er forsøkssendt */
.was-validated .selskapers-input:invalid,
.was-validated .selskapers-select:invalid,
.selskapers-input.touched:invalid,
.selskapers-select.touched:invalid{
  border-color: rgba(255,122,122,.85) !important;
  box-shadow: 0 0 0 3px rgba(255,122,122,.18);
}

/* Ingen grønn “valid”-stil – behold nøytral/aksentkant */
.selskapers-input,
.selskapers-select{
  border-color: var(--accent);
}


/* --------------------
   MISC / TWEAKS
   -------------------- */
/* Skjul ev. Choices-UI-rester */
#guests + .choices{ display:none !important }

/* Bedre tap targets på mobil */
@media (max-width:640px){
  .chip{ padding:.65rem 1rem }
  .btn-custom{ padding:1rem 1.1rem }
}

/* Liten separator styling */
hr{ border-color: rgba(255,255,255,.12) }

/* Print: keep it tidy */
@media print{
  .booking-hero{ background:none; padding:0 0 .5rem }
  .glass, .booking-card, .plan-card{ box-shadow:none; border:1px solid #ccc }
}
/* ===== Dark inputs: hold svart bakgrunn + hvit tekst i fokus/autofyll ===== */
.selskapers-input,
.form-select.selskapers-select {
  background:#0f0f14 !important;
  color:#fff !important;
  caret-color:#fff;
}

/* Fokus: ikke bytt til hvit, behold ring og mørk bakgrunn */
.selskapers-input:focus,
.form-select.selskapers-select:focus {
  background:#0f0f14 !important;
  color:#fff !important;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/* Placeholder skal være litt lysere grå */
.selskapers-input::placeholder,
textarea.selskapers-input::placeholder {
  color:#b7b7bf;
  opacity:1;
}

/* iOS/Chrome autofyll: fjern gul bakgrunn og behold hvit tekst */
.selskapers-input:-webkit-autofill,
.selskapers-input:-webkit-autofill:hover,
.selskapers-input:-webkit-autofill:focus,
.form-select.selskapers-select:-webkit-autofill {
  -webkit-text-fill-color:#fff !important;
  box-shadow: 0 0 0px 1000px #0f0f14 inset !important;
  transition: background-color 9999s ease-out 0s; /* hack for iOS */
}

/* Disabled/read-only: gjør det tydelig men fortsatt mørkt */
.selskapers-input:disabled,
.form-select.selskapers-select:disabled,
.selskapers-input[readonly] {
  background:#0f0f14 !important;
  color:#c8c8cf !important;
  opacity:.7;
}