/* The inquiry card uses the responsive inset, light surface, and full outline of the source tour template. */
.tour-itinerary-main > .tour-contact-form-card {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border: 1px solid var(--tour-border);
    border-radius: 7px;
    background-color: var(--tour-light);
}

/* The heading copy follows the compact hierarchy from the source inquiry block. */
.tour-contact-intro-text {
    margin: 0 0 1.5rem;
    color: #5f6670;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* Labels stay legible above compact controls and preserve required-field context. */
.tour-contact-label {
    color: var(--tour-dark);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
}

/* White form controls remain distinct and readable inside the outlined card. */
.tour-contact-form-card :is(
    .tour-contact-input,
    .tour-contact-select,
    .tour-contact-textarea,
    .tour-whatsapp-country,
    .tour-whatsapp-country-search
) {
    background-color: var(--tour-white);
}

/* Invalid confirmation feedback is announced and visible without shifting valid rows. */
.tour-contact-field-error {
    color: #b90201;
    font-size: 0.78rem;
    line-height: 1.4;
}

.tour-contact-field-error:empty {
    display: none;
}

.tour-contact-input[aria-invalid="true"] {
    border-color: #b90201;
}

/* The security note balances the captcha field while explaining data use. */
.tour-contact-security-note {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    align-self: end;
    min-height: 2.35rem;
    color: var(--tour-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.tour-contact-security-note i {
    color: var(--tour-primary);
}

/* The AJAX submit state keeps the source button's full-width shape and interaction. */
.tour-contact-form .tour-contact-submit {
    min-height: 3rem;
    border-radius: 7px;
    box-shadow: none;
}

.tour-contact-form .tour-contact-submit:is(:hover, :focus-visible) {
    box-shadow: none;
}

.tour-contact-form .theme-form-status {
    margin-top: 1rem;
}

/* Best-selling slider cards stretch to the tallest card despite different content lengths. */
.tour-best-selling-swiper .swiper-wrapper {
    align-items: stretch;
}

.tour-best-selling-swiper .swiper-slide {
    display: flex;
    height: auto;
}

.tour-best-selling-swiper .tour-best-card {
    width: 100%;
    height: 100%;
}

/* WhatsApp country selector pairs the international dialing code with the phone field. */
.tour-whatsapp-control {
    display: grid;
    grid-template-columns: minmax(8.5rem, 9.5rem) minmax(0, 1fr);
    gap: 0.5rem;
    min-width: 0;
}

/* The country picker anchors the searchable results menu to the dialing-code control. */
.tour-whatsapp-country-wrap {
    position: relative;
    min-width: 0;
}

/* The native select remains available as a no-JavaScript fallback. */
.tour-whatsapp-country {
    width: 100%;
    min-height: 2.35rem;
    padding: 0.35rem 1.65rem 0.35rem 0.65rem;
    overflow: hidden;
    border: 1px solid var(--tour-border);
    border-radius: 7px;
    appearance: none;
    background-color: #f8f9fb;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--tour-dark) 50%),
        linear-gradient(135deg, var(--tour-dark) 50%, transparent 50%);
    background-position:
        calc(100% - 0.95rem) 50%,
        calc(100% - 0.7rem) 50%;
    background-repeat: no-repeat;
    background-size: 0.34rem 0.34rem, 0.34rem 0.34rem;
    color: var(--tour-dark);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.35;
    text-overflow: ellipsis;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

/* Progressive enhancement replaces the native select only after search behavior is ready. */
.tour-whatsapp-country-wrap.is-search-enhanced .tour-whatsapp-country {
    display: none;
}

/* The enhanced search control keeps the selected flag and country visible between searches. */
.tour-whatsapp-country-search-wrap {
    position: relative;
    display: block;
}

/* The searchable country input matches the dimensions and typography of the inquiry form. */
.tour-whatsapp-country-search {
    width: 100%;
    min-height: 2.35rem;
    padding: 0.35rem 2rem 0.35rem 0.65rem;
    overflow: hidden;
    border: 1px solid var(--tour-border);
    border-radius: 7px;
    color: var(--tour-dark);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.35;
    text-overflow: ellipsis;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

/* The search placeholder remains readable without competing with an active country selection. */
.tour-whatsapp-country-search::placeholder {
    color: var(--tour-muted);
    opacity: 1;
}

/* The browser clear affordance is removed so the single search icon remains visually stable. */
.tour-whatsapp-country-search::-webkit-search-cancel-button {
    display: none;
}

/* The magnifying glass communicates that the country control accepts typed input. */
.tour-whatsapp-country-search-wrap > i {
    position: absolute;
    top: 50%;
    inset-inline-end: 0.7rem;
    color: var(--tour-muted);
    font-size: 0.82rem;
    pointer-events: none;
    transform: translateY(-50%);
}

/* The results menu expands beyond the compact prefix column while staying inside the viewport. */
.tour-whatsapp-country-results {
    position: absolute;
    top: calc(100% + 0.4rem);
    inset-inline-start: 0;
    z-index: 40;
    display: grid;
    width: min(20rem, calc(100vw - 2rem));
    max-height: 18rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.35rem;
    border: 1px solid var(--tour-border);
    border-radius: 7px;
    background-color: var(--tour-white);
    box-shadow: 0 16px 36px rgba(17, 24, 39, 0.12);
}

/* The hidden attribute always closes the results menu regardless of its grid display rule. */
.tour-whatsapp-country-results[hidden] {
    display: none;
}

/* Each country result aligns flag, name, and dialing code for quick comparison. */
.tour-whatsapp-country-option {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.55rem 0.65rem;
    border-radius: 7px;
    color: var(--tour-dark);
    cursor: pointer;
    font-size: 0.82rem;
    line-height: 1.3;
}

/* Hover, keyboard focus, and the active screen-reader option share one restrained highlight. */
.tour-whatsapp-country-option:is(:hover, .is-active) {
    background-color: rgba(241, 1, 0, 0.08);
}

/* Country flags remain data markers and use a consistent optical size. */
.tour-whatsapp-country-flag {
    font-size: 1rem;
    line-height: 1;
}

/* Country names can wrap without forcing the results menu beyond the viewport. */
.tour-whatsapp-country-name {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 600;
}

/* Dialing codes stay aligned and readable while scanning search results. */
.tour-whatsapp-country-code {
    color: var(--tour-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}

/* An empty search gives a concise recovery message inside the same results surface. */
.tour-whatsapp-country-empty {
    padding: 0.75rem;
    color: var(--tour-muted);
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Focus and hover feedback follow the existing red tour-form interaction language. */
.tour-whatsapp-country:is(:hover, :focus),
.tour-whatsapp-country-search:is(:hover, :focus),
.tour-whatsapp-control:focus-within .tour-contact-input {
    border-color: rgba(241, 1, 0, 0.5);
    background-color: var(--tour-white);
    box-shadow: 0 12px 26px rgba(17, 24, 39, 0.06);
    outline: 0;
}

/* Supporting copy explains the selector without competing with the required field label. */
.tour-whatsapp-help {
    color: var(--tour-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

/* Touch layouts keep both controls usable without overflowing the form column. */
@media (max-width: 575.98px) {
    .tour-whatsapp-control {
        grid-template-columns: minmax(7.6rem, 8.6rem) minmax(0, 1fr);
    }

    .tour-whatsapp-country,
    .tour-whatsapp-country-search,
    .tour-whatsapp-number-wrap .tour-contact-input {
        min-height: 2.75rem;
        font-size: 1rem;
    }

    .tour-contact-security-note {
        padding-top: 0;
    }
}