/*
 * ============================================================
 *  DESIGN SYSTEM — Wizualizacja 01 · Blush & Pearl
 *  Aby zmienić cały motyw — edytuj tylko tę sekcję :root {}
 * ============================================================
 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  /* — tła — */
  --bg:         #FDFAF7;
  --bg-alt:     #F5EDE6;
  --surface:    #FFFFFF;
  --blush:      #F0E4DC;
  --ivory:      #FBF8F4;

  /* — akcenty rose gold — */
  --gold:        #B8956A;
  --gold-dark:   #8A6A3E;
  --gold-light:  #D4AF82;
  --gold-text:   #7A5F3A;
  --gold-wash:   #F9EEE3;
  --gold-border: rgba(184,149,106,0.26);

  /* — tekst — */
  --dark:        #1A1714;
  --dark-soft:   #2A2520;
  --text-mute:   #7A6F65;
  --text-faint:  #A89F95;

  /* — gradient rose gold dla wyróżnionych elementów — */
  --rich:        linear-gradient(160deg, #C9956B 0%, #A07040 100%);
  --rich-solid:  #B8956A;

  /* — linie — */
  --line:      rgba(26,23,20,0.09);
  --line-soft: rgba(26,23,20,0.06);

  /* — cienie — */
  --shadow-sm:   0 1px 8px rgba(26,23,20,0.06);
  --shadow:      0 2px 16px rgba(26,23,20,0.08);
  --shadow-md:   0 4px 28px rgba(26,23,20,0.10);
  --shadow-lg:   0 8px 48px rgba(26,23,20,0.12);
  --shadow-gold: 0 4px 20px rgba(184,149,106,0.22);

  /* — statusy (panel) — */
  --st-new-bg:      #E8F1FF; --st-new-fg:      #2557B7;
  --st-active-bg:   #FFF1D6; --st-active-fg:   #9A6B1A;
  --st-booked-bg:   #E3F5E8; --st-booked-fg:   #1F7A3D;
  --st-done-bg:     #EDE8E2; --st-done-fg:     #5A5048;
  --st-rejected-bg: #FAE4E2; --st-rejected-fg: #A03A2F;

  /* — typografia — */
  --font-serif: 'Cormorant', Georgia, serif;
  --font-sans:  'Montserrat', 'Helvetica Neue', sans-serif;

  /* — promienie — */
  --r-sm:   10px;
  --r:      18px;
  --r-lg:   26px;
  --r-pill: 50px;
}

/* ================================================================
   RESET
   ================================================================ */
*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--dark);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--gold); color: white; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ================================================================
   PROTO-NAV — pasek nawigacji między stronami wizualizacji
   Stały na dole, dyskretny, nie przeszkadza w designie.
   ================================================================ */
/* Outer wrapper — pełny viewport, flex do prawego dolnego rogu */
.proto-nav {
  position: fixed;
  top: 0;
  bottom: 16px;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
}
/* Inner pill — the visible element */
.proto-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #1A1714;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50px;
  padding: 6px 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.45);
  white-space: nowrap;
  pointer-events: all;
}
.proto-nav a {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  border-radius: 50px;
  font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; text-decoration: none;
  color: rgba(245,240,235,0.55);
  transition: all 0.2s;
}
.proto-nav a:hover { color: rgba(245,240,235,0.90); background: rgba(255,255,255,0.07); }
.proto-nav a.active { background: var(--gold); color: #1A1714; }
.proto-nav .sep {
  width: 1px; height: 16px;
  background: rgba(255,255,255,0.10);
  margin: 0 2px; flex-shrink: 0;
}

/* ================================================================
   CUSTOM SELECT
   ================================================================ */
.c-select { position:relative; user-select:none; }
.c-select__trigger {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--ivory); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:13px 15px; font-size:15px; cursor:pointer;
  transition:border-color .2s, background .2s; color:var(--dark);
}
.c-select__trigger svg { color:var(--gold); flex-shrink:0; transition:transform .25s; }
.c-select.open .c-select__trigger { border-color:var(--gold); background:var(--surface); }
.c-select.open .c-select__trigger svg { transform:rotate(180deg); }
.c-select__dropdown {
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:50;
  background:var(--surface); border:1px solid var(--gold-border);
  border-radius:var(--r-sm); box-shadow:var(--shadow-md);
  overflow:hidden; display:none;
}
.c-select.open .c-select__dropdown { display:block; }
.c-select__opt {
  padding:12px 15px; font-size:15px; cursor:pointer;
  transition:background .15s, color .15s; color:var(--dark);
}
.c-select__opt:hover { background:var(--gold-wash); }
.c-select__opt--sel { color:var(--gold-text); font-weight:600; background:var(--gold-wash); }

/* ================================================================
   CUSTOM DATE PICKER
   ================================================================ */
.c-date { position:relative; user-select:none; }
.c-date__trigger {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--ivory); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:13px 15px; font-size:15px; cursor:pointer;
  transition:border-color .2s, background .2s; color:var(--dark);
}
.c-date__trigger svg { color:var(--gold); flex-shrink:0; }
.c-date.open .c-date__trigger { border-color:var(--gold); background:var(--surface); }
.c-date__val.placeholder { color:var(--text-faint); }
.c-date__panel {
  position:absolute; top:calc(100% + 6px); left:0; z-index:50; min-width:280px;
  background:var(--surface); border:1px solid var(--gold-border);
  border-radius:var(--r); box-shadow:var(--shadow-md);
  padding:16px; display:none;
}
.c-date.open .c-date__panel { display:block; }
.c-date__nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.c-date__head { font-family:var(--font-serif); font-size:17px; font-weight:400; color:var(--dark); }
.c-date__arr {
  background:none; border:none; cursor:pointer; width:30px; height:30px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:20px; color:var(--gold-text); transition:background .15s; line-height:1;
}
.c-date__arr:hover { background:var(--gold-wash); }
.c-date__dow { display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:6px; }
.c-date__dow span {
  text-align:center; font-size:10px; font-weight:600; letter-spacing:1px;
  text-transform:uppercase; color:var(--text-faint); padding:4px 0;
}
.c-date__grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.c-date__day {
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:14px; border-radius:50%; cursor:pointer;
  transition:background .15s, color .15s; color:var(--dark);
}
.c-date__day:hover { background:var(--gold-wash); color:var(--gold-text); }
.c-date__day--other { color:var(--text-faint); }
.c-date__day--other:hover { background:var(--ivory); color:var(--text-mute); }
.c-date__day--today { font-weight:600; color:var(--gold-text); }
.c-date__day--sel { background:var(--gold) !important; color:white !important; font-weight:600; }
.c-date__day--past { color:var(--text-faint); pointer-events:none; opacity:.45; }