/* AIRDROP public-page system layer.
   Loaded after legacy public.css so every public route shares the Discover app's
   Google Sans typography, Spotify-inspired surfaces and compact interaction rules. */

body.sp {
  font-family: var(--sp-font);
  background: var(--sp-black);
  color: var(--sp-text);
}

/* Legacy templates carried explicit Birzia declarations. The public app shell
   intentionally owns typography now, including nested cards, forms and dialogs. */
body.sp :where(h1,h2,h3,h4,h5,h6,p,a,button,input,select,textarea,label,small,strong,span,li,summary,figcaption) {
  font-family: var(--sp-font) !important;
}

body.sp .sp-content {
  min-height: 100%;
  background: var(--sp-bg);
}

/* The Discover shell owns mobile navigation. Suppress legacy fixed controls
   if an older template happens to render them as well. */
body.sp .mobile-bottom-nav,
body.sp .airdrop-wa-fab { display:none !important; }

/* Login retains its image-led glass treatment instead of inheriting the
   generic Discover surface and input fill. */
body.sp .login-page { background:transparent; }
body.sp .login-card {
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  backdrop-filter:blur(40px) saturate(180%);
  -webkit-backdrop-filter:blur(40px) saturate(180%);
}
body.sp .login-input {
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
body.sp .login-input input {
  background:transparent !important;
  color:#fff !important;
}

body.sp .container { width: min(100% - 48px, 1440px); }
body.sp :where(.listing-page,.holiday-page,.mag-main,.mag-article-main,.search-results-main,.profile-page,.login-page,.producer-page,.artist-main,.wk-shell,.ev-main,.amn) {
  background: var(--sp-bg);
  color: var(--sp-text);
}

/* Shared application surfaces - compact, dark and without raw decorative borders. */
body.sp :where(.glass,.listing-hero,.hol-events,.mag-card,.mag-hero,.sres-card,.profile-hero__card,.login-card,.producer-card,.wk-link,.ev-section,.club-card,.wcard,.hol-card) {
  background-color: var(--sp-elev-1);
  border-color: transparent;
  box-shadow: none;
}
body.sp :where(.mag-card,.sres-card,.producer-card,.wk-link,.club-card,.wcard,.hol-card) {
  border-radius: var(--sp-r-card);
  overflow: hidden;
  transition: background-color .18s ease, transform .18s ease;
}
body.sp :where(.mag-card,.sres-card,.producer-card,.wk-link,.club-card,.wcard,.hol-card):hover {
  background-color: var(--sp-card-2);
  transform: translateY(-2px);
}

body.sp :where(.listing-hero,.mag-mast,.sres-hero,.profile-hero,.producer-page__head,.wk-hero) {
  background-color: var(--sp-bg);
  border: 0;
}
body.sp :where(.listing-hero__title,.hol-hero__title,.mag-mast__title,.mag-article__title,.sres-hero__title,.profile-hero__name,.producer-page__title,.artist-hero__name,.ev-hero__title,.club-hero__title) {
  letter-spacing: -.035em;
  line-height: 1.04;
}
body.sp :where(.listing-hero__sub,.hol-hero__desc,.mag-mast__lede,.mag-article__excerpt,.sres-hero__sub,.profile-hero__bio,.producer-page__sub,.artist-hero__desc,.ev-hero__desc,.club-hero__tagline) {
  color: var(--sp-text-2);
}

/* Keep colour intentional: gradients belong to a primary action or a piece of
   artwork, never to routine page and section headings. */
body.sp :where(.gradient-text,.mag-mast__title-accent,.calx__monthlabel) {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor;
  color: var(--sp-text) !important;
}

/* Public content is separated by surface and spacing, not outlines. This also
   catches legacy cards that still declare a visible one-pixel border. */
body.sp .sp-content :where(.glass,.listing-hero,.hol-events,.mag-card,.mag-hero,.sres-card,.profile-hero__card,.login-card,.producer-card,.wk-link,.ev-section,.club-card,.wcard,.hol-card,.ev-hero,.hol-hero,.artist-hero,.club-hero,.calx__day,.calx__monthnav,.calx__cta,.mag-chip,.evfilter,.hol-filter__chip,.profile-chip,.wk-tab,.pagination__link,.sres-filter,.club-hero__chip,.ev-badge,.hol-hero__chip) {
  border: 0 !important;
}
body.sp .sp-content :where(.mag-card,.sres-card,.producer-card,.wk-link,.club-card,.wcard,.hol-card) {
  box-shadow: none !important;
}

/* Club pages: the upcoming-events list is a single, intentional surface.
   This prevents its slightly lighter background from reading as an unpadded
   rectangular strip behind the cards. */
body.sp.club-page #club-events {
  margin-top: 8px;
  padding: 28px;
  border-radius: var(--sp-r-card);
  background: var(--sp-elev-1);
  overflow: hidden;
}
body.sp.club-page #club-events .ev-section__title { margin-bottom: 18px; }

/* Keep the club discount prompt compact: the action stays beside the copy
   instead of becoming a separate, tall row on small screens. */
body.sp.club-page #club-events .ev-discount-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(100deg, rgba(113,82,19,.72), rgba(69,50,21,.7));
  box-shadow: none;
}
body.sp.club-page #club-events .ev-discount-banner__icon { font-size: 1.35rem; }
body.sp.club-page #club-events .ev-discount-banner__body { min-width: 0; }
body.sp.club-page #club-events .ev-discount-banner__body strong {
  font-size: .9rem;
  white-space: nowrap;
}
body.sp.club-page #club-events .ev-discount-banner__sub {
  display: block;
  overflow: hidden;
  margin-top: 1px;
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.sp.club-page #club-events .ev-discount-banner__tap { display: none; }
body.sp.club-page #club-events .ev-discount-banner__cta {
  min-height: 34px;
  margin: 0;
  padding-inline: 13px;
  white-space: nowrap;
}

/* Every informational piece on a club page uses the same quiet card surface.
   The legacy template mixed outlined panels with bare rectangular sections,
   which made the page feel like several unrelated designs. */
body.sp.club-page .ev-content > .ev-section {
  margin: 0 0 18px;
  padding: 28px;
  border-radius: var(--sp-r-card);
  background: var(--sp-elev-1);
  overflow: hidden;
}
body.sp.club-page .club-side-card,
body.sp.club-page .wa-cta {
  padding: 20px;
  border: 0;
  border-radius: var(--sp-r-card);
  background: var(--sp-elev-1);
  box-shadow: none;
}
body.sp.club-page .club-side-card:hover,
body.sp.club-page .wa-cta:hover { border: 0; }

/* The collapse needs to fade into its own surface, rather than the old
   near-black page background that created a visible seam under the text. */
body.sp.club-page .club-about-collapse__fade {
  background: linear-gradient(180deg, rgba(24,24,24,0) 0%, var(--sp-elev-1) 92%);
}

/* Reuse the current AIRDROP action gradient for all section-heading icons. */
body.sp.club-page .club-side-card__ico,
body.sp.club-page .wa-cta__icon {
  background: var(--sp-grad);
  color: #fff;
}
body.sp.club-page .wa-cta__btn {
  border: 0;
  background: var(--sp-grad);
  color: #fff;
}

/* Club actions inherit the current, restrained action treatment. The table
   reservation action is intentionally lighter than a primary conversion. */
body.sp.club-page .club-side-btn--primary {
  border: 0;
  background: var(--sp-grad);
  color: #fff;
  box-shadow: none;
}
body.sp.club-page .club-side-btn--primary:hover {
  border: 0;
  background: var(--sp-grad);
  color: #fff;
}
body.sp.club-page .club-side-card--tables .club-side-btn--primary {
  background: var(--sp-elev-2);
  color: var(--sp-text);
}
body.sp.club-page .club-side-card--tables .club-side-btn--primary:hover {
  background: var(--sp-card-2);
}

/* Keep the map dialog inside the visual viewport, including on mobile Safari. */
body.sp.club-page .club-modal--map { padding: 16px; box-sizing: border-box; }
body.sp.club-page .club-modal__dialog--map {
  width: min(95vw, 1000px);
  height: auto;
  max-height: calc(100dvh - 32px);
  box-sizing: border-box;
}
body.sp.club-page .club-modal__map-wrap {
  height: min(62dvh, calc(100dvh - 180px));
  min-height: 0;
}

/* FAQ accordion cards are surfaces, not outlined controls. */
body.sp.club-page .faq-section { border-top: 0; }
body.sp.club-page .faq-item,
body.sp.club-page .faq-item:hover { border: 0; }
body.sp.club-page .faq-list {
  width: 100%;
  max-width: none;
}

/* Keep the review action visually separated from the explanatory copy. */
body.sp.club-page .club-side-card--reviews .club-side-actions { margin-top: 6px; }

/* The title rule needs a little air before its divider. */
body.sp.club-page #club-events .ev-section__title { padding-bottom: 18px; }

/* Give the club description room to breathe after its rule. */
body.sp.club-page .ev-content > .ev-section:not(#club-events) .ev-section__title {
  margin-bottom: 26px;
}

/* The date picker is part of the home page, so selected/available dates use
   restrained surface changes rather than another colourful mini-gradient. */
body.sp .calx__day.has-events { background: var(--sp-elev-2) !important; }
body.sp .calx__day.is-selected { background: rgba(184,102,205,.24) !important; box-shadow: none !important; }
body.sp .calx__day-dot i { background: var(--sp-accent) !important; box-shadow: none !important; }

/* Club-directory editorial block: this used the old pink/blue marketing
   treatment outside the generic heading selectors above. Keep it quiet and
   let the actual club imagery be the only source of colour. */
body.sp .about-section {
  background: none !important;
}
body.sp .about-section__bg-text {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor;
  color: var(--sp-text-3) !important;
  opacity: .035;
}
body.sp .about__title,
body.sp .about__card-title {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor;
  color: var(--sp-text) !important;
}
body.sp .about__title {
  font-size: clamp(28px, calc(5.5vw - 10px), 58px);
}
body.sp .about__card::before { display: none; }
body.sp .about__card:hover { box-shadow: none; }
body.sp .about__card-icon {
  background: var(--sp-elev-2) !important;
  border: 0 !important;
}
body.sp .about__card:hover .about__card-icon { transform: none; }

/* Static information pages (privacy, accessibility, about and terms): keep
   these utility pages calm and legible, without the legacy campaign gradient. */
body.sp .static-page { min-height:70vh; background:var(--sp-bg); }
body.sp .static-page__hero {
  padding:52px 0 38px;
  background:var(--sp-elev-1);
  border-bottom:1px solid rgba(255,255,255,.06);
}
body.sp .static-page__hero::before {
  background:radial-gradient(ellipse 70% 85% at 50% 0%,rgba(255,255,255,.045),transparent 72%);
}
body.sp .static-page__hero::after,
body.sp .static-page__hero-glow { display:none; }
body.sp .static-page__hero-inner { gap:16px; }
body.sp .static-page__back { color:var(--sp-text-2); }
body.sp .static-page__back:hover { color:var(--sp-text); }
body.sp .static-page__title {
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  -webkit-text-fill-color:currentColor;
  color:var(--sp-text) !important;
  font-size:clamp(30px,4vw,48px);
  letter-spacing:-.035em;
}
body.sp .static-page__body { padding:56px 0 88px; }
body.sp .static-page__content { padding-top:0; }
body.sp .static-page__content a { color:var(--sp-text); }
body.sp .static-page__content a:hover { color:var(--sp-text-2); }

@media (max-width:600px) {
  body.sp .static-page__hero { padding:36px 0 28px; }
  body.sp .static-page__body { padding:36px 0 64px; }
}

/* Clubs directory: cards and their compact metadata stay surface-led, with no
   outlines around the card, city/count tags, or the page's filter controls. */
body.sp .clubs-grid .club-card,
body.sp .clubs-grid .club-card__city,
body.sp .clubs-grid .club-card__ev-count,
body.sp #clubsFilters .evfilters__bar,
body.sp #clubsFilters .evfilter__btn,
body.sp #clubsFilters .evfilter__x,
body.sp #clubsFilters .evfilter__pop,
body.sp #clubsFilters .evfilter__pop-search,
body.sp #clubsFilters .evfilter__pop-h {
  border: 0 !important;
  box-shadow: none !important;
}
body.sp .clubs-grid .club-card__city,
body.sp .clubs-grid .club-card__ev-count {
  color: var(--sp-text-2);
  background: #292929;
}

/* Pills and controls follow the same geometry as the main Discover page. */
body.sp :where(.btn,.evfilter,.hol-filter__chip,.mag-chip,.profile-chip,.wk-tab,.pagination__link,.sres-filter,.genre-hero-wa,.club-hero__chip,.ev-badge,.hol-hero__chip) {
  border-radius: var(--sp-pill);
  font-weight: 700;
}
body.sp :where(.btn--primary,.login-submit,.producer-card__cta,.hol-empty__cta,.sres-empty__cta) {
  background: var(--sp-grad);
  color: #fff;
  border: 0;
  box-shadow: none;
}
body.sp :where(.btn--ghost,.btn--glass,.evfilter,.hol-filter__chip,.mag-chip,.profile-chip,.wk-tab,.pagination__link,.sres-filter) {
  background: var(--sp-elev-2);
  color: var(--sp-text);
  border-color: transparent;
}
body.sp :where(.btn--ghost,.btn--glass,.evfilter,.hol-filter__chip,.mag-chip,.profile-chip,.wk-tab,.pagination__link,.sres-filter):hover,
body.sp :where(.evfilter.is-active,.hol-filter__chip.is-active,.wk-tab.is-active,.pagination__link--current,.sres-filter.is-active) {
  background: var(--sp-card-2);
  color: var(--sp-text);
}

body.sp :where(input,select,textarea,.evfilters__bar,.sres-form__bar,.login-input,.amn-input) {
  background-color: var(--sp-elev-2);
  color: var(--sp-text);
  border-color: transparent;
  box-shadow: none;
}
body.sp :where(input,select,textarea):focus-visible {
  outline: 2px solid var(--sp-accent);
  outline-offset: 2px;
}

body.sp :where(.eyebrow,.mag-eyebrow,.hol-hero__eyebrow,.profile-hero__eyebrow,.producer-page__eyebrow,.ev-badge,.wcard__day,.hol-card__when,.sres-card__meta) {
  color: var(--sp-text-2);
  font-size: 13px;
  font-weight: 700;
}
body.sp :where(.section__sub,.listing-count,.mag-meta,.sres-card__sub,.wcard__body span,.hol-card__place) { color: var(--sp-text-2); }

body.sp :where(.events-grid,.clubs-grid,.mag-grid,.sres-grid,.hol-grid) { gap: 16px; }
body.sp :where(.section,.listing-section,.mag-section,.hol-events,.ev-section,.profile-section) { padding-block: 28px 54px; }

/* Worldwide uses Discover's native stories and event cards. This grid only
   governs the listing layout, so both screens stay on the same component skin. */
body.sp .listing-page--worldwide .sp-worldwide__cities {
  padding: 10px 4px 18px;
}
body.sp .listing-page--worldwide .sp-worldwide__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
body.sp .listing-page--worldwide .sp-worldwide__grid .sp-card { min-width: 0; }
@media (max-width: 1100px) {
  body.sp .listing-page--worldwide .sp-worldwide__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
body.sp .listing-page--worldwide .listing-hero--worldwide {
  margin-top: 6px;
  border-radius: 16px;
  overflow: hidden;
}

/* Search is an app utility: compact neutral surfaces, with the AIRDROP accent
   reserved for the active filter and submit action. */
body.sp .sres-hero::before { display: none; }
body.sp .sres-hero__title {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--sp-text);
}
body.sp .sres-form__bar {
  background: var(--sp-elev-2);
  border: 0;
  box-shadow: none;
  padding: 6px 8px 6px 18px;
}
body.sp .sres-form__bar:focus-within {
  border: 0;
  box-shadow: 0 0 0 2px var(--sp-accent);
}
body.sp .sres-form__bar input,
body.sp .sres-form__bar input:focus,
body.sp .sres-form__bar input:focus-visible {
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  font-weight: 400;
}
body.sp .sres-form__bar button {
  border-radius: var(--sp-pill);
  background: var(--sp-grad);
  letter-spacing: .04em;
}
body.sp .sres-filter {
  background: var(--sp-elev-2);
  border: 0;
  color: var(--sp-text-2);
}
body.sp .sres-filter:hover { background: var(--sp-card-2); border: 0; color: var(--sp-text); }
body.sp .sres-filter.is-active { background: var(--sp-grad); border: 0; box-shadow: none; color: #fff; }
body.sp .sres-group__count { background: var(--sp-elev-2); border: 0; color: var(--sp-text-2); }
body.sp .sres-card { background: var(--sp-elev-1); border: 0; border-radius: var(--sp-r-card); }
body.sp .sres-card:hover { background: var(--sp-card-2); border: 0; }
body.sp .sres-card__media { background: #282828; }
body.sp .sres-card__placeholder { background: #282828; }
body.sp .sres-card__meta { color: var(--sp-text-2); }
body.sp .sres-more-btn { background: var(--sp-elev-2); border: 0; color: var(--sp-text); }
body.sp .sres-more-btn:hover { background: var(--sp-card-2); }

@media (max-width: 767px) {
  body.sp .container { width: min(100% - 32px, 1440px); }
  /* The home route already uses its full-width composition. Other routes sit
     inside the shared app gutter as well, so a second container gutter made
     their sections noticeably narrower on phones. */
  body.sp .sp-content > main[class] .container { width:100%; }
  body.sp :where(.section,.listing-section,.mag-section,.hol-events,.ev-section,.profile-section) { padding-block: 22px 38px; }
  body.sp .listing-page--worldwide .sp-worldwide__cities { padding: 8px 4px 14px; }
  body.sp .listing-page--worldwide .sp-worldwide__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body.sp :where(.listing-hero__title,.hol-hero__title,.mag-mast__title,.mag-article__title,.sres-hero__title,.profile-hero__name,.producer-page__title,.artist-hero__name,.ev-hero__title,.club-hero__title) { letter-spacing: -.025em; }

  /* The shared shell owns the single 16px phone gutter. Legacy area, genre
     and club templates each added another inner gutter, making those routes
     visibly narrower than Discover. Remove that second layer everywhere. */
  body.sp .sp-content > :where(.ev-hero,.club-hero,.artist-hero) {
    width:100%;
    margin-inline:0;
  }
  body.sp .sp-content > main[class] .ev-layout,
  body.sp .sp-content > main[class] .ev-related__inner {
    padding-inline:0;
  }

  body.sp.club-page #club-events {
    padding: 20px 12px 14px;
    border-radius: 16px;
  }
  body.sp.club-page #club-events .ev-section__title {
    margin-bottom: 14px;
    padding-inline: 2px;
    padding-bottom: 18px;
  }
  body.sp.club-page .ev-content > .ev-section {
    margin-bottom: 14px;
    padding: 20px 12px 16px;
    border-radius: 16px;
  }
  body.sp.club-page .ev-content > .ev-section:not(#club-events) {
    padding: 24px 20px 20px;
  }
  body.sp.club-page .ev-content > .ev-section:not(#club-events) .ev-section__title {
    margin-bottom: 26px;
  }
  body.sp.club-page .club-side-card,
  body.sp.club-page .wa-cta {
    padding: 18px 14px;
    border-radius: 16px;
  }
  body.sp.club-page .club-modal--map { padding: 12px; }
  body.sp.club-page .club-modal__dialog--map {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    padding: 12px;
    border-radius: 16px;
  }
  body.sp.club-page .club-modal__map-wrap {
    height: min(58dvh, calc(100dvh - 166px));
  }

  /* The login page begins below the mobile header; size it to the remaining
     visible area above the tab bar so the card is genuinely centred. */
  body.sp .sp-content:has(.login-page) { padding:0 16px; }
  body.sp .login-page {
    min-height:calc(100svh - 118px - env(safe-area-inset-bottom));
    height:calc(100svh - 118px - env(safe-area-inset-bottom));
    padding:0 14px;
    box-sizing:border-box;
  }
}