/* Responsive */

@media (max-width: 1024px) {
    .services-grid { grid-template-columns: repeat(3, 1fr); }
    .destination-cards { grid-template-columns: repeat(2, 1fr); }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .testi-grid { grid-template-columns: 1fr 1fr; }
    .team-grid { grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-title { font-size: 42px; }
    .section-header h2 { font-size: 32px; }
    .search-form { grid-template-columns: 1fr 1fr; }
    .search-field { border-right: none; border-bottom: 1px solid var(--gray-100); }
    .btn-search { grid-column: span 2; padding: 14px; }
    .service-detail-card { grid-template-columns: 80px 1fr; gap: 20px; padding: 28px; }
    .service-detail-card .btn { grid-column: span 2; justify-self: start; }
    .two-col { grid-template-columns: 1fr; gap: 32px; }
    .contact-info-grid { grid-template-columns: 1fr; }
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .logo-img { height: 52px; }
    .gallery > div { height: 320px; }

    /* Navbar contact details: hide on tablet/mobile to avoid crowding (Book Now stays) */
    .nav-contact, .nav-social { display: none; }
}

@media (max-width: 768px) {
    .container { padding: 0 18px; }
    .top-bar { display: none; }

    .nav-links {
        position: fixed; top: 70px; right: -100%;
        background: var(--white); width: 78%; height: calc(100vh - 70px);
        flex-direction: column; padding: 30px 24px;
        box-shadow: -10px 0 30px rgba(0,0,0,0.1);
        transition: right 0.4s cubic-bezier(0.22, 1, 0.36, 1); gap: 8px;
    }
    .nav-links.active { right: 0; }
    .nav-links a { display: block; padding: 12px 0; border-bottom: 1px solid var(--gray-100); }
    .menu-toggle { display: block; }
    .nav-actions .btn { padding: 8px 16px; font-size: 13px; }
    .logo-img { height: 46px; }

    .hero { min-height: 560px; padding: 60px 0 100px; }
    .hero-title { font-size: 32px; }
    .hero-subtitle { font-size: 15px; margin-bottom: 32px; }

    .search-tabs { overflow-x: auto; }
    .search-tab { padding: 14px 16px; font-size: 13px; white-space: nowrap; }
    .search-tab i { display: block; margin: 0 0 4px; }
    .search-form { grid-template-columns: 1fr; }
    .search-field { border-right: none; border-bottom: 1px solid var(--gray-100); padding: 14px 18px; }
    .btn-search { grid-column: 1; margin: 8px; padding: 14px; justify-content: center; }

    .services-strip { padding: 40px 0; }
    .services-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .service-item { padding: 18px 10px; }
    .service-icon { width: 52px; height: 52px; font-size: 22px; }

    .destinations-section, .why-us, .testimonials, section.section-block { padding: 50px 0; }
    .section-header h2 { font-size: 26px; }
    .section-header p { font-size: 14px; }
    .section-header { margin-bottom: 32px; }

    .destination-cards { grid-template-columns: 1fr; gap: 20px; }
    .why-grid { grid-template-columns: 1fr; gap: 16px; }
    .testi-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: 1fr; }

    .page-banner { padding: 50px 0; }
    .page-banner h1 { font-size: 28px; }
    .page-banner p { font-size: 14px; }

    .cta-inner { flex-direction: column; text-align: center; }
    .cta-text h2 { font-size: 24px; }
    .cta-buttons { width: 100%; justify-content: center; }

    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .footer { padding-top: 40px; }

    .service-detail-card { grid-template-columns: 1fr; text-align: center; padding: 24px; }
    .service-detail-card .big-icon { margin: 0 auto; }
    .service-detail-card .feature-list { justify-content: center; }
    .service-detail-card .btn { grid-column: 1; justify-self: center; }

    .form-row { grid-template-columns: 1fr; gap: 0; }
    .stats-row { grid-template-columns: 1fr 1fr; }

    .booking-box { position: static; }
    .gallery > div { height: 220px; }

    .floating-buttons { bottom: 16px; right: 16px; }
    .float-btn { width: 48px; height: 48px; font-size: 20px; }
    .back-to-top { bottom: 16px; left: 16px; width: 40px; height: 40px; font-size: 14px; }

    .price-table { overflow-x: auto; }
    .price-table table { min-width: 600px; }
    .price-table-header { padding: 16px 18px; }
    .price-table-header h3 { font-size: 17px; }

    .inquiry-box { padding: 24px; }
    .inquiry-box .head h3 { font-size: 22px; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 26px; }
    .logo-img { height: 42px; }
    .nav-actions .btn { display: none; }
    .services-grid { grid-template-columns: 1fr 1fr; }
    .destination-toggle { max-width: 100%; }
    .toggle-btn { padding: 10px 14px; font-size: 13px; }
}

/* ---- Mobile safety net (prevents "zoomed-out desktop" / sideways scroll) ---- */
@media (max-width: 768px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    /* Never let media or embeds push the page wider than the screen */
    img, video, iframe, table, pre { max-width: 100%; }
    /* Long words / URLs / emails wrap instead of forcing width */
    p, h1, h2, h3, a, span, li { overflow-wrap: anywhere; word-break: break-word; }
    /* The homepage booking widget fits within the screen padding */
    .fs-wrap { max-width: 100%; }
    /* Stop iOS from auto-zooming when a form field is focused */
    input, select, textarea { font-size: 16px; }
}

/* ============================================================
   MOBILE FIELD & LAYOUT FIXES  (added: proper mobile behaviour)
   Goal: every form field, dropdown, button and section renders
   full-width, tappable and readable on phones/tablets.
   ============================================================ */

/* ---------- All form fields: consistent, full-width, no iOS zoom ---------- */
@media (max-width: 768px) {
    /* 16px prevents iOS Safari from auto-zooming when a field is focused */
    .form-control,
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="date"], input[type="number"], select, textarea {
        width: 100%;
        font-size: 16px !important;
        min-height: 48px;                 /* comfortable tap target */
        padding: 12px 14px;
        -webkit-appearance: none;         /* consistent native styling */
        appearance: none;
    }
    textarea.form-control, textarea { min-height: 110px; }
    .form-group { margin-bottom: 16px; }
    .form-group label { font-size: 13px; }

    /* Stack every two-column form row into one column */
    .form-row { grid-template-columns: 1fr !important; gap: 0 !important; }

    /* Custom dropdown arrow (since we removed native appearance) */
    select.form-control {
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2020%2020'%20fill%3D'%23334155'%3E%3Cpath%20d%3D'M5%208l5%205%205-5'%20stroke%3D'%23334155'%20stroke-width%3D'2'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 18px;
        padding-right: 40px;
    }

    /* Buttons inside forms go full width & tappable */
    form .btn, .btn-lg, .btn-search { width: 100%; min-height: 50px; justify-content: center; }
}

/* ---------- Package detail: booking box & tabs ---------- */
@media (max-width: 768px) {
    /* Booking box: unstick and give it breathing room below the content */
    .booking-box { position: static !important; top: auto; margin-top: 28px; padding: 22px; }
    /* Its two action buttons stack full width */
    #pkgBookingForm .btn { width: 100%; }
    /* Meta chips wrap neatly */
    #pkgMeta { gap: 10px 18px; font-size: 13px; }
    #pkgName { font-size: 26px; }
    /* Detail tabs scroll sideways instead of squishing */
    .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
    .tab-btn { flex: 0 0 auto; }
    /* Breadcrumb wraps */
    .breadcrumb { flex-wrap: wrap; row-gap: 4px; font-size: 13px; }
}

/* ---------- Homepage booking widget (flight-search / fs-form) ---------- */
@media (max-width: 768px) {
    .fs-wrap { padding: 14px; border-radius: 14px; }
    .fs-form { grid-template-columns: 1fr !important; gap: 10px; }
    .fs-field { padding: 12px 14px; }
    .fs-field input, .fs-field select { font-size: 16px; }
    .fs-trip { gap: 8px; }
    .fs-trip button { min-width: 0; flex: 1 1 auto; padding: 12px 8px; font-size: 13px; }
    .fs-tabs { gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; justify-content: flex-start; }
    .fs-tab { flex: 0 0 auto; padding: 10px 14px; font-size: 13px; }
    .fs-search-btn { width: 100%; justify-content: center; }
    .fs-head { flex-direction: column; }
    .fs-head-right { width: 100%; }
    .fs-swap .fs-swap-btn { right: 8px; top: 8px; }   /* keep swap button inside field */
    .fs-offer { flex-direction: column; align-items: flex-start; gap: 10px; }
    .fs-offer .book { width: 100%; text-align: center; }
}

/* ---------- Inquiry page: services checkbox grid ---------- */
@media (max-width: 560px) {
    /* The inline 2-col checkbox grid → single column so labels never clip */
    #inquiryForm div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    #inquiryForm input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; }
}

/* ---------- Old .search-box widget (if present) ---------- */
@media (max-width: 768px) {
    .search-box { border-radius: 14px; }
    .search-form { grid-template-columns: 1fr !important; padding: 6px; }
    .search-field { border-right: none !important; border-bottom: 1px solid var(--gray-100); }
    .search-field:last-of-type { border-bottom: none; }
    .search-field input, .search-field select { font-size: 16px; }
}

/* ---------- Small phones: tighten headings & spacing ---------- */
@media (max-width: 400px) {
    .container { padding: 0 14px; }
    #pkgName { font-size: 23px; }
    .booking-price .price { font-size: 26px; }
    .btn, .btn-lg { font-size: 15px; }
    .fs-wrap { padding: 12px; }
}

/* ---------- Universal: never allow a field or row to overflow the screen ---------- */
@media (max-width: 768px) {
    input, select, textarea, .form-control, .fs-field, .booking-box, form { max-width: 100%; box-sizing: border-box; }
    /* date inputs can render oddly on iOS — normalise height/appearance */
    input[type="date"] { line-height: 1.2; }
}

/* ============================================================
   INLINE-GRID MOBILE OVERRIDES  (fixes "sections not showing all
   content on phones"). Inline style="grid-template-columns:..."
   attributes WIN over media queries, so we must use !important
   to collapse them on small screens. Loaded last, so this wins.
   ============================================================ */

/* --- Tablet: soften 3/4-col inline grids to 2 columns --- */
@media (min-width: 481px) and (max-width: 1024px) {
    .two-col                                      { grid-template-columns: 1fr !important; gap: 32px !important; }
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
}

/* --- Phones: stack EVERY multi-column grid into a single column --- */
@media (max-width: 768px) {
    .two-col,
    .destination-cards,
    .testi-grid,
    .team-grid,
    .why-grid,
    .services-grid,
    [style*="grid-template-columns: repeat(2"],
    [style*="grid-template-columns:repeat(2"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: 1fr 2fr"],
    [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Stat blocks read better as a 2-up on phones */
    .stats-row,
    [style*="grid-template-columns: repeat(4, 1fr)"].stats-row { grid-template-columns: 1fr 1fr !important; }

    /* Grid children must be allowed to shrink, or long content overflows */
    .two-col > *, .destination-cards > *, .testi-grid > *,
    .team-grid > *, .why-grid > *, .services-grid > * { min-width: 0 !important; }

    /* About-page CEO / round images never exceed the screen */
    .two-col img { max-width: 100% !important; height: auto !important; }

    /* Hero can grow with content instead of clipping it */
    .hero { min-height: auto !important; }
    .hero-content { overflow: visible !important; }

    /* Background-image side panels (e.g. about hero) get a sane mobile height */
    [style*="background-image"][style*="min-height: 420px"],
    [style*="background-image"][style*="min-height:420px"] { min-height: 240px !important; }
}

/* --- Very small phones: single-column stat blocks too --- */
@media (max-width: 380px) {
    .stats-row { grid-template-columns: 1fr !important; }
}

/* ===== Payment partners strip — phones/tablets ===== */
@media (max-width: 600px) {
    .payment-partners { padding: 20px 0 24px; }
    .payment-partners .pp-title { font-size: 12px; margin-bottom: 14px; }
    .payment-partners .pp-logos { gap: 10px 12px; }
    .payment-partners .pp-logo { height: 46px; padding: 8px 12px; }
    .payment-partners .pp-logo img { max-height: 28px; max-width: 92px; }
}

/* ===== Relations & Recognitions strip — phones/tablets ===== */
@media (max-width: 600px) {
    .relations-recognitions { padding: 20px 0 24px; }
    .relations-recognitions .rr-title { font-size: 12px; margin-bottom: 14px; }
    .relations-recognitions .rr-logos { gap: 10px 12px; }
    .relations-recognitions .rr-logo { height: 46px; padding: 8px 12px; }
    .relations-recognitions .rr-logo img { max-height: 28px; max-width: 92px; }
}