/*
 * Theme Name: Hello Elementor Child
 * Template:   hello-elementor
 * Version:    1.0.19
 * Description: Uncle Ping's Street Foods — brand fixes (brand audit 2025-05-18)
 */

/* ============================================================
   BRAND PALETTE REFERENCE
   --brand-dark:   #1B1E23
   --brand-red:    #AA0907
   --brand-accent: #303641
   --brand-gold:   #C8922A  (replaces neon yellow #FFE500)
   --brand-blush:  #EDD1CA
   --brand-taupe:  #A99D95
   ============================================================ */



/* ─────────────────────────────────────────────────────────────
   FIX #1 — NAV HOVER: neon yellow #FFE500 → amber gold #C8922A
   Targets the two Elementor Kit color variables used on nav
   underline animations and social icon hovers sitewide.
   ───────────────────────────────────────────────────────────── */

.elementor-kit-1626 {
    --e-global-color-59762cc: #C8922A;
    --e-global-color-cf98801: #C8922A;
}

/* Belt-and-suspenders: direct selector cover for nav underlines */
.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item:focus,
.elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-nav-menu--main .elementor-item.highlighted {
    color: #C8922A !important;
}

.elementor-nav-menu--main .elementor-item::after,
.elementor-nav-menu--main .elementor-item::before {
    background-color: #C8922A !important;
}

/* Social icon hover */
.elementor-widget-social-icons .elementor-social-icon:hover {
    background-color: #C8922A !important;
    color: #1B1E23 !important;
}


/* ─────────────────────────────────────────────────────────────
   FIX #2 — PAGE TRANSITION: peach #FFBC7D → brand dark #1B1E23
   Note: Elementor's generated kit CSS has a typo
   ("e-page-transition" without the dot). We target the correct
   class here.
   ───────────────────────────────────────────────────────────── */

.e-page-transition {
    background-color: #1B1E23 !important;
}


/* ─────────────────────────────────────────────────────────────
   FIX #3 — GRAVITY FORMS: default blue → brand red #AA0907
   Covers GF v2.5+ CSS custom properties AND older selector-
   based overrides for full version compatibility.
   ───────────────────────────────────────────────────────────── */

/* GF v2.5+ custom properties */
.gform_wrapper.gravity-theme {
    --gf-color-primary:            #AA0907;
    --gf-color-secondary:          #1B1E23;
    --gf-ctrl-border-color-focus:  #AA0907;
    --gf-color-primary-contrast:   #FFFFFF;
}

/* Submit button */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_page_footer input[type="submit"],
.gform_wrapper input.button,
.gform_wrapper .gform_submit_button {
    background-color: #AA0907 !important;
    border-color:     #AA0907 !important;
    color:            #FFFFFF !important;
}

.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper input.button:hover,
.gform_wrapper .gform_submit_button:hover {
    background-color: #8a0605 !important;
    border-color:     #8a0605 !important;
}

/* Radio & checkbox checked state */
.gform_wrapper .gfield_radio li input[type="radio"]:checked,
.gform_wrapper .gfield_checkbox li input[type="checkbox"]:checked {
    accent-color: #AA0907;
}

/* Progress bar / step indicators */
.gform_wrapper .gf_progressbar_percentage,
.gform_wrapper .gf_step_active .gf_step_number {
    background-color: #AA0907 !important;
}

/* Focus ring on inputs */
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
    border-color:  #AA0907 !important;
    outline-color: #AA0907 !important;
    box-shadow:    0 0 0 2px rgba(170, 9, 7, 0.25) !important;
}


/* ─────────────────────────────────────────────────────────────
   FIX #4 — SCROLL-TO-TOP BUTTON: #580302 hover → #AA0907
   Standardises the unregistered dark-red hover variant.
   ───────────────────────────────────────────────────────────── */

.elementor-widget-scroll-to-top a:hover,
.elementor-widget-scroll-to-top button:hover,
.elementor-button-scroll-to-top:hover,
[data-widget_type="scroll-to-top.default"] a:hover {
    background-color: #AA0907 !important;
    border-color:     #AA0907 !important;
}


/* ─────────────────────────────────────────────────────────────
   FIX #5 — HAMBURGER MENU OVERLAY: remove plum blossom texture
   Replaces the background image on the mobile menu overlay with
   solid brand dark, preserving the plum blossom as homepage-only.
   Selector from post-1793.css: .ue_inner_menu
   ───────────────────────────────────────────────────────────── */

.ue_inner_menu,
.ue_inner_menu .ue-overlay {
    background-image: none !important;
    background-color: #1B1E23 !important;
}


/* ─────────────────────────────────────────────────────────────
   FIX #6 — HEADING HIERARCHY: H3–H6 Julee → Sora
   Keeps Julee for H1–H2 (display weight), moves H3–H6 to Sora
   for readable sub-hierarchy. Sora is already loaded by Elementor.
   ───────────────────────────────────────────────────────────── */

.elementor-kit-1626 h3,
.elementor-kit-1626 h4,
h3,
h4 {
    font-family: "Sora", Sans-serif !important;
    font-weight: 600 !important;
}

.elementor-kit-1626 h5,
.elementor-kit-1626 h6,
h5,
h6 {
    font-family: "Sora", Sans-serif !important;
    font-weight: 400 !important;
}


/* ─────────────────────────────────────────────────────────────
   FIX #7 — BODY FONT: Roboto → Sora
   The Kit already sets Sora on .elementor-kit-1626 and links,
   but --e-global-typography-text-font-family still points to
   Roboto and can surface in text widgets. Override the variable
   and cover text-editor widgets explicitly.
   ───────────────────────────────────────────────────────────── */

.elementor-kit-1626 {
    --e-global-typography-text-font-family: "Sora";
}

body,
.elementor-kit-1626 p,
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
    font-family: "Sora", Sans-serif !important;
}


/* ─────────────────────────────────────────────────────────────
   FIX #8 — ASTRA MAGENTA SAFETY NET: #b11d59 → #AA0907
   The primary fix is WP Customizer → Appearance → Colors, but
   this catches any Astra-generated CSS that leaks through.
   ───────────────────────────────────────────────────────────── */

.ast-separate-container .ast-article-post .read-more,
.ast-button-wrap .ast-button,
.ast-call-to-action .ast-button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    /* Only override if the computed color is the Astra magenta */
    /* (belt-and-suspenders — Customizer fix is the real solution) */
}

/* WooCommerce / non-Elementor buttons that may inherit Astra palette */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background-color: #AA0907 !important;
    color:            #FFFFFF  !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    background-color: #8a0605 !important;
}


/* ─────────────────────────────────────────────────────────────
   THE EVENTS CALENDAR — BRAND FIXES
   ───────────────────────────────────────────────────────────── */

/* FIX A — Map event action buttons: "Event Details" / "Get Directions"
   TEC renders TWO action containers per event:
   --spacer : <span> placeholders (position:relative) — reserve height in list.
              Must be INVISIBLE — they are NOT the real buttons.
   --linked : <a> elements (position:absolute, top:-85px) — the real buttons.
              Only shown (display:block) for the currently selected event.      */

/* Kill the spacer spans — they're layout ghosts, not buttons */
.tribe-events-pro-map__event-actions--spacer {
    visibility: hidden !important;
}

/* CSS variables for ALL linked containers */
.tribe-common .tribe-events-pro-map__event-actions--linked {
    --tec-color-link-primary: #FFFFFF;
    --tec-color-link-accent:  #AA0907;
}

/* Only apply flex to the ACTIVE linked container (aria-hidden="false").
   Inactive ones have aria-hidden="true" and TEC JS hides them — don't
   interfere with that hide/show mechanism with a blanket display override. */
.tribe-common .tribe-events-pro-map__event-actions--linked[aria-hidden="false"] {
    display:     flex !important;
    flex-wrap:   wrap !important;
    gap:         4px !important;
    align-items: center !important;
}

/* Event Details — solid red pill, sized to fit the 188px container */
.tribe-common .tribe-events-pro-map__event-actions--linked .tribe-common-cta--thin-alt,
.tribe-common .tribe-events-pro-map__event-actions--linked .tribe-events-c-small-cta__link {
    display:         inline-block !important;
    background:      #AA0907 !important;
    color:           #FFFFFF !important;
    border:          1px solid #AA0907 !important;
    border-bottom:   1px solid #AA0907 !important;
    border-radius:   4px !important;
    padding:         5px 10px !important;
    font-family:     "Sora", sans-serif !important;
    font-size:       0.72rem !important;
    font-weight:     600 !important;
    letter-spacing:  0.02em !important;
    text-decoration: none !important;
    margin:          3px 4px 0 0 !important;
    line-height:     1.4 !important;
    white-space:     nowrap !important;
    transition:      background 0.2s, color 0.2s !important;
}

.tribe-common .tribe-events-pro-map__event-actions--linked .tribe-common-cta--thin-alt:hover,
.tribe-common .tribe-events-pro-map__event-actions--linked .tribe-events-c-small-cta__link:hover {
    background:   #8a0605 !important;
    border-color: #8a0605 !important;
    color:        #FFFFFF !important;
}

/* Get Directions — outlined style (no data-js attr on that anchor) */
.tribe-common .tribe-events-pro-map__event-actions--linked a:not([data-js]).tribe-common-cta--thin-alt {
    background:   transparent !important;
    color:        #AA0907 !important;
    border-color: #AA0907 !important;
}

.tribe-common .tribe-events-pro-map__event-actions--linked a:not([data-js]).tribe-common-cta--thin-alt:hover {
    background: #AA0907 !important;
    color:      #FFFFFF !important;
}


/* FIX B — Top-bar prev/next nav arrows: SVG paths invisible on dark bg */
.tribe-events-c-top-bar__nav-link,
.tribe-common-c-btn-icon {
    color:      #FFFFFF !important;
    opacity:    1 !important;
    visibility: visible !important;
}

/* FIX B2 — Map list nav text (Previous / Today / Next): TEC default
   color #141827 is invisible on the dark event column background     */
.tribe-events-c-nav__prev-link,
.tribe-events-c-nav__next-link,
.tribe-events-c-nav__today-link,
.tribe-events-c-nav__prev .tribe-common-anchor-thin,
.tribe-events-c-nav__next .tribe-common-anchor-thin,
.tribe-events-c-nav__today .tribe-common-anchor-thin,
.tribe-events-c-nav a,
.tribe-events-c-nav button {
    color: #FFFFFF !important;
}

.tribe-events-c-top-bar__nav-link svg,
.tribe-events-c-top-bar__nav-link svg path,
.tribe-common-c-btn-icon__icon-svg,
.tribe-common-c-btn-icon__icon-svg path {
    fill:       #FFFFFF !important;
    stroke:     none !important;
    opacity:    1 !important;
}

.tribe-events-c-top-bar__nav-link:hover svg path,
.tribe-common-c-btn-icon:hover .tribe-common-c-btn-icon__icon-svg path {
    fill: #C8922A !important;
}

/* Ensure nav list items are visible */
.tribe-events-c-top-bar__nav,
.tribe-events-c-top-bar__nav-list,
.tribe-events-c-top-bar__nav-list-item {
    display:    block !important;
    visibility: visible !important;
    opacity:    1 !important;
}

.tribe-events-c-top-bar__nav-list {
    display:     flex !important;
    align-items: center !important;
    gap:         8px !important;
}

/* FIX D — Subscribe / Export calendar dropdown: TEC default is light-themed
   NOTE: The authoritative version of this fix lives in the inline <style> block
   in functions.php (wp_head priority 9999), which loads after all plugin CSS
   and bypasses WP-Optimize bundling. These rules are kept here as a fallback. */
.tribe-events-c-subscribe-dropdown__button,
.tribe-events-c-subscribe-dropdown .tribe-common-c-btn-border {
    background: transparent !important;
    border:     1px solid rgba(255,255,255,0.4) !important;
    color:      #FFFFFF !important;
    outline:    none !important;
    box-shadow: none !important;
}
.tribe-events-c-subscribe-dropdown__button:focus,
.tribe-events-c-subscribe-dropdown__button:focus-visible {
    outline:    none !important;
    border:     1px solid rgba(255,255,255,0.6) !important;
    box-shadow: 0 0 0 2px rgba(170,9,7,0.3) !important;
}
.tribe-events-c-subscribe-dropdown__button-text {
    color: #FFFFFF !important;
}
.tribe-events-c-subscribe-dropdown__button svg path,
.tribe-events-c-subscribe-dropdown__button-icon path {
    fill: #FFFFFF !important;
}
.tribe-events-c-subscribe-dropdown__content {
    background:  #1B1E23 !important;
    border:      1px solid #303641 !important;
    border-radius: 4px !important;
    box-shadow:  0 8px 24px rgba(0,0,0,0.7) !important;
}
.tribe-events-c-subscribe-dropdown__list {
    background: #1B1E23 !important;
    padding: 4px 0 !important;
    margin:  0 !important;
}
.tribe-events-c-subscribe-dropdown__list-item-link,
.tribe-events-c-subscribe-dropdown__list-item a {
    color:           #FFFFFF !important;
    padding:         10px 16px !important;
    display:         block !important;
    font-family:     "Sora", sans-serif !important;
    font-size:       0.875rem !important;
    text-decoration: none !important;
    transition:      background 0.15s, color 0.15s !important;
}
.tribe-events-c-subscribe-dropdown__list-item-link:hover,
.tribe-events-c-subscribe-dropdown__list-item a:hover {
    background: #303641 !important;
    color:      #C8922A !important;
}

/* FIX E — Event details page: brand + mobile fixes */

/* Venue card: TEC default #e4e4e4 border → brand accent (looks white on dark bg) */
.tec-events-elementor-event-widget__venue-container {
    border-color: #303641 !important;
    background:   rgba(48, 54, 65, 0.2) !important;
}

/* Venue / map links: TEC blue #334AFF → brand gold */
.tec-events-elementor-event-widget__venue-name a,
.tec-events-elementor-event-widget__venue-address a,
.tec-events-elementor-event-widget__venue .tribe-common-anchor {
    color:           #C8922A !important;
    text-decoration: none !important;
}
.tec-events-elementor-event-widget__venue-name a:hover,
.tec-events-elementor-event-widget__venue-address a:hover,
.tec-events-elementor-event-widget__venue .tribe-common-anchor:hover {
    color: #AA0907 !important;
}

/* Prev/next event navigation: TEC blue → white, gold on hover */
.tec-events-elementor-event-widget__navigation a,
.tec-events-elementor-event-widget__navigation--previous a,
.tec-events-elementor-event-widget__navigation--next a {
    color: #FFFFFF !important;
}
.tec-events-elementor-event-widget__navigation a:hover,
.tec-events-elementor-event-widget__navigation--previous a:hover,
.tec-events-elementor-event-widget__navigation--next a:hover {
    color: #C8922A !important;
}
.tec-events-elementor-event-widget__navigation,
.tec-events-elementor-event-widget__navigation--subnav {
    color: #FFFFFF !important;
}

/* Datetime text */
.tec-events-elementor-event-widget__datetime-date,
.tec-events-elementor-event-widget__datetime-time,
.tec-events-elementor-event-widget__datetime-separator {
    color: #FFFFFF !important;
}

/* Date badge: brand red always (DB template has taupe #A99D95 — override via CSS) */
[data-id="e0ce6fd"] {
    background:    #AA0907 !important;
    border-radius: 8px !important;
}

/* ─────────────────────────────────────────────────────────────
   SECTION 4 & 5 — EPIC DESIGN ANIMATIONS
   Scroll progress bar, hero depth layers, word lighting,
   cascading cards, magnetic CTAs.
   JS init is in functions.php wp_footer priority 30.
   ───────────────────────────────────────────────────────────── */

/* ── Scroll Progress Indicator ──────────────────────────────── */
#up-scroll-prog {
    position:     fixed;
    top:          0;
    left:         0;
    width:        0%;
    height:       3px;
    background:   linear-gradient(90deg, #AA0907 0%, #C8922A 100%);
    z-index:      999999;
    pointer-events: none;
    transform-origin: left center;
}

/* ── Word Lighting (About section) ──────────────────────────── */
/* Base state: each word span is inline, opacity controlled by GSAP */
.up-w { display: inline; }

/* ── Depth Layer System (Section 5 ready state) ──────────────
   CSS classes for the 6-layer depth model. When transparent PNG
   product assets are added to the hero, assign these classes.
   Parallax rates are read by the JS init as data attributes.    */

.up-depth-0 { isolation: isolate; } /* bg: parallax 0.10× — far background */
.up-depth-1 { isolation: isolate; } /* glow/atmosphere: 0.25× */
.up-depth-2 { isolation: isolate; } /* mid accents: 0.50× */
.up-depth-3 { isolation: isolate; } /* hero product: 0.80× + float-loop */
.up-depth-4 { isolation: isolate; } /* text/UI: 1.00× normal */
.up-depth-5 { isolation: isolate; } /* foreground FX: 1.20× */

/* Float loop — assign to .up-depth-3 product PNG when available */
@keyframes up-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-14px); }
}

.up-float-loop {
    animation: up-float 9s ease-in-out infinite;
    will-change: transform;
}

/* ── Bleed typography: oversized section markers ─────────────
   Decorative section-number characters that bleed off the edge.
   Add class .up-bleed-section to any Elementor section to get
   a large ghost number in the top-right corner.               */
.up-bleed-section {
    position: relative;
    overflow: hidden;
}

.up-bleed-section::after {
    content:       attr(data-section-num);
    position:      absolute;
    top:           -0.15em;
    right:         -0.05em;
    font-family:   "Julee", cursive;
    font-size:     clamp(8rem, 20vw, 18rem);
    color:         rgba(255, 255, 255, 0.03);
    line-height:   1;
    pointer-events: none;
    user-select:   none;
    z-index:       0;
    white-space:   nowrap;
}

/* ── Reduced motion: disable all epic animations ────────────── */
@media (prefers-reduced-motion: reduce) {
    #up-scroll-prog { transition: none !important; }
    .up-float-loop  { animation: none !important; }
    .up-w           { opacity: 1 !important; } /* fully visible, no lighting */
}

@media (max-width: 767px) {
    /* Parent container has padding-left/right: 200px on desktop, squeezing the
       badge to ~40px. Zero out padding on mobile so the badge fills the column. */
    [data-id="2879046"] {
        padding-left:  0 !important;
        padding-right: 0 !important;
        width:         100% !important;
        max-width:     100% !important;
        flex-shrink:   1 !important;
        box-sizing:    border-box !important;
    }
    [data-id="e0ce6fd"] {
        width:      100% !important;
        min-width:  0 !important;
        padding:    16px 20px !important;
        box-sizing: border-box !important;
    }
    .tec-events-elementor-event-widget__datetime-wrapper {
        width:           100% !important;
        min-width:       0 !important;
        justify-content: center !important;
        flex-wrap:       wrap !important;
    }
}

/* Single event page export dropdown (Elementor TEC widget) */
.tec-events-elementor-event-widget__export-dropdown-button,
.tec-events-elementor-event-widget__export-dropdown-button.tribe-common-c-btn-border {
    background: transparent !important;
    border:     1px solid rgba(255,255,255,0.4) !important;
    color:      #FFFFFF !important;
    outline:    none !important;
}
.tec-events-elementor-event-widget__export-dropdown-content {
    background:    #1B1E23 !important;
    border:        1px solid #303641 !important;
    border-radius: 4px !important;
    box-shadow:    0 8px 24px rgba(0,0,0,0.7) !important;
}
.tec-events-elementor-event-widget__export-dropdown-content a {
    color:   #FFFFFF !important;
    padding: 10px 16px !important;
    display: block !important;
}
.tec-events-elementor-event-widget__export-dropdown-content a:hover {
    background: #303641 !important;
    color:      #C8922A !important;
}

/* FIX C — Event detail modal overlay styles */
#up-event-modal-overlay {
    position:         fixed;
    inset:            0;
    z-index:          99999;
    background:       rgba(27, 30, 35, 0.92);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    opacity:          0;
    transition:       opacity 0.25s ease;
    backdrop-filter:  blur(4px);
}

#up-event-modal-overlay.is-open {
    opacity: 1;
}

#up-event-modal {
    background:    #1B1E23;
    border:        1px solid #303641;
    border-top:    3px solid #AA0907;
    border-radius: 6px;
    width:         min(680px, 92vw);
    max-height:    88vh;
    overflow-y:    auto;
    padding:       0;
    position:      relative;
    transform:     translateY(20px);
    transition:    transform 0.25s ease;
    color:         #FFFFFF;
    font-family:   "Sora", sans-serif;
}

#up-event-modal-overlay.is-open #up-event-modal {
    transform: translateY(0);
}

#up-event-modal-header {
    background:    #AA0907;
    padding:       18px 24px;
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    gap:           12px;
}

#up-event-modal-header h2 {
    font-family:   "Julee", sans-serif !important;
    font-size:     1.4rem !important;
    font-weight:   600 !important;
    color:         #FFFFFF !important;
    margin:        0 !important;
    line-height:   1.2 !important;
}

#up-event-modal-close {
    background:    none;
    border:        none;
    color:         #FFFFFF;
    font-size:     1.6rem;
    cursor:        pointer;
    line-height:   1;
    padding:       0 4px;
    opacity:       0.85;
    flex-shrink:   0;
    transition:    opacity 0.15s;
}

#up-event-modal-close:hover { opacity: 1; }

#up-event-modal-body {
    padding: 24px;
}

.up-modal-meta {
    display:       flex;
    flex-wrap:     wrap;
    gap:           16px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #303641;
}

.up-modal-meta-item {
    display:    flex;
    align-items: flex-start;
    gap:         8px;
    font-size:  0.88rem;
    color:      #FFFFFF;
    opacity:    0.9;
}

.up-modal-meta-item strong {
    color:       #C8922A;
    font-weight: 600;
    white-space: nowrap;
}

.up-modal-category-badge {
    display:       inline-block;
    background:    #303641;
    color:         #C8922A;
    font-size:     0.72rem;
    font-weight:   600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding:       3px 10px;
    border-radius: 3px;
    margin-bottom: 12px;
}

.up-modal-description {
    font-size:   0.92rem;
    line-height: 1.7;
    color:       rgba(255,255,255,0.85);
}

.up-modal-actions {
    margin-top:  24px;
    display:     flex;
    gap:         10px;
    flex-wrap:   wrap;
}

.up-modal-btn {
    display:         inline-block;
    padding:         10px 22px;
    border-radius:   4px;
    font-family:     "Sora", sans-serif;
    font-size:       0.85rem;
    font-weight:     600;
    text-decoration: none;
    transition:      background-color 0.2s;
    cursor:          pointer;
}

.up-modal-btn--primary {
    background: #AA0907;
    color:      #FFFFFF;
    border:     1px solid #AA0907;
}
.up-modal-btn--primary:hover { background: #8a0605; color: #fff; }

.up-modal-btn--secondary {
    background: transparent;
    color:      #AA0907;
    border:     1px solid #AA0907;
}
.up-modal-btn--secondary:hover { background: #AA0907; color: #fff; }

#up-event-modal-loading {
    text-align:  center;
    padding:     40px 24px;
    color:       rgba(255,255,255,0.6);
    font-size:   0.9rem;
}

.up-modal-spinner {
    display:       block;
    width:         32px;
    height:        32px;
    border:        3px solid rgba(170,9,7,0.3);
    border-top:    3px solid #AA0907;
    border-radius: 50%;
    animation:     up-spin 0.7s linear infinite;
    margin:        0 auto 12px;
}

@keyframes up-spin { to { transform: rotate(360deg); } }

/* ─────────────────────────────────────────────────────────────
   MODAL — Pointer-events guard
   Without this, the hidden (opacity:0) overlay blocks ALL page
   clicks, including the event-action buttons that open it.
   ───────────────────────────────────────────────────────────── */

#up-event-modal-overlay {
    pointer-events: none;
}

#up-event-modal-overlay.is-open {
    pointer-events: auto;
}


/* ─────────────────────────────────────────────────────────────
   FIX F — TEC LIST VIEW: Night-market program board styling
   TEC hardcodes rgb(20,24,39) on all list-view elements — near-
   black text invisible against the dark homepage section.
   Turns the contrast problem into a design feature: bold white
   on dark, Julee date numerals, brand red accents, blush venue.
   ───────────────────────────────────────────────────────────── */

/* Month separator — e.g. "May 2026" */
.tribe-events-calendar-list__month-separator-text {
    color:          #A99D95 !important;
    font-family:    "Julee", cursive !important;
    font-size:      0.72rem !important;
    font-weight:    400 !important;
    letter-spacing: 0.25em !important;
    text-transform: uppercase !important;
    border-left:    3px solid #AA0907 !important;
    padding-left:   10px !important;
    border-bottom:  none !important;
}

/* Month separator line */
.tribe-events-calendar-list__month-separator-pipe {
    display: none !important;
}

/* Date column — day number: override Fix #6's h5→Sora with Julee */
.tribe-events-calendar-list__event-date-tag-daynum,
.tribe-events-calendar-list__event-date-tag-daynum.tribe-common-h5,
.tribe-events-calendar-list__event-date-tag-daynum.tribe-common-h4--min-medium {
    color:       #FFFFFF !important;
    font-family: "Julee", cursive !important;
    font-size:   2rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

/* Date column — weekday abbreviation */
.tribe-events-calendar-list__event-date-tag-weekday {
    color:          #A99D95 !important;
    font-family:    "Sora", sans-serif !important;
    font-size:      0.6rem !important;
    font-weight:    600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

/* Event rows — raised card (client-approved option C, 2026-09-21)
   White 5% over Brand Dark (#26292E), 8% hairline, 4px radius.
   TEC's own gutter columns supply the 24px inner padding on desktop;
   on mobile the columns are unpadded, so the card pads itself.
   Hover lifts the surface + hairline; focus-within = gold (matches
   the events bar). No layout shift on hover (old padding-left nudge
   removed). Contrast on #26292E: white 14.6, blush 10.1, taupe 5.5,
   red time 1.9 (bold uppercase — passes only as large text; keep it
   700 weight, do not shrink below 0.72rem).                        */
.tribe-events .tribe-events-calendar-list__event-row,
.tribe-events-calendar-list__event-row {
    background:    rgba(255,255,255,0.05) !important;
    border:        1px solid rgba(255,255,255,0.08) !important;
    border-radius: 4px !important;
    padding:       14px 14px 16px !important;
    margin-top:    12px !important;
    margin-bottom: 12px !important;
    transition:    background-color 0.2s ease, border-color 0.2s ease !important;
}

.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event-row {
    padding:       18px 0 20px !important;
    margin-left:   0 !important;
    margin-right:  0 !important;
}

.tribe-events .tribe-events-calendar-list__month-separator + .tribe-events-calendar-list__event-row,
.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__month-separator + .tribe-events-calendar-list__event-row {
    margin-top: 16px !important;
}

.tribe-events .tribe-events-calendar-list__event-row:last-child,
.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event-row:last-child {
    margin-bottom: 32px !important;
}

.tribe-events .tribe-events-calendar-list__event-row:hover,
.tribe-events-calendar-list__event-row:hover {
    background:   rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.16) !important;
}

.tribe-events .tribe-events-calendar-list__event-row:focus-within,
.tribe-events-calendar-list__event-row:focus-within {
    border-color: #C8922A !important;
}

@media (prefers-reduced-motion: reduce) {
    .tribe-events-calendar-list__event-row {
        transition: none !important;
    }
}

/* Event time — brand red, small-caps feel */
.tribe-events-calendar-list__event-datetime-wrapper,
.tribe-events-calendar-list__event-datetime-wrapper abbr,
.tribe-events-calendar-list__event-datetime-wrapper time,
.tribe-events-calendar-list__event-datetime-wrapper span {
    color:          #AA0907 !important;
    font-family:    "Sora", sans-serif !important;
    font-size:      0.72rem !important;
    font-weight:    700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

/* Event title */
.tribe-events-calendar-list__event-title-link,
.tribe-events-calendar-list__event-title a,
h4.tribe-events-calendar-list__event-title a {
    color:           #FFFFFF !important;
    font-family:     "Sora", sans-serif !important;
    font-size:       1.05rem !important;
    font-weight:     600 !important;
    text-decoration: none !important;
    transition:      color 0.2s ease !important;
    line-height:     1.3 !important;
}

.tribe-events-calendar-list__event-title-link:hover,
.tribe-events-calendar-list__event-title a:hover {
    color: #EDD1CA !important;
}

/* Venue block — name warm blush, address cooler taupe */
.tribe-events-calendar-list__event-venue,
.tribe-events-calendar-list__event-venue .tribe-venue-location {
    color: #EDD1CA !important;
}

.tribe-events-calendar-list__event-venue .tribe-venue-location,
.tribe-events-calendar-list__event-venue .tribe-venue-location * {
    font-size: 0.82rem !important;
}

.tribe-events-calendar-list__event-venue a,
.tribe-events-calendar-list__event-venue .tribe-venue-location a {
    color:           #EDD1CA !important;
    text-decoration: none !important;
}

.tribe-events-calendar-list__event-venue a:hover {
    color: #FFFFFF !important;
}

/* Address line — taupe, slightly smaller */
.tribe-events-calendar-list__event-venue address,
.tribe-events-calendar-list__event-venue .tribe-address,
.tribe-events-calendar-list__event-venue .tribe-city-state,
.tribe-events-calendar-list__event-venue .tribe-stateprovince,
.tribe-events-calendar-list__event-venue .tribe-zip,
.tribe-events-calendar-list__event-venue .tribe-country-name {
    color:     #A99D95 !important;
    font-size: 0.78rem !important;
}

/* "Event Details" CTA in list view rows */
.tribe-events-calendar-list .tribe-events-c-small-cta__link,
.tribe-events-calendar-list .tribe-common-cta--thin-alt {
    color:           #AA0907 !important;
    border-color:    #AA0907 !important;
    font-family:     "Sora", sans-serif !important;
    font-size:       0.75rem !important;
    font-weight:     600 !important;
    letter-spacing:  0.03em !important;
    text-decoration: none !important;
    transition:      background 0.2s ease, color 0.2s ease !important;
}

.tribe-events-calendar-list .tribe-events-c-small-cta__link:hover,
.tribe-events-calendar-list .tribe-common-cta--thin-alt:hover {
    background: #AA0907 !important;
    color:      #FFFFFF !important;
}

/* "Find Events" search button — brand red */
.tribe-events-c-search__button,
button.tribe-events-c-search__button {
    background:      #AA0907 !important;
    border-color:    #AA0907 !important;
    color:           #FFFFFF !important;
    font-family:     "Sora", sans-serif !important;
    font-weight:     600 !important;
    letter-spacing:  0.04em !important;
    transition:      background 0.2s ease !important;
}

.tribe-events-c-search__button:hover,
button.tribe-events-c-search__button:hover {
    background:   #8a0605 !important;
    border-color: #8a0605 !important;
}

/* Search input field */
.tribe-common-form-control-text__input,
input.tribe-events-c-search__input,
.tribe-events-c-search__input-control input {
    background:   #303641 !important;
    border-color: rgba(255,255,255,0.12) !important;
    color:        #FFFFFF !important;
}

.tribe-common-form-control-text__input::placeholder,
input.tribe-events-c-search__input::placeholder {
    color: #A99D95 !important;
}

/* View selector (List / Map) — white text, red on active */
.tribe-events-c-view-selector__list-item-link,
.tribe-events-c-view-selector__list-item a,
.tribe-events-c-view-selector__button-text {
    color: #FFFFFF !important;
}

.tribe-events-c-view-selector__list-item-link:hover,
.tribe-events-c-view-selector__list-item a:hover {
    color: #AA0907 !important;
}

.tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link,
.tribe-events-c-view-selector__list-item-link[aria-current="true"] {
    color:         #AA0907 !important;
    border-bottom: 2px solid #AA0907 !important;
}

/* Bottom "Previous Events" / "Next Events" pagination */
.tribe-events-c-nav__prev-link,
.tribe-events-c-nav__next-link,
.tribe-events-c-nav__today-link {
    color: #AA0907 !important;
}


/* ─────────────────────────────────────────────────────────────
   FIX G — TEC EVENTS BAR (search + List/Map tabs): dark brand skin
   TEC paints the bar and the tab panel from its own custom
   properties (--tec-color-background-events-bar, …-view-selector,
   --tec-color-border-events-bar, --tec-color-text-view-selector-
   list-item). Defaults are white / #e4e4e4 / near-black, so the bar
   rendered as a light grey block with black "List" text on the dark
   page. Re-tokenise on the bar itself so every breakpoint and state
   (desktop tabs, mobile dropdown, hover, focus) follows the brand.
   ───────────────────────────────────────────────────────────── */

.tribe-events .tribe-events-c-events-bar {
    --tec-color-background-events-bar:                #303641;
    --tec-color-border-events-bar:                    rgba(255,255,255,0.12);
    --tec-color-background-view-selector:             #303641;
    --tec-color-border-secondary:                     rgba(255,255,255,0.12);
    --tec-color-text-events-bar-input:                #FFFFFF;
    --tec-color-text-events-bar-input-placeholder:    #A99D95;
    --tec-opacity-events-bar-input-placeholder:       1;
    --tec-color-text-view-selector-list-item:         #FFFFFF;
    --tec-color-text-view-selector-list-item-hover:   #C8922A;
    --tec-color-icon-events-bar:                      #FFFFFF;
    --tec-color-icon-events-bar-hover:                #C8922A;
    --tec-color-icon-events-bar-active:               #FFFFFF;
    --tec-color-accent-secondary:                     #AA0907;
    --tec-box-shadow-default:                         0 8px 24px rgba(0,0,0,0.45);
    --tec-box-shadow-tooltip:                         0 8px 24px rgba(0,0,0,0.45);
}

/* Bar container — one dark pill, subtle hairline, soft radius */
.tribe-events .tribe-events-c-events-bar,
.tribe-common--breakpoint-medium.tribe-events .tribe-events-header--has-event-search .tribe-events-c-events-bar,
.tribe-events .tribe-events-c-events-bar__search-container {
    background-color: #303641 !important;
}

.tribe-events .tribe-events-c-events-bar--border,
.tribe-common--breakpoint-medium.tribe-events .tribe-events-c-events-bar--border,
.tribe-events .tribe-events-c-events-bar--border:hover,
.tribe-events .tribe-events-c-events-bar--border:focus-within {
    border:        1px solid rgba(255,255,255,0.12) !important;
    border-radius: 4px !important;
    outline:       none !important;
    box-shadow:    none !important;
    transition:    border-color 0.2s ease !important;
}

.tribe-events .tribe-events-c-events-bar--border:focus-within {
    border-color: #C8922A !important;
}

/* Keyword input sits flush inside the dark bar */
.tribe-events .tribe-events-c-events-bar .tribe-common-form-control-text__input,
.tribe-events .tribe-events-c-events-bar input.tribe-events-c-search__input {
    background:   transparent !important;
    border-color: transparent !important;
    box-shadow:   none !important;
}

.tribe-events .tribe-events-c-events-bar .tribe-common-form-control-text__input:focus,
.tribe-events .tribe-events-c-events-bar input.tribe-events-c-search__input:focus {
    outline: none !important;
}

/* Search magnifier inside the input + mobile search toggle */
.tribe-events .tribe-events-c-search__input-control-icon-svg path,
.tribe-events .tribe-events-c-events-bar__search-button-icon-svg path {
    fill: #A99D95 !important;
}

.tribe-events .tribe-events-c-events-bar__search-button:hover .tribe-events-c-events-bar__search-button-icon-svg path,
.tribe-events .tribe-events-c-events-bar__search-button--active .tribe-events-c-events-bar__search-button-icon-svg path {
    fill: #C8922A !important;
}

/* View selector panel — desktop tabs AND mobile dropdown */
.tribe-events .tribe-events-c-view-selector__content,
.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__content,
.tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__content {
    background-color: #303641 !important;
    border-color:     rgba(255,255,255,0.12) !important;
}

/* Tab / list-item text: white, Sora; gold on hover; white+bold when active */
.tribe-events .tribe-events-c-view-selector__list-item-text,
.tribe-events .tribe-events-c-view-selector__list-item-link .tribe-events-c-view-selector__list-item-text {
    color:          #FFFFFF !important;
    font-family:    "Sora", sans-serif !important;
    font-weight:    500 !important;
    letter-spacing: 0.03em !important;
    transition:     color 0.2s ease !important;
}

.tribe-events .tribe-events-c-view-selector__list-item-link:hover .tribe-events-c-view-selector__list-item-text,
.tribe-events .tribe-events-c-view-selector__list-item-link:focus .tribe-events-c-view-selector__list-item-text {
    color: #C8922A !important;
}

.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-text {
    color:       #FFFFFF !important;
    font-weight: 700 !important;
}

/* Active tab underline (TEC ::after) and view-selector icons */
.tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link::after {
    background-color: #AA0907 !important;
}

.tribe-events .tribe-events-c-view-selector__button-icon-svg path,
.tribe-events .tribe-events-c-view-selector__list-item-icon path,
.tribe-events .tribe-events-c-view-selector__list-item-icon-svg path {
    fill: #FFFFFF !important;
}

.tribe-events .tribe-events-c-view-selector__list-item-link:hover .tribe-events-c-view-selector__list-item-icon path,
.tribe-events .tribe-events-c-view-selector__list-item-link:hover .tribe-events-c-view-selector__list-item-icon-svg path {
    fill: #C8922A !important;
}

/* Mobile: the search dropdown that opens under the bar */
.tribe-events .tribe-events-c-events-bar__search-container {
    border:        1px solid rgba(255,255,255,0.12) !important;
    border-top:    0 !important;
    border-radius: 0 0 4px 4px !important;
    box-shadow:    0 8px 24px rgba(0,0,0,0.45) !important;
}


/* ─────────────────────────────────────────────────────────────
   FIX H — MENU SECTION: Option C "feature strip"
   (client-approved 2026-09-21 from the local A/C mock)
   Loop item template 1603 is now: root row → [photo col | text col].
   Elementor settings carry the layout; these rules add what the
   builder can't express: alternating photo side, hairlines between
   dishes, photo filling the row height, copy measure, and the
   phone stack. Photos and copy are the live ones — nothing added.
   ───────────────────────────────────────────────────────────── */
.elementor-loop-container.elementor-grid {
    row-gap:    12px !important;
    column-gap: 0 !important;
    position:   relative;   /* rows paint above the bowl drawing (z 0) */
    z-index:    1;
}

/* V1 (client-approved 2026-09-21): each dish is a rounded block on Brand
   Accent with 12px gaps (set on the loop grid), one short red rule per
   dish (divider widget at the top of the text column). The hairline
   separators from the first cut are gone. */
.elementor-loop-container > .e-loop-item {
    border: 0 !important;
}

.elementor-loop-container > .e-loop-item > .e-con {
    background-color: #303641 !important;
    border:           1px solid rgba(255,255,255,0.06) !important;
    border-radius:    6px !important;
    overflow:         hidden !important;
}

/* Red rule: 36 × 3px, left-aligned, sits above the kicker */
.elementor-loop-container .up-menu-text .elementor-widget-divider {
    width:  auto !important;
    margin: 0 0 4px !important;
}
.elementor-loop-container .up-menu-text .elementor-widget-divider .elementor-divider {
    justify-content: flex-start !important;
    padding: 0 !important;
}
.elementor-loop-container .up-menu-text .elementor-widget-divider .elementor-divider-separator {
    width:        36px !important;
    border-top:   3px solid #AA0907 !important;
    border-radius: 0 !important;
}

/* Section grounds: the container's global grey (75% #5C5C5C) and the
   maroon inner box still win inside Elementor, so pin them here. */
#menu.elementor-element-2f13a54f,
.elementor-element-2f13a54f {
    background-color: #1B1E23 !important;
}

.elementor-element-1719a56a {
    background:    transparent !important;
    border-radius: 0 !important;
    padding:       0 !important;
}

/* Dish name: Julee display, overriding FIX #6's h3 → Sora rule.
   The tag is h3 for document outline; the face is the brand display. */
.elementor-loop-container .elementor-widget-theme-post-title .elementor-heading-title,
.elementor-loop-container h3.elementor-heading-title {
    font-family: "Julee", cursive !important;
    font-weight: 400 !important;
}

/* Photo column: the image is taken out of flow and stretched to the
   column box, so the TEXT column sets the row height (min 420px) and
   the photo crops with object-fit instead of dictating a 900px row. */
.elementor-loop-container .up-menu-photo {
    position:   relative !important;
    min-height: 420px;
    overflow:   hidden !important;
}

.elementor-loop-container .up-menu-photo .elementor-widget-theme-post-featured-image {
    position: absolute !important;
    inset:    0 !important;
    margin:   0 !important;
    width:    100% !important;
    height:   100% !important;
}

.elementor-loop-container .up-menu-photo .elementor-widget-theme-post-featured-image .elementor-widget-container,
.elementor-loop-container .up-menu-photo .elementor-widget-theme-post-featured-image .elementor-widget-container > *,
.elementor-loop-container .up-menu-photo img {
    display:   block;
    width:     100% !important;
    max-width: none !important;
    height:    100% !important;
}

.elementor-loop-container .up-menu-photo img {
    object-fit:      cover !important;
    object-position: center !important;
    border:          0 !important;
    border-radius:   0 !important;
}

/* Per-dish crop: Grateful Veg's food sits low in the frame */
.elementor-loop-container .e-loop-item-1916 .up-menu-photo img {
    object-position: center bottom !important;
}

/* Decorative dumpling line-art (Dumpling-09 chopsticks, Dumpling-11 bowl):
   strokes are #231F20 and disappeared on the dark ground. Invert to light,
   warm toward the gold of the "Menu" title, keep them quiet. */
.elementor-element-7ba9165e img,
.elementor-element-6e2ff0a img {
    filter: invert(1) sepia(1) saturate(1.8) hue-rotate(-8deg) brightness(0.9) !important;
}
.elementor-element-7ba9165e img,
.elementor-element-6e2ff0a img  { opacity: 0.5 !important; }

/* Original rendered sizes for the two drawings (Elementor's image-width
   rule does not reach an img inside an absolutely positioned widget):
   chopsticks 225px at top-right of the band, bowl 300px floating left. */
.elementor-element-7ba9165e,
.elementor-element-6e2ff0a {
    width:     300px !important;
    max-width: 300px !important;
}
.elementor-element-7ba9165e .elementor-widget-container,
.elementor-element-6e2ff0a  .elementor-widget-container {
    width: 100% !important;
}
.elementor-element-7ba9165e img { width: 225px !important; height: auto !important; max-width: none !important; margin-left: auto; display: block; }
.elementor-element-6e2ff0a  img { width: 300px !important; height: auto !important; max-width: none !important; display: block; }

/* Seam between photo and text (client-approved 2026-09-21): 1px dark red
   on the text column's photo-facing edge; follows the alternation. */
@media (min-width: 768px) {
    .elementor-loop-container > .e-loop-item:nth-child(odd)  .up-menu-text { border-left:  1px solid #8A0605 !important; }
    .elementor-loop-container > .e-loop-item:nth-child(even) .up-menu-text { border-right: 1px solid #8A0605 !important; }
}
@media (max-width: 767px) {
    .elementor-loop-container > .e-loop-item .up-menu-text { border-top: 1px solid #8A0605 !important; }
}

/* Copy measure */
.elementor-loop-container .elementor-widget-text-editor {
    max-width: 52ch;
}

/* Alternate the photo side on tablet and up */
@media (min-width: 768px) {
    .elementor-loop-container > .e-loop-item:nth-child(even) > .e-con {
        flex-direction: row-reverse !important;
    }
}

/* Phone: photo over text, 4:3 photo so the section doesn't run long */
@media (max-width: 767px) {
    .elementor-loop-container > .e-loop-item > .e-con {
        flex-direction: column !important;
    }
    .elementor-loop-container .up-menu-photo {
        min-height:   0 !important;
        aspect-ratio: 4 / 3;
        width:        100% !important;
    }
    .elementor-loop-container .elementor-widget-text-editor {
        max-width: none;
    }
}


/* Phone: the "Find Uncle Ping's" box loses ~110px of a 390px screen to
   nested padding (yellow box → dark box → TEC container). Elementor
   mobile padding is now 6px on the two boxes; TEC's own gutter follows. */
@media (max-width: 767px) {
    .elementor-element-9dc8907 .tribe-events .tribe-events-l-container,
    .elementor-element-9dc8907 .tribe-common .tribe-common-l-container {
        padding-left:  10px !important;
        padding-right: 10px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   CHECKOUTWC SIDE CART
   Panel container was white with white text → invisible. Keep the
   text white (it already is), give the panel the site's dark ground,
   swap CheckoutWC's pink (#CC3366) controls for brand red / white,
   and hide the floating cart button while the cart is empty.
   ───────────────────────────────────────────────────────────── */
#cfw-side-cart-floating-button:has(.cfw-side-cart-quantity.cfw-hidden) {
    display: none !important;
}

/* Back-to-top (Unlimited Elements, fixed bottom-right, 55px) shares the
   corner with the CheckoutWC cart button (66px, z 999997) and was hidden
   under it whenever the cart had items. While the cart button is showing,
   lift the back-to-top above it; with an empty cart it stays put. */
body:not(:has(#cfw-side-cart-floating-button .cfw-side-cart-quantity.cfw-hidden)) #uc_ue_scroll_to_top_elementor_43ac39c.ue-scroll-to.ue-snap-v-bottom {
    bottom: 104px !important;
    right:  26px !important;
}


#cfw-side-cart-container,
#cfw-side-cart-form.checkoutwc,
.checkoutwc.cfw-grid,
#cfw-side-cart-form .cfw-side-cart-contents,
#cfw-side-cart-form .cfw-side-cart-contents-header,
#cfw-side-cart-form .cfw-side-cart-contents-footer {
    background-color: #1B1E23 !important;
    color:            #FFFFFF !important;
}

#cfw-side-cart-form,
#cfw-side-cart-form p,
#cfw-side-cart-form td,
#cfw-side-cart-form th,
#cfw-side-cart-form a:not(.cfw-primary-btn),
#cfw-side-cart-form .woocommerce-Price-amount,
#cfw-side-cart-form .cfw-side-cart-quantity,
#cfw-side-cart-form .cfw-quantity-stepper-value-label {
    color: #FFFFFF !important;
}

/* CheckoutWC paints every table cell (item row + totals) with its body
   background variable (#ffffff) — override the variable inside the panel
   and make the cells transparent. Icons inherit dark colours → white. */
#cfw-side-cart-container,
#cfw-side-cart-form.checkoutwc,
#cfw-side-cart-form .checkoutwc {
    --cfw-body-background-color: #1B1E23;
    --cfw-body-text-color:       #FFFFFF;
}

#cfw-side-cart-form table,
#cfw-side-cart-form thead,
#cfw-side-cart-form tbody,
#cfw-side-cart-form tfoot,
#cfw-side-cart-form tr,
#cfw-side-cart-form th,
#cfw-side-cart-form td {
    background:       transparent !important;
    background-color: transparent !important;
    color:            #FFFFFF !important;
}

#cfw-side-cart-form .cfw-cart-item-title,
#cfw-side-cart-form .cfw-cart-item-title a,
#cfw-side-cart-form .cfw-cart-item-subtitle,
#cfw-side-cart-form .cfw-cart-item-description *,
#cfw-side-cart-form .cart-subtotal th,
#cfw-side-cart-form .cart-subtotal td,
#cfw-side-cart-form .order-total th,
#cfw-side-cart-form .order-total td {
    color: #FFFFFF !important;
}

#cfw-side-cart-form .cfw-cart-item-subtotal,
#cfw-side-cart-form .cart-subtotal td .woocommerce-Price-amount,
#cfw-side-cart-form .order-total td .woocommerce-Price-amount {
    color: #EDD1CA !important;
}

#cfw-side-cart-form svg,
#cfw-side-cart-form .cfw-side-cart-quantity-wrap,
#cfw-side-cart-form .cfw-side-cart-quantity-wrap svg,
#cfw-side-cart-form .cfw-side-cart-close-btn svg,
#cfw-side-cart-form .cfw-quantity-stepper svg,
#cfw-side-cart-form .cfw-remove-item-button svg {
    color:  #FFFFFF !important;
    stroke: currentColor;
}

#cfw-side-cart-form .cfw-quantity-stepper,
#cfw-side-cart-form .cfw-quantity-stepper-value-label {
    background:   transparent !important;
    border-color: rgba(255,255,255,0.25) !important;
    color:        #FFFFFF !important;
}

#cfw-side-cart-form .cfw-side-cart-contents-header {
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}

#cfw-side-cart-form .cfw-side-cart-contents-footer {
    border-top: 1px solid rgba(255,255,255,0.12) !important;
}

#cfw-side-cart-form .cfw-side-cart-close-btn,
#cfw-side-cart-form .cfw-quantity-stepper-btn-minus,
#cfw-side-cart-form .cfw-quantity-stepper-btn-plus,
#cfw-side-cart-form .cfw-remove-item-button {
    color:        #FFFFFF !important;
    border-color: rgba(255,255,255,0.25) !important;
    background:   transparent !important;
}

#cfw-side-cart-form .cfw-side-cart-close-btn:hover,
#cfw-side-cart-form .cfw-quantity-stepper-btn-minus:hover,
#cfw-side-cart-form .cfw-quantity-stepper-btn-plus:hover,
#cfw-side-cart-form .cfw-remove-item-button:hover {
    color:        #C8922A !important;
    border-color: #C8922A !important;
}

#cfw-side-cart-form .cfw-cart-table td,
#cfw-side-cart-form .cfw-module td {
    border-color: rgba(255,255,255,0.12) !important;
}

#cfw-side-cart-form .attachment-cfw_cart_thumb {
    border: 1px solid rgba(255,255,255,0.12) !important;
    background: #FFFFFF;
}

#cfw-side-cart-form .cfw-primary-btn {
    background:   #AA0907 !important;
    border-color: #AA0907 !important;
    color:        #FFFFFF !important;
}

#cfw-side-cart-form .cfw-primary-btn:hover {
    background:   #8A0605 !important;
    border-color: #8A0605 !important;
}

#cfw-side-cart-form .cfw-alert-success {
    background:   #303641 !important;
    border-color: rgba(255,255,255,0.12) !important;
    color:        #EDD1CA !important;
}
#cfw-side-cart-form .cfw-alert-success .message { color: #EDD1CA !important; }


/* ─────────────────────────────────────────────────────────────
   PHONE: SIDEWAYS SCROLL (reported 2026-09-21)
   Two Events Calendar elements extend past the right edge on phones:
   the map view's "Event Details / Get Directions" pair is forced onto
   one line by the critical CSS (overflows a 188px card), and the
   date-picker dropdown is 363px wide positioned from the left. Chrome
   clips them (body overflow-x: clip); Safari scrolls to them. Let the
   buttons wrap, keep the picker inside the viewport, and add the
   overflow-x fallback for browsers without `clip`.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    html, body {
        overflow-x: hidden !important;
        max-width:  100vw;
    }
    html body .tribe-common .tribe-events-pro-map__event-actions--linked[aria-hidden="false"] {
        flex-wrap: wrap !important;
        max-width: 100% !important;
    }
    .tribe-common .tribe-events-pro-map__event-actions--linked .tribe-common-cta--thin-alt,
    .tribe-common .tribe-events-pro-map__event-actions--linked .tribe-events-c-small-cta__link {
        white-space: normal !important;
        max-width:   100% !important;
    }
    .tribe-events .tribe-events-c-top-bar__datepicker-container {
        left:      0 !important;
        right:     0 !important;
        width:     auto !important;
        max-width: calc(100vw - 24px) !important;
        margin:    0 12px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   MC4WP MAILCHIMP NEWSLETTER FORM — BRAND SKIN
   Widget: wp-widget-mc4wp_form_widget  ·  Form ID: 682
   Rendered inside template 1630, #contact section, container 9ac6d2b.

   PALETTE
     Brand dark  #1B1E23   Brand red   #AA0907
     Brand gold  #C8922A   Brand taupe #A99D95
     Brand blush #EDD1CA   Red hover   #8A0605

   TYPOGRAPHY — Sora throughout (no Julee: this is UI, not display)

   NOTE: MC4WP outputs <p><p> which the browser parses as an empty
   first <p> (P1) followed by First-Name (P2), Last-Name (P3),
   a bare <label> wrapping the email input, and a submit <p> (P5).
   nth-child counts from the DOM position so selectors below are
   intentionally offset by 1 to account for the phantom P1.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Neutralise MC4WP light-theme input chrome ─────────────
   The plugin ships mc4wp-form-theme-light which sets grey
   backgrounds, borders, and border-radius on inputs.  Flatten
   them first so our brand layer applies cleanly.               */
.mc4wp-form-theme-light input[type="text"],
.mc4wp-form-theme-light input[type="email"],
.mc4wp-form-theme-light input[type="submit"],
.mc4wp-form-theme-light label {
    background:    transparent !important;
    border-color:  transparent !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
    color:         inherit !important;
}

/* ── 2. Form & widget wrappers ───────────────────────────────── */
.elementor-widget-wp-widget-mc4wp_form_widget,
.elementor-widget-wp-widget-mc4wp_form_widget .mc4wp-form {
    width: 100% !important;
}

.elementor-widget-wp-widget-mc4wp_form_widget .mc4wp-form {
    margin-top: 0.25rem !important;
}

/* ── 3. Fields wrapper: flex grid, names side-by-side ─────────── */
.mc4wp-form-682 .mc4wp-form-fields {
    display:   flex !important;
    flex-wrap: wrap !important;
    gap:       0 1.5rem !important;
    margin:    0 !important;
    padding:   0 !important;
}

/* Reset paragraph spacing */
.mc4wp-form-682 .mc4wp-form-fields p {
    margin:      0 !important;
    padding:     0 !important;
    border:      none !important;
    background:  transparent !important;
}

/* P2 (First Name) + P3 (Last Name) — half width, side by side.
   The phantom empty P1 is child-1; these are child-2 and child-3. */
.mc4wp-form-682 .mc4wp-form-fields > p:nth-child(2),
.mc4wp-form-682 .mc4wp-form-fields > p:nth-child(3) {
    flex:        0 0 calc(50% - 0.75rem) !important;
    max-width:   calc(50% - 0.75rem) !important;
    padding-top: 1.25rem !important;
}

/* Email label (direct child — wraps the email input) — full width */
.mc4wp-form-682 .mc4wp-form-fields > label {
    flex:           0 0 100% !important;
    display:        flex !important;
    flex-direction: column !important;
    gap:            0.4rem !important;
    padding-top:    1.25rem !important;
}

/* Submit paragraph — full width */
.mc4wp-form-682 .mc4wp-form-fields > p:last-child {
    flex: 0 0 100% !important;
}

/* ── 4. Labels ───────────────────────────────────────────────── */
.mc4wp-form-682 label,
.mc4wp-form-682 .mc4wp-form-fields label {
    display:        block !important;
    font-family:    "Sora", sans-serif !important;
    font-size:      0.6rem !important;
    font-weight:    700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color:          #A99D95 !important;
    line-height:    1 !important;
    margin:         0 !important;
}

/* ── 5. Text & email inputs — underline-only style ─────────────
   Transparent background lets the section's dark surface show
   through; a single bottom border reads clean on dark.          */
.mc4wp-form-682 input[type="text"],
.mc4wp-form-682 input[type="email"] {
    display:            block !important;
    width:              100% !important;
    background:         transparent !important;
    border:             none !important;
    border-bottom:      1px solid rgba(169, 157, 149, 0.28) !important;
    border-radius:      0 !important;
    padding:            0.6rem 0 !important;
    margin:             0 !important;
    color:              #FFFFFF !important;
    font-family:        "Sora", sans-serif !important;
    font-size:          0.9rem !important;
    font-weight:        400 !important;
    line-height:        1.4 !important;
    outline:            none !important;
    box-shadow:         none !important;
    -webkit-appearance: none !important;
    appearance:         none !important;
    transition:         border-color 0.22s ease !important;
    box-sizing:         border-box !important;
}

.mc4wp-form-682 input[type="text"]::placeholder,
.mc4wp-form-682 input[type="email"]::placeholder {
    color:      rgba(169, 157, 149, 0.38) !important;
    font-style: normal !important;
}

/* Focus: bottom border lights up with brand gold */
.mc4wp-form-682 input[type="text"]:focus,
.mc4wp-form-682 input[type="email"]:focus {
    border-bottom-color: #C8922A !important;
    outline:             none !important;
    box-shadow:          none !important;
}

/* ── 6. Submit button ────────────────────────────────────────── */
.mc4wp-form-682 input[type="submit"] {
    display:            block !important;
    width:              100% !important;
    background:         #AA0907 !important;
    color:              #FFFFFF !important;
    border:             none !important;
    border-radius:      2px !important;
    padding:            0.9rem 1.5rem !important;
    margin-top:         1.75rem !important;
    font-family:        "Sora", sans-serif !important;
    font-size:          0.72rem !important;
    font-weight:        700 !important;
    letter-spacing:     0.13em !important;
    text-transform:     uppercase !important;
    cursor:             pointer !important;
    transition:         background 0.2s ease, transform 0.12s ease !important;
    -webkit-appearance: none !important;
    appearance:         none !important;
    box-sizing:         border-box !important;
}

.mc4wp-form-682 input[type="submit"]:hover {
    background: #8A0605 !important;
}

.mc4wp-form-682 input[type="submit"]:active {
    transform: scale(0.985) !important;
}

/* ── 7. Response states ──────────────────────────────────────── */
.mc4wp-form-682 .mc4wp-response {
    margin-top: 1.25rem !important;
}

.mc4wp-form-682 .mc4wp-alert {
    padding:       0.75rem 1rem !important;
    font-family:   "Sora", sans-serif !important;
    font-size:     0.82rem !important;
    border-radius: 2px !important;
    line-height:   1.55 !important;
}

.mc4wp-form-682 .mc4wp-alert-success {
    background: rgba(170,  9,  7, 0.10) !important;
    border:     1px solid rgba(170,  9,  7, 0.30) !important;
    color:      #EDD1CA !important;
}

.mc4wp-form-682 .mc4wp-alert-error {
    background: rgba(200, 146, 42, 0.10) !important;
    border:     1px solid rgba(200, 146, 42, 0.30) !important;
    color:      #C8922A !important;
}

/* ── 8. Mobile: stack name fields full-width ────────────────── */
@media (max-width: 767px) {
    .mc4wp-form-682 .mc4wp-form-fields > p:nth-child(2),
    .mc4wp-form-682 .mc4wp-form-fields > p:nth-child(3) {
        flex:      0 0 100% !important;
        max-width: 100% !important;
    }
}

.tribe-events-c-nav__prev-link:hover,
.tribe-events-c-nav__next-link:hover,
.tribe-events-c-nav__today-link:hover {
    color: #EDD1CA !important;
}

/* ─────────────────────────────────────────────────────────────
   MOBILE FIXES — Modal centering + Event list buttons
   ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

    /* Modal overlay: explicit top/left/right/bottom instead of
       inset shorthand (Safari 14 and older don't support inset).
       overscroll-behavior contains scroll within the overlay.
       Note: -webkit-overflow-scrolling:touch is intentionally
       omitted — it conflicts with overscroll-behavior on iOS.   */
    #up-event-modal-overlay {
        top:                0;
        left:               0;
        right:              0;
        bottom:             0;
        width:              100%;
        padding:            16px;
        box-sizing:         border-box;
        align-items:        flex-start;
        overflow-y:         auto;
        overscroll-behavior: contain;
    }

    /* Modal panel: full width inside the padded overlay,
       no translateY animation (avoids clipping on slide-in).    */
    #up-event-modal {
        width:      100%;
        max-width:  none;
        max-height: none;
        transform:  none !important;
        margin:     auto;
    }

    #up-event-modal-header {
        padding: 14px 18px;
    }

    #up-event-modal-header h2 {
        font-size: 1.1rem !important;
    }

    #up-event-modal-body {
        padding: 16px;
    }

    /* Event action buttons: on mobile the card is narrow —
       shrink font/padding so both buttons stay inside the card
       and don't bleed into the next entry.                      */
    .tribe-common .tribe-events-pro-map__event-actions .tribe-common-cta--thin-alt,
    .tribe-common .tribe-events-pro-map__event-actions .tribe-events-c-small-cta__link {
        font-size:  0.7rem  !important;
        padding:    5px 10px !important;
        margin:     3px 4px 0 0 !important;
    }

    /* Contain the action row so buttons can't escape the card   */
    .tribe-events-pro-map__event-actions {
        overflow:  hidden;
        max-width: 100%;
    }

    /* TEC map list: allow full text + scrollable list on mobile ──
       TEC sets white-space:nowrap on all text, causing truncation.
       TEC's cards wrapper uses overflow:hidden + a JS scrollbar.
       We keep overflow-y:auto for native touch scroll, and use
       min-height (which CSS !important wins over inline height)
       to guarantee enough room for wrapped cards.               */
    .tribe-events-pro-map {
        height: auto !important;
        min-height: 780px !important;
    }

    .tribe-events-pro-map__event-column {
        height: auto !important;
        min-height: 480px !important;
    }

    /* TEC uses transform-based custom scroll on the ul inside —
       min-height forces TEC's JS to allocate space for ~4 wrapped
       cards (130px each) before requiring a swipe.              */
    .tribe-events-pro-map__event-cards-wrapper {
        overflow-y: auto !important;
        min-height: 430px !important;
    }

    .tribe-events-pro-map__event,
    .tribe-events-pro-map__event-details,
    .tribe-events-pro-map__event-title-link,
    .tribe-events-pro-map__event-venue,
    .tribe-events-pro-map__event-datetime-wrapper {
        white-space: normal !important;
    }
}