:root{
--primary:#0057ff;
--secondary:#00c896;
--dark:#0f172a;
--light:#f8fafc;
--gray:#64748b;
--white:#ffffff;
--border:#e2e8f0;
--shadow:0 10px 30px rgba(0,0,0,.08);
--error:#ef4444;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:var(--light);
color:var(--dark);
line-height:1.6;
font-size:16px;
}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
}

.container{
width:92%;
max-width:1200px;
margin:auto;
}
  
/* CARDS */
.feature-card, .service-card{
    background:white;
    border-radius:25px;
    padding:24px;
    text-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.service-card ul{
    list-style:none;
    margin:20px 0;
    text-align:left;
}

.service-card li{
    margin:12px 0;
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--gray);
}

.service-btn{
    display:block;
    width:100%;
    background:var(--primary);
    color:white;
    padding:14px 22px;
    border-radius:12px;
    text-decoration:none;
    font-weight:600;
    text-align:center;
    border:none;
    cursor:pointer;
    transition:.25s;
}

.service-btn:hover{
    background:#004bdb;
    transform:translateY(-2px);
}

/* STEPS */
.steps{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}

.step{
    text-align:center;
}

.step-number{
    width:60px;
    height:60px;
    border-radius:50%;
    background:var(--primary);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
    font-weight:bold;
}

/* ==========================
HEADER
========================== */
.header{
position:sticky;
top:0;
z-index:1000;
background:white;
box-shadow:0 2px 15px rgba(0,0,0,.05);
}

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 0;
}

.logo-wrapper{
display:flex;
align-items:center;
gap:12px;
}

.logo-mark{
width:48px;
height:48px;
border-radius:14px;
background:linear-gradient(135deg, var(--primary), var(--secondary));
display:flex;
align-items:center;
justify-content:center;
color:white;
font-weight:800;
font-size:20px;
}

.logo-text{
font-size:1.35rem;
font-weight:800;
color:var(--dark);
}

.nav-links{
display:flex;
align-items:center;
gap:24px;
}

.nav-links a{
font-weight:600;
color:var(--dark);
transition:.25s;
}

.nav-links a:hover{
color:var(--primary);
}

.language-select{
padding:10px;
border-radius:8px;
border:1px solid var(--border);
background:white;
font-weight:600;
cursor:pointer;
}

/* ==========================
MOBILE MENU
========================== */
.menu-btn{
display:none;
font-size:28px;
background:none;
border:none;
cursor:pointer;
}

.mobile-menu{
position:fixed;
top:0;
left:-320px;
width:320px;
height:100%;
background:white;
padding:30px;
z-index:3000;
transition:.3s;
box-shadow:4px 0 25px rgba(0,0,0,.15);
}

.mobile-menu.active{
left:0;
}

.mobile-menu a{
display:block;
padding:14px 0;
font-weight:600;
color:var(--dark);
border-bottom:1px solid var(--border);
}

.overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.5);
display:none;
z-index:2500;
}

.overlay.active{
display:block;
}

/* ==========================
HERO
========================== */
.hero{
background:linear-gradient(135deg, #0057ff, #00c896);
color:white;
padding:100px 0;
text-align:center;
}

.hero h1{
font-size:clamp(2.2rem,5vw,4rem);
font-weight:800;
margin-bottom:20px;
line-height:1.1;
}

.hero p{
max-width:760px;
margin:auto;
font-size:1.15rem;
margin-bottom:35px;
}

.hero-buttons{
display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 28px;
border-radius:12px;
font-weight:700;
transition:.25s;
cursor:pointer;
border:none;
}

.btn-primary{
background:white;
color:var(--primary);
}

.btn-primary:hover{
transform:translateY(-3px);
box-shadow:0 5px 15px rgba(255,255,255,0.2);
}

.btn-secondary{
background:rgba(255,255,255,.15);
border:1px solid rgba(255,255,255,.3);
color:white;
}

.btn-secondary:hover{
background:rgba(255,255,255,.25);
}

.trust-badges{
margin-top:40px;
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:20px;
}

.badge{
background:rgba(255,255,255,.15);
padding:10px 16px;
border-radius:50px;
font-weight:600;
}

/* ==========================
STATS
========================== */
.stats{
padding:60px 0;
background:white;
}

.stats-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
text-align:center;
}

.stat-card{
background:white;
padding:25px;
border-radius:16px;
box-shadow:var(--shadow);
}

.stat-number{
font-size:2rem;
font-weight:800;
color:var(--primary);
}

.stat-label{
color:var(--gray);
}

/* ==========================
SECTION TITLES
========================== */
.section{
padding:90px 0;
}

.section-title{
text-align:center;
margin-bottom:60px;
}

.section-title h2{
font-size:2.4rem;
margin-bottom:10px;
}

.section-title p{
color:var(--gray);
max-width:700px;
margin:auto;
}

/* WIDGET STYLING */
.form-group {
    margin-bottom: 16px;
    text-align: left;
}
.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--dark);
}
.widget-select, .shonapay-input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background-color: var(--white);
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--dark);
    cursor: pointer;
    transition: border .2s;
}
.widget-select:focus, .shonapay-input:focus {
    border-color: var(--primary);
    outline: none;
}
.widget-select:disabled {
    background-color: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

/* ==========================
TELEMEDICINE & INSURANCE EXTENSIONS
========================== */
.telemedicine-engine {
    background: var(--white);
    border-radius: 20px;
    padding: 24px;
    margin-top: 20px;
    border: 1px solid var(--border);
}
.ekta-hotline-card {
    background: #fef2f2;
    border: 1px solid #fee2e2;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
}
.hotline-number {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--error);
    margin: 15px 0;
    font-family: monospace;
    letter-spacing: 1px;
}
.iframe-container {
    position: relative;
    width: 100%;
    height: 500px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
}

/* ==========================
RESPONSIVE MEDIA QUERIES
========================== */
@media(max-width:768px){
    .nav-links{
        display:none;
    }
    .menu-btn{
        display:block;
    }
    .stats-grid{
        grid-template-columns:1fr;
    }
    .hero{
        padding:80px 0;
    }
    .hero-buttons{
        flex-direction:column;
    }
    .btn{
        width:100%;
    }
    .booking-field-group {
        display: flex;
        flex-direction: column;
        margin-bottom: 1.25rem;
        width: 100%;
    }
    .booking-label {
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: var(--dark);
    }
    .select-wrapper {
        position: relative;
        width: 100%;
    }
    .shonapay-dropdown {
        width: 100%;
        padding: 0.75rem 1rem;
        background-color: var(--white);
        border: 1px solid var(--border);
        border-radius: 0.5rem;
        font-family: inherit;
        font-size: 0.95rem;
        color: var(--dark);
  appearance: none; /* Strips default operating system styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Custom dropdown arrow using your gray colour variable */
.select-wrapper::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--gray);
  border-bottom: 2px solid var(--gray);
  pointer-events: none;
  transition: transform 0.2s ease;
}

/* Subtle flip animation logic for when you add JS later */
.select-wrapper.active::after {
  transform: translateY(-25%) rotate(45deg);
}

/* Interactive focus state utilizing your primary blue (#0057ff) */
.shonapay-dropdown:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 87, 255, 0.15); /* Soft primary glow */
}

/* Hover state using a slightly deeper gray tint border */
.shonapay-dropdown:hover:not(:disabled) {
  border-color: var(--gray);
}

/* Disabled state for when the packages are loading or unavailable */
.shonapay-dropdown:disabled {
  background-color: var(--light);
  color: var(--gray);
  cursor: not-allowed;
  opacity: 0.7;
}

/* ==========================================================
   SHONAPAY eSIM STORE
   Part 2 - CSS
========================================================== */

.esim-store{
    max-width:700px;
    margin:40px auto;
    padding:0 20px;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

.esim-card{
    background:var(--white);
    border-radius:18px;
    padding:30px;
    box-shadow:var(--shadow);
}

.esim-title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:0;
    color:var(--dark);
    font-size:30px;
    font-weight:700;
}

.esim-title svg{
    color:var(--primary);
}

.esim-subtitle{
    margin:12px 0 28px;
    text-align:center;
    color:var(--gray);
    font-size:15px;
    line-height:1.6;
}

/* ========================================
   Labels
======================================== */

.search-section label,
.toggle-section label{
    display:block;
    margin-bottom:10px;
    font-weight:600;
    color:var(--dark);
    font-size:15px;
}

/* ========================================
   Search
======================================== */

#countrySearch{
    width:100%;
    padding:14px 16px;
    font-size:16px;
    border:1px solid var(--border);
    border-radius:12px;
    outline:none;
    transition:.25s;
    background:var(--white);
}

#countrySearch:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(0,87,255,.12);
}

/* ========================================
   Search Results
======================================== */

.search-results{
    margin-top:10px;
    border-radius:12px;
    background:var(--white);
    overflow:hidden;
    box-shadow:var(--shadow);
    display:none;
    max-height:280px;
    overflow-y:auto;
}

.search-results.active {
    display: block;
}

.search-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    cursor:pointer;
    transition:.2s;
    border-bottom:1px solid var(--border);
}

.search-item:last-child{
    border-bottom:none;
}

.search-item:hover{
    background:#eff6ff;
}

.country-flag{
    font-size:24px;
    width:34px;
    text-align:center;
}

.country-name{
    font-weight:600;
    color:var(--dark);
}

/* ========================================
   Toggle Sections
======================================== */

.toggle-section{
    margin-top:28px;
}

.toggle-group{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.toggle-btn{
    flex:1;
    min-width:120px;
    padding:12px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--white);
    color:var(--gray);
    cursor:pointer;
    font-size:15px;
    font-weight:600;
    transition:.25s;
}

.toggle-btn:hover{
    background:#eff6ff;
    border-color:var(--primary);
}

.toggle-btn.active{
    background:var(--primary);
    color:var(--white);
    border-color:var(--primary);
}

/* ========================================
   Plan Cards
======================================== */

.plans-container{
    margin-top:30px;
    display:grid;
    gap:18px;
}

.plan-card{
    border:1px solid var(--border);
    border-radius:16px;
    padding:22px;
    transition:.25s;
    background:var(--white);
}

.plan-card:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 24px rgba(15,23,42,.08);
}

.plan-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
}

.plan-title{
    font-size:18px;
    font-weight:700;
    color:var(--dark);
}

.plan-price{
    color:var(--primary);
    font-size:22px;
    font-weight:700;
}

.plan-details{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-bottom:22px;
}

.detail{
    text-align:center;
}

.detail-value{
    font-weight:700;
    color:var(--dark);
}

.detail-label{
    margin-top:4px;
    font-size:13px;
    color:var(--gray);
}

/* ========================================
   Button
======================================== */

.buy-btn{
    width:100%;
    padding:14px;
    border:none;
    border-radius:12px;
    background:var(--primary);
    color:var(--white);
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.25s;
}

.buy-btn:hover{
    background:#1d4ed8;
}

/* ========================================
   Loading
======================================== */

.loading{
    margin-top:25px;
    text-align:center;
    color:var(--gray);
    font-size:15px;
}

/* ========================================
   Helpers
======================================== */

.hidden{
    display:none;
}

/* ========================================
   Mobile
======================================== */

@media(max-width:640px){
    .esim-card{
        padding:22px;
    }
    .plan-details{
        grid-template-columns:1fr;
        gap:12px;
    }
    .toggle-btn{
        min-width:100%;
    }
    .esim-title{
        font-size:24px;
    }
}

/* ==========================================================
 SHONAPAY FLIGHT SEARCH ENGINE
 EDITED SECTION 4/10
 CSS PART 1 - CORE SEARCH INTERFACE
=========================================================== */


:root {

    --shonapay-primary: #0ea5e9;
    --shonapay-primary-dark: #0284c7;

    --text-main: #0f172a;
    --text-secondary: #64748b;

    --border: #cbd5e1;

    --background-soft: #f8fafc;

}





/* ==========================================================
 MAIN WRAPPER
=========================================================== */


.shonapay-flight-wrapper {

    width:100%;

    max-width:1200px;

    margin:20px auto;

    padding:0 20px;

    font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;

}





/* ==========================================================
 SEARCH CARD
=========================================================== */

.shonapay-flight-card {

    background:#ffffff;

    border-radius:20px;

    padding:24px;

    border:1px solid #e2e8f0;

    box-shadow:
    0 10px 30px rgba(15,23,42,.08);

}



/* ==========================================================
 MULTI-CITY CONTROLS
=========================================================== */

.multi-city-controls {

    margin-top:15px;

}


#addFlightLegButton {

    background:#ffffff;

    border:1px dashed #0ea5e9;

    color:#0ea5e9;

    padding:12px 18px;

    border-radius:10px;

    cursor:pointer;

    font-weight:700;

}


#addFlightLegButton:hover {

    background:#f0f9ff;

}



/* ==========================================================
 HEADER
=========================================================== */


.flight-header {

    margin-bottom:20px;

}


.flight-brand {

    display:flex;

    align-items:center;

    gap:12px;

}


.flight-icon {

    font-size:32px;

}


.flight-brand h2 {

    margin:0 0 4px;

    color:var(--text-main);

    font-size:24px;

    font-weight:800;

}


.flight-brand p {

    margin:0;

    color:var(--text-secondary);

    font-size:14px;

}








/* ==========================================================
 TRIP MODE TABS
=========================================================== */


.flight-tabs {

    display:flex;

    gap:8px;

    margin-bottom:20px;

    border-bottom:
    1px solid #e2e8f0;

    padding-bottom:12px;

}



.flight-tab {

    border:1px solid var(--border);

    background:white;

    color:#334155;

    padding:9px 18px;

    border-radius:10px;

    cursor:pointer;

    font-size:14px;

    font-weight:700;

    transition:.2s ease;

}



.flight-tab:hover {

    border-color:var(--shonapay-primary);

}



.flight-tab.active {

    background:var(--shonapay-primary);

    border-color:var(--shonapay-primary);

    color:white;

}







/* ==========================================================
 MAIN FLIGHT LEG LAYOUT
=========================================================== */


.flight-leg {
    display:grid;
    grid-template-columns:
    minmax(180px,1fr)
    46px
    minmax(180px,1fr)
    minmax(150px,0.8fr)
    minmax(150px,0.8fr);
    gap:12px;
    align-items:end;
}
  
/* ==========================================================
 INPUT MODULES
=========================================================== */


.airport-field,
.date-field {

    display:flex;

    flex-direction:column;

    gap:6px;

    position:relative;

}



.airport-field label,
.date-field label {

    font-size:13px;

    font-weight:700;

    color:#475569;

}



.airport-field input,
.date-field input {


    width:100%;

    height:46px;

    box-sizing:border-box;

    padding:12px;

    border-radius:10px;

    border:1px solid var(--border);

    font-size:14px;

    color:var(--text-main);

    background:white;

}



.airport-field input:focus-visible,
.date-field input:focus-visible {


    outline:

    3px solid rgba(14,165,233,.25);

    border-color:

    var(--shonapay-primary);

}







/* ==========================================================
 SWAP BUTTON
=========================================================== */


.swap-airports {

    width:42px;

    height:42px;

    border-radius:50%;

    border:

    1px solid var(--border);

    background:white;

    color:#475569;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    margin-bottom:2px;

}



.swap-airports:hover {

    color:var(--shonapay-primary);

    border-color:var(--shonapay-primary);

}








/* ==========================================================
 FLEXIBLE DATE OPTION
=========================================================== */


.flexible-date-options {

    margin-top:16px;

}



.checkbox-row {

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    color:#334155;

    cursor:pointer;

}



.checkbox-row span {

    color:var(--text-secondary);

    font-size:13px;

}








/* ==========================================================
 BUTTON FOOTER
=========================================================== */


.flight-form-footer {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    margin-top:16px;
    position:relative;
}



.search-flight-button {


    height:46px;

    padding:0 28px;

    border:none;

    border-radius:10px;

    background:var(--shonapay-primary);

    color:white;

    font-size:15px;

    font-weight:800;

    cursor:pointer;

    transition:.2s ease;

}



.search-flight-button:hover {

    background:var(--shonapay-primary-dark);

}



.search-flight-button:disabled {

    opacity:.6;

    cursor:not-allowed;

}
  /* ==========================================================
 SHONAPAY FLIGHT SEARCH ENGINE
 EDITED SECTION 5/10
 CSS PART 2 - TRAVELLER POPUP + RESULTS FOUNDATION
=========================================================== */





/* ==========================================================
 TRAVELLER SELECTOR BUTTON
=========================================================== */


.traveller-selector {

    min-width:220px;

    height:46px;

    padding:8px 14px;

    border-radius:10px;

    border:1px solid #cbd5e1;

    background:#ffffff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

    cursor:pointer;

    text-align:left;

}





.traveller-title {

    font-size:11px;

    text-transform:uppercase;

    font-weight:800;

    color:#64748b;

}





.traveller-summary {

    font-size:14px;

    font-weight:700;

    color:#0f172a;

}







/* ==========================================================
 TRAVELLER POPUP
=========================================================== */


.traveller-popup {


    position:absolute;


    right:0;


    top:calc(100% + 10px);


    width:340px;


    padding:22px;


    background:#ffffff;


    border-radius:16px;


    border:

    1px solid #e2e8f0;


    box-shadow:

    0 20px 45px rgba(15,23,42,.15);


    z-index:5000;


}



.traveller-popup[hidden] {

    display:none;

}



.traveller-popup h3 {


    margin:0 0 18px;

    font-size:18px;

    color:#0f172a;

}







/* ==========================================================
 TRAVELLER ROWS
=========================================================== */


.traveller-row {


    display:flex;


    justify-content:space-between;


    align-items:center;


    padding:12px 0;


}



.traveller-description {


    display:flex;


    flex-direction:column;


}



.traveller-description strong {


    font-size:15px;

    color:#0f172a;

}



.traveller-description small {


    font-size:12px;

    color:#64748b;

}







/* ==========================================================
 COUNTERS
=========================================================== */


.counter {


    display:flex;


    align-items:center;


    gap:12px;


}



.counter button {


    width:32px;


    height:32px;


    border-radius:50%;


    border:1px solid #cbd5e1;


    background:white;


    cursor:pointer;


    font-size:18px;


    line-height:1;


}



.counter button:hover {


    border-color:#0ea5e9;


    color:#0ea5e9;


}



.counter span {


    min-width:20px;


    text-align:center;


    font-weight:700;


}







/* ==========================================================
 CABIN OPTIONS
=========================================================== */


.cabin-options {


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:8px;


    margin-top:12px;


}



.cabin-option {


    padding:10px;


    border-radius:8px;


    border:1px solid #cbd5e1;


    background:white;


    cursor:pointer;


    font-weight:700;


    font-size:13px;


}



.cabin-option.active {


    background:#0ea5e9;


    border-color:#0ea5e9;


    color:white;


}







/* ==========================================================
 RESULTS AREA
=========================================================== */


.flight-results-section {


    margin-top:35px;


}



.results-header {


    display:flex;


    justify-content:space-between;


    align-items:center;


    margin-bottom:15px;


}



.results-header h2 {


    margin:0;


    color:#0f172a;


    font-size:22px;


}



.results-placeholder,
.results-loader {


    padding:40px;


    border-radius:16px;


    background:white;


    border:1px dashed #cbd5e1;


    text-align:center;


    color:#64748b;


}





.results-grid {


    display:flex;


    flex-direction:column;


    gap:16px;


}







/* ==========================================================
 FLIGHT RESULT CARD FOUNDATION
=========================================================== */


.flight-result-card {


    background:white;


    border-radius:16px;


    border:1px solid #e2e8f0;


    padding:18px;


    transition:.2s ease;


}



.flight-result-card:hover {


    box-shadow:

    0 10px 25px rgba(15,23,42,.08);


    border-color:#bae6fd;


}



.flight-main-row {


    display:flex;


    justify-content:space-between;


    gap:20px;


    align-items:center;


}



.flight-segment {


    flex:1;


}



.airline-name {


    font-weight:800;


    color:#0f172a;


}



.flight-pricing-block {


    display:flex;


    flex-direction:column;


    align-items:flex-end;


    gap:10px;


}



.flight-price {


    font-size:20px;


    font-weight:900;


    color:#0f172a;


}



.select-flight-btn {


    background:#0ea5e9;


    color:white;


    border:none;


    padding:10px 18px;


    border-radius:8px;


    cursor:pointer;


    font-weight:700;


}
  /* ==========================================================
 SHONAPAY FLIGHT SEARCH ENGINE
 EDITED SECTION 6/10
 CSS PART 3 - BOOKING MODAL + RESPONSIVE DESIGN
=========================================================== */





/* ==========================================================
 BOOKING MODAL OVERLAY
=========================================================== */


.booking-modal {


    position:fixed;


    inset:0;


    display:flex;


    align-items:center;


    justify-content:center;


    background:

    rgba(15,23,42,.65);


    backdrop-filter:blur(5px);


    z-index:99999;


    padding:20px;


}



.booking-modal[hidden] {


    display:none !important;


}







/* ==========================================================
 BOOKING BOX
=========================================================== */


.booking-box {


    position:relative;


    width:100%;


    max-width:520px;


    max-height:90vh;


    overflow:hidden;


    background:#ffffff;


    border-radius:20px;


    padding:30px;


    box-shadow:

    0 25px 60px rgba(0,0,0,.25);


    display:flex;


    flex-direction:column;


}







.booking-box h2 {


    margin:0 0 10px;


    font-size:22px;


    font-weight:800;


    color:#0f172a;


}







/* ==========================================================
 CLOSE BUTTON
=========================================================== */


.close-booking {


    position:absolute;


    top:14px;


    right:18px;


    width:36px;


    height:36px;


    border:none;


    background:transparent;


    color:#64748b;


    font-size:28px;


    cursor:pointer;


}



.close-booking:hover {


    color:#0f172a;


}







/* ==========================================================
 SELECTED FLIGHT SUMMARY
=========================================================== */


.booking-summary-badge {


    margin-bottom:18px;


    padding:10px 14px;


    border-radius:10px;


    background:#f0f9ff;


    color:#0284c7;


    font-size:14px;


    font-weight:700;


}







/* ==========================================================
 PASSENGER SCROLL AREA
=========================================================== */


.passenger-input-container {


    overflow-y:auto;


    flex:1;


    padding-right:5px;


    margin-bottom:20px;


}







/* ==========================================================
 PASSENGER CARD
=========================================================== */


.passenger-form-group {


    padding:18px;


    margin-bottom:15px;


    border-radius:14px;


    background:#f8fafc;


    border:1px solid #e2e8f0;


}



.passenger-form-group h3 {


    margin:0 0 14px;


    font-size:15px;


    color:#334155;


}







/* ==========================================================
 FORM ROWS
=========================================================== */


.form-row {


    display:flex;


    gap:12px;


    margin-bottom:12px;


}



.input-field {


    flex:1;


    display:flex;


    flex-direction:column;


    gap:5px;


}



.input-field label {


    font-size:12px;


    font-weight:700;


    color:#475569;


}





.booking-box input {


    width:100%;


    box-sizing:border-box;


    padding:11px 12px;


    border-radius:8px;


    border:1px solid #cbd5e1;


    font-size:14px;


    color:#0f172a;


}



.booking-box input:focus-visible {


    outline:

    3px solid rgba(14,165,233,.25);


    border-color:#0ea5e9;


}







/* ==========================================================
 PAYMENT SUMMARY FUTURE AREA
=========================================================== */

.payment-summary {

    margin-bottom:15px;
    padding:15px;
    border-radius:10px;
    background:#f8fafc;

}



/* ==========================================================
 CONFIRM BUTTON
=========================================================== */

.confirm-booking {

    width:100%;
    height:48px;
    border:none;
    border-radius:10px;
    background:#0ea5e9;
    color:white;
    font-size:16px;
    font-weight:800;
    cursor:pointer;

}


.confirm-booking:hover {

    background:#0284c7;

}


.confirm-booking:focus-visible {

    outline:3px solid rgba(14,165,233,.35);

}



/* ==========================================================
 SPINNER
=========================================================== */

.spinner {

    width:32px;
    height:32px;
    margin:0 auto 15px;
    border-radius:50%;
    border:4px solid #e0f2fe;
    border-top-color:#0ea5e9;
    animation:spin .8s linear infinite;

}


@keyframes spin {

    to {

        transform:rotate(360deg);

    }

}



/* ==========================================================
 DESKTOP FOOTER ALIGNMENT
=========================================================== */

.flight-form-footer {

    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:12px;
    margin-top:16px;
    position:relative;

}



/* ==========================================================
 TABLET SEARCH LAYOUT
=========================================================== */

@media(max-width:920px){


    .flight-leg {

        grid-template-columns:
        1fr
        46px
        1fr;

    }


    .date-field {

        grid-column:span 1;

    }


}



/* ==========================================================
 MOBILE SEARCH LAYOUT
=========================================================== */

@media(max-width:600px){


    .shonapay-flight-card {

        padding:18px;

    }



    .flight-leg {

        grid-template-columns:1fr;
        gap:14px;

    }



    .swap-airports {

        justify-self:center;
        margin:0 auto;
        transform:rotate(90deg);

    }



    .flight-form-footer {

        flex-direction:column;
        gap:12px;
        align-items:stretch;

    }



    .traveller-selector,
    .search-flight-button {

        width:100%;

    }



    .traveller-popup {

        left:0;
        right:auto;
        width:100%;
        box-sizing:border-box;

    }



    .flight-main-row {

        flex-direction:column;
        align-items:stretch;

    }



    .flight-pricing-block {

        align-items:stretch;

    }



    .form-row {

        flex-direction:column;

    }



    .booking-box {

        padding:20px;

    }

}