.roadtrip-stay-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid #e1e7f0;
    border-radius: 0.75rem;
    padding: 0.65rem;
    background: #fbfdff;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.roadtrip-stay-link:hover, .roadtrip-stay-link:focus-visible {
    border-color: var(--cw-lime-moss, #8ea604);
    box-shadow: 0 10px 22px rgba(142, 166, 4, 0.13);
    transform: translateY(-3px) scale(1.01);
    text-decoration: none;
    color: inherit;
    z-index: 2;
}
.accommodation-multi-select {
    position: relative;

.accommodation-menu {
    max-height: 520px;
    overflow-y: auto;
    min-width: 220px;
    padding-bottom: 1.5rem;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 9999;
    background: #fff;
    border: 2px solid #fff;
    box-shadow: 0 24px 48px 12px rgba(10, 28, 50, 0.22), 0 0 0 2px #fff;
}
}

.accommodation-option span {
    font-size: 1rem;
    font-weight: 400;
}

.accom-bubble-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.accom-bubble-card:hover,
.accom-bubble-card:focus-visible {
    border-color: var(--cw-lime-moss, #8ea604) !important;
    box-shadow: 0 10px 22px rgba(142, 166, 4, 0.26) !important;
    transform: translateY(-5px) rotate(-0.4deg);
    z-index: 2;
}

.flight-bubble-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.flight-bubble-card:hover,
.flight-bubble-card:focus-visible {
    border-color: var(--cw-lime-moss, #8ea604) !important;
    box-shadow: 0 10px 22px rgba(142, 166, 4, 0.26) !important;
    transform: translateY(-5px) rotate(-0.4deg);
    z-index: 2;
}
.country-bubble.btn-success {
    background-color: #97ad2f !important; 
    border-color: #97ad2f !important;
    color: #fff !important;
}

.country-bubble {
    min-width: 90px;
    min-height: 38px;
    font-size: 1rem;
    padding: 0.6rem 1.2rem;
}
.country-bubble-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin: 2rem 0;
}



.search-bar .form-control.nights-radius-fix {
    border-radius: 0;
    border-top-right-radius: 0.9rem !important;
    border-bottom-right-radius: 0.9rem !important;
}


@media (max-width: 600px) {
    .search-bar .form-control.nights-radius-fix {
        border-radius: 0.9rem !important;
        border-top-left-radius: 0.9rem !important;
        border-bottom-left-radius: 0.9rem !important;
        border-top-right-radius: 0.9rem !important;
        border-bottom-right-radius: 0.9rem !important;
        margin-top: 0.5rem;
    }
    .search-bar .search-col-nights {
        margin-top: 0.5rem;
    }
}

select#originInput option[disabled][selected] {
    color: #888;
    opacity: 0.6;
}
:root {
    --cw-lime-moss: #8ea604;
    --cw-dark-khaki: #313715;
    --cw-chocolate: #d16014;
    --cw-twilight-indigo: #29335c;
    --cw-light-blue: #9ac2c9;
    --cw-page-bg: #f3f6f3;
    --cw-surface: #ffffff;
    --cw-surface-muted: #edf2f0;
    --cw-text-strong: #29335c;
    --cw-text-body: #313715;
    --cw-sunburst: #f4b400;
    --cw-focus-ring: rgba(209, 96, 20, 0.28);
    --cw-shadow-playful: 0 10px 22px rgba(41, 51, 92, 0.18);
    --cw-radius-pill: 999px;
    --cw-dropdown-border: #c7d7ea;
    --cw-dropdown-border-hover: #9fb6d3;
    --cw-dropdown-radius: 0.72rem;
    --cw-dropdown-shadow: 0 12px 26px rgba(10, 28, 50, 0.16);
}

body {
    font-family: "Lora", "Georgia", serif;
    background:
        radial-gradient(circle at 8% 2%, rgba(244, 180, 0, 0.16), transparent 36%),
        radial-gradient(circle at 92% 16%, rgba(142, 166, 4, 0.16), transparent 36%),
        var(--cw-page-bg);
    color: var(--cw-text-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.btn,
.step-label,
.travel-pro-badge {
    font-family: "Arvo", "Georgia", serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: uppercase;
}

.bg-primary {
    background: linear-gradient(115deg, #1f2852 0%, #29335c 52%, #42518d 100%) !important;
}

.navbar.bg-primary {
    background: var(--cw-dark-khaki) !important;
}

@media (max-width: 991.98px) {
    .navbar-toggler {
        display: none !important;
    }
}

.btn-primary {
    --bs-btn-bg: var(--cw-chocolate);
    --bs-btn-border-color: var(--cw-chocolate);
    --bs-btn-hover-bg: #b45312;
    --bs-btn-hover-border-color: #b45312;
    --bs-btn-active-bg: #9f4a11;
    --bs-btn-active-border-color: #9f4a11;
    border-radius: 0.7rem;
    box-shadow: 0 7px 16px rgba(209, 96, 20, 0.24);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(209, 96, 20, 0.3);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-outline-light {
    --bs-btn-color: #ffffff;
    --bs-btn-border-color: rgba(255, 255, 255, 0.65);
    --bs-btn-hover-color: var(--cw-twilight-indigo);
    --bs-btn-hover-bg: var(--cw-light-blue);
    --bs-btn-hover-border-color: var(--cw-light-blue);
}

.btn,
.form-control,
.form-select,
.country-chip,
.navbar-currency-item,
.travel-pros-control-btn,
.booking-faq-button,
.roadtrip-launch-mode-card,
.roadtrip-carhire-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--cw-chocolate);
    box-shadow: 0 0 0 0.2rem var(--cw-focus-ring);
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    margin: 0;
    border: 1px solid #9aa3b1;
    border-radius: 0.2rem;
    background: #d1d5db;
    display: inline-grid;
    place-content: center;
    vertical-align: middle;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="checkbox"]::before {
    content: "";
    width: 0.62rem;
    height: 0.62rem;
    background: #ffffff;
    clip-path: polygon(14% 54%, 0 68%, 38% 100%, 100% 22%, 86% 8%, 37% 71%);
    transform: scale(0);
    transform-origin: center;
    transition: transform 0.15s ease-in-out;
}

input[type="checkbox"]:checked {
    background: #2f9e44;
    border-color: #2f9e44;
}

input[type="checkbox"]:checked::before {
    transform: scale(1);
}

input[type="checkbox"]:focus-visible {
    outline: 3px solid rgba(47, 158, 68, 0.28);
    outline-offset: 2px;
}

input[type="checkbox"]:focus {
    border-color: #2f9e44;
    box-shadow: 0 0 0 0.2rem rgba(47, 158, 68, 0.28);
    outline: none;
}

input[type="checkbox"]:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.form-check-input[type="checkbox"] {
    margin-top: 0.18em;
    vertical-align: middle;
    flex-shrink: 0;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.form-check .form-check-label {
    margin-bottom: 0;
}

.trip-options input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    margin: 0;
    border: 1px solid #9aa3b1;
    border-radius: 0.2rem;
    background: #d1d5db;
    display: inline-grid;
    place-content: center;
    vertical-align: middle;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.trip-options input[type="radio"]::before {
    content: "";
    width: 0.62rem;
    height: 0.62rem;
    background: #ffffff;
    clip-path: polygon(14% 54%, 0 68%, 38% 100%, 100% 22%, 86% 8%, 37% 71%);
    transform: scale(0);
    transform-origin: center;
    transition: transform 0.15s ease-in-out;
}

.trip-options input[type="radio"]:checked {
    background: #2f9e44;
    border-color: #2f9e44;
}

.trip-options input[type="radio"]:checked::before {
    transform: scale(1);
}

.trip-options input[type="radio"]:focus-visible {
    outline: 3px solid rgba(47, 158, 68, 0.28);
    outline-offset: 2px;
}

.trip-options input[type="radio"]:focus {
    border-color: #2f9e44;
    box-shadow: 0 0 0 0.2rem rgba(47, 158, 68, 0.28);
    outline: none;
}

.form-select,
.accommodation-trigger {
    border-color: var(--cw-dropdown-border);
    border-radius: var(--cw-dropdown-radius);
    background-color: #ffffff;
    color: #132748;
}

.form-select:hover,
.accommodation-trigger:hover {
    border-color: var(--cw-dropdown-border-hover);
}

.search-form #travelStyle.form-select {
    border-color: #ced4da !important;
    background-color: #ffffff;
}

.search-form #travelStyle.form-select:hover,
.search-form #travelStyle.form-select:active {
    border-color: #ced4da !important;
    box-shadow: none;
}

.search-form #travelStyle.form-select:focus,
.search-form #travelStyle.form-select:focus-visible {
    border-color: var(--cw-chocolate) !important;
    box-shadow: 0 0 0 0.2rem var(--cw-focus-ring) !important;
    outline: none;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.required-indicator {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
    min-height: 1rem;
    visibility: hidden;
}

.required-indicator.is-visible {
    visibility: visible;
}

.btn:focus-visible,
.navbar-currency-trigger:focus-visible,
.country-chip:focus-visible {
    outline: 3px solid var(--cw-focus-ring);
    outline-offset: 2px;
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 2.5rem;
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-brand::after {
    content: "CompareWhere";
    font-family: "Arvo", "Georgia", serif;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    color: #ffffff;
}

.brand-logo {
    display: block;
    width: auto;
}

.brand-logo-main {
    display: none;
    height: 46px;
}

.brand-logo-small {
    display: block;
    height: 36px;
    transform: scale(1.6);
    transform-origin: left center;
}

.legal-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 0.9rem;
    font-size: 0.9rem;
}

.legal-footer-links a {
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
}

.legal-footer-links a:hover,
.legal-footer-links a:focus-visible {
    color: #ffffff;
    text-decoration: underline;
}

.site-footer {
    background: var(--cw-dark-khaki);
    color: #ffffff;
    padding: 2.4rem 0 1.3rem;
}

.site-footer-grid {
    display: grid;
    grid-template-columns: minmax(360px, 2fr) repeat(3, minmax(150px, 1fr));
    gap: 1.4rem;
    align-items: start;
}

.site-footer-brand-wrap {
    display: flex;
    align-items: flex-start;
}

.site-footer-brand-link {
    display: inline-flex;
    text-decoration: none;
}

.site-footer-brand-logo {
    height: 120px;
    width: auto;
    max-width: 100%;
}

.site-footer-title {
    font-size: 1.02rem;
    color: #ffffff;
    text-transform: none;
    margin-bottom: 0.62rem;
}

.site-footer-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.site-footer-group a {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}

.site-footer-group a:hover,
.site-footer-group a:focus-visible {
    color: #ffffff;
    text-decoration: underline;
}

.site-footer-brand-link:focus-visible,
.site-footer-group a:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.85);
    outline-offset: 3px;
    border-radius: 0.3rem;
}

.site-footer-bottom {
    margin-top: 2rem;
    padding-top: 0.65rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.84rem;
}

@media (max-width: 991.98px) {
    .site-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem 1.2rem;
    }

    .site-footer-brand-wrap {
        grid-column: 1 / -1;
    }

    .site-footer-brand-logo {
        height: 88px;
    }
}

@media (max-width: 575.98px) {
    .site-footer {
        padding: 2rem 0 1.15rem;
    }

    .site-footer-grid {
        grid-template-columns: 1fr;
        gap: 1.35rem;
    }

    .site-footer-brand-logo {
        height: 66px;
    }

    .site-footer-title {
        margin-bottom: 0.7rem;
    }
}

.search-bar {
    padding: 3rem 0;
    position: sticky;
    top: 0;
    z-index: 1020;
    box-shadow: none;
}

.hero-search-scene {
    position: relative;
    background-color: transparent;
    overflow: visible;
    isolation: isolate;
    z-index: 20;
        background-color: var(--cw-dark-khaki);
        background-image: url("images/mountain_1.jpg");
        background-position: center 18%; 
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 48vh;
        transition: opacity 0.8s ease-in-out;
}

@media (min-width: 1200px) {
    .hero-search-scene {
        min-height: 45vh;
        background-size: cover;
    }
}


.hero-search-scene.fade-out {
    opacity: 0.4;
}

.hero-search-scene::before,
.hero-search-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.hero-search-scene::before {
    background: linear-gradient(120deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.10) 70%, rgba(0,0,0,0.01) 100%);
    opacity: 1;
}

.hero-search-scene::after {
    background: none;
    mix-blend-mode: normal;
    opacity: 0;
}

.hero-scene-content .container,
.search-bar .container {
    position: relative;
    z-index: 3;
}

.scene-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    display: none;
}

.search-bar .form-control,
.search-bar .form-select {
    min-width: 80px;
    border-radius: 0.5rem;
}

.search-form .form-control::placeholder {
    color: rgba(31, 41, 55, 0.52);
    opacity: 1;
}

.search-form .form-select.placeholder-active {
    color: rgba(31, 41, 55, 0.58);
}

.search-form .accommodation-trigger.placeholder-active {
    color: rgba(31, 41, 55, 0.58);
}

.search-form .form-select.placeholder-active option {
    color: #1f2937;
}

.search-form {
    max-width: 1360px;
    margin: 0 auto;
    background: transparent;
    border: 0;
    border-radius: 0.9rem;
    padding: 0.85rem 1rem;
    box-shadow: none;
    backdrop-filter: none;
    position: relative;
    z-index: 3;
    overflow: visible;
}

.search-form,
.trip-option,
.step-label {
    color: rgba(255, 255, 255, 0.92);
}

.cw-reveal {
    opacity: 0;
    transform: translateY(12px) scale(0.99);
}

.cw-reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
    .scene-canvas {
        display: none;
    }
}

.hero-copy {
    max-width: 980px;
    margin: 0 auto;
    text-align: left;
}

.hero-copy .display-4 {
    color: #ffffff;
    text-wrap: balance;
    text-shadow: none;
}

.hero-copy .lead {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600;
    max-width: 58ch;
}

.roadtrip-spotlight-section {
    position: relative;
    background-color: #ffffff;
}

.roadtrip-spotlight-wrap {
    max-width: 1500px;
    margin: 0 auto;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.05rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(41, 51, 92, 0.12);
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(35, 52, 88, 0.08);
    transform: translateX(-0.72rem) rotate(1deg);
}

.roadtrip-spotlight-wrap::before {
    content: "ROADTRIP MODE";
    position: absolute;
    top: -0.62rem;
    left: 0.95rem;
    z-index: 2;
    font-family: "Caveat", "Comic Sans MS", cursive;
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--cw-twilight-indigo);
    background: var(--cw-light-blue);
    border: 1px dashed rgba(41, 51, 92, 0.46);
    border-radius: 0.45rem;
    padding: 0.08rem 0.5rem;
}

.roadtrip-spotlight-heading {
    font-size: 1.56rem;
    color: var(--cw-twilight-indigo);
    letter-spacing: 0;
}

.roadtrip-spotlight-text {
    max-width: 68ch;
    color: #2f3b24;
    font-size: 0.98rem;
}

.roadtrip-spotlight-btn {
    border-radius: 0.85rem;
    border: 1px dashed rgba(41, 51, 92, 0.75);
    background: var(--cw-twilight-indigo);
    color: #ffffff;
    font-weight: 700;
    padding: 0.48rem 0.86rem;
    box-shadow: 0 7px 16px rgba(41, 51, 92, 0.3);
}

.roadtrip-spotlight-btn:hover,
.roadtrip-spotlight-btn:focus-visible {
    color: #ffffff;
    border-color: rgba(31, 40, 82, 0.9);
    background: #1f2852;
    transform: translateY(-1px);
}

.search-row {
    display: grid;
    column-gap: 0;
    justify-content: center;
    width: 100%;
}

.search-step {
    display: none;
    max-width: 1360px;
    margin: 0 auto;
}

.search-step.is-active {
    display: block;
    animation: cwStepEnter 0.28s ease-out;
    padding: 1rem 0.5rem;
}

.search-col-with-icon {
    position: relative;
}

.search-col-with-icon .cw-field-icon {
    position: absolute;
    left: 0.78rem;
    bottom: 0.95rem;
    font-size: 0.95rem;
    color: #6c757d;
    pointer-events: none;
    z-index: 3;
}

.search-col-with-icon .form-control.form-control-sm,
.search-col-with-icon .travel-style-trigger,
.search-col-with-icon .min-rating-trigger,
.search-col-with-icon .accommodation-trigger {
    padding-left: 2.2rem;
}

.search-step-1-grid {
    grid-template-columns: minmax(240px, 1.2fr) minmax(150px, 0.75fr) minmax(260px, 1.35fr) auto;
    align-items: end;
}

.search-step .form-control.form-control-sm,
.search-step .travel-style-trigger,
.search-step .min-rating-trigger,
.search-step .accommodation-trigger {
    min-height: 52px;
    font-size: 1rem;
    border-radius: 0;
    border-color: #ccd4db;
    box-shadow: none;
}

.search-step .form-control.form-control-sm:focus,
.search-step .travel-style-trigger:focus,
.search-step .min-rating-trigger:focus,
.search-step .accommodation-trigger:focus {
    position: relative;
    z-index: 2;
}


#searchStep1 .search-col-budget .form-control {
    border-top-left-radius: 0.9rem;
    border-bottom-left-radius: 0.9rem;
}

#searchStep1 .search-col-people .form-control,
#searchStep1 .search-col-style .travel-style-trigger {
    border-left: 0;
}

#searchStep1 .search-col-style .travel-style-trigger {
    border-top-right-radius: 0.9rem;
    border-bottom-right-radius: 0.9rem;
}

#searchStep2 .search-col-from .form-control {
    border-top-left-radius: 0.9rem;
    border-bottom-left-radius: 0.9rem;
}


#searchStep2 .search-col-dates .date-grid {
    gap: 0;
}

#searchStep2 .search-col-dates .date-input-group {
    height: 52px;
    background-color: #ffffff;
    border-radius: 0;
    overflow: hidden;
}

#searchStep2 .search-col-dates #startDate {
    border-left: 0;
    border-radius: 0;
}

#searchStep2 .search-col-dates #endDate {
    border-left: 0;
    border-top-right-radius: 0.9rem;
    border-bottom-right-radius: 0.9rem;
}

#searchStep2 .search-col-dates .date-grid.is-one-way #startDate {
    border-top-right-radius: 0.9rem;
    border-bottom-right-radius: 0.9rem;
}

#searchStep2 .search-col-dates #endDateContainer .date-input-group {
    border-top-right-radius: 0.9rem;
    border-bottom-right-radius: 0.9rem;
}

#searchStep2 .search-col-dates .date-grid.is-one-way .date-input-group:first-child .date-icon-append {
    border-top-right-radius: 0.9rem;
    border-bottom-right-radius: 0.9rem;
}

#searchStep2 .search-col-dates .date-grid.is-one-way .date-input-group:first-child {
    border-top-right-radius: 0.9rem;
    border-bottom-right-radius: 0.9rem;
}


#searchStep3 .search-col-accommodation .accommodation-trigger {
    border-top-left-radius: 0.9rem;
    border-bottom-left-radius: 0.9rem;
}


@media (max-width: 600px) {
    #searchStep2 .search-col-dates .date-input-group,
    #searchStep2 .search-col-dates .date-input-group .date-input,
    #searchStep2 .search-col-dates .date-input-group .date-icon-append {
        border-radius: 0.9rem !important;
        border-top-left-radius: 0.9rem !important;
        border-bottom-left-radius: 0.9rem !important;
        border-top-right-radius: 0.9rem !important;
        border-bottom-right-radius: 0.9rem !important;
    }
}

#searchStep3 .search-col-rating .min-rating-trigger {
    border-left: 0;
    border-top-right-radius: 0.9rem;
    border-bottom-right-radius: 0.9rem;
}

.search-step .step-next-btn,
.search-step .search-submit-btn,
.search-step .step-back-btn {
    min-height: 52px;
    font-size: 1rem;
    padding: 0.6rem 1rem;
}

.search-col-step-nav {
    margin-left: 0.6rem;
}

.date-icon-append {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    border-color: #ccd4db;
    border-left: 0;
    border-right: 0;
    color: #6c757d;
    min-height: 52px;
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    pointer-events: none;
    box-shadow: none;
}

#searchStep2 .search-col-dates .date-input-group .date-input,
#searchStep2 .search-col-dates .date-input-group .date-icon-append {
    background-color: #ffffff !important;
}

#searchStep2 .search-col-dates .date-input-group:hover #startDate,
#searchStep2 .search-col-dates .date-input-group:hover #endDate,
#searchStep2 .search-col-dates .date-input-group:hover .date-icon-append {
    background-color: #ffffff;
    border-color: #ccd4db;
}

#searchStep2 .search-col-dates .date-input-group:focus-within #startDate,
#searchStep2 .search-col-dates .date-input-group:focus-within #endDate,
#searchStep2 .search-col-dates .date-input-group:focus-within .date-icon-append {
    background-color: #ffffff;
    border-color: var(--cw-chocolate);
}

.search-step-2-grid {
    grid-template-columns: minmax(300px, 1.3fr) minmax(430px, 1.8fr) auto;
    align-items: end;
}

.search-step-2-trip-row {
    display: flex;
    justify-content: center;
    margin-top: 0.7rem;
}

.search-step-2-trip-row .trip-options {
    justify-content: center;
}

.search-step-3-grid {
    grid-template-columns: minmax(300px, 1.5fr) minmax(250px, 1.2fr) auto;
    align-items: end;
}

.search-col-accommodation {
    position: relative;
    z-index: 35;
}

.search-col-style {
    position: relative;
    z-index: 35;
}

.accommodation-multi-select {
    position: relative;
}

.travel-style-select {
    position: relative;
}

.min-rating-select {
    position: relative;
}

.travel-style-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 1rem;
    text-align: left;
    border-color: #ced4da;
    background-color: #ffffff;
    color: #132748;
}

.min-rating-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 1rem;
    text-align: left;
    border-color: #ced4da;
    background-color: #ffffff;
    color: #132748;
}

#travelStyleTriggerLabel {
    font-size: 1rem !important;
    line-height: 1.2;
}

#minRatingTriggerLabel {
    font-size: 1rem !important;
    line-height: 1.2;
}

.travel-style-trigger:hover,
.travel-style-trigger:active {
    border-color: #ced4da;
    box-shadow: none;
}

.min-rating-trigger:hover,
.min-rating-trigger:active {
    border-color: #ced4da;
    box-shadow: none;
}

.travel-style-trigger:focus,
.travel-style-trigger:focus-visible {
    border-color: var(--cw-chocolate);
    box-shadow: 0 0 0 0.2rem var(--cw-focus-ring);
    outline: none;
}

.min-rating-trigger:focus,
.min-rating-trigger:focus-visible {
    border-color: var(--cw-chocolate);
    box-shadow: 0 0 0 0.2rem var(--cw-focus-ring);
    outline: none;
}

.travel-style-trigger.placeholder-active {
    color: rgba(31, 41, 55, 0.58);
}

.min-rating-trigger.placeholder-active {
    color: rgba(31, 41, 55, 0.58);
}

.travel-style-trigger i {
    font-size: 0.85rem;
    color: #6b7280;
    flex-shrink: 0;
}

.min-rating-trigger i {
    font-size: 0.85rem;
    color: #6b7280;
    flex-shrink: 0;
}

.travel-style-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    width: 100%;
    min-width: 180px;
    z-index: 30;
}

.min-rating-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    width: 100%;
    min-width: 180px;
    z-index: 30;
}

.travel-style-item {
    font-size: 1rem !important;
    line-height: 1.2;
}

.min-rating-item {
    font-size: 0.8rem !important;
    line-height: 1.2;
}

.accommodation-trigger {
    text-align: left;
}

.accommodation-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    bottom: auto;
    left: 0;
    width: 100%;
    min-width: 180px;
    max-height: 190px;
    overflow-y: auto;
    z-index: 30;
    background: #ffffff;
    border: 1px solid var(--cw-dropdown-border);
    border-radius: var(--cw-dropdown-radius);
    box-shadow: var(--cw-dropdown-shadow);
    padding: 0.45rem 0.5rem;
}

.accommodation-option {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.875rem;
    line-height: 1.3;
    margin: 0;
    padding: 0.34rem 0.35rem;
    border-radius: 0.48rem;
    cursor: pointer;
    color: #132748;
}

.accommodation-option:hover {
    background: #eef5ff;
}

.accommodation-option input[type="checkbox"] {
    margin: 0;
}

.accommodation-menu-action {
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px solid #e5edf7;
}

.accommodation-select-all-btn {
    width: 100%;
    border: 1px solid #9ecf98;
    border-radius: 0.48rem;
    background: #ecf8ea;
    color: #1f4f1a;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.42rem 0.5rem;
}

.accommodation-select-all-btn:hover,
.accommodation-select-all-btn:focus-visible {
    background: #dff2db;
    border-color: #7db874;
}

.step-next-btn,
.step-back-btn {
    height: 31px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    line-height: 1;
}

.step-next-btn {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #2f9e44;
    --bs-btn-border-color: #2f9e44;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #26863a;
    --bs-btn-hover-border-color: #26863a;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #1f6f30;
    --bs-btn-active-border-color: #1f6f30;
}

.step-back-btn {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--cw-chocolate);
    --bs-btn-border-color: var(--cw-chocolate);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #b45312;
    --bs-btn-hover-border-color: #b45312;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #9a450f;
    --bs-btn-active-border-color: #9a450f;
    border-radius: 0.7rem;
}

.step-back-btn:hover,
.step-back-btn:focus-visible {
    transform: translateY(-1px);
}

.step-nav-pair {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


.search-step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 120px;
    text-align: center;
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.step-item.is-active {
    opacity: 1;
    transform: translateY(-1px);
}

.step-item.is-done {
    opacity: 0.65;
}

.step-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.8rem;
    height: 5.8rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 800;
    flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.step-bubble i {
    font-size: 2.5rem;
    line-height: 1;
}

.step-item.is-active .step-bubble {
    background: var(--cw-chocolate, #D16014);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(209, 96, 20, 0.2);
    animation: cwPulse 1.2s ease-in-out infinite;
}

.step-item.is-done .step-bubble {
    background: var(--cw-olive, #8EA604);
    color: #fff;
}

#searchStepIndicator.results-mode .step-item[data-step="3"].is-active .step-bubble {
    background: var(--cw-olive, #8EA604);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(142, 166, 4, 0.22);
    animation: none;
}

.step-item.is-active .step-label,
.step-item.is-done .step-label {
    color: #ffffff;
}

.step-label {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    text-align: center;
}

.step-connector {
    flex: 0 0 2rem;
    height: 2px;
    background: rgba(255, 255, 255, 0.35);
    margin: 0 0.5rem;
    align-self: center;
}

.currency-select {
    max-width: 70px;
}

.navbar-tools {
    min-width: 0;
}

.navbar-icon-link,
.navbar-currency-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    font-size: 1rem;
    font-weight: 600;
    background: transparent;
    border-radius: 50%;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.navbar-icon-link:focus-visible,
.navbar-icon-link:hover,
.navbar-currency-trigger:focus-visible,
.navbar-currency-trigger:hover {
    color: rgba(255, 255, 255, 0.92);
    background-color: rgba(255, 255, 255, 0.12);
}

.navbar-icon-link i {
    font-size: 1rem;
}

.navbar-currency-trigger[aria-expanded="true"] i {
    transform: rotate(20deg);
}

.navbar-currency-menu {
    min-width: 5.5rem;
    padding: 0.4rem;
    border: 1px solid var(--cw-dropdown-border);
    border-radius: var(--cw-dropdown-radius);
    box-shadow: var(--cw-dropdown-shadow);
}

.navbar-currency-item {
    border-radius: 0.48rem;
    font-weight: 600;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.navbar-currency-item.active,
.navbar-currency-item:active {
    background-color: var(--cw-chocolate);
    color: #ffffff;
}

.roadtrip-nav-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.roadtrip-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7rem;
    padding: 0.02rem 0.28rem;
    border-radius: 999px;
    border: 1px dashed rgba(255, 255, 255, 0.8);
    background: rgba(244, 180, 0, 0.26);
    font-family: "Caveat", "Comic Sans MS", cursive;
    font-size: 0.84rem;
    letter-spacing: 0.01em;
    line-height: 1;
    color: #ffffff;
}

.budget-controls {
    display: grid;
    gap: 0.45rem;
}

.budget-range-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.budget-range-row > * {
    min-width: 0;
}

@media (max-width: 576px) {
    .brand-logo-main {
        display: none;
    }

    .brand-logo-small {
        display: block;
        height: 34px;
        transform: scale(1.35);
    }

    .navbar-tools {
        gap: 0.5rem;
    }

    .navbar-brand::after {
        font-size: 0.96rem;
    }

    .navbar-currency-trigger {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.95rem;
    }

    .roadtrip-nav-badge {
        font-size: 0.74rem;
        min-width: 1.5rem;
    }
}

.date-grid {
    display: flex;
    gap: 0.35rem;
}

.date-grid > * {
    flex: 1 1 0;
}

#endDateContainer {
    flex: 1 1 0;
    min-width: 0;
}

#endDateContainer > .date-input {
    width: 100%;
}

.date-grid .date-input {
    min-width: 0;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
}

.date-input {
    border: 1px solid #d8e1d6;
    background: #ffffff;
    color: #1f3a2d;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.date-input::placeholder {
    color: rgba(31, 58, 45, 0.62);
}

.date-input:hover {
    border-color: rgba(47, 158, 68, 0.45);
    background: #ffffff;
}

.date-input:focus,
.date-input:focus-visible {
    border-color: #2f9e44;
    background: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(47, 158, 68, 0.22);
    outline: none;
}

.date-input:active {
    background: #ffffff;
}

.date-input:disabled {
    opacity: 0.6;
}

.cw-date-picker {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 250, 244, 0.98) 100%);
    border: 1px solid rgba(142, 166, 4, 0.28);
    border-radius: 0.95rem;
    box-shadow: 0 16px 32px rgba(31, 58, 45, 0.16);
    padding: 0.7rem;
    backdrop-filter: blur(4px);
}

.cw-date-picker-header {
    display: grid;
    grid-template-columns: 2rem 1fr 2rem;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.6rem;
}

.cw-date-picker-month {
    text-align: center;
    font-family: "Arvo", "Georgia", serif;
    font-size: 0.86rem;
    color: var(--cw-twilight-indigo);
}

.cw-date-picker-nav,
.cw-date-picker-action {
    border: 1px solid rgba(47, 158, 68, 0.2);
    background: #f5fbf4;
    color: #245b33;
    border-radius: 0.6rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cw-date-picker-nav:hover,
.cw-date-picker-action:hover {
    background: #edf8eb;
    border-color: rgba(47, 158, 68, 0.42);
}

.cw-date-picker-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cw-date-picker-weekdays,
.cw-date-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.28rem;
}

.cw-date-picker-weekdays {
    margin-bottom: 0.4rem;
}

.cw-date-picker-weekdays span {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: #5a6950;
    text-transform: uppercase;
}

.cw-date-picker-day {
    border: 1px solid transparent;
    background: #ffffff;
    color: #1f3a2d;
    border-radius: 0.62rem;
    min-height: 2.1rem;
    font-size: 0.84rem;
    font-weight: 600;
}

.cw-date-picker-day:hover {
    background: #eef8ec;
    border-color: rgba(47, 158, 68, 0.28);
}

.cw-date-picker-day.is-outside-month {
    color: #96a08e;
    background: #f7f7f3;
}

.cw-date-picker-day.is-selected {
    background: #2f9e44;
    border-color: #2f9e44;
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(47, 158, 68, 0.24);
    border-radius: 0.62rem;
    position: relative;
    z-index: 1;
}

.cw-date-picker-day.is-range-start,
.cw-date-picker-day.is-range-end {
    background: #2f9e44;
    border-color: #2f9e44;
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(47, 158, 68, 0.24);
    position: relative;
    z-index: 1;
}

.cw-date-picker-day.is-in-range {
    background: rgba(47, 158, 68, 0.13);
    border-color: transparent;
    border-radius: 0;
    color: #1f3a2d;
}

.cw-date-picker-day.is-in-range:hover {
    background: rgba(47, 158, 68, 0.22);
}

.cw-date-picker-day.is-today {
    border-color: rgba(47, 158, 68, 0.52);
}

.cw-date-picker-day.is-disabled,
.cw-date-picker-day:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    background: #f4f5f1;
}

.cw-date-picker-footer {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.7rem;
}

.cw-date-picker-action {
    flex: 1 1 0;
    font-size: 0.76rem;
    font-weight: 700;
}

.cw-date-picker-action-secondary {
    background: #ffffff;
}

.trip-options {
    display: flex;
    gap: 0.95rem;
    align-items: center;
    min-height: 31px;
}

.trip-option {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0;
    white-space: nowrap;
}

.trip-option span {
    font-weight: 700;
}

.search-submit-btn {
    min-width: 88px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: 0.5rem;
}


@media (max-width: 992px) {
    .roadtrip-spotlight-wrap {
        grid-template-columns: 1fr;
        transform: none;
    }

    .roadtrip-spotlight-btn {
        justify-self: start;
    }

    .search-step-1-grid,
    .search-step-2-grid,
    .search-step-3-grid {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
        row-gap: 0.6rem;
    }

    .search-row {
        column-gap: 0.6rem;
    }

    .search-step .form-control.form-control-sm,
    .search-step .travel-style-trigger,
    .search-step .min-rating-trigger,
    .search-step .accommodation-trigger {
        border-radius: 0.7rem;
        border-left: 1px solid #ccd4db;
    }

    #searchStep2 .search-col-dates .date-grid {
        gap: 0.35rem;
    }

    #searchStep2 .search-col-dates #startDate,
    #searchStep2 .search-col-dates #endDate {
        border-radius: 0.7rem;
        border-left: 0;
    }

    #searchStep2 .search-col-dates .date-input-group {
        border-radius: 0.7rem;
        overflow: hidden;
    }

    #searchStep2 .search-col-dates .date-input-group .date-icon-append {
        border-right: 0 !important;
        border-top-left-radius: 0.7rem !important;
        border-bottom-left-radius: 0.7rem !important;
    }

    #searchStep2 .search-col-dates .date-input-group .date-input {
        border-left: 0 !important;
        margin-left: 0 !important;
    }

    .search-col-step-nav {
        justify-self: start;
    }

    #searchStep1 .required-indicator {
        display: none;
    }

    #searchStep2 .required-indicator {
        display: none;
    }
}

@media (max-width: 576px) {
    .roadtrip-spotlight-wrap {
        padding: 0.92rem 0.7rem;
    }

    .roadtrip-spotlight-wrap::before {
        font-size: 0.8rem;
        top: -0.52rem;
        left: 0.72rem;
    }

    .roadtrip-spotlight-heading {
        font-size: 1.26rem;
    }

    .roadtrip-spotlight-text {
        font-size: 0.92rem;
    }

    .hero-search-scene::before {
        background: linear-gradient(180deg, rgba(35, 46, 72, 0.08), rgba(35, 46, 72, 0.16));
        opacity: 0.74;
    }

    .hero-search-scene::after {
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
        opacity: 0.42;
    }

    .search-step-1-grid,
    .search-step-2-grid,
    .search-step-3-grid {
        grid-template-columns: 1fr;
    }

    .search-step-indicator {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
    }

    .step-connector {
        display: none;
    }

    .trip-options {
        flex-wrap: wrap;
        gap: 0.7rem;
    }
}

.budget-article-image {
    width: 100%;
    height: 320px;
    object-fit: cover;
}

@media (max-width: 768px) {
    .budget-article-image {
        height: 220px;
    }
}

.about-me-section {
    position: relative;
    background-color: #ffffff;
    overflow: visible;
}

.about-me-wrap {
    max-width: 1500px;
    margin: 0 auto;
    position: relative;
    border-radius: 1.15rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 248, 252, 0.96) 100%);
    border: 1px solid rgba(41, 51, 92, 0.13);
    box-shadow: 0 12px 24px rgba(35, 52, 88, 0.08);
    padding: 2rem 1.75rem;
    transform: translateX(0.85rem) rotate(-0.35deg);
}

.about-me-wrap::before {
    content: "MY STORY";
    position: absolute;
    top: -0.65rem;
    left: 1rem;
    z-index: 2;
    font-family: "Caveat", "Comic Sans MS", cursive;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #1f3a2d;
    background: #d7efc4;
    border: 1px dashed rgba(41, 51, 92, 0.45);
    border-radius: 0.42rem;
    padding: 0.12rem 0.45rem;
}

.about-me-wrap::after {
    content: "";
    position: absolute;
    right: -0.7rem;
    top: -0.8rem;
    width: clamp(58px, 5.6vw, 98px);
    height: clamp(58px, 5.6vw, 98px);
    border-radius: 38% 62% 62% 38% / 42% 36% 64% 58%;
    background: radial-gradient(circle at 35% 35%, rgba(142, 166, 4, 0.72), rgba(84, 122, 41, 0.28));
    z-index: 0;
}

.about-me-grid {
    display: grid;
    grid-template-columns: minmax(170px, 240px) minmax(0, 1fr);
    gap: 1.8rem;
    align-items: center;
}

.about-me-image-col {
    display: flex;
    justify-content: center;
    position: relative;
    padding: 0.25rem;
}

.about-me-image-col::before {
    content: "";
    position: absolute;
    top: 14px;
    width: clamp(180px, 20vw, 255px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, #f9bf5f 0%, #ea8f1b 70%, #d6720d 100%);
    box-shadow: 0 10px 20px rgba(209, 96, 20, 0.28);
    z-index: 1;
}

.about-me-image {
    display: block;
    width: 100%;
    max-width: 220px;
    border-radius: 0.95rem;
    box-shadow: none;
    position: relative;
    transform: translateY(-18px);
    z-index: 2;
}

.about-me-text-col {
    max-width: 62ch;
    padding-left: 0.8rem;
}

.about-me-heading {
    margin-bottom: 0.75rem;
    font-size: 2rem;
    font-weight: 800;
    font-family: "Baloo 2", "Trebuchet MS", sans-serif;
    color: var(--cw-twilight-indigo);
    letter-spacing: 0.005em;
    transform: rotate(-0.45deg);
}

.about-me-text {
    margin: 0 0 0.6rem;
    font-size: 1rem;
    line-height: 1.7;
    color: #2d3a2e;
    font-family: "Baloo 2", "Trebuchet MS", sans-serif;
    font-weight: 500;
}

.about-me-highlight {
    background: linear-gradient(120deg, rgba(249, 191, 95, 0.65) 0%, rgba(234, 143, 27, 0.65) 100%);
    background-repeat: no-repeat;
    background-size: 0% 88%;
    background-position: left center;
    border-radius: 0.2em;
    padding: 0.05em 0.2em;
    font-weight: 700;
    transition: background-size 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-me-highlight.is-highlighted {
    background-size: 100% 88%;
}

.about-me-footer {
    margin-top: 0.45rem;
    padding-top: 0;
    border-top: none;
    text-align: center;
}

.about-me-tips-cta {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.85rem;
    margin-bottom: 1.5rem;
}

.about-me-tips-label {
    margin: 0;
    font-family: "Baloo 2", "Trebuchet MS", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #2d3a2e;
}

.about-me-tips-arrow {
    display: block;
}

.about-me-tips-btn {
    display: inline;
    font-family: "Baloo 2", "Trebuchet MS", sans-serif;
    font-weight: 700;
    font-size: inherit;
    color: #2d3a2e;
    text-decoration: none;
    cursor: pointer;
    transition: letter-spacing 0.2s ease, text-decoration 0.2s ease;
}

.about-me-tips-btn:hover {
    letter-spacing: 0.04em;
    color: #2d3a2e;
}

.about-me-skip-btn {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    font-family: "Caveat", "Comic Sans MS", cursive;
    font-size: 1.45rem;
    font-weight: 700;
    color: #526047;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 1.1;
    letter-spacing: 0.01em;
    transform: rotate(-1.3deg);
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.about-me-skip-btn:hover {
    color: #2f9e44;
    transform: rotate(-0.2deg);
}


.physical-envelope {
    position: fixed;
    bottom: 40px;
    left: 20px;
    width: 120px;
    height: 82px;
    cursor: default;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transform: translateX(calc(-100% - 32px));
    transition: transform 0.45s cubic-bezier(0.16, 0.87, 0.27, 1), opacity 0.3s ease, filter 0.25s ease;
}

.physical-envelope.envelope-visible {
    opacity: 0.96;
    transform: translateX(0);
}

.physical-envelope.envelope-active {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}

.envelope-front {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    perspective: 560px;
}

.envelope-body {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64%;
    background: linear-gradient(180deg, #a6bb76 0%, #849f58 100%);
    border: 1px solid rgba(63, 86, 35, 0.48);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 6px 12px rgba(63, 86, 35, 0.2);
    z-index: 1;
}

.envelope-body::before,
.envelope-body::after {
    content: "";
    position: absolute;
    top: -1px;
    width: 51%;
    height: calc(100% + 1px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(98, 122, 56, 0.3));
}

.envelope-body::before {
    left: -1px;
    clip-path: polygon(0 0, 100% 44%, 0 100%);
}

.envelope-body::after {
    right: -1px;
    clip-path: polygon(100% 0, 100% 100%, 0 44%);
}

.envelope-line {
    position: absolute;
    background: rgba(255, 255, 255, 0.55);
    left: 12px;
    right: 12px;
    height: 2px;
    border-radius: 999px;
}

.envelope-line:first-of-type {
    top: 11px;
}

.envelope-line:last-of-type {
    top: 17px;
    right: 34px;
}

.envelope-flap {
    position: absolute;
    top: 11px;
    left: 0;
    width: 100%;
    height: 66%;
    background: linear-gradient(180deg, #c7d7a5 0%, #a4bc73 100%);
    clip-path: polygon(0 0, 100% 0, 100% 36%, 50% 84%, 0 36%);
    box-shadow: inset 0 -1px 0 rgba(63, 86, 35, 0.34);
    transform-origin: 50% 0%;
    transform: rotateX(0deg);
    backface-visibility: hidden;
    transition: transform 0.3s ease;
    z-index: 2;
}

.envelope-badge {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, #f9bf5f 0%, #ea8f1b 70%, #d6720d 100%);
    border: 1.5px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    overflow: hidden;
    box-shadow: 0 3px 7px rgba(35, 52, 88, 0.34);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.envelope-badge-image {
    width: 92%;
    height: 92%;
    display: block;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
}

.physical-envelope.envelope-active .envelope-badge {
    opacity: 1;
    transform: scale(1);
}

.physical-envelope:hover .envelope-flap {
    transform: rotateZ(-5deg);
}

.physical-envelope.envelope-receiving .envelope-flap {
    animation: envelopeFlapReceive 0.7s ease-in-out;
}

.physical-envelope.envelope-hit {
    animation: envelopeHitPulse 0.28s ease-out;
}

@keyframes envelopeHitPulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(209, 96, 20, 0));
    }
    50% {
        transform: scale(1.06);
        filter: drop-shadow(0 6px 14px rgba(209, 96, 20, 0.24));
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(209, 96, 20, 0));
    }
}

@keyframes envelopeFlapReceive {
    0% {
        transform: rotateX(0deg);
    }
    30% {
        transform: rotateX(-52deg) rotateZ(-4deg);
    }
    70% {
        transform: rotateX(-16deg) rotateZ(-1deg);
    }
    100% {
        transform: rotateX(0deg) rotateZ(0deg);
    }
}

.envelope-shadow {
    position: absolute;
    width: 80%;
    height: 10px;
    background: radial-gradient(ellipse, rgba(41, 51, 92, 0.2) 0%, transparent 72%);
    bottom: -10px;
    left: 10%;
    border-radius: 50%;
    pointer-events: none;
}

.physical-envelope:hover {
    filter: drop-shadow(0 4px 12px rgba(209, 96, 20, 0.2));
}


.about-me-flyer {
    position: fixed;
    z-index: 1200;
    width: 260px;
    height: 165px;
    border-radius: 12px;
    border: 1px solid rgba(41, 51, 92, 0.12);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 9px 24px rgba(35, 52, 88, 0.16);
    transform-origin: 50% 50%;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    will-change: transform, opacity;
    backface-visibility: hidden;
    contain: layout paint style;
    opacity: 0.97;
    pointer-events: none;
}

.about-me-flyer-paper {
    position: absolute;
    inset: 0;
}

.about-me-flyer-line {
    position: absolute;
    left: 16px;
    right: 16px;
    height: 2px;
    border-radius: 999px;
    background: rgba(41, 51, 92, 0.12);
}

.about-me-flyer-line.line-1 {
    top: 20px;
}

.about-me-flyer-line.line-2 {
    top: 33px;
}

.about-me-flyer-line.line-3 {
    top: 46px;
    right: 64px;
}

.about-me-flyer.is-flying {
    animation: flyerSlideToEnvelope 0.66s cubic-bezier(0.21, 0.78, 0.24, 1) forwards;
}

@keyframes flyerSlideToEnvelope {
    0% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
        opacity: 0.97;
    }
    65% {
        transform:
            translate3d(calc(var(--fly-x, -120px) * 0.65), calc(var(--fly-y, 220px) * 0.65), 0)
            scale(0.56)
            rotate(-5deg);
        opacity: 0.85;
    }
    100% {
        transform:
            translate3d(var(--fly-x, -120px), var(--fly-y, 220px), 0)
            scale(0.12)
            rotate(-8deg);
        opacity: 0.03;
    }
}

.about-me-section.from-envelope {
    animation: aboutFromEnvelope 0.5s cubic-bezier(0.16, 0.87, 0.27, 1) forwards;
}

@keyframes aboutFromEnvelope {
    0% {
        transform: scale(0.95) translateY(14px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@media (max-width: 576px) {
    .about-me-flyer {
        width: 190px;
        height: 120px;
    }
}

.home-deals-section {
    position: relative;
    background-color: #ffffff;
    overflow: visible;
}

#homeStaysSection,
.travel-pros-section,
.promo-banner-section,
.booking-faq-section {
    position: relative;
    z-index: 2;
    background-color: #ffffff;
}

.about-me-section,
.home-deals-section,
.promo-banner-section,
.travel-pros-section,
.booking-faq-section {
    content-visibility: auto;
    contain-intrinsic-size: 700px;
}

#homeStaysSection {
    margin-top: 0;
}

.home-deals-wrap {
    max-width: 1500px;
    margin: 0 auto;
    position: relative;
    border-radius: 1.15rem;
    background: #ffffff;
    border: 1px solid rgba(41, 51, 92, 0.12);
    box-shadow: 0 12px 24px rgba(35, 52, 88, 0.08);
    padding: 1.2rem 1rem 1rem;
}

#homeDealsSection .home-deals-wrap {
    transform: translateX(1.3rem) rotate(-1deg);
}

#homeStaysSection .home-deals-wrap {
    transform: translateX(-1.15rem) rotate(1deg);
}

#homeDealsSection .home-deals-wrap::before,
#homeStaysSection .home-deals-wrap::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #f4b400;
    top: -7px;
    left: 1rem;
    box-shadow: 0 0 0 5px rgba(244, 180, 0, 0.18);
}

.home-deals-heading {
    text-transform: none;
    font-size: 2rem;
    font-weight: 800;
    color: var(--cw-twilight-indigo);
    margin-bottom: 1.5rem;
    letter-spacing: -0.015em;
}

.home-deals-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
    justify-content: stretch;
    overflow-x: visible;
    padding-bottom: 0;
}

.home-deal-card {
    position: relative;
    border: 1px solid #d2ddd9;
    border-radius: 0.6rem;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f4f9f8 100%);
    box-shadow: 0 4px 12px rgba(41, 51, 92, 0.08);
    min-height: 305px;
}

.home-deal-card.is-linked {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.home-deal-card.is-linked:hover {
    border-color: var(--cw-lime-moss);
    box-shadow: 0 10px 22px rgba(142, 166, 4, 0.26);
    transform: translateY(-5px) rotate(-0.4deg);
}

.home-deal-card::after {
    position: absolute;
    top: 0.55rem;
    left: 0.55rem;
    z-index: 2;
    font-family: "Caveat", "Comic Sans MS", cursive;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e2c50;
    background: #ffe9a3;
    border: 1px dashed rgba(41, 51, 92, 0.45);
    border-radius: 0.45rem;
    padding: 0.1rem 0.45rem;
    pointer-events: none;
}

.home-deal-card:nth-child(3n + 1)::after {
    content: "HOT DEAL";
}

.home-deal-card:nth-child(3n + 2)::after {
    content: "TRENDING";
    background: #d8f5ff;
}

.home-deal-card:nth-child(3n)::after {
    content: "BEST VALUE";
    background: #e9f8c6;
}

.home-deal-image {
    display: block;
    width: 100%;
    height: 138px;
    object-fit: cover;
}

.home-deal-body {
    display: flex;
    flex-direction: column;
    min-height: calc(305px - 138px);
    padding: 0.7rem 0.55rem 0.6rem;
}

.home-deal-destination {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--cw-twilight-indigo);
}

.home-deal-departure {
    font-size: 0.68rem;
    color: #111827;
    margin-top: 0.05rem;
}

.home-deal-meta {
    border-top: 1px solid #d9dee5;
    margin-top: auto;
    padding-top: 0.38rem;
}

.home-deal-price {
    font-size: 0.64rem;
    color: #111827;
}

.home-deal-month {
    font-size: 0.78rem;
    color: #111827;
}

.home-deal-link {
    position: absolute;
    inset: 0;
    z-index: 3;
}

.home-deals-footnote {
    margin-top: 2rem;
    font-size: 0.85rem;
    color: var(--cw-dark-khaki);
}

.home-deals-loading,
.home-deals-empty {
    margin: 0;
    padding: 1rem;
    border-radius: 0.6rem;
    border: 1px solid #d9dee5;
    background: #ffffff;
    color: #374151;
    font-weight: 600;
}

@media (max-width: 992px) {
    .about-me-wrap {
        transform: none;
    }

    .about-me-wrap::after {
        right: -0.35rem;
        top: -0.55rem;
    }

    .about-me-grid {
        grid-template-columns: minmax(160px, 230px) minmax(0, 1fr);
        gap: 1.2rem;
    }

    .about-me-image-col::before {
        width: clamp(190px, 34vw, 250px);
    }

    .about-me-image {
        max-width: 210px;
    }

    .about-me-text-col {
        padding-left: 0.55rem;
    }

    #homeDealsSection .home-deals-wrap,
    #homeStaysSection .home-deals-wrap,
    .travel-pros-wrap,
    .promo-banner-section .container {
        transform: none;
    }

    .home-deals-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        overflow-x: visible;
    }

    .home-deals-footnote {
        font-size: 1.1rem;
    }
}

@media (max-width: 576px) {
    .about-me-wrap::before {
        top: -0.58rem;
        left: 0.7rem;
        font-size: 0.66rem;
    }

    .about-me-wrap::after {
        width: 52px;
        height: 52px;
        right: -0.2rem;
        top: -0.32rem;
    }

    .about-me-wrap {
        padding: 0.82rem 0.66rem 0.78rem;
    }

    .about-me-grid {
        grid-template-columns: 1fr;
        gap: 0.78rem;
    }

    .about-me-image {
        max-width: 165px;
    }

    .about-me-image-col::before {
        width: 200px;
    }

    .about-me-text-col {
        padding-left: 0;
    }

    .about-me-heading {
        font-size: 1.55rem;
    }

    .about-me-text {
        font-size: 0.88rem;
        line-height: 1.65;
    }

    .home-deals-wrap {
        padding: 0.95rem 0.72rem 0.85rem;
    }

    .home-deals-heading {
        text-align: left;
        font-size: 1.6rem;
    }

    .home-deals-grid {
        grid-template-columns: 1fr;
    }

    #homeDealsSection .home-deals-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #homeStaysSection .home-deals-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-deals-footnote {
        font-size: 1rem;
        margin-top: 1.2rem;
    }
}


.travel-pros-section {
    background-color: #ffffff;
}

.travel-pros-wrap {
    max-width: 1500px;
    margin: 0 auto;
    position: relative;
    transform: translateX(0.7rem) rotate(-0.25deg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 248, 252, 0.96) 100%);
    border: 1px solid rgba(41, 51, 92, 0.13);
    border-radius: 1.2rem;
    box-shadow: 0 12px 24px rgba(35, 52, 88, 0.08);
    padding: 1.15rem 1rem 1rem;
}

.travel-pros-wrap::before {
    content: "TRAVEL NOTES";
    position: absolute;
    top: -0.7rem;
    left: 1rem;
    z-index: 2;
    font-family: "Caveat", "Comic Sans MS", cursive;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f3a2d;
    background: #d7efc4;
    border: 1px dashed rgba(41, 51, 92, 0.45);
    border-radius: 0.42rem;
    padding: 0.12rem 0.45rem;
}

.travel-pros-wrap::after {
    content: "";
    position: absolute;
    right: -0.8rem;
    top: -1.2rem;
    width: clamp(80px, 7vw, 140px);
    height: clamp(80px, 7vw, 140px);
    border-radius: 28% 72% 58% 42% / 36% 47% 53% 64%;
    background: radial-gradient(circle at 30% 30%, rgba(154, 194, 201, 0.7), rgba(154, 194, 201, 0.22));
    z-index: -1;
}

.travel-pros-heading {
    font-size: 2.05rem;
    font-weight: 800;
    color: var(--cw-twilight-indigo);
    margin-bottom: 1.15rem;
    font-family: "Baloo 2", "Trebuchet MS", sans-serif;
    transform: rotate(-0.45deg);
}

.travel-pros-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
}

.travel-pro-card {
    background: linear-gradient(170deg, #fffef6 0%, #f4f8f8 100%);
    border-radius: 1.4rem;
    padding: 1.1rem;
    min-height: 255px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(41, 51, 92, 0.1);
    box-shadow: 0 9px 18px rgba(35, 52, 88, 0.08);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.travel-pro-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.travel-pro-card-link:hover {
    text-decoration: none;
    color: inherit;
}

.travel-pro-card-link:focus-visible {
    outline: 3px solid rgba(209, 96, 20, 0.45);
    outline-offset: 4px;
    border-radius: 1.4rem;
}

.travel-pro-card:hover {
    transform: translateY(-5px) rotate(-0.5deg);
    border-color: rgba(209, 96, 20, 0.35);
    box-shadow: var(--cw-shadow-playful);
}

.travel-pro-card-roadtrip {
    border: 1px solid rgba(154, 194, 201, 0.9);
    background: linear-gradient(150deg, rgba(154, 194, 201, 0.36) 0%, rgba(209, 96, 20, 0.18) 100%);
}

.travel-pro-card-title {
    font-size: 1.58rem;
    font-weight: 700;
    color: var(--cw-twilight-indigo);
    margin-bottom: 0.45rem;
    font-family: "Baloo 2", "Trebuchet MS", sans-serif;
}

.travel-pro-card-text {
    font-size: 1.08rem;
    color: #1f2937;
    margin-bottom: 1rem;
    font-family: "Baloo 2", "Trebuchet MS", sans-serif;
}

.travel-pro-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.16rem 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: "Caveat", "Comic Sans MS", cursive;
    color: #ffffff;
    background: var(--cw-dark-khaki);
    border-radius: 0.4rem;
    vertical-align: middle;
}

.travel-pro-illustration {
    margin-top: auto;
    height: 105px;
    border-radius: 1.2rem;
    background: linear-gradient(150deg, #dbe8ea, #edf5f7);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.travel-pro-illustration i {
    font-size: 2.8rem;
    color: var(--cw-twilight-indigo);
}

.travel-pro-illustration img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.22s ease;
}

.travel-pro-card:hover .travel-pro-illustration i {
    transform: rotate(-10deg) scale(1.1);
}

.travel-pro-card:hover .travel-pro-illustration img {
    transform: scale(1.06);
}

.travel-pros-controls {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.travel-pros-control-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid #c9d1d9;
    background: #e8edf2;
    color: #5b6673;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.travel-pros-control-btn-active {
    background: var(--cw-light-blue);
    color: var(--cw-twilight-indigo);
}

@media (max-width: 1200px) {
    .travel-pros-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .travel-pros-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .travel-pros-heading {
        font-size: 1.6rem;
    }

    .travel-pro-card {
        min-height: 230px;
    }

    .travel-pro-card-title {
        font-size: 1.2rem;
    }

    .travel-pro-card-text {
        font-size: 0.95rem;
    }
}

@media (max-width: 576px) {
    .travel-pros-grid {
        grid-template-columns: 1fr;
    }
}


.roadtrip-home-page {
    background: #ffffff;
}

.roadtrip-home-page .navbar,
.roadtrip-step-page .navbar {
    box-shadow: 0 6px 18px rgba(7, 20, 44, 0.16);
}

.roadtrip-home-page .navbar .navbar-brand,
.roadtrip-step-page .navbar .navbar-brand {
    letter-spacing: 0.01em;
}

.roadtrip-hero-scene {
    background-color: var(--cw-dark-khaki);
    background-image: url("images/campervan_2.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 40vh;
}



.roadtrip-hero-scene::before {
    background: none;
    opacity: 0;
}

.roadtrip-hero-scene::after {
    background: none;
    opacity: 0;
}

.roadtrip-hero-intro {
    padding-top: 8rem;
    padding-bottom: 0.35rem;
    position: relative;
    z-index: 3;
}

.roadtrip-hero-title {
    color: #ffffff;
    text-transform: none;
    font-size: clamp(2.6rem, 4.6vw, 3.8rem);
    text-shadow: 0 3px 16px rgba(12, 23, 39, 0.45);
}

.roadtrip-hero-description {
    max-width: 72ch;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    text-shadow: 0 2px 12px rgba(12, 23, 39, 0.35);
}

.roadtrip-hero-bubbles {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.roadtrip-hero-bubble {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.35rem;
    padding: 0.35rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--cw-chocolate);
    background: transparent;
    color: #ffffff;
    font-family: "Arvo", "Georgia", serif;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 18px rgba(209, 96, 20, 0.22);
}

.roadtrip-hero-bubble.is-active {
    background: transparent;
    border-color: var(--cw-chocolate);
    box-shadow: 0 8px 18px rgba(209, 96, 20, 0.22);
}

.roadtrip-launch-search {
    padding-top: 1rem;
    padding-bottom: 1.4rem;
    position: relative;
}

.roadtrip-home-page .roadtrip-launch-form {
    max-width: 1360px;
    margin: 0 auto;
    background: transparent;
    border: 0;
    border-radius: 0.9rem;
    padding: 0.85rem 0;
    box-shadow: none;
    backdrop-filter: none;
    position: relative;
    z-index: 3;
    overflow: visible;
}

.roadtrip-home-page .roadtrip-launch-form::before {
    content: none;
}

.roadtrip-home-page #roadtripLaunchStep1.search-step.is-active {
    padding-left: 0;
    padding-right: 0;
}

.roadtrip-home-page .roadtrip-launch-step-1-grid {
    grid-template-columns: minmax(240px, 1.2fr) minmax(240px, 1.2fr) minmax(180px, 0.9fr) auto;
    column-gap: 0;
    align-items: end;
}

.roadtrip-home-page .roadtrip-launch-step-1-grid .form-control,
.roadtrip-home-page .roadtrip-launch-step-1-grid .form-select {
    min-height: 52px;
    border-radius: 0;
    border-color: #ccd4db;
    box-shadow: none;
    color: #1f2937;
    background: #ffffff;
}

#roadtripLaunchStep1 .roadtrip-launch-col-origin .form-control {
    border-top-left-radius: 0.9rem;
    border-bottom-left-radius: 0.9rem;
}

#roadtripLaunchStep1 .roadtrip-launch-col-destination .form-control,
#roadtripLaunchStep1 .roadtrip-launch-col-budget .form-control {
    border-left: 0;
}

#roadtripLaunchStep1 .roadtrip-launch-col-budget .form-control {
    border-top-right-radius: 0.9rem;
    border-bottom-right-radius: 0.9rem;
}

.roadtrip-home-page .roadtrip-launch-form .form-control.is-invalid,
.roadtrip-home-page .roadtrip-launch-form .form-select.is-invalid {
    border: 2px solid #dc3545;
    border-radius: 1rem;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.24);
    padding-right: 2.35rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='7' fill='none' stroke='%23dc3545' stroke-width='2'/%3e%3cline x1='8' y1='4' x2='8' y2='9' stroke='%23dc3545' stroke-width='2' stroke-linecap='round'/%3e%3ccircle cx='8' cy='12' r='1.2' fill='%23dc3545'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.23rem) center;
    background-size: calc(0.72em + 0.4rem) calc(0.72em + 0.4rem);
}

.roadtrip-home-page .roadtrip-launch-form .required-indicator {
    display: none;
}

.roadtrip-home-page .roadtrip-launch-step-1-grid label,
.roadtrip-home-page .roadtrip-launch-step-2-grid label,
.roadtrip-home-page .roadtrip-launch-step-3-grid label {
    display: none;
}

.roadtrip-home-page .roadtrip-launch-step-1-grid .step-next-btn,
.roadtrip-home-page .roadtrip-launch-step-2-grid .btn,
.roadtrip-home-page .roadtrip-launch-step-3-grid .btn {
    min-height: 52px;
    min-width: 180px;
    font-weight: 700;
    border-radius: 0.72rem;
    padding: 0.6rem 1.05rem;
}

.roadtrip-home-page #roadtripNextToStep2Btn {
    min-width: auto;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.roadtrip-home-page .roadtrip-launch-step-2-grid .step-nav-pair .btn,
.roadtrip-home-page .roadtrip-launch-step-3-grid .step-nav-pair .btn {
    min-width: auto;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.roadtrip-home-page .roadtrip-launch-state {
    margin-top: 0.72rem;
    color: var(--cw-chocolate);
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.roadtrip-preset-section {
    position: relative;
    z-index: 3;
    padding-top: 3rem;
    padding-bottom: 2rem;
    background: #ffffff;
}

.roadtrip-preset-wrap {
    max-width: 980px;
    margin: 0 auto;
    position: relative;
    border-radius: 1.15rem;
    background: #ffffff;
    border: 1px solid rgba(41, 51, 92, 0.12);
    box-shadow: 0 12px 24px rgba(35, 52, 88, 0.08);
    padding: 1rem 0.95rem 0.9rem;
    transform: translateX(1rem) rotate(-0.3deg);
}

.roadtrip-preset-wrap::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #f4b400;
    top: -7px;
    left: 1rem;
    box-shadow: 0 0 0 5px rgba(244, 180, 0, 0.18);
}

.roadtrip-preset-heading {
    text-transform: none;
    font-size: 1.65rem;
    color: var(--cw-twilight-indigo);
    margin-bottom: 0.2rem;
    font-weight: 800;
}

.roadtrip-preset-subtitle {
    color: #2f3b24;
    margin-bottom: 1rem;
}

.roadtrip-preset-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.roadtrip-preset-card {
    display: block;
    position: relative;
    border: 1px solid #d2ddd9;
    border-radius: 0.75rem;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f4f9f8 100%);
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(41, 51, 92, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.roadtrip-preset-card:hover,
.roadtrip-preset-card:focus-visible {
    border-color: var(--cw-lime-moss);
    box-shadow: 0 10px 22px rgba(142, 166, 4, 0.26);
    transform: translateY(-5px) rotate(-0.4deg);
}

.roadtrip-preset-card:nth-child(odd) {
    transform: rotate(-0.22deg);
}

.roadtrip-preset-card:nth-child(even) {
    transform: rotate(0.22deg);
}

.roadtrip-preset-image {
    width: 100%;
    height: 138px;
    object-fit: cover;
    display: block;
}

.roadtrip-preset-body {
    padding: 0.62rem 0.7rem 0.7rem;
}

.roadtrip-preset-title {
    font-size: 0.95rem;
    color: #112847;
    font-weight: 800;
    margin-bottom: 0.2rem;
}

.roadtrip-preset-meta {
    color: #4a627e;
    font-size: 0.82rem;
}

@media (max-width: 768px) {
    .roadtrip-home-page .roadtrip-launch-step-1-grid {
        grid-template-columns: 1fr;
        row-gap: 0.6rem;
    }

    #roadtripLaunchStep1 .roadtrip-launch-col-origin .form-control,
    #roadtripLaunchStep1 .roadtrip-launch-col-destination .form-control,
    #roadtripLaunchStep1 .roadtrip-launch-col-budget .form-control {
        border-radius: 0.9rem;
        border-left: 1px solid #ccd4db;
    }

    .roadtrip-home-page .roadtrip-launch-step-1-grid .search-col-step-nav {
        margin-left: 0;
    }

    .roadtrip-preset-wrap {
        transform: none;
    }

    .roadtrip-preset-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .roadtrip-preset-card:nth-child(odd),
    .roadtrip-preset-card:nth-child(even) {
        transform: none;
    }
}

.roadtrip-page {
    background: linear-gradient(180deg, #eaf4ff 0%, #f7fbff 100%);
    min-height: 100vh;
}

.roadtrip-shell {
    max-width: 1240px;
    margin: 0 auto;
}

.roadtrip-planner-panel {
    border: 1px solid #d5e2f2;
    border-radius: 1rem;
    background: #ffffff;
    padding: 1rem;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}

.roadtrip-waypoint-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.roadtrip-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
    gap: 1rem;
}

.roadtrip-map {
    border: 1px solid #d5e2f2;
    border-radius: 1rem;
    overflow: hidden;
    min-height: 420px;
    background: #e5edf7;
}

.roadtrip-legs {
    display: grid;
    gap: 0.85rem;
}

.roadtrip-leg-card {
    border: 1px solid #d9e1ec;
    border-radius: 0.9rem;
    padding: 0.85rem;
    background: #ffffff;
}

.roadtrip-stays {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.roadtrip-stay {
    border: 1px solid #e1e7f0;
    border-radius: 0.75rem;
    padding: 0.65rem;
    background: #fbfdff;
    }

    .roadtrip-stay-link {
        display: block;
        text-decoration: none;
        color: inherit;
        border: 1px solid #e1e7f0 !important;
        border-radius: 0.75rem !important;
        padding: 0.65rem !important;
        background: #fbfdff !important;
        cursor: pointer !important;
        transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
        position: relative;
        z-index: 1;
    }
    .roadtrip-stay-link:hover, .roadtrip-stay-link:focus-visible {
        border-color: var(--cw-lime-moss, #8ea604) !important;
        box-shadow: 0 10px 22px rgba(142, 166, 4, 0.13) !important;
        transform: translateY(-3px) scale(1.01) !important;
        text-decoration: none !important;
        color: inherit !important;
        z-index: 2;
}

.roadtrip-stay-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    color: #5b6776;
    font-weight: 600;
}

.roadtrip-stay-image {
    width: 100%;
    height: 118px;
    object-fit: cover;
    border-radius: 0.55rem;
    margin-bottom: 0.45rem;
    display: block;
}

.roadtrip-stay-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #102035;
}

.roadtrip-stay-meta {
    font-size: 0.82rem;
    color: #4b5a6d;
}

@media (max-width: 992px) {
    .roadtrip-layout {
        grid-template-columns: 1fr;
    }

    .roadtrip-map {
        min-height: 360px;
    }
}

@media (max-width: 768px) {
    .roadtrip-stays {
        grid-template-columns: 1fr;
    }

    .roadtrip-results-list .roadtrip-stays {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.promo-banner-wrap {
    max-width: 1280px;
    margin: 0 auto;
    height: 430px;
    display: flex;
    align-items: center;
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    background-image: url('https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=2000&q=80');
    background-size: cover;
    background-position: center;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.promo-banner-section .container {
    transform: translateX(-0.55rem);
}

.promo-banner-wrap:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 32px rgba(31, 40, 82, 0.22);
}

.promo-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(95deg, rgba(41, 51, 92, 0.76) 0%, rgba(49, 55, 21, 0.42) 42%, rgba(209, 96, 20, 0.26) 100%);
}

.promo-banner-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.promo-banner-content {
    position: relative;
    z-index: 2;
    color: #ffffff;
    max-width: 420px;
    padding: 0 0 0 4rem;
}

.promo-banner-title {
    font-size: 2.8rem;
    line-height: 1.02;
    margin-bottom: 0.85rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.promo-banner-subtext {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.promo-banner-btn {
    border-radius: 0.75rem;
    padding: 0.62rem 1.2rem;
    font-weight: 700;
    font-size: 1.2rem;
    color: #0f1720;
    border: 1px solid rgba(209, 96, 20, 0.35);
}


.booking-faq-wrap {
    max-width: 1280px;
    margin: 0 auto;
}

.booking-faq-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--cw-twilight-indigo);
    margin-bottom: 1.2rem;
}

.booking-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.booking-faq-accordion {
    --bs-accordion-border-width: 0;
    --bs-accordion-bg: transparent;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-color: #111827;
    --bs-accordion-active-color: #111827;
}

.booking-faq-item {
    border-bottom: 2px solid #c8d7d5;
    border-radius: 0 !important;
}

.booking-faq-button {
    padding: 1rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.booking-faq-button::after {
    width: 1rem;
    height: 1rem;
    background-size: 1rem;
}

.booking-faq-answer {
    padding: 0 0 1rem;
    color: #374151;
    font-size: 0.95rem;
    line-height: 1.5;
}

@media (max-width: 992px) {
    .promo-banner-wrap {
        height: 360px;
    }

    .promo-banner-content {
        padding: 0 0 0 2rem;
        max-width: 340px;
    }

    .promo-banner-title {
        font-size: 1.95rem;
    }

    .promo-banner-subtext {
        font-size: 1rem;
    }

    .booking-faq-title {
        font-size: 1.2rem;
    }

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

    .booking-faq-button {
        font-size: 1.15rem;
    }
}

@media (max-width: 576px) {
    .promo-banner-wrap {
        height: 300px;
    }

    .promo-banner-content {
        padding: 0 1rem;
        max-width: 100%;
    }

    .promo-banner-title {
        font-size: 1.6rem;
    }

    .promo-banner-subtext {
        margin-bottom: 1rem;
    }
}

.results-section {
    min-height: calc(100vh - 150px);
}

.results-toolbar {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(178, 192, 208, 0.45);
    border-radius: 0.9rem;
    padding: 0.65rem 0.8rem;
    box-shadow: 0 8px 20px rgba(25, 45, 74, 0.07);
}

#resultsHeading {
    color: #1d2f4a;
    letter-spacing: 0.01em;
}

#mobileMapToggle {
    border-color: var(--cw-chocolate);
    background: var(--cw-chocolate);
    color: #ffffff;
    border-radius: 0.7rem;
    box-shadow: 0 7px 16px rgba(209, 96, 20, 0.24);
}

#mobileMapToggle:hover,
#mobileMapToggle:focus-visible {
    border-color: #b45312;
    background: #b45312;
    color: #ffffff;
}

.results-controls {
    border: 1px solid #d5e0da;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.82);
    padding: 0.75rem;
    box-shadow: 0 8px 18px rgba(16, 24, 40, 0.05);
}

.results-select {
    width: auto;
    min-width: 210px;
    border: 1px solid #d8e1d6;
    background-color: #ffffff;
    color: #132748;
    font-size: 0.84rem;
    border-radius: 0.7rem;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23132748' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='M3.5 6.5 8 11l4.5-4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 0.95rem;
    padding-right: 2rem;
}

.results-select:hover,
.results-select:active {
    border-color: #d8e1d6;
    box-shadow: none;
}

.results-select:focus,
.results-select:focus-visible {
    border-color: var(--cw-chocolate);
    box-shadow: 0 0 0 0.2rem var(--cw-focus-ring);
    outline: none;
}

.results-filter-select {
    position: relative;
    min-width: 210px;
}

.results-filter-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.84rem;
    text-align: left;
    border-color: #ced4da;
    background-color: #ffffff;
    color: #132748;
    min-height: 2rem;
    border-radius: 1rem;
}

.results-filter-trigger:hover,
.results-filter-trigger:active {
    border-color: #ced4da;
    box-shadow: none;
}

.results-filter-trigger:focus,
.results-filter-trigger:focus-visible {
    border-color: var(--cw-chocolate);
    box-shadow: 0 0 0 0.2rem var(--cw-focus-ring);
    outline: none;
}

.results-filter-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    width: 100%;
    min-width: 210px;
    z-index: 30;
}

.sort-by-item,
.group-by-item {
    font-size: 0.84rem !important;
    line-height: 1.2;
}

.country-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.country-chip {
    border: 1px solid #d8dde7;
    background: #ffffff;
    color: #2f3f55;
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 600;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.country-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(142, 166, 4, 0.5);
    box-shadow: 0 5px 10px rgba(142, 166, 4, 0.15);
}

.country-chip.active {
    background: var(--cw-lime-moss);
    border-color: var(--cw-lime-moss);
    color: #ffffff;
}

.results-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 1.25rem;
    align-items: start;
}

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

.results-layout.map-hidden .results-map-panel {
    display: none;
}

.results-list-panel {
    min-width: 0;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(205, 218, 231, 0.5);
    border-radius: 1rem;
    padding: 0.85rem;
}

.results-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.results-group {
    margin-bottom: 1.1rem;
}

.results-group-title {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.7rem;
}

.results-map-panel {
    position: sticky;
    top: 86px;
    height: calc(100vh - 108px);
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(205, 218, 231, 0.8);
    background: #fdfefe;
    box-shadow: 0 10px 24px rgba(26, 52, 84, 0.12);
}

.results-map {
    width: 100%;
    height: 100%;
}

.results-state {
    border-radius: 0.8rem;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.results-state.loading {
    background: #dcecf0;
    color: var(--cw-twilight-indigo);
}

.results-state.empty {
    background: #f3e5d6;
    color: var(--cw-chocolate);
}

.results-state.error {
    background: #f8d9c8;
    color: #8f3f10;
}

.result-card {
    border: 1px solid #d6deea;
    border-radius: 0.95rem;
    overflow: hidden;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

.result-card::before {
    content: none;
}

.result-card:hover,
.result-card.active {
    border-color: rgba(142, 166, 4, 0.7);
    box-shadow: 0 10px 22px rgba(91, 113, 12, 0.18);
    transform: translateY(-3px);
}

.result-card-image {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.result-card-body {
    padding: 0.9rem 1rem 1rem;
}

.result-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #203047;
}

.result-card-rating {
    font-size: 0.92rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
}

.result-card-area {
    font-size: 0.92rem;
    color: #4b5563;
}

.result-card-api-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.76rem;
    font-weight: 700;
    color: #7b3f00;
    background: rgba(249, 191, 95, 0.28);
    border: 1px solid rgba(209, 96, 20, 0.32);
    border-radius: 999px;
    padding: 0.1rem 0.48rem;
}

.result-card-price {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a2f4b;
}

.result-card-breakdown {
    font-size: 0.88rem;
    color: #4b5563;
}

.result-card-night {
    font-size: 0.9rem;
    color: #4b5563;
}

.price-tooltip {
    background: #ffffff;
    border: 1px solid #d6dde7;
    border-radius: 999px;
    color: #223650;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    box-shadow: 0 3px 10px rgba(25, 40, 62, 0.12);
}

.price-tooltip.active {
    border-color: var(--cw-chocolate);
    color: var(--cw-chocolate);
}

@media (max-width: 1199px) {
    .results-layout:not(.map-hidden) .results-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .results-select {
        width: 100%;
        min-width: 0;
    }

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

    .results-layout.map-hidden .results-map-panel {
        display: block;
    }

    .results-map-panel {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100vh;
        z-index: 1050;
        transform: translateY(105%);
        transition: transform 0.25s ease;
        background: #ffffff;
        border-radius: 0;
        border: 0;
        box-shadow: none;
    }

    .results-layout.map-open .results-map-panel {
        transform: translateY(0);
    }

    .results-layout.map-open .results-list-panel {
        visibility: hidden;
    }

    #mobileMapToggle {
        display: inline-flex;
    }

    .mobile-map-open {
        overflow: hidden;
    }

    .mobile-map-open #mobileMapToggle {
        position: fixed;
        top: 0.9rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1060;
        border-color: var(--cw-chocolate);
        background: var(--cw-chocolate);
        color: #ffffff;
        box-shadow: 0 10px 24px rgba(20, 32, 52, 0.25);
    }
}


.roadtrip-launch-page {
    min-height: 100vh;
    background: #1267d6;
    color: #f8fbff;
    font-family: "Nunito", "Segoe UI", sans-serif;
}

.roadtrip-launch-nav {
    max-width: 1320px;
    margin: 0 auto;
    padding: 1rem 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.roadtrip-launch-brand {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.7rem;
    font-weight: 700;
}

.roadtrip-launch-nav-links {
    display: flex;
    gap: 1rem;
}

.roadtrip-launch-nav-links a {
    color: #e7f0ff;
    text-decoration: none;
    font-weight: 600;
}

.roadtrip-launch-shell {
    max-width: 1320px;
    margin: 0 auto;
    padding: 1rem 1.2rem 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 1.6rem;
}

.roadtrip-launch-content h1 {
    font-size: clamp(2.2rem, 5vw, 5rem);
    font-weight: 800;
    line-height: 0.95;
    margin-bottom: 0.8rem;
    max-width: 11ch;
}

.roadtrip-launch-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.82rem;
    font-weight: 700;
    color: #c9dfff;
    margin-bottom: 0.65rem;
}

.roadtrip-launch-subtitle {
    font-size: 1.1rem;
    color: #ddebff;
    max-width: 55ch;
    margin-bottom: 1rem;
}

.roadtrip-launch-form {
    background: rgba(10, 35, 82, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 1rem;
    padding: 0.9rem;
    max-width: 920px;
}

.roadtrip-launch-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    margin-bottom: 0.85rem;
}

.roadtrip-launch-mode-card {
    display: grid;
    gap: 0.2rem;
    border: 2px solid #b9d5ff;
    border-radius: 0.8rem;
    background: #edf4ff;
    color: #102a4a;
    padding: 0.7rem;
}

.roadtrip-launch-mode-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 14px rgba(16, 42, 74, 0.12);
}

.roadtrip-launch-mode-card input {
    justify-self: end;
}

.roadtrip-launch-mode-title {
    font-size: 1.1rem;
    font-weight: 700;
}

.roadtrip-launch-mode-text {
    font-size: 0.92rem;
    color: #27456d;
}

.roadtrip-launch-route-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.roadtrip-launch-route-grid label {
    display: block;
    color: #ecf4ff;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
    font-weight: 700;
}

.roadtrip-launch-route-grid .form-control,
.roadtrip-launch-route-grid .form-select {
    border-radius: 0.65rem;
}

.roadtrip-launch-actions {
    margin-top: 0.9rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.roadtrip-launch-explore {
    color: #e4efff;
    font-weight: 700;
    text-decoration: none;
}

.roadtrip-launch-state {
    margin-top: 0.8rem;
    color: #fff7cc;
    font-weight: 700;
}

.roadtrip-launch-visual {
    min-height: 620px;
    display: grid;
    gap: 0.85rem;
    align-content: center;
}

.roadtrip-visual-frame {
    border-radius: 2.4rem;
    background-size: cover;
    background-position: center;
    min-height: 190px;
}

.roadtrip-visual-frame-top {
    background-image: url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1200&q=80');
}

.roadtrip-visual-frame-mid {
    background-image: url('https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=1200&q=80');
}

.roadtrip-visual-frame-bottom {
    background-image: url('https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=1200&q=80');
}

.roadtrip-step-page {
    background:
        radial-gradient(circle at 8% 2%, rgba(244, 180, 0, 0.14), transparent 34%),
        radial-gradient(circle at 92% 14%, rgba(142, 166, 4, 0.14), transparent 34%),
        var(--cw-page-bg);
    min-height: 100vh;
}

.roadtrip-step-shell,
.roadtrip-results-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.35rem 1.2rem 1.7rem;
}

.roadtrip-step-header {
    margin-bottom: 1rem;
}

.roadtrip-step-kicker {
    color: #4d5f2f;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.roadtrip-step-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
    text-decoration: none;
    font-weight: 700;
    line-height: 1;
    min-height: 31px;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--cw-chocolate);
    border-radius: 0.7rem;
    color: var(--cw-chocolate);
    background: transparent;
}

.roadtrip-step-back:hover,
.roadtrip-step-back:focus-visible {
    color: #ffffff;
    background: var(--cw-chocolate);
    border-color: var(--cw-chocolate);
}

.roadtrip-step-panel {
    border: 1px solid rgba(41, 51, 92, 0.16);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 247, 241, 0.96));
    padding: 1.05rem;
    box-shadow: 0 12px 24px rgba(35, 52, 88, 0.12);
}

.roadtrip-stop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(41, 51, 92, 0.15);
    border-radius: 0.8rem;
    background: linear-gradient(180deg, rgba(154, 194, 201, 0.16), rgba(255, 255, 255, 0.78));
}

.roadtrip-stop-toolbar-label {
    font-family: "Arvo", "Georgia", serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cw-twilight-indigo);
    font-size: 0.95rem;
    font-weight: 700;
}

.roadtrip-stop-toolbar-hint {
    color: #4e6042;
    font-size: 0.86rem;
    max-width: 62ch;
}

.roadtrip-add-stop-btn {
    border-radius: 999px;
    padding: 0.6rem 1rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(209, 96, 20, 0.24);
}

.roadtrip-stops-stack {
    background: rgba(255, 255, 255, 0.82);
    border: 1px dashed rgba(41, 51, 92, 0.22);
    border-radius: 0.85rem;
    padding: 0.7rem;
    margin-top: 0.35rem;
}

.roadtrip-step-route-summary {
    margin-bottom: 0.8rem;
    padding: 0.7rem;
    border-radius: 0.7rem;
    background: rgba(154, 194, 201, 0.24);
    color: var(--cw-twilight-indigo);
    font-weight: 700;
}

.roadtrip-stop-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px 92px;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
    align-items: center;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(41, 51, 92, 0.12);
    border-radius: 0.7rem;
    padding: 0.45rem;
}

.roadtrip-stop-grid-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px 92px;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    color: #5d6a47;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.roadtrip-stop-head-stop {
    grid-column: 1;
}

.roadtrip-stop-head-nights {
    grid-column: 2;
    text-align: center;
}

.roadtrip-stop-row .form-control {
    min-height: 44px;
}

.roadtrip-stop-row .btn {
    min-height: 44px;
    width: 100%;
}

.roadtrip-stop-nights-input {
    text-align: center;
    font-weight: 700;
    font-size: 0.92rem;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

.roadtrip-step-state {
    margin-top: 0.8rem;
    color: var(--cw-chocolate);
    font-weight: 700;
}

.roadtrip-results-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 1.15rem;
    align-items: start;
}

.roadtrip-results-aside {
    display: grid;
    gap: 0.9rem;
    align-content: start;
}

.roadtrip-results-list {
    display: grid;
    gap: 0.8rem;
}

.roadtrip-map-large {
    min-height: 620px;
    height: calc(100vh - 150px);
    position: sticky;
    top: 86px;
}

.roadtrip-map-panel {
    border: 1px solid rgba(41, 51, 92, 0.16);
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(247, 247, 241, 0.95));
    box-shadow: 0 12px 24px rgba(35, 52, 88, 0.1);
}

.roadtrip-map-panel-head {
    padding: 0.65rem 0.8rem;
    border-bottom: 1px solid rgba(41, 51, 92, 0.16);
    background: rgba(154, 194, 201, 0.18);
    color: var(--cw-twilight-indigo);
    font-weight: 700;
    font-size: 0.9rem;
}

.roadtrip-map-panel .roadtrip-map {
    border: 0;
    border-radius: 0;
}

.roadtrip-carhire-panel {
    overflow: hidden;
}

.roadtrip-carhire-stop-list {
    padding: 0.8rem;
    display: grid;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.86);
}

.roadtrip-carhire-stop-group {
    border: 1px solid rgba(41, 51, 92, 0.14);
    border-radius: 0.75rem;
    padding: 0.6rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 247, 241, 0.96));
}

.roadtrip-carhire-stop-title {
    margin-bottom: 0.5rem;
    color: var(--cw-twilight-indigo);
    font-size: 0.88rem;
    font-weight: 700;
}

.roadtrip-flight-stop-list {
    padding: 0.8rem;
    display: grid;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.86);
}

.roadtrip-flight-stop-group {
    border: 1px solid rgba(41, 51, 92, 0.14);
    border-radius: 0.75rem;
    padding: 0.6rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 247, 241, 0.96));
}

.roadtrip-flight-stop-title {
    margin-bottom: 0.5rem;
    color: var(--cw-twilight-indigo);
    font-size: 0.88rem;
    font-weight: 700;
}

.roadtrip-flight-card {
    border: 1px solid rgba(41, 51, 92, 0.15);
    border-radius: 0.7rem;
    background: rgba(154, 194, 201, 0.14);
    padding: 0.55rem 0.6rem;
}

.roadtrip-flight-title {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--cw-twilight-indigo);
}

.roadtrip-flight-meta {
    font-size: 0.79rem;
    color: #4f5e38;
}

.roadtrip-results-list .roadtrip-leg-card {
    border: 1px solid rgba(41, 51, 92, 0.14);
    box-shadow: 0 10px 20px rgba(35, 52, 88, 0.1);
}

.roadtrip-carhire-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.roadtrip-carhire-card {
    border: 1px solid rgba(41, 51, 92, 0.15);
    border-radius: 0.75rem;
    background: #ffffff;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    transition: box-shadow 0.18s, border-color 0.18s, transform 0.18s;
}

.roadtrip-carhire-image {
    width: 170px;
    min-height: 160px;
    flex-shrink: 0;
    object-fit: cover;
    display: block;
}

.roadtrip-carhire-body {
    flex: 1;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    border-right: 1px solid rgba(41, 51, 92, 0.1);
}

.roadtrip-carhire-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: #4a4a4a;
    border: 1px solid #b0b0b0;
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    width: fit-content;
    letter-spacing: 0.02em;
}

.roadtrip-carhire-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.9rem;
    font-size: 0.8rem;
    color: #555;
    margin-top: 0.1rem;
}

.roadtrip-carhire-specs span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.roadtrip-carhire-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.roadtrip-carhire-features li {
    font-size: 0.8rem;
    color: #333;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.roadtrip-carhire-features .bi-check-lg {
    color: #2fa33e;
    font-size: 1rem;
    flex-shrink: 0;
}

.roadtrip-carhire-more {
    font-size: 0.8rem;
    font-weight: 600;
    color: #2fa33e;
    cursor: pointer;
    width: fit-content;
    margin-top: auto;
    padding-top: 0.25rem;
}

.roadtrip-carhire-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 0.85rem 1rem;
    gap: 0.25rem;
    min-width: 160px;
    flex-shrink: 0;
}

.roadtrip-carhire-from {
    font-size: 0.7rem;
    font-weight: 600;
    color: #888;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    align-self: flex-end;
}

.roadtrip-carhire-amount {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--cw-twilight-indigo);
    line-height: 1.1;
    text-align: right;
}

.roadtrip-carhire-amount span {
    font-size: 0.85rem;
    font-weight: 500;
    color: #555;
}

.roadtrip-carhire-total {
    font-size: 0.75rem;
    color: #666;
    text-align: right;
    margin-bottom: 0.5rem;
}

.roadtrip-carhire-select {
    background: var(--cw-chocolate);
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.45rem 1.1rem;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

.roadtrip-carhire-select:hover {
    background: #b84f0e;
    color: #ffffff;
}

.roadtrip-carhire-card:hover {
    transform: translateY(-2px);
    border-color: rgba(209, 96, 20, 0.45);
    box-shadow: 0 8px 18px rgba(209, 96, 20, 0.12);
}

@keyframes cwStepEnter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cwPulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .home-deal-card.is-linked:hover,
    .result-card:hover,
    .result-card.active,
    .travel-pro-card:hover,
    .promo-banner-wrap:hover,
    .roadtrip-launch-mode-card:hover,
    .roadtrip-carhire-card:hover {
        transform: none;
    }
}

.roadtrip-carhire-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--cw-twilight-indigo);
    letter-spacing: 0.01em;
}

.roadtrip-carhire-meta {
    font-size: 0.79rem;
    color: #4f5e38;
}

.roadtrip-typeahead-menu {
    background: #ffffff;
    border: 1px solid var(--cw-dropdown-border);
    border-radius: var(--cw-dropdown-radius);
    box-shadow: var(--cw-dropdown-shadow);
    max-height: 310px;
    overflow-y: auto;
}

.roadtrip-typeahead-item {
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid #e5edf7;
    background: #ffffff;
    color: #11284a;
    font-size: 0.98rem;
    padding: 0.6rem 0.75rem;
}

.roadtrip-typeahead-item:last-child {
    border-bottom: 0;
}

.roadtrip-typeahead-item.active,
.roadtrip-typeahead-item:hover {
    background: #eef5ff;
}

.origin-suggestion-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.origin-suggestion-icon {
    margin-top: 0.28rem;
    color: #5f6670;
    font-size: 0.95rem;
    min-width: 0.95rem;
}

.origin-suggestion-text {
    display: flex;
    flex-direction: column;
    gap: 0.04rem;
}

.origin-suggestion-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: #0f213f;
    line-height: 1.2;
}

.origin-suggestion-meta {
    font-size: 0.78rem;
    font-weight: 700;
    color: #0f213f;
    line-height: 1.15;
}

@media (max-width: 992px) {
    .roadtrip-launch-shell,
    .roadtrip-results-layout {
        grid-template-columns: 1fr;
    }

    .roadtrip-launch-visual {
        min-height: 0;
    }

    .roadtrip-launch-route-grid,
    .roadtrip-launch-modes {
        grid-template-columns: 1fr;
    }

    .roadtrip-map-large {
        position: static;
        top: auto;
        height: auto;
        min-height: 420px;
    }

    .roadtrip-map-panel {
        margin-top: 0.25rem;
    }

    .roadtrip-carhire-list {
        grid-template-columns: 1fr;
    }

    .roadtrip-carhire-image {
        width: 110px;
        min-height: 120px;
    }

    .roadtrip-carhire-price {
        min-width: 120px;
        padding: 0.65rem 0.7rem;
    }

    .roadtrip-stop-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .roadtrip-add-stop-btn {
        justify-content: center;
        width: 100%;
    }
}