/* The homepage finder's dependent fields and its sailing calendar.
   The card itself (.finder, .f-tabs, .f-field, .f-go) is the approved
   mockup's and lives in base.css — untouched. What is here is only what the
   mockup has no equivalent for: a field that hides when its tab does not use
   it, a date button that replaces the native picker, and the calendar. */

/* The mockup's row is four fields wide. The tabs now carry three (duration,
   port, date) or two (cruise length, date), so the column count follows the
   panel instead of being fixed — same fr-plus-auto shape as the original. */
.f-fields[data-cols="3"]{grid-template-columns:1.1fr 1fr 1.3fr auto;}
.f-fields[data-cols="2"]{grid-template-columns:1fr 1.3fr auto;}
/* The package tab carries a third field — "Must include" — between the
   length and the date. */
.f-fields[data-cols="3i"]{grid-template-columns:1fr 1.1fr 1.2fr auto;}
@media(max-width:860px){
  .f-fields[data-cols="3"],
  .f-fields[data-cols="2"],
  .f-fields[data-cols="3i"]{grid-template-columns:1fr 1fr;}
}

/* A port field on a tab whose duration leaves from one place only still holds
   the answer — it is shown, not hidden, because "3 nights from Aswan" is the
   thing the traveller wants confirmed. It is only hidden on the package tab,
   which has no port at all. */
.f-field[hidden]{display:none !important;}
.f-field.is-fixed select{appearance:none; -webkit-appearance:none; padding-right:0;}

/* Replaces <input type="date"> once the calendar exists, so the browser's own
   picker cannot open alongside ours. Matches .f-field input exactly. */
.f-datebtn{border:none; background:transparent; font-family:inherit; font-weight:600; font-size:.94rem; color:var(--ink); width:100%; padding:3px 0; min-height:26px; text-align:start; cursor:pointer;}
.f-datebtn.is-empty{color:var(--muted);}

.f-date{position:relative;}

/* ── The calendar ───────────────────────────────────────────────────── */
/* Fixed, not absolute: section.hero is overflow:hidden so it can hold its
   background image, which clips any popover positioned inside it — the
   calendar was being cut off at the bottom of the hero. Fixed takes it out
   of that box entirely; front-page.js sets top/left from the field's
   position and keeps them in step on scroll and resize.
   z-index clears the sticky header (50) and the mega menu (60). */
.cal{position:fixed; z-index:70; top:0; left:0; width:300px; max-width:calc(100vw - 16px); background:#fff; border:1.5px solid var(--line); border-radius:14px; box-shadow:0 24px 50px -20px rgba(0,0,0,.35); padding:12px;}
.cal[hidden]{display:none;}

.cal-head{display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:8px;}
.cal-head b{font-size:.9rem; font-weight:800;}
.cal-nav{width:30px; height:30px; flex:none; border:1.5px solid var(--line); background:#fff; border-radius:9px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink);}
.cal-nav:hover:not(:disabled){border-color:var(--petrol); color:var(--petrol);}
.cal-nav:disabled{opacity:.35; cursor:default;}
.cal-nav .ico{width:14px; height:14px;}
/* The icon is #i-arrow, which points forward; the back button is the same
   arrow turned round, so the pair reads unambiguously as ← and →. */
.cal-nav.prev .ico{transform:rotate(180deg);}
/* A disabled back button in the current month should look unavailable, not
   broken — the first thing tried was clicking it and seeing nothing happen. */
.cal-nav:disabled{background:var(--bg-alt); border-color:var(--line);}

.cal-dow{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px;}
.cal-dow span{text-align:center; font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:4px 0;}

.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px;}
.cal-grid span{aspect-ratio:1;}

/* Default: a day nothing sails on. Legible, but plainly not a choice. */
.cal-d{aspect-ratio:1; display:flex; align-items:center; justify-content:center; border:none; background:transparent; font-family:inherit; font-size:.82rem; font-weight:600; color:var(--muted); border-radius:9px; cursor:default; padding:0;}

/* A real departure. */
.cal-d.on{background:var(--petrol-soft); color:var(--petrol-dark); font-weight:800; cursor:pointer;}
.cal-d.on:hover{background:var(--petrol); color:#fff;}
.cal-d.on:focus-visible{outline:2px solid var(--petrol); outline-offset:1px;}
.cal-d.sel{background:var(--petrol); color:#fff;}
.cal-d.today{box-shadow:inset 0 0 0 1.5px var(--gold);}
.cal-d:disabled{opacity:.3;}

.cal-note{margin:10px 2px 0; font-size:.72rem; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:6px;}
.cal-note i{width:10px; height:10px; flex:none; border-radius:3px; background:var(--petrol-soft); box-shadow:inset 0 0 0 1px var(--petrol-tint);}

/* Shown when a tab has no recorded departures at all — the dahabiya tab until
   its ships are added. The submit button goes with it: there is nothing to
   search, so the card points at the enquiry instead. */
.f-none{margin:10px 4px 0; font-size:.82rem; font-weight:600; color:var(--ink-soft); background:var(--bg-alt); border-radius:10px; padding:12px 14px; line-height:1.55;}
.f-none[hidden]{display:none;}
.f-none a{color:var(--petrol); text-decoration:underline; text-underline-offset:2px;}

/* The finder again at the top of its own results page. On the hero it sits on
   a photograph, where the deep shadow belongs; on a cream page that shadow
   reads as a smudge, so it is lightened and the card gets a hairline instead. */
.srch-finder .finder{margin:0 0 26px; box-shadow:0 14px 34px -22px rgba(19,43,51,.35); border:1.5px solid var(--line); max-width:none;}

/* ── "Must include" — a dropdown that takes more than one answer ──────────
   A <select multiple> is the obvious control and the wrong one: on a phone it
   is a scrolling box that needs a modifier key to add a second choice. So the
   checkboxes are the real form controls and this is a button over a panel
   holding them — which also means the field submits with JavaScript off, where
   the list simply sits open inside the card. */
.f-incbtn{border:none; background:transparent; font-family:inherit; font-weight:600; font-size:.94rem; color:var(--ink); width:100%; padding:3px 0; min-height:26px; text-align:start; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.f-incbtn.is-empty{color:var(--muted);}

/* Fixed for the same reason as the calendar: section.hero is overflow:hidden,
   so anything absolute inside it is clipped at the bottom of the hero. */
.f-inc-panel{position:fixed; z-index:70; top:0; left:0; width:258px; max-width:calc(100vw - 16px); background:#fff; border:1.5px solid var(--line); border-radius:14px; box-shadow:0 24px 50px -20px rgba(0,0,0,.35); padding:8px;}
.f-inc-panel[hidden]{display:none;}

/* Each option is a <label> inside a .f-field, and base.css styles EVERY label
   there as the field's caption — `.f-field label{display:block; font-size:.66rem;
   text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}`. That
   rule is (0,1,1) and beat a bare `.f-inc-opt` (0,1,0), so the options rendered
   as tiny grey capitals with the box stacked above the text. Scoping through
   the list makes it (0,2,0), and the inherited caption properties are reset
   explicitly rather than left to chance. */
.f-inc-list .f-inc-opt{display:flex; align-items:center; gap:10px; padding:9px 10px; margin:0; border-radius:10px; font-size:.9rem; font-weight:600; line-height:1.35; text-transform:none; letter-spacing:normal; color:var(--ink); cursor:pointer;}
.f-inc-list .f-inc-opt:hover{background:var(--petrol-soft);}
.f-inc-list .f-inc-opt input{width:17px; height:17px; flex:none; margin:0; accent-color:var(--petrol); cursor:pointer;}
.f-inc-list .f-inc-opt span{min-width:0; display:block;}

/* Without JavaScript there is no button and no panel: the list stays in the
   field, open, which is a longer card but a working one. */
.f-inc-list:not(.f-inc-panel > *){display:flex; flex-direction:column; gap:2px;}