/* PIQNGO — Travel Request form & wizard stepper
   Styled to match the Travelik frontend design tokens (see frontend-assets/css/custom.css) */

.request-section {
    position: relative;
    z-index: 1;
    padding: 120px 0;
    background: var(--theme-bg-color4, #EDF5F6);
}

.request-section .section-main-title,
.request-section .section-desc {
    text-align: center;
    margin: 0 auto;
}

.request-section .section-title h1.text-effect {
    color: var(--title-color2, #122327);
}

.request-section .section-desc {
    max-width: 640px;
    margin-top: 15px;
    color: var(--text-color);
}

.request-form {
    max-width: 900px;
    margin: 60px auto 0;
}

/* Wizard progress */
.wizard-progress {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.wizard-progress__bar {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: var(--color-border);
    overflow: hidden;
}

.wizard-progress__fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: var(--primary-color);
    transition: width 0.4s ease-in-out;
}

.wizard-progress__label {
    flex-shrink: 0;
    font-family: var(--title-font);
    letter-spacing: 0.5px;
    color: var(--title-color2, #122327);
    font-size: 16px;
}

/* Wizard steps: hidden until active */
.wizard-step {
    display: none;
}

.wizard-step.is-active {
    display: block;
    animation: request-fade-in 0.35s ease-in-out;
}

@keyframes request-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Form section card */
.form-section {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 35px;
    margin-bottom: 25px;
}

.form-section__header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

.form-section__icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--theme-bg-color3, #D6EEF3);
    color: var(--primary-color);
    font-size: 18px;
}

.form-section__title {
    font-family: var(--title-font);
    letter-spacing: 0.5px;
    font-size: 22px;
    color: var(--title-color2, #122327);
    margin: 0 0 4px;
}

.form-section__hint {
    color: var(--text-color);
    font-size: 14px;
    margin: 0;
}

.form-section__step {
    margin-left: auto;
    flex-shrink: 0;
    font-family: var(--title-font);
    font-size: 13px;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 999px;
    padding: 4px 14px;
}

/* Grids */
.form-grid {
    display: grid;
    gap: 20px;
}

.form-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.form-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
    .form-grid--2,
    .form-grid--3 {
        grid-template-columns: 1fr;
    }
}

/* Fields */
.field {
    margin-bottom: 18px;
}

.field:last-child {
    margin-bottom: 0;
}

.field__label {
    display: block;
    font-weight: var(--font-weight-medium);
    color: var(--title-color2, #122327);
    margin-bottom: 8px;
    font-size: 14px;
}

.field__help {
    display: block;
    color: var(--text-color);
    font-size: 12px;
    margin-top: 6px;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="date"],
.field input[type="datetime-local"],
.field select,
.field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: var(--text-font);
    font-size: 14px;
    color: var(--title-color2, #122327);
    background: var(--color-white);
    transition: var(--transition);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.field textarea {
    resize: vertical;
}

/* ============================================================
   Validation "danger" state (bootstrap danger = #dc3545)
   Applied to a field via .is-invalid by the wizard's JS.
   ============================================================ */
.error-color {
    color: #dc3545;
}

.request-form .field .is-invalid {
    border-color: #dc3545 !important;
    color: #dc3545 !important;
}

.request-form .field label.is-invalid,
.request-form .field .field__label.is-invalid {
    color: #dc3545;
}

/* The visible airport pickers live in a Select2 wrapper, not on the hidden
   <select>, so the danger border has to be applied to the wrapper. */
.request-form .field .select2-container.is-invalid .select2-selection--single {
    border-color: #dc3545 !important;
}

.request-form .field .select2-container.is-invalid .select2-selection__rendered {
    color: #dc3545;
}

/* Inline validation message shown beneath an invalid field. */
.request-form .field__error {
    display: block;
    margin-top: 6px;
    color: #dc3545;
    font-size: 12px;
    font-weight: 500;
}

.is-hidden {
    display: none !important;
}

/* Route block */
.route-block {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 20px;
    margin: 0;
}

.route-block__legend {
    font-family: var(--title-font);
    font-size: 15px;
    color: var(--primary-color);
    padding: 0 8px;
}

.route-dates-grid {
    margin-top: 20px;
}

/* Multi-city trips */
.multi-city-trips {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.trip-segment {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 20px;
}

.trip-segment__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.trip-segment__title {
    font-family: var(--title-font);
    font-size: 15px;
    letter-spacing: 0.5px;
    color: var(--title-color2, #122327);
}

.trip-segment__remove {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    color: var(--text-color);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    transition: var(--transition);
}

.trip-segment__remove:hover {
    color: #e5484d;
}

.trip-segment .field {
    margin-top: 18px;
}

.add-trip-btn {
    margin-top: 4px;
}

/* Trip type / choice buttons */
.trip-type {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice__content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-color);
    transition: var(--transition);
}

.choice input:checked + .choice__content {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--color-white);
}

/* Pill radios */
.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.pill-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pill-radio span {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-color);
    transition: var(--transition);
}

.pill-radio input:checked + span {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--color-white);
}

/* Travelers / stepper */
.travelers {
    display: grid;
    gap: 16px;
}

.traveler {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.traveler__info strong {
    display: block;
    color: var(--title-color2, #122327);
    font-size: 14px;
}

.traveler__info span {
    color: var(--text-color);
    font-size: 12px;
}

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

.stepper__btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--primary-color);
    background: var(--color-white);
    color: var(--primary-color);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition);
}

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

.stepper__input {
    width: 32px;
    text-align: center;
    border: none;
    font-weight: var(--font-weight-semibold);
    color: var(--title-color2, #122327);
    padding: 0;
}

/* Checkboxes / services */
.service-grid,
.checklist {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (max-width: 767px) {
    .service-grid {
        grid-template-columns: 1fr;
    }
}

.checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkbox__content {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-color);
    transition: var(--transition);
}

.checkbox input:checked + .checkbox__content {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--theme-bg-color3, #D6EEF3);
}

.checkbox--inline {
    display: inline-flex;
}

/* Travel style cards */
.style-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 767px) {
    .style-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.style-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.style-card__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    text-align: center;
    color: var(--text-color);
    transition: var(--transition);
}

.style-card__content i {
    font-size: 20px;
    color: var(--primary-color);
}

.style-card input:checked + .style-card__content {
    border-color: var(--primary-color);
    background: var(--theme-bg-color3, #D6EEF3);
    color: var(--title-color2, #122327);
}

/* Footer / actions */
.request-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 10px;
}

.request-form__note {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
    font-size: 13px;
    margin: 0;
}

.wizard-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

/* Keep the icon and label of the wizard buttons vertically centered and spaced.
   .theme-btn is inline-flex but has no align-items/gap, so without this the
   arrow icon sits off-centre relative to the text. */
.request-form .wizard-nav .theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    line-height: 1;
}

.request-form .theme-btn {
    border: none;
    cursor: pointer;
    font-family: var(--text-font);
    background-color: var(--primary-color);
}

.request-form .theme-btn:hover {
    background: var(--theme-bg-color, #1C2D31);
    color: var(--color-white);
}

.request-form .theme-btn--outline {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

.request-form .theme-btn--outline:hover {
    background: var(--primary-color);
    color: var(--color-white);
}

/* ============================================================
   Select2 (searchable airport pickers on Plan My Trip)
   Overrides the library's default look to match .field inputs.
   ============================================================ */
.field .select2-container {
    width: 100% !important;
}

.field .select2-container--default .select2-selection--single {
    height: auto;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-white);
    transition: var(--transition);
}

.field .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    /* Matches the rendered height of the sibling date/text inputs (52px total). */
    line-height: 26px;
    font-family: var(--text-font);
    font-size: 14px;
    color: var(--title-color2, #122327);
}

.field .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--text-color);
}

.field .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 8px;
}

.field .select2-container--default.select2-container--open .select2-selection--single,
.field .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--primary-color);
}

.field .select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 22px;
    color: var(--text-color);
}

/* Dropdown panel — rendered at <body> level, so it can't be nested under .field */
.select2-container--default .select2-dropdown {
    border-color: var(--primary-color);
    border-radius: 8px;
    overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: var(--text-font);
    font-size: 14px;
}

.select2-container--default .select2-results__option {
    font-family: var(--text-font);
    font-size: 14px;
    padding: 10px 14px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--primary-color);
}

/* ============================================================
   Contact form selects
   The Travelik template styles .form-box input/textarea but never
   .form-box select, so the location dropdowns fell back to the
   browser default. These match them to the template's pill inputs.
   ============================================================ */
.form-box select {
    transition: 0.3s;
    outline: 0;
    width: 100%;
    height: 52px;
    border: 1px solid rgb(12, 35, 24, 0.15);
    background-color: transparent;
    border-radius: 50px;
    padding: 0 45px 0 25px;
    font-family: var(--text-font);
    font-weight: 400;
    font-size: 16px;
    color: var(--title-color2, #122327);
    cursor: pointer;

    /* Native arrow removed, so draw our own chevron on the right */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%230CB2DB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 25px center;
}

.form-box select:focus {
    border-color: var(--primary-color);
}

/* Muted styling while the placeholder option is the selected one.
   Toggled from location-cascade.js — :has() proved unreliable here once the
   value was set programmatically. */
.form-box select.is-placeholder {
    color: var(--text-color);
}

/* Locked state (no country/governorate chosen yet). Driven by a class rather than
   :disabled — the browser doesn't reliably re-evaluate :disabled styling after the
   property is flipped from JS, which left re-enabled selects looking greyed out. */
.form-box select.is-locked {
    cursor: not-allowed;
    color: #9aa4a8;
    background-color: rgba(12, 35, 24, 0.04);
    border-color: rgb(12, 35, 24, 0.10);
}

.form-box select option {
    color: var(--title-color2, #122327);
    background: #fff;
}

/* ============================================================
   Auth gate — shown when a guest visits /plan-my-trip.
   ============================================================ */
.request-form--auth-gated {
    position: relative;
}

.request-form--auth-gated .request-form__form.is-locked {
    opacity: 0.55;
    filter: grayscale(0.4);
    pointer-events: none;
    user-select: none;
}

.auth-gate-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 18px;
}

.auth-gate-overlay__card {
    max-width: 460px;
    width: 100%;
    text-align: center;
    background: #ffffff;
    border: 1px solid rgba(12, 178, 219, 0.25);
    border-radius: 18px;
    padding: 40px 32px;
    box-shadow: 0 20px 50px rgba(12, 178, 219, 0.18);
}

.auth-gate-overlay__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    background: linear-gradient(135deg, #0cb2db, #4338ca);
    border-radius: 50%;
}

.auth-gate-overlay__card h3 {
    font-family: var(--title-font);
    color: var(--title-color2, #122327);
    margin-bottom: 10px;
}

.auth-gate-overlay__card p {
    color: var(--text-color);
    font-size: 0.95rem;
    margin-bottom: 22px;
}

/* "My budget is flexible" — a checkbox rendered as a toggle button that lines
   up with the Currency / Total Budget inputs beside it. */
.budget-flex-toggle {
    display: block;
    margin: 0;
}

.budget-flex-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.budget-flex-toggle__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-white);
    color: var(--title-color2, #122327);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: var(--transition);
}

.budget-flex-toggle__btn:hover {
    border-color: var(--primary-color);
}

.budget-flex-toggle__on { display: none; }

.budget-flex-toggle input:checked + .budget-flex-toggle__btn {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff;
}

.budget-flex-toggle input:checked + .budget-flex-toggle__btn .budget-flex-toggle__on { display: inline; }
.budget-flex-toggle input:checked + .budget-flex-toggle__btn .budget-flex-toggle__off { display: none; }

.budget-flex-toggle input:focus-visible + .budget-flex-toggle__btn {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}