* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
section.search-result-view {
    padding: 10px 0;
}
.search-result-page {
    background-color: #f7f4f4;
}
.search-header {
    margin: auto;
    padding: 15px 0px 20px 0;
    position: relative;
}
.section-heading .title-icon {
    color: #555bb8;
    position: relative;
    top: -2px;
}
.search-header:after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: -40%;
    width: 210%;
    box-shadow: 0 2px 4px -1px #0000000f;
    height: 5px;
    right: -10%;
}
.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    height: 34px;
}

.title-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

    .title-wrap h1 {
        font-size: 20px;
        font-weight: 600;
        color: #31356e;
        margin-bottom: 0;
    }

.edit-btn {
    border: 1px solid #ddd;
    background: #fff;
    color: #555bb8;
    padding: 6px 12px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 12px;
    font-weight:600;
    transition: .3s;
}


.edit-search-box {
    display: none;
    align-items: center;
    gap: 10px;
    width: 300px;
    max-width: 100%;
    padding: 1px 3px 1px 16px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 9px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .08);
}

    .edit-search-box.is-open {
        display: inline-flex;
        border-color: color-mix(in oklab, #e70004 40%, transparent);
    }

.material-symbols-outlined {
    line-height: 1;
    vertical-align: middle;
    user-select: none;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.edit-search-box .material-symbols-outlined {
    color: #8b8b8b;
    font-size: 18px;
}

.edit-search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 15px;
    color: #1f2937;
    padding: 6px 0;
    width: 238px;
}

.edit-search-input::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

/* custom.js adds the header's typewriter placeholder to every search box; this page keeps a
   plain static placeholder instead. */
.edit-search-box .gwp-search-typewriter {
    display: none !important;
}

.edit-search-submit {
    flex-shrink: 0;
    border: 0;
    background: #f5b209;
    color: #fff;
    padding: 4px 6px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 9px !important;
    font-weight: 600;
    transition: .3s;
}

    .edit-search-submit svg{
        width:17px;
    }


.location {
    display: flex;
    align-items: center;
    gap: 3px;
    color: #6b7280;
    font-size: 16px;
    border-left: solid 1px #b4b8c1;
    padding-left: 10px;
}
    .location strong{
        font-weight:500;
    }
    .location span {
        color: #1e2939;
        font-weight: 400;
        font-size: 14px;
    }

    .location i {
        color: #8b8b8b;
        font-size: 18px;
    }

    .location a {
        color: #4ecdc4;
        text-decoration: underline;
        font-weight: 500;
        cursor: pointer;
        font-size: 14px;
    }

/* Change location popup */
.location-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.location-modal[hidden] {
    display: none;
}

.location-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
}

.location-modal-dialog {
    position: relative;
    width: 520px;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 40px rgba(0,0,0,.22);
}

.location-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 22px;
    border-bottom: 1px solid #e5e7eb;
}

.location-modal-head h2 {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0;
}

.location-modal-close {
    border: 0;
    background: transparent;
    color: #6b7280;
    line-height: 1;
    padding: 4px;
    cursor: pointer;
    transition: .3s;
}


.location-modal-body {
    padding: 22px;
}

.location-field {
    margin-bottom: 18px;
}

.location-field label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #3f526f;
    margin-bottom: 6px;
}

.location-input {
    width: 100% !important;
    border: 1px solid #737373 !important;
    border-radius: 10px !important;
    background: #fff;
    padding: 10px 14px !important;
    font-size: 15px !important;
    color: #1f2937;
    outline: 0 !important;
    transition: .3s !important;
}

    .location-input::placeholder {
        color: #9ca3af;
        font-weight: 400;
    }

    .location-input:focus {
        border-color: #e70004;
        box-shadow: 0 3px 8px rgba(0,0,0,.08);
    }

/* Live city search under the Change Location box - a typeahead dropdown like the Edit Search
   one. It sits in the flow rather than floating, so the dialog's own scrolling can never clip
   it - it just pushes the Suggested pills down while it's open. */
.location-field .twitter-typeahead {
    display: block !important;
    width: 100%;
    position: relative !important;
    padding-left: 0 !important;
}

.location-field .tt-menu {
    position: static !important;
    left: auto !important;
    width: 100% !important;
    margin: 6px 0 0 !important;
    padding: 6px 0;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.location-field .tt-suggestion {
    padding: 0;
}

.location-city-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 15px;
    line-height: 1.4;
    color: #3f526f;
    cursor: pointer;
}

    .location-city-option .material-symbols-outlined {
        font-size: 18px;
        color: #555bb8;
    }

    .location-city-option .tt-highlight {
        font-weight: 700;
        color: #31356e;
    }

.location-field .tt-suggestion.tt-cursor,
.location-field .tt-suggestion:hover {
    background: #555bb814;
    color: #31356e;
}

.location-suggestions-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 10px;
}

.city-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.city-pill {
    border: 1px solid #e5e7eb;
    background: #ececec;
    color: #3f526f;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: .3s;
}


    .city-pill.active {
        background: #555bb814;
        border-color: #f5b209;
        color: #737373;
    }

.location-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 18px 22px;
    border-top: 1px solid #e5e7eb;
}

.location-cancel {
    border: 1px solid #595353;
    background: #fff;
    color: #3f526f;
    padding: 12px 22px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: .3s;
    width: 100%;
    background: #fff !important;
}


.location-apply {
    border: 0;
    background: #e1a208;
    color: #fff;
    padding: 8px 22px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: .3s;
    width: 100%;
}


body.location-modal-open {
    overflow: hidden;
}

.category-list {
    /* Where the bar parks once stuck - the JS reads this to work out when to stick */
    --sticky-top: 153px;
    margin-top: 15px;
}

/* The row itself lives in a container-xxl, so it keeps the site's gutters even
   while the bar around it is stretched across the viewport */
.category-list-inner {
    display: flex;
    gap: 11px;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* In the flow the page container already supplies the gutters, so the nested
       one drops its own and only takes them back when the bar goes full width */
    padding-left: 0;
    padding-right: 0;
}

.category-list.sticky-header .category-list-inner {
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
}

.category {
    position: relative;
    width: 114px;
    height: 76px;
    /* Room at the foot of the pill for the save badge, held whether or not the
       badge is showing so the icon and the label never move on hover */
    padding-bottom: 20px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .3s;
    box-shadow: 0 3px 8px rgba(0,0,0,.08);
    gap: 6px;
}

.category i {
    font-size: 22px;
    color: #555bb8;
    margin-bottom: 0px;
    transition: transform .25s ease;
}

.category span {
    font-size: 14px;
    font-weight: 600;
    color: #3f526f;
}

/* Scaled rather than resized, so the bigger icon doesn't reflow the pill */
    .category.active {
        border: 1px solid #f5b209;
        border-color: #f5b209;
        box-shadow: 0px 0px 2px #f5b209 !important;
    }

.category.active i {
    color: #555bb8;
}

/* Sticky category bar - .sticky-header is added by the JS once the page scrolls far enough
   (20px on desktop, but on mobile not until the row reaches its stuck position) */
.category-list.sticky-header {
    position: fixed;
    top: var(--sticky-top);
    left: 0;
    right: 0;
    z-index: 999;
    margin-top: 0;
    padding: 8px 0;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    background-color: #f7f4f4;
}

.category-list.sticky-header .category-list-inner {
    flex-wrap: nowrap;
    justify-content: space-between;
    overflow-x: auto;
}

/* Condensed pills while stuck, so the bar keeps out of the way of the results */
.category-list.sticky-header .category {
    flex: 0 0 auto;
    width: auto;
    height: 35px;
    flex-direction: row;
    /* Icon is hidden while stuck, so the badge supplies its own spacing */
    gap: 0;
    padding: 0 13px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
    margin: 3px 0;
}

/* The stuck bar is label-only - the icons come back when it drops into the flow */
.category-list.sticky-header .category i {
    display: none;
}

.category-list.sticky-header .category span {
    font-size: 14px;
    white-space: nowrap;
}


.category-group {
    display: flex;
    gap: 11px;
}

.category-scroller {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Arrows are a mobile-only affordance - the full row fits on desktop */
.category-nav {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #3f526f;
    cursor: pointer;
    transition: .3s;
   
}
.category-nav-prev {
    position: absolute;
    left: -13px;
    z-index: 9;
}
.category-nav-next{
    position:absolute;
    right:0;
}

.category-nav i {
    font-size: 24px;
    color: #737373;
}


    /* An arrow only shows while there is something left to scroll to on that side */
    .category-nav.is-hidden {
        display: none;
    }
.section-heading {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 8px;
}
.save-head-group {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}
    .save-head-group svg{
        width:13px;
    }
    .section-heading h2 {
        font-size: 20px !important;
        font-weight: 600 !important;
        color: #31356e !important;
        margin-bottom: 0;
        border-right: solid 2px #737373;
        padding-right: 10px;
        line-height: 18px;
        margin-bottom: 0 !important;
    }
.save-headtext {
    color: #737373;
    font-size: 13px;
    font-weight: 600;
}
.section-flex {
    display: flex;
    align-items: center;
    gap: 7px;
}
.view-all {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 8px;
    border: none;
    border-radius: 40px;
    text-decoration: none;
    color: #555bb8;
    font-size: 13px;
    font-weight: 600;
    transition: 0.3s all ease-in-out;
    background-color: #ffffff;
    border: solid 1px #fff;
}
    .view-all .fa-chevron-right {
        transition: transform .3s ease-in-out;
        font-size: 10px;
    }



.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(290px,1fr));
    gap: 18px;
}

.attraction-card {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    transition: .3s;
}


/* Fixed height, not just a cap: the images are lazy and unsized, so a frame sized by its image
   sat at 0 until the file arrived and the sections grew while scrolling past them - throwing
   the category bar's jump-to-section off. The image is centred in the frame. */
.card-image {
    position: relative;
    height: 155px;
    max-height: 155px;
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .card-image img {
        width: auto;
        height:auto;
        object-fit: unset !important;
        display: block;
        transition: transform .5s ease;
    }

/* Hotel photos fill the fixed frame rather than leaving bands above and below a shorter image */
#hotels .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    padding: 0 !important;
}
#hotels .card-body span {
    color: #166534;
}
/* city-overview.js reads each image's pixels and tags it: card-image-full-width for opaque
   artwork that can fill the frame, logo-img for a cut-out logo on a transparent background,
   which is fitted inside the frame with some breathing room instead. */
.card-image img.card-image-full-width {
    width: 100%;
    height: 155px;
    object-fit: cover !important;
    object-position: top;
}

.card-image img.logo-img {
    max-width: 100%;
    max-height: 155px;
    padding: 10px 35px;
    box-sizing: border-box;
    object-fit: contain !important;
}

@media (max-width: 768px) {
    .card-image img.card-image-full-width {
        height: 100px;
    }

    .card-image img.logo-img {
        max-height: 100px;
        padding: 10px 25px;
    }
    .card-image {
        height: 100px;
        max-height: 100px;
    }
    .edit-search-box{
        width:100%;
    }
    .title-wrap {
        gap: 12px;
    }
   
}


/* Supplier artwork is either a landscape photo or a brand logo, and only the browser knows
   which once the file has loaded. city-overview.js measures each image and tags the frame,
   so a photo can fill the slot while a logo keeps its whitespace against a neutral card.
   An untagged frame - image still loading, or broken - keeps the safe `contain` above. */
/*.card-image.is-photo img {
    object-fit: cover;
}*/


.discount {
    position: relative;
    top: 0;
    right: 0;
    background: #555bb8;
    padding:6px 8px;
    color: #ffffff;
    border-radius: 0;
    font-size: 12px;
    font-weight: 700;
    width: 100%;
    text-align: center;
    display: block;
}

.card-body {
    padding: 10px 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

    .card-body h3 {
        font-size: 14px;
        line-height: 1.35;
        color: #302e2b;
        margin-bottom: 5px;
        font-weight: 600;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .card-body p {
        color: #666;
        font-size: 13px;
        font-weight: 500;
        margin-bottom: 0;
        margin-top: auto;
    }

    .card-body span {
        font-weight: 700;
        color: #15803d;
    }

/* The discount bar only renders on cards that have a discount, which pushed their image and
   title below the neighbouring cards. Each card now shares three row tracks with the rest of
   its grid row - discount bar, image, body - so the tracks size to the row, not the card.
   A card without a discount lets its image rise into the empty bar track, so every image and
   title in a row starts on the same line. A row with no discounts collapses the bar track to 0. */
@supports (grid-template-rows: subgrid) {

    .card-grid > .attraction-card {
        display: grid;
        grid-row: span 3;
        grid-template-rows: subgrid;
        row-gap: 0;
    }

    .card-grid > .attraction-card > .discount {
        grid-row: 1;
    }

    .card-grid > .attraction-card > .card-image {
        grid-row: 2;
    }

    .card-grid > .attraction-card > .card-body {
        grid-row: 3;
    }

    /* The image is taken out of flow so the frame's height comes from the tracks it spans
       rather than the picture's own size; min-height keeps it at least a normal image. Only
       top/bottom are pinned, so the frame's justify-content still centres it horizontally. */
    .card-grid > .attraction-card:not(:has(> .discount)) > .card-image {
        grid-row: 1 / span 2;
        height: auto;
        max-height: none;
        min-height: 190px;
    }

        .card-grid > .attraction-card:not(:has(> .discount)) > .card-image > img {
            position: absolute;
            top: 0;
            bottom: 0;
            height: 100%;
        }

        /* A shorter frame (mobile) would otherwise shrink a photo below the card's width.
           Logos keep their contain styling from .card-image.is-logo. */
        .card-grid > .attraction-card:not(:has(> .discount)) > .card-image:not(.is-logo) > img:not(.logo-img) {
            min-width: 100%;
            object-fit: cover;
        }

        /* A transparent logo keeps its own size and sits centred in the taller frame. */
        .card-grid > .attraction-card:not(:has(> .discount)) > .card-image > img.logo-img {
            inset: 0;
            margin: auto;
            height: auto;
            max-height: 100%;
        }

    @media (max-width: 768px) {
        .card-grid > .attraction-card:not(:has(> .discount)) > .card-image {
            min-height: 110px;
        }
    }
}

.attraction-card.is-hidden,
.car-card.is-hidden,
.event-card.is-hidden {
    display: none;
}

.grid-actions {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    position:relative;
}

.show-more-btn {
    border: 1px solid #e9e7e7;
    background: #fff;
    padding: 8px 24px;
    border-radius: 40px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: .3s;
    color: #1a1a1a !important;
    position:relative;
    z-index:9;
}


.grid-actions:before {
    content: '';
    width: 100%;
    background: #c5c8cc;
    height: 1px;
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 0;
}
.result-section {
    margin-bottom: 10px;
}
.search-header:has(.sticky-header) {
    padding-bottom:10px;
}
.see-all-mobile{
    display:none;
}
.timeline-box {
    background: #ffffff;
    color: #1a1a1a;
}

/*css form new sporting events*/


.events-container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0;
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 22px;
}

/* Event Card */
.event-card {
    min-height: 84px;
    background: #fffbf5;
    border: 1px solid #e0e3e6; 
    border-radius: 17px;
    display: flex;
    align-items: center;
    padding: 0px;
    gap: 14px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    cursor: pointer;
    box-shadow: 0 4px 6px -2px var(--tw-shadow-color, #0000001f), 0 2px 4px -1px var(--tw-shadow-color, #0000000f);
}
.event-category {
    background-color: #14532d;
    color: #ffffff;
    font-size: 11px;
    font-weight: 500;
    width: fit-content;
    padding: 3px 7px;
    border-radius: 5px;
    margin: 7px 0;
    text-transform: uppercase;
}
.maroon-shade {
    background-color: #7c2d12;
}
.navy-blue-shade {
    background-color: #1e3a5f;
}
.red-shade {
    background-color: #9a3412;
}
.navy-green-shade {
    background-color: #0c4a6e;
}
.green-shade {
    background-color: #115e59;
}
.mehandi-shade {
    background-color: #3f6212;
}
        /* Date */
.event-date {
    flex: 0 0 70px;
    width: 70px;
    height: 100%;
    border-right: solid 1px;
    border-radius: 17px 0 0 17px;
    background: #f0fdf4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1;
    /* background: background-color: color-mix(in srgb, var(--funex-text-ink) 4.5%, white); */
    background-color: color-mix(in srgb, #302e2b 4.5%, white);
    border-color: color-mix(in srgb, #fac109 18%, #f2ebe4);
    gap: 3px;
}

.event-month {
    font-size: 18px;
    font-weight: 600;
    /* letter-spacing: 1px; */
    color: #666;
    margin-bottom: 0px;
}

.event-day {
    font-size: 22px;
    line-height: 26px;
    font-weight: 700;
    color: rgb(26, 26, 26);
}
.event-year{
    font-size:16px;
    color:#666;
    font-weight:500;
}
/* Content */
.event-content {
    min-width: 0;
    flex: 1;
}

    .event-content h3 {
        margin: 0 0 0px;
        color: rgb(48, 46, 43);
        font-size: 15px;
        line-height: 20px;
        font-weight: 600;
    }

    .event-content p {
        margin: 5px 0 5px;
        color: rgb(102, 102, 102);
        font-size: 13px;
        line-height: 17px;
        font-weight: 500;
    }

    .event-content strong {
        display: block;
        color: #666;
        font-size: 14px;
        line-height: 19px;
        font-weight: 500;
        margin-bottom: 10px;
    }

/* Show More */
.show-more-wrapper {
    display: flex;
    justify-content: center;
    padding: 20px 0 20px;
}

.show-more-btn {
    min-width: 128px;
    height: 42px;
    padding: 0 20px;
    background: #ffffff;
    border: 1px solid #e1e5e9;
    border-radius: 22px;
    color: #111111;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}



/* =========================
   Tablet
========================= */
/*.concert-events .event-date {
    background: #eff6ff;
    border-color: #bfdbfe;
}
.concert-events .event-day, .concert-events .event-month{
    color: #1d4ed8;
}
.theater-events .event-date {
    background: #faf5ff;
    border-color: #e9d5ff;
}

.theater-events .event-day, .theater-events .event-month {
    color: #7e22ce;
}
*/
.car-rental-list {
    width: 100%;
    margin: 0 auto;
    padding: 0px 0px 0px 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    column-gap: 24px;
    row-gap: 14px;
}

/*
    Make the cards appear row-by-row:

    Card 1 | Card 2
    Card 3 | Card 4
    Card 5 | Card 6
    ...
*/

.car-card {
    min-height: 82px;
    background: #ffffff;
    border: 1px solid #dfe3e8;
    border-radius: 17px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}


/* Left side */

.car-info {
    display: flex;
    align-items: center;
    min-width: 0;
}

.car-logo {
    width: 70px;
    height: 56px;
    flex: 0 0 70px;
    border: 1px solid #dfe3e8;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    overflow: hidden;
    font-weight: 700;
    font-size: 14px;
}

    .car-logo img {
        max-width: 90%;
        max-height: 80%;
        object-fit: contain;
    }

/* Budget */

.budget-logo {
    position: relative;
    color: #fff;
    font-size: 13px;
}

    .budget-logo::after {
        content: "Budget";
        position: absolute;
        inset: 12px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f37021;
        border-radius: 4px;
        font-weight: 700;
    }

/* Avis */

.avis-logo {
    color: #e31837;
    font-family: Georgia, serif;
    font-size: 15px;
}

/* Hertz */

.hertz-logo {
    position: relative;
    color: #ffd500;
    background: #111;
    font-weight: 700;
}

    .hertz-logo::after {
        content: "Hertz";
        position: absolute;
        left: 0;
        right: 0;
        top: 13px;
        bottom: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #111;
        border-radius: 3px;
        font-size: 14px;
    }

/* Enterprise */

.enterprise-logo {
    position: relative;
    color: #fff;
    background: #fff;
    font-style: italic;
    font-size: 11px;
}

    .enterprise-logo::after {
        content: "Enterprise";
        position: absolute;
        left: 0;
        right: 0;
        top: 14px;
        bottom: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #007a5e;
        border-radius: 3px;
        font-weight: 700;
    }

/* National */

.national-logo {
    position: relative;
    color: #fff;
    font-size: 11px;
}

    .national-logo::after {
        content: "National";
        position: absolute;
        left: 0;
        right: 0;
        top: 14px;
        bottom: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #006b52;
        border-radius: 3px;
        font-weight: 700;
    }

/* Alamo */

.alamo-logo {
    position: relative;
    color: #fff;
    font-size: 11px;
}

    .alamo-logo::after {
        content: "ALAMO";
        position: absolute;
        left: 0;
        right: 0;
        top: 14px;
        bottom: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #0646a5;
        border-radius: 3px;
        font-weight: 800;
        font-size: 11px;
    }

/* Details */

.car-details {
    margin-left: 14px;
    min-width: 0;
}

.car-title {
    color: #302e2b;
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.car-location {
    margin-top: 3px;
    color: #737373;
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

/* Price */

.car-price {
    flex: 0 0 auto;
    min-width: 125px;
    margin-left: 15px;
    text-align: right;
}

.price {
    color: #666;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    white-space: nowrap;
}

.price .per-day {
    font-size: 14px;
    font-weight: 500;
    color: #666;
}
.pricing-value {
    color: #15803d;
    font-size: 14px;
    font-weight: 700
}
.car-rental-discount {
    margin-top: 0px;
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
    font-weight: 600;
    color: #666;
}
/* Parked in the padding reserved at the foot of the pill instead of sitting in
   the flex flow, so revealing it fades the badge in on the spot rather than
   reflowing the icon and the label around it */
.save-pill-text {
    position: absolute;
    left: 50%;
    bottom: 7px;
    transform: translate(-50%, 4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    white-space: nowrap;
    background-color: #fce9ba;
    color: #31356e !important;
    font-size: 8px !important;
    line-height: 12px;
    border-radius: 25px;
    padding: 2px 6px;
    font-weight: 600 !important;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}


/* A stuck pill is a single 40px row, so the badge goes back into the flow and
   sits beside the label. Collapsed it is zero-width with no padding or margin,
   so it takes up nothing until the pill is hovered and then widens smoothly */
.category-list.sticky-header .save-pill-text {
    display: block;
    position: static;
    transform: none;
    max-width: 0;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    transition: max-width .25s ease, opacity .25s ease, margin .25s ease, padding .25s ease, visibility .25s;
}

    /* The full-size pills lift their label to make room for the badge underneath -
   in the stuck row the badge is alongside, so the label stays put */
.category-group .category{
    padding-bottom:0;
}

/* Stuck pills keep their flat row on hover - the badge brings its own margin */
.category-list.sticky-header .category.active {
    box-shadow: 0px 0px 2px #f5b209 !important;
}
.change-location-btn i {
    color: #f5b209;
}

/* =========================
   Modal Overlay
========================= */

.car-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
}


/* =========================
   Main Modal
========================= */

.car-modal {
    position: relative;
    display: flex;
    width: 900px;
    max-width: 100%;
    height: 390px;
    overflow: hidden;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25);
}


/* =========================
   Image
========================= */

.car-modal-image {
    position: relative;
    width: 45%;
    min-width: 45%;
    overflow: hidden;
}

    .car-modal-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }


/* =========================
   Save Badge
========================= */

.save-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 5px 10px;
    color: #31356e;
    background: #f5b209;
    font-size: 13px;
    font-weight: 700;
    border-radius: 5px;
}


/* =========================
   Content
========================= */

.car-modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 55%;
    padding: 20px 24px 17px;
}


/* =========================
   Close Button
========================= */

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: #fff;
    color: #263238;
    font-size: 27px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index:99;
}



/* =========================
   Heading
========================= */

.car-modal-content h2 {
    margin: 0 55px 9px 0;
    color: #222;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
}


/* =========================
   Meta Row
========================= */

.car-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: #465268;
    font-size: 15px;
}


.location {
    display: flex;
    align-items: center;
    gap: 5px;
}

.location-icon {
    font-size: 21px;
    color: #526174;
}


/* =========================
   Rating
========================= */

.rating {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stars {
    color: #f59a00;
    font-size: 20px;
    letter-spacing: -2px;
    line-height: 1;
}

    .stars .star-off {
        color: #d5d9df;
    }

    .stars .half-star {
        color: transparent;
        background: linear-gradient(90deg, #f59a00 50%, #d5d9df 50%);
        -webkit-background-clip: text;
        background-clip: text;
    }

    .stars .half-star::before {
        content: none;
    }

.half-star {
    position: relative;
    color: #d5d9df;   
}

    .half-star::before {
        content: "★";
        position: absolute;
        left: 0;
        top: 0;
        width: 50%;
        overflow: hidden;
        color: #f59a00;
    }

.rating strong {
    color: #222;
    font-size: 15px;
}

.reviews {
    color: #7a8494;
    font-size: 15px;
}


/* =========================
   Description
========================= */

.car-description {
    margin: 9px 0 0;
    color: #465268;
    font-size: 14px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.car-tagline, .car-tagline p, .car-tagline span {
    font-size: 14px;
    line-height: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #465268;
    margin-top: 5px;
}
/* =========================
   Bottom Section
========================= */

.car-modal-bottom {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
    .car-modal-bottom .price span {
        font-size: 18px;
        font-weight: 600;
    }
    /* =========================
   Price
========================= */
    .car-modal [hidden] {
        display: none !important;
    }

.price s {
    display: block;
    color: #8c8e92;
    font-size: 14px;
    font-weight: 500;
}

a.buy-btn {
    display: inline-block;
    text-decoration: none;
    text-align: center;
}

/* The modal reuses the .location class the "Near <city>" header owns; no divider here */
.car-meta .location {
    border-left: 0;
    padding-left: 0;
}

/* Site theme paints every h2 slate with a text-shadow; the popup title is the brand and must read black */
#carRentalModal .car-modal-content h2 {
    color: #111;
    text-shadow: none;
    border-bottom: 0;
    padding-bottom: 0;
}

.car-meta .location span {
    color: #6b7280;
    font-size: 15px;
    font-weight: 400;
}

.car-meta .location-icon {
    color: #6b7280;
    font-size: 20px;
}

/* Cars are 268x143 catalogue cut-outs and attractions are logos - both sit on white at their
   natural size instead of being blown up to fill the panel. Hotels are photos and keep cover. */
.car-modal-overlay.is-car .car-modal-image {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-right: solid 1px #e2e2e2;
}

.car-modal-overlay.is-car .car-modal-image img {
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 60%;
    object-fit: contain;
}


.price span {
    color: #15803d;
    font-size: 16px;
    font-weight: 700;
}


/* =========================
   Buy Button
========================= */

.buy-btn {
    min-width: 110px;
    padding: 11px 20px;
    border: 0;
    border-radius: 25px;
    background: #f5b209;
    color: #31356e;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    transition: background 0.2s ease, transform 0.2s ease;
}


    .buy-btn:active {
        transform: translateY(1px);
    }
#carRentalModal {
    display: none;
}

    #carRentalModal.show {
        display: flex;
    }

body.modal-open {
    overflow: hidden;
}

/* =========================
   Responsive
========================= */

@media (max-width: 768px) {
    .price .per-day {
        display: none;
    }

    .car-title {
        max-width: 22ch;
        font-size: 13px;
    }
    .price span{
        font-size:14px;
    }
    .car-modal-overlay {
        padding: 15px;
    }

    .car-modal {
        flex-direction: column;
        width: 100%;
        max-width: 500px;
        height: auto;
        max-height: 90vh;
        overflow-y: auto;
    }

    .car-modal-image {
        width: 100%;
        min-width: 100%;
        height: 230px;
    }

    .car-modal-content {
        width: 100%;
        min-height: auto;
        padding: 20px;
    }

        .car-modal-content h2 {
            font-size: 20px;
        }

    .car-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .car-modal-bottom {
        margin-top: 30px;
    }
}


@media (max-width: 480px) {

    .car-modal-overlay {
        padding: 10px;
    }

    .car-modal {
        border-radius: 12px;
    }

    .car-modal-image {
        height: 200px;
    }

    .car-modal-content {
        padding: 18px;
    }

    .modal-close {
        width: 36px;
        height: 36px;
        font-size: 24px;
    }

    .car-modal-content h2 {
        font-size: 18px;
    }

    .car-description, .car-tagline, .car-tagline p, .car-tagline span {
        font-size: 13px;
    }
     
    .buy-btn {
        padding: 10px 18px;
        font-size: 15px;
    }
}


/* Not every supplier ships artwork. With none, the image panel would sit blank at 45% of
   the popup, so it collapses and the content takes the full width instead. */
.car-modal-overlay.no-image .car-modal-image {
    display: none;
}

.car-modal-overlay.no-image .car-modal-content {
    width: 100%;
}

.car-modal-overlay.no-image .car-modal {
    width: 560px;
    height: auto;
    min-height: 260px;
}
.category-list .container-xxl{
    padding-inline:0;
}
.rentalcar-events {
    margin-bottom: 30px;
}
.header-top .edit-search-box{
    position:relative;
}
.header-top .edit-search-input{
    max-width:100%;
}
.edit-search-box.is-open {
    border-color: #f5b20966;
}
.header-top .twitter-typeahead {
    padding-left: 0px !important;
}
/* style.css forces every typeahead menu to `position: static !important` so the header's list
   can sit inside its own panel. Here that dropped the suggestions into the small search box,
   stretching it far down the page instead of showing a dropdown. Float it below the box -
   the nearest positioned ancestor - just for this page. */
.header-top .edit-search-box .tt-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    width: 100% !important;
    /*min-width: 320px;*/
    margin:0 !important;
    max-height: 420px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    z-index: 1000 !important;
}
.header-top .edit-search-input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
@media (max-width: 900px) {

    .events-container {
        padding: 0px;
    }

    .events-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}


/* =========================
   Mobile
========================= */

@media (max-width: 600px) {

    .events-container {
        padding:  0;
    }

    .events-grid {
        gap: 10px;
    }


    .event-card {
        min-height: 94px;
        padding: 0;
        gap: 11px;
        border-radius: 14px;
    }

    .event-date {
        border-radius: 11px 0 0 11px;
    }

    .event-content h3 {
        line-height: 17px;
        margin-bottom: 3px;
        font-weight: 600;
    }

    .event-content p {
        font-size: 12px;
        line-height: 16px;
        margin-bottom: 4px;
    }

    .event-content strong {
        font-size: 12px;
        line-height: 17px;
    }

    .show-more-wrapper {
        padding-top: 15px;
    }
}

/*end*/

/* Desktop has no fixed height - the JS sizes the placeholder to exactly the space the bar leaves,
   so the results don't jump when it sticks. Mobile keeps a fixed 76px placeholder while the bar
   is stuck; the JS sets its height inline, so !important is what lets this win over it. */
@media (max-width: 768px) {
    .search-header:has(.sticky-header) .category-list-placeholder {
        height: 76px !important;
    }
}
@media screen and (min-width:1024px) and (max-width:1400px) {
    .category-list {
        --sticky-top: 140px;
    }
    }
@media screen and (min-width:1024px) and (max-width:1700px) {
  /* .category-list .container-xxl {
        max-width: 100% !important;
    }*/
}
@media screen and (max-width:1024px) {
    .category-group {
        gap: 5px;
    }

    .category-list.sticky-header .category-list-inner {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .category span {
        font-size: 16px;
    }

    .category-list.sticky-header .category {
        width: auto;
        height: 40px;
        gap: 0;
        padding: 0 7px;
    }
   /* .view-all {
        display: none;
    }*/

    .see-all-mobile {
        color: #f5b209;
        font-size: 14px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .see-all-mobile i {
        width: 9px;
        font-size: 14px;
    }
    .category-list.sticky-header {
        padding: 12px 0 12px 0;
    }
    .category {
        width: 120px;
        height: 90px;
    }
}
@media (max-width: 768px) {
    .car-rental-list {
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    /* One card per row is only half of it - the card's own row has to fit a
       phone as well. The fixed 125px price column and the wide inner gutters
       left the title and the pickup location barely a hundred pixels between
       them, so both cut off to an ellipsis. Spacing comes off the margins and
       the price column sizes to its text instead. */
    .car-card {
        padding: 8px;
        gap: 10px;
        flex-wrap: wrap;
        min-height: 65px;
    }
    .car-logo {
        max-width: 50px;
        height: 45px;
    }

    .car-info {
        flex: 1;
        min-width: 0;
    }

    .car-details {
        margin-left: 10px;
    }

    .car-price {
        min-width: 0;
        margin-left: 0;
    }

    .price {
        font-size: 12px;
        line-height: 12px;
    }
    .car-rental-discount {
        font-size: 10px;
    }
    .title-wrap h1 {
        font-size: 18px;
    }
    .grid-actions{
        margin-top:20px;
        margin-bottom:20px;
    }
    .header-top {
        flex-direction: column;
        align-items: flex-start;
        height:auto;
    }

    /* Pills turn into a single scrolling row driven by the arrows */
    .category-scroller {
        width: 100%;
        position: relative;
        z-index: 9;
    }

    .category-nav {
        display: inline-flex;
    }

    .category-group {
        flex: 1;
        min-width: 0;
        overflow-x: auto;
        scroll-behavior: smooth;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 4px 5px;
        gap: 8px;
        margin-right:5px;
    }

        .category-group::-webkit-scrollbar {
            display: none;
        }

    .category {
        flex: 0 0 auto;
        width: 120px;
        height: 90px;
        scroll-snap-align: start;
        gap: 5px;
        border-radius: 12px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
        /* The icon and the label already fill these pills, so no badge and no
           reserved strip for one */
        padding-bottom: 0;
    }

    .save-pill-text {
        display: none;
    }

    .category-list.sticky-header .category {
        width: auto;
        height: 40px;
        gap: 0;
        padding: 0 15px;
    }

    .location {
        font-size: 16px;
        display:none;
    }

    .location-modal-foot {
        flex-direction: column-reverse;
    }

    .location-cancel,
    .location-apply {
        width: 100%;
    }
    .search-header {
        padding: 20px 0px 20px 0;
    }
   
        .section-heading h2 {
            font-size: 16px !important;
        }
   
    .card-grid {
        grid-template-columns: 1fr 1fr;
        gap:12px;
    }
    .card-image img {
        height: auto;
        max-height: 100px;
        display: block;
    }
   
    /*    .card-image.is-photo img {
            object-fit: contain;
        }*/
    .discount {
        padding: 7px 6px;
    }
    .card-grid .card-body {
        padding: 10px;
    }
    .card-body h3 {
        font-size: 13px;
    }
    .show-more-btn {
        padding: 6px 18px;
        font-size: 14px;
        min-width: 108px;
        height: 35px;
    }
    /*.edit-btn{
        display:none;
    }*/
    .category-list {
        --sticky-top: 140px;
    }
    .category-nav-prev {
        left: -13px;
    }
    .category-nav-next{
        right:-12px;
    }
    .sticky-header .category-nav-next {
        right: -13px;
    }
    .category-list.sticky-header .category-list-inner {
        flex-wrap: wrap;
    }
    .category-scroller:has(.category-nav-next.is-hidden)::after{
        display:none;
    }
    .category-scroller:after {
        background: linear-gradient(to right, transparent, #f1efefa6);
        content: '';
        position: absolute;
        right: -17px;
        top: 5px;
        width: 30px;
        height: 87%;
        background-color: rgb(255 255 255 / 0.65);
        z-index: 99;
    }
    .category-nav-next {
        z-index: 999;
    }
    .category-list.sticky-header .category-scroller:after {
        width: 0px;
        height: 0;
        top:10px;
    }
    .category-nav i {
        font-size: 25px;

    }
    .category-list.sticky-header .category-list-inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    .category span {
        font-size: 14px;
    }
    .container-xxl.category-list-inner {
        padding-inline: 0;
    }
    .card-body p {
        font-size: 12px;
    }
    .car-rental-list {
        padding: 0px 0px 0px 0;
    }
    .car-location {
        font-size: 10px;
        color: #737373;
        font-weight: 500;
        max-width: 30ch;
    }
    .category-list.sticky-header {
        padding: 12px 0 0px 0;
    }
}

/* /city cards - stock imagery per live-event category, cycled by card position */
a.attraction-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

a.car-card {
    text-decoration: none;
    color: inherit;
}

.attraction-card[data-img] .card-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform .5s ease;
    box-shadow: rgb(0 0 0 / 23%) 0px -31px 31px -33px inset;
    z-index:99;
}



.attraction-card[data-img="american-football"]:nth-child(7n+1) .card-image::before { background-image: url('/static/images/city-events/american-football/1.jpg'); }
.attraction-card[data-img="american-football"]:nth-child(7n+2) .card-image::before { background-image: url('/static/images/city-events/american-football/2.jpg'); }
.attraction-card[data-img="american-football"]:nth-child(7n+3) .card-image::before { background-image: url('/static/images/city-events/american-football/3.jpg'); }
.attraction-card[data-img="american-football"]:nth-child(7n+4) .card-image::before { background-image: url('/static/images/city-events/american-football/4.jpg'); }
.attraction-card[data-img="american-football"]:nth-child(7n+5) .card-image::before { background-image: url('/static/images/city-events/american-football/5.jpg'); }
.attraction-card[data-img="american-football"]:nth-child(7n+6) .card-image::before { background-image: url('/static/images/city-events/american-football/6.jpg'); }
.attraction-card[data-img="american-football"]:nth-child(7n+7) .card-image::before { background-image: url('/static/images/city-events/american-football/7.jpg'); }
.attraction-card[data-img="auto-racing"] .card-image::before { background-image: url('/static/images/city-events/auto-racing/1.jpg'); }
.attraction-card[data-img="ballet"] .card-image::before { background-image: url('/static/images/city-events/ballet/1.jpg'); }
.attraction-card[data-img="baseball"]:nth-child(7n+1) .card-image::before { background-image: url('/static/images/city-events/baseball/1.jpg'); }
.attraction-card[data-img="baseball"]:nth-child(7n+2) .card-image::before { background-image: url('/static/images/city-events/baseball/2.jpg'); }
.attraction-card[data-img="baseball"]:nth-child(7n+3) .card-image::before { background-image: url('/static/images/city-events/baseball/3.jpg'); }
.attraction-card[data-img="baseball"]:nth-child(7n+4) .card-image::before { background-image: url('/static/images/city-events/baseball/4.jpg'); }
.attraction-card[data-img="baseball"]:nth-child(7n+5) .card-image::before { background-image: url('/static/images/city-events/baseball/5.jpg'); }
.attraction-card[data-img="baseball"]:nth-child(7n+6) .card-image::before { background-image: url('/static/images/city-events/baseball/6.jpg'); }
.attraction-card[data-img="baseball"]:nth-child(7n+7) .card-image::before { background-image: url('/static/images/city-events/baseball/7.jpg'); }
.attraction-card[data-img="basketball"]:nth-child(7n+1) .card-image::before { background-image: url('/static/images/city-events/basketball/1.jpg'); }
.attraction-card[data-img="basketball"]:nth-child(7n+2) .card-image::before { background-image: url('/static/images/city-events/basketball/2.jpg'); }
.attraction-card[data-img="basketball"]:nth-child(7n+3) .card-image::before { background-image: url('/static/images/city-events/basketball/3.jpg'); }
.attraction-card[data-img="basketball"]:nth-child(7n+4) .card-image::before { background-image: url('/static/images/city-events/basketball/4.jpg'); }
.attraction-card[data-img="basketball"]:nth-child(7n+5) .card-image::before { background-image: url('/static/images/city-events/basketball/5.jpg'); }
.attraction-card[data-img="basketball"]:nth-child(7n+6) .card-image::before { background-image: url('/static/images/city-events/basketball/6.jpg'); }
.attraction-card[data-img="basketball"]:nth-child(7n+7) .card-image::before { background-image: url('/static/images/city-events/basketball/7.jpg'); }
.attraction-card[data-img="boxing"] .card-image::before { background-image: url('/static/images/city-events/boxing/1.jpg'); }
.attraction-card[data-img="broadway"] .card-image::before { background-image: url('/static/images/city-events/broadway/1.jpg'); }
.attraction-card[data-img="circus"] .card-image::before { background-image: url('/static/images/city-events/circus/1.jpg'); }
.attraction-card[data-img="cirque-du-soleil"] .card-image::before { background-image: url('/static/images/city-events/cirque-du-soleil/1.jpg'); }
.attraction-card[data-img="comedy"] .card-image::before { background-image: url('/static/images/city-events/comedy/1.jpg'); }
.attraction-card[data-img="concerts"]:nth-child(21n+1) .card-image::before { background-image: url('/static/images/city-events/concerts/1.jpg'); }
.attraction-card[data-img="concerts"]:nth-child(21n+2) .card-image::before { background-image: url('/static/images/city-events/concerts/2.jpg'); }
.attraction-card[data-img="concerts"]:nth-child(21n+3) .card-image::before { background-image: url('/static/images/city-events/concerts/3.jpg'); }
.attraction-card[data-img="concerts"]:nth-child(21n+4) .card-image::before { background-image: url('/static/images/city-events/concerts/4.jpg'); }
.attraction-card[data-img="concerts"]:nth-child(21n+5) .card-image::before { background-image: url('/static/images/city-events/concerts/5.jpg'); }
.attraction-card[data-img="concerts"]:nth-child(21n+6) .card-image::before { background-image: url('/static/images/city-events/concerts/6.jpg'); }
.attraction-card[data-img="concerts"]:nth-child(21n+7) .card-image::before { background-image: url('/static/images/city-events/concerts/7.jpg'); }
.attraction-card[data-img="concerts"]:nth-child(21n+8) .card-image::before { background-image: url('/static/images/city-events/concerts/8.jpg'); }
.attraction-card[data-img="concerts"]:nth-child(21n+9) .card-image::before { background-image: url('/static/images/city-events/concerts/9.jpg'); }
.attraction-card[data-img="concerts"]:nth-child(21n+10) .card-image::before { background-image: url('/static/images/city-events/concerts/10.jpg'); }
.attraction-card[data-img="concerts"]:nth-child(21n+11) .card-image::before { background-image: url('/static/images/city-events/concerts/11.jpg'); }
.attraction-card[data-img="concerts"]:nth-child(21n+12) .card-image::before { background-image: url('/static/images/city-events/concerts/12.jpg'); }
.attraction-card[data-img="concerts"]:nth-child(21n+13) .card-image::before { background-image: url('/static/images/city-events/concerts/13.jpg'); }
.attraction-card[data-img="concerts"]:nth-child(21n+14) .card-image::before { background-image: url('/static/images/city-events/concerts/14.jpg'); }
.attraction-card[data-img="concerts"]:nth-child(21n+15) .card-image::before { background-image: url('/static/images/city-events/concerts/15.jpg'); }
.attraction-card[data-img="concerts"]:nth-child(21n+16) .card-image::before { background-image: url('/static/images/city-events/concerts/16.jpg'); }
.attraction-card[data-img="concerts"]:nth-child(21n+17) .card-image::before { background-image: url('/static/images/city-events/concerts/17.jpg'); }
.attraction-card[data-img="concerts"]:nth-child(21n+18) .card-image::before { background-image: url('/static/images/city-events/concerts/18.jpg'); }
.attraction-card[data-img="concerts"]:nth-child(21n+19) .card-image::before { background-image: url('/static/images/city-events/concerts/19.jpg'); }
.attraction-card[data-img="concerts"]:nth-child(21n+20) .card-image::before { background-image: url('/static/images/city-events/concerts/20.jpg'); }
.attraction-card[data-img="concerts"]:nth-child(21n+21) .card-image::before { background-image: url('/static/images/city-events/concerts/21.jpg'); }
.attraction-card[data-img="cricket"] .card-image::before { background-image: url('/static/images/city-events/cricket/1.jpg'); }
.attraction-card[data-img="dance"] .card-image::before { background-image: url('/static/images/city-events/dance/1.jpg'); }
.attraction-card[data-img="electronic"] .card-image::before { background-image: url('/static/images/city-events/electronic/1.jpg'); }
.attraction-card[data-img="exhibit"] .card-image::before { background-image: url('/static/images/city-events/exhibit/1.jpg'); }
.attraction-card[data-img="family-ice-shows"] .card-image::before { background-image: url('/static/images/city-events/family-ice-shows/1.jpg'); }
.attraction-card[data-img="family-theatre"] .card-image::before { background-image: url('/static/images/city-events/family-theatre/1.jpg'); }
.attraction-card[data-img="figure-skating"] .card-image::before { background-image: url('/static/images/city-events/figure-skating/1.jpg'); }
.attraction-card[data-img="film"] .card-image::before { background-image: url('/static/images/city-events/film/1.jpg'); }
.attraction-card[data-img="formula-1"] .card-image::before { background-image: url('/static/images/city-events/formula-1/1.jpg'); }
.attraction-card[data-img="general-world-events"] .card-image::before { background-image: url('/static/images/city-events/general-world-events/1.jpg'); }
.attraction-card[data-img="golf"] .card-image::before { background-image: url('/static/images/city-events/golf/1.jpg'); }
.attraction-card[data-img="hockey"]:nth-child(7n+1) .card-image::before { background-image: url('/static/images/city-events/hockey/1.jpg'); }
.attraction-card[data-img="hockey"]:nth-child(7n+2) .card-image::before { background-image: url('/static/images/city-events/hockey/2.jpg'); }
.attraction-card[data-img="hockey"]:nth-child(7n+3) .card-image::before { background-image: url('/static/images/city-events/hockey/3.jpg'); }
.attraction-card[data-img="hockey"]:nth-child(7n+4) .card-image::before { background-image: url('/static/images/city-events/hockey/4.jpg'); }
.attraction-card[data-img="hockey"]:nth-child(7n+5) .card-image::before { background-image: url('/static/images/city-events/hockey/5.jpg'); }
.attraction-card[data-img="hockey"]:nth-child(7n+6) .card-image::before { background-image: url('/static/images/city-events/hockey/6.jpg'); }
.attraction-card[data-img="hockey"]:nth-child(7n+7) .card-image::before { background-image: url('/static/images/city-events/hockey/7.jpg'); }
.attraction-card[data-img="holiday-events"] .card-image::before { background-image: url('/static/images/city-events/holiday-events/1.jpg'); }
.attraction-card[data-img="horse-racing"] .card-image::before { background-image: url('/static/images/city-events/horse-racing/1.jpg'); }
.attraction-card[data-img="ice-skating"] .card-image::before { background-image: url('/static/images/city-events/ice-skating/1.jpg'); }
.attraction-card[data-img="lacrosse"] .card-image::before { background-image: url('/static/images/city-events/lacrosse/1.jpg'); }
.attraction-card[data-img="las-vegas-shows"] .card-image::before { background-image: url('/static/images/city-events/las-vegas-shows/1.jpg'); }
.attraction-card[data-img="lectures"] .card-image::before { background-image: url('/static/images/city-events/lectures/1.jpg'); }
.attraction-card[data-img="magic-shows"] .card-image::before { background-image: url('/static/images/city-events/magic-shows/1.jpg'); }
.attraction-card[data-img="motorcycle-racing"] .card-image::before { background-image: url('/static/images/city-events/motorcycle-racing/1.jpg'); }
.attraction-card[data-img="nascar-racing"] .card-image::before { background-image: url('/static/images/city-events/nascar-racing/1.jpg'); }
.attraction-card[data-img="off-broadway"] .card-image::before { background-image: url('/static/images/city-events/off-broadway/1.jpg'); }
.attraction-card[data-img="other-sports"] .card-image::before { background-image: url('/static/images/city-events/other-sports/1.jpg'); }
.attraction-card[data-img="opera"] .card-image::before { background-image: url('/static/images/city-events/opera/1.jpg'); }
.attraction-card[data-img="play"]:nth-child(21n+1) .card-image::before { background-image: url('/static/images/city-events/play/1.jpg'); }
.attraction-card[data-img="play"]:nth-child(21n+2) .card-image::before { background-image: url('/static/images/city-events/play/2.jpg'); }
.attraction-card[data-img="play"]:nth-child(21n+3) .card-image::before { background-image: url('/static/images/city-events/play/3.jpg'); }
.attraction-card[data-img="play"]:nth-child(21n+4) .card-image::before { background-image: url('/static/images/city-events/play/4.jpg'); }
.attraction-card[data-img="play"]:nth-child(21n+5) .card-image::before { background-image: url('/static/images/city-events/play/5.jpg'); }
.attraction-card[data-img="play"]:nth-child(21n+6) .card-image::before { background-image: url('/static/images/city-events/play/6.jpg'); }
.attraction-card[data-img="play"]:nth-child(21n+7) .card-image::before { background-image: url('/static/images/city-events/play/7.jpg'); }
.attraction-card[data-img="play"]:nth-child(21n+8) .card-image::before { background-image: url('/static/images/city-events/play/8.jpg'); }
.attraction-card[data-img="play"]:nth-child(21n+9) .card-image::before { background-image: url('/static/images/city-events/play/9.jpg'); }
.attraction-card[data-img="play"]:nth-child(21n+10) .card-image::before { background-image: url('/static/images/city-events/play/10.jpg'); }
.attraction-card[data-img="play"]:nth-child(21n+11) .card-image::before { background-image: url('/static/images/city-events/play/11.jpg'); }
.attraction-card[data-img="play"]:nth-child(21n+12) .card-image::before { background-image: url('/static/images/city-events/play/12.jpg'); }
.attraction-card[data-img="play"]:nth-child(21n+13) .card-image::before { background-image: url('/static/images/city-events/play/13.jpg'); }
.attraction-card[data-img="play"]:nth-child(21n+14) .card-image::before { background-image: url('/static/images/city-events/play/14.jpg'); }
.attraction-card[data-img="play"]:nth-child(21n+15) .card-image::before { background-image: url('/static/images/city-events/play/15.jpg'); }
.attraction-card[data-img="play"]:nth-child(21n+16) .card-image::before { background-image: url('/static/images/city-events/play/16.jpg'); }
.attraction-card[data-img="play"]:nth-child(21n+17) .card-image::before { background-image: url('/static/images/city-events/play/17.jpg'); }
.attraction-card[data-img="play"]:nth-child(21n+18) .card-image::before { background-image: url('/static/images/city-events/play/18.jpg'); }
.attraction-card[data-img="play"]:nth-child(21n+19) .card-image::before { background-image: url('/static/images/city-events/play/19.jpg'); }
.attraction-card[data-img="play"]:nth-child(21n+20) .card-image::before { background-image: url('/static/images/city-events/play/20.jpg'); }
.attraction-card[data-img="play"]:nth-child(21n+21) .card-image::before { background-image: url('/static/images/city-events/play/21.jpg'); }
.attraction-card[data-img="religious-concerts"] .card-image::before { background-image: url('/static/images/city-events/religious-concerts/1.jpg'); }
.attraction-card[data-img="religious-events"] .card-image::before { background-image: url('/static/images/city-events/religious-events/1.jpg'); }
.attraction-card[data-img="rodeo"] .card-image::before { background-image: url('/static/images/city-events/rodeo/1.jpg'); }
.attraction-card[data-img="rugby"] .card-image::before { background-image: url('/static/images/city-events/rugby/1.jpg'); }
.attraction-card[data-img="soccer"]:nth-child(7n+1) .card-image::before { background-image: url('/static/images/city-events/soccer/1.jpg'); }
.attraction-card[data-img="soccer"]:nth-child(7n+2) .card-image::before { background-image: url('/static/images/city-events/soccer/2.jpg'); }
.attraction-card[data-img="soccer"]:nth-child(7n+3) .card-image::before { background-image: url('/static/images/city-events/soccer/3.jpg'); }
.attraction-card[data-img="soccer"]:nth-child(7n+4) .card-image::before { background-image: url('/static/images/city-events/soccer/4.jpg'); }
.attraction-card[data-img="soccer"]:nth-child(7n+5) .card-image::before { background-image: url('/static/images/city-events/soccer/5.jpg'); }
.attraction-card[data-img="soccer"]:nth-child(7n+6) .card-image::before { background-image: url('/static/images/city-events/soccer/6.jpg'); }
.attraction-card[data-img="soccer"]:nth-child(7n+7) .card-image::before { background-image: url('/static/images/city-events/soccer/7.jpg'); }
.attraction-card[data-img="softball"] .card-image::before { background-image: url('/static/images/city-events/softball/1.jpg'); }
.attraction-card[data-img="summer-games"] .card-image::before { background-image: url('/static/images/city-events/summer-games/1.jpg'); }
.attraction-card[data-img="taped-program"] .card-image::before { background-image: url('/static/images/city-events/taped-program/1.jpg'); }
.attraction-card[data-img="tennis"]:nth-child(7n+1) .card-image::before { background-image: url('/static/images/city-events/tennis/1.jpg'); }
.attraction-card[data-img="tennis"]:nth-child(7n+2) .card-image::before { background-image: url('/static/images/city-events/tennis/2.jpg'); }
.attraction-card[data-img="tennis"]:nth-child(7n+3) .card-image::before { background-image: url('/static/images/city-events/tennis/3.jpg'); }
.attraction-card[data-img="tennis"]:nth-child(7n+4) .card-image::before { background-image: url('/static/images/city-events/tennis/4.jpg'); }
.attraction-card[data-img="tennis"]:nth-child(7n+5) .card-image::before { background-image: url('/static/images/city-events/tennis/5.jpg'); }
.attraction-card[data-img="tennis"]:nth-child(7n+6) .card-image::before { background-image: url('/static/images/city-events/tennis/6.jpg'); }
.attraction-card[data-img="tennis"]:nth-child(7n+7) .card-image::before { background-image: url('/static/images/city-events/tennis/7.jpg'); }
.attraction-card[data-img="truck-racing"] .card-image::before { background-image: url('/static/images/city-events/truck-racing/1.jpg'); }
.attraction-card[data-img="ufc-mma"] .card-image::before { background-image: url('/static/images/city-events/ufc-mma/1.jpg'); }
.attraction-card[data-img="volleyball"] .card-image::before { background-image: url('/static/images/city-events/volleyball/1.jpg'); }
.attraction-card[data-img="west-end-theatre"] .card-image::before { background-image: url('/static/images/city-events/west-end-theatre/1.jpg'); }
.attraction-card[data-img="wrestling"] .card-image::before { background-image: url('/static/images/city-events/wrestling/1.jpg'); }


.no-results {
    color: #6b6b6b;
    font-size: 15px;
    margin: 4px 0 28px;
}

/* =========================
   Hover effects - desktop only
   Kept out of phones and small tablets (768px and below), where a tap leaves the hover state
   stuck on. Rules stay in their original order so the cascade between them is unchanged.
========================= */
@media (min-width: 769px) {

    .edit-btn:hover {
        border-color: #fff;
        background: #fff;
        color: #555bb8;
    }

    .edit-search-submit:hover {
        background: #c2001d;
    }

    .location-modal-close:hover {
        color: #e60023;
    }

    .city-pill:not(.active):hover {
        background: #dcdcdc;
    }

    .location-cancel:hover {
        background: #f7f4f4;
    }

    .location-apply:hover {
        background: #e1a208;
    }

    .category:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 20px rgba(0,0,0,.12);
        background-color: #555bb814;
        border-color: #f5b209;
    }

    .category:hover i {
        transform: scale(1.03);
    }

    .category-list.sticky-header .category:hover {
        transform: none;
        box-shadow: none;
    }

    .category-nav:hover {
        background: #fef2f2;
        border-color: color-mix(in oklab, #e70004 40%, transparent);
        color: #e60023;
    }

    .view-all:hover {
        background: #555bb814;
        color: #555bb8;
        border-color: #555bb8;
        border: solid 1px;
    }

    .view-all:hover .fa-chevron-right {
        transform: translateX(4px);
    }

    .attraction-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 10px 25px rgba(0,0,0,.18);
        border-color: #555bb8;
        outline: solid 1px #555bb8;
    }

    .attraction-card:hover .card-body h3 {
        text-decoration: underline !important;
        text-underline-offset:2px;
    }

    .attraction-card:hover .card-image img {
        transform: scale(1.03);
    }

    .show-more-btn:hover {
        background: #fff;
        color: #1a1a1a !important;
    }

    .event-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px -4px var(--tw-shadow-color, #00000029), 0 2px 8px -2px var(--tw-shadow-color, #0000001a), 0 6px 10px -2px var(--tw-shadow-color, #0000001f);
        border-color: #555bb8;
    }

    .event-card:hover .event-content h3 {
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .show-more-btn:hover {
        background: #f8f8f8;
    }

    .car-card:hover {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
        border-color: #555bb8;
        transform: translateY(-2px);
    }
        .car-card:hover .car-title{
            text-decoration:underline;
            text-underline-offset:2px;
        }
        .category-group .category:hover .save-pill-text {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, 0);
        }

    .category-list.sticky-header .category:hover .save-pill-text {
        max-width: 140px;
        margin-left: 12px;
        padding-left: 6px;
        padding-right: 6px;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .category-list.sticky-header .category:hover .save-pill-text:before {
        content: '';
        background: #e5e7eb;
        width:1px;
        height:5px;
        position:absolute;
        left:0;
        top:50%;
    }

    .category-list.sticky-header .category:hover .pill-label-text {
        margin-bottom: 0;
    }

    .category-group .category:hover .pill-label-text {
        margin-bottom: 22px;
    }

   .category-group .category:hover {
        gap: 2px;
    }
    /*.section-flex:hover h2 {
        text-decoration: underline;
        text-underline-offset: 2px;
    } */

    /* The sticky bar keeps its tighter pills at tablet widths, as it did before this block moved here. */
    @media (max-width: 1024px) {
        .category-list.sticky-header .category-group .category:hover {
            gap: 0;
        }
    }

    .category-list.sticky-header .category:hover {
        gap: 0;
        box-shadow: 0px 0px 2px #f5b209 !important;
    }

    .modal-close:hover {
        background: #f5f5f5;
    }

    .buy-btn:hover {
        background: #dc9f08;
    }

    .attraction-card[data-img]:hover .card-image::before {
        transform: scale(1.08);
    }
}

/* Back to top - hidden until the page has been scrolled; sits under the modals (1080 / 9999) */
.back-to-top-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fff;
    color: #555bb8;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .15);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s, background-color .3s, color .3s;
}

.back-to-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top-btn .material-symbols-outlined {
    font-size: 22px;
}
.back-to-top-btn:hover {
    background-image: none !important;
}
.result-section:has(.grid-actions[style*="display: none"]) {
    margin-bottom: 40px;
}
.tt-suggestion a > span + span.title {
    font-size: 12px;
    line-height: 16px;
}
    @media (hover: hover) {
        .back-to-top-btn:hover {
            background: #555bb8;
            color: #fff;
            background-image: none;
        }
    }

@media (max-width: 768px) {
    .back-to-top-btn {
        right: 15px;
        bottom: 63px;
        width: 40px;
        height: 40px;
    }
}

.car-tagline {
    margin: 10px 0 5px 0;
}
.car-tagline .font-weight-600 {
    font-weight: 300 !important;
    margin-bottom: 0;
    color: #465268;
}