/* Dates & corridors — Aviasales-style route + fare-calendar search for the home page.
   Lives on top of the globe world from index.html: same dark navy surfaces, sky accent,
   system sans. Prices under each day come from the live trips/requests in the feed. */

:root {
  --cc-surface: #0c1424;
  --cc-surface-2: #111c31;
  --cc-line: rgba(148, 197, 255, 0.13);
  --cc-line-strong: rgba(148, 197, 255, 0.26);
  --cc-text: #eaf2fd;
  --cc-muted: #9aabc2;
  --cc-faint: #71819a;
  --cc-accent: #38bdf8;
  --cc-accent-ink: #03131f;
  --cc-band: rgba(56, 189, 248, 0.15);
  --cc-best: #4ade80;
  --cc-weekend: #fda4af;
  --cc-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Trigger strip inside the feed panel ---------- */

.cc-trigger {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto; gap: 6px;
  padding: 8px 10px; border-bottom: 1px solid var(--panel-border, var(--cc-line));
}
.cc-chip {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: 8px; align-items: center; min-height: 46px; padding: 6px 10px;
  border: 1px solid var(--cc-line); border-radius: 12px; background: rgba(255, 255, 255, 0.035);
  color: var(--cc-text); text-align: left; cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.cc-chip svg { grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--cc-muted); }
.cc-chip-label { font-size: 11px; font-weight: 600; color: var(--cc-muted); line-height: 1.2; }
.cc-chip-value {
  font-size: 13px; font-weight: 700; line-height: 1.25; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.cc-chip:hover { border-color: var(--cc-line-strong); background: rgba(255, 255, 255, 0.06); }
.cc-chip.is-set { border-color: rgba(56, 189, 248, 0.45); background: rgba(56, 189, 248, 0.08); }
.cc-chip.is-set svg { color: var(--cc-accent); }
.cc-clear {
  width: 34px; align-self: stretch; display: grid; place-items: center;
  border: 1px solid var(--cc-line); border-radius: 12px; background: transparent;
  color: var(--cc-muted); cursor: pointer;
}
.cc-clear svg { width: 16px; height: 16px; }
.cc-clear:hover { color: var(--cc-text); border-color: var(--cc-line-strong); }
.cc-clear[hidden] { display: none; }

/* ---------- Sheet ---------- */

.cc-scrim {
  position: fixed; inset: 0; z-index: 90; background: rgba(2, 6, 14, 0.5);
  opacity: 0; transition: opacity 0.22s ease;
}
.cc-scrim.is-open { opacity: 1; }
.cc-scrim[hidden], .cc-sheet[hidden] { display: none; }

.cc-sheet {
  position: fixed; z-index: 91; top: 134px; left: 446px;
  width: min(812px, calc(100vw - 470px)); max-height: calc(100vh - 152px);
  display: flex; flex-direction: column;
  background: var(--cc-surface); color: var(--cc-text);
  border: 1px solid var(--cc-line-strong); border-radius: 20px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
  opacity: 0; transform: translateY(10px) scale(0.985); transform-origin: top left;
  transition: opacity 0.22s ease, transform 0.32s var(--cc-ease);
}
.cc-sheet.is-open { opacity: 1; transform: none; }
.cc-sheet ::selection { background: rgba(56, 189, 248, 0.35); color: #fff; }
.cc-sheet button, .cc-trigger button { font-family: inherit; }
.cc-sheet :focus-visible { outline: 2px solid #7dd3fc; outline-offset: 2px; }

.cc-body {
  overflow-y: auto; padding: 18px 22px 8px;
  scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}
.cc-body::-webkit-scrollbar { width: 8px; }
.cc-body::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.3); border-radius: 8px; }

.cc-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 0 22px; }
.cc-head h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.cc-icon-btn {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px;
  border: none; background: transparent; color: var(--cc-muted); cursor: pointer;
}
.cc-icon-btn svg { width: 18px; height: 18px; }
.cc-icon-btn:hover { background: rgba(255, 255, 255, 0.07); color: var(--cc-text); }

/* Route row: From ⇄ To */
.cc-route { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc-field { position: relative; }
.cc-field label {
  position: absolute; top: 8px; left: 14px; font-size: 11px; font-weight: 600;
  color: var(--cc-muted); pointer-events: none;
}
.cc-field input {
  width: 100%; height: 58px; padding: 22px 40px 6px 14px;
  border: 1px solid var(--cc-line); border-radius: 14px; background: var(--cc-surface-2);
  color: var(--cc-text); font: inherit; font-size: 15px; font-weight: 700; outline: none;
  caret-color: var(--cc-accent); transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.cc-field input::placeholder { color: var(--cc-faint); font-weight: 600; }
.cc-field input:focus { border-color: var(--cc-accent); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18); }
.cc-field[data-field="to"] input { padding-left: 24px; }
.cc-field[data-field="to"] label { left: 24px; }

.cc-swap {
  position: absolute; top: 50%; left: 50%; z-index: 2; width: 34px; height: 34px;
  margin: -17px 0 0 -17px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--cc-line-strong); background: var(--cc-surface); color: var(--cc-text);
  cursor: pointer; transition: transform 0.35s var(--cc-ease), border-color 0.18s ease;
}
.cc-swap svg { width: 16px; height: 16px; }
.cc-swap:hover { border-color: var(--cc-accent); }
.cc-swap.is-spun { transform: rotate(180deg); }

.cc-options {
  position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 280px; overflow-y: auto; list-style: none; padding: 6px;
  background: var(--cc-surface-2); border: 1px solid var(--cc-line-strong); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}
.cc-options[hidden] { display: none; }
.cc-option {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 10px; cursor: pointer; font-size: 13px;
}
.cc-option.is-active { background: rgba(56, 189, 248, 0.12); }
.cc-option[aria-selected="true"] .cc-city { color: var(--cc-accent); }
.cc-code {
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--cc-muted);
  font-variant-numeric: tabular-nums;
}
.cc-city { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-count { font-size: 11px; color: var(--cc-muted); white-space: nowrap; }
.cc-option.is-quiet .cc-city { color: var(--cc-muted); font-weight: 600; }
.cc-option-empty { padding: 12px; font-size: 13px; color: var(--cc-muted); }

/* Toolbar: price source + date presets */
.cc-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; margin: 14px 0 6px;
}
.cc-seg {
  display: inline-flex; padding: 3px; border-radius: 12px; background: var(--cc-surface-2);
  border: 1px solid var(--cc-line);
}
.cc-seg button {
  padding: 7px 12px; border: none; border-radius: 9px; background: transparent;
  color: var(--cc-muted); font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.cc-seg button[aria-checked="true"] { background: rgba(56, 189, 248, 0.16); color: #bfe9ff; }
.cc-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-preset {
  padding: 7px 11px; border-radius: 999px; border: 1px solid var(--cc-line);
  background: transparent; color: #cfdced; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.cc-preset:hover { border-color: var(--cc-line-strong); color: var(--cc-text); }
.cc-preset[aria-pressed="true"] { border-color: rgba(56, 189, 248, 0.55); background: rgba(56, 189, 248, 0.12); color: #bfe9ff; }

/* Calendar */
.cc-cal { position: relative; }
.cc-months { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cc-month-head {
  display: flex; align-items: center; justify-content: center; height: 40px;
  font-size: 15px; font-weight: 800; letter-spacing: -0.01em;
}
.cc-nav {
  position: absolute; top: 2px; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--cc-line); background: var(--cc-surface-2);
  color: var(--cc-text); cursor: pointer;
}
.cc-nav svg { width: 16px; height: 16px; }
.cc-nav:hover:not(:disabled) { border-color: var(--cc-accent); }
.cc-nav:disabled { opacity: 0.35; cursor: default; }
.cc-nav.prev { left: 0; }
.cc-nav.next { right: 0; }

.cc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 4px; }
.cc-dow {
  height: 26px; display: grid; place-items: center; font-size: 11px; font-weight: 700;
  color: var(--cc-faint); text-transform: uppercase; letter-spacing: 0.04em;
}
.cc-dow.is-weekend { color: #d58b96; }

.cc-day {
  position: relative; height: 54px; padding: 0; border: none; background: transparent;
  color: var(--cc-text); cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; isolation: isolate;
  font-variant-numeric: tabular-nums;
}
/* The cell face (hover / selected pill) and the range band are separate layers, so the
   band runs edge-to-edge across a week while the pill keeps its rounded shape. */
.cc-day::before, .cc-day::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.cc-day::before { inset: 2px 0; background: transparent; }
.cc-day::after { inset: 2px 3px; border-radius: 12px; background: transparent; transition: background 0.14s ease; }
.cc-day:hover:not(:disabled)::after { background: rgba(255, 255, 255, 0.07); }
.cc-num { font-size: 15px; font-weight: 700; line-height: 1; }
.cc-price { font-size: 11px; font-weight: 700; line-height: 1; color: var(--cc-muted); min-height: 11px; }
.cc-day.is-weekend .cc-num { color: var(--cc-weekend); }
.cc-day.tier-best .cc-price { color: var(--cc-best); }
.cc-day.tier-mid .cc-price { color: #cbd5e1; }
.cc-day.tier-high .cc-price { color: var(--cc-muted); }
.cc-day.is-empty .cc-num { color: #aebbd0; font-weight: 600; }
.cc-day.is-today::after { box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.55); }
.cc-day:disabled { cursor: default; }
.cc-day:disabled .cc-num { color: #3d4a5f; font-weight: 600; }
.cc-day:disabled .cc-price { visibility: hidden; }

.cc-day.in-range::before, .cc-day.in-preview::before { background: var(--cc-band); }
.cc-day.is-start.has-band::before { left: 50%; background: var(--cc-band); }
.cc-day.is-end.has-band::before, .cc-day.is-preview-end::before { right: 50%; background: var(--cc-band); }
.cc-day.is-preview-end::after { box-shadow: inset 0 0 0 1.5px var(--cc-accent); }
.cc-day.in-flex .cc-num { text-decoration: underline dotted rgba(56, 189, 248, 0.8); text-underline-offset: 4px; }
.cc-day.is-start::after, .cc-day.is-end::after { background: var(--cc-accent); }
.cc-day.is-start .cc-num, .cc-day.is-end .cc-num,
.cc-day.is-start .cc-price, .cc-day.is-end .cc-price { color: var(--cc-accent-ink); }
.cc-day.is-start:hover::after, .cc-day.is-end:hover::after { background: #5ccbfa; }
/* Band ends round off at the week edges (the grid starts with 7 weekday labels, so
   7n+1 is always a Monday column and 7n a Sunday column). */
.cc-grid > .cc-day:nth-child(7n + 1):is(.in-range, .in-preview)::before { left: 3px; border-radius: 12px 0 0 12px; }
.cc-grid > .cc-day:nth-child(7n):is(.in-range, .in-preview)::before { right: 3px; border-radius: 0 12px 12px 0; }

.cc-legend {
  display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0 4px; font-size: 12px; color: var(--cc-muted);
}
.cc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cc-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Footer */
.cc-foot {
  display: flex; align-items: center; gap: 10px; padding: 14px 22px 18px;
  border-top: 1px solid var(--cc-line); background: var(--cc-surface); border-radius: 0 0 20px 20px;
}
.cc-summary { flex: 1; min-width: 0; }
.cc-summary strong { display: block; font-size: 14px; font-weight: 800; }
.cc-summary > span { display: block; margin-top: 3px; font-size: 12px; color: var(--cc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-summary strong .cc-best { color: var(--cc-best); }
.cc-ghost {
  padding: 11px 16px; border-radius: 12px; border: 1px solid var(--cc-line); background: transparent;
  color: #cfdced; font-size: 13px; font-weight: 700; cursor: pointer;
}
.cc-ghost:hover { border-color: var(--cc-line-strong); color: var(--cc-text); }
.cc-primary {
  min-width: 164px; padding: 12px 20px; border-radius: 12px; border: none;
  background: var(--cc-accent); color: var(--cc-accent-ink); font-size: 14px; font-weight: 800;
  cursor: pointer; transition: background 0.18s ease, transform 0.18s var(--cc-ease);
}
.cc-primary:hover:not(:disabled) { background: #5ccbfa; }
.cc-primary:active:not(:disabled) { transform: scale(0.98); }
.cc-primary:disabled { background: #1c2a40; color: var(--cc-faint); cursor: not-allowed; }

body.cc-lock { overflow: hidden; }
/* The floating support launcher and page toasts would sit on top of the sheet's footer. */
body.cc-lock .support-chat-btn, body.cc-lock .support-chat-panel, body.cc-lock .toast { display: none !important; }

/* Narrower desktops: no room beside the feed panel — center it over the globe instead. */
@media (max-width: 1279px) {
  .cc-sheet {
    left: 50%; top: 50%; width: min(812px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
    transform: translate(-50%, calc(-50% + 10px)) scale(0.985); transform-origin: center;
  }
  .cc-sheet.is-open { transform: translate(-50%, -50%); }
}

/* Phones: full-screen sheet, months stacked, sticky footer. */
@media (max-width: 760px) {
  .cc-trigger { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; padding: 8px; }
  .cc-sheet {
    inset: 0; top: 0; left: 0; width: 100%; max-height: none; height: 100%;
    border-radius: 0; border: none; transform: translateY(24px); transform-origin: bottom center;
  }
  .cc-sheet.is-open { transform: none; }
  .cc-head { padding: 12px 8px 0 16px; }
  .cc-body { padding: 14px 16px 8px; }
  .cc-months { grid-template-columns: 1fr; gap: 16px; }
  .cc-day { height: 50px; }
  .cc-toolbar { flex-direction: column; align-items: stretch; }
  .cc-seg { width: 100%; }
  .cc-seg button { flex: 1; }
  .cc-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-radius: 0; flex-wrap: wrap; }
  .cc-summary { flex-basis: 100%; }
  .cc-ghost { flex: 0 0 auto; }
  .cc-primary { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-sheet, .cc-scrim, .cc-swap, .cc-day::after { transition: none; }
}