/* ==========================================================================
   FlightsFare Solutions — Flight Search Widget
   --------------------------------------------------------------------------
   One-line search bar: From / To (with swap), a combined departure-return
   date cell, a traveller + cabin cell, and the submit button. Trip type is a
   pair of radios above the bar. Flights only — no multi-city, no hotels.

   Loads alongside /css/style.css, whose custom properties it uses.
   ========================================================================== */

.ff-search {
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--ff-line);
  box-shadow: 0 18px 50px rgba(8, 24, 43, .12);
  padding: 1.15rem 1.25rem 1.3rem;
  text-align: left;
  position: relative;
}

/* ---------- Trip type + options row ---------- */
.ff-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1.5rem;
  margin-bottom: .95rem;
}

.ff-trips { display: flex; flex-wrap: wrap; gap: 1.5rem; }

.ff-trip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  cursor: pointer;
  user-select: none;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--ff-ink-2);
  transition: color .2s ease;
}
.ff-trip input {
  width: 18px; height: 18px;
  margin: 0;
  accent-color: var(--ff-primary);
  cursor: pointer;
}
.ff-trip:hover { color: var(--ff-primary); }
.ff-trip:has(input:checked) { color: var(--ff-primary); }

.ff-toggles { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.ff-check {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  cursor: pointer;
  user-select: none;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: .86rem;
  color: var(--ff-body);
}
.ff-check input {
  width: 17px; height: 17px;
  margin: 0;
  accent-color: var(--ff-primary);
  cursor: pointer;
}

/* ---------- The search bar ---------- */
/* the date cell holds two full DD-MM-YYYY dates, so it needs real width */
.ff-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.55fr) minmax(0, 1.1fr) auto;
  border: 1px solid var(--ff-line);
  border-radius: 14px;
  background: #fff;
}

/* origin + destination share a cell so the swap button lands on the seam */
.ff-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  position: relative;
  min-width: 0;
}

.ff-seg {
  position: relative;
  min-width: 0;
  min-height: 74px;
  padding: .85rem 1.1rem;
  border-left: 1px solid var(--ff-line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .1rem;
  cursor: text;
  transition: background .2s ease;
}
.ff-pair > .ff-seg:first-of-type { border-left: 0; }
/* keep the field text clear of the swap button sitting on the seam */
.ff-seg-from { padding-right: 1.9rem; }
.ff-seg-to { padding-left: 1.9rem; }
.ff-seg:focus-within,
.ff-seg.is-open { background: var(--ff-primary-soft); }
.ff-seg.is-invalid { background: #fff3f0; box-shadow: inset 0 0 0 1px #f0b4a5; }

.ff-input {
  border: 0;
  padding: 0;
  width: 100%;
  background: transparent;
  outline: none;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ff-ink);
  text-overflow: ellipsis;
}
.ff-input::placeholder { color: #9fb3c6; font-weight: 500; }

.ff-sub {
  font-size: .78rem;
  color: var(--ff-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ff-sub:empty { display: none; }

/* ---------- Swap ---------- */
.ff-swap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--ff-line);
  background: #fff;
  color: var(--ff-primary);
  display: grid;
  place-items: center;
  font-size: .9rem;
  box-shadow: 0 3px 10px rgba(8, 24, 43, .12);
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .35s ease;
}
.ff-swap:hover {
  background: var(--ff-primary);
  color: #fff;
  border-color: var(--ff-primary);
  transform: translate(-50%, -50%) rotate(180deg);
}

/* ---------- Date cell (departure – return) ---------- */
.ff-seg-date {
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .5rem;
  cursor: pointer;
}
.ff-date-part {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
.ff-date-top {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: .94rem;
  color: var(--ff-ink);
  white-space: nowrap;
  transition: color .2s ease;
}
.ff-date-top i { color: var(--ff-primary); font-size: .95rem; }
.ff-date-part:hover .ff-date-top,
.ff-date-part.is-active .ff-date-top { color: var(--ff-primary); }

/* the part being chosen in the calendar */
.ff-date-part.is-active .ff-date-val {
  box-shadow: inset 0 -2px 0 var(--ff-primary-300);
}

.ff-date-sep {
  color: var(--ff-muted);
  font-size: .95rem;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: .1rem;
}

.ff-add-return {
  border: 0;
  background: transparent;
  padding: 0;
  align-self: flex-start;
  margin-top: .1rem;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--ff-primary);
  white-space: nowrap;
}
.ff-add-return:hover { text-decoration: underline; }

.ff-clear-return {
  width: 22px; height: 22px;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: .12rem;
  border: 0;
  border-radius: 50%;
  background: var(--ff-soft);
  color: var(--ff-muted);
  display: grid;
  place-items: center;
  font-size: .75rem;
  transition: all .2s ease;
}
.ff-clear-return:hover { background: #ffe6de; color: var(--ff-accent-600); }

/* ---------- Calendar ---------- */
.ff-cal {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 45;
  width: 620px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid var(--ff-line);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(8, 24, 43, .2);
  padding: 1rem 1.1rem 1.1rem;
  display: none;
  cursor: default;
}
.ff-cal.show { display: block; }

.ff-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .85rem;
  margin-bottom: .3rem;
  border-bottom: 1px solid var(--ff-line);
}
.ff-cal-hint {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: .92rem;
  color: var(--ff-ink);
}
.ff-cal-nav {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border: 1px solid var(--ff-line);
  border-radius: 50%;
  background: #fff;
  color: var(--ff-ink-2);
  display: grid;
  place-items: center;
  font-size: .85rem;
  transition: all .2s ease;
}
.ff-cal-nav:hover:not(:disabled) {
  background: var(--ff-primary);
  border-color: var(--ff-primary);
  color: #fff;
}
.ff-cal-nav:disabled { opacity: .3; cursor: not-allowed; }

.ff-cal-months {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  padding-top: .6rem;
}
.ff-cal-month-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--ff-ink);
  text-align: center;
  margin-bottom: .55rem;
}
.ff-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.ff-cal-dow {
  font-family: var(--ff-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ff-muted);
  text-align: center;
  padding-bottom: .35rem;
}

/* the cell paints the range band, the button paints the day itself */
.ff-cal-cell {
  padding: 1px 0;
  display: flex;
  justify-content: center;
}
.ff-cal-cell.in-range { background: var(--ff-primary-soft); }
.ff-cal-cell.range-start { background: linear-gradient(to right, transparent 50%, var(--ff-primary-soft) 50%); }
.ff-cal-cell.range-end { background: linear-gradient(to left, transparent 50%, var(--ff-primary-soft) 50%); }
.ff-cal-cell.range-start.range-end { background: transparent; }

.ff-day {
  width: 38px; height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: .88rem;
  color: var(--ff-ink-2);
  transition: background .18s ease, color .18s ease;
}
.ff-day:hover:not(:disabled) { background: #d9efee; color: var(--ff-primary); }
.ff-day:disabled { color: #c3d1dd; cursor: not-allowed; }
.ff-day.is-today { box-shadow: inset 0 0 0 1px var(--ff-primary-300); }
.ff-day.is-selected {
  background: var(--ff-primary);
  color: #fff;
  font-weight: 800;
}
.ff-day.is-selected:hover { background: var(--ff-primary-600); color: #fff; }
.ff-cal-cell.is-blank { visibility: hidden; }

.ff-cal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .9rem;
  padding-top: .85rem;
  border-top: 1px solid var(--ff-line);
}
.ff-cal-note {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--ff-muted);
}
.ff-cal-note i { color: var(--ff-primary); }
.ff-cal-done {
  border: 0;
  border-radius: 10px;
  padding: .5rem 1.4rem;
  background: var(--ff-ink);
  color: #fff;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: .88rem;
  transition: background .2s ease;
}
.ff-cal-done:hover { background: var(--ff-primary); }

/* trip-type driven visibility */
.ff-search[data-trip="one"] .ff-part-return,
.ff-search[data-trip="one"] .ff-clear-return { display: none; }
.ff-search[data-trip="round"] .ff-add-return { display: none; }

/* ---------- Travellers + cabin ---------- */
/* traveller count on top, cabin class beneath — same shape as From / To */
.ff-seg-pax { cursor: pointer; }
.ff-pax-summary {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: .97rem;
  color: var(--ff-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  white-space: nowrap;
}
.ff-pax-summary i { color: var(--ff-muted); font-size: .8rem; transition: transform .25s ease; }
.ff-seg-pax.is-open .ff-pax-summary i { transform: rotate(180deg); }

.ff-pax-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid var(--ff-line);
  border-radius: 14px;
  box-shadow: 0 20px 46px rgba(8, 24, 43, .18);
  padding: .6rem 1.1rem 1rem;
  display: none;
  cursor: default;
}
.ff-pax-panel.show { display: block; }

.ff-count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .62rem 0;
}
.ff-count-row .nm {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--ff-ink-2);
}
.ff-count-row .sub { display: block; font-size: .74rem; color: var(--ff-muted); font-weight: 400; }

.ff-stepper { display: inline-flex; align-items: center; gap: .55rem; }
.ff-stepper button {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--ff-line);
  background: #fff;
  color: var(--ff-primary);
  display: grid;
  place-items: center;
  font-size: .85rem;
  transition: all .2s ease;
}
.ff-stepper button:hover:not(:disabled) {
  background: var(--ff-primary);
  border-color: var(--ff-primary);
  color: #fff;
}
.ff-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.ff-stepper .val {
  min-width: 22px;
  text-align: center;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--ff-ink);
}

.ff-class-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .5rem;
  padding-top: .85rem;
  border-top: 1px solid var(--ff-line);
}
.ff-class-row .nm {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--ff-ink-2);
}
.ff-class-select {
  flex: 1;
  max-width: 190px;
  border: 1px solid var(--ff-line);
  border-radius: 9px;
  padding: .45rem .6rem;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: .9rem;
  color: var(--ff-ink);
  background: #fff;
  outline: none;
}
.ff-class-select:focus { border-color: var(--ff-primary-300); box-shadow: 0 0 0 3px rgba(18, 163, 155, .12); }

/* ---------- Submit ---------- */
.ff-submit {
  margin: .5rem;
  border: 0;
  border-radius: 11px;
  padding: 0 1.7rem;
  min-width: 156px;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  background: linear-gradient(135deg, #ff8f5e, var(--ff-accent-600));
  box-shadow: 0 10px 22px rgba(255, 122, 69, .3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  transition: all .28s cubic-bezier(.2, .7, .3, 1);
}
.ff-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(255, 122, 69, .42); }
.ff-submit:active { transform: translateY(0); }

/* ---------- Airport autocomplete ---------- */
.ff-auto {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 380px;
  z-index: 40;
  background: #fff;
  border: 1px solid var(--ff-line);
  border-radius: 14px;
  box-shadow: 0 20px 46px rgba(8, 24, 43, .18);
  max-height: 306px;
  overflow-y: auto;
  padding: .35rem;
  display: none;
}
.ff-auto.show { display: block; }
.ff-auto-head {
  font-family: var(--ff-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ff-muted);
  padding: .5rem .7rem .3rem;
}
.ff-auto-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .7rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background .18s ease;
}
.ff-auto-item:hover,
.ff-auto-item.active { background: var(--ff-primary-soft); }
.ff-auto-item .ic { color: var(--ff-primary); font-size: 1rem; flex-shrink: 0; }
.ff-auto-item .txt { min-width: 0; flex: 1; }
.ff-auto-item .t1 {
  font-family: var(--ff-display); font-weight: 700; font-size: .92rem; color: var(--ff-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ff-auto-item .t2 {
  font-size: .78rem; color: var(--ff-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ff-auto-item .code {
  font-family: var(--ff-display); font-weight: 800; font-size: .78rem;
  color: var(--ff-primary); background: var(--ff-primary-soft);
  padding: .22rem .5rem; border-radius: 7px; flex-shrink: 0;
}
.ff-auto-empty { padding: 1rem .8rem; font-size: .88rem; color: var(--ff-muted); text-align: center; }

/* ---------- Messages + footnote ---------- */
.ff-error {
  display: none;
  margin-top: .85rem;
  padding: .65rem .9rem;
  border-radius: 10px;
  background: #fff1ee;
  border: 1px solid #f6cdc4;
  color: #b83c26;
  font-size: .87rem;
}
.ff-error.show { display: block; }

.ff-foot-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1.4rem;
  margin-top: .95rem;
  padding-top: .9rem;
  border-top: 1px dashed var(--ff-line);
  font-size: .83rem;
  color: var(--ff-muted);
}
.ff-foot-note span { display: inline-flex; align-items: center; gap: .4rem; }
.ff-foot-note i { color: var(--ff-primary); }
.ff-foot-note a { font-weight: 700; font-family: var(--ff-display); }

/* ---------- Search summary (search.php) ---------- */
.ff-summary {
  background: #fff;
  border: 1px solid var(--ff-line);
  border-radius: var(--ff-radius);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--ff-shadow-sm);
}
.ff-summary-route {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  font-family: var(--ff-display);
}
.ff-summary-route .code { font-size: 1.7rem; font-weight: 800; color: var(--ff-ink); line-height: 1; }
.ff-summary-route .city { font-size: .85rem; color: var(--ff-body); }
.ff-summary-route .arrow { color: var(--ff-primary); font-size: 1.3rem; }
.ff-summary-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
  .ff-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1.25fr) minmax(0, 1.2fr); }
  .ff-submit { grid-column: 1 / -1; margin: 0 .5rem .5rem; padding: .95rem 1.7rem; }
  .ff-pair { border-bottom: 1px solid var(--ff-line); grid-column: 1 / -1; }
  .ff-seg-date { border-left: 0; }
  .ff-seg-pax { border-left: 1px solid var(--ff-line); }
}

@media (max-width: 991.98px) {
  .ff-search { padding: 1rem 1rem 1.1rem; border-radius: 18px; }
  .ff-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ff-seg { min-height: 68px; }
  .ff-pax-panel { right: auto; left: 0; }

  /* one month at a time once there is no room for two */
  .ff-cal { width: 336px; }
  .ff-cal-months { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ff-cal-month:nth-child(2) { display: none; }
}

@media (max-width: 575.98px) {
  .ff-top { gap: .6rem; }
  .ff-trips { width: 100%; gap: 1.4rem; }
  .ff-toggles { width: 100%; gap: 1rem; }

  .ff-row { grid-template-columns: minmax(0, 1fr); }
  .ff-pair { grid-template-columns: minmax(0, 1fr); }
  .ff-seg-from { padding-right: 1.1rem; }
  .ff-seg-to { padding-left: 1.1rem; }
  .ff-pair > .ff-seg + .ff-seg { border-top: 1px solid var(--ff-line); }
  .ff-seg-date,
  .ff-seg-pax { border-left: 0; }
  .ff-seg-pax { border-top: 1px solid var(--ff-line); }
  .ff-swap { transform: translate(-50%, -50%) rotate(90deg); }
  .ff-swap:hover { transform: translate(-50%, -50%) rotate(270deg); }
  .ff-pax-panel { width: 100%; }
  .ff-auto { max-width: 100%; width: 100%; }
  .ff-cal { width: 100%; padding: .85rem .8rem 1rem; }
  .ff-cal-foot .ff-cal-note { display: none; }
  .ff-cal-done { width: 100%; }
  .ff-day { width: 100%; }
}