/* ═══════════════════════════════════════════════════
   BASE.CSS — Horizon Travel System design tokens + reset
   ═══════════════════════════════════════════════════ */

:root {
  --color-primary:            #002155;
  --color-primary-container:  #003580;
  --color-on-primary:         #ffffff;
  --color-on-primary-container: #7fa1f2;
  --color-primary-fixed:      #d9e2ff;
  --color-primary-fixed-dim:  #b0c6ff;
  --color-inverse-primary:    #b0c6ff;

  --color-secondary:          #006493;
  --color-secondary-container:#00b0fd;
  --color-on-secondary:       #ffffff;
  --color-on-secondary-container: #003f5f;

  --color-tertiary:           #002154;
  --color-tertiary-container: #00357f;
  --color-on-tertiary:        #ffffff;
  --color-on-tertiary-container: #76a1ff;

  --color-bg:                 #f9f9ff;
  --color-surface:            #f9f9ff;
  --color-surface-lowest:     #ffffff;
  --color-surface-low:        #f2f3fb;
  --color-surface-container:  #ecedf6;
  --color-surface-high:       #e6e8f0;
  --color-surface-highest:    #e1e2ea;

  --color-on-surface:         #191c21;
  --color-on-surface-variant: #434651;
  --color-inverse-surface:    #2d3037;
  --color-inverse-on-surface: #eff0f8;

  --color-outline:            #747782;
  --color-outline-variant:    #c4c6d3;

  --color-error:              #ba1a1a;
  --color-error-container:    #ffdad6;
  --color-on-error:           #ffffff;
  --color-success:            #2e7d32;
  --color-success-container:  #f1f8e9;

  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --sp-1:  8px;  --sp-2: 16px; --sp-3: 24px;
  --sp-4: 32px;  --sp-6: 48px; --sp-8: 64px;

  --container-max: 1200px;
  --gutter:        24px;
  --margin-x:      32px;

  --radius-sm:  0.25rem;
  --radius:     0.5rem;
  --radius-md:  0.75rem;
  --radius-lg:  1rem;
  --radius-xl:  1.5rem;
  --radius-full: 9999px;

  --shadow-low:   0 2px 8px rgba(0,33,85,0.06), 0 1px 3px rgba(0,33,85,0.04);
  --shadow-mid:   0 4px 16px rgba(0,33,85,0.09), 0 2px 6px rgba(0,33,85,0.06);
  --shadow-high:  0 8px 32px rgba(0,33,85,0.12), 0 4px 12px rgba(0,33,85,0.07);
  --shadow-float: 0 16px 48px rgba(0,33,85,0.16), 0 6px 20px rgba(0,33,85,0.08);

  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  color: var(--color-on-surface); background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img, svg, video, canvas { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }

.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--margin-x); }

.display-lg  { font-family: var(--font-display); font-size: clamp(32px,5vw,48px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.headline-lg { font-family: var(--font-display); font-size: clamp(24px,4vw,32px); font-weight: 700; line-height: 1.3; }
.headline-md { font-family: var(--font-display); font-size: clamp(20px,3vw,24px); font-weight: 600; line-height: 1.4; }
.body-lg  { font-size: 18px; line-height: 1.6; }
.body-md  { font-size: 16px; line-height: 1.6; }
.body-sm  { font-size: 14px; line-height: 1.5; }
.label-lg { font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; }
.label-sm { font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: 0.02em; }
.price-display { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1; }

.muted { color: var(--color-on-surface-variant); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ═══════════════════════════════════════════════════
   BOTTOM NAVIGATION BAR — mobile only (≤767px)
   ═══════════════════════════════════════════════════ */

.bottom-nav { display: none; }

/* Hamburger removed site-wide — keep full top nav usable at tablet widths */
.nav__hamburger { display: none !important; }
@media (min-width: 768px) and (max-width: 860px) {
  .nav__links { display: flex !important; }
  .nav__auth { display: none !important; }
  .nav__icon { display: none; }
  .nav__link { white-space: nowrap; }
}

@media (max-width: 767px) {
  .nav__links     { display: none !important; }
  .nav__auth      { display: none !important; }
  .nav__hamburger { display: none !important; }

  .nav__inner { justify-content: flex-start; }

  body { padding-bottom: 64px; }

  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--color-primary);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    z-index: 500;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.25);
  }

  .bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 6px 4px 8px;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s;
    min-width: 0;
  }

  .bottom-nav__icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
  }

  .bottom-nav__item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bottom-nav__item--active { color: white; }

  .bottom-nav__item--active::before {
    content: '';
    position: absolute;
    bottom: 60px;
    width: 32px;
    height: 3px;
    background: white;
    border-radius: 0 0 3px 3px;
  }

  .bottom-nav__item:active { color: rgba(255, 255, 255, 0.8); }
}