/* ============================================================
   search.css — Flight Search & Calendar Styles
   ============================================================ */

:root { --primary: var(--tp, #04107C); }

/* ── Calendar ── */
.cal-overlay {
    display:none; position:fixed; inset:0; z-index:99998;
    background:rgba(0,0,0,.4);
}
.cal-overlay.open { display:block; }
.cal-popup {
    display:none; position:fixed; z-index:99999;
    background:#fff; border-radius: 5px;
    box-shadow:0 12px 40px rgba(0,0,0,.18);
    border:1.5px solid #e2e8f0; padding:16px; width:290px; user-select:none;
    touch-action:none; -ms-touch-action:none;
}
.cal-popup.open { display:block; }
.cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cal-nav {
    width:28px; height:28px; border-radius: 5px; border:1.5px solid #e2e8f0;
    background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
    color:#64748b; font-size:13px; transition:all .2s;
}
.cal-nav:hover { background:#f1f5f9; color:#0f172a; }
.cal-selects { display:flex; align-items:center; gap:6px; }
.cal-select {
    border:none; background:transparent; font-size:14px; font-weight:700; color:#0f172a;
    cursor:pointer; outline:none; appearance:none; -webkit-appearance:none;
    padding:2px 18px 2px 4px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2364748b' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 2px center;
}
.cal-days-header { display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:6px; }
.cal-day-name { text-align:center; font-size:11px; font-weight:700; color:#94a3b8; padding:4px 0; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-cell {
    aspect-ratio:1; display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:500; color:#1e293b; border-radius:50%;
    cursor:pointer; transition:all .15s; position:relative;
}
.cal-cell:hover:not(.cal-other):not(.cal-disabled) { background:#f1f5f9; color:#0f172a; }
.cal-cell.cal-other   { color:#cbd5e1; pointer-events:none; }
.cal-cell.cal-disabled { color:#e2e8f0; pointer-events:none; }
.cal-cell.cal-today { border:2px solid var(--primary); color:var(--primary); font-weight:700; }
.cal-cell.cal-today::after { content:none; }
.cal-cell.cal-selected { background:var(--tp, #04107C); color:#fff !important; font-weight:700; }
.cal-cell.cal-selected::after { display:none; }

/* ── Hero ── */
* { box-sizing:border-box; }
.fs-hero {
    position:relative; min-height:320px; border-radius: 5px;
    overflow:visible; display:flex; flex-direction:column;
    align-items:center; justify-content:flex-start; padding:60px 20px 40px;
}
.fs-hero.tab-compact { min-height:0 !important; padding-bottom:40px !important; }
.fs-hero-bg { border-radius: 5px; overflow:hidden; }
.fs-hero-bg {
    position:absolute; inset:0;
    background: url('../../images/hero-bg.svg') center/cover no-repeat;
}
.fs-hero-bg::before {
    content:''; position:absolute; inset:0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(4,16,60,0.35) 100%);
}
.fs-hero-plane {
    position:absolute; right:6%; top:50%;
    transform:translateY(-50%) rotate(-12deg);
    font-size:120px; color:rgba(255,255,255,.06); pointer-events:none;
}
.fs-hero-plane2 {
    position:absolute; left:4%; bottom:15%;
    font-size:56px; color:rgba(255,255,255,.05);
    transform:rotate(20deg); pointer-events:none;
}

/* ── Service Tabs ── */
.fs-tabs {
    position:relative; top:auto; left:auto; transform:none;
    background:rgba(255,255,255,0.96); border:1px solid rgba(255,255,255,0.6);
    border-radius: 5px; padding:5px 6px; display:flex; gap:2px; white-space:nowrap;
    z-index:21; box-shadow:0 8px 32px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12);
    margin-bottom:-26px; width:max-content; max-width:calc(100% - 40px);
    overflow-x:auto; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.fs-tabs::-webkit-scrollbar { display:none; }
.fstab {
    display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:8px 18px; border-radius: 5px; cursor:pointer;
    font-size:12px; font-weight:600; color:#475569; border:none;
    background:transparent; text-decoration:none; transition:all .22s; white-space:nowrap;
}
.fstab i { font-size:16px; }
.fstab span.tab-emoji { font-size:16px; line-height:1; }
.fstab.active { background:var(--primary); color:#fff; box-shadow:0 4px 14px rgba(4,16,124,.28); }
.fstab:hover:not(.active) { background:#f1f5f9; color:var(--primary); text-decoration:none; }

/* ── Search Card ── */
.fs-card {
    position:relative; z-index:10;
    background:rgba(255,255,255,.97); backdrop-filter:blur(20px);
    border-radius: 5px;
    box-shadow:0 24px 64px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.6) inset;
    padding:50px 28px 22px; width:100%; max-width:1080px;
}

/* ── Trip Type ── */
.fs-trip { display:flex; gap:6px; margin-bottom:20px; flex-wrap:wrap; }
.fs-trip-btn {
    display:flex; align-items:center; gap:7px; padding:7px 18px;
    border-radius: 5px; border:1.5px solid #e2e8f0; background:#fff;
    font-size:13px; font-weight:600; color:#64748b; cursor:pointer; transition:all .2s;
    outline:none;
}
.fs-trip-btn:focus { outline:none; box-shadow:none; }
.fs-trip-btn.active { background:#fff5f0; border-color:var(--primary); color:var(--primary); }
.fs-trip-btn:hover:not(.active) { border-color:#cbd5e1; color:#334155; background:#f8fafc; }

/* ── Fields Row ── */
.fs-row {
    display:flex; border:1.5px solid #e2e8f0; border-radius: 5px;
    overflow:visible; margin-bottom:18px; background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.fs-field {
    flex:1; padding:14px 18px; border-right:1.5px solid #e2e8f0;
    cursor:pointer; position:relative; transition:background .15s; min-width:0;
}
.fs-field:first-child { border-radius: 5px 0 0 12px; }
.fs-field:last-child  { border-right:none; border-radius:0 12px 12px 0; }
.fs-field:hover       { background:#fafbff; }
.fs-field:focus-within { background:#fff8f5; }
.fs-label {
    font-size:11px; font-weight:600; color:#94a3b8;
    text-transform:uppercase; letter-spacing:.6px; margin-bottom:4px;
    display:flex; align-items:center; gap:5px;
}
.fs-label i { font-size:12px; color:var(--primary); }
.fs-val { font-size:16px; font-weight:600; color:#64748b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2; }
.fs-val.ph { font-size:15px; font-weight:600; color:#94a3b8; }
.fs-sub { font-size:11px; color:#94a3b8; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Swap */
.fs-swap-wrap { position:absolute; right:-18px; top:50%; transform:translateY(-50%); z-index:20; }
.fs-swap {
    width:34px; height:34px; background:#fff; border:2px solid #e2e8f0;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:13px; color:#64748b; transition:all .25s;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.fs-swap:hover { background:var(--primary); border-color:var(--primary); color:#fff; transform:rotate(180deg); box-shadow:0 4px 14px rgba(232,71,10,.35); }

/* ── Bottom Row ── */
.fs-bottom { display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; }
.fs-bottom-group { display:flex; flex-direction:column; gap:7px; }
.fs-bottom-label { font-size:12px; font-weight:700; color:#475569; text-transform:uppercase; letter-spacing:.5px; }
.airline-tag-wrap {
    display:flex; flex-wrap:wrap; align-items:center; gap:6px;
    border:1.5px solid #e2e8f0; border-radius: 5px; padding:6px 10px;
    background:#f8fafc; min-width:210px; cursor:text; transition:border-color .2s;
}
.airline-tag-wrap:focus-within { border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px rgba(232,71,10,.08); }
.airline-tag {
    display:inline-flex; align-items:center; gap:4px; background:var(--tp, #04107C); color:#fff;
    border-radius: 5px; padding:2px 8px; font-size:12px; font-weight:600; letter-spacing:.5px;
}
.airline-tag button { background:none; border:none; color:rgba(255,255,255,.8); cursor:pointer; font-size:13px; padding:0; line-height:1; }
.airline-tag button:hover { color:#fff; }
.fs-airline-input { border:none; outline:none; background:transparent; font-size:13px; color:#334155; min-width:80px; flex:1; padding:2px 4px; }
.fs-fare-group { display:flex; gap:8px; flex-wrap:wrap; }
.fs-fare-btn {
    padding:8px 18px; border-radius: 5px; border:1.5px solid #e2e8f0;
    background:#f8fafc; font-size:13px; font-weight:600; color:#64748b;
    cursor:pointer; transition:all .2s;
}
.fs-fare-btn.active { background:#fff5f0; border-color:var(--primary); color:var(--primary); box-shadow:0 2px 8px rgba(232,71,10,.12); }
.fs-fare-btn:hover:not(.active) { border-color:#cbd5e1; color:#334155; background:#fff; }
.fs-search-wrap { margin-left:auto; }
.fs-search-btn {
    display:flex; align-items:center; gap:10px;
    background:linear-gradient(135deg, var(--primary) 0%, #f97316 100%);
    color:#fff; border:none; border-radius: 5px; padding:13px 40px;
    font-size:16px; font-weight:800; cursor:pointer; letter-spacing:.5px;
    transition:all .25s; box-shadow:0 6px 24px rgba(232,71,10,.35); white-space:nowrap;
}
.fs-search-btn i { font-size:17px; transition:transform .25s; }
.fs-search-btn:hover { background:linear-gradient(135deg, #c93d08 0%, var(--primary) 100%); box-shadow:0 8px 32px rgba(232,71,10,.45); transform:translateY(-1px); }
.fs-search-btn:hover i { transform:translateX(4px); }

/* ── Autocomplete ── */
.ac-wrap {
    position:absolute; top:calc(100% + 8px); left:0; width:320px; background:#fff;
    border:1.5px solid #e2e8f0; border-radius: 5px; box-shadow:0 12px 40px rgba(0,0,0,.14);
    z-index:9999; max-height:260px; overflow-y:auto; display:none;
}
.ac-wrap.open { display:block; }
.ac-wrap::-webkit-scrollbar { width:4px; }
.ac-wrap::-webkit-scrollbar-thumb { background:#e2e8f0; border-radius: 5px; }
.ac-item { padding:11px 14px; cursor:pointer; display:flex; align-items:center; gap:12px; border-bottom:1px solid #f1f5f9; transition:background .15s; }
.ac-item:last-child { border-bottom:none; }
.ac-item:hover { background:#fff8f5; }
.ac-badge { background:var(--tp, #04107C); color:#fff; font-size:12px; font-weight:800; padding:4px 8px; border-radius: 5px; min-width:44px; text-align:center; flex-shrink:0; }
.ac-info .ac-name { font-size:13px; font-weight:600; color:#1e293b; }
.ac-info .ac-city { font-size:11px; color:#94a3b8; margin-top:1px; }

/* ── Traveller Dropdown ── */
/* Ancestor containers should not clip the absolute-positioned dropdowns */
.fs-hero, .fs-card, .fs-row, .fs-field, .sp-hero-wrap, .fs-hero-bg { overflow: visible !important; }

.trav-wrap {
    position:absolute; top: calc(100% + 8px); right:0; background:#fff;
    border:1.5px solid #e2e8f0; border-radius: 5px; box-shadow:0 12px 40px rgba(0,0,0,.14);
    z-index:99999; padding:16px 18px; min-width:260px; max-width:320px; display:none;
    max-height: 60vh; overflow-y: auto; overflow-x: hidden;
}
.trav-wrap.open { display:block; }
.trav-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid #f1f5f9; }
.trav-row:last-child { border-bottom:none; padding-bottom:0; }
.trav-type { font-size:13px; font-weight:700; color:#1e293b; }
.trav-sub  { font-size:11px; color:#94a3b8; margin-top:1px; }
.pax-counter { display:flex; align-items:center; gap:10px; }
.pax-btn {
    width:28px; height:28px; border-radius:50%; border:2px solid var(--primary);
    background:#fff; color:var(--primary); font-size:16px; font-weight:700;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    line-height:1; transition:all .2s;
}
.pax-btn:hover { background:var(--primary); color:#fff; }
.pax-val { font-size:15px; font-weight:800; color:#0f172a; min-width:18px; text-align:center; }
.cabin-select { border:1.5px solid #e2e8f0; border-radius: 5px; padding:5px 10px; font-size:12px; font-weight:600; color:#334155; outline:none; cursor:pointer; transition:border-color .2s; }
.cabin-select:focus { border-color:var(--primary); }
.fs-markup-badge {
    display:inline-flex; align-items:center; gap:6px;
    background:linear-gradient(135deg,#0ea5e9,#06b6d4); color:#fff;
    font-size:12px; font-weight:600; padding:5px 12px; border-radius: 5px; margin-left:auto;
}

/* ── Multi City ── */
.mc-segment {
    display:flex; border:1.5px solid #e2e8f0; border-radius: 5px;
    margin-bottom:10px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.04);
    position:relative; overflow:visible;
}
.mc-remove-btn {
    position:absolute; right:-14px; top:50%; transform:translateY(-50%);
    width:28px; height:28px; border-radius:50%; background:#fff;
    border:1.5px solid #fca5a5; color:#ef4444; font-size:12px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    z-index:10; transition:all .2s; box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.mc-remove-btn:hover { background:#ef4444; color:#fff; border-color:#ef4444; }
.fs-field.fs-error { background:#fff5f5 !important; box-shadow:inset 0 0 0 2px #ef4444; border-radius: 5px; animation:fs-shake .35s ease; }
.fs-field.fs-error .fs-label i { color:#ef4444; }
.fs-field.fs-error .fs-val.ph  { color:#ef4444 !important; }
.fs-error-msg {
    display:none; align-items:center; gap:8px; background:#fef2f2;
    border:1.5px solid #fca5a5; border-radius: 5px; padding:10px 16px;
    font-size:13px; font-weight:600; color:#dc2626; margin-bottom:16px;
}
.fs-error-msg.show { display:flex; }
@keyframes fs-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 60%{transform:translateX(5px)} }
.mc-add-btn {
    display:inline-flex; align-items:center; gap:8px; padding:9px 22px;
    border-radius: 5px; border:1.5px dashed var(--primary); background:transparent;
    color:var(--primary); font-size:13px; font-weight:600; cursor:pointer;
    transition:all .2s; margin-bottom:18px;
}
.mc-add-btn:hover { background:#f0f3ff; }
.mc-segment-num { display:none; }

/* ── Responsive ── */
@media (max-width:992px) {
    .fs-tabs { border-radius: 5px; padding:4px 5px; }
    .fstab   { padding:7px 14px; font-size:12px; border-radius: 5px; }
    .fs-card { padding:44px 18px 16px; }
    .fs-row,.mc-segment { flex-wrap:wrap; }
    .fs-field { flex:1 1 48% !important; border-right:none !important; border-bottom:1.5px solid #e2e8f0; }
    .fs-field:nth-child(odd) { border-right:1.5px solid #e2e8f0 !important; }
    .fs-field:last-child { border-bottom:none !important; border-right:none !important; }
    .fs-swap-wrap { display:none; }
    .fs-airline-input { width:100%; }
    .fs-search-wrap { width:100%; }
    .fs-search-btn { width:100%; justify-content:center; }
    .mc-remove-btn { right:-12px; }
}
@media (max-width:576px) {
    .fs-hero.tab-compact { min-height:0 !important; padding-bottom:30px !important; }
    /* Zero horizontal hero gutter so the search card hits the hero edges —
       card has its own 12px inner padding so fields still have breathing
       room, but the wasted beach-background strip on either side is gone. */
    .fs-hero { padding:20px 0 32px !important; min-height:calc(100svh - 72px) !important; height:auto !important; justify-content:flex-start !important; border-radius:0 !important; }
    .fs-hero-plane, .fs-hero-plane2 { display:none !important; }
    .fs-tabs    { margin-top:0 !important; }
    .fs-hero-plane { font-size:70px; }
    .fs-tabs { border-radius: 5px; margin-bottom:-22px; }
    .fstab { flex-shrink:0; padding:7px 12px; font-size:11px; }
    .fstab i { font-size:13px; }
    .fs-card { padding:42px 12px 12px; border-radius: 5px; }
    .fs-trip { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .fs-trip::-webkit-scrollbar { display: none; }
    .fs-trip-btn { padding: 6px 10px !important; font-size: 11.5px !important; gap: 4px !important; flex-shrink: 0; white-space: nowrap; }
    .fs-trip-btn i { font-size: 11px; }
    .fs-row { flex-wrap:wrap; flex-direction:row; }
    .mc-segment { flex-direction:column; }
    .fs-field { flex:1 1 100% !important; border-right:none !important; border-bottom:1.5px solid #e2e8f0 !important; border-radius:0 !important; }
    .fs-field:first-child { border-radius: 5px 12px 0 0 !important; }
    .fs-field:last-child  { border-bottom:none !important; border-radius:0 0 12px 12px !important; }
    #departBox, #returnBox { flex:1 1 50% !important; border-bottom:1.5px solid #e2e8f0 !important; }
    #departBox { border-right:1.5px solid #e2e8f0 !important; border-radius:0 !important; }
    #returnBox { border-right:none !important; border-radius:0 !important; }
    .fs-field { padding: 9px 14px !important; }
    .fs-label { margin-bottom: 2px !important; font-size: 10.5px !important; }
    .fs-sub   { margin-top: 1px !important; font-size: 11px !important; }
    .fs-val   { font-size: 14px !important; }
    .ins-date-pair { flex:1 1 100% !important; display:flex !important; flex-direction:row !important; }
    .ins-date-pair .fs-field { flex:1 !important; border-bottom:1.5px solid #e2e8f0 !important; border-radius:0 !important; }
    .ins-date-pair .fs-field:first-child { border-right:1.5px solid #e2e8f0 !important; }
    .ins-date-pair .fs-field:last-child  { border-right:none !important; }
    .fs-val { font-size:15px; }
    .fs-val.ph { font-size:13px; }
    .fs-bottom { flex-direction:column; align-items:stretch; gap:12px; }
    .fs-bottom-group { width:100%; }
    .fs-bottom-group:has(#airlineTagWrap) { display:none; }
    .fs-search-wrap { margin-left:0; width:100%; }
    .fs-search-btn  { width:100%; justify-content:center; padding:13px; }
    /* No mobile override — _positionTrav() in js-flights.js takes over on
       open: it moves the dropdown to document.body, computes top/right
       from the trigger's bounding rect, and flips to open-upward when
       there isn't enough room below. Anything we !important here would
       fight that JS positioning and the picker would end up off-screen. */
    .trav-wrap { min-width: 260px; }
    .ac-wrap    { width:100%; }
    .fs-markup-badge { margin-left:0; }
    .mc-remove-btn { right:8px; top:8px; transform:none; }
}
@keyframes tabEnter {
    from { opacity:0; }
    to   { opacity:1; }
}
.tab-enter { animation:tabEnter 0.18s ease forwards; }

@keyframes insShake {
    0%,100% { transform: translateX(0); }
    20%      { transform: translateX(-5px); }
    40%      { transform: translateX(5px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}