/* ----------------------------------------------------------------
FONTS
-----------------------------------------------------------------*/
body,
input,
.input {
    font-family: Helvetica, Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: Helvetica, Arial, Helvetica, sans-serif;
}

/* ----------------------------------------------------------------
COLORS
-----------------------------------------------------------------*/
a,
header.bookingSiteHeader .logo a:hover,
header.bookingSiteHeader nav.mainMenu ul li a:hover,
nav.mobileMenu ul li a:hover,
section.bookingWidgetHeader nav.mainMenu ul li a:hover,
section.bookingSteps ul li .bookingStepWrapper.bookingStepWrapperLink:hover .bookingStepLabel,
.timezoneNotice p strong,
.timezoneNotice select.input,
.checkoutCountdown p span,
section.filtersMenu a.button:hover,
section.filtersMenu a.button.active,
nav.inventoryItemTabsNavigation ul li a:hover,
.inventoryItemInformation .inventoryItemPricing h5,
.card .cardContent .cardDescriptionPricingWrapper .cardPricing h5,
.card .cardContent .cardTicketPurchaseContainer .cardTicketFooterSubtotal h5,
.card .cardActions a:hover,
footer nav.footerMenu ul li a:hover,
.menu li a:hover {
    color: #eb612a;
}
body,
input,
.input,
.button.rescheduleDate,
nav.mainMenu ul li a,
nav.mainMenu ul li .selectWrapper:after,
nav.mainMenu ul li select.input,
section.filtersMenu a.button,
section.filtersMenu .filtersMenuDateSelect a,
section.resovaCalendar table td.bookingSelectReveal a.bookingSelectRevealClose,
.card .cardContent .cardEventMetaGoBackContainer a.cardEventMetaGoBackButton,
.card .cardContent .cardTimesContainer .showMoreTimesContainer a.showMoreTimesButton,
.card .cardContent .cardTimesContainer .showMoreTimesContainer a.seeMoreDatesButton,
.inventoryItemInformation .inventoryItemSharing ul li a,
.card .cardContent .cardTimesContainer .cardTimeSlotWrapper .cardTimeSlot.cardTimeSlotUnavailable:hover,
.card .cardActions a,
.card .cardShare ul li a,
.infoRibbon:before,
.infoRibbon p,
.infoRibbon a,
.infoRibbon a.button.buttonRaised,
nav.inventoryItemTabsNavigation ul li a,
aside .bookingAsideWrapper .bookingAsideAddNewBooking .button,
aside .bookingAsideWrapper .basketBooking .basketBookingItem .basketBookingItemDetails ul.basketActions li a,
footer nav.footerMenu ul li a,
footer .footerLogo a,
.inputSpinnerWrapper .button.buttonRaised.inputSpinnerButton,
.articleBox .infoRibbon p,
.menu li a {
    color: #4a5b67;
}
.intl-tel-input .country-list .country {
    color: #4a5b67!important;
}
/*--DATEPICKER STYLES--*/
.mydp .btnclear,
.mydp .btndecrease,
.mydp .btnincrease,
.mydp .btnpicker,
.mydp .headerbtn,
.mydp .monthlabel,
.mydp .yearlabel,
.mydp .headermonthtxt,
.mydp .headermonthtxt button,
.mydp .headertodaybtn,
.mydp .headeryeartxt,
.mydp .yearchangebtn,
.mydp .weekdaytitle,
.mydp .daycell.disabled,
.mydp .caltable,
.mydp .daycell,
.mydp .monthcell,
.mydp .monthtable,
.mydp .weekdaytitle,
.mydp .yearcell,
.mydp .yeartable,
.mydp .highlight {
    color: #4a5b67!important;
}
.checkbox label:after {
    border-color: #4a5b67;
}
.inputSpinnerWrapper input.inputSpinnerInput:disabled {
  -webkit-text-fill-color: #4a5b67;
}
/*--DATEPICKER STYLES--*/
h1, h2, h3, h4, h5, h6,
.bookingManagerMenu ul li a {
    color: #1b2125;
}
.textDanger,
.inputContainer.requiredInput label:after,
span.inputCaption.inputCaptionError {
  color: #ed344e!important;
}
.textSuccess {
    color: #52B266!important;
}

/* ----------------------------------------------------------------
BACKGROUND COLORS
-----------------------------------------------------------------*/
body,
.full-preloader,
.preloaderContainer,
figure.featuredImage,
section.bookingSteps ul li span.step,
section.bookingSteps ul li span.bookingStepLabel,
section.bookingSteps ul li span.step:after,
.card,
.card .cardContent .cardEventMetaGoBackContainer a.cardEventMetaGoBackButton,
.card .cardContent .cardTimesContainer .showMoreTimesContainer a.showMoreTimesButton,
.card .cardContent .cardTimesContainer .cardTimeSlotWrapper .cardTimeSlot.cardTimeSlotUnavailable:hover,
aside .bookingAsideWrapper .taxFeeBreakdown,
aside .bookingAsideWrapper .taxFeeBreakdown:before,
span.orTag,
.expressCheckoutOrLine span,
.dialogBackdrop .dialogWrapper .dialogContainer,
.bookingManagerMenu,
.menu {
    background-color: #ffffff;
}
.intl-tel-input .country-list {
    background-color: #ffffff!important;
}
/*--DATEPICKER STYLES--*/
.mydp .header,
.mydp .headerbtn,
.mydp .headerlabelbtn,
.mydp .yearchangebtn,
.mydp .headerbtncell,
.mydp .btnclear,
.mydp .btndecrease,
.mydp .btnincrease,
.mydp .btnpicker,
.mydp .headertodaybtn,
.mydp .selector thead,
.mydp .caltable,
.mydp .monthtable,
.mydp .yeartable,
.mydp .daycell.disabled {
    background: #ffffff!important;
}
/*--DATEPICKER STYLES--*/
section.resovaCalendar table td.activeTimeSlot:after {
  border-bottom-color: #ffffff;
}
/*--DATEPICKER STYLES--*/
.mydp .selector:after,
.mydp .selectorarrow:after {
  border-bottom-color: #ffffff!important;
}
/*--DATEPICKER STYLES--*/
.full-preloader .three-bounce > div,
section.bookingSteps ul li span.step.bookingStepActive:before,
section.bookingSteps ul li span.step.bookingStepComplete,
article .articleBox .articleBoxInner.articleBoxWSelect .checkboxContainer .checkbox label:after,
.giftVoucherPlaceholderBG {
    background: #eb612a;
}
@media (max-width: 959px) {
    header.bookingSiteHeader,
    header.bookingSiteHeader.transparentHeader {
        background: #000000;
    }
}

/* ----------------------------------------------------------------
BUTTON COLORS
-----------------------------------------------------------------*/
.buttonRaised,
.iconButtonRaised,
nav.mainMenu a.shoppingBasketButton span,
.inventoryItemDateBadge,
.card .cardContent .cardTimesContainer .cardTimeSlotWrapper .cardTimeSlot:hover,
.messageState i,
table.confirmationBookingsBreakdown td.confirmationBookingsBreakdownInformation i,
.bookingManagerMenu ul li a:hover,
.bookingManagerMenu ul li a.active,
.menu .menuContent .button.buttonBlock:hover {
    background: #eb612a;
}
/*--DATEPICKER STYLES--*/
.mydp .selectedday,
.mydp .daycell.selectedday,
.mydp .selectedday,
.mydp .selectedmonth,
.mydp .selectedyear,
.mydp .tablesingleday:hover,
.mydp .tablesinglemonth:hover,
.mydp .tablesingleyear:hover,
.mydp .monthcell.selectedmonth:hover {
    background: #eb612a!important;
}
/*--DATEPICKER STYLES--*/
@media (max-width: 959px) {
    section.resovaCalendarList table td .resovaCalendarListItemTime {
        background: #eb612a;
    }
}
.button,
.button.buttonRaised,
.inventoryItemDateBadge,
.inventoryItemDateBadge h6,
.card .cardContent .cardTimesContainer .cardTimeSlotWrapper .cardTimeSlot:hover,
.messageState i,
table.confirmationBookingsBreakdown td.confirmationBookingsBreakdownInformation i,
.bookingManagerMenu ul li a:hover,
.bookingManagerMenu ul li a.active,
.menu .menuContent .button.buttonBlock:hover {
    color: #000000;
}
/*--DATEPICKER STYLES--*/
.mydp .selectedday,
.mydp .daycell.selectedday,
.mydp .selectedday,
.mydp .selectedmonth,
.mydp .selectedyear,
.mydp .tablesingleday:hover,
.mydp .tablesinglemonth:hover,
.mydp .tablesingleyear:hover,
.mydp .monthcell.selectedmonth:hover {
    color: #000000!important;
}
/*--DATEPICKER STYLES--*/
@media (max-width: 959px) {
    section.resovaCalendarList table td .resovaCalendarListItemTime h6,
    section.resovaCalendarList table td .resovaCalendarListItemTime span {
        color: #000000;
    }
}

/* ----------------------------------------------------------------
BORDERS
-----------------------------------------------------------------*/
section.bookingSteps ul li:before,
section.bookingSteps ul li span.step:before,
.menu li.menu-separator {
    background: #dadada;
}
input,
.input,
section.bookingSteps ul li span.step,
section.filtersMenu a.button.filterSort,
section.filtersMenu .filtersMenuDateSelect a.button,
aside.basketDropdown .bookingAsideWrapper .basketBooking,
.timezoneNotice,
.checkoutCountdown,
.inventoryItemInformation .inventoryInformationSectionBreak,
.inventoryItemInformation .inventoryItemSharing ul li.inventoryItemInfoIcon,
.inventoryItemInformation .inventoryItemSharing ul li a,
.inventoryItemInformation .inventoryItemSharing ul li input,
.card,
.card .cardContent .cardDescriptionPricingWrapper .cardDescription,
.card .cardContent .cardCounterWrapper .cardPricing,
.card .cardContent .cardTimesContainer:before,
.card .cardContent .cardTicketPurchaseContainer:before,
.card .cardContent .cardTimesContainer .cardTimeSlotWrapper .cardTimeSlot,
.card .cardContent .cardTimesContainer .cardTimeSlotWrapper .cardTimeSlot.cardTimeSlotUnavailable:hover,
.card .cardContent .cardEventMetaGoBackContainer:before,
.card .cardContent .cardEventMetaGoBackContainer a.cardEventMetaGoBackButton,
.card .cardContent .cardTimesContainer .showMoreTimesContainer a.showMoreTimesButton,
.card .cardContent .cardTicketPurchaseContainer .cardTicketFooter,
.card .cardActions a,
.card .cardActions a:nth-of-type(2),
.card .cardShare,
.card .cardShare ul li,
.inventoryListItem,
.infoRibbon a.button.buttonRaised,
nav.inventoryItemTabsNavigation:after,
.eventSearchItem,
.eventSearchContainer .eventSearchNoResults,
article .waiverSignature .waiverSignatureBox,
article .articleBox,
article .articleBox .articleBoxInner .checkoutLoginRegisterBox,
aside .bookingAsideWrapper,
aside .bookingAsideWrapper .bookingAsideAddNewBooking,
aside .bookingAsideWrapper .bookingAsideHeading,
aside .bookingAsideWrapper .basketBookings,
aside .bookingAsideWrapper .basketBookings .basketBooking,
aside .bookingAsideWrapper .basketBooking .singleBookingTotal,
aside .bookingAsideWrapper .bookingAsideTransactionBreakdownWrapper table.transactionTotals,
aside .bookingAsideWrapper .bookingAsideTransactionMetaWrapper,
aside .bookingAsideWrapper .bookingAsidePromoWrapper,
aside .bookingAsideWrapper .basketBookings .basketBooking .basketBookingItem.basketBookingItemWExtra:before,
aside .bookingAsideWrapper .basketBookings .basketBooking .basketBookingItem.basketBookingItemExtra:before,
aside .bookingAsideWrapper .bookingAsidePasswordProtectWrapper,
aside .bookingAsideWrapper .payFullAmountWrapper,
aside .bookingAsideWrapper .taxFeeBreakdown,
.inventoryItemReviews .inventoryItemReview,
section.resovaCalendar table th,
section.resovaCalendar table td,
section.resovaCalendarList table td,
table td.bookingSelectReveal,
table.confirmationBookingsBreakdown td,
table.confirmationBookingsBreakdown tr.bookingWExtra td.confirmationBookingsBreakdownInformation:before,
.itemExtraListItemContainer,
.itemExtraListItem,
.loginRegisterBox,
.loginRegisterBox .socialLoginRegisterWrapper,
footer section.footerInner:before,
.checkbox label:before,
.inputSpinnerWrapper .button.buttonRaised.inputSpinnerButton,
.inputSpinnerWrapper input.inputSpinnerInput,
.dialogBackdrop .dialogWrapper .dialogContainer .dialogHeader,
.dialogBackdrop .dialogWrapper.bookingSupportModal .dialogContainer .dialogBody .supportModalItem,
.continueButtonSection,
.menu,
.menu li.seperator:after,
.expressCheckoutOrLine,
.stripeElement,
.bookingManagerMenu:after,
.bookingManagerMenu ul.bookingManagerMainMenu,
.bookingManagerMenu ul li a {
    border-color: #dadada;
}
.inventoryItemInformation .inventoryInformationSectionBreak.inventoryPrivateOption {
    border-color: #ffffff;
}
.intl-tel-input .country-list {
border-color: #dadada!important;
}
/*--DATEPICKER STYLES--*/
.mydp .selector,
.mydp .headertodaybtn,
.mydp .caltable,
.mydp .daycell,
.mydp .monthcell,
.mydp .monthtable,
.mydp .weekdaytitle,
.mydp .yearcell,
.mydp .yeartable {
    border-color: #dadada!important;
}
/*--DATEPICKER STYLES--*/
/*--DATEPICKER STYLES--*/
.mydp .selector:before,
.mydp .selectorarrow:before,
.mydp .selectorarrow:before {
    border-bottom-color: #dadada!important;
}
/*--DATEPICKER STYLES--*/
section.bookingSteps ul li span.step.bookingStepActive,
section.bookingSteps ul li span.step.bookingStepComplete,
nav.inventoryItemTabsNavigation ul li.active a {
    border-color: #eb612a;
}
article .waiverSignature .waiverSignatureBox { background: #ffffff }

/* ----------------------------------------------------------------
BOOKING SITE MENU
-----------------------------------------------------------------*/
header.bookingSiteHeader .logo a h1,
header.bookingSiteHeader nav.mainMenu ul li a,
header.bookingSiteHeader nav.mainMenu ul li .selectWrapper:after,
header.bookingSiteHeader nav.mainMenu ul li select.input,
nav.mobileMenu ul li a,
aside.mobileMenuPopUp header.mobileMenuHeader h6 {
    color: #ffffff;
}
header.bookingSiteHeader nav.mainMenu a.shoppingBasketButton span {
    color: #000000;
}
header,aside.mobileMenuPopUp {
    background: #000000;
}
header.bookingSiteHeader.transparentHeader {
    background: transparent;
}
@media (max-width: 959px) {
  header.bookingSiteHeader,
  header.bookingSiteHeader.transparentHeader {
    background: #000000;
  }
}

/* ----------------------------------------------------------------
CALENDAR COLOURS
-----------------------------------------------------------------*/
.closedTimeSlot,
.button.closedTimeSlot {
    color: #fd6c6c;
    background: #fec4c5;
}
.availableTimeSlot,
.button.availableTimeSlot {
    color: #000000;
    background: #21eb32;
}
.partiallyBookedTimeSlot,
.button.partiallyBookedTimeSlot {
    color: #0f0c0c;
    background: #4083bd;
}
.blockedTimeSlot,
.button.blockedTimeSlot {
    color: #fd6c6c;
    background: #fec4c5;
}
.soldOutimeSlot,
.button.soldOutimeSlot {
    color: #000000;
    background: #ed131a;
}
.callToBookTimeSlot,
.button.callToBookTimeSlot {
    color: #ffffff;
    background: #ed344e;
}

/* ----------------------------------------------------------------
CUSTOMER
-----------------------------------------------------------------*/

/* ============================================================
   ESCAPE THE ROOM — LOS ANGELES (GLENDALE)
   Custom Resova CSS
   Target: escapetheroomglendale.resova.us

   DOM Order (verified from live Resova):
     nth-child(1): Jurassic Escape (60 min) — CARD
     nth-child(2): Western Bank Heist (60 min) — CARD
     nth-child(3): The Clocktower (60 min) — CARD
     nth-child(4): CLEARFIX
     nth-child(5): Gift Certificates — CARD
   ============================================================ */


/* ──────────────────────────────────────────────
   1. TYPOGRAPHY
   ────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

body, .card, .cardTitle, .cardDescription, .btn, input, select, textarea, label, p, h1, h2, h3, h4, h5, h6, span, a, li, div {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}


/* ──────────────────────────────────────────────
   2. LINK COLOR OVERRIDE
   ────────────────────────────────────────────── */
a {
    color: #e85d26 !important;
}
a:hover {
    color: #d04f1c !important;
}

/* Override link color inside filter bar & booking steps so they stay dark */
.filtersMenu a, .filtersMenu a:hover, .filtersMenu span,
.bookingSteps a, .prevNextGroup a, .prevNextGroup a:hover,
.filtersMenuLeft a, .filtersMenuRight a,
.filtersMenuDateSelect, .filtersMenuDateSelect a,
a.filterSort, a.filterQty, a.button.filterSort {
    color: inherit !important;
}


/* ──────────────────────────────────────────────
   3. HEADER — dark bar
   ────────────────────────────────────────────── */
header, .header, nav, .navbar, .nav-wrapper,
[class*="header"], [class*="Header"],
body > div:first-child > div:first-child,
#app > div > div:first-child {
    background-color: #0d0d1a !important;
    background: #0d0d1a !important;
}

header *, .header *, nav *, .navbar * {
    color: #ffffff !important;
}

.logo img, header img, .header img {
    max-height: 45px !important;
}


/* ──────────────────────────────────────────────
   4. MOBILE MENU
   ────────────────────────────────────────────── */
.mobile-menu, .hamburger, .menu-toggle,
[class*="mobile"], [class*="burger"] {
    color: #ffffff !important;
}

.mobile-menu-overlay, .mobile-nav, .side-menu {
    background-color: #0d0d1a !important;
}


/* ──────────────────────────────────────────────
   5. BOOKING STEPS INDICATOR
   ────────────────────────────────────────────── */
.bookingSteps {
    background: #0d0d1a !important;
    padding: 15px 0 !important;
}

.bookingSteps .step {
    color: rgba(255,255,255,0.5) !important;
}

.bookingSteps .step.active,
.bookingSteps .step.completed {
    color: #ffffff !important;
}

.bookingSteps .step.active::after,
.bookingSteps .step.completed::after {
    background-color: #e85d26 !important;
}


/* ──────────────────────────────────────────────
   6. FILTERS BAR
   ────────────────────────────────────────────── */
.filterBar, .filters {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e5e5 !important;
    padding: 12px 20px !important;
}

/* Reset Resova's own filter menu elements that get caught by the above */
.filtersMenu, .filtersMenuLeft, .filtersMenuRight, .filtersMenuDateSelect {
    background: transparent !important;
    border-bottom: none !important;
    padding: initial !important;
}

.filterBar select, .filters select,
.filterBar input, .filters input {
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 0.9rem !important;
    background: #f9f9f9 !important;
}


/* ──────────────────────────────────────────────
   7. PAGE BACKGROUND
   ────────────────────────────────────────────── */
body {
    background-color: #f5f5f8 !important;
    background: #f5f5f8 !important;
}

.main-content, .content-wrapper, main, [class*="content"] {
    background-color: #f5f5f8 !important;
}


/* ──────────────────────────────────────────────
   8. ROOM CARDS — structure & hover
   ────────────────────────────────────────────── */
.card {
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    border: none !important;
    background: #ffffff !important;
}

.card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
}

.card .cardImage, .card .cardImg {
    border-radius: 14px 14px 0 0 !important;
    overflow: hidden !important;
}

.card .cardImage img, .card .cardImg img {
    transition: transform 0.4s ease !important;
}

.card:hover .cardImage img,
.card:hover .cardImg img {
    transform: scale(1.05) !important;
}

.card .cardContent {
    padding: 16px !important;
}

.card .cardTitle {
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    color: #1a1a2e !important;
    margin-bottom: 6px !important;
}


/* ──────────────────────────────────────────────
   8A. ROOM BADGES — hide defaults, inject custom
   ────────────────────────────────────────────── */

/* LA-specific: Hide the bottom meta overlay (address bar on image)
   LA Resova has TWO .cardMetaWrapper per card — top (duration) and
   bottom (address). Boise only has the top one. Hide the bottom
   so badge injection only appears once. */
.cardMetaWrapperBottom {
    display: none !important;
}

/* Move badge overlay to BOTTOM of image so it doesn't cover artwork
   (fixes Jurassic dinosaur being hidden by pill badge) */
.cardMetaWrapper {
    top: auto !important;
    bottom: 0 !important;
    padding: 30px 15px 15px !important;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%) !important;
}

/* Hide original "60 MINUTES" meta text */
.card .cardMeta {
    font-size: 0 !important;
    color: transparent !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.card .cardMeta i {
    display: none !important;
}

.card .cardMeta strong {
    font-size: 0 !important;
}

/* Base badge style via ::after */
.card .cardMeta::after {
    font-size: 0.68rem !important;
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    background: linear-gradient(135deg, #e85d26, #ff7b47) !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    display: inline-block !important;
    line-height: normal !important;
    vertical-align: middle !important;
}

/* — nth-child(1): Jurassic Escape — */
section.inventoryGridLayout .cardContainer:nth-child(1) .cardMeta::after {
    content: '\1F525  Most Popular \00B7  Difficulty 4/5' !important;
}

/* — nth-child(2): Western Bank Heist — */
section.inventoryGridLayout .cardContainer:nth-child(2) .cardMeta::after {
    content: '\1F46A  Great for Families \00B7  Difficulty 3/5' !important;
}

/* — nth-child(3): The Clocktower — */
section.inventoryGridLayout .cardContainer:nth-child(3) .cardMeta::after {
    content: '\2B50  Award-Winning \00B7  Difficulty 5/5' !important;
}

/* — nth-child(4): CLEARFIX — no badge needed */

/* — nth-child(5): Gift Certificates — restore original text */
section.inventoryGridLayout .cardContainer:nth-child(5) .cardMeta {
    font-size: 0.85rem !important;
    color: #666 !important;
}
section.inventoryGridLayout .cardContainer:nth-child(5) .cardMeta strong {
    font-size: 0.85rem !important;
    color: #666 !important;
}
section.inventoryGridLayout .cardContainer:nth-child(5) .cardMeta::after {
    display: none !important;
}


/* ──────────────────────────────────────────────
   8B. ROOM DESCRIPTIONS — hide defaults, inject custom
   ────────────────────────────────────────────── */

/* Hide original "Book The [Room]" description text */
.card .cardContent .cardDescription p {
    font-size: 0 !important;
    color: transparent !important;
    position: relative !important;
    min-height: 2.5em !important;
}

/* Base description style */
.card .cardContent .cardDescription p::after {
    font-size: 0.88rem !important;
    color: #555 !important;
    line-height: 1.5 !important;
    display: block !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    background: none !important;
    padding: 0 !important;
}

/* — nth-child(1): Jurassic Escape — */
section.inventoryGridLayout .cardContainer:nth-child(1) .cardDescription p::after {
    content: 'Step up and save the city! An evil corporation is using cloned dinosaurs as trained predators. You and your team need to stop them before it\2019s too late!' !important;
}

/* — nth-child(2): Western Bank Heist — */
section.inventoryGridLayout .cardContainer:nth-child(2) .cardDescription p::after {
    content: 'Saddle up for a trip to the old west. You and your band of outlaws must rob a bank and get out with all the loot in less than 60 minutes before the sheriff catches up.' !important;
}

/* — nth-child(3): The Clocktower — */
section.inventoryGridLayout .cardContainer:nth-child(3) .cardDescription p::after {
    content: 'Tick, tock \2014 take a fabulous trip through time. The crazy timekeeper has been stuck in a time warp and needs your help to get things back on track. Think you can escape in TIME?' !important;
}

/* — nth-child(4): CLEARFIX — no description needed */

/* — nth-child(5): Gift Certificates — restore original text */
section.inventoryGridLayout .cardContainer:nth-child(5) .cardDescription p {
    font-size: 0.88rem !important;
    color: #555 !important;
}
section.inventoryGridLayout .cardContainer:nth-child(5) .cardDescription p::after {
    display: none !important;
}


/* ──────────────────────────────────────────────
   9. TIME SLOTS
   ────────────────────────────────────────────── */
.timeSlot, .time-slot, [class*="timeSlot"], [class*="time-slot"] {
    border: 2px solid #e0e0e0 !important;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    margin: 4px !important;
    transition: all 0.2s ease !important;
    background: #fff !important;
    cursor: pointer !important;
}

.timeSlot:hover, .time-slot:hover {
    border-color: #e85d26 !important;
    background: #fff5f0 !important;
}

.timeSlot.selected, .time-slot.selected,
.timeSlot.active, .time-slot.active {
    border-color: #e85d26 !important;
    background: #e85d26 !important;
    color: #fff !important;
}


/* ──────────────────────────────────────────────
   10. BUTTONS
   ────────────────────────────────────────────── */
.btn-primary, .btn-main, .btn-book,
[class*="btn-primary"], [class*="btnPrimary"],
button[type="submit"], .btn-action {
    background: #e85d26 !important;
    background-color: #e85d26 !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 28px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.25s ease !important;
    color: #fff !important;
}

.btn-primary:hover, .btn-main:hover, .btn-book:hover,
button[type="submit"]:hover {
    background: #d04f1c !important;
    background-color: #d04f1c !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 15px rgba(232, 93, 38, 0.3) !important;
}

.btn-secondary, .btn-outline {
    border: 2px solid #e85d26 !important;
    color: #e85d26 !important;
    background: transparent !important;
    border-radius: 10px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
}

.btn-secondary:hover, .btn-outline:hover {
    background: #e85d26 !important;
    color: #fff !important;
}


/* ──────────────────────────────────────────────
   11. FOOTER
   ────────────────────────────────────────────── */
footer, .footer, [class*="footer"], [class*="Footer"] {
    background-color: #0d0d1a !important;
    background: #0d0d1a !important;
    color: #ffffff !important;
}

footer *, .footer * {
    color: rgba(255,255,255,0.8) !important;
}

footer a:hover, .footer a:hover {
    color: #e85d26 !important;
}


/* ──────────────────────────────────────────────
   12. DROPDOWNS & OVERLAYS
   ────────────────────────────────────────────── */
.dropdown-menu, .dropdown, [class*="dropdown"] {
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    border: 1px solid #eee !important;
    overflow: hidden !important;
}

.modal, .overlay, [class*="modal"], [class*="overlay"] {
    backdrop-filter: blur(4px) !important;
}

.modal-content, [class*="modalContent"] {
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
}


/* ──────────────────────────────────────────────
   13. CHECKOUT & FORMS
   ────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], textarea, select {
    border: 1px solid #ddd !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
    transition: border-color 0.2s ease !important;
}

input:focus, textarea:focus, select:focus {
    border-color: #e85d26 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(232, 93, 38, 0.1) !important;
}

label {
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: #333 !important;
    margin-bottom: 4px !important;
}

.checkout-summary, .order-summary, [class*="summary"] {
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 20px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

.price, .total, [class*="price"], [class*="total"] {
    font-weight: 700 !important;
    color: #1a1a2e !important;
}


/* ──────────────────────────────────────────────
   14. MOBILE RESPONSIVE
   ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .card {
        border-radius: 12px !important;
        margin-bottom: 16px !important;
    }

    .card .cardContent {
        padding: 14px !important;
    }

    .card .cardTitle {
        font-size: 1.05rem !important;
    }

    .card .cardMeta::after {
        font-size: 0.62rem !important;
    }

    .btn-primary, .btn-main, .btn-book,
    button[type="submit"] {
        padding: 12px 20px !important;
        font-size: 0.95rem !important;
        width: 100% !important;
    }

    .timeSlot, .time-slot {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
    }

    .filterBar, .filters {
        padding: 10px 12px !important;
    }

    .checkout-summary, .order-summary {
        padding: 16px !important;
    }
}

@media (max-width: 480px) {
    .card .cardMeta::after {
        font-size: 0.58rem !important;
        padding: 3px 8px !important;
    }

    .card .cardContent .cardDescription p::after {
        font-size: 0.82rem !important;
    }
};