/* ============================================================
   CRS Booking Form — Optimized Styles
   ============================================================ */

/* ---------- Calendar (Flatpickr) ---------- */

/* Sizing variables for the popup */
:root {
  --crsbf-cell: 44px;  /* day size desktop */
  --crsbf-gap: 14px;   /* gap between months */
  --crsbf-pad: 14px;   /* calendar padding */
}

/* Popup container */
.flatpickr-calendar {
  position: absolute !important;
  z-index: 99999 !important;
  width: min(100%, 720px);
  max-width: calc(100vw - 32px);
  min-width: 720px;
  padding: var(--crsbf-pad);
  border: 1px solid #e6e7ea;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(24,39,75,.08), 0 2px 8px rgba(24,39,75,.06);
  overflow: hidden;
}

/* Header & month labels */
.flatpickr-months { margin-bottom: 6px; }
.flatpickr-current-month .cur-month,
.flatpickr-current-month .cur-year { font-weight: 700; }

/* Weekday row + spacing aligned to day grid */
.flatpickr-weekdays,
.flatpickr-weekdaycontainer { display: flex; gap: var(--crsbf-gap); padding: 0 6px; border: 0; margin: 0; }

/* Day grid: two months with gap; no inner borders */
.flatpickr-days { display: flex; gap: var(--crsbf-gap); }
.flatpickr-days .dayContainer { border: 0 !important; padding: 0; margin: 0; }

/* Day cells (room for price chip) */
.flatpickr-day {
  position: relative;
  width: var(--crsbf-cell);
  height: calc(var(--crsbf-cell) + 6px);
  line-height: calc(var(--crsbf-cell) / 2);
  margin: 2px;
  font-size: 15px;
  border-radius: 6px;
  pointer-events: auto !important; /* ensure clickable */
}

/* Price label under date */
.flatpickr-day.has-price { padding-bottom: 0 !important; }
.flatpickr-day .fp-price {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 4px; padding: 2px 5px;
  font-size: 12px; font-weight: 500; line-height: 1.1; white-space: nowrap;
  background: #f2f5f8; color: #555; border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Hover & availability */
.flatpickr-day.has-price:hover { background: #edf4ff !important; }
.flatpickr-day.has-price:hover .fp-price { background: #dce9ff; color: #333; }

.flatpickr-day.crsbf-unavailable { opacity: 0.45; }
.flatpickr-day.crsbf-unavailable:hover { opacity: 0.7; }

/* Selection/range */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #1e73be !important; color: #fff !important; border-radius: 8px !important;
}
.flatpickr-day.selected .fp-price,
.flatpickr-day.startRange .fp-price,
.flatpickr-day.endRange .fp-price { background: #fff; color: #1e73be; }

/* Disabled days */
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover { opacity: 0.4; cursor: not-allowed; }

/* “Clear” button */
.flatpickr-clear-btn {
  position: static !important;
  display: block !important;
  width: clamp(200px, 60%, 360px);
  margin: 12px auto 0 !important;
  pointer-events: auto !important;
}

/* Responsive calendar sizing */
@media (max-width: 1024px) {
  :root { --crsbf-cell: 40px; --crsbf-gap: 12px; }
  .flatpickr-calendar { width: min(100%, 700px); }
}
@media (max-width: 900px) {
  :root { --crsbf-cell: 38px; }
  .flatpickr-calendar { width: min(100%, 640px); min-width: 600px; }
}
@media (max-width: 768px) {
  :root { --crsbf-cell: 40px; --crsbf-gap: 0; }
  .flatpickr-calendar { width: min(100%, 360px); min-width: 360px; }
  .flatpickr-days, .flatpickr-weekdays { gap: 0; }
  .flatpickr-clear-btn { width: 90%; }
}

/* Keep grid clickable (defensive) */
.flatpickr-innerContainer,
.flatpickr-days,
.dayContainer { position: relative; z-index: 10; pointer-events: auto; }

/* ---------- Booking Bar ---------- */

#crsbf-form.crsbf-booking {
  --tile-bg: #ffffffe6;
  --tile-hover: #f6f7f8;
  --tile-border: #e6e7ea;
  --tile-accent: #0f4c81;
  --tile-text: #0b0e12;
  --tile-muted: #6f7780;
  --radius: 12px;
  --padY: 10px;
  --padX: 22px;
  --shadow: 0 6px 24px rgba(24,39,75,.08), 0 2px 8px rgba(24,39,75,.06);
  /*background: var(--tile-bg);*/
  /*box-shadow: var(--shadow);*/
  border-radius: var(--radius);
  padding: 0;
  position: relative; z-index: 2;
  overflow: visible; /* allow popovers to escape */
}

/* Single-row grid */
#crsbf-form { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr 1fr 1fr .9fr auto; align-items: stretch; }
#crsbf-form .crsbf-row { display: contents; }

#crsbf-form .crsbf-field,
#crsbf-form .crsbf-actions {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: var(--padY) var(--padX); position: relative; background: var(--tile-bg); overflow: visible;
}

/* Vertical separators */
#crsbf-form .crsbf-field:not(:first-of-type)::before,
#crsbf-form .crsbf-actions::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: var(--tile-border);
}

/* Headline labels + sub-captions */
#crsbf-form .crsbf-field > label:first-child {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 2.0vw, 24px);
  line-height: 1.1; color: var(--tile-text); letter-spacing: .5px; font-weight: 400; margin: 0;
}
#crsbf-form .crsbf-field > label:first-child::before {
  content: attr(data-sub);
  display: block; margin-bottom: 4px; letter-spacing: .2px;
  font: 12px/1.3 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--tile-muted);
}

/* Inputs look */
#crsbf-form select,
#crsbf-form #dateRange,
#crsbf-form button#paxBtn {
  display: flex; align-items: center; width: 100%;
  min-height: 44px; padding: 10px 14px; cursor: pointer;
  font: 500 16px ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--tile-text);
  background: #fff; border: 1px solid var(--tile-border); border-radius: 8px;
  appearance: none;
}

/* Select chevron */
#crsbf-form select {
  background-image: url("data:image/svg+xml;utf8,<svg fill='none' stroke='%236f7780' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px;
}

/* Dates & Passengers caret */
#crsbf-form #dateRange,
#crsbf-form button#paxBtn { position: relative; padding-right: 34px; }
#crsbf-form #dateRange::placeholder { color: var(--tile-muted); }
#crsbf-form #dateRange::after,
#crsbf-form button#paxBtn::after {
  content: "▾"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--tile-muted); font-size: 14px; pointer-events: none;
}

/* Focus ring */
#crsbf-form select:focus,
#crsbf-form #dateRange:focus,
#crsbf-form button#paxBtn:focus {
  outline: none; border-color: var(--tile-accent);
  box-shadow: 0 0 0 3px rgba(15,76,129,.15);
}


/* Actions */
#crsbf-form .crsbf-actions { display: flex; align-items: center; justify-content: center; }
#crsbf-form .btn-primary {
  background: var(--tile-accent); color: #fff; border: none;
  padding: 14px 26px; border-radius: 8px; font-size: 18px; letter-spacing: .2px;
  transition: transform .08s ease, box-shadow .18s ease;
  box-shadow: 0 4px 12px rgba(15,76,129,.25);
}
#crsbf-form .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15,76,129,.28); }
#crsbf-form .btn-primary:active { transform: translateY(0); }
#crsbf-loader { margin-left: 10px; pointer-events: none !important; } /* never block clicks */


/* Passenger popover (default in-flow, below the button) */
#paxMenu.pax-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: var(--padX, 22px);
  min-width: 320px;
  max-height: 70vh;
  overflow: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid var(--tile-border);
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(16,24,40,.14), 0 2px 8px rgba(16,24,40,.08);
  padding: 14px;
 
  will-change: top, left, max-height;
}

/* When portaled to <body> (JS sets data-portal="1") */
#paxMenu.pax-menu[data-portal="1"] {
  position: fixed;           /* JS sets exact left/top */
  inset: auto auto auto auto;
  max-height: 70vh;
  overflow: auto;
  
}

/* Optional: slightly different shadow when flipped above */
#paxMenu.pax-menu[data-portal="1"][data-placement="top"] {
  box-shadow: 0 20px 36px rgba(16,24,40,.18), 0 2px 8px rgba(16,24,40,.08);
}

/* Rows & controls */
#paxMenu .pax-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 6px;
}
#paxMenu .pax-row + .pax-row { border-top: 1px solid #f0f1f3; }

#paxMenu .spin { display: inline-flex; align-items: center; gap: 10px; }
#paxMenu .spin button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--tile-border);
  background: #fff;
  font-size: 18px;
  line-height: 1;
}
#paxMenu output {
  min-width: 20px;
  text-align: center;
  font-weight: 600;
  color: var(--tile-text);
}
#paxMenu .pax-actions {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
#paxMenu .btn-apply {
  background: var(--tile-accent);
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
}
#crsbf-pax-clear {
  background: #f6f7f8;
  border: 1px solid var(--tile-border);
  padding: 8px 10px;
  border-radius: 6px;
}

/* Mobile tweak: full-width min on narrow screens */
@media (max-width: 480px) {
  #paxMenu.pax-menu,
  #paxMenu.pax-menu[data-portal="1"] {
    min-width: min(320px, 92vw);
  }
}

/* Live region (accessible, hidden visually) */
#crsbf-note { position: absolute; left: -9999px; }

/* ---------- Responsive grid ---------- */
@media (max-width: 1200px) {
  #crsbf-form { grid-template-columns: 1.1fr 1.1fr .9fr 1fr 1fr .9fr auto; }
}
@media (max-width: 1000px) {
  #crsbf-form { grid-template-columns: 1fr 1fr 1fr 1fr auto; }
  #crsbf-form .crsbf-field:nth-of-type(3) { grid-column: span 2; } /* Trip */
  #crsbf-form .crsbf-field:nth-of-type(4) { grid-column: span 2; } /* Dates */
}
@media (max-width: 760px) {
  #crsbf-form { grid-template-columns: 1fr; gap: 0; }
  #crsbf-form .crsbf-field:not(:first-of-type)::before,
  #crsbf-form .crsbf-actions::before { display: none; }
  #paxMenu.pax-menu { right: 16px; }
}

/* If hidden, pax menu must not block clicks */
#paxMenu[hidden] {
  display: none !important;
  pointer-events: none !important;
}

/* Make sure these controls always accept clicks */
#crsbf-form #dateRange,
#crsbf-form button#paxBtn {
  pointer-events: auto !important;
}


/* Accessibility focus styles (kept in single CSS file) */
#crsbf-form button:focus-visible,
#crsbf-form a:focus-visible,
#crsbf-form input:focus-visible,
#crsbf-form select:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}


/* === Widen the Dates column slightly (desktop) === */
#crsbf-form {
  /* From | To | Trip | Dates | Pax | (6th) | Actions */
  grid-template-columns:
    1.15fr 1.15fr 0.95fr 0.95fr 1fr 0.85fr auto;
}

/* Ensure the date input itself has room */
#crsbf-form #dateRange {
  min-width: 175px;  
  flex: 0 0 auto;  
}



/* Keep ancestors from clipping the menu while it's open */
.crsbf-pax-open .crsbf-row,
.crsbf-pax-open #crsbf-form { overflow: visible !important; }

/* Basic popover positioning */
#paxMenu {
  position: absolute;
  z-index: 999999;
}

/* Today's Price */
.aas-today-price {
  font-size: 22px;
  color: #1d498f;
  background: #fff;
  padding: 10px 15px;
  border-radius: 10px;
  font-weight:500;
  z-index: 9999;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease-in-out;
}

/* Hover effect */
.aas-today-price:hover {
  background: #2563b8; /* slightly lighter blue */
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}