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

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Arial, sans-serif;
    background: #f8f8f6;
    color: #111;
    line-height: 1.5;
}

button,
input,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}


/* HEADER */

header {
    height: 76px;
    padding: 0 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-bottom: 1px solid #eaeaea;
    position: relative;
    z-index: 100;
}

.logo {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 4px;
}

nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

nav a {
    font-size: 13px;
    font-weight: 500;
    color: #222;
    transition: opacity 0.2s ease;
}

nav a:hover {
    opacity: 0.5;
}


/* HOME */

.hero {
    min-height: 620px;
    padding: 90px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background:
        radial-gradient(
            circle at 50% 20%,
            #ffffff 0%,
            #f7f7f5 55%,
            #eeeeeb 100%
        );
}

.hero-content {
    width: 100%;
    max-width: 1000px;
}

.hero h1 {
    max-width: 850px;
    margin: 0 auto 20px;
    font-size: clamp(48px, 7vw, 86px);
    line-height: 0.98;
    letter-spacing: -5px;
    font-weight: 600;
}

.hero p {
    max-width: 600px;
    margin: 0 auto 45px;
    color: #777;
    font-size: 16px;
}


/* SEARCH PANEL */

.search-panel {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 22px;
    padding: 10px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.09);
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 1fr 1fr 1fr auto;
    align-items: center;
    gap: 6px;
    text-align: left;
}

.search-field {
    position: relative;
    padding: 12px 15px;
    min-width: 0;
}

.search-field label {
    display: block;
    margin-bottom: 5px;
    color: #888;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.search-field input,
.search-field select {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: #111;
    font-size: 14px;
    font-weight: 500;
}

.search-field input::placeholder {
    color: #999;
}

.search-button {
    height: 58px;
    padding: 0 25px;
    border: none;
    border-radius: 15px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s ease, transform 0.2s ease;
}

.search-button:hover {
    background: #292929;
    transform: translateY(-1px);
}


/* SWAP */

.swap {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: #fff;
    font-size: 15px;
    z-index: 5;
}

.swap:hover {
    background: #f5f5f5;
}


/* AUTOCOMPLETE */

.suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    z-index: 999;
    display: none;
}

.suggestion {
    padding: 13px 15px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.suggestion:hover {
    background: #f6f6f6;
}

.suggestion strong {
    font-size: 13px;
}

.suggestion span {
    color: #888;
    font-size: 11px;
}


/* TRAVELLERS */

.traveller-wrapper {
    position: relative;
}

#travellerMenu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 270px;
    padding: 18px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    z-index: 999;
    display: none;
}

.traveller-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.traveller-row:last-child {
    border-bottom: none;
}

.traveller-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.traveller-info strong {
    font-size: 13px;
}

.traveller-info span {
    color: #999;
    font-size: 11px;
}

.traveller-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.traveller-controls button {
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: #fff;
    font-size: 15px;
}

.traveller-controls button:hover {
    background: #f5f5f5;
}


/* DESTINATIONS */

.destinations {
    max-width: 1180px;
    margin: 0 auto;
    padding: 90px 40px;
}

.section-label {
    margin-bottom: 12px;
    color: #888;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.destinations h2 {
    margin-bottom: 35px;
    font-size: 42px;
    letter-spacing: -2px;
}

.destination-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.destination-card {
    min-height: 240px;
    padding: 25px;
    border-radius: 20px;
    background: #ddd;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.destination-card h3 {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 23px;
}

.destination-card p {
    position: relative;
    z-index: 2;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
}


/* SEARCH RESULTS */

.results-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 55px 30px 90px;
}

.results-header {
    margin-bottom: 35px;
}

.results-header h1 {
    margin-bottom: 8px;
    font-size: 38px;
    letter-spacing: -1.5px;
}

.results-header p {
    color: #777;
    font-size: 14px;
}

.results-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 25px;
    align-items: start;
}


/* FILTERS */

.flight-filters {
    padding: 22px;
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 18px;
}

.flight-filters h3 {
    margin-bottom: 20px;
    font-size: 15px;
}

.filter-group {
    margin-bottom: 25px;
}

.filter-group-title {
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 700;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.filter-button,
.sort-button {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 6px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    background: #fff;
    text-align: left;
    font-size: 12px;
    transition: background 0.2s ease, color 0.2s ease;
}

.filter-button:hover,
.sort-button:hover,
.filter-button.active,
.sort-button.active {
    background: #111;
    color: #fff;
    border-color: #111;
}

#priceRange {
    width: 100%;
}

#priceValue {
    font-weight: 600;
}


/* FLIGHT RESULTS */

.flight-results {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.flight-card {
    padding: 24px;
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 18px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 25px;
    align-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.flight-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
}

.flight-route {
    display: flex;
    align-items: center;
    gap: 22px;
}

.flight-time {
    display: flex;
    flex-direction: column;
}

.flight-time strong {
    font-size: 22px;
}

.flight-time span {
    color: #888;
    font-size: 11px;
}

.flight-arrow {
    color: #aaa;
    font-size: 20px;
}

.flight-info {
    display: flex;
    gap: 20px;
    margin-top: 12px;
    color: #888;
    font-size: 11px;
}

.flight-price {
    text-align: right;
}

.flight-price strong {
    display: block;
    margin-bottom: 10px;
    font-size: 25px;
}

.select-flight {
    padding: 11px 18px;
    border: none;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.select-flight:hover {
    background: #292929;
}

.no-results {
    padding: 50px;
    text-align: center;
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 18px;
}

.no-results h3 {
    margin-bottom: 8px;
}

.no-results p {
    color: #888;
    font-size: 13px;
}

/* ========================================
   BOOKING PAGE
======================================== */

.booking-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 80px 40px 100px;
}

.booking-header {
    max-width: 720px;
    margin-bottom: 50px;
}

.booking-header .section-label {
    margin-bottom: 15px;
}

.booking-header h1 {
    margin-bottom: 18px;
    font-size: 48px;
    line-height: 1.05;
    letter-spacing: -2.5px;
    font-weight: 600;
}

.booking-header > p:last-child {
    color: #777;
    font-size: 15px;
    line-height: 1.7;
}

.booking-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.8fr);
    gap: 30px;
    align-items: start;
}


/* ========================================
   BOOKING FORM
======================================== */

.booking-form {
    padding: 38px;
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 24px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.04);
}

.booking-form h2 {
    margin-bottom: 30px;
    font-size: 22px;
    font-weight: 600;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 22px;
}

.form-group label {
    color: #444;
    font-size: 12px;
    font-weight: 600;
}

.form-group input,
.form-group select {
    width: 100%;
    height: 54px;
    padding: 0 15px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: #fff;
    color: #111;
    outline: none;
    font-size: 14px;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.form-group input::placeholder {
    color: #aaa;
}

.form-group input:focus,
.form-group select:focus {
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}


/* ========================================
   CONTINUE BUTTON
======================================== */

.continue-button {
    width: 100%;
    height: 50px;
    margin-top: 18px;
    border: none;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.continue-button:hover {
    background: #292929;
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.continue-button:active {
    transform: translateY(0);
}


/* ========================================
   BOOKING SUMMARY
======================================== */

.booking-summary {
    position: sticky;
    top: 30px;
    padding: 32px;
    margin-top: 30px;
    background: #111;
    color: #fff;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.booking-summary h2 {
    margin-bottom: 30px;
    font-size: 20px;
    font-weight: 600;
}

.summary-route {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
}

.summary-route > div:first-child,
.summary-route > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.summary-route > div:last-child {
    text-align: right;
}

.summary-route strong {
    font-size: 30px;
    letter-spacing: -1px;
}

.summary-route span {
    color: #999;
    font-size: 12px;
}

.summary-arrow {
    color: #777;
    font-size: 20px;
}

.summary-line {
    height: 1px;
    margin: 28px 0;
    background: #292929;
}

.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 17px;
}

.summary-row span {
    color: #999;
    font-size: 13px;
}

.summary-row strong {
    font-size: 13px;
    font-weight: 600;
    text-align: right;
}

.total-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.total-price span {
    color: #999;
    font-size: 13px;
}

.total-price strong {
    font-size: 30px;
    letter-spacing: -1px;
}


/* ========================================
   PAYMENT PAGE
======================================== */

.payment-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 80px 40px 100px;
}

.payment-header {
    max-width: 720px;
    margin-bottom: 50px;
}

.payment-header .section-label {
    margin-bottom: 15px;
}

.payment-header h1 {
    margin-bottom: 18px;
    font-size: 48px;
    line-height: 1.05;
    letter-spacing: -2.5px;
    font-weight: 600;
}

.payment-header p {
    color: #777;
    font-size: 15px;
    line-height: 1.7;
}

.payment-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.8fr);
    gap: 30px;
    align-items: start;
}

.payment-form {
    padding: 38px;
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 24px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.04);
}

.payment-form h2 {
    margin-bottom: 30px;
    font-size: 22px;
}

.payment-form label {
    display: block;
    margin-bottom: 8px;
    color: #444;
    font-size: 12px;
    font-weight: 600;
}

.payment-form input {
    width: 100%;
    height: 54px;
    padding: 0 15px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: #fff;
    outline: none;
    font-size: 14px;
}

.payment-form input:focus {
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.payment-field {
    margin-bottom: 20px;
}

.payment-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.payment-summary {
    position: sticky;
    top: 30px;
    padding: 32px;
    background: #111;
    color: #fff;
    border-radius: 24px;
}

.payment-summary h2 {
    margin-bottom: 25px;
    font-size: 20px;
}

.payment-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 25px;
    margin-top: 25px;
    border-top: 1px solid #292929;
}

.payment-total span {
    color: #999;
    font-size: 13px;
}

.payment-total strong {
    font-size: 30px;
}

.pay-button {
    width: 100%;
    height: 56px;
    margin-top: 25px;
    border: none;
    border-radius: 14px;
    background: #fff;
    color: #111;
    font-size: 14px;
    font-weight: 600;
}

.pay-button:hover {
    background: #ededeb;
}


/* ========================================
   CONFIRMATION PAGE
======================================== */

.confirmation-page {
    min-height: calc(100vh - 76px);
    padding: 70px 25px 100px;
    display: flex;
    justify-content: center;
    background:
        radial-gradient(
            circle at 50% 0%,
            #fff 0%,
            #f5f5f3 70%
        );
}

.confirmation-card {

    width: 100%;

    max-width: 760px;

    padding: 45px;

    background: rgba(
        255,
        255,
        255,
        0.94
    );

    border: 1px solid #e5e5e5;

    border-radius: 28px;

    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);

    text-align: center;

    position: relative;

    z-index: 2;

    backdrop-filter: blur(12px);

}
.success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #111;
    color: #fff;
    font-size: 28px;
}

.confirmation-card h1 {
    margin-bottom: 14px;
    font-size: 42px;
    line-height: 1.05;
    letter-spacing: -2px;
}

.confirmation-text {
    max-width: 520px;
    margin: 0 auto 35px;
    color: #777;
    font-size: 14px;
    line-height: 1.7;
}


/* ========================================
   CONFIRMATION PASSENGER
======================================== */

.confirmed-passenger {
    padding: 20px;
    margin-bottom: 15px;
    background: #f7f7f5;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}

.confirmed-passenger span {
    color: #888;
    font-size: 12px;
}

.confirmed-passenger strong {
    font-size: 14px;
}


/* ========================================
   BOOKING REFERENCE
======================================== */

.booking-reference {
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 15px;
    background: #111;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}

.booking-reference div:first-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.booking-reference span {
    color: #999;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.booking-reference strong {
    font-size: 22px;
    letter-spacing: 2px;
}

.booking-status {
    padding: 7px 11px;
    border-radius: 20px;
    background: #fff;
    color: #111;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}


/* ========================================
   CONFIRMED TRIP
======================================== */

.confirmed-trip {
    margin-top: 15px;
    padding: 30px 20px;
    border: 1px solid #e8e8e8;
    border-radius: 18px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
}

.confirmed-trip > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
}

.confirmed-trip > div:last-child {
    text-align: right;
}

.confirmed-trip span {
    color: #999;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.confirmed-trip strong {
    font-size: 32px;
    letter-spacing: -1px;
}

.confirmed-trip small {
    color: #777;
    font-size: 12px;
}

.confirmed-arrow {
    color: #aaa;
    font-size: 24px;
}


/* ========================================
   CONFIRMATION DETAILS
======================================== */

.confirmation-details {
    margin-top: 15px;
    padding: 22px;
    border: 1px solid #e8e8e8;
    border-radius: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    text-align: left;
}

.confirmation-details > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.confirmation-details span {
    color: #999;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.confirmation-details strong {
    font-size: 13px;
}


/* ========================================
   CONFIRMED PRICE
======================================== */

.confirmed-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding: 22px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.confirmed-price span {
    color: #777;
    font-size: 13px;
}

.confirmed-price strong {
    font-size: 28px;
    letter-spacing: -1px;
}


/* ========================================
   EMAIL
======================================== */

.confirmation-email {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 20px;
    text-align: left;
}

.confirmation-email span {
    color: #999;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.confirmation-email strong {
    font-size: 13px;
}


/* ========================================
   QR CODE
======================================== */

.qr-section {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #eee;
    text-align: center;
}

.booking-qr {
    width: 150px;
    min-height: 150px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.booking-qr img {
    display: block;
    width: 150px;
    height: 150px;
}

.qr-section p {
    color: #999;
    font-size: 11px;
}


/* ========================================
   CONFIRMATION BUTTONS
======================================== */

.confirmation-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 30px;
}

.confirmation-actions button {
    height: 52px;
    border: none;
    border-radius: 13px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.confirmation-actions button:hover {
    background: #292929;
}

.confirmation-actions .secondary-button {
    background: #f2f2f0;
    color: #111;
}

.confirmation-actions .secondary-button:hover {
    background: #e8e8e6;
}


/* ========================================
   PRINT
======================================== */

@media print {

    header,
    .confirmation-actions,
    .home-button {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .confirmation-page {

    min-height: 100vh;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    position: relative;

}

    .confirmation-card {
        max-width: 100%;
        border: none;
        box-shadow: none;
    }
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1000px) {

    .search-panel {
        grid-template-columns: 1fr 1fr;
    }

    .search-button {
        width: 100%;
    }

    .destination-grid {
        grid-template-columns: 1fr 1fr;
    }

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 850px) {

    header {
        padding: 0 25px;
    }

    nav {
        gap: 16px;
    }

    .booking-page {
        padding: 55px 20px 70px;
    }

    .booking-layout {
        grid-template-columns: 1fr;
    }

    .booking-summary {
        position: static;
    }

    .payment-page {
        padding: 55px 20px 70px;
    }

    .payment-layout {
        grid-template-columns: 1fr;
    }

    .payment-summary {
        position: static;
    }

    .results-layout {
        grid-template-columns: 1fr;
    }

    .flight-filters {
        order: 1;
    }

    .flight-results {
        order: 2;
    }

}


/* ========================================
   SMALL MOBILE
======================================== */

@media (max-width: 650px) {

    header {
        height: 65px;
        padding: 0 18px;
    }

    .logo {
        font-size: 19px;
    }

    nav {
        gap: 12px;
    }

    nav a {
        font-size: 11px;
    }

    nav a:nth-child(2),
    nav a:nth-child(3) {
        display: none;
    }


    .hero {
        min-height: auto;
        padding: 65px 18px 75px;
    }

    .hero h1 {
        font-size: 48px;
        letter-spacing: -3px;
    }

    .hero p {
        font-size: 14px;
        margin-bottom: 30px;
    }


    .search-panel {
        grid-template-columns: 1fr;
        border-radius: 18px;
        padding: 8px;
    }

    .search-field {
        padding: 13px;
    }


    .destinations {
        padding: 60px 20px;
    }

    .destinations h2 {
        font-size: 34px;
    }

    .destination-grid {
        grid-template-columns: 1fr;
    }


    .booking-page {
        padding: 40px 15px 60px;
    }

    .booking-header {
        margin-bottom: 30px;
    }

    .booking-header h1 {
        font-size: 34px;
        letter-spacing: -1.5px;
    }

    .booking-form {
        padding: 24px 20px;
        border-radius: 18px;
    }

    .booking-summary {
        padding: 24px 20px;
        border-radius: 18px;
    }

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


    .payment-page {
        padding: 40px 15px 60px;
    }

    .payment-header {
        margin-bottom: 30px;
    }

    .payment-header h1 {
        font-size: 34px;
        letter-spacing: -1.5px;
    }

    .payment-form {
        padding: 24px 20px;
        border-radius: 18px;
    }

    .payment-summary {
        padding: 24px 20px;
        border-radius: 18px;
    }

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


    .flight-card {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .flight-price {
        text-align: left;
    }

    .select-flight {
        width: 100%;
    }


    .confirmation-page {
        padding: 35px 15px 60px;
    }

    .confirmation-card {
        padding: 28px 18px;
        border-radius: 20px;
    }

    .confirmation-card h1 {
        font-size: 34px;
        letter-spacing: -1.5px;
    }

    .confirmed-trip {
        padding: 22px 15px;
    }

    .confirmed-trip strong {
        font-size: 25px;
    }

    .confirmation-details {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .booking-reference {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .confirmation-actions {
        grid-template-columns: 1fr;
    }

}


/* ========================================
   EXTRA SMALL
======================================== */

@media (max-width: 420px) {

    .hero h1 {
        font-size: 40px;
    }

    .summary-route strong {
        font-size: 25px;
    }

    .confirmed-trip strong {
        font-size: 22px;
    }

}

/* ==========================================
   YVORA HOME PAGE
   NEW PREMIUM STYLE
========================================== */

body {
    background: #f7f7f5;
    color: #111;
}


/* ==========================================
   NAVBAR
========================================== */

header {
    height: 82px;
    padding: 0 6%;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid #e9e9e7;

    display: flex;
    align-items: center;
    justify-content: space-between;

    position: relative;
    z-index: 1000;
}

header .logo {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 5px;
}

header nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

header nav a {
    color: #555;
    font-size: 13px;
    font-weight: 500;
    transition: color .2s ease;
}

header nav a:hover {
    color: #000;
}

.signup-button {
    padding: 11px 20px;

    border: 1px solid #111;
    border-radius: 10px;

    background: #111;
    color: #fff;

    font-size: 12px;
    font-weight: 600;

    transition: all .2s ease;
}

.signup-button:hover {
    background: #fff;
    color: #111;
}


/* ==========================================
   HERO
========================================== */

.hero {
    min-height: 690px;

    padding: 105px 5% 85px;

    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    background:
        radial-gradient(
            circle at 50% 0%,
            #ffffff 0%,
            #f8f8f6 45%,
            #eeeeeb 100%
        );

    overflow: visible;
}

.hero-content {
    width: 100%;
    max-width: 900px;

    text-align: center;

    position: relative;
    z-index: 2;
}

.hero-small {
    margin-bottom: 18px;

    color: #888;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 3px;
}

.hero h1 {
    margin: 0;

    font-size: clamp(58px, 8vw, 100px);

    line-height: .94;

    letter-spacing: -6px;

    font-weight: 600;

    color: #111;
}

.hero-description {
    max-width: 560px;

    margin: 25px auto 0;

    color: #777;

    font-size: 15px;

    line-height: 1.7;
}


/* ==========================================
   SEARCH PANEL
========================================== */

.search-panel {
    width: min(1120px, 94%);

    margin-top: 58px;

    padding: 9px;

    background: rgba(255, 255, 255, .97);

    border: 1px solid #e4e4e2;

    border-radius: 22px;

    box-shadow:
        0 25px 80px rgba(0, 0, 0, .10);

    position: relative;
    z-index: 100;
}


/* TRIP TYPE */

.trip-type {
    display: flex;

    align-items: center;

    gap: 5px;

    padding: 5px;

    margin-bottom: 8px;

    width: fit-content;

    background: #f4f4f2;

    border-radius: 10px;
}

.trip-option {
    padding: 8px 14px;

    border: none;

    border-radius: 7px;

    background: transparent;

    color: #777;

    font-size: 11px;

    font-weight: 600;
}

.trip-option.active {
    background: #111;
    color: #fff;
}


/* SEARCH FIELDS */

.search-fields {
    display: grid;

    grid-template-columns:
        1.25fr
        auto
        1.25fr
        1fr
        1fr
        1fr
        auto;

    align-items: center;

    gap: 5px;
}

.search-field {
    min-width: 0;

    padding: 13px 15px;

    position: relative;

    border-radius: 13px;

    transition: background .2s ease;
}

.search-field:hover {
    background: #f7f7f5;
}

.search-field label {
    display: block;

    margin-bottom: 5px;

    color: #999;

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.3px;
}

.search-field input {
    width: 100%;

    border: none;

    outline: none;

    background: transparent;

    color: #111;

    font-size: 13px;

    font-weight: 500;
}

.search-field input::placeholder {
    color: #999;
}


/* SWAP */

.swap {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    border: 1px solid #ddd;

    border-radius: 50%;

    background: #fff;

    color: #111;

    font-size: 16px;

    display: flex;

    align-items: center;
    justify-content: center;

    transition: all .2s ease;
}

.swap:hover {
    background: #111;
    color: #fff;
    border-color: #111;
    transform: rotate(180deg);
}


/* SEARCH BUTTON */

.search-button {
    height: 52px;

    padding: 0 25px;

    border: none;

    border-radius: 13px;

    background: #111;

    color: #fff;

    font-size: 12px;

    font-weight: 600;

    transition: all .2s ease;
}

.search-button:hover {
    background: #292929;

    transform: translateY(-1px);
}


/* ==========================================
   AUTOCOMPLETE
========================================== */

.suggestions {
    position: absolute;

    left: 0;
    right: 0;

    top: calc(100% + 8px);

    background: #fff;

    border: 1px solid #e4e4e4;

    border-radius: 14px;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .12);

    overflow: hidden;

    z-index: 5000;

    display: none;
}

.suggestion {
    padding: 13px 15px;

    display: flex;
    flex-direction: column;

    gap: 3px;

    cursor: pointer;

    transition: background .15s ease;
}

.suggestion:hover {
    background: #f5f5f3;
}

.suggestion strong {
    color: #111;
    font-size: 13px;
}

.suggestion span {
    color: #999;
    font-size: 11px;
}


/* ==========================================
   TRAVELLER MENU
========================================== */

.traveller-menu {
    position: absolute;

    right: 0;

    top: calc(100% + 10px);

    width: 290px;

    padding: 18px;

    background: #fff;

    border: 1px solid #e5e5e5;

    border-radius: 18px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, .14);

    z-index: 5000;

    display: none;
}

.traveller-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 14px 0;

    border-bottom: 1px solid #eee;
}

.traveller-row:last-of-type {
    border-bottom: none;
}

.traveller-row > div:first-child {
    display: flex;

    flex-direction: column;

    gap: 2px;
}

.traveller-row strong {
    font-size: 13px;
}

.traveller-row span {
    color: #999;

    font-size: 11px;
}

.counter {
    display: flex;

    align-items: center;

    gap: 12px;
}

.counter strong {
    min-width: 18px;

    text-align: center;
}

.counter-button {
    width: 30px;
    height: 30px;

    border: 1px solid #ddd;

    border-radius: 50%;

    background: #fff;

    font-size: 16px;

    display: flex;

    align-items: center;
    justify-content: center;
}

.counter-button:hover {
    background: #111;
    color: #fff;
    border-color: #111;
}

.traveller-done {
    width: 100%;

    height: 40px;

    margin-top: 14px;

    border: none;

    border-radius: 10px;

    background: #111;

    color: #fff;

    font-size: 12px;

    font-weight: 600;
}


/* ==========================================
   DESTINATIONS
========================================== */

.destinations {
    max-width: 1200px;

    margin: 0 auto;

    padding: 110px 5%;
}

.section-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 35px;
}

.section-label {
    margin-bottom: 10px;

    color: #999;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2.5px;
}

.section-header h2 {
    font-size: 42px;

    line-height: 1;

    letter-spacing: -2px;

    font-weight: 600;
}

.section-header > a {
    color: #555;

    font-size: 12px;

    font-weight: 600;
}

.section-header > a:hover {
    color: #000;
}


/* DESTINATION GRID */

.destination-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 16px;
}

.destination-card {
    overflow: hidden;

    background: #fff;

    border: 1px solid #e6e6e4;

    border-radius: 20px;

    cursor: pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.destination-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .10);
}

.destination-image {
    height: 260px;

    padding: 22px;

    display: flex;

    align-items: flex-end;

    color: #fff;

    font-size: 24px;

    font-weight: 600;

    letter-spacing: -.5px;

    background-size: cover;

    background-position: center;

    position: relative;
}

.destination-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.38),
            transparent 55%
        );
}

.destination-image {
    position: relative;
}

.destination-image.paris {
    background-image:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.35),
            rgba(0, 0, 0, 0.05)
        ),
        url("https://images.unsplash.com/photo-1502602898657-3e91760cbb34?auto=format&fit=crop&w=1200&q=85");
}

.destination-image.london {
    background-image:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.35),
            rgba(0, 0, 0, 0.05)
        ),
        url("https://images.unsplash.com/photo-1513635269975-59663e0ac1ad?auto=format&fit=crop&w=1200&q=85");
}

.destination-image.dubai {
    background-image:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.30),
            rgba(0, 0, 0, 0.05)
        ),
        url("https://images.unsplash.com/photo-1512453979798-5ea266f8880c?auto=format&fit=crop&w=1200&q=85");
}

.destination-image.istanbul {
    background-image:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.35),
            rgba(0, 0, 0, 0.05)
        ),
        url("https://images.unsplash.com/photo-1524231757912-21f4fe3a7200?auto=format&fit=crop&w=1200&q=85");
}

.destination-image::first-line {
    position: relative;
    z-index: 2;
}

.destination-info {
    padding: 18px 20px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;
}

.destination-info h3 {
    margin-bottom: 3px;

    font-size: 15px;

    font-weight: 600;
}

.destination-info p {
    color: #999;

    font-size: 11px;
}

.destination-info > strong {
    white-space: nowrap;

    font-size: 12px;

    font-weight: 600;
}


/* ==========================================
   WHY YVORA
========================================== */

.why-yvora {
    max-width: 1200px;

    margin: 0 auto;

    padding: 40px 5% 110px;
}

.features {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 16px;
}

.feature {
    padding: 32px;

    background: #fff;

    border: 1px solid #e6e6e4;

    border-radius: 20px;
}

.feature-icon {
    width: 48px;
    height: 48px;

    margin-bottom: 25px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: #f2f2f0;

    font-size: 21px;
}

.feature h3 {
    margin-bottom: 10px;

    font-size: 17px;

    font-weight: 600;
}

.feature p {
    color: #777;

    font-size: 13px;

    line-height: 1.7;
}


/* ==========================================
   CTA
========================================== */

.cta {
    margin: 0 5% 80px;

    padding: 90px 30px;

    border-radius: 28px;

    background: #111;

    color: #fff;

    text-align: center;
}

.cta p {
    margin-bottom: 14px;

    color: #888;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2.5px;
}

.cta h2 {
    margin-bottom: 30px;

    font-size: clamp(38px, 5vw, 60px);

    line-height: 1;

    letter-spacing: -3px;

    font-weight: 600;
}

.cta button {
    height: 50px;

    padding: 0 25px;

    border: none;

    border-radius: 12px;

    background: #fff;

    color: #111;

    font-size: 12px;

    font-weight: 600;

    transition: all .2s ease;
}

.cta button:hover {
    background: #e8e8e6;

    transform: translateY(-2px);
}


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

footer {
    padding: 35px 6%;

    border-top: 1px solid #e5e5e3;

    background: #fff;

    display: flex;

    align-items: center;
    justify-content: space-between;
}

footer .logo {
    font-size: 18px;

    letter-spacing: 4px;
}

footer p {
    color: #999;

    font-size: 12px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px 24px;
}

.footer-links a {
    color: #555;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.footer-links a:hover { color: #111; text-decoration: underline; }

/* COMPANY AND LEGAL PAGES */
.info-page { min-height: 100vh; background: #f6f6f3; color: #111; }
.info-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px clamp(22px, 6vw, 96px); border-bottom: 1px solid #e5e5df; background: #fff;
}
.info-header .logo, .info-header nav a { color: #111; text-decoration: none; }
.info-header nav { display: flex; align-items: center; gap: 26px; font-weight: 700; }
.info-main { width: min(900px, calc(100% - 40px)); margin: 0 auto; padding: 72px 0 96px; }
.info-hero { margin-bottom: 40px; }
.info-hero h1 { margin: 10px 0 18px; font-size: clamp(44px, 8vw, 78px); line-height: .98; letter-spacing: -.055em; }
.info-hero > p:last-child { max-width: 720px; color: #666; font-size: 18px; line-height: 1.7; }
.info-card { margin-top: 20px; padding: clamp(26px, 5vw, 46px); border: 1px solid #deded8; border-radius: 22px; background: #fff; }
.info-card h2 { margin: 0 0 14px; font-size: 28px; }
.info-card h3 { margin: 28px 0 8px; font-size: 19px; }
.info-card p, .info-card li { color: #565650; line-height: 1.75; }
.info-card ul { padding-left: 20px; }
.info-card a { color: #111; font-weight: 800; }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.contact-option { display: block; padding: 26px; border: 1px solid #deded8; border-radius: 18px; color: #111; text-decoration: none; background: #fff; }
.contact-option span { display: block; margin-bottom: 10px; color: #777; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.contact-option strong { font-size: 20px; overflow-wrap: anywhere; }
.contact-option:hover { border-color: #111; transform: translateY(-2px); }
.info-note { margin-top: 28px; color: #777; font-size: 14px; }

/* HELP CENTER */
.help-main { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 72px 0 100px; }
.help-hero { padding: clamp(44px, 7vw, 88px); border-radius: 30px; background: #101b16; color: #fff; text-align: center; }
.help-hero .section-label { color: #95c8ae; }
.help-hero h1 { margin: 12px 0 18px; font-size: clamp(48px, 8vw, 88px); line-height: .96; letter-spacing: -.055em; }
.help-hero > p:not(.section-label) { max-width: 650px; margin: 0 auto; color: #c5d3cb; font-size: 18px; line-height: 1.65; }
.help-search { display: flex; align-items: center; gap: 14px; width: min(650px, 100%); margin: 34px auto 0; padding: 0 20px; border-radius: 14px; background: #fff; color: #111; box-sizing: border-box; text-align: left; }
.help-search span { font-size: 27px; line-height: 1; }
.help-search input { width: 100%; min-height: 60px; border: 0; outline: 0; background: transparent; color: #111; font: inherit; font-size: 16px; }
.faq-categories { display: flex; gap: 10px; margin: 30px 0 70px; overflow-x: auto; scrollbar-width: none; }
.faq-categories::-webkit-scrollbar { display: none; }
.faq-categories button { flex: 0 0 auto; padding: 12px 18px; border: 1px solid #d7d7d1; border-radius: 999px; background: #fff; color: #555; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.faq-categories button:hover, .faq-categories button.active { border-color: #111; background: #111; color: #fff; }
.faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(45px, 8vw, 105px); }
.faq-heading { position: sticky; top: 30px; align-self: start; }
.faq-heading h2 { margin: 12px 0 0; font-size: clamp(35px, 4.5vw, 56px); line-height: 1.04; letter-spacing: -.045em; }
.faq-list details { border-bottom: 1px solid #d7d7d1; }
.faq-list details:first-child { border-top: 1px solid #d7d7d1; }
.faq-list summary { display: grid; grid-template-columns: 1fr 34px; align-items: center; gap: 20px; padding: 25px 0; font-size: 19px; font-weight: 800; line-height: 1.4; list-style: none; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: #e6eee9; color: #147a51; font-size: 21px; transition: transform .2s ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details > p { margin: -7px 54px 25px 0; color: #5c5c56; line-height: 1.75; }
.faq-list details > p a { color: #111; font-weight: 800; }
.faq-list details[hidden] { display: none; }
.faq-empty { padding: 30px; border-radius: 16px; background: #fff; color: #666; text-align: center; }
.help-contact { display: flex; align-items: center; justify-content: space-between; gap: 34px; margin-top: 90px; padding: clamp(32px, 6vw, 64px); border-radius: 25px; background: #dcece3; }
.help-contact h2 { max-width: 690px; margin: 10px 0 0; font-size: clamp(30px, 4vw, 50px); line-height: 1.05; letter-spacing: -.04em; }
.help-contact > a { flex: 0 0 auto; padding: 17px 24px; border-radius: 11px; background: #111; color: #fff; font-weight: 800; text-decoration: none; }

@media (max-width: 700px) {
    footer { align-items: flex-start; flex-direction: column; gap: 24px; }
    .footer-links { justify-content: flex-start; }
    .info-header { align-items: flex-start; flex-direction: column; gap: 18px; }
    .info-header nav { flex-wrap: wrap; gap: 14px 20px; }
    .contact-grid { grid-template-columns: 1fr; }
    .help-main { width: min(100% - 28px, 1180px); padding-top: 28px; }
    .help-hero { padding: 48px 20px; border-radius: 22px; }
    .faq-categories { margin-bottom: 50px; }
    .faq-layout { grid-template-columns: 1fr; gap: 35px; }
    .faq-heading { position: static; }
    .help-contact { align-items: flex-start; flex-direction: column; }
}

/* ABOUT YVORA */
.about-page main { overflow: hidden; }
.about-wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.about-hero { position: relative; min-height: clamp(440px, 62vw, 720px); overflow: hidden; background: #183322; }
.about-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 17, 12, .77) 0%, rgba(4, 17, 12, .32) 55%, rgba(4, 17, 12, .08) 100%); }
.about-hero-copy { position: absolute; inset: auto auto clamp(54px, 10vw, 110px) max(24px, calc((100% - 1180px) / 2)); width: min(820px, calc(100% - 48px)); color: #fff; }
.about-hero-copy p { margin: 0 0 18px; font-size: 13px; font-weight: 800; letter-spacing: .16em; }
.about-hero-copy h1 { margin: 0; font-size: clamp(48px, 7.5vw, 96px); line-height: .96; letter-spacing: -.055em; }
.about-story { padding: clamp(72px, 10vw, 130px) 0; }
.about-story > h2, .about-beliefs h2, .about-process h2, .about-disclaimer h2, .about-cta h2 { margin: 10px 0 42px; font-size: clamp(36px, 5vw, 62px); line-height: 1.03; letter-spacing: -.045em; }
.about-story > h2 { max-width: 840px; }
.about-story-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 8vw, 110px); }
.about-story-grid p { color: #555; font-size: 17px; line-height: 1.8; }
.about-story-grid .about-lead { margin: 0; color: #111; font-size: clamp(24px, 3vw, 34px); font-weight: 700; line-height: 1.35; }
.about-story-grid div p:first-child { margin-top: 0; }
.about-beliefs { padding: clamp(72px, 9vw, 115px) 0; background: #101b16; color: #fff; }
.about-beliefs .section-label { color: #95c8ae; }
.about-beliefs h2 { max-width: 820px; }
.belief-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.belief-grid article { min-height: 270px; padding: 30px; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; background: rgba(255,255,255,.04); }
.belief-grid span { color: #95c8ae; font-size: 13px; font-weight: 800; letter-spacing: .12em; }
.belief-grid h3 { margin: 38px 0 15px; font-size: 25px; }
.belief-grid p { color: #bcc9c2; line-height: 1.7; }
.about-numbers { padding: clamp(78px, 10vw, 130px) 0; background: #0d1210; color: #fff; }
.about-numbers .section-label { color: #85c6a5; }
.numbers-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 44px; }
.numbers-heading h2 { max-width: 850px; margin: 10px 0 0; font-size: clamp(38px, 5.5vw, 68px); line-height: 1; letter-spacing: -.05em; }
.numbers-controls { display: flex; flex: 0 0 auto; gap: 10px; }
.numbers-controls button { width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: transparent; color: #fff; font-size: 21px; cursor: pointer; }
.numbers-controls button:hover { border-color: #fff; background: #fff; color: #111; }
.numbers-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 38%); gap: 18px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.numbers-track::-webkit-scrollbar { display: none; }
.number-card { position: relative; min-height: 360px; padding: 34px; overflow: hidden; border-radius: 24px; background: #f4f2ea; color: #111; scroll-snap-align: start; }
.number-card::after { position: absolute; right: -34px; bottom: -50px; width: 180px; height: 180px; border-radius: 44% 56% 65% 35%; background: rgba(20,122,81,.15); content: ""; transform: rotate(28deg); }
.number-card strong { display: block; font-size: clamp(58px, 7vw, 94px); line-height: .95; letter-spacing: -.065em; }
.number-card h3 { max-width: 330px; margin: 76px 0 13px; font-size: clamp(23px, 2.5vw, 32px); line-height: 1.08; }
.number-card p { position: relative; z-index: 1; max-width: 350px; margin: 0; color: #5c625e; line-height: 1.6; }
.number-card-trips { background: #cee8da; }
.number-card-total { background: #dfe2f3; }
.number-card-payments { background: #eadfce; }
.about-process { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(42px, 9vw, 120px); padding: clamp(76px, 10vw, 130px) 0; }
.about-process h2 { margin-bottom: 0; }
.process-list { margin: 0; padding: 0; list-style: none; }
.process-list li { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 27px 0; border-bottom: 1px solid #d8d8d1; }
.process-list li:first-child { padding-top: 0; }
.process-list strong { font-size: 22px; }
.process-list span { color: #62625c; line-height: 1.7; }
.about-destinations { padding: clamp(78px, 10vw, 130px) 0; border-top: 1px solid #deded8; background: #fff; }
.greeting-heading { min-height: 1.05em; margin: 10px 0 20px; font-size: clamp(58px, 9vw, 112px); line-height: .95; letter-spacing: -.065em; }
.greeting-word { display: inline-block; opacity: 1; transform: translateY(0); transition: opacity .22s ease, transform .22s ease; }
.greeting-word.is-changing { opacity: 0; transform: translateY(12px); }
.destinations-intro { max-width: 660px; margin: 0 0 45px; color: #62625c; font-size: 18px; line-height: 1.7; }
.about-destination-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.about-destination-card { overflow: hidden; border: 1px solid #deded8; border-radius: 22px; background: #f6f6f3; }
.about-destination-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .45s ease; }
.about-destination-card:hover img { transform: scale(1.025); }
.about-destination-card > div { padding: 26px; }
.about-destination-card p { margin: 0 0 10px; color: #147a51; font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.about-destination-card h3 { margin: 0 0 26px; font-size: clamp(30px, 3vw, 43px); line-height: 1; letter-spacing: -.04em; }
.about-destination-card a { color: #111; font-size: 14px; font-weight: 800; text-decoration: none; }
.about-destination-card a:hover { text-decoration: underline; }
.about-disclaimer { padding: clamp(70px, 9vw, 110px) 0; background: #e3efe8; }
.about-disclaimer .about-wrap { max-width: 1000px; }
.about-disclaimer h2 { max-width: 960px; margin-bottom: 28px; }
.about-disclaimer p:not(.section-label) { max-width: 820px; color: #465149; font-size: 17px; line-height: 1.8; }
.about-disclaimer a { display: inline-block; margin-top: 18px; color: #111; font-weight: 800; text-decoration: none; }
.about-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: clamp(65px, 8vw, 100px) 0; }
.about-cta h2 { margin-bottom: 0; }
.about-cta > a { flex: 0 0 auto; padding: 17px 26px; border-radius: 12px; background: #111; color: #fff; font-weight: 800; text-decoration: none; }
.about-footer { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); align-items: start; gap: 42px; padding-top: 55px; padding-bottom: 55px; }
.about-footer > div:not(.about-footer-brand) { display: grid; gap: 12px; }
.about-footer strong { margin-bottom: 5px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.about-footer a { color: #666; font-size: 14px; text-decoration: none; }
.about-footer a:hover { color: #111; text-decoration: underline; }

@media (max-width: 820px) {
    .about-story-grid, .about-process { grid-template-columns: 1fr; }
    .belief-grid { grid-template-columns: 1fr; }
    .belief-grid article { min-height: 0; }
    .numbers-track { grid-auto-columns: minmax(285px, 78%); }
    .about-destination-grid { grid-template-columns: 1fr; }
    .about-cta { align-items: flex-start; flex-direction: column; }
    .about-footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
    .about-wrap { width: min(100% - 32px, 1180px); }
    .about-hero-copy { width: calc(100% - 32px); left: 16px; }
    .process-list li { grid-template-columns: 1fr; gap: 8px; }
    .numbers-heading { align-items: flex-start; flex-direction: column; }
    .numbers-track { grid-auto-columns: 92%; }
    .number-card { min-height: 330px; padding: 26px; }
    .number-card h3 { margin-top: 62px; }
    .about-footer { grid-template-columns: 1fr; }
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 1000px) {

    .search-fields {
        grid-template-columns:
            1fr 1fr;
    }

    .swap {
        display: none;
    }

    .destination-grid {
        grid-template-columns:
            1fr 1fr;
    }

}


@media (max-width: 700px) {

    header {
        height: 70px;

        padding: 0 20px;
    }

    header nav {
        display: none;
    }

    .signup-button {
        padding: 10px 15px;
    }


    .hero {
        padding:
            70px
            15px
            65px;
    }

    .hero h1 {
        font-size: 54px;

        letter-spacing: -3px;
    }

    .hero-description {
        font-size: 14px;
    }


    .search-panel {
        width: 100%;

        margin-top: 40px;

        border-radius: 18px;
    }

    .search-fields {
        grid-template-columns: 1fr;
    }

    .search-button {
        width: 100%;
    }

    .traveller-menu {
        left: 0;
        right: auto;

        width: 100%;
    }


    .destinations,
    .why-yvora {
        padding-left: 20px;
        padding-right: 20px;
    }

    .section-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }

    .section-header h2 {
        font-size: 34px;
    }

    .destination-grid {
        grid-template-columns: 1fr;
    }

    .destination-image {
        height: 230px;
    }


    .features {
        grid-template-columns: 1fr;
    }


    .cta {
        margin-left: 15px;
        margin-right: 15px;

        padding: 65px 20px;

        border-radius: 22px;
    }

    .cta h2 {
        font-size: 40px;
    }


    footer {
        padding: 30px 20px;

        flex-direction: column;

        gap: 10px;
    }

}

/* ==========================================
   FIX YVORA SEARCH PANEL
========================================== */

.search-panel {
    width: min(1120px, 94%);
    padding: 10px 12px 12px;
}

.trip-type {
    margin-bottom: 10px;
}

.search-fields {
    display: grid;

    grid-template-columns:
        minmax(150px, 1.2fr)
        38px
        minmax(150px, 1.2fr)
        minmax(135px, 1fr)
        minmax(135px, 1fr)
        minmax(135px, 1fr)
        105px;

    align-items: center;

    gap: 8px;

    width: 100%;
}

.search-field {
    width: 100%;
    min-width: 0;
    padding: 12px 13px;
}

.search-field input {
    width: 100%;
    min-width: 0;
}

.search-field label {
    white-space: nowrap;
}

.swap {
    margin: 0 auto;
}

.search-button {
    width: 100%;
    min-width: 105px;
}


/* ==========================================
   DESKTOP FIX
========================================== */

@media (min-width: 1101px) {

    .search-panel {
        min-height: 150px;
    }

    .search-fields {
        min-height: 62px;
    }

}


/* ==========================================
   LAPTOP
========================================== */

@media (max-width: 1100px) and (min-width: 701px) {

    .search-panel {
        width: 95%;
    }

    .search-fields {
        grid-template-columns:
            1fr
            38px
            1fr
            1fr
            1fr
            1fr;

        gap: 5px;
    }

    .search-button {
        grid-column: 1 / -1;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 700px) {

    .search-panel {
        width: 100%;
        padding: 10px;
    }

    .search-fields {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
    }

    .search-field {
        width: 100%;
    }

    .swap {
        display: flex;
        margin: -2px auto;
    }

    .search-button {
        width: 100%;
        margin-top: 5px;
    }

}

/* ==========================================
   PAYMENT BUTTON + SECURITY MESSAGE
========================================== */

.pay-button {
    width: 100%;
    height: 58px;

    margin-top: 24px;

    border: none;
    border-radius: 14px;

    background: #111 !important;
    color: #fff !important;

    font-size: 14px;
    font-weight: 600;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.pay-button:hover {
    background: #252525 !important;

    transform: translateY(-1px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.12);
}

.pay-button:active {
    transform: translateY(0);
}


/* ==========================================
   SECURITY MESSAGE
========================================== */

.security-message {
    margin-top: 14px;

    padding: 12px 15px;

    border-radius: 11px;

    background: #f5f5f3;

    color: #777;

    font-size: 12px;

    line-height: 1.5;

    display: flex;
    align-items: center;

    gap: 8px;
}

.security-message::before {
    content: "🔒";

    font-size: 13px;
}

.security-message strong {
    color: #555;
    font-weight: 600;
}


/* ==========================================
   PAYMENT CARD SPACING
========================================== */

.payment-form {
    padding-bottom: 30px;
}

.payment-form .form-group:last-of-type {
    margin-bottom: 0;
}


/* ==========================================
   BACK TO HOME
========================================== */

.back-home,
.home-button {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    height: 44px;

    margin-top: 16px;

    padding: 0 22px;

    border: 1px solid #dededc !important;

    border-radius: 11px !important;

    background: #fff !important;

    color: #333 !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    text-decoration: none !important;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.back-home:hover,
.home-button:hover {
    background: #f5f5f3 !important;

    border-color: #cfcfcd !important;

    transform: translateY(-1px);
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 600px) {

    .pay-button {
        height: 55px;
    }

    .security-message {
        font-size: 11px;
    }

    .back-home,
    .home-button {
        width: 100%;
    }

}

/* ==========================================
   PAY & CONFIRM BOOKING
========================================== */

.pay-button {
    width: 100%;
    height: 58px;

    margin-top: 24px;

    border: none;
    border-radius: 14px;

    background: #111;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.pay-button:hover {
    background: #292929;

    transform: translateY(-1px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.12);
}

.pay-button:active {
    transform: translateY(0);
}


/* ==========================================
   SECURE PAYMENT NOTE
========================================== */

.secure-note {
    width: 100%;

    margin-top: 14px;

    padding: 12px 16px;

    border: 1px solid #e8e8e6;

    border-radius: 12px;

    background: #f7f7f5;

    color: #777;

    font-size: 12px;

    line-height: 1.5;

    text-align: center;
}


/* ==========================================
   PAYMENT FORM BOTTOM
========================================== */

.payment-form .pay-button + .secure-note {
    margin-bottom: 0;
}


/* MOBILE */

@media (max-width: 600px) {

    .pay-button {
        height: 55px;

        font-size: 13px;
    }

    .secure-note {
        padding: 11px 13px;

        font-size: 11px;
    }

}

/* ==========================================
   YVORA CONFIRMATION PAGE
========================================== */

.confirmation-page {
    min-height: calc(100vh - 76px);

    padding: 65px 20px 90px;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    background:
        radial-gradient(
            circle at 50% 0%,
            #ffffff 0%,
            #f7f7f5 60%,
            #eeeeec 100%
        );
}

.confirmation-card {
    width: 100%;
    max-width: 820px;

    padding: 45px;

    background: #fff;

    border: 1px solid #e4e4e2;

    border-radius: 26px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.07);

    text-align: center;
}


/* ==========================================
   SUCCESS
========================================== */

.success-icon {
    width: 64px;
    height: 64px;

    margin: 0 auto 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #111;

    color: #fff;

    font-size: 27px;
    font-weight: 500;
}

.confirmation-card .section-label {
    margin-bottom: 12px;

    color: #999;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2.5px;
}

.confirmation-card h1 {
    margin-bottom: 12px;

    color: #111;

    font-size: 42px;

    line-height: 1.05;

    letter-spacing: -2px;

    font-weight: 600;
}

.confirmation-text {
    max-width: 540px;

    margin: 0 auto 32px;

    color: #777;

    font-size: 14px;

    line-height: 1.7;
}


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

.confirmed-passenger {
    width: 100%;

    padding: 18px 20px;

    margin-bottom: 12px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border: 1px solid #e8e8e6;

    border-radius: 14px;

    background: #f8f8f6;

    text-align: left;
}

.confirmed-passenger span {
    color: #999;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;
}

.confirmed-passenger strong {
    color: #111;

    font-size: 14px;

    font-weight: 600;
}


/* ==========================================
   BOOKING REFERENCE
========================================== */

.booking-reference {
    width: 100%;

    padding: 20px 22px;

    margin-bottom: 12px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    background: #111;

    color: #fff;

    border-radius: 15px;

    text-align: left;
}

.booking-reference div:first-child {
    display: flex;

    flex-direction: column;

    gap: 4px;
}

.booking-reference span {
    color: #999;

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.4px;
}

.booking-reference strong {
    color: #fff;

    font-size: 22px;

    font-weight: 600;

    letter-spacing: 2px;
}

.booking-status {
    padding: 7px 12px;

    border-radius: 20px;

    background: #fff;

    color: #111;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;
}


/* ==========================================
   TRIP
========================================== */

.confirmed-trip {
    width: 100%;

    padding: 28px 25px;

    margin-top: 12px;

    display: grid;

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

    align-items: center;

    gap: 15px;

    border: 1px solid #e5e5e3;

    border-radius: 18px;

    background: #fff;
}

.confirmed-trip > div {
    display: flex;

    flex-direction: column;

    gap: 5px;

    text-align: left;
}

.confirmed-trip > div:last-child {
    text-align: right;
}

.confirmed-trip span {
    color: #999;

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.3px;
}

.confirmed-trip strong {
    color: #111;

    font-size: 32px;

    font-weight: 600;

    letter-spacing: -1.5px;
}

.confirmed-trip small {
    color: #777;

    font-size: 12px;
}

.confirmed-arrow {
    color: #aaa;

    font-size: 22px;

    text-align: center;
}


/* ==========================================
   FLIGHT DETAILS
========================================== */

.confirmation-details {
    width: 100%;

    margin-top: 12px;

    padding: 22px;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

    border: 1px solid #e5e5e3;

    border-radius: 18px;

    background: #fff;

    text-align: left;
}

.confirmation-details > div {
    display: flex;

    flex-direction: column;

    gap: 5px;
}

.confirmation-details > div > span {
    color: #999;

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.2px;
}

.confirmation-details strong {
    color: #111;

    font-size: 13px;

    font-weight: 600;
}

.confirmation-details strong span {
    color: #111;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0;
    text-transform: none;
}


/* ==========================================
   TOTAL
========================================== */

.confirmed-price {
    width: 100%;

    margin-top: 18px;

    padding: 20px 0;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border-top: 1px solid #eee;

    border-bottom: 1px solid #eee;

    text-align: left;
}

.confirmed-price span {
    color: #777;

    font-size: 13px;
}

.confirmed-price strong {
    color: #111;

    font-size: 28px;

    font-weight: 600;

    letter-spacing: -1px;
}


/* ==========================================
   EMAIL
========================================== */

.confirmation-email {
    width: 100%;

    margin-top: 18px;

    padding: 17px 20px;

    display: flex;

    flex-direction: column;

    gap: 4px;

    border-radius: 13px;

    background: #f7f7f5;

    text-align: left;
}

.confirmation-email span {
    color: #999;

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.2px;
}

.confirmation-email strong {
    color: #222;

    font-size: 13px;

    font-weight: 500;
}


/* ==========================================
   QR
========================================== */

.qr-section {
    margin-top: 25px;

    padding-top: 25px;

    border-top: 1px solid #eee;

    text-align: center;
}

.booking-qr {
    width: 145px;
    height: 145px;

    margin: 0 auto 14px;

    display: flex;

    align-items: center;
    justify-content: center;
}

.booking-qr img {
    width: 145px;
    height: 145px;

    display: block;
}

.qr-section p {
    color: #999;

    font-size: 11px;
}


/* ==========================================
   ACTION BUTTONS
========================================== */

.confirmation-actions {
    width: 100%;

    margin-top: 28px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;
}

.confirmation-actions button {
    width: 100%;

    height: 52px;

    border: none;

    border-radius: 13px;

    background: #111;

    color: #fff;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.confirmation-actions button:hover {
    background: #292929;

    transform: translateY(-1px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .10);
}

.confirmation-actions .secondary-button {
    background: #f1f1ef;

    color: #111;
}

.confirmation-actions .secondary-button:hover {
    background: #e7e7e5;
}


/* ==========================================
   BACK TO HOME
========================================== */

.home-button {
    width: auto;

    min-width: 145px;

    height: 44px;

    margin-top: 16px;

    padding: 0 20px;

    border: 1px solid #dededc !important;

    border-radius: 11px !important;

    background: #fff !important;

    color: #333 !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.home-button:hover {
    background: #f5f5f3 !important;

    border-color: #cfcfcd !important;

    transform: translateY(-1px);
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 650px) {

    .confirmation-page {
        padding: 35px 15px 60px;
    }

    .confirmation-card {
        padding: 28px 18px;

        border-radius: 20px;
    }

    .confirmation-card h1 {
        font-size: 34px;

        letter-spacing: -1.5px;
    }

    .confirmed-trip {
        grid-template-columns: 1fr;

        padding: 24px 18px;
    }

    .confirmed-trip > div,
    .confirmed-trip > div:last-child {
        text-align: center;

        align-items: center;
    }

    .confirmed-arrow {
        transform: rotate(90deg);
    }

    .confirmation-details {
        grid-template-columns: 1fr;

        gap: 17px;
    }

    .booking-reference {
        flex-direction: column;

        align-items: flex-start;

        gap: 12px;
    }

    .confirmation-actions {
        grid-template-columns: 1fr;
    }

    .home-button {
        width: 100%;
    }

}

/* ==========================================
   SEARCH PAGE FINAL FIX
========================================== */

.results-page {
    max-width: 1250px;

    margin: 0 auto;

    padding: 55px 35px 90px;

    display: grid;

    grid-template-columns: 255px minmax(0, 1fr);

    column-gap: 24px;

    align-items: start;
}


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

.results-header {
    grid-column: 1 / -1;

    margin-bottom: 32px;
}

.results-header h1 {
    margin: 0;

    color: #111;

    font-size: 42px;

    line-height: 1;

    letter-spacing: -2px;

    font-weight: 600;
}

.results-header p {
    margin-top: 12px;

    color: #888;

    font-size: 13px;
}


/* ==========================================
   FILTER FLIGHTS
========================================== */

.flight-filters {
    grid-column: 1;

    grid-row: 2;

    width: 255px;

    padding: 20px;

    background: #fff;

    border: 1px solid #e5e5e3;

    border-radius: 18px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.04);
}


/* TITLE */

.filter-title {
    margin-bottom: 20px;

    color: #111;

    font-size: 16px;

    font-weight: 600;
}


/* GROUP */

.filter-group {
    margin-bottom: 22px;
}

.filter-group:last-child {
    margin-bottom: 0;
}


/* LABELS */

.filter-group > label {
    display: block;

    margin-bottom: 8px;

    color: #888;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.2px;
}


/* ==========================================
   FILTER BUTTONS
========================================== */

.flight-filters .filter-button,
.flight-filters .sort-button {
    width: 100%;

    height: 38px;

    padding: 0 12px;

    margin-bottom: 6px;

    display: flex;

    align-items: center;

    border: 1px solid #e3e3e1;

    border-radius: 9px;

    background: #fff;

    color: #444;

    font-size: 11px;

    font-weight: 500;

    text-align: left;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}

.flight-filters .filter-button:hover,
.flight-filters .sort-button:hover {
    background: #f5f5f3;

    border-color: #d5d5d3;
}

.flight-filters .filter-button.active,
.flight-filters .sort-button.active {
    background: #111;

    border-color: #111;

    color: #fff;
}


/* ==========================================
   MAXIMUM PRICE
========================================== */

.price-value {
    width: 100%;

    height: 38px;

    padding: 0 12px;

    margin-bottom: 12px;

    display: flex;

    align-items: center;

    border: 1px solid #e3e3e1;

    border-radius: 9px;

    background: #fff;

    color: #444;

    font-size: 11px;

    font-weight: 600;
}


/* PRICE SLIDER */

#priceRange {
    width: 100%;
    height: 4px;

    margin: 8px 0;

    appearance: none;
    -webkit-appearance: none;

    border: none;
    border-radius: 10px;

    background: linear-gradient(
        to right,
        #111 0%,
        #111 40%,
        #ddd 40%,
        #ddd 100%
    );

    outline: none;

    cursor: pointer;
}

#priceRange::-webkit-slider-runnable-track {
    height: 4px;

    border-radius: 10px;

    background: transparent;
}

#priceRange::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;

    width: 16px;
    height: 16px;

    margin-top: -6px;

    border: 2px solid #fff;
    border-radius: 50%;

    background: #111;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.2);

    cursor: pointer;
}

#priceRange::-moz-range-track {
    height: 4px;

    border-radius: 10px;

    background: #ddd;
}

#priceRange::-moz-range-progress {
    height: 4px;

    border-radius: 10px;

    background: #111;
}

#priceRange::-moz-range-thumb {
    width: 16px;
    height: 16px;

    border: 2px solid #fff;
    border-radius: 50%;

    background: #111;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.2);

    cursor: pointer;
}


/* ==========================================
   FLIGHT RESULTS
========================================== */

.flight-results {
    grid-column: 2;

    grid-row: 2;

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 12px;
}


/* ==========================================
   FLIGHT CARD
========================================== */

.flight-card {
    width: 100%;

    min-height: 125px;

    padding: 22px;

    display: grid;

    grid-template-columns: 130px minmax(0, 1fr) auto;

    align-items: center;

    gap: 20px;

    background: #fff;

    border: 1px solid #e5e5e3;

    border-radius: 18px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.035);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.flight-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.07);
}


/* ==========================================
   AIRLINE
========================================== */

.flight-card .airline {
    display: flex;

    flex-direction: column;

    gap: 5px;
}

.flight-card .airline strong {
    color: #111;

    font-size: 13px;

    font-weight: 600;
}

.flight-card .airline span {
    color: #999;

    font-size: 10px;
}


/* ==========================================
   FLIGHT TIME
========================================== */

.flight-card .flight-time {
    display: grid;

    grid-template-columns: 90px minmax(100px, 1fr) 90px;

    align-items: center;

    gap: 10px;
}

.flight-card .flight-time > div {
    display: flex;

    flex-direction: column;

    gap: 3px;
}

.flight-card .flight-time > div:last-child {
    text-align: right;
}

.flight-card .flight-time .from-code,
.flight-card .flight-time .to-code {
    color: #111;

    font-size: 22px;

    font-weight: 600;

    letter-spacing: -.5px;
}

.flight-card .flight-time .from-city,
.flight-card .flight-time .to-city {
    color: #999;

    font-size: 10px;
}

.flight-card .flight-time small {
    color: #555;

    font-size: 11px;

    font-weight: 600;
}


/* ==========================================
   FLIGHT LINE
========================================== */

.flight-line {
    display: flex !important;

    align-items: center;
    justify-content: center;

    color: #aaa;

    font-size: 13px;

    white-space: nowrap;

    overflow: hidden;
}


/* ==========================================
   FLIGHT INFO
========================================== */

.flight-card .flight-info {
    min-width: 100px;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 7px;

    margin: 0;
}

.flight-card .flight-info > span {
    color: #999;

    font-size: 10px;
}

.flight-card .flight-info > strong {
    color: #111;

    font-size: 21px;

    font-weight: 600;
}


/* ==========================================
   SELECT
========================================== */

.select-flight {
    min-width: 78px;

    height: 38px;

    padding: 0 15px;

    border: none;

    border-radius: 9px;

    background: #111;

    color: #fff;

    font-size: 11px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}

.select-flight:hover {
    background: #292929;

    transform: translateY(-1px);
}


/* ==========================================
   NO RESULTS
========================================== */

.no-results {
    grid-column: 2;

    padding: 50px;

    background: #fff;

    border: 1px solid #e5e5e3;

    border-radius: 18px;

    text-align: center;
}

.no-results h3 {
    margin-bottom: 8px;

    font-size: 18px;
}

.no-results p {
    color: #888;

    font-size: 13px;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 950px) {

    .results-page {
        grid-template-columns: 220px minmax(0, 1fr);

        column-gap: 16px;

        padding-left: 20px;
        padding-right: 20px;
    }

    .flight-filters {
        width: 220px;
    }

    .flight-card {
        grid-template-columns: 110px minmax(0, 1fr);

        gap: 15px;
    }

    .flight-card .flight-info {
        grid-column: 2;

        flex-direction: row;

        align-items: center;

        justify-content: flex-start;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 700px) {

    .results-page {
        display: flex;

        flex-direction: column;

        gap: 15px;

        padding: 40px 15px 60px;
    }

    .results-header {
        width: 100%;

        margin-bottom: 10px;
    }

    .results-header h1 {
        font-size: 32px;
    }

    .flight-filters {
        width: 100%;
    }

    .flight-results {
        width: 100%;
    }

    .flight-card {
        display: flex;

        flex-direction: column;

        align-items: stretch;

        padding: 20px;
    }

    .flight-card .flight-time {
        grid-template-columns: 75px 1fr 75px;
    }

    .flight-card .flight-time .from-code,
    .flight-card .flight-time .to-code {
        font-size: 20px;
    }

    .flight-card .flight-info {
        width: 100%;

        display: flex;

        flex-direction: row;

        align-items: center;

        justify-content: space-between;
    }

    .select-flight {
        width: 100%;
    }

}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {

    /* HEADER */

    header {
        height: auto;
        min-height: 68px;
        padding: 16px 20px;
        gap: 15px;
    }

    .logo {
        font-size: 19px;
        letter-spacing: 3px;
    }

    nav {
        gap: 14px;
    }

    nav a {
        font-size: 11px;
    }


    /* HERO */

    .hero {
        min-height: auto;
        padding: 65px 18px 50px;
    }

    .hero h1 {
        font-size: clamp(46px, 14vw, 68px);
        letter-spacing: -3px;
    }

    .hero p {
        font-size: 14px;
    }


    /* SEARCH */

    .search-panel {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 10px;
        border-radius: 18px;
    }

    .search-field {
        padding: 12px 13px;
    }

    .search-button {
        width: 100%;
        height: 54px;
        margin-top: 5px;
    }

    .swap {
        display: none;
    }

    .suggestions {
        top: calc(100% + 4px);
    }

    #travellerMenu {
        left: 0;
        right: auto;
        width: 100%;
        max-width: 100%;
    }


    /* DESTINATIONS */

    .destinations {
        padding: 65px 20px;
    }

    .destinations h2 {
        font-size: 32px;
        letter-spacing: -1.5px;
    }

    .destination-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .destination-card {
        min-height: 230px;
    }


    /* SEARCH RESULTS */

    .results-page {
        padding: 35px 18px 70px;
    }

    .results-header h1 {
        font-size: 30px;
    }

    .results-layout {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .flight-filters {
        padding: 18px;
    }

    .flight-card {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 20px;
    }

    .flight-route {
        gap: 14px;
    }

    .flight-time strong {
        font-size: 20px;
    }

    .flight-info {
        flex-wrap: wrap;
        gap: 12px;
    }

    .flight-price {
        text-align: left;
    }

    .select-flight {
        width: 100%;
        margin-top: 5px;
    }


    /* BOOKING */

    .booking-page,
    .payment-page {
        padding: 55px 18px 70px;
    }

    .booking-header h1,
    .payment-header h1 {
        font-size: 38px;
        letter-spacing: -2px;
    }

    .booking-layout,
    .payment-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .booking-form,
    .payment-form {
        padding: 24px 20px;
        border-radius: 18px;
    }

    .booking-summary,
    .payment-summary {
        position: static;
        padding: 24px 20px;
        border-radius: 18px;
    }

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


    /* CONFIRMATION */

    .confirmation-page {
        padding: 40px 18px 70px;
    }

    .confirmation-card {
        padding: 25px 20px;
        border-radius: 20px;
    }

    .confirmation-card h1 {
        font-size: 36px;
        letter-spacing: -1.5px;
    }

    .confirmed-trip {
        gap: 12px;
    }

    .confirmed-trip strong {
        font-size: 25px;
    }

    .confirmation-details {
        grid-template-columns: 1fr;
    }

    .confirmation-actions {
        flex-direction: column;
    }

    .confirmation-actions button,
    .home-button {
        width: 100%;
    }

}

/* YVORA PHONE */

.iti {
    width: 100%;
}

.iti input[type="tel"] {
    width: 100%;
}

.iti__search-input {
    padding-left: 45px !important;
}

.iti__search-input::placeholder {
    padding-left: 0 !important;
}

.iti__search-icon {
    left: 16px !important;
    right: auto !important;
}

/* ================================
   FLIGHT DETAILS PAGE
================================ */

.flight-details-page {
    background: #f7f8fa;
    min-height: 100vh;
    padding: 40px 20px;
}

.selected-flight-details {
    max-width: 900px;
    margin: 30px auto;
}

.flight-detail-card {
    background: white;
    border-radius: 18px;
    padding: 30px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
}

.flight-detail-card h2 {
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 26px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid #e5e7eb;
    font-size: 18px;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-row span {
    color: #6b7280;
}

.detail-row strong {
    color: #1f2937;
}

.confirmation-page {

    min-height: 100vh;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    padding: 80px 20px;

}

.book-now-button {
    position: relative;
    z-index: 9999;
    pointer-events: auto;
    cursor: pointer;
}

.confirmation-page {
    min-height: 100vh;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    padding-top: 80px;

    position: relative;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-button {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #dedede;
    border-radius: 50%;

    background: #ffffff;

    transition: all 0.2s ease;
}

.profile-button svg {
    width: 21px;
    height: 21px;

    fill: #222;
}

.profile-button:hover {
    border-color: #111;
    transform: translateY(-1px);
}

/* =========================
   PROFILE PAGE
========================= */

.profile-page {
    min-height: calc(100vh - 80px);
    padding: 70px 8%;
    background: #f8f8f6;
}


/* PROFILE HEADER */

.profile-header {
    display: flex;
    align-items: center;
    gap: 30px;
    padding-bottom: 50px;
    border-bottom: 1px solid #dedede;
}

.profile-avatar {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: #e5e8ec;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 50px;
    font-weight: 700;
    color: #1c2329;
    overflow: hidden;
    box-shadow: 0 0 0 5px #fff, 0 0 0 6px #d9d9d3;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-photo-block {
    display: grid;
    justify-items: center;
    gap: 13px;
    flex: 0 0 auto;
}

.profile-photo-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.profile-photo-button,
.profile-photo-remove {
    padding: 8px 13px;
    border: 1px solid #cfcfca;
    border-radius: 999px;
    background: #fff;
    color: #1c2329;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.profile-photo-button:hover,
.profile-photo-remove:hover {
    border-color: #111;
}

.profile-photo-remove {
    color: #9b2c2c;
}

.profile-photo-status {
    min-height: 16px;
    margin: -5px 0 0;
    color: #687078;
    font-size: 12px;
}

.profile-user-info p {
    font-size: 12px;
    letter-spacing: 3px;
    font-weight: 600;
    color: #777;
    margin-bottom: 10px;
}

.profile-user-info h1 {
    font-size: 42px;
    margin-bottom: 12px;
    color: #1b2025;
}

.profile-user-info span {
    font-size: 17px;
    color: #687078;
}


/* PROFILE TABS */

.profile-tabs {
    display: flex;
    gap: 35px;

    padding: 25px 0;
    border-bottom: 1px solid #dedede;

    overflow-x: auto;
}

.profile-tab {
    background: transparent;
    border: none;

    font-size: 15px;
    font-weight: 600;
    color: #6b7278;

    padding: 10px 0;
    cursor: pointer;

    white-space: nowrap;
}

.profile-tab.active {
    color: #171b1f;
    border-bottom: 2px solid #171b1f;
}


/* DASHBOARD */

.profile-dashboard {
    padding-top: 45px;
}

.dashboard-section {
    margin-bottom: 55px;
}

.section-label {
    font-size: 11px;
    letter-spacing: 3px;
    color: #888;
    font-weight: 700;
    margin-bottom: 10px;
}

.dashboard-title h2 {
    font-size: 28px;
    color: #1b2025;
}


/* EMPTY TRIPS */

.empty-trips {
    margin-top: 25px;

    padding: 45px;

    border: 1px solid #e0e0e0;
    border-radius: 16px;

    background: white;
}

.empty-trip-icon {
    font-size: 35px;
    margin-bottom: 15px;
}

.empty-trips h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

.empty-trips p {
    color: #70777d;
    margin-bottom: 25px;
}

.empty-trips button {
    background: #181b1f;
    color: white;

    border: none;
    border-radius: 8px;

    padding: 14px 22px;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}


/* RECENT SEARCHES */

.recent-searches {
    margin-top: 25px;

    padding: 30px;

    border: 1px solid #e0e0e0;
    border-radius: 16px;

    background: white;
}

.empty-text {
    color: #737a80;
}


/* TRAVEL STATS */

.travel-stats {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    margin-top: 25px;
}

.stat-card {
    background: white;

    border: 1px solid #e0e0e0;
    border-radius: 16px;

    padding: 30px;
}

.stat-card strong {
    display: block;

    font-size: 38px;
    color: #181b1f;

    margin-bottom: 8px;
}

.stat-card span {
    color: #737a80;
}


/* MOBILE */

@media (max-width: 700px) {

    .profile-page {
        padding: 40px 20px;
    }

    .profile-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-user-info h1 {
        font-size: 32px;
    }

    .travel-stats {
        grid-template-columns: 1fr;
    }

}

/* PROFILE TABS */

.tab-content {
    display: none;
}

.tab-content.active-tab {
    display: block;
}


/* ACCOUNT */

.account-container {
    max-width: 900px;
}

.account-header {
    margin-bottom: 35px;
}

.account-header h2 {
    margin-top: 10px;
    font-size: 32px;
}

.account-header p:not(.section-label) {
    color: #6b7280;
    margin-top: 10px;
}


.account-card {
    display: flex;
    gap: 40px;
    padding: 40px;
    background: white;
    border: 1px solid #d9dce1;
    border-radius: 20px;
}


.account-avatar {
    width: 100px;
    height: 100px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e9edf2;

    font-size: 38px;
    font-weight: 700;
}


.account-fields {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 20px;
}


.account-field {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


.account-field label {
    font-size: 14px;
    font-weight: 600;
}


.account-field input {
    padding: 14px;

    border: 1px solid #d9dce1;
    border-radius: 10px;

    font-size: 15px;
}


.save-account-button {
    margin-top: 10px;

    padding: 15px 25px;

    background: #16191d;
    color: white;

    border: none;
    border-radius: 10px;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;
}

.tab-content {
    display: none;
}

.tab-content.active-tab {
    display: block;
}

/* ====================================
   PREFERENCES
==================================== */

.preferences-card {
    max-width: 850px;
    padding: 32px;
    margin-top: 25px;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 16px;

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.05);
}


.preferences-card
.account-field {
    margin-bottom: 22px;
}


.preferences-card label {
    display: block;

    margin-bottom: 9px;

    font-size: 14px;
    font-weight: 600;

    color: #1f2937;
}


.preferences-card input,
.preferences-card select {
    width: 100%;

    height: 52px;

    padding:
        0
        16px;

    font-size: 15px;

    color: #1f2937;

    background: #f9fafb;

    border:
        1px
        solid
        #d1d5db;

    border-radius: 10px;

    outline: none;

    transition:
        0.2s;
}


.preferences-card input:focus,
.preferences-card select:focus {
    background: #ffffff;

    border-color: #2563eb;

    box-shadow:
        0
        0
        0
        4px
        rgba(37, 99, 235, 0.1);
}


/* AIRPORT SUGGESTIONS */

.preferences-card
.airport-suggestions {
    position: absolute;

    width: 100%;

    max-height: 260px;

    overflow-y: auto;

    margin-top: 6px;

    background: #ffffff;

    border-radius: 12px;

    box-shadow:
        0
        15px
        35px
        rgba(0, 0, 0, 0.12);

    z-index: 1000;
}


.preferences-card
.suggestion {
    padding:
        14px
        16px;

    cursor: pointer;

    border-bottom:
        1px
        solid
        #f1f1f1;

    transition:
        0.2s;
}


.preferences-card
.suggestion:hover {
    background:
        #f3f7ff;
}


.preferences-card
.suggestion strong {
    display: block;

    font-size: 14px;

    color:
        #111827;
}


.preferences-card
.suggestion span {
    display: block;

    margin-top: 4px;

    font-size: 13px;

    color:
        #6b7280;
}


/* SAVE BUTTON */

.preferences-card
.save-account-button {
    width: auto;

    min-width: 180px;

    height: 52px;

    margin-top: 10px;

    padding:
        0
        24px;

    border: none;

    border-radius: 10px;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    color: #ffffff;

    background:
        #111827;

    transition:
        0.25s;
}


.preferences-card
.save-account-button:hover {
    transform:
        translateY(-2px);

    background:
        #000000;

    box-shadow:
        0
        8px
        20px
        rgba(0, 0, 0, 0.18);
}


/* MOBILE */

@media
(
    max-width: 600px
) {

    .preferences-card {
        padding: 20px;

        border-radius: 12px;
    }

    .preferences-card
    .save-account-button {
        width: 100%;
    }

}

/* ====================================
   TRAVELERS
==================================== */

.travelers-header {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 30px;

    margin-bottom: 25px;
}


.travelers-description {
    color: #70777d;

    margin-top: 8px;
}


.add-traveler-button {
    background: #181b1f;

    color: white;

    border: none;

    border-radius: 8px;

    padding: 14px 22px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    white-space: nowrap;
}


.add-traveler-button:hover {
    opacity: 0.9;
}


/* TRAVELER FORM */

.traveler-form {
    display: none;

    margin-top: 25px;

    padding: 30px;

    border: 1px solid #e0e0e0;

    border-radius: 16px;

    background: white;
}


.traveler-form-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 25px;
}


.traveler-form-header h3 {
    font-size: 20px;
}


.close-traveler-form {
    border: none;

    background: transparent;

    font-size: 28px;

    cursor: pointer;

    color: #70777d;
}


.traveler-form-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            1fr
        );

    gap: 20px;
}


.traveler-form-actions {
    display: flex;

    justify-content: flex-end;

    gap: 12px;

    margin-top: 25px;
}


.cancel-traveler-button {
    background: white;

    color: #181b1f;

    border: 1px solid #dcdcdc;

    border-radius: 8px;

    padding: 14px 22px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;
}


.cancel-traveler-button:hover {
    background: #f5f5f5;
}


/* TRAVELERS LIST */

.travelers-list {
    margin-top: 25px;

    display: grid;

    gap: 15px;
}


/* MOBILE */

@media (
    max-width: 700px
) {

    .travelers-header {
        flex-direction: column;

        align-items: stretch;
    }


    .add-traveler-button {
        width: 100%;
    }


    .traveler-form-grid {
        grid-template-columns: 1fr;
    }


    .traveler-form-actions {
        flex-direction: column-reverse;
    }


    .traveler-form-actions button {
        width: 100%;
    }

}

/* TRAVELER CARD */

.traveler-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 25px 30px;

    background: white;

    border: 1px solid #d9dce1;
    border-radius: 18px;

    margin-top: 20px;
}


.traveler-info {
    display: flex;
    align-items: center;

    gap: 18px;
}


.traveler-avatar {
    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e9edf2;

    font-size: 22px;
    font-weight: 700;
}


.traveler-details h3 {
    margin: 0;

    font-size: 18px;
}


.traveler-details p {
    margin-top: 6px;

    color: #6b7280;

    font-size: 14px;
}


.traveler-actions {
    display: flex;

    gap: 10px;
}


.edit-traveler-button,
.delete-traveler-button {
    padding: 10px 16px;

    border-radius: 8px;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}


.edit-traveler-button {
    background: white;

    border: 1px solid #d9dce1;

    color: #16191d;
}


.delete-traveler-button {
    background: white;

    border: 1px solid #d9dce1;

    color: #dc2626;
}

/* PAYMENT BUTTONS */

.add-traveler-button,
.save-account-button {
    background: #171b22;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 14px 22px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}


.add-traveler-button:hover,
.save-account-button:hover {
    transform: translateY(-1px);
    opacity: 0.9;
}


.cancel-traveler-button {
    background: transparent;
    color: #555;
    border: 1px solid #d8dce2;
    border-radius: 12px;
    padding: 14px 22px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}


.cancel-traveler-button:hover {
    background: #f5f6f8;
}


.delete-payment-button {
    background: transparent;
    color: #d9534f;
    border: 1px solid #e5c7c7;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}


.delete-payment-button:hover {
    background: #fff1f1;
}

/* =========================
   NOTIFICATIONS
========================= */

.notifications-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.clear-notifications-button {
    background: transparent;
    border: none;
    cursor: pointer;

    font-size: 14px;
    font-weight: 600;

    color: #666;

    transition: color 0.2s ease;
}

.clear-notifications-button:hover {
    color: #dc2626;
}

.notification-card {
    position: relative;

    display: flex;
    align-items: flex-start;
    gap: 18px;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 16px;

    padding: 22px 24px;

    margin-top: 18px;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}


.notification-card:hover {
    transform: translateY(-2px);

    border-color: #d1d5db;

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.06);
}


/* ICON */

.notification-icon {
    width: 48px;
    height: 48px;

    min-width: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f3f4f6;

    border-radius: 14px;

    font-size: 20px;
}


/* CONTENT */

.notification-content {
    display: flex;

    flex-direction: column;

    gap: 5px;

    flex: 1;
}


.notification-content h3 {
    margin: 0;

    font-size: 17px;

    font-weight: 600;

    color: #1f2937;
}


.notification-content p {
    margin: 0;

    font-size: 14px;

    line-height: 1.6;

    color: #6b7280;
}


.notification-content span {
    margin-top: 5px;

    font-size: 13px;

    color: #9ca3af;
}

.delete-notification-button {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: none;

    font-size: 24px;
    line-height: 1;

    color: #6b7280;

    cursor: pointer;

    border-radius: 8px;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.delete-notification-button:hover {
    color: #dc2626;

    background: #fef2f2;

    transform: scale(1.1);
}

/* =========================
   PROFILE TRIP CARDS
========================= */

.trips-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


.trip-card {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 18px;
    padding: 22px;
    box-sizing: border-box;
}


.trip-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eeeeee;
}


.trip-reference {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #888888;
}


.trip-card-header h3 {
    margin: 6px 0 0;
    font-size: 22px;
    font-weight: 600;
    color: #111111;
}


.trip-status {
    padding: 7px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: #eaf8ef;
    color: #218c4a;
}


.trip-card-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding-top: 18px;
}


.trip-card-details div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


.trip-card-details span {
    font-size: 12px;
    color: #888888;
}


.trip-card-details strong {
    font-size: 14px;
    font-weight: 600;
    color: #111111;
}


@media (max-width: 600px) {

    .trip-card-details {
        grid-template-columns: 1fr;
        gap: 15px;
    }


    .trip-card-header {
        flex-direction: column;
        gap: 12px;
    }

}

/* ========================================
   YVORA MULTI CITY - FINAL
======================================== */

.search-panel {
    display: block !important;
    position: relative;
    box-sizing: border-box;
}

/* NORMAL SEARCH */
.search-fields {
    display: grid;
}

/* MULTI CITY */
#multiCityFields {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* MULTI CITY ROUTES */
#multiCityRoutes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

/* FLIGHT CARD */
.multi-city-flight {
    position: relative;
    width: 100%;
    box-sizing: border-box;

    padding: 18px 42px 18px 20px;

    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 14px;

    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

/* ROW */
.multi-city-row {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(0, 1.2fr)
        minmax(140px, .8fr)
        minmax(120px, .65fr);

    gap: 14px;

    width: 100%;
    box-sizing: border-box;
}

/* FIELDS */
.multi-city-row .search-field {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.multi-city-row label {
    display: block;

    margin-bottom: 7px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;

    color: #888;
}

.multi-city-row input {
    width: 100%;
    height: 46px;

    padding: 0 14px;

    box-sizing: border-box;

    background: #f8f8f8;

    border: 1px solid #e1e1e1;
    border-radius: 10px;

    outline: none;

    font-size: 14px;
    color: #111;
}

/* ECONOMY */
.multi-city-cabin {
    display: flex;
    align-items: center;

    width: 100%;
    height: 46px;

    padding: 0 14px;

    box-sizing: border-box;

    background: #f8f8f8;

    border: 1px solid #e1e1e1;
    border-radius: 10px;

    font-size: 14px;
    color: #222;
}

/* X */
.multi-city-flight .remove-multi-city,
.multi-city-flight .remove-flight,
.multi-city-flight .delete-flight {
    position: absolute;

    right: 10px;
    top: 50%;

    transform: translateY(-50%);

    width: 28px;
    height: 28px;

    border: none;
    background: transparent;

    color: #555;

    font-size: 20px;

    cursor: pointer;
}

/* ACTIONS */
.multi-city-actions {
    display: flex;
    align-items: center;

    width: 100%;

    margin-top: 16px;
}

.multi-city-left-actions {
    display: flex;
    align-items: center;
    gap: 28px;
}

#addMultiCity {
    height: 42px;

    padding: 0 16px;

    background: #fff;

    border: 1px solid #d8d8d8;
    border-radius: 10px;

    color: #111;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}

#clearMultiCity {
    height: 42px;

    padding: 0;

    border: none;
    background: transparent;

    color: #555;

    font-size: 13px;

    cursor: pointer;
}

/* SEARCH */
.search-button {
    background: #111 !important;
    color: #fff !important;
    border: none !important;
}

/* MOBILE */
@media (max-width: 900px) {

    .multi-city-row {
        grid-template-columns: 1fr !important;
    }

    .multi-city-cabin {
        width: 100%;
    }

}

/* ========================================
   YVORA - MULTI CITY REAL FIX
======================================== */

/* When Multi City routes exist, the whole
   search area must stop being a grid */
.search-panel:has(#multiCityRoutes) {
    display: block !important;
    width: min(1120px, 94%) !important;
    max-width: 1120px !important;
    box-sizing: border-box !important;
}

/* IMPORTANT: remove the original 7-column grid */
.search-panel:has(#multiCityRoutes) .search-fields {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Multi City wrapper */
.search-panel:has(#multiCityRoutes) #multiCityFields {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Title */
.search-panel:has(#multiCityRoutes) .multi-city-title {
    width: 100% !important;
    margin-bottom: 18px !important;
}

/* Flight list */
.search-panel:has(#multiCityRoutes) #multiCityRoutes {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
}

/* Flight card */
.search-panel:has(#multiCityRoutes) .multi-city-flight {
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    padding: 18px 42px 18px 20px !important;
    margin: 0 !important;

    box-sizing: border-box !important;

    background: #fff !important;
    border: 1px solid #e4e4e4 !important;
    border-radius: 14px !important;

    overflow: visible !important;
}

/* Flight row */
.search-panel:has(#multiCityRoutes) .multi-city-row {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(0, 1.2fr)
        minmax(150px, .8fr)
        minmax(120px, .65fr) !important;

    gap: 14px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
}

/* Fields */
.search-panel:has(#multiCityRoutes) .multi-city-row .search-field {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

/* Labels */
.search-panel:has(#multiCityRoutes) .multi-city-row label {
    display: block !important;

    margin-bottom: 7px !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    letter-spacing: 1.3px !important;
    text-transform: uppercase !important;

    color: #888 !important;
}

/* Inputs */
.search-panel:has(#multiCityRoutes) .multi-city-row input {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 46px !important;

    padding: 0 14px !important;

    box-sizing: border-box !important;

    background: #f8f8f8 !important;

    border: 1px solid #e1e1e1 !important;
    border-radius: 10px !important;

    outline: none !important;
}

/* Economy */
.search-panel:has(#multiCityRoutes) .multi-city-cabin {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 46px !important;

    padding: 0 14px !important;

    box-sizing: border-box !important;

    background: #f8f8f8 !important;

    border: 1px solid #e1e1e1 !important;
    border-radius: 10px !important;

    color: #222 !important;
    font-size: 14px !important;
}

/* X */
.search-panel:has(#multiCityRoutes) .remove-multi-city {
    position: absolute !important;

    right: 8px !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    width: 28px !important;
    height: 28px !important;

    border: none !important;
    background: transparent !important;

    color: #222 !important;

    font-size: 20px !important;

    cursor: pointer !important;
}

/* Actions */
.search-panel:has(#multiCityRoutes) .multi-city-actions {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;

    margin-top: 16px !important;
}

/* Add / Clear */
.search-panel:has(#multiCityRoutes) .multi-city-left-actions {
    display: flex !important;
    align-items: center !important;
    gap: 28px !important;
}

.search-panel:has(#multiCityRoutes) #addMultiCity {
    height: 42px !important;

    padding: 0 16px !important;

    background: #fff !important;

    border: 1px solid #d8d8d8 !important;
    border-radius: 10px !important;

    color: #111 !important;

    font-size: 13px !important;
    font-weight: 600 !important;
}

.search-panel:has(#multiCityRoutes) #clearMultiCity {
    height: 42px !important;

    padding: 0 !important;

    border: none !important;
    background: transparent !important;

    color: #555 !important;

    font-size: 13px !important;
}

/* Search button */
.search-panel:has(#multiCityRoutes) .search-button {
    display: block !important;

    width: 156px !important;
    height: 50px !important;

    margin-top: 16px !important;

    background: #111 !important;
    color: #fff !important;

    border: none !important;
    border-radius: 12px !important;

    font-size: 14px !important;
    font-weight: 600 !important;
}

/* Mobile */
@media (max-width: 900px) {

    .search-panel:has(#multiCityRoutes) {
        width: 94% !important;
        max-width: 1120px !important;
    }

    .search-panel:has(#multiCityRoutes) .multi-city-row {
        grid-template-columns: 1fr !important;
    }

    .search-panel:has(#multiCityRoutes) .search-button {
        width: 100% !important;
    }
}
/* Keep flight details readable inside dark booking/payment summaries. */
.booking-summary [aria-label="Round-trip flights"],
.payment-summary [aria-label="Round-trip flights"] {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}
.booking-summary .flight-detail-card,
.payment-summary .flight-detail-card {
    background: #fff;
    color: #1f2937;
    padding: 20px;
    min-width: 0;
}
.booking-summary .flight-detail-card h2,
.payment-summary .flight-detail-card h2 {
    color: #111827;
    font-size: 20px;
    margin: 0 0 14px;
}
.booking-summary .flight-detail-card p,
.payment-summary .flight-detail-card p,
.booking-summary .flight-detail-card strong,
.payment-summary .flight-detail-card strong {
    color: #1f2937;
    overflow-wrap: anywhere;
}
.booking-summary .flight-detail-card p,
.payment-summary .flight-detail-card p {
    margin: 8px 0;
    font-size: 15px;
    line-height: 1.5;
}

/* Mobile search: one column, including after switching trip types. */
@media (max-width: 700px) {
    .hero .search-panel,
    .hero .search-panel:has(#multiCityRoutes) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        padding: 16px;
        box-sizing: border-box;
    }
    .hero .search-panel .search-fields {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-flow: row;
        gap: 10px;
        width: 100%;
        min-width: 0;
        align-items: stretch;
    }
    .hero .search-fields > * {
        grid-column: 1 / -1;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    .hero .search-field {
        width: 100%;
        min-width: 0;
        padding: 12px;
        text-align: left;
    }
    .hero .search-field input,
    .hero .search-field select {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 44px;
        font-size: 16px;
        box-sizing: border-box;
    }
    .hero .search-panel .search-button {
        width: 100% !important;
        min-height: 48px;
        margin: 8px 0 0;
    }
    .hero .search-panel .swap {
        position: static;
        justify-self: center;
        margin: 0;
        width: 44px;
        height: 44px;
    }
    .hero .trip-type {
        display: flex;
        width: 100%;
        box-sizing: border-box;
    }
    .hero .trip-option {
        flex: 1 1 0;
        min-width: 0;
        min-height: 44px;
        padding: 10px 4px;
        font-size: 12px;
    }
    .hero .traveller-menu {
        left: 0;
        right: 0;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    .hero .search-panel:has(#multiCityRoutes) .multi-city-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .hero .multi-city-actions,
    .hero .multi-city-left-actions {
        flex-wrap: wrap;
        gap: 10px;
    }
}

#apiSearchStatus {
    margin: 12px 0 0;
    font-size: 13px;
    color: #6b7280;
}

#apiSearchStatus[data-type="live"] {
    color: #047857;
}

#apiSearchStatus[data-type="loading"] {
    color: #1d4ed8;
}

.auth-page {
    min-height: 100vh;
    background: #f6f6f3;
}

.auth-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px clamp(24px, 6vw, 96px);
    background: #fff;
    border-bottom: 1px solid #e7e7e2;
}

.auth-header .logo,
.auth-header-link {
    color: #111;
    text-decoration: none;
}

.auth-header-link {
    font-weight: 700;
}

.auth-main {
    display: grid;
    min-height: calc(100vh - 100px);
    place-items: center;
    padding: 48px 20px;
}

.auth-card {
    width: min(100%, 520px);
    padding: clamp(28px, 5vw, 52px);
    border: 1px solid #deded8;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.07);
}

.auth-card h1 {
    margin: 8px 0 12px;
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.05;
}

.auth-eyebrow {
    margin: 0;
    color: #147a51;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.auth-intro,
.auth-switch {
    color: #666;
}

.auth-form {
    display: grid;
    gap: 18px;
    margin-top: 30px;
}

.auth-form label {
    display: grid;
    gap: 8px;
    font-weight: 700;
}

.auth-form input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1px solid #cfcfca;
    border-radius: 10px;
    font: inherit;
}

.auth-form input:focus {
    border-color: #111;
    outline: 2px solid rgba(17, 17, 17, .12);
}

.auth-submit {
    min-height: 52px;
    border: 0;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.auth-submit:disabled {
    cursor: wait;
    opacity: .55;
}

.auth-message {
    min-height: 22px;
    margin: 0;
    color: #b42318;
}

.auth-message.success { color: #147a51; }
.auth-message.info { color: #555; }
.auth-switch { margin: 24px 0 0; }
.auth-switch a { color: #111; font-weight: 800; }

.auth-forgot-link {
    width: max-content;
    margin-top: -8px;
    color: #555;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.auth-forgot-link:hover {
    color: #111;
    text-decoration: underline;
}

/* ADMIN */
.admin-page { min-height: 100vh; background: #f6f6f3; color: #111; }
.admin-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px clamp(22px, 5vw, 80px); background: #fff; border-bottom: 1px solid #e5e5df;
}
.admin-header .logo, .admin-header-actions a { color: #111; text-decoration: none; }
.admin-header-actions { display: flex; align-items: center; gap: 22px; font-weight: 700; }
.admin-main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 56px 0 80px; }
.admin-hero, .admin-panel-title { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.admin-hero h1 { margin: 7px 0 10px; font-size: clamp(38px, 6vw, 68px); letter-spacing: -.055em; }
.admin-hero > div > p:last-child { color: #666; }
.admin-refresh {
    min-height: 48px; padding: 0 22px; border: 0; border-radius: 10px;
    background: #111; color: #fff; font: inherit; font-weight: 800; cursor: pointer;
}
.admin-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 32px 0;
}
.admin-stats article, .admin-panel {
    border: 1px solid #deded8; border-radius: 20px; background: #fff;
}
.admin-stats article { display: grid; gap: 12px; padding: 24px; }
.admin-stats span { color: #6b6b66; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.admin-stats strong { font-size: 38px; line-height: 1; }
.admin-panel { margin-top: 22px; padding: 28px; }
.admin-panel-title h2 { margin: 6px 0 0; font-size: 28px; }
.admin-panel-title input {
    width: min(100%, 310px); min-height: 46px; padding: 0 15px;
    border: 1px solid #cecec8; border-radius: 10px; font: inherit;
}
.admin-table-wrap { margin-top: 24px; overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; text-align: left; }
.admin-table th {
    padding: 12px; border-bottom: 1px solid #deded8; color: #74746f;
    font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.admin-table td { padding: 16px 12px; border-bottom: 1px solid #eeeeea; vertical-align: top; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table td small { display: block; margin-top: 5px; color: #74746f; }
.admin-status {
    display: inline-block; padding: 6px 10px; border-radius: 999px;
    background: #eaf8ef; color: #147a51; font-size: 12px; font-weight: 800;
}
.admin-empty { margin: 28px 0 4px; color: #777; text-align: center; }
.admin-denied {
    width: min(560px, calc(100% - 40px)); margin: 100px auto; padding: 44px;
    border: 1px solid #deded8; border-radius: 22px; background: #fff; text-align: center;
}
.admin-denied .auth-submit { display: inline-grid; place-items: center; margin-top: 18px; padding: 0 22px; text-decoration: none; }

@media (max-width: 760px) {
    .admin-header, .admin-hero, .admin-panel-title { align-items: stretch; flex-direction: column; }
    .admin-header { gap: 18px; }
    .admin-header-actions { justify-content: space-between; }
    .admin-main { width: min(100% - 24px, 1180px); padding-top: 34px; }
    .admin-stats { grid-template-columns: repeat(2, 1fr); }
    .admin-panel { padding: 20px 14px; }
    .admin-panel-title input { width: 100%; box-sizing: border-box; }
}

/* Final mobile safeguards used across every YVORA page. */
img,
video,
svg {
    max-width: 100%;
}

body {
    overflow-x: hidden;
}

@media (max-width: 700px) {
    header nav {
        display: none;
    }

    header {
        width: 100%;
    }

    .header-actions {
        gap: 8px;
    }

    .signup-button {
        min-height: 44px;
        padding-inline: 14px;
    }

    .detail-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .selected-flight-details .detail-row strong {
        width: 100%;
        text-align: left;
    }

    .booking-provider-link {
        align-items: flex-start;
        flex-direction: column;
        overflow-wrap: anywhere;
    }

    .profile-photo-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .admin-stats {
        grid-template-columns: 1fr;
    }
}

/* HOTELS AND CARS */
nav a.active { font-weight: 800; }
.vertical-page { background: #f5f5f2; }
.vertical-wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.vertical-hero { position: relative; overflow: hidden; padding: clamp(72px, 9vw, 130px) 0 76px; color: #fff; background: #151515; }
.vertical-hero::before { content: ""; position: absolute; inset: 76px 0 auto; height: 420px; pointer-events: none; opacity: .48; }
.hotel-hero::before { background: radial-gradient(circle at 82% 20%, #5f7465 0, transparent 36%), linear-gradient(125deg, transparent 52%, rgba(255,255,255,.08)); }
.car-hero::before { background: radial-gradient(circle at 82% 20%, #815f3d 0, transparent 36%), linear-gradient(125deg, transparent 52%, rgba(255,255,255,.08)); }
.vertical-hero .vertical-wrap { position: relative; z-index: 1; }
.vertical-hero .section-label { color: #c9d4cc; }
.vertical-hero h1 { max-width: 800px; margin: 12px 0 18px; font-size: clamp(48px, 7vw, 88px); line-height: .98; letter-spacing: -.055em; }
.vertical-hero > .vertical-wrap > p:not(.section-label):not(.vertical-status) { max-width: 640px; color: #cdcdca; font-size: 18px; }
.vertical-search { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr) auto; gap: 8px; margin-top: 48px; padding: 10px; border: 1px solid rgba(255,255,255,.17); border-radius: 20px; background: #fff; box-shadow: 0 24px 70px rgba(0,0,0,.28); color: #111; }
.car-search { grid-template-columns: 1.4fr repeat(5, .85fr) auto; }
.vertical-field { display: grid; align-content: center; min-width: 0; padding: 11px 14px; border-right: 1px solid #e8e8e3; }
.vertical-field span { margin-bottom: 4px; color: #777; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.vertical-field input, .vertical-field select { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #111; font-size: 14px; font-weight: 650; }
.vertical-submit { min-height: 58px; padding: 0 22px; border: 0; border-radius: 13px; background: #111; color: #fff; font-weight: 800; }
.vertical-submit:hover { background: #2b2b2b; }
.vertical-status { min-height: 24px; margin: 16px 8px 0; color: #d7d7d3; font-size: 14px; }
.vertical-status[data-type="error"] { color: #ffb6ae; }
.vertical-status[data-type="success"] { color: #a9e7c6; }
.vertical-content { padding: 86px 0 100px; }
.vertical-heading { display: grid; grid-template-columns: .7fr 1.3fr; align-items: end; gap: 30px; }
.vertical-heading h2 { max-width: 720px; font-size: clamp(38px, 5vw, 64px); line-height: 1.02; letter-spacing: -.045em; }
.vertical-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.vertical-feature-grid article { min-height: 245px; padding: 28px; border: 1px solid #dddcd6; border-radius: 20px; background: #fff; }
.vertical-feature-grid span { color: #777; font-size: 13px; font-weight: 800; }
.vertical-feature-grid h3 { margin: 48px 0 10px; font-size: 23px; }
.vertical-feature-grid p, .provider-note p { color: #666; }
.provider-note { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 18px; padding: 28px; border-radius: 20px; background: #e8e8e2; }
.provider-note strong { font-size: 18px; }
.provider-note p { max-width: 660px; }

@media (max-width: 1040px) {
  .vertical-search, .car-search { grid-template-columns: repeat(2, 1fr); }
  .vertical-field-wide { grid-column: 1 / -1; }
  .vertical-submit { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .vertical-wrap { width: min(100% - 24px, 1180px); }
  .vertical-hero { padding-top: 56px; }
  .vertical-search, .car-search { grid-template-columns: 1fr; margin-top: 34px; }
  .vertical-field, .vertical-field-wide, .vertical-submit { grid-column: auto; border-right: 0; border-bottom: 1px solid #e8e8e3; }
  .vertical-heading { grid-template-columns: 1fr; }
  .vertical-feature-grid { grid-template-columns: 1fr; }
  .vertical-feature-grid article { min-height: 200px; }
  .provider-note { align-items: flex-start; flex-direction: column; }
}