/**
 * Giggly brand tokens + global accents
 * =====================================
 * Single place to adjust fonts, colours, and shared component styling.
 * Loaded first via @import from /style.css — see BRANDING.md.
 *
 * Cache-bust: bump the ?v= on the @import in style.css when changing this file.
 *
 * Fonts: self-hosted @font-face below (not a nested Google Fonts @import — those
 * are ignored inside imported sheets). Keep style.css to a SINGLE @import of this
 * file; a second top-level @import breaks mobile media=print→all onload.
 */

/* Self-hosted brand fonts */
@font-face {
    font-family: 'League Spartan';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/league-spartan-400.woff2') format('woff2');
}

@font-face {
    font-family: 'League Spartan';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/league-spartan-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Londrina Solid';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/londrina-solid-400.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */

:root {
    /* Core brand */
    --brand-teal: #77aca2;
    --brand-teal-deep: #468189;
    --brand-ink: #031926;
    --brand-black: #000000;
    --brand-white: #ffffff;

    /* Event category pills (white text on these backgrounds) */
    --brand-cat-club: #3c1518;
    --brand-cat-gig: #69140e;
    --brand-cat-classical: #a44200;
    --brand-cat-pub: #d58936;
    --brand-cat-open-mic: #0b220b;
    --brand-cat-instore: #273b09;
    --brand-cat-festival: #58641d;
    --brand-cat-street: #7b904b;

    /* Typography */
    --font-sans: 'League Spartan', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-logo: 'Londrina Solid', 'League Spartan', sans-serif;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;

    /* Map legacy accents → brand (keeps existing var(--accent-*) call sites) */
    --accent-pink: var(--brand-teal);
    --accent-purple: var(--brand-teal-deep);
    --accent-blue: var(--brand-teal);

    /* Surfaces / text nudged toward brand ink */
    --text: var(--brand-ink);
    --tag-bg: color-mix(in srgb, var(--brand-teal) 14%, transparent);
    --tag-border: color-mix(in srgb, var(--brand-teal) 36%, transparent);

    /* Footer / chrome — active tab: teal plate (#77ACA2) + white glyph/label */
    --nav-icon-size: 32px;
    --nav-icon-plate: var(--brand-teal);
    --nav-label-color: var(--brand-ink);
    --nav-label-active: var(--brand-white);
    --nav-active-bg: var(--brand-teal);
    --pill-bg: var(--brand-teal);
    --pill-fg: var(--brand-white);
    --circle-icon-bg: var(--brand-teal-deep);

    /* Primary buttons / CTAs (no purple gradients) */
    --brand-btn-bg: var(--brand-teal-deep);
    --brand-btn-fg: var(--brand-white);
    --brand-btn-shadow: color-mix(in srgb, var(--brand-teal-deep) 40%, transparent);
    --brand-soft-bg: color-mix(in srgb, var(--brand-teal) 14%, transparent);
    --brand-soft-bg-strong: color-mix(in srgb, var(--brand-teal) 22%, transparent);
}

html[data-theme='dark'] {
    --bg: var(--brand-ink);
    --bg-gradient-start: #031926;
    --bg-gradient-end: #0a2a38;
    --text: #e8eef0;
    --text-secondary: #a8c0c4;
    --border: #1a3a46;
    --footer-text: #1a3a46;
    --tag-bg: color-mix(in srgb, var(--brand-teal) 18%, transparent);
    --tag-border: color-mix(in srgb, var(--brand-teal) 40%, transparent);
    --nav-label-color: var(--brand-white);
    --nav-label-active: var(--brand-white);
}

/* --------------------------------------------------------------------------
   Base type
   -------------------------------------------------------------------------- */

body {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-regular);
}

/* Logo wordmark only */
.logo,
.app-header .logo,
.brand-logo-text,
.giggly-wordmark {
    font-family: var(--font-logo);
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   Filter / category pills (Bar B + friends/tickets tab rows)
   -------------------------------------------------------------------------- */

.filter-tab,
.giggly-friends-tabs .filter-tab,
.friends-page-tabs .filter-tab,
.tickets-page-tabs .filter-tab,
.feed-month-cal-modal__filter-tab {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
}

.filter-tab.active,
.giggly-friends-tabs .filter-tab.active,
.friends-page-tabs .filter-tab.active,
.tickets-page-tabs .filter-tab.active,
.feed-month-cal-modal__filter-tab--active {
    background: var(--pill-bg) !important;
    color: var(--pill-fg) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    font-weight: var(--font-weight-semibold);
}

:root[data-theme='dark'] .filter-tab.active,
:root[data-theme='dark'] .feed-month-cal-modal__filter-tab--active {
    background: var(--pill-bg) !important;
    color: var(--pill-fg) !important;
}

/* --------------------------------------------------------------------------
   Primary buttons / modal CTAs — solid brand deep teal (no purple gradients)
   -------------------------------------------------------------------------- */

.auth-button:not(.auth-button-secondary):not(.ticket-swap-offer-update__btn-danger):not(.ticket-swap-offer-update__btn-secondary):not(.view-event-page__confirm-delete-btn):not(.view-event-page__reject):not(.ticket-swap-manage-sales__offer-remove-single):not(.ticket-swap-manage-purchases__cancel-buy-btn),
.btn-primary,
button.auth-button:not(.auth-button-secondary):not(.ticket-swap-offer-update__btn-danger):not(.ticket-swap-offer-update__btn-secondary):not(.view-event-page__confirm-delete-btn):not(.view-event-page__reject),
a.auth-button:not(.auth-button-secondary):not(.ticket-swap-offer-update__btn-danger):not(.ticket-swap-offer-update__btn-secondary),
.modal .auth-button:not(.auth-button-secondary):not(.ticket-swap-offer-update__btn-danger):not(.ticket-swap-offer-update__btn-secondary):not(.view-event-page__confirm-delete-btn):not(.view-event-page__reject),
.modal-actions .auth-button:not(.auth-button-secondary):not(.ticket-swap-offer-update__btn-danger):not(.ticket-swap-offer-update__btn-secondary),
.ticket-wallet-sheet__primary,
.ticket-swap-qty-sheet__save,
.ticket-swap-qty-sheet__confirm,
.filter-pick-modal__done-btn,
.add-event-submit-btn,
.giggly-ts-sell-modal__submit,
.venue-rpc-modal__btn:not(.venue-rpc-modal__btn--secondary):not(.venue-rpc-modal__btn--danger),
.giggly-profile-past-modal__btn:not(.giggly-profile-past-modal__btn--danger),
.giggly-wall-editor__confirm-actions .auth-button:not(.auth-button-secondary),
.set-times-popover__save-btn {
    background: var(--brand-btn-bg) !important;
    background-image: none !important;
    color: var(--brand-btn-fg) !important;
    -webkit-text-fill-color: var(--brand-btn-fg) !important;
    box-shadow: 0 4px 16px var(--brand-btn-shadow) !important;
}

.auth-button:not(.auth-button-secondary):not(.ticket-swap-offer-update__btn-danger):not(.ticket-swap-offer-update__btn-secondary):not(.view-event-page__confirm-delete-btn):not(.view-event-page__reject):hover:not(:disabled),
.btn-primary:hover:not(:disabled),
button.auth-button:not(.auth-button-secondary):not(.ticket-swap-offer-update__btn-danger):not(.ticket-swap-offer-update__btn-secondary):hover:not(:disabled),
a.auth-button:not(.auth-button-secondary):not(.ticket-swap-offer-update__btn-danger):not(.ticket-swap-offer-update__btn-secondary):hover:not(:disabled) {
    background: var(--brand-btn-bg) !important;
    background-image: none !important;
    filter: brightness(1.06);
}

/* Danger / secondary: kill any leftover purple gradient imagery only */
.auth-button-secondary,
.ticket-swap-offer-update__btn-secondary,
.ticket-swap-offer-update__btn-danger,
.venue-rpc-modal__btn--secondary,
.venue-rpc-modal__btn--danger,
.giggly-profile-past-modal__btn--danger,
.view-event-page__confirm-delete-btn,
.view-event-page__reject {
    background-image: none !important;
}

/* --------------------------------------------------------------------------
   Circle icons (+ FAB, empty avatar rings, missing flyers)
   -------------------------------------------------------------------------- */

.add-btn,
.bottom-bar .add-btn {
    background: var(--circle-icon-bg) !important;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--brand-teal-deep) 40%, transparent) !important;
}

/* Empty promoter / venue / artist / designer / user / group circles */
.promoter-channels-list__avatar-fallback,
.promoter-channels-list__avatar-img,
.promoter-channels-list__avatar-wrap--square,
body.artists-channels-directory-page .promoter-channels-list__avatar-wrap--square,
body.djs-channels-directory-page .promoter-channels-list__avatar-wrap--square,
body.designers-channels-directory-page .promoter-channels-list__avatar-wrap--square,
body.artists-channels-directory-page .promoter-channels-list__avatar-fallback,
body.djs-channels-directory-page .promoter-channels-list__avatar-fallback,
.promoter-channel-page .pc-hero__fallback,
body.artist-channel-page .pc-hero__fallback,
body.artist-channel-page .pc-hero__avatar-wrap--no-icon,
.profile-avatar:not(:has(img)),
:root[data-theme='dark'] .profile-avatar:not(:has(img)),
.giggly-friends-chat-avatar--initial,
.giggly-user-settings-modal__avatar-fallback,
.event-card-v2__promoter-avatar-wrap,
.event-card-v2__promoter-avatar-initials,
.feed-follow-source__avatar-initials,
.venue-rpc-modal__promoter-icon-preview-fallback,
.venue-rpc-modal__promoter-icon-preview-wrap,
.pc-member-row__avatar,
.giggly-profile-social-surface .pc-member-row__avatar,
.promoter-channel-page .pc-member-row__avatar {
    background: var(--brand-teal-deep) !important;
    background-color: var(--brand-teal-deep) !important;
    background-image: none !important;
    color: var(--brand-white) !important;
    -webkit-text-fill-color: var(--brand-white) !important;
    border-color: transparent !important;
}

/* Keep photo avatars transparent once an <img> is present */
.event-card-v2__promoter-avatar-wrap:has(img),
.pc-member-row__avatar:has(img),
.giggly-profile-social-surface .pc-member-row__avatar:has(img),
.promoter-channel-page .pc-member-row__avatar:has(img) {
    background: transparent !important;
    background-color: transparent !important;
}

/* Empty artist / user header banners (no cover image) */
.giggly-profile-feed__banner,
.giggly-profile-feed__banner--empty,
html[data-theme='dark'] .giggly-profile-feed__banner,
html[data-theme='dark'] .giggly-profile-feed__banner--empty,
:root[data-theme='dark'] .giggly-profile-feed__banner,
:root[data-theme='dark'] .giggly-profile-feed__banner--empty,
body.artist-channel-page .ac-hero-header-image,
body.artist-channel-page .ac-hero-header-image:not(.ac-hero-header-image--has-photo):not(.ac-hero-header-image--from-icon),
body.designer-channel-page .ac-hero-header-image,
body.designer-channel-page .ac-hero-header-image:not(.ac-hero-header-image--has-photo):not(.ac-hero-header-image--from-icon) {
    background: var(--brand-teal-deep) !important;
    background-image: none !important;
}

.giggly-profile-feed__banner--has-photo,
.giggly-profile-feed__banner--from-avatar,
body.artist-channel-page .ac-hero-header-image--has-photo,
body.artist-channel-page .ac-hero-header-image--from-icon,
body.designer-channel-page .ac-hero-header-image--has-photo,
body.designer-channel-page .ac-hero-header-image--from-icon {
    background: #111 !important;
}

/* Missing event flyer placeholders */
.event-card-v2__flyer--title-paint,
.event-card-v2__grid-flyer--title-paint,
.giggly-past-event-card__flyer--title-paint,
.giggly-past-event-card__flyer--empty,
.group-page__event-card-flyer--empty,
.group-page__event-card-flyer,
.tag-hub-card__flyer--empty,
.tag-hub-day-row__flyer--empty,
.events-cal-day-flyer-marker__flyer--empty,
.events-cal-day-map-card__flyer--empty,
html.giggly-desktop-nav-active .event-card-v2__grid-flyer--empty,
html.giggly-desktop-nav-active .event-card-v2__grid-flyer--pending {
    background: var(--brand-teal-deep) !important;
    color: var(--brand-white) !important;
}

:root[data-theme='dark'] .event-card-v2__flyer--title-paint,
:root[data-theme='dark'] .event-card-v2__grid-flyer--title-paint,
:root[data-theme='dark'] .giggly-past-event-card__flyer--title-paint,
:root[data-theme='dark'] .group-page__event-card-flyer,
:root[data-theme='dark'] .group-page__event-card-flyer--empty {
    background: var(--brand-teal-deep) !important;
    color: var(--brand-white) !important;
}

/* --------------------------------------------------------------------------
   Bottom bar (Bar D) — brand icons + League Spartan labels
   -------------------------------------------------------------------------- */

.bottom-bar--labeled .bottom-bar__nav-label,
.bottom-bar--labeled .bottom-bar__nav-label--stacked {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    color: var(--nav-label-color);
}

.bottom-bar--labeled .bottom-bar__nav-item,
.bottom-bar--labeled a.bottom-bar__nav-item:link,
.bottom-bar--labeled a.bottom-bar__nav-item:visited {
    color: #000000 !important;
    -webkit-text-fill-color: #000000;
    background: #ffffff !important;
    border: none !important;
    box-sizing: border-box;
    height: 64px;
    min-height: 64px;
    max-height: 64px;
    justify-content: center;
    opacity: 1 !important;
}

.bottom-bar--labeled .bottom-bar__nav-icon,
.bottom-bar--labeled #bottomBarDirectoryBtn .bottom-bar__nav-icon,
.bottom-bar--labeled #bottomBarTicketWalletBtn .bottom-bar__nav-icon,
.bottom-bar--labeled #bottomBarEventsBtn .bottom-bar__nav-icon,
.bottom-bar--labeled #bottomBarPromoterFeedBtn .bottom-bar__nav-icon,
.bottom-bar--labeled #bottomBarFriendsBtn .bottom-bar__nav-icon {
    position: relative;
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px;
    background: transparent !important;
}

.bottom-bar--labeled .bottom-bar__brand-icon,
.bottom-bar--labeled #bottomBarDirectoryBtn .bottom-bar__brand-icon,
.bottom-bar--labeled #bottomBarTicketWalletBtn .bottom-bar__brand-icon,
.bottom-bar--labeled #bottomBarEventsBtn .bottom-bar__brand-icon,
.bottom-bar--labeled #bottomBarPromoterFeedBtn .bottom-bar__brand-icon,
.bottom-bar--labeled #bottomBarFriendsBtn .bottom-bar__brand-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px !important;
    height: 30px !important;
    object-fit: contain;
    flex-shrink: 0;
}

.bottom-bar--labeled .bottom-bar__nav-label,
.bottom-bar--labeled .bottom-bar__nav-label--stacked {
    height: 22px;
    min-height: 22px;
    max-height: 22px;
}

/*
 * Friends & Groups: centre-pinned at the same height as sibling plates (no Y drop).
 */
.bottom-bar.bottom-bar--labeled #bottomBarFriendsBtn,
.bottom-bar.bottom-bar--labeled #bottomBarFriendsBtn.bottom-bar__icon-btn--active {
    transform: translate(-50%, 0) !important;
    bottom: max(4px, env(safe-area-inset-bottom, 0px)) !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 4px 7px 4px !important;
    flex-shrink: 0 !important;
}

.bottom-bar--labeled .bottom-bar__friends-nav {
    padding-top: 4px !important;
}

.bottom-bar--labeled .bottom-bar__friends-beta,
.bottom-bar--labeled #bottomBarFriendsBtn .bottom-bar__friends-beta {
    top: -5px !important;
    font-size: 7px !important;
    line-height: 1 !important;
    height: 11px !important;
    max-height: 11px !important;
    min-height: 11px !important;
    padding: 0 4px !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

/* Dual-state: dark = inactive, light = active. ID-scoped so sizing rules cannot win. */
.bottom-bar--labeled .bottom-bar__brand-icon--dark,
.bottom-bar--labeled #bottomBarDirectoryBtn .bottom-bar__brand-icon--dark,
.bottom-bar--labeled #bottomBarTicketWalletBtn .bottom-bar__brand-icon--dark,
.bottom-bar--labeled #bottomBarEventsBtn .bottom-bar__brand-icon--dark,
.bottom-bar--labeled #bottomBarPromoterFeedBtn .bottom-bar__brand-icon--dark,
.bottom-bar--labeled #bottomBarFriendsBtn .bottom-bar__brand-icon--dark {
    display: block !important;
}

.bottom-bar--labeled .bottom-bar__brand-icon--light,
.bottom-bar--labeled #bottomBarDirectoryBtn .bottom-bar__brand-icon--light,
.bottom-bar--labeled #bottomBarTicketWalletBtn .bottom-bar__brand-icon--light,
.bottom-bar--labeled #bottomBarEventsBtn .bottom-bar__brand-icon--light,
.bottom-bar--labeled #bottomBarPromoterFeedBtn .bottom-bar__brand-icon--light,
.bottom-bar--labeled #bottomBarFriendsBtn .bottom-bar__brand-icon--light {
    display: none !important;
}

.bottom-bar--labeled .bottom-bar__icon-btn--active .bottom-bar__brand-icon--dark,
.bottom-bar--labeled #bottomBarDirectoryBtn.bottom-bar__icon-btn--active .bottom-bar__brand-icon--dark,
.bottom-bar--labeled #bottomBarTicketWalletBtn.bottom-bar__icon-btn--active .bottom-bar__brand-icon--dark,
.bottom-bar--labeled #bottomBarEventsBtn.bottom-bar__icon-btn--active .bottom-bar__brand-icon--dark,
.bottom-bar--labeled #bottomBarPromoterFeedBtn.bottom-bar__icon-btn--active .bottom-bar__brand-icon--dark,
.bottom-bar--labeled #bottomBarFriendsBtn.bottom-bar__icon-btn--active .bottom-bar__brand-icon--dark {
    display: none !important;
}

.bottom-bar--labeled .bottom-bar__icon-btn--active .bottom-bar__brand-icon--light,
.bottom-bar--labeled #bottomBarDirectoryBtn.bottom-bar__icon-btn--active .bottom-bar__brand-icon--light,
.bottom-bar--labeled #bottomBarTicketWalletBtn.bottom-bar__icon-btn--active .bottom-bar__brand-icon--light,
.bottom-bar--labeled #bottomBarEventsBtn.bottom-bar__icon-btn--active .bottom-bar__brand-icon--light,
.bottom-bar--labeled #bottomBarPromoterFeedBtn.bottom-bar__icon-btn--active .bottom-bar__brand-icon--light,
.bottom-bar--labeled #bottomBarFriendsBtn.bottom-bar__icon-btn--active .bottom-bar__brand-icon--light {
    display: block !important;
}

/*
 * Active tab: solid brand teal (#77ACA2) plate around icon + label words;
 * white label text. Glyph assets are plate-free — CSS draws the rectangle.
 */
.bottom-bar--labeled .bottom-bar__icon-btn--active,
.bottom-bar--labeled a.bottom-bar__icon-btn--active:link,
.bottom-bar--labeled a.bottom-bar__icon-btn--active:visited {
    background: var(--nav-active-bg, #77aca2) !important;
    color: var(--brand-white) !important;
    -webkit-text-fill-color: var(--brand-white) !important;
    font-weight: var(--font-weight-semibold);
    border-radius: 16px;
    border: none !important;
    opacity: 1 !important;
}

.bottom-bar--labeled .bottom-bar__icon-btn--active .bottom-bar__nav-icon {
    background: transparent;
    border-radius: 0;
}

.bottom-bar--labeled .bottom-bar__icon-btn--active .bottom-bar__nav-label,
.bottom-bar--labeled .bottom-bar__icon-btn--active .bottom-bar__nav-label--stacked {
    color: var(--brand-white) !important;
    -webkit-text-fill-color: var(--brand-white) !important;
    font-weight: 500;
}

:root[data-theme='dark'] .bottom-bar--labeled .bottom-bar__nav-item:not(.bottom-bar__icon-btn--active),
:root[data-theme='dark'] .bottom-bar--labeled a.bottom-bar__nav-item:link:not(.bottom-bar__icon-btn--active),
:root[data-theme='dark'] .bottom-bar--labeled a.bottom-bar__nav-item:visited:not(.bottom-bar__icon-btn--active),
:root[data-theme='dark'] .bottom-bar--labeled .bottom-bar__nav-item:hover:not(.bottom-bar__icon-btn--active),
:root[data-theme='light'] .bottom-bar--labeled .bottom-bar__nav-item:not(.bottom-bar__icon-btn--active),
:root[data-theme='light'] .bottom-bar--labeled a.bottom-bar__nav-item:link:not(.bottom-bar__icon-btn--active),
:root[data-theme='light'] .bottom-bar--labeled a.bottom-bar__nav-item:visited:not(.bottom-bar__icon-btn--active),
:root[data-theme='light'] .bottom-bar--labeled .bottom-bar__nav-item:hover:not(.bottom-bar__icon-btn--active) {
    color: #000000 !important;
    -webkit-text-fill-color: #000000;
    background: #ffffff !important;
    border: none !important;
    opacity: 1 !important;
}

:root[data-theme='light'] .bottom-bar--labeled .bottom-bar__icon-btn--active,
:root[data-theme='light'] .bottom-bar--labeled a.bottom-bar__icon-btn--active:link,
:root[data-theme='light'] .bottom-bar--labeled a.bottom-bar__icon-btn--active:visited,
:root[data-theme='dark'] .bottom-bar--labeled .bottom-bar__icon-btn--active,
:root[data-theme='dark'] .bottom-bar--labeled a.bottom-bar__icon-btn--active:link,
:root[data-theme='dark'] .bottom-bar--labeled a.bottom-bar__icon-btn--active:visited {
    color: var(--brand-white) !important;
    -webkit-text-fill-color: var(--brand-white) !important;
    background: var(--nav-active-bg, #77aca2) !important;
    border: none !important;
    opacity: 1 !important;
}

/* Directory no longer uses the CSS-mask noun icon when brand imgs are present */
.bottom-bar--labeled .bottom-bar__nav-icon:has(.bottom-bar__brand-icon) .bottom-bar__directory-icon {
    display: none;
}

/* --------------------------------------------------------------------------
   Listing type hierarchy
   -------------------------------------------------------------------------- */

.event-card-v2__title,
.event-card__title,
.event-card-v2__venue-label,
.event-card-v2__promoter-label,
.giggly-profile-feed__stat-label,
.giggly-profile-feed__tab,
.giggly-profile-feed__username,
.event-card-v2__pill--status,
.event-card-v2__pill--ticket {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
}

.event-card-v2__date,
.event-card-v2__meta,
.event-card-v2__venue-name,
.event-card-v2__promoter-name,
.event-card__date,
.event-card__location {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-regular);
}

/* Category pills on listings — brand artwork style (capsule, solid fill, white type) */
.event-card-v2__pill--category,
.view-event-page__meta-row .event-card-v2__pill--category {
    opacity: 1 !important;
    color: var(--brand-white) !important;
    -webkit-text-fill-color: var(--brand-white) !important;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    border-radius: 999px;
    border: none !important;
    box-shadow: none !important;
    letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   Tickets subnav — separate brand pills (match Events filter tabs)
   -------------------------------------------------------------------------- */

.ticket-wallet-app > .ticket-wallet-tabs,
html.giggly-desktop-nav-active #ticketWalletApp .ticket-wallet-tabs,
html.giggly-desktop-nav-active .giggly-desktop-subnav-slot .ticket-wallet-tabs,
html.giggly-desktop-nav-active .giggly-desktop-subnav-mount.ticket-wallet-tabs,
html.giggly-desktop-nav-active .ticket-wallet-tabs.ticket-wallet-tabs--desktop-pill {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: var(--giggly-chrome-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 4px 16px 8px 20px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ticket-wallet-app > .ticket-wallet-tabs::-webkit-scrollbar,
html.giggly-desktop-nav-active .ticket-wallet-tabs::-webkit-scrollbar {
    display: none;
}

@media (max-width: 991px) {
    .ticket-wallet-app > .ticket-wallet-tabs:not(.giggly-desktop-subnav-mount) {
        width: 100% !important;
        max-width: var(--giggly-chrome-max-width) !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 4px 16px 8px 20px !important;
        border-radius: 0 !important;
        background: transparent !important;
        gap: 8px !important;
        justify-content: flex-start !important;
    }
}

.ticket-wallet-tabs .ticket-wallet-tabs__btn,
html.giggly-desktop-nav-active .ticket-wallet-tabs .ticket-wallet-tabs__btn {
    flex: 0 0 auto !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    background: #e5e7eb !important;
    color: #4b5563 !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: 1.2 !important;
    padding: 7px 11px !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}

.ticket-wallet-tabs .ticket-wallet-tabs__btn--active,
html.giggly-desktop-nav-active .ticket-wallet-tabs .ticket-wallet-tabs__btn--active {
    background: var(--pill-bg) !important;
    color: var(--pill-fg) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.ticket-wallet-tabs .ticket-wallet-tabs__btn--muted,
html.giggly-desktop-nav-active .ticket-wallet-tabs .ticket-wallet-tabs__btn--muted {
    background: #e5e7eb !important;
    color: #4b5563 !important;
}

:root[data-theme='dark'] .ticket-wallet-tabs .ticket-wallet-tabs__btn,
:root[data-theme='dark'] html.giggly-desktop-nav-active .ticket-wallet-tabs .ticket-wallet-tabs__btn {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #d1d5db !important;
}

:root[data-theme='dark'] .ticket-wallet-tabs .ticket-wallet-tabs__btn--active,
:root[data-theme='dark'] html.giggly-desktop-nav-active .ticket-wallet-tabs .ticket-wallet-tabs__btn--active {
    background: var(--pill-bg) !important;
    color: var(--pill-fg) !important;
}