/* ============================================
   CheapDummyFlight - DummyFlights.com Inspired Design
   Brand: Teal #1BA8A0 | Orange #F47920
   ============================================ */

:root {
    --teal:        #1BA8A0;
    --teal-dark:   #148f88;
    --teal-light:  #e8f8f7;
    --orange:      #F47920;
    --orange-dark: #d9681a;
    --dark:        #1e293b;
    --text:        #334155;
    --muted:       #64748b;
    --border:      #e2e8f0;
    --bg-light:    #f8fafc;
    --bg-blue:     #f0f9ff;
    --white:       #ffffff;
    --shadow-sm:   0 1px 3px rgba(0,0,0,.07);
    --shadow-md:   0 4px 16px rgba(0,0,0,.09);
    --shadow-lg:   0 8px 32px rgba(0,0,0,.12);
    --radius:      12px;
    --radius-lg:   20px;
    --font:        'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --transition:  200ms ease;
}

/* ─── Reset ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; max-width: 100%; overflow-x: clip; }
body  { font-family: var(--font); color: var(--text); background: #fff; line-height: 1.6; max-width: 100%; overflow-x: clip; }
img   { max-width: 100%; display: block; }
a     { color: var(--teal); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--teal-dark); }

/* ─── Typography ─────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-weight:700; line-height:1.25; color:var(--dark); }
h1 { font-size:2.6rem; }
h2 { font-size:2rem; }
h3 { font-size:1.4rem; }
@media(max-width:768px){
    h1{font-size:1.8rem;}
    h2{font-size:1.5rem;}
    h3{font-size:1.2rem;}
}

/* ─── Top Bar ───────────────────────────── */
.top-bar { background: var(--dark); color:#cbd5e1; font-size:.8rem; padding:.45rem 0; }
.top-bar a { color:#cbd5e1; }
.top-bar a:hover { color:#fff; }

/* ─── Navbar ────────────────────────────── */
.navbar {
    background:#fff !important;
    border-bottom:1px solid var(--border);
    padding:.4rem 0;
    transition: box-shadow var(--transition), background-color var(--transition);
}
.navbar.scrolled {
    box-shadow: var(--shadow-md);
    background: rgba(255,255,255,.85) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
/* Reinforce the header's sticky-top behavior regardless of CDN Bootstrap version */
header.sticky-top { position: sticky !important; top: 0; }
.navbar-brand img { height:110px !important; width:auto !important; max-height:none !important; }
.nav-link { color:var(--text) !important; font-weight:500; font-size:.92rem; padding:.5rem .9rem !important; }
.nav-link:hover, .nav-link.active { color:var(--teal) !important; }
.btn-book-now {
    background: var(--teal);
    color:#fff !important;
    border-radius:50px;
    padding:.45rem 1.4rem !important;
    font-weight:600;
    font-size:.88rem;
    transition: background var(--transition), transform var(--transition);
}
.btn-book-now:hover { background:var(--teal-dark); transform:translateY(-1px); }

/* ─── Buttons ───────────────────────────── */
.btn { font-weight:600; border-radius:8px; transition: all var(--transition); }
.btn-teal  { background:var(--teal);  color:#fff; border:none; }
.btn-teal:hover  { background:var(--teal-dark); color:#fff; transform:translateY(-2px); box-shadow:0 6px 20px rgba(27,168,160,.3); }
.btn-orange { background:var(--orange); color:#fff; border:none; }
.btn-orange:hover { background:var(--orange-dark); color:#fff; transform:translateY(-2px); }
.btn-outline-teal { border:2px solid var(--teal); color:var(--teal); background:transparent; }
.btn-outline-teal:hover { background:var(--teal); color:#fff; }
.btn-primary  { background:var(--teal)!important;  border-color:var(--teal)!important; }
.btn-primary:hover { background:var(--teal-dark)!important; border-color:var(--teal-dark)!important; }
.btn-success  { background:var(--orange)!important; border-color:var(--orange)!important; }
.btn-success:hover { background:var(--orange-dark)!important; border-color:var(--orange-dark)!important; }
.btn-outline-primary { color:var(--teal)!important; border-color:var(--teal)!important; }
.btn-outline-primary:hover { background:var(--teal)!important; color:#fff!important; }
.btn-lg { padding:.7rem 2rem; font-size:1rem; }

/* ─── Hero ──────────────────────────────── */
.hero-section {
    background: linear-gradient(135deg, #e8f8f7 0%, #f0f9ff 60%, #fff7ed 100%);
    padding: 3.5rem 0 2.5rem;
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.hero-section::before {
    content:'';
    position:absolute; top:-100px; right:-100px;
    width:500px; height:500px;
    background: radial-gradient(circle, rgba(27,168,160,.12) 0%, transparent 70%);
    border-radius:50%;
    pointer-events:none;
    z-index:-1;
}
.hero-section::after {
    content:'';
    position:absolute; bottom:-80px; left:-80px;
    width:400px; height:400px;
    background: radial-gradient(circle, rgba(244,121,32,.08) 0%, transparent 70%);
    border-radius:50%;
    pointer-events:none;
    z-index:-1;
}
.hero-title { font-size:2.4rem; font-weight:800; color:var(--dark); line-height:1.2; }
.hero-title .highlight { color:var(--orange); }
.hero-subtitle { font-size:1.05rem; color:var(--muted); line-height:1.7; }
@media(max-width:768px){ .hero-section{padding:2rem 0;} .hero-title{font-size:1.7rem;} }

/* ─── Booking Form Card ─────────────────── */
.booking-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    border: 1px solid var(--border);
}
.booking-tabs { display:flex; background:#f8fafc; border-bottom:1px solid var(--border); }
.booking-tab {
    flex:1; text-align:center;
    padding:.85rem 1rem;
    font-weight:600; font-size:.85rem;
    color:var(--muted); cursor:pointer;
    border-bottom:3px solid transparent;
    transition: all var(--transition);
}
.booking-tab.active { color:var(--teal); border-bottom-color:var(--teal); background:#fff; }
.booking-tab:hover { color:var(--teal); }
.booking-form-body { padding:1.5rem; }
.trip-type-tabs { display:flex; gap:.5rem; margin-bottom:1.2rem; }
.trip-btn {
    padding:.4rem 1.1rem; border-radius:50px;
    border:2px solid var(--border);
    font-size:.8rem; font-weight:600; color:var(--muted);
    cursor:pointer; background:#fff;
    transition: all var(--transition);
}
.trip-btn.active, .trip-btn:hover { border-color:var(--teal); color:var(--teal); background:var(--teal-light); }
.form-group-booking { position:relative; }

/* ─── Booking Card v2 (buydummytickets layout, teal/orange theme) ─── */
.booking-card-head { padding:1.35rem 1.5rem 1.1rem; border-bottom:1px solid var(--border); }
.booking-card-title { font-size:1.2rem; font-weight:800; color:var(--dark); margin-bottom:1rem; }
.booking-stepper { display:flex; align-items:flex-start; }
.step-item { display:flex; flex-direction:column; align-items:center; gap:.35rem; flex-shrink:0; }
.step-circle {
    width:26px; height:26px; border-radius:50%;
    background:#e2e8f0; color:var(--muted);
    display:flex; align-items:center; justify-content:center;
    font-size:.75rem; font-weight:700;
    transition: all var(--transition);
}
.step-item.active .step-circle { background:var(--teal); color:#fff; }
.step-label { font-size:.68rem; font-weight:600; color:var(--muted); white-space:nowrap; }
.step-item.active .step-label { color:var(--teal); }
.step-line { flex:1 1 auto; height:2px; background:var(--border); margin:12px .5rem 0; }

.booking-card-body { padding:1.5rem; }
.booking-form-body-inner {}

.segmented-tabs {
    display:flex; gap:.35rem;
    background:#f8fafc; padding:.35rem;
    border-radius:10px; margin-bottom:1.25rem;
}
.segmented-tab {
    flex:1; text-align:center;
    padding:.55rem .5rem; border-radius:8px;
    font-weight:600; font-size:.82rem;
    color:var(--muted); cursor:pointer;
    transition: all var(--transition);
}
.segmented-tab.active { background:var(--teal); color:#fff; box-shadow:0 2px 8px rgba(27,168,160,.25); }
.segmented-tab:hover:not(.active) { color:var(--teal); }

.trip-type-radios { display:flex; gap:1.4rem; flex-wrap:wrap; }
.radio-pill { display:flex; align-items:center; gap:.45rem; font-size:.85rem; font-weight:600; color:var(--text); cursor:pointer; }
.radio-pill input[type=radio] { width:16px; height:16px; accent-color:var(--teal); cursor:pointer; margin:0; }

.stacked-field { position:relative; }
.input-with-icon { position:relative; }
.input-with-icon .form-control-booking { padding-right:2.6rem; }
.swap-btn-inline {
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    width:30px; height:30px; border-radius:50%;
    background:var(--teal-light); color:var(--teal);
    border:none; display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:.85rem;
    transition: all var(--transition);
}
.swap-btn-inline:hover { background:var(--teal); color:#fff; transform:translateY(-50%) rotate(180deg); }

.cta-btn {
    width:100%; background:var(--orange); color:#fff;
    border:none; border-radius:10px;
    padding:.85rem 1.5rem; font-weight:700; font-size:1rem;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; margin-top:.5rem;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.cta-btn:hover { background:var(--orange-dark); transform:translateY(-2px); box-shadow:0 6px 20px rgba(244,121,32,.3); }

@media(max-width:480px){
    .step-label { display:none; }
    .booking-stepper { justify-content:space-between; }
}
.form-label-sm { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:.3rem; display:block; }
.form-control-booking {
    width:100%; padding:.65rem 1rem;
    border:1.5px solid var(--border);
    border-radius:8px; font-size:.9rem;
    font-family:var(--font);
    transition: border-color var(--transition);
    outline:none;
    background:#fff;
}
.form-control-booking:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(27,168,160,.1); }
.swap-btn {
    width:36px; height:36px;
    background:var(--teal); color:#fff;
    border-radius:50%; border:none;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition: transform var(--transition), background var(--transition);
    flex-shrink:0;
}
.swap-btn:hover { background:var(--teal-dark); transform:rotate(180deg); }
.search-btn {
    background:var(--orange); color:#fff;
    border:none; border-radius:8px;
    padding:.7rem 2rem; font-weight:700;
    font-size:1rem; cursor:pointer;
    width:100%; margin-top:.5rem;
    transition: background var(--transition), transform var(--transition);
}
.search-btn:hover { background:var(--orange-dark); transform:translateY(-2px); }

/* ─── Services Tab (Booking Card) ───────── */
.service-option-list { display:flex; flex-direction:column; gap:.65rem; }
.service-option {
    display:flex; align-items:center; gap:.9rem;
    padding:.75rem .9rem;
    border:1.5px solid var(--border); border-radius:10px;
    cursor:pointer; text-decoration:none; color:inherit;
    transition: all var(--transition);
}
.service-option:hover { border-color:var(--teal); background:var(--teal-light); transform:translateX(2px); }
.service-icon-wrap {
    width:42px; height:42px; border-radius:10px;
    background:var(--teal-light); color:var(--teal);
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; flex-shrink:0;
}
.service-option-info { flex:1 1 auto; min-width:0; }
.service-option-info h6 { font-size:.88rem; font-weight:700; color:var(--dark); margin-bottom:.15rem; line-height:1.3; }
.service-option-info span { font-size:.76rem; color:var(--muted); display:block; line-height:1.3; }
.service-option-price { font-weight:800; color:var(--orange); font-size:.95rem; white-space:nowrap; flex-shrink:0; }
.service-option > .bi-chevron-right { color:var(--muted); font-size:.8rem; flex-shrink:0; }

/* ─── Feature Badges ────────────────────── */
.feature-badge {
    display:inline-flex; align-items:center; gap:.4rem;
    background:#fff; border:1.5px solid var(--border);
    border-radius:50px; padding:.35rem .9rem;
    font-size:.8rem; font-weight:600; color:var(--text);
}
.feature-badge i { color:var(--teal); }

/* ─── Airline Logos Strip ───────────────── */
.airline-strip { background:#fff; padding:1.2rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden; }
.airline-logos-track { display:flex; gap:2.5rem; align-items:center; animation:scroll-logos 30s linear infinite; white-space:nowrap; }
.airline-logos-track img { height:32px; width:auto; opacity:.65; filter:grayscale(40%); transition:opacity var(--transition); }
.airline-logos-track img:hover { opacity:1; filter:none; }
@keyframes scroll-logos { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ─── Section Base ──────────────────────── */
.section-padding { padding:5rem 0; }
.section-title { text-align:center; margin-bottom:3rem; }
.section-title h2 { margin-bottom:.8rem; }
.section-title p  { color:var(--muted); font-size:1.05rem; }
.badge-label {
    display:inline-block; background:var(--teal-light);
    color:var(--teal); font-size:.72rem; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase;
    padding:.3rem .9rem; border-radius:50px;
    margin-bottom:1rem;
}
.badge-label-orange { background:#fff7ed; color:var(--orange); }

/* ─── Info / Feature Cards ──────────────── */
.info-box {
    background:#fff; border:1.5px solid var(--border);
    border-radius:var(--radius); padding:1.5rem;
    display:flex; align-items:flex-start; gap:1rem;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.info-box:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--teal); }
.info-box .icon-wrap {
    width:48px; height:48px; border-radius:12px;
    background:var(--teal-light); color:var(--teal);
    display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; flex-shrink:0;
}
.info-box.success .icon-wrap { background:#fef9f0; color:var(--orange); }

/* ─── How It Works ──────────────────────── */
.process-step {
    text-align:center; padding:2rem 1.5rem;
    position:relative;
}
.process-step::after {
    content:'→'; position:absolute;
    right:-12px; top:2.2rem;
    font-size:1.5rem; color:var(--border);
    font-weight:300;
}
.process-step:last-child::after { display:none; }
.process-icon {
    width:72px; height:72px; border-radius:50%;
    background:var(--teal-light); color:var(--teal);
    display:flex; align-items:center; justify-content:center;
    font-size:1.8rem; margin:0 auto 1.2rem;
    border:2px solid rgba(27,168,160,.2);
    transition: all var(--transition);
}
.process-step:hover .process-icon { background:var(--teal); color:#fff; transform:scale(1.08); }
.process-step .step-num {
    position:absolute; top:.5rem; left:50%; transform:translateX(-50%);
    width:22px; height:22px; background:var(--teal); color:#fff;
    border-radius:50%; font-size:.65rem; font-weight:800;
    display:flex; align-items:center; justify-content:center;
}

/* ─── Step List (dark bg) ───────────────── */
.step-item {
    display:flex; align-items:center; gap:1rem;
    background:rgba(255,255,255,.07); border-radius:var(--radius);
    padding:1rem 1.2rem;
    border:1px solid rgba(255,255,255,.1);
}
.step-num-circle {
    width:46px; height:46px; border-radius:50%;
    background:var(--teal); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:1rem; flex-shrink:0;
}
.step-num-circle.done { background:var(--orange); }

/* ─── Pricing Cards ─────────────────────── */
.pricing-card {
    border:1.5px solid var(--border); border-radius:var(--radius-lg);
    overflow:hidden; transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.pricing-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--teal); }
.pricing-card.featured { border-color:var(--teal); box-shadow:0 0 0 3px rgba(27,168,160,.1); }
.pricing-header {
    background:linear-gradient(135deg, var(--teal), var(--teal-dark));
    color:#fff; padding:2rem 1.5rem;
}
.pricing-header h3 { color:#fff; font-size:1rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:.6rem; }
.pricing-price { font-size:3rem; font-weight:800; line-height:1; }
.pricing-price .currency { font-size:1.5rem; vertical-align:super; font-weight:700; }
.pricing-price .period { font-size:.85rem; font-weight:500; opacity:.85; }
.pricing-card.featured .pricing-header { background:linear-gradient(135deg, var(--orange), #e05a0a); }
.pricing-body { padding:1.8rem 1.5rem; }
.pricing-feature {
    display:flex; align-items:flex-start; gap:.65rem;
    padding:.5rem 0; border-bottom:1px solid #f1f5f9; font-size:.9rem;
}
.pricing-feature:last-child { border-bottom:none; }
.pricing-feature i { color:var(--teal); margin-top:.15rem; flex-shrink:0; }
.boarding-badge {
    display:inline-block; background:var(--teal-light);
    color:var(--teal); font-size:.65rem; font-weight:800;
    letter-spacing:.15em; text-transform:uppercase;
    padding:.25rem .8rem; border-radius:4px;
    margin-bottom:.8rem; border:1px dashed var(--teal);
}

/* ─── Testimonials ──────────────────────── */
.testimonial-card {
    background:#fff; border:1.5px solid var(--border);
    border-radius:var(--radius-lg); padding:2rem;
    transition: transform var(--transition), box-shadow var(--transition);
    position:relative;
}
.testimonial-card::before {
    content:'"'; position:absolute; top:1.2rem; left:1.5rem;
    font-size:4rem; color:var(--teal); opacity:.15;
    font-family:Georgia,serif; line-height:1;
}
.testimonial-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.testimonial-stars { color:#f59e0b; margin-bottom:.8rem; font-size:.9rem; }
.testimonial-author { display:flex; align-items:center; gap:.8rem; margin-top:1.2rem; }
.testimonial-avatar {
    width:44px; height:44px; border-radius:50%;
    background:linear-gradient(135deg, var(--teal), var(--teal-dark));
    color:#fff; font-weight:800; font-size:1rem;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}

/* ─── CTA Section ───────────────────────── */
.cta-section {
    background:linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 60%, #0d7a73 100%);
    padding:4rem 0; color:#fff; position:relative; overflow:hidden;
}
.cta-section::before {
    content:''; position:absolute; top:-80px; right:-80px;
    width:300px; height:300px;
    background:rgba(255,255,255,.05); border-radius:50%;
}
.cta-price { font-size:4.5rem; font-weight:900; color:#fff; line-height:1; }

/* ─── FAQ ───────────────────────────────── */
.faq-section { background:var(--bg-light); }
.accordion-item { border:1.5px solid var(--border); border-radius:var(--radius)!important; margin-bottom:.75rem; overflow:hidden; }
.accordion-button { font-weight:600; font-size:.95rem; color:var(--dark); background:#fff; }
.accordion-button:not(.collapsed) { color:var(--teal); background:var(--teal-light); box-shadow:none; }
.accordion-button::after { filter:invert(42%) sepia(60%) saturate(400%) hue-rotate(145deg); }

/* ─── Stats Strip ───────────────────────── */
.stats-strip { background:var(--dark); padding:2.5rem 0; }
.stat-item { text-align:center; }
.stat-number { font-size:2.2rem; font-weight:800; color:var(--teal); line-height:1; }
.stat-label  { font-size:.8rem; color:#94a3b8; font-weight:500; margin-top:.3rem; letter-spacing:.05em; text-transform:uppercase; }

/* ─── Ticket Preview Box ────────────────── */
.ticket-preview {
    background:#fff; border-radius:var(--radius-lg);
    border:1.5px dashed var(--border);
    box-shadow:var(--shadow-md);
    position:relative; overflow:hidden;
}
.ticket-preview::before {
    content:'';
    position:absolute; left:-12px; top:50%; transform:translateY(-50%);
    width:24px; height:24px; background:var(--bg-light); border-radius:50%;
    border:1.5px dashed var(--border);
}
.ticket-preview::after {
    content:'';
    position:absolute; right:-12px; top:50%; transform:translateY(-50%);
    width:24px; height:24px; background:var(--bg-light); border-radius:50%;
    border:1.5px dashed var(--border);
}

/* ─── Blog Cards ────────────────────────── */
.blog-card { border-radius:var(--radius-lg); overflow:hidden; border:1.5px solid var(--border); transition:transform var(--transition), box-shadow var(--transition); }
.blog-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.blog-card img { height:200px; object-fit:cover; width:100%; }
.blog-card-body { padding:1.5rem; }
.blog-badge { display:inline-block; background:var(--teal-light); color:var(--teal); font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:.25rem .7rem; border-radius:50px; margin-bottom:.8rem; }

/* ─── Footer ────────────────────────────── */
footer { background:var(--dark); color:#cbd5e1; }
footer h3, footer h4, footer h5 { color:#fff; }
.footer-link { color:#94a3b8; font-size:.88rem; }
.footer-link:hover { color:var(--teal); }
.social-icon { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.07); color:#94a3b8; display:inline-flex; align-items:center; justify-content:center; transition:all var(--transition); }
.social-icon:hover { background:var(--teal); color:#fff; }

/* ─── Back to Top ───────────────────────── */
#backToTop { width:44px; height:44px; background:var(--teal); color:#fff; border-radius:50%; bottom:2rem; right:2rem; border:none; box-shadow:var(--shadow-md); z-index:999; }
#backToTop:hover { background:var(--teal-dark); }

/* ─── Utilities ─────────────────────────── */
.text-teal   { color:var(--teal)!important; }
.text-orange { color:var(--orange)!important; }
.bg-teal     { background:var(--teal)!important; color:#fff; }
.bg-teal-light { background:var(--teal-light)!important; }
.border-teal { border-color:var(--teal)!important; }
.rounded-xl  { border-radius:var(--radius)!important; }
.rounded-2xl { border-radius:var(--radius-lg)!important; }
.shadow-teal { box-shadow:0 8px 24px rgba(27,168,160,.25)!important; }

/* ─── Announcement Banner ───────────────── */
.announcement-banner {
    background:linear-gradient(90deg, var(--orange), #e85d10);
    color:#fff; text-align:center;
    padding:.6rem 1rem; font-size:.85rem; font-weight:600;
}

/* ─── Mobile ────────────────────────────── */
@media(max-width:768px){
    .section-padding { padding:3rem 0; }
    .process-step::after { display:none; }
    .pricing-price { font-size:2.2rem; }
    .cta-price { font-size:3rem; }
    .booking-form-body { padding:1rem; }
    .stat-number { font-size:1.8rem; }
}