/* =====================================================================
   AMY TRAVEL - SEARCH COMPONENT STYLES (REFINED)
   ===================================================================== */

:root {
    /* Brand & Accents */
    --primary-blue: #003580;
    --primary-blue-dark: #002147;
    --primary-blue-light: #0071c2;
    --primary-hover: #0056b3;
    --secondary-blue: #667eea;
    --accent-orange: #ff8c00;
    --accent-yellow: #febb02;
    /* Status */
    --success-green: #008009;
    --success-light: #d1e7dd;
    --warning-orange: #ff8c00;
    --warning-light: #fff3cd;
    --danger-red: #cc0000;
    --danger-light: #f8d7da;
    --info-blue: #17a2b8;
    --info-light: #d1ecf1;
    /* Neutral */
    --white: #ffffff;
    --gray-50: #fafbfc;
    --gray-100: #f5f7fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    /* Legacy aliases */
    --primary-color: var(--primary-blue);
    --secondary-color: var(--secondary-blue);
    --border-color: var(--gray-200);
    --text-primary: var(--gray-800);
    --text-secondary: var(--gray-600);
    --text-muted: var(--gray-500);
    --background-light: var(--gray-100);
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.1);
    --shadow-2xl: 0 25px 50px rgba(0,0,0,0.25);
    --shadow-heavy: var(--shadow-xl);
    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --border-radius: var(--radius-md);
    /* Transition */
    --transition-fast: .15s ease;
    --transition-normal: .2s ease;
    --transition-slow: .3s ease;
    --transition: var(--transition-normal);
    /* Typography */
    --font-family-sans: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    /* Spacing */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    /* Z */
    --z-dropdown: 1000;
    --z-popover: 1060;
}

/* =====================================================================
   SEARCH PANEL
   ===================================================================== */
.search-panel {
    background: var(--white);
    margin: 0 auto;
    max-width: 1200px;
    overflow: hidden;
    padding: var(--space-8);
    position: relative;
}

/* =====================================================================
   FLIGHT SEARCH GRID
   ===================================================================== */
.flight-search-container { margin: 0 auto; position: relative; width: 100%; }
.flight-search-row { align-items: end; display: grid; gap: .75rem; grid-template-columns: 1fr 1fr 1fr; width: 100%; }
.flight-search-from, .flight-search-to { position: relative; }
.flight-search-date { align-items: end; display: flex; gap: .5rem; }
.flight-search-date > div { flex: 1; }

/* =====================================================================
   SWAP BUTTON
   ===================================================================== */
.swap-btn {
    align-items: center;
    background: #fff;
    border: none;
    border-radius: 50%;
    bottom: 4px;
    box-shadow: -1.5px 0 0 var(--border-color), 1.5px 0 0 var(--border-color);
    cursor: pointer;
    display: flex;
    height: 30px;
    justify-content: center;
    left: -19px;
    position: absolute;
    transition: var(--transition);
    -webkit-transition: var(--transition);
    color: var(--text-secondary);
    width: 30px;
    z-index: 10;
}
.swap-btn.active-shadow-from { box-shadow: -1.5px 0 0 #c8cacb, 1.5px 0 0 var(--border-color); }
.swap-btn.active-shadow-to { box-shadow: -1.5px 0 0 var(--border-color), 1.5px 0 0 #c8cacb; }
.swap-icon { font-size: 16px; transition: transform .3s ease; -webkit-transition: -webkit-transform .3s ease; }
.swap-icon.spinning { transform: rotate(180deg); -webkit-transform: rotate(180deg); }

/* =====================================================================
   FORM CONTROLS
   ===================================================================== */
.form-control, .form-select {
    background-color: var(--white);
    font-size: 16px;
    margin-bottom: 0 !important;
    transition: var(--transition);
    -webkit-transition: var(--transition);
}
.form-control:hover { border-color: var(--gray-400); box-shadow: var(--shadow-sm); -webkit-box-shadow: var(--shadow-sm); }
.form-control:focus, .form-select:focus { border-color: var(--primary-blue-light); box-shadow: 0 0 0 .2rem rgba(0,113,194,.25); outline: none; }
.form-control::placeholder { color: var(--gray-500); opacity: 1; }
.form-group { position: relative; width: 100%; }
.form-group input { padding-right: 30px; }
.form-label { color: var(--gray-700); font-size: .875rem; font-weight: var(--font-weight-medium); margin-bottom: var(--space-2); }

/* Destination styled text inputs */
.destination-input { background:#fff; cursor:pointer; padding-right:35px; }
.destination-arrow, .clear-btn {
    font-size: 12px;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(calc(-50% + 10px));
    -webkit-transform: translateY(calc(-50% + 10px));
}
.destination-arrow { color: var(--text-secondary); pointer-events:none; }
.clear-btn { color:#888; cursor:pointer; display:none; font-size:14px; right:8px; }
.clear-btn:hover { color:#000; }

/* =====================================================================
   TRIP TYPE
   ===================================================================== */
.trip-type { background: var(--white); }
.trip-type label { color: var(--gray-700); cursor: pointer; font-weight: var(--font-weight-medium); transition: var(--transition); -webkit-transition: var(--transition); }
.form-check { padding-left: 2rem; }
.form-check-input { border:2px solid var(--gray-400); height:1.25rem; margin-top:.125rem; transition: var(--transition); -webkit-transition: var(--transition); width:1.25rem; }
.form-check-input:checked { background-color: var(--primary-blue); border-color: var(--primary-blue); box-shadow:none; }
.form-check-input:checked[type=radio] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"); }
.form-check-input:focus { border-color: var(--primary-blue-light); box-shadow:none; }
.form-check:hover .form-check-input { border-color: var(--primary-blue-light); }
.form-check:hover label { color: var(--primary-blue); }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    cursor: pointer;
    display: inline-flex;
    font-size: .9375rem;
    font-weight: var(--font-weight-medium);
    gap: var(--space-2);
    justify-content: center;
    line-height: 1.5;
    overflow: hidden;
    padding: .75rem 1.5rem;
    position: relative;
    text-decoration: none;
    transition: var(--transition);
    -webkit-transition: var(--transition);
}
.btn:focus-visible { outline: 2px solid var(--primary-blue-light); outline-offset: 2px; }

.search-btn {
    background: #001ea0;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    color: #fff;
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: .025em;
    line-height: 1.5;
    overflow: hidden;
    padding: 1rem 2.5rem;
    position: relative;
    text-transform: uppercase;
    transition: var(--transition);
    -webkit-transition: var(--transition);
}
.search-btn::before { background:#001ea0; content:""; height:100%; left:-100%; position:absolute; top:0; transition: var(--transition-slow); -webkit-transition: var(--transition-slow); width:100%; }
.search-btn:hover::before { left:100%; }
.search-btn:hover { background:#001ea0; box-shadow: var(--shadow-xl); color:#fff; }
.search-btn:disabled { background: var(--gray-400); cursor:not-allowed; opacity:.6; transform:none; }

.add-city-btn { background:transparent; border:2px solid var(--primary-color); border-radius:6px; color:var(--primary-color); font-size:14px; font-weight:600; transition: var(--transition); -webkit-transition: var(--transition); }
.add-city-btn:hover { background: var(--primary-color); color:#fff; }

/* =====================================================================
   PASSENGER SELECTOR / POPOVERS
   ===================================================================== */
.passenger-display { align-items:center; background:#fff; border:1px solid var(--gray-300); border-radius:var(--radius-md); cursor:pointer; display:flex; justify-content:space-between; padding:.75rem 1rem; transition: var(--transition); -webkit-transition: var(--transition); white-space:nowrap; }
.passenger-display:hover { border-color: var(--gray-400); box-shadow: var(--shadow-sm); -webkit-box-shadow: var(--shadow-sm); }
.passenger-count { color: var(--gray-800); font-size:16px; font-weight: var(--font-weight-medium); min-width:24px; text-align:center; transition: var(--transition); -webkit-transition: var(--transition); }

.passenger-popover, .guest-popover, .destination-popover { background:#fff; border:1px solid #cacaca; border-radius:16px; box-shadow: var(--shadow-heavy); max-width:400px; min-width:320px; overflow:hidden; padding:0; position:relative; z-index: var(--z-popover); }
.destination-popover { width:350px; }
.passenger-header, .guest-header { border-bottom:1px solid #f0f0f0; padding:20px 20px 10px; }
.passenger-header h6, .guest-header h6 { color: var(--text-primary); font-weight:600; margin:0; }
.passenger-content, .guest-content { padding:20px; }
.passenger-row, .guest-row { align-items:center; border-bottom:1px solid var(--background-light); display:flex; justify-content:space-between; padding:15px 0; }
.passenger-row:last-of-type, .guest-row:last-of-type { border-bottom:none; margin-bottom:15px; }
.passenger-info, .guest-info { flex:1; }
.passenger-title, .guest-title { color: var(--text-primary); font-size:15px; font-weight:600; margin-bottom:2px; }
.passenger-subtitle, .guest-subtitle { color: var(--text-secondary); font-size:13px; }
.passenger-controls, .guest-controls { align-items:center; display:flex; gap:12px; }
.passenger-btn, .guest-btn { align-items:center; background:#fff; border:2px solid #e0e0e0; border-radius:50%; color: var(--text-secondary); cursor:pointer; display:flex; font-size:12px; height:32px; justify-content:center; transition: all .2s ease; -webkit-transition: all .2s ease; width:32px; }
.passenger-btn:hover, .guest-btn:hover { border-color: var(--secondary-color); color: var(--secondary-color); transform: scale(1.05); -webkit-transform: scale(1.05); }
.passenger-btn:disabled, .guest-btn:disabled { cursor:not-allowed; opacity:.4; transform:none; }
.guest-btn.guest-plus { border-color: var(--secondary-color); color: var(--secondary-color); }
.guest-btn.guest-plus:hover { background: var(--secondary-color); color:#fff; }
.guest-count { color: var(--text-primary); font-size:16px; font-weight:600; min-width:24px; text-align:center; transition: var(--transition); -webkit-transition: var(--transition); }
.guest-count.updating { color: var(--secondary-color); transform: scale(1.2); -webkit-transform: scale(1.2); }

/* =====================================================================
   DESTINATION LISTS / SUGGESTIONS
   ===================================================================== */
.destination-suggestions, .country-suggestions { background:#fff; border:1px solid var(--border-color); border-top:none; border-radius:0 0 12px 12px; box-shadow: var(--shadow-lg); left:0; margin-top:4px; max-height:320px; overflow-y:auto; position:absolute; right:0; top:100%; z-index: var(--z-dropdown); }
.country-suggestions { border-radius:0 0 8px 8px; max-height:300px; }
.destination-suggestions .destination-item, .destination-item, .country-item { border-bottom:1px solid #f8f9fa; cursor:pointer; display:flex; flex-direction:column; gap:4px; padding:16px 20px; transition: all .2s ease; -webkit-transition: all .2s ease; }
.country-item { padding:12px 15px; }
.destination-suggestions .destination-item:hover, .destination-item:hover { background:#d6dae7; }
.country-item:hover { background:#f8f9fa; }
.destination-suggestions .destination-item:last-child, .destination-item:last-child, .country-item:last-child { border-bottom:none; }
.destination-main, .country-main { align-items:center; display:flex; gap:12px; margin-bottom:0; }
.country-main { gap:8px; margin-bottom:4px; }
.destination-main i { color: var(--primary-color); font-size:14px; width:16px; }
.destination-city { color: var(--text-primary); flex:1; font-size:15px; font-weight:600; }
.country-flag { font-size:16px; }
.country-name { color: var(--text-primary); flex:1; font-weight:600; }
.destination-code, .country-code { background: var(--border-color); border-radius:6px; color: var(--text-secondary); font-size:12px; font-weight:600; letter-spacing:.5px; padding:4px 8px; }
.country-code { background:#f8f9fa; border-radius:4px; font-size:.8rem; padding:2px 6px; color:#999; }
.destination-details, .country-details { color: var(--text-secondary); font-size:13px; margin-left:28px; margin-top:2px; }
.country-details { font-size:.85rem; margin-left:24px; }
.destination-search { border-bottom:1px solid var(--border-color); padding:15px; }
.destination-search-input { border:1px solid var(--border-color); border-radius: var(--border-radius); font-size:14px; padding:10px 15px; width:100%; }
.destination-search-input:focus { border-color: var(--secondary-color); box-shadow: 0 0 0 .2rem rgba(102,126,234,.25); outline:none; }
.destination-list { max-height:300px; overflow-y:auto; }

/* =====================================================================
   MULTI-CITY
   ===================================================================== */
.multi-city-row { background: var(--background-light); border:1px solid var(--border-color); border-radius: var(--border-radius); margin-top:1rem; padding:1rem; }
.multi-city-display { align-items:center; display:flex; gap:1rem; justify-content:space-between; }
.multi-city-info { align-items:center; display:flex; flex:1; flex-wrap:wrap; gap:.5rem; }
.multi-city-from, .multi-city-to, .multi-city-date { background:#fff; border:1px solid var(--border-color); border-radius:4px; color: var(--text-primary); font-weight:600; min-width:120px; padding:4px 8px; text-align:center; }
.multi-city-info i { color: var(--primary-color); font-size:12px; }
.remove-segment { font-size:12px; padding:6px 12px; white-space:nowrap; }

/* =====================================================================
   CLASS SELECTION
   ===================================================================== */
.class-selection-row { border-bottom:1px solid #f8f9fa; margin-bottom:15px; padding:15px 0; }
.class-selection-row label { color: var(--text-primary); display:block; font-size:15px; font-weight:600; margin-bottom:8px; }
.class-select { border:1px solid var(--border-color); border-radius:6px; font-size:14px; padding:8px 12px; width:100%; }
.class-select:focus { border-color: var(--secondary-color); box-shadow:0 0 0 .2rem rgba(102,126,234,.25); outline:none; }

/* =====================================================================
   ANIMATIONS
   ===================================================================== */
@keyframes spin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }
@-webkit-keyframes spin { 0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); } }
.fa-spinner { animation: spin 1s linear infinite; -webkit-animation: spin 1s linear infinite; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@-webkit-keyframes slideUp { from { opacity:0; -webkit-transform:translateY(30px); } to { opacity:1; -webkit-transform:translateY(0); } }
@keyframes scaleIn { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:scale(1); } }
@-webkit-keyframes scaleIn { from { opacity:0; -webkit-transform:scale(.9); } to { opacity:1; -webkit-transform:scale(1); } }
.fade-in { animation: fadeIn .6s ease forwards; -webkit-animation: fadeIn .6s ease forwards; }
.slide-up { animation: slideUp .6s ease forwards; -webkit-animation: slideUp .6s ease forwards; }
.scale-in { animation: scaleIn .4s ease forwards; -webkit-animation: scaleIn .4s ease forwards; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1200px) {
    .flight-search-row { grid-template-columns:1fr 1fr; }
    .flight-search-date { grid-column:1 / -1; margin-top:1rem; }
    .search-panel { padding: var(--space-6); }
}
@media (max-width:768px) {
    .search-panel { border-radius: var(--radius-lg); margin: var(--space-4); padding: var(--space-4); }
    .flight-search-row { grid-template-columns:1fr; gap:1rem; }
    .flight-search-date { display:block; margin-top:0; }
    .flight-search-date > div { margin-bottom:1rem; }
    .flight-search-date > div:last-child { margin-bottom:0; }
    .swap-btn { bottom:auto; height:40px; left:auto; right:4px; top:-12px; transform:rotate(90deg); -webkit-transform:rotate(90deg); width:40px; }
    .search-btn { font-size:1rem; padding:.875rem 2rem; width:100%; }
    .trip-type { padding: var(--space-3); }
    .form-check { margin-bottom: var(--space-2); }
    .passenger-popover, .guest-popover { margin:0 20px; max-width:calc(100vw - 40px); min-width:280px; }
    .destination-suggestions, .country-suggestions { max-height:200px; }
    .multi-city-display { align-items:stretch; flex-direction:column; gap:1rem; }
    .multi-city-info { align-items:stretch; flex-direction:column; gap:.75rem; }
    .multi-city-info i { display:none; }
    .multi-city-from, .multi-city-to, .multi-city-date { min-width:auto; padding:8px 12px; width:100%; }
}
@media (max-width:576px) { .form-control, .form-select { padding:10px 14px; } .passenger-popover, .guest-popover { min-width:280px; } }
@media (max-width:415px) { .imgRefreshdiv, .arrow-btn { display:none; } }

/* =====================================================================
   ACCESSIBILITY & PRINT
   ===================================================================== */
.form-control:focus-visible, .form-select:focus-visible { outline:2px solid var(--primary-blue-light); outline-offset:2px; }
@media (prefers-contrast: high) { :root { --gray-200:#000; --gray-300:#000; --border-color:#000; } }
@media print { .btn, .modal, .dropdown-menu, .tooltip { display:none !important; } }
.text-gradient { background:linear-gradient(135deg,var(--primary-blue) 0%,var(--primary-blue-light) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* =====================================================================
   UMRAH / LEGACY BUTTON VARIANTS
   ===================================================================== */
.flrow { border-radius:6px; box-shadow:0 1px 3px 0 rgba(37,32,31,.3); -webkit-box-shadow:0 1px 3px 0 rgba(37,32,31,.3); font:400 16px/20px; line-height:1.15rem; margin:12px 0; padding:12px; transition: all .4s ease; -webkit-transition: all .4s ease; }
.flrow:hover { box-shadow:0 4px 14px 0 rgba(37,32,31,.25); -webkit-box-shadow:0 4px 14px 0 rgba(37,32,31,.25); cursor:pointer; }
.btn-notprimary { background-color:#001880; border-color:#001880; color:#fff; }
.btn-notprimary:hover { background-color:#00156f; border-color:#00156f; color:#fff; }
.btn-outprimary { background:#fff; border:1px solid #001880; color:#001880 !important; min-width:100px; padding:6px; text-align:center; text-decoration:none; }
.btn-outprimary:hover { background:#001880; border-color:#001880; color:#fff !important; }
.btn-outdanger { background:#fff; border:1px solid #dc3545; color:#dc3545 !important; min-width:100px; padding:6px; text-align:center; text-decoration:none; }
.btn-outdanger:hover { background:#dc3545; border-color:#dc3545; color:#fff !important; }

/* =====================================================================
   FLIGHT GRID ROW (LEGACY)
   ===================================================================== */
.single-flight-grid { display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:auto; }
.single-flight-0 { grid-column:1/span 4; grid-row:1; }
.single-flight-1 { grid-column:1; grid-row:2; }
.single-flight-2 { font-weight:600; grid-column:1; grid-row:3; }
.single-flight-3 { grid-column:1; grid-row:4; }
.single-flight-4 { align-self:center; font-size:1.22rem; font-weight:600; grid-column:2; grid-row:2/span 2; text-align:center; }
.single-flight-5 { grid-column:2; grid-row:4; text-align:center; }
.single-flight-6 { grid-column:3; grid-row:2; text-align:center; }
.single-flight-7 { grid-column:3; grid-row:3; text-align:center; }
.single-flight-8 { grid-column:3; grid-row:4; text-align:center; }
.single-flight-9 { align-self:center; font-size:1.22rem; font-weight:600; grid-column:4; grid-row:2/span 2; text-align:center; }
.single-flight-10 { grid-column:4; grid-row:4; text-align:center; }
.single-flight-11 { align-self:center; font-size:1.3rem; font-weight:700; grid-column:5; grid-row:2/span 2; text-align:center; }
.single-flight-12 { grid-column:5; grid-row:4; text-align:center; }
.single-flight-14 { grid-column:1/span 5; grid-row:5; padding:10px 0; }

/* =====================================================================
   STATS BAR (LEGACY)
   ===================================================================== */
.dvstatcls { background:#e9eaea; bottom:0; display:flex; left:0; position:fixed; right:0; z-index:2; }