/* =========================================
   FACILITRON THEME
   Ticket Shop - Blossom Hill HSC
   ========================================= */

/* =========================================
   1. GLOBAL FONTS, TYPOGRAPHY & MOBILE LOCK
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800;900&display=swap');

html, body {
    overflow-x: clip !important; 
    max-width: 100% !important;
    width: 100% !important;
}

body, h1, h2, h3, h4, h5, h6,
.TicketShopHeader, .EventInfoName, .EventVenue, .EventInfoDate,
.ButtonSubmit, .ButtonTickets, button, .uk-button,
.TicketShopContent, .EventBox, .CampaignBox, .TileBox, .MerchandiseTileBox, .TextEvent, .EventDetails,
p, span, div, label, .DonFormLabel, .CartCount, .TileTitle {
    font-family: 'Barlow', sans-serif !important;
}

body { text-transform: uppercase !important; }

/* =========================================
   1.1 FIX BROKEN ICONS
   ========================================= */
.fa, .fas, .far, .fal, .fab, i, .icon, .glyphicon {
    font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
    text-transform: none !important;
    font-weight: 900 !important;
}

/* =========================================
   2. MODERN APP THEME & BACKGROUND FIXES
   ========================================= */
body, #TicketShopContent, #Body {
    background-color: #F4F4F4 !important; /* Light Gray Background */
    background-image: none !important;
}

/* Nuke leftover pseudo-element gradients from the platform */
#TicketShopContent::before, 
#TicketShopContent::after,
.TicketShopWrapper::before,
.TicketShopWrapper::after,
.PageEvent::before,
.PageEvent::after {
    display: none !important;
    background: transparent !important;
}

/* Remove the sharp white framing and force overflow visible to fix sticky bugs */
.TicketShopWrapper, 
.TicketShopWrapper.PageEvent,
main, 
#TicketShopContent, 
.EventGrid {
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    overflow: visible !important; /* Forces sticky calendar to work even after ticket modal closes */
}

/* =========================================
   2.1 FIX MASSIVE EMPTY SPACE (FLEX OVERRIDE)
   ========================================= */
body, 
#PageWrapper, 
#Body, 
main, 
.main-container,
#TicketShopContent,
.TicketShop { 
    display: block !important;
    flex: none !important;
    flex-grow: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
/* =========================================
   3. BUTTONS
   ========================================= */
.ButtonSubmit,
.ButtonSubmitMd,
.ButtonTimedEntry.BtnChecked,
.uk-button-primary,
button[type="submit"],
.OnlineButtonSubmit,
.CartCheckout button {
    background-color: #F9E076 !important; /* Light Yellow */
    color: #2C2C2C !important; /* Dark Text for contrast */
    border: 2px solid #F9E076 !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(44, 44, 44, 0.15);
    transition: all 0.2s ease;
    text-transform: uppercase !important;
}

.OnlineButtonSubmit .btn__label,
.CartCheckout button .btn__label,
.ButtonSubmit span {
    color: #2C2C2C !important;
}

/* Hover state changes to Dark Gray */
.ButtonSubmit:hover,
.ButtonSubmitMd:hover,
.uk-button-primary:hover,
button[type="submit"]:hover,
.OnlineButtonSubmit:hover,
.CartCheckout button:hover {
    background-color: #2C2C2C !important;
    color: #F9E076 !important;
    border-color: #2C2C2C !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(44, 44, 44, 0.30);
}

.OnlineButtonSubmit circle,
.CartCheckout button circle {
    stroke: #2C2C2C !important;
}

.OnlineButtonSubmit:hover circle,
.CartCheckout button:hover circle {
    stroke: #F9E076 !important;
}

/* Secondary Buttons */
.ButtonTickets,
.ButtonTicketsMd,
.TopNavSSL,
.TopNavActive,
.uk-button-default {
    background-color: #ffffff !important;
    color: #2C2C2C !important;
    border: 2px solid #2C2C2C !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    transition: all 0.2s ease;
}

.ButtonTickets:hover,
.uk-button-default:hover {
    background-color: #2C2C2C !important;
    color: #F9E076 !important;
}

/* =========================================
   4. HEADER CONFIGURATION
   ========================================= */
.TicketShopHeader {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    height: 89px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    border-bottom: 3px solid #F9E076 !important; 
    z-index: 100;
    transition: height 0.3s ease !important;
}

.HeaderWrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 20px 0 5px !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.HeaderWrapper .Logo {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    height: 100% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    color: transparent !important;
    font-size: 0 !important;        
}
.HeaderWrapper .Logo img { display: none !important; }

.HeaderWrapper .Logo::before {
    content: "" !important;
    display: block !important;
    flex-shrink: 0 !important;
    width: 220px !important;
    height: 75px !important;
    background-image: url('https://hsc.blossomhill.org/uploads/2/2/8/4/22848744/editor/new-bhhsc-logo_7.png') !important; 
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    transition: width 0.3s ease, background-size 0.3s ease !important;
}

@media (max-width: 1100px) {
    .TicketShopHeader { height: 71px !important; }
    .HeaderWrapper { padding: 0 16px !important; }
    .HeaderWrapper .Logo::before { width: 160px !important; }
}

@media (max-width: 768px) {
    .HeaderWrapper .Logo::before { width: 130px !important; }
}

@media (max-width: 480px) {
    .HeaderWrapper .Logo::before { width: 105px !important; }
}

/* =============================================
   4.2 NAV ICONS & GLOBAL MENU OVERRIDES
   ============================================= */
.HeaderWrapper .Icons {
    float: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 25px !important;
}

.HeaderWrapper .Icons > div,
.HeaderWrapper .Icons > a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #2C2C2C !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-size: 18px !important;
    text-decoration: none !important;
    background-color: transparent !important;
    border: none !important;
}

.HeaderWrapper .Icons > div:hover,
.HeaderWrapper .Icons > a:hover {
    color: #D4AF37 !important; /* Gold on hover */
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.40)) !important;
    transform: scale(1.15) !important;
}

/* 1. Securely hide the Account name text and kill the ghost baseline */
.HeaderWrapper .Icons > a[href*="Account"], 
.HeaderWrapper .Icons > a[href*="account"],
.HeaderWrapper .Icons > div[id*="Account"] {
    font-size: 0 !important; 
    line-height: 0 !important; /* Stops the invisible text from pushing the icon down */
    color: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: translateY(-1px) !important; /* Micro-adjustment to perfectly level it with the cart */
}

/* 2. Restore the icon size */
.HeaderWrapper .Icons > a[href*="Account"] i, 
.HeaderWrapper .Icons > a[href*="account"] i,
.HeaderWrapper .Icons > div[id*="Account"] i,
.HeaderWrapper .Icons > a[href*="Account"] svg, 
.HeaderWrapper .Icons > a[href*="account"] svg,
.HeaderWrapper .Icons > div[id*="Account"] svg {
    font-size: 18px !important; 
    color: #2C2C2C !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* 3. Maintain the gold hover effect for the isolated user icon */
.HeaderWrapper .Icons > a[href*="Account"]:hover i, 
.HeaderWrapper .Icons > a[href*="account"]:hover i,
.HeaderWrapper .Icons > div[id*="Account"]:hover i,
.HeaderWrapper .Icons > a[href*="Account"]:hover svg, 
.HeaderWrapper .Icons > a[href*="account"]:hover svg,
.HeaderWrapper .Icons > div[id*="Account"]:hover svg {
    color: #D4AF37 !important; 
}

/* Aggressively hide the Language Globe */
#IconGlobeTop,
.HeaderWrapper .Icons a[href*="Language"],
.HeaderWrapper .Icons i.fa-globe,
.HeaderWrapper .Icons i.fa-globe-americas { 
    display: none !important; 
}

.CartCount {
    position: absolute;
    top: 10px;
    margin: 0 0 0 -2px;
    padding: 2px 2px 2px 2px;
    color: var(--black-color);
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    font-size: 10px;
    font-weight: 800 !important;
    background-color: #d4af37;
    color: #2c2c2c;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    align-items: center;
}
.CartCount::before { content: "" !important; }
.CartCount::after  { content: "" !important; display: none !important; }

/* =========================================
   4.3 SCHOOL DROPDOWN CUSTOM STYLES
   ========================================= */
.SchoolDropdown {
    position: relative !important;
    display: inline-block !important;
    margin: 0 !important; 
    cursor: pointer !important;
}

.HeaderWrapper .Icons > .SchoolDropdown:nth-of-type(2) {
    margin-right: 15px !important; 
}

.SchoolDropBtn {
    background-color: transparent !important;
    color: #2C2C2C !important; 
    padding: 8px 0 !important; 
    font-size: 18px !important; 
    font-weight: 600 !important;
    border: none !important;
    text-transform: uppercase !important;
    font-family: 'Barlow', sans-serif !important;
    transition: color 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.SchoolDropBtn i {
    font-size: 12px !important;
    transition: transform 0.3s ease !important;
}

.SchoolDropBtn, 
.SchoolDropBtn span, 
.SchoolDropBtn a,
.SchoolDropBtn i {
    color: #2C2C2C !important;
    cursor: pointer !important;
}

.HeaderWrapper .Icons > .SchoolDropdown:hover {
    filter: none !important;
    transform: none !important;
}

.HeaderWrapper .Icons .SchoolDropdown:hover .SchoolDropBtn,
.HeaderWrapper .Icons .SchoolDropdown:hover .SchoolDropBtn span,
.HeaderWrapper .Icons .SchoolDropdown:hover .SchoolDropBtn i {
    color: #e5cc60 !important; 
}

.SchoolDropdown:hover .SchoolDropBtn i {
    transform: rotate(180deg) !important;
}

.SchoolDropdownContent {
    display: none;
    position: absolute !important;
    top: calc(100% + 12px) !important;
    right: 0 !important; 
    background-color: #ffffff !important; 
    min-width: 220px !important;
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.15) !important;
    z-index: 9999 !important;
    border-radius: 8px !important;
    border: 1px solid #eee;
}

.SchoolDropdownContent a {
    color: #2C2C2C !important;
    padding: 14px 20px !important; 
    text-decoration: none !important;
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid #F4F4F4 !important;
    transition: all 0.2s ease !important;
}

.SchoolDropdownContent a:hover {
    color: #e5cc60 !important;
    padding-left: 25px !important; 
}

.SchoolDropdown:hover .SchoolDropdownContent {
    display: block !important;
    animation: fadeInDropdown 0.2s ease-out;
}

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

/* =========================================
   5. MODERN CARD LAYOUT
   ========================================= */
.TicketShopWrapper {
    margin: 40px auto 0 auto !important;
    width: 100% !important;
    max-width: 1210px !important;
    min-height: auto !important; /* Helps prevent empty space */
    box-sizing: border-box !important;
    padding: 0 20px !important;
}

h1 { display: none !important; }

/* Hide the default Upcoming Events list and header entirely */
#EventListWrapper {
    display: none !important;
}

.EventBox, .CampaignBox, .TileBox, .MerchandiseTileBox {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative;
    overflow: hidden;
    height: 100%;
    box-sizing: border-box !important;
}

.EventBox, .CampaignBox { padding-bottom: 110px !important; }
.TileBox, .MerchandiseTileBox { padding-bottom: 0 !important; }

.EventBox::before, .CampaignBox::before, .TileBox::before, .MerchandiseTileBox::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #F9E076, #e6c84c) !important;
    border-radius: 12px 12px 0 0 !important;
}

.EventBox:hover, .CampaignBox:hover, .TileBox:hover, .MerchandiseTileBox:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(44, 44, 44, 0.10) !important;
}

.EventInfoDate {
    display: inline-block !important;
    background-color: rgba(249, 224, 118, 0.30);
    color: #2C2C2C !important; 
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 6px 12px;
    border-radius: 6px;
    margin-bottom: 12px !important;
}

.EventInfoName {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #2C2C2C !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
    text-transform: uppercase;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 48px !important;
}

.EventVenue {
    color: #7A8699 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* Replace the weird lightning bolt with a location pin */
.EventVenueName i::before {
    content: "\f3c5" !important;
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", sans-serif !important;
    font-weight: 900 !important;
}
.EventVenueName i {
    color: #F9E076 !important; /* Yellow to match theme */
    margin-right: 4px !important;
}

/* =========================================
   6. EVENT BANNER
   ========================================= */
.BusRoutesBanner {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    max-width: 1170px !important; 
    width: 100% !important;
    margin: 40px auto 40px auto !important;
    padding: 28px 32px !important;
    background-color: #ffffff !important;
    border-radius: 12px !important;
    border-bottom: 4px solid #F9E076 !important; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    box-sizing: border-box !important;
}

.BusRoutesIcon {
    flex-shrink: 0 !important;
    width: 52px !important;
    height: 52px !important;
    background: #2C2C2C !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    color: #F9E076 !important;
}

.BusRoutesContent { flex: 1 !important; }

.BusRoutesTitle {
    display: block !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #2C2C2C !important;
    margin-bottom: 4px !important;
}

.BusRoutesSubtitle {
    display: block !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #7A8699 !important;
    text-transform: none !important;
}

.BusRoutesActions {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    flex-wrap: wrap !important;
}

.BusRoutesLink {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important; 
    font-weight: 800 !important;
    padding: 14px 24px !important;
    min-width: 200px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    transition: background 0.2s, transform 0.15s !important;
}

.BusRoutesLink.Primary { background: #F9E076 !important; color: #2C2C2C !important; }
.BusRoutesLink.Primary:hover { background: #e5cc60 !important; transform: translateY(-2px) !important; }
.BusRoutesLink.Secondary { background: #2C2C2C !important; color: #F9E076 !important; }
.BusRoutesLink.Secondary:hover { background: #1a1a1a !important; transform: translateY(-2px) !important; }

/* =========================================
   7. CUSTOM FOOTER RESTORATION
   ========================================= */
.CustomFooter {
    background-color: #ffffff !important;
    width: 100% !important;
    padding: 40px 20px !important;
    margin-top: 60px !important;
    border-top: 3px solid #F9E076 !important; 
    box-sizing: border-box !important;
}

.FooterContainer {
    max-width: 1210px !important;
    margin: 0 auto !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
}

.FooterNav {
    display: flex !important;
    gap: 30px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.FooterNav a {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #2C2C2C !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.FooterNav a:hover, .FooterNav a.CustomLink {
    color: #e5cc60 !important;
}

.FooterBranding {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #7A8699 !important;
}

.FooterBranding .BrandName {
    color: #2C2C2C !important;
    font-weight: 800 !important;
}

/* =========================================
   8. OVERRIDE TICKETING INFO TEXT
   ========================================= */
.MembershipTixInfo { font-size: 0 !important; }
.MembershipTixInfo::after {
    content: "The Hive Event Ticket" !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #7A8699 !important;
    text-transform: uppercase !important;
    display: block !important;
    margin-top: 4px !important;
}

/* =========================================
   9. HIDE REDUNDANT FEES & GRID FIXES
   ========================================= */
.PriceAndFees { display: none !important; }
.MembershipPrices { display: none !important; align-items: center !important; height: 100% !important; }

.MembershipSelect {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    align-items: start !important;
}

.MembershipSelect > h1,
.MembershipSelect > #MembershipTagMessage,
.MembershipSelect > .WarningMessage {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

.MembershipGroup { width: 100% !important; margin-bottom: 0 !important; }
.MembershipCard { width: 100% !important; box-sizing: border-box !important; }

.MembershipCardContent img.MembershipPicture { display: none !important; }
.MembershipCardContent {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
}

.MembershipCardLeft { flex: 1 1 auto !important; min-width: 0 !important; }
.MembershipName { font-size: 16px !important; line-height: 1.3 !important; }
.MembershipCardRight { flex: 0 0 auto !important; display: flex !important; align-items: center !important; }

/* =========================================
   10. STICKY CONTINUE BUTTON FIXES
   ========================================= */
.MembershipSelect > .BottomContinueButtonWrapper {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    background-color: transparent !important;
    box-sizing: border-box !important;
    padding: 20px 0 30px 0 !important;
    z-index: 99 !important;
}

.BottomContinueButtonWrapper .OnlineButtonSubmit {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px !important;
    font-size: 18px !important;
    letter-spacing: 1.5px !important;
    box-shadow: 0 10px 30px rgba(44, 44, 44, 0.15) !important;
    border-radius: 8px !important;
}

/* =========================================
   11. STRETCH & CENTER TICKETS TILE 
   ========================================= */
#PageNavigationWrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important; 
    padding: 0 !important;
    box-sizing: border-box !important;
}

#MembershipsNav {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    padding: 0 !important; 
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

#MembershipsNav .TileWrapper,
#MembershipsNav .TileBox {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}

#MembershipsNav .TileImgWrapper {
    width: 100% !important;
    height: 200px !important; 
}

#MembershipsNav .TileImgWrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    object-position: center !important;
}

/* OVERRIDE "MEMBERSHIPS" TEXT TO "TICKETS" */
#MembershipsNav .TileTitle { font-size: 0 !important; }
#MembershipsNav .TileTitle::after {
    content: "TICKETS" !important;
    font-size: 25px !important;
    font-weight: 800 !important;
    color: #2C2C2C !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: block !important;
}

/* =========================================
   12. INSTRUCTION BUTTONS HOVER EFFECT
   ========================================= */
.InstructionBtn {
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.08) !important;
}
.InstructionBtn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 15px rgba(0,0,0,0.15) !important;
    filter: brightness(1.15) !important; 
}

/* =========================================
   13. EVENT DETAILS PAGE STYLING
   ========================================= */

/* Hide the blurry event image wrapper */
.HeroWrapper { 
    display: none !important; 
}

/* Nuke any leftover backgrounds, gradients, or shadows from the hero section */
.Hero {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}
.Hero::before, .Hero::after {
    display: none !important;
}

/* Set grid alignment to start */
.EventGrid {
    padding-top: 40px !important;
    align-items: start !important; 
}

/* Hide Unwanted Organizer Sections entirely */
.EventGridLeft .EventOrganizerHeader, 
.EventGridLeft .EventOrganizerSection,
.EventOrganizerHeader, 
.EventOrganizerSection {
    display: none !important;
}

/* Hide other unused elements */
.TicketShopImpressum, #Footer { display: none !important; }
.EventMeta .Cell:nth-child(2) { display: none !important; }
.EventMeta .Cell:first-child { width: 100% !important; border-right: none !important; }
body, #PageBody, .main-container { padding-bottom: 0 !important; margin-bottom: 0 !important; }

/* Main Title (The Hive) */
#EventGridHeader {
    font-family: 'Barlow', sans-serif !important;
    font-size: 36px !important;
    font-weight: 900 !important;
    color: #2C2C2C !important;
    text-transform: uppercase !important;
    margin-bottom: 30px !important;
    border-bottom: 4px solid #F9E076 !important; 
    padding-bottom: 10px !important;
    display: inline-block !important;
}

/* Convert basic sections into modern, elevated cards */
.EventGridLeft .SectionWrapper,
.EventGridLeft .EventMeta {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    padding: 30px !important;
    margin-bottom: 30px !important;
    border: none !important;
    border-top: 4px solid #F9E076 !important; 
    box-sizing: border-box !important;
}

/* Bold Section Headers (About, Date & Time, Location) */
.EventGridLeft h3, 
.EventDescriptionHeader, 
.EventDateTimeHeader, 
.EventLocationHeader {
    font-family: 'Barlow', sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #2C2C2C !important;
    text-transform: uppercase !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    display: block !important;
}

/* Typography inside the detail cards */
.EventDescriptionSection p,
.EventDescriptionSection span,
.SectionWrapper div {
    font-family: 'Barlow', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #2C2C2C !important;
    font-weight: 500 !important;
    text-transform: none !important; 
}

/* The Right-Side Sticky Action Card (Calendar & Tickets) */
.EventCard {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08) !important;
    border: none !important;
    border-top: 4px solid #2C2C2C !important; 
    padding: 25px !important;
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 120px !important; 
    align-self: start !important; /* Forces the card to not stretch, allowing it to stick */
    margin-bottom: 40px !important;
}

/* Target desktop to push the card down so it perfectly aligns with the Date/Time section */
@media (min-width: 951px) {
    .EventCard {
        margin-top: 95px !important;
    }
}

/* Action Button (Select Tickets) */
.EventCard .uk-button-primary,
.EventCard button,
#DateSelectButtonLocation button {
    background-color: #F9E076 !important;
    color: #2C2C2C !important;
    border: 2px solid #F9E076 !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    padding: 15px !important;
    width: 100% !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 10px rgba(44, 44, 44, 0.15) !important;
}

/* Hover effect for the tickets button */
.EventCard .uk-button-primary:hover,
.EventCard button:hover,
#DateSelectButtonLocation button:hover {
    background-color: #2C2C2C !important;
    color: #F9E076 !important;
    border-color: #2C2C2C !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(44, 44, 44, 0.30) !important;
}

/* Make the system icons match the theme */
.EventGridLeft i, 
.EventGridLeft svg,
.EventCard i,
.EventCard svg {
    color: #F9E076 !important; 
}

/* Replace the lightning bolt icon with a bright yellow Calendar */
.fa-bolt-lightning::before {
    content: "\f133" !important; /* Calendar Unicode */
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", sans-serif !important;
    font-weight: 900 !important;
    color: #F9E076 !important; /* Bright Yellow matching theme buttons */
}

/* Ensure the icon is sized consistently with other meta icons */
.SectionLabel i {
    font-size: 16px !important;
    width: 20px !important;
    text-align: center !important;
}
/* =========================================
   14. GLOBAL MOBILE RESPONSIVENESS FIXES
   ========================================= */
@media (max-width: 950px) {
    .MembershipSelect { grid-template-columns: 1fr !important; }
    
    .TicketShopWrapper, .BusRoutesBanner, #PageNavigationWrapper, #MembershipsNav {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .BusRoutesBanner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }
    .BusRoutesActions {
        width: 100% !important;
        flex-direction: column !important;
    }
    .BusRoutesLink {
        width: 100% !important;
        min-width: unset !important;
    }

    #MembershipsNav .TileImgWrapper { height: 120px !important; }
}

/* =========================================
   15. CHECKOUT & PAYMENT PAGE REFINEMENTS
   ========================================= */

/* Fix 'Apply' and 'Continue' buttons: Solid Gold, White Text, No Weird Borders */
.ButtonSubmitAlt.PaymentButton, 
button#ApplyGC,
button#Btn1.OnlineButtonSubmit,
.OnlineButtonSubmit {
    background-color: #D4AF37 !important; /* Solid Metallic Gold */
    color: #ffffff !important;           /* Force White Text */
    border: 2px solid #D4AF37 !important; /* Gold border matching background */
    
    /* Nuke any default browser shadows or outlines that look like black borders */
    outline: none !important;
    box-shadow: none !important;
    text-shadow: none !important;

    font-family: 'Barlow', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

/* Hover State: Shift to Black background with Gold text */
.ButtonSubmitAlt.PaymentButton:hover, 
button#ApplyGC:hover,
button#Btn1.OnlineButtonSubmit:hover,
.OnlineButtonSubmit:hover {
    background-color: #2C2C2C !important; /* Solid Black */
    border-color: #2C2C2C !important;
    color: #D4AF37 !important;           /* Gold text for contrast */
}

/* Ensure the label text inside both buttons remains white */
.ButtonSubmitAlt.PaymentButton .btn_label,
#ApplyGC .btn_label,
#ApplyGC span,
#Btn1 .btn__label,
.OnlineButtonSubmit .btn__label {
    color: inherit !important; /* Inherits white from parent, or gold on hover */
}

/* Handle the spinner color for the Continue button */
#Btn1 .btn__spinner, 
.OnlineButtonSubmit .btn__spinner {
    color: #ffffff !important;
    margin-right: 8px;
}

/* Payment Method Selection Styling */
.PayMethod.Active {
    border: 1px solid #000000 !important;
    background-color: rgba(212, 175, 55, 0.05) !important;
}

/* =========================================
   16. TICKET OVERLAY REFINEMENTS
   ========================================= */

/* Hide the "Enter Group Code" button */
.GroupCodeButtonWrapper, 
.ButtonSubmitAlt.GroupCodeButtonSm {
    display: none !important;
}

/* Replace Event Notes with Custom Professional Text */
.EventNotes {
    font-size: 0 !important; /* Hides the original "Log in" text */
    margin-bottom: 20px !important;
}

.EventNotes::after {
    content: "Event Schedule: 6:00 PM - 9:00 PM" !important;
    display: block !important;
    font-family: 'Barlow', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #2C2C2C !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}