/* IndiGo-style travel date picker (js/fare-calendar.js), shared by the B2B and B2C search forms.
   Colours follow each site's --mviaa (selection) and --mviaa-accent (today marker). */

/* ---------- date fields ---------- */
.cal-trigger { display: flex; align-items: baseline; gap: .45rem; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; }
.cal-trigger .cal-date { overflow: hidden; text-overflow: ellipsis; }
.cal-trigger .cal-day { font-size: .8em; font-weight: 500; opacity: .7; }
.cal-trigger.is-empty .cal-date { color: #8a93a6; font-weight: 500; }
.cal-trigger.form-control { align-items: center; }
.cal-trigger.form-control > .bi { color: var(--mviaa, #0b4f6c); }

/* ---------- popup ---------- */
.fcal {
    --fcal-accent: var(--mviaa, #0b1f4b);
    --fcal-mark: var(--mviaa-accent, #f28c28);
    --fcal-range: #e8edf6;
    --fcal-range: color-mix(in srgb, var(--fcal-accent) 11%, #fff);
    --fcal-line: #e7e9f0;
    --fcal-muted: #5f6b80;
    position: absolute; z-index: 1060; width: 700px; max-width: calc(100vw - 24px);
    background: #fff; color: #1c2437; border: 1px solid var(--fcal-line); border-radius: 16px;
    box-shadow: 0 18px 48px rgba(11, 31, 75, .22); font-size: .95rem; text-align: left;
}
.fcal[hidden], .fcal-backdrop[hidden] { display: none; }
.fcal-backdrop { display: none; }

.fcal-head { display: flex; gap: .5rem; padding: .75rem .75rem 0; }
.fcal-tab { flex: 1; min-width: 0; text-align: left; border: 0; border-bottom: 3px solid transparent; border-radius: 10px; background: #f6f7fb; padding: .45rem .85rem .35rem; color: inherit; }
.fcal-tab small { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--fcal-muted); }
.fcal-tab strong { display: block; font-size: 1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcal-tab.is-empty strong { color: #8a93a6; font-weight: 500; }
.fcal-tab.is-active { background: var(--fcal-range); border-bottom-color: var(--fcal-accent); color: var(--fcal-accent); }
.fcal-close { flex: none; width: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--fcal-muted); }
.fcal-close:hover { background: #f6f7fb; color: #1c2437; }

.fcal-body { position: relative; padding: .4rem 1rem 0; }
.fcal-months { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.fcal-nav { position: absolute; top: .75rem; z-index: 1; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--fcal-line); border-radius: 50%; background: #fff; color: var(--fcal-accent); }
.fcal-nav:hover:not(:disabled) { background: var(--fcal-range); }
.fcal-nav:disabled { opacity: .35; cursor: default; }
.fcal-prev { left: 1rem; }
.fcal-next { right: 1rem; }
.fcal-title { text-align: center; font-family: var(--font-head, inherit); font-weight: 700; font-size: 1.02rem; color: var(--fcal-accent); padding: .7rem 0 .65rem; }

.fcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 3px; }
.fcal-wd { text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #8a93a6; padding-bottom: .4rem; }
.fcal-day { position: relative; z-index: 0; height: 42px; padding: 0; border: 0; background: transparent; color: inherit; font-weight: 600; font-variant-numeric: tabular-nums; }
.fcal-day::before { content: ""; position: absolute; inset: 1px 3px; z-index: -1; border-radius: 10px; }
.fcal-day.is-weekend { color: #c2410c; }
.fcal-day:disabled { color: #c3c8d4; font-weight: 500; cursor: default; }
.fcal-day:not(:disabled):not(.is-start):not(.is-end):hover::before { box-shadow: inset 0 0 0 1.5px var(--fcal-accent); }
.fcal-day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--fcal-mark); }
.fcal-day.in-range { background: var(--fcal-range); }
.fcal-day.is-start, .fcal-day.is-end { color: #fff; }
.fcal-day.is-start::before, .fcal-day.is-end::before { background: var(--fcal-accent); box-shadow: 0 4px 10px rgba(11, 31, 75, .25); }
.fcal-day.is-start.has-range { background: linear-gradient(90deg, transparent 50%, var(--fcal-range) 50%); }
.fcal-day.is-end.has-range { background: linear-gradient(90deg, var(--fcal-range) 50%, transparent 50%); }
.fcal-day.is-start.is-end { background: transparent; }
.fcal-day.is-today.is-start::after, .fcal-day.is-today.is-end::after { background: #fff; }
.fcal-day:focus-visible { outline: 2px solid var(--fcal-mark); outline-offset: -2px; border-radius: 10px; }

.fcal-foot { display: flex; align-items: center; gap: .9rem; margin-top: .7rem; padding: .75rem 1rem; border-top: 1px solid var(--fcal-line); }
.fcal-hint { flex: 1; font-size: .85rem; color: var(--fcal-muted); }
.fcal-clear { border: 0; background: transparent; color: var(--fcal-accent); font-weight: 600; text-decoration: underline; padding: 0; }
.fcal-done { border: 0; border-radius: 10px; background: var(--fcal-accent); color: #fff; font-weight: 700; padding: .5rem 1.7rem; }
.fcal-done:hover { filter: brightness(1.15); }

/* ---------- phones: bottom sheet with months stacked ---------- */
@media (max-width: 575.98px) {
    .fcal { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; max-height: 88vh; display: flex; flex-direction: column; border-radius: 18px 18px 0 0; }
    .fcal-backdrop { display: block; position: fixed; inset: 0; z-index: 1055; background: rgba(11, 31, 75, .45); }
    .fcal-body { flex: 1; overflow-y: auto; padding: 0 .75rem; }
    .fcal-months { grid-template-columns: 1fr; gap: .25rem; }
    .fcal-nav { top: .6rem; }
    .fcal-prev { left: .75rem; }
    .fcal-next { right: .75rem; }
    .fcal-day { height: 46px; }
    .fcal-tab strong { white-space: normal; font-size: .95rem; line-height: 1.2; } /* "Mon, 12 Oct · 6 nights" wraps instead of being cut */
    .fcal-hint { display: none; }
    .fcal-done { flex: 1; padding: .7rem; }
}