@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/*
 * Stilark for Salong Booking - Versjon 5.1 (Validert og komplett)
 * Garantert komplett versjon for å fikse paritell fil-feil.
 */

/* ==========================================================================
   1. DESIGN TOKENS (CSS Variabler fra Style Guide)
   ========================================================================== */
:root {
  --bg-app: #F2F0F9;
  --bg-card: #FFFFFF;
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --line-muted: #E5E7EB;
  --accent-500: #8B5CF6;
  --accent-600: #7C3AED;
  --accent-300: #A78BFA;
  --shadow-card: 0 4px 12px rgba(17, 24, 39, 0.06);
  --shadow-button: 0 8px 20px rgba(124, 58, 237, 0.24);
  --gradient-primary: linear-gradient(90deg, #9C6BFF 0%, #B06BFF 100%);
  --text-on-brand: #FFFFFF;
}

/* ==========================================================================
   2. BASE & LAYOUT
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', -apple-system, sans-serif; background-color: var(--bg-app); color: var(--text-secondary); font-size: 15px; line-height: 1.6; }
.container { max-width: 414px; margin: 0 auto; padding: 0 24px; }
.header { height: 56px; display: flex; justify-content: space-between; align-items: center; }
.nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--text-primary); flex-shrink: 0; background: none; border: none; cursor: pointer; }
.brand { font-size: 17px; font-weight: 600; color: var(--text-primary); }
.hidden { display: none !important; }

/* ==========================================================================
   3. STEG INDIKATOR (FIKSET)
   ========================================================================== */
.progress-indicator { padding: 0; margin: 8px 0 0; }
.progress-nodes { position: relative; display: flex; justify-content: space-between; align-items: center; }
.progress-line { position: absolute; top: 8px; left: 0; right: 0; height: 2px; background-color: var(--line-muted); border-radius: 1px; z-index: 0; }
.node-wrapper { display: flex; flex-direction: column; align-items: center; z-index: 1; background-color: var(--bg-app); padding: 0 4px; }
.node { width: 12px; height: 12px; border-radius: 50%; background-color: var(--line-muted); transition: all 0.3s ease; }
.node-wrapper label { margin-top: 8px; font-size: 12px; color: var(--text-secondary); }
.node.completed { background-color: var(--accent-300); }
.node.active { width: 18px; height: 18px; background-color: var(--accent-500); border: 2px solid var(--bg-app); }
.node-wrapper label.active { color: var(--text-primary); }

/* ==========================================================================
   4. HOVEDKOMPONENTER
   ========================================================================== */
.booking-wizard { padding-top: 16px; }
.step-content h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.2px; color: var(--text-primary); margin-bottom: 12px; }

/* -- Kortliste (Eksperter) (FIKSET) -- */
.card-list-wrapper { margin: 0 -24px; }
.card-list { padding-bottom: 25px; display: flex; gap: 12px; scroll-snap-type: x mandatory; padding: 4px 24px; scrollbar-width: none; }
.card-list::-webkit-scrollbar { display: none; }
.card {
  scroll-snap-align: start; flex-shrink: 0; width: 120px; height: 140px;
  background-color: var(--bg-card); border-radius: 12px;
  box-shadow: var(--shadow-card); padding: 12px; text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative; border: 2px solid transparent; cursor: pointer;
}
.card:active { transform: scale(0.98); }
.avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-top: 4px; }
.avatar-placeholder { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--line-muted); display: grid; place-items: center; margin: 4px auto 0; color: var(--text-secondary); }
.name { display: block; font-size: 15px; font-weight: 600; margin-top: 10px; color: var(--text-primary); }
.exp { display: block; font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.chip-staff.active { border-color: var(--accent-500); }
.check-badge { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background-color: var(--bg-card); border: 2px solid var(--accent-500); display: grid; place-items: center; color: var(--accent-500); font-weight: bold; }

/* -- Kalender (FIKSET) -- */
.date-picker h2, .slots-container h3 { font-size: 18px; font-weight: 600; }
.date-picker-header { display: flex; justify-content: center; align-items: center; margin-bottom: 8px; position: relative; }
.month-display { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; color: var(--text-primary); background: none; cursor: pointer; border-radius: 50%; transition: background-color 0.2s ease; border: none; }
.nav-arrow:hover { background-color: var(--bg-subtle); }
#prevMonth { left: -12px; }
#nextMonth { right: -12px; }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 12px; font-weight: 500; color: var(--text-secondary); letter-spacing: 0.2px; margin-bottom: 6px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 10px; place-items: center; }
.day {
  width: 40px; height: 40px; display: grid; place-items: center;
  font-size: 15px; font-weight: 500; border-radius: 50%;
  cursor: pointer; transition: all 0.2s ease;
  background-color: var(--bg-subtle); color: var(--text-primary); border: none;
}
.day.empty { background: none; cursor: default; }
.day.disabled { opacity: 0.4; cursor: default; background: none; }
.day:not(.disabled):not(.empty):not(.selected):hover { background-color: var(--accent-300); color: white; }
.day.today:not(.selected) { border: 1.5px solid var(--accent-300); background-color: var(--bg-card); }
.day.selected { background-color: var(--accent-500); color: var(--text-on-brand); font-weight: 600; border: none; }

/* -- Tidspunkter -- */
.slots-container { margin-top: 24px; }
#slots { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.slot { width: 100%; height: 48px; background-color: var(--bg-card); border: 1px solid var(--line-muted); border-radius: 12px; font-weight: 600; color: var(--text-primary); cursor: pointer; transition: all 0.2s ease; }
.slot.active { background-color: var(--accent-500); color: var(--text-on-brand); border-color: var(--accent-500); }
#slots .muted { grid-column: 1 / -1; text-align: center; padding: 16px 0; color: var(--text-muted); }

/* -- Personlig Info -- */
.summary-small-card { display: flex; align-items: center; gap: 12px; background-color: var(--bg-subtle); padding: 12px; border-radius: 12px; margin-bottom: 24px; }
.summary-small-card .avatar { width: 40px; height: 40px; }
.summary-title { display: block; font-weight: 600; color: var(--text-primary); }
.summary-info { display: block; font-size: 13px; color: var(--text-secondary); }
.form-group { margin-bottom: 16px; }
.form-field { width: 100%; height: 56px; padding: 0 16px; border: 1px solid var(--line-muted); border-radius: 12px; font-size: 15px; background-color: var(--bg-card); }
.form-field:focus { outline: none; border-color: var(--accent-500); }

/* ==========================================================================
   5. STICKY FOOTER & KNAPP (FIKSET)
   ========================================================================== */
.sticky-footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 16px 24px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); background: var(--bg-card); box-shadow: 0 -4px 15px rgba(0,0,0,0.05); }
.btn { display: grid; place-items: center; width: 100%; height: 56px; border-radius: 16px; font-size: 17px; font-weight: 600; cursor: pointer; transition: all 0.2s ease-in-out; border: none; }
.btn-primary { background: var(--gradient-primary); color: var(--text-on-brand); box-shadow: var(--shadow-button); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.05); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { background: var(--line-muted); color: #9CA3AF; box-shadow: none; cursor: not-allowed; }

/* ==========================================================================
   6. RESPONSIV DESIGN (for desktop)
   ========================================================================== */
@media (min-width: 800px) {
  body { padding: 40px 0; }
  .container { border-radius: 24px; box-shadow: var(--shadow-card); background: var(--bg-primary); }
}

/* ==========================================================================
   7. TILLEGG FOR STEG 1 (Velg Behandling)
   ========================================================================== */
#serviceSelection {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--line-muted);
}
.section-title-minor {
    font-size: 18px; /* Litt mindre enn hovedtittelen */
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}
.service-chip {
    background-color: var(--bg-card);
    border-color: var(--line-muted);
    box-shadow: var(--shadow-card);
}
.service-chip.active {
    background: var(--gradient-primary); /* Bruker samme stil som "Next"-knappen */
    color: var(--text-on-brand);
    border-color: transparent;
    box-shadow: var(--shadow-button);
}
.service-chip.active::after {
    display: none; /* Fjerner det lille sjekk-ikonet, da hele chippen er en tydelig indikator */
}
#serviceHint {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* ==========================================================================
   8. OPPGRADERT STIL FOR TJENESTE-KNAPPER
   ========================================================================== */

/* Sentrerer knappene i containeren sin */
#serviceSelection .chips {
  justify-content: center;
  gap: 16px; /* Litt mer luft mellom knappene */
}

/* Gir service-knappene den nye, større stilen som matcher "Next" */
.service-chip {
  /* Nullstiller gammel stil */
  background-color: transparent;
  border: none;
  
  /* Legger til "Next"-knapp stilen */
  background: var(--gradient-primary);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-button);
  border-radius: 16px; /* Samme som Next-knapp */
  font-size: 16px;
  font-weight: 600;
  padding: 0 24px; /* Fast padding */
  min-height: 56px; /* Samme høyde som Next-knapp */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
}

.service-chip:hover:not(.active) {
    filter: brightness(1.05);
    transform: translateY(-2px);
}

/* Ny stil for NÅR en knapp er VALGT */
.service-chip.active {
  background: var(--gradient-primary); /* Beholder gradienten */
  filter: brightness(0.9) saturate(1.2); /* Gjør den litt mørkere og mer mettet */
  /* Gir en "trykket inn"-effekt */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
  transform: translateY(1px);
}

/* Fjerner det gamle sjekk-ikonet, da den nye stilen er tydelig nok */
.service-chip.active::after {
    display: none;
}

/* ==========================================================================
   8. FORBEDRET LAYOUT FOR TJENESTE-KNAPPER
   ========================================================================== */

/* FIKS: Sentrerer knappene og gir mer luft */
#serviceSelection .chips {
  justify-content: center; /* Sentrerer knappene horisontalt */
  gap: 16px;               /* Øker avstanden mellom knappene */
}

/* FIKS: Gir knappene litt mer pusterom innvendig */
.service-chip {
    padding: 12px 24px;
}

/* ==========================================================================
   8. FORBEDRET LAYOUT FOR TJENESTE-KNAPPER (KOMPLETT)
   ========================================================================== */

#serviceSelection .chips {
  display: flex;             /* FIKS: Sørger for at containeren bruker flexbox */
  justify-content: center;   /* Sentrerer knappene horisontalt */
  flex-wrap: wrap;           /* Lar knappene gå over flere linjer ved behov */
  gap: 16px;                 /* Øker avstanden mellom knappene */
}

/* Gir knappene litt mer pusterom innvendig */
.service-chip {
    padding: 12px 24px;
}

/* ==========================================================================
   9. FINJUSTERING AV "SELECT SERVICE"
   ========================================================================== */

/* FIKS: Gir mer pusterom under knappene */
#serviceSelection .chips {
  margin-bottom: 16px; 
}

/* FIKS: Sentrerer og fremhever pris/varighet-teksten */
#serviceHint {
  text-align: center;         /* Sentrerer teksten */
  color: var(--text-body);    /* Bruker en mørkere, mer lesbar farge */
  font-weight: 500;           /* Gjør fonten litt tykkere */
  font-size: 15px;            /* Øker skriftstørrelsen */
  margin-top: 0;              /* Fjerner unødvendig topp-margin */
}
.card-list {
  justify-content: center;
}