.auth-overlay{

    position:fixed;
    inset:0;

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

    background:rgba(0,0,0,.45);
    backdrop-filter:blur(8px);

    z-index:9999;
}

#authError:has(#openTravelSetupFromLogin){
    position:sticky;
    bottom:0;
    z-index:20;

    margin-top:20px;
    padding:14px 0 4px;

    background:white;
    box-shadow:0 -8px 15px rgba(255,255,255,.95);
}

.hidden {
    display: none !important;
}

.auth-modal {

    width:min(94%,560px);

     max-height:90vh;

    overflow-y:auto;

    background:
    linear-gradient(
        rgba(255,255,255,.97),
        rgba(255,255,255,.97)
    ),
    repeating-linear-gradient(
        45deg,
        transparent,
        transparent 8px,
        rgba(0,0,0,.008) 8px,
        rgba(0,0,0,.008) 9px
    );

    border:2px solid rgba(205,163,73,.35);

    border-radius:24px;

    box-shadow:0 24px 55px rgba(0,0,0,.10);

    padding:28px 24px 28px 34px;

}

.auth-modal::-webkit-scrollbar {

    width: 10px;

}

.auth-modal::-webkit-scrollbar-track {

    background: transparent;

}

.auth-modal::-webkit-scrollbar-thumb {

    background: rgba(205,163,73,.45);

    border-radius: 999px;

    border: 2px solid transparent;

    background-clip: padding-box;

}

.auth-modal::-webkit-scrollbar-thumb:hover {

    background: rgba(205,163,73,.7);

    background-clip: padding-box;

}

.auth-modal label{

    display:block;

    width:80%;

}

.auth-modal h2 {

    margin: 0;

    color:#111;

    text-align:center;

    font-size: 1.1rem;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    line-height: 1.2;

}

.auth-subtitle {

    margin: 5px 0 18px;

    text-align: center;

    color: #cda349 !important;

    font-size: .8rem;

    font-weight: 600;

    letter-spacing: 1px;

}

.auth-divider {

    width: 70px;

    height: 2px;

    margin: 24px auto;

    background: rgba(205,163,73,.7);

    border-radius: 2px;

}

.auth-intro {

    margin-bottom: 10px;

    text-align:center;

    line-height:1.55;

    color:#555;

    font-size:.82rem;

}

.auth-intro strong {

    color: #222;

    font-size: 1.1rem;

}

.auth-modal p {

    color: #555;
    text-align: center;
    line-height: 1.6;
    margin-bottom: 5px;

}

.auth-modal label {

    color: #111;
    font-weight: 500;
    display: block;
    margin-bottom: 3px;
    font-size: .9rem;

}

.auth-field{

    margin-bottom:1px;

    display:flex;

    flex-direction:column;

    align-items:center;
}

.auth-field label{

    margin-bottom:6px;

    font-size:.8rem;

}

.auth-field input {

    width:80%;

    font-size:.8rem;

    padding:10px 10px;

    border-radius:12px;

    border:1px solid #d9d9d9;

    background:#fcfcfc;

    transition:.25s;

}

.auth-field input:focus {

    outline:none;

    border-color:#cda349;

    box-shadow:0 0 0 4px rgba(205,163,73,.12);

}

.auth-error{

    margin-top:20px;

    text-align:center;

    color:#c62828;
}

#loginForm button {

    width: 100%;

    height: 54px;

    margin-top: 10px;

    background: #1f1f1f;

    color: #cda349 !important;

    border: 2px solid #cda349;

    border-radius: 10px;

    font-size: 1rem;

    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;

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

}

#loginForm button:hover {

    background:#cda349;

    color:#111 !important;

    transform:translateY(-2px);

    box-shadow:0 10px 22px rgba(0,0,0,.18);

}

@media (max-width: 600px) {

    .auth-modal {

        width: calc(100% - 32px);

        padding: 26px;

        border-radius:20px;

    }

    .auth-modal h2 {

        font-size:1rem;

        letter-spacing:1px;

    }

    .auth-subtitle {

        font-size:.95rem;

    }

    .auth-intro strong {

        font-size:1rem;

    }

    .auth-field input {

        padding:14px;

    }

}

.auth-button{

    width:100%;

    height:40px;

    margin-top:14px;

    background:#1f1f1f;

    color:#cda349;

    border:2px solid #cda349;

    border-radius:8px;

    font-size:.85rem;

    font-weight:600;

    letter-spacing:1.5px;

    text-transform:uppercase;

    cursor:pointer;

    transition:
        background .3s ease,
        color .3s ease,
        transform .2s ease;

}

.auth-button:hover{

    background:#cda349;

    color:#1f1f1f;

    transform:translateY(-2px);

}

.auth-button:active{

    transform:translateY(0);

}

.auth-button:disabled,
.add-guest-link:disabled{

    opacity:.45;

    cursor:not-allowed;

    pointer-events:none;

}

@media (max-width: 600px) {

    .auth-modal {
        width: calc(100% - 32px);
        padding: 26px;
        border-radius: 20px;
        max-height: 90svh;
    }

    .auth-modal h2 {
        font-size: 1rem;
        letter-spacing: 1px;
    }

    .auth-subtitle {
        font-size: .95rem;
    }

    .auth-intro strong {
        font-size: 1rem;
    }

    .auth-field input {
        font-size: 16px;
        padding: 14px;
    }

}

.guest-list{

    max-height:180px;

    overflow-y:auto;

    margin-bottom:12px;

}

.add-guest-link{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:100%;

    margin:12px 0 12px;

    padding:12px;

    background:none;

    border:none;

    color:#cda349;

    font-size:.8rem;

    font-weight:600;

    cursor:pointer;

    transition:opacity .25s ease;

}

.add-guest-link:hover{

    opacity:.75;

}

.add-guest-link span{

    font-size:1.3rem;

    line-height:1;

}

.guest-pill {

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

    width: 80%;
    margin: 0 auto;

    padding: 9px 0;

    border-bottom: 1px solid rgba(205, 163, 73, .18);

}

.guest-pill span{

    color:#222;

    font-size:.8rem;

    font-weight:500;

}

.guest-placeholder{

    text-align:center;

    color:#888;

    font-style:italic;

}

/* Remove guest */

.remove-guest {

    flex-shrink: 0;

    margin-left: 10px;

    padding: 2px;

    border: none;

    background: transparent;

    color: #aaa;

    font-size: 1rem;

    cursor: pointer;

    transition: color .2s ease;

}

.remove-guest:hover {

    color: #cda349;

}

.guest-summary{

    margin:10px 0;

}

.guest-summary label{

    font-size:.82rem;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#777;

}

.guest-help{

    margin:12px 0 8px;

    text-align:center;

    font-size:.82rem;

    color:#777;

}

/* ==========================================================
   New Guest - Adult / Child Selection
   ========================================================== */
.guest-type {

    display: flex;

    align-items: center;

    gap: 4px;

    margin: 0;
}

.guest-type-button {

    padding: 5px 10px;

    border: 1px solid rgba(205, 163, 73, .35);

    border-radius: 6px;

    background: #fff;

    color: #777;

    font-family: inherit;

    font-size: .68rem;

    font-weight: 600;

    cursor: pointer;

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

.guest-type-button:hover {

    border-color: #cda349;

    color: #cda349;

}

.guest-type-button.guest-type-active {

    background: #cda349;

    border-color: #cda349;

    color: #fff;

}

.guest-type-selection {

    width: 80%;
    margin: 8px auto 14px;

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

    gap: 8px;

    flex-wrap: wrap;
}

.guest-type-label {

    width: 100% !important;

    margin: 0 0 4px !important;

    text-align: left;

    color: #555 !important;

    font-size: .75rem !important;

    font-weight: 600 !important;

    letter-spacing: .4px;
}

.guest-type-selection label {

    width: auto !important;

    margin: 0 !important;

    padding: 7px 16px;

    border: 1px solid rgba(205, 163, 73, .35);

    border-radius: 7px;

    background: #fff;

    color: #777 !important;

    font-size: .75rem !important;

    font-weight: 600 !important;

    cursor: pointer;

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

.guest-type-selection label:hover {

    border-color: #cda349;

    color: #cda349 !important;

}

.guest-type-selection input[type="radio"] {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}

/* Selected option */

.guest-type-selection label:has(input:checked) {

    background: #cda349;

    border-color: #cda349;

    color: #fff !important;

    box-shadow: 0 2px 6px rgba(205, 163, 73, .18);

}

.guest-details {

    display: flex;
    align-items: center;

    gap: 14px;

    min-width: 0;
}

.guest-name {

    display: flex;
    align-items: center;

    gap: 8px;

    white-space: nowrap;

    color: #333;

    font-size: .85rem;

    font-weight: 500;

}

.guest-tick {

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

    width: 20px;
    height: 20px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #cda349;

    color: #fff;

    font-size: .7rem;
    font-weight: 700;

}

.guest-add-yourself {
    width: 100%;
    margin-top: 12px;
    padding: 10px 16px;
    border: 1px solid rgba(205,163,73,.45);
    border-radius: 8px;
    background: transparent;
    color: var(--gold);
    font-family: var(--body-font);
    font-size: .82rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: .25s ease;
}

.guest-add-yourself:hover {
    background: rgba(205,163,73,.08);
    border-color: var(--gold);
}

.guest-add-yourself:active {
    transform: scale(.98);
}

.add-guest-submit {
    padding: 10px 24px;
    border: 1px solid var(--gold);
    border-radius: 6px;
    background: var(--gold);
    color: #fff;
    font-family: var(--body-font);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: .25s ease;
}

.add-guest-submit:hover {
    background: #b98f38;
    border-color: #b98f38;
}

.add-guest-submit:active {
    transform: scale(.98);
}

.add-guest-back {
    padding: 10px 20px;
    border: 1px solid rgba(205,163,73,.45);
    border-radius: 6px;
    background: transparent;
    color: var(--gold);
    font-family: var(--body-font);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: .25s ease;
}

.add-guest-back:hover {
    background: rgba(205,163,73,.08);
    border-color: var(--gold);
}

.add-guest-back:active {
    transform: scale(.98);
}

#addGuestFirstName,
#addGuestLastName {
    width: 165px;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid rgba(205,163,73,.45);
    border-radius: 6px;
    background: #fff;
    color: #333;
    font-family: var(--body-font);
    font-size: .82rem;
    outline: none;
    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

#addGuestFirstName::placeholder,
#addGuestLastName::placeholder {
    color: #999;
}

#addGuestFirstName:focus,
#addGuestLastName:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(205,163,73,.10);
}

.add-guest-fields {
    display: flex;
    justify-content: center;
    gap: 6px;
}

@media (max-width: 600px) {
    #addGuestFirstName,
    #addGuestLastName {
        width: 100%;
    }
}

#travelStep2 h3{

    margin:0 0 12px;

    color:#111;

    text-align:center;

    font-size:.8rem;

    font-weight:700;

    line-height:1.3;

}

#travelStep2 .auth-intro{

    margin-bottom:10px;

}

.wizard-progress{

    display:flex;

    align-items:flex-start;

    justify-content:center;

    margin:0 0 20px;

}

.wizard-progress.hidden{

    display:none;

}

.wizard-step{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:6px;

    min-width:80px;

}

.wizard-dot{

    width:30px;

    height:30px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px solid rgba(205,163,73,.35);

    background:#fff;

    color:#999;

    font-weight:700;

    transition:.3s ease;

}

.wizard-step span{

    font-size:.85rem;

    color:#777;

}

.wizard-line{

    flex:1;

    height:2px;

    margin:18px 12px 0;

    background:#e5e5e5;

    position:relative;

    overflow:hidden;

}

.wizard-line::after{

    content:"";

    position:absolute;

    inset:0;

    width:0;

    background:#cda349;

    transition:width .3s ease;

}

.wizard-dot svg{

    width:16px;

    height:16px;

}

.wizard-step.active .wizard-dot{

    background:#cda349;

    border-color:#cda349;

    color:#fff;

}

.wizard-step.active span{

    color:#222;

    font-weight:600;

}

.wizard-buttons{

    display:flex;

    gap:14px;

    justify-content:center;

    margin-top: 20px;

    position:sticky;
    bottom:0;
    z-index:20;

    padding:14px 0 4px;
    background:white;
    box-shadow:0 -8px 15px rgba(255,255,255,.95);

}

.wizard-buttons .auth-button{

    flex:0 1 180px;

    margin-top:0;

}

#travelWizard h3 {

    color: #222;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.75rem;

}

.auth-button-secondary{

    background:#fff;

    color:#cda349;

    border:2px solid #cda349;

}

.auth-button-secondary:hover{

    background:#cda349;

    color:#1f1f1f;

}

.flight-selection{

    display:grid;

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

    gap:16px;

    margin:20px 0;

}

.flight-card{

    width:100%;

    min-height:170px;

    padding:18px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    text-align:center;

    background:#fff;

    border:2px solid rgba(205,163,73,.25);

    border-radius:14px;

    cursor:pointer;

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

}

.flight-card:hover{

    border-color:#cda349;

    transform:translateY(-2px);

}

.flight-card-number{

    font-size:1rem;

    font-weight:700;

}

.flight-card-route{

    margin-top:4px;

    color:#666;

}

.flight-card-time{

    margin-top:4px;

    font-size:.9rem;

    color:#888;

}

.flight-card.selected{

    border-color:#cda349;

    background:#fffdf7;

    box-shadow:0 8px 20px rgba(205,163,73,.18);

    transform:translateY(-2px);

}

.flight-card-header{

    display:flex;

    justify-content:center;

    position:relative;

    margin-bottom:18px;

}

.flight-selected{

    position:absolute;

    top:-2px;

    right:-2px;

    display:flex;

    align-items:center;

    justify-content:center;

    width:15px;

    height:15px;

    border-radius:50%;

    background:#cda349;

    color:#fff;

    font-weight:700;

}

.manual-flight{

    grid-column:1 / -1;

    min-height:auto;

    padding:18px 22px;

    text-align:left;

    border-style:dashed;

}

.manual-flight-header{

    display:flex;

    align-items:center;

    gap:16px;

}

.manual-flight-content{

    opacity:0;

    max-height:0;

    overflow:hidden;

    transition:
        max-height .35s ease,
        opacity .25s ease;

}

.manual-flight.expanded .manual-flight-content{

    opacity:1;

    max-height:600px;

}

.manual-flight-arrow{

    display:inline-block;

    color:#cda349;

    font-size:1.2rem;

    transition:transform .25s ease;

}

.manual-flight.expanded .manual-flight-arrow{

    transform:rotate(180deg);

}

.manual-flight-title{

    font-weight:700;

    color:#222;

    margin-bottom:4px;

}

.manual-flight-subtitle{

    color:#777;

    font-size:.9rem;

}

.manual-flight-form{

    margin-top:12px;

    display:flex;

    flex-direction:column;

    gap:6px;

}

.manual-flight-form input{

    padding:10px;

    border:1px solid #ddd;

    border-radius:8px;

}

@media (max-width: 768px) {

    .flight-selection {
        grid-template-columns: 1fr;
    }

}

.date-time-row{

    display:flex;

    gap:10px;

}

.date-time-row input{

    flex:1;

}

.review-section{

    background:#fff;

    border:1px solid rgba(205,163,73,.18);

    border-radius:14px;

    padding:20px;

    box-shadow:0 4px 12px rgba(0,0,0,.04);

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

}

.review-section h3 {
    justify-content: center;
    text-align: center;
}

.review-section:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(0,0,0,.08);

}

.review-section:last-child{

    border-bottom:none;

}


.review-section p{

    margin:2px 0;

    font-size:.9rem;

    line-height:1.35;

}

.review-flight{

    margin-top:10px;

    text-align:left;

}

.review-flight-number{

    font-size:1.4rem;

    text-align: center;

    font-weight:700;

    color:#222;

    margin-bottom:8px;

}

.review-flight-route{

    font-size:.8rem;

    text-align: center;

    color:#222;

    font-weight:700;

    letter-spacing:.08em;

    margin-bottom:8px;

}

.review-flight-time{

    color:#777;

    font-size:.9rem;

    text-align: center;

}

.review-section h3{

    display:flex;

    align-items:center;

    gap:10px;

    margin:0 0 18px;

    color:#222;

    font-size:1rem;

    font-weight:700;

}

.review-plane{

    display:flex;

    align-items:center;

    justify-content:center;

    color:#cda349;

}

.review-plane svg{

    width:20px;

    height:20px;

    stroke-width:2;

}

.review-flight-icon{

    width:20px;

    height:20px;

    color:#cda349;

    stroke-width:2;

    flex-shrink:0;

}

.review-guests{

    display:flex;

    flex-direction:column;

    align-items: center;

    font-weight:500;

    gap:8px;

    margin-top:4px;

}

.review-guest{

    padding-left:0px;

    color:#444;

    font-size:.95rem;

    text-align: center;

    line-height:1.6;

}

.review-grid{

    display:grid;

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

    gap:24px;

    margin-top:32px;

}

.journey-success-overlay{

    position:fixed;
    inset:0;

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

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(8px);

    z-index:9999;

    animation:fadeIn .35s ease;

}

.journey-success-card{

    width:min(90%,420px);

    background:#fff;

    border-radius:20px;

    padding:48px 36px;

    text-align:center;

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

}

.journey-success-icon{

    width:80px;
    height:80px;

    margin:0 auto 24px;

    border-radius:50%;

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

    background:#cda349;
    color:#fff;

}

.journey-success-icon svg{

    width:42px;
    height:42px;

}

.journey-success-card h2{

    margin:0 0 12px;

}

.journey-success-card p{

    margin:0;
    color:#666;

}

.journey-success-card h2{

    margin:0 0 12px;
    color:#222;

}

.journey-success-card p{

    margin:0;
    color:#666;

}

.journey-success-loader {

    width: 24px;
    height: 24px;

    margin: 20px auto 0;

    border: 2px solid rgba(196, 164, 92, 0.25);

    border-top-color: #c4a45c;

    border-radius: 50%;

    animation: journeyLoader 0.9s linear infinite;

}

@keyframes journeyLoader {

    to {
        transform: rotate(360deg);
    }

}

/* ==========================================================
   Travel Wizard Transitions
   ========================================================== */

.travel-step {
    will-change: opacity, transform;
}

.wizard-step-exit {
    animation: wizardStepExit 0.2s ease forwards;
}

.wizard-step-enter {
    animation: wizardStepEnter 0.3s ease forwards;
}

.wizard-step-exit-reverse {
    animation: wizardStepExitReverse 0.2s ease forwards;
}

.wizard-step-enter-reverse {
    animation: wizardStepEnterReverse 0.3s ease forwards;
}

@keyframes wizardStepExit {

    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-18px);
    }

}

@keyframes wizardStepEnter {

    from {
        opacity: 0;
        transform: translateX(18px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}

@keyframes wizardStepExitReverse {

    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(18px);
    }

}

@keyframes wizardStepEnterReverse {

    from {
        opacity: 0;
        transform: translateX(-18px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}

/* ==========================================================
   Guest Selection
   ========================================================== */

.guest-selection {
    text-align: center;
    width: 100%;
}

.guest-selection-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(100%, 360px);
    margin: 24px auto 20px;
}

.guest-selection-card {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 16px 20px;

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

    border: 1px solid rgba(210, 166, 70, 0.45);
    border-radius: 12px;

    font-family: inherit;
    font-size: 16px;
    color: #333;

    cursor: pointer;

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

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

    border-color: #d2a646;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.08);
}

.guest-selection-card:active {
    transform: translateY(0);
}

.guest-selection-name {
    font-weight: 600;
}

.guest-selection-arrow {
    font-size: 20px;
    color: #d2a646;
}

/* ======================================================
   LOGIN ERROR — ENTER TRAVEL DETAILS BUTTON
   ====================================================== */

#openTravelSetupFromLogin {
    width:100%;
    max-width:100%;
    min-height:54px;
    height:auto;
    padding:14px 20px;
    box-sizing:border-box;
    white-space:nowrap;
    font-size:1rem;
    letter-spacing:3px;
}

@media (max-width:600px) {

    #openTravelSetupFromLogin {
        padding:14px 12px;
        font-size:.95rem;
        letter-spacing:2.5px;
    }

}

/* ======================================================
   MOBILE — JOURNEY REVIEW
   ====================================================== */

@media (max-width: 768px) {

    .review-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 24px;
    }

}