/* Todoza brand lockup: crest + wordmark + "The Merchants' Club" tagline.
   Markup lives in templates/components/brand_lockup.html. Plain sans, not a
   display serif -- the header/footer chrome now matches the rest of the app. */

.brand-lockup {
  --brand-crest: #6e1423;
  --brand-ink: #1c130f;
  --brand-muted: #4a382f;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--brand-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.brand-lockup__crest {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--brand-crest);
  border-radius: 999px;
  color: var(--brand-crest);
  font-size: 16px;
}

.brand-lockup__text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.brand-lockup__name {
  font-size: 18px;
  letter-spacing: 0.08em;
}

.brand-lockup__tagline {
  color: var(--brand-muted);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Slim in-app top bar */
.brand-lockup--app {
  gap: 9px;
}

.brand-lockup--app .brand-lockup__crest {
  width: 28px;
  height: 28px;
  font-size: 13px;
}

.brand-lockup--app .brand-lockup__text {
  gap: 4px;
}

.brand-lockup--app .brand-lockup__name {
  font-size: 15px;
}

.brand-lockup--app .brand-lockup__tagline {
  font-size: 7px;
}

/* Signed-in header: the changelog link with the version replaces the tagline. */
.brand-lockup--app .brand-lockup__version {
  color: #6b7280;
  font-size: 9px;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.06em;
  text-transform: none;
}

.brand-lockup--app .brand-lockup__version:hover,
.brand-lockup--app .brand-lockup__version:focus-visible {
  color: #4b5563;
  text-decoration: underline;
}

/* Centered brand above the auth card */
.brand-lockup--auth {
  gap: 13px;
}

.brand-lockup--auth .brand-lockup__crest {
  width: 44px;
  height: 44px;
  font-size: 20px;
}

.brand-lockup--auth .brand-lockup__name {
  font-size: 22px;
}

.brand-lockup--auth .brand-lockup__tagline {
  font-size: 9px;
}

@media (max-width: 640px) {
  .brand-lockup--app .brand-lockup__tagline {
    display: none;
  }
}

/* base.css moves the version to the footer on mobile (<=767px). */
@media (max-width: 767px) {
  .brand-lockup--app .brand-lockup__version {
    display: none;
  }
}

@media (max-width: 520px) {
  .brand-lockup:not(.brand-lockup--app):not(.brand-lockup--auth) .brand-lockup__crest {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  .brand-lockup:not(.brand-lockup--app):not(.brand-lockup--auth) .brand-lockup__name {
    font-size: 16px;
  }

  .brand-lockup:not(.brand-lockup--app):not(.brand-lockup--auth) .brand-lockup__tagline {
    font-size: 7.5px;
  }
}

/* Name/coins wrapper: transparent to layout unless the club header restyles it. */
.user-meta__identity {
  display: contents;
}

/* ------------------------------------------------------------------
   Club header: a full-bleed navy band, borderless controls, gold dots
   between groups. Colours, borders and type only -- control sizes stay
   with base.css. Scoped to .top-bar--club so the holiday header is left
   alone. The --club-bleed-* offsets are the body padding, measured by the
   small script in base.html, so the band can run edge to edge whatever
   mode the page is in; without them it degrades to an inset band.
   ------------------------------------------------------------------ */

.top-bar--club {
  --club-navy: #16233f;
  --club-cream: #f5ead9;
  --club-line: rgba(255, 255, 255, 0.2);
  --club-accent: #c4b5fd;
  --club-hover: rgba(245, 234, 217, 0.13);
  margin-top: calc(-1 * var(--club-bleed-t, 0px));
  margin-right: calc(-1 * var(--club-bleed-r, 0px));
  margin-left: calc(-1 * var(--club-bleed-l, 0px));
  padding: 7px var(--club-bleed-r, 12px) 7px var(--club-bleed-l, 12px);
  background: var(--club-navy);
  box-shadow: inset 0 -1px 0 var(--club-line);
}

/* Lockup, light-on-navy */
.top-bar--club .brand-lockup {
  --brand-crest: var(--club-accent);
  --brand-ink: var(--club-cream);
  --brand-muted: var(--club-accent);
}

.top-bar--club .brand-lockup--app .brand-lockup__version {
  color: rgba(196, 181, 253, 0.85);
}

.top-bar--club .brand-lockup--app .brand-lockup__version:hover,
.top-bar--club .brand-lockup--app .brand-lockup__version:focus-visible {
  color: var(--club-cream);
}

/* Controls: no frames, only a soft wash on hover */
.top-bar--club .header-btn,
.top-bar--club .board-switcher-toggle,
.top-bar--club .team-menu-button,
.top-bar--club .notification-bell,
.top-bar--club .header-search__toggle,
.top-bar--club .header-menu-toggle {
  background: transparent;
  border: 0;
  color: var(--club-cream);
  box-shadow: none;
}

.top-bar--club .header-btn:hover,
.top-bar--club .header-btn:focus-visible,
.top-bar--club .board-switcher-toggle:hover,
.top-bar--club .board-switcher-toggle:focus,
.top-bar--club .team-menu-button:hover,
.top-bar--club .team-menu-button:focus-visible,
.top-bar--club .notification-bell:hover,
.top-bar--club .header-search__toggle:hover,
.top-bar--club .header-search__toggle:focus-visible,
.top-bar--club .header-menu-toggle:hover,
.top-bar--club .header-menu-toggle:focus-visible {
  background: var(--club-hover);
  color: var(--club-cream);
  box-shadow: none;
}

.top-bar--club .team-menu-button:visited {
  color: var(--club-cream);
}

.top-bar--club .notification-bell .header-icon-svg,
.top-bar--club .header-search__toggle .header-icon-svg,
.top-bar--club .header-menu-toggle .header-icon-svg {
  color: var(--club-cream);
  stroke: var(--club-cream);
}

/* Board / company selectors: small-caps names */
.top-bar--club .board-switcher-toggle .header-btn__label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Module shortcuts (A / S): unstyled here -- the original filled badges from base.css show through. */

.top-bar--club .notification-count {
  background: #c0334a;
  border-color: var(--club-navy);
}

.top-bar--club .user-avatar {
  border: 1.5px solid var(--club-accent);
}

.top-bar--club .user-status-indicator {
  border-color: var(--club-navy);
  box-shadow: none;
}

/* Name over coins, like the logo over its version. The wrapper is inert
   (display: contents) outside the club header. */
.top-bar--club .user-meta__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-left: 2px;
  line-height: 1;
}

.top-bar--club .user-name {
  color: var(--club-cream);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

.top-bar--club #coinBalance {
  gap: 4px;
  color: var(--club-accent);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-variant-numeric: lining-nums;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
}

.top-bar--club .header-money-icon {
  width: 10px;
  height: 10px;
  color: var(--club-accent);
}

.top-bar--club .header-money-icon text {
  fill: var(--club-navy);
}

/* Short gold bars between groups: [A S] | board | company | [icons]  [user].
   Each bar sits centred in a 20px gutter (2px bar -> offset -11px). */
.top-bar--club .top-actions {
  gap: 6px 20px;
}

.top-bar--club .dropdown-menu-container {
  gap: 20px;
}

/* A and S are one group: pull S back up against A. */
.top-bar--club .top-actions > .seo-nav-btn {
  margin-left: -12px;
}

.top-bar--club .user-avatar-wrapper {
  margin-left: 10px;
}

.top-bar--club .top-actions > .header-nav-item,
.top-bar--club .user-meta {
  position: relative;
}

.top-bar--club .top-actions > .header-nav-item::before,
.top-bar--club .user-meta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -11px;
  width: 2px;
  height: 16px;
  border-radius: 1px;
  background: var(--club-line);
  transform: translateY(-50%);
  pointer-events: none;
}

/* base.css hides the module/selector cluster and the name/coins on mobile:
   drop the bar that faced them too. */
@media (max-width: 767px) {
  .top-bar--club .user-meta::before,
  .top-bar--club .user-meta__identity {
    display: none;
  }
}

/* ------------------------------------------------------------------
   Public-page header (landings, guides, FAQ, contact): the same navy band
   as the app header. The band is a pseudo-element whose box-shadow bleeds
   sideways to the screen edges (clipped vertically), so the header keeps
   its container width, its mobile dropdown is not clipped, and no
   horizontal scrollbar appears.
   ------------------------------------------------------------------ */

.landing.landing {
  padding-top: 0;
  padding-bottom: 0;
}

.landing .landing__header {
  --club-navy: #16233f;
  --club-cream: #f5ead9;
  --club-accent: #c4b5fd;
  position: relative;
  isolation: isolate;
  padding: 8px 0;
  margin-bottom: 20px;
}

.landing .landing__header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--club-navy);
  box-shadow: 0 0 0 100vmax var(--club-navy);
  clip-path: inset(0 -100vmax);
}

/* Thin neutral rule along the bottom edge, bled out the same way. */
.landing .landing__header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 100vmax rgba(255, 255, 255, 0.2);
  clip-path: inset(0 -100vmax);
}

.landing .landing__header .brand-lockup {
  --brand-crest: var(--club-accent);
  --brand-ink: var(--club-cream);
  --brand-muted: var(--club-accent);
}

.landing .landing__nav {
  gap: 26px;
  color: var(--club-cream);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
}

.landing .landing__nav a {
  position: relative;
  color: var(--club-cream);
}

.landing .landing__nav a:hover,
.landing .landing__nav a:focus-visible {
  color: var(--club-accent);
}

/* Short neutral bars between the links (not before the call-to-action) */
.landing .landing__nav a + a:not(.landing__register)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -14px;
  width: 2px;
  height: 14px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-50%);
  pointer-events: none;
}

.landing .landing__nav .landing__register {
  min-height: 32px;
  padding: 0 14px;
  /* Rounded in proportion to the button, like the big ones (.btn 12px on 44px, the demo CTA
     14px on ~46px): ~10px on a 32px-high button. 14px here made it a near-pill, 3px a square.
     This rule is more specific than landing.css's .landing__register, so a radius set only
     there never showed -- keep the two equal (tests/test_landing_register_button_radius.py). */
  border-radius: 10px;
  background: #7c3aed;
  color: #fff;
  box-shadow: none;
}

.landing .landing__nav .landing__register:hover,
.landing .landing__nav .landing__register:focus-visible {
  background: #6d28d9;
  color: #fff !important;
  box-shadow: none;
}

.landing .landing__nav-toggle span {
  background: var(--club-cream);
}

.landing .landing__nav-toggle:hover span,
.landing .landing__nav-toggle:focus-visible span {
  background: var(--club-accent);
}

.landing .landing__nav-toggle:focus-visible {
  outline-color: var(--club-accent);
}

/* Language switcher: a plain-text select, not a native grey pill. Shared by the
   /de /fr /it /es URL-prefix switcher (pages/landing.html, .landing__lang-select
   alone) and the session-cookie switcher (pages/welcome.html, wrapped in
   form.landing__lang-form -- display:contents so the form adds no box of its own). */
.landing .landing__lang-form {
  display: contents;
}

.landing .landing__lang-select {
  appearance: none;
  -webkit-appearance: none;
  margin-left: 4px;
  padding: 5px 20px 5px 9px;
  border: 1px solid rgba(196, 181, 253, 0.5);
  border-radius: 10px;
  background: transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c4b5fd' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 8px center;
  background-size: 8px 5px;
  color: var(--club-accent);
  font: inherit;
  cursor: pointer;
}

.landing .landing__lang-select:hover,
.landing .landing__lang-select:focus-visible {
  border-color: var(--club-accent);
  color: var(--club-cream);
}

.landing .landing__lang-select option {
  color: #1c130f;
  background: #f5ead9;
}

/* Top strip (guides, FAQ, SEO pages): pinned to the top of the screen but only revealed
   once the visitor has scrolled past the header (static/js/landing_nav.js toggles
   .is-visible); at the top of the page it is out of sight and out of the layout. */
.landing__top {
  display: contents;
}

html:has(.landing__topstrip) {
  scroll-padding-top: 44px;
}

.landing__topstrip {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 7px 40px;
  background: #16233f;
  transform: translateY(-101%);
  visibility: hidden;
  transition: transform 0.22s ease, visibility 0s linear 0.22s;
  color: #cbd2e0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.landing__topstrip.is-visible {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

.landing__topstrip > span,
.landing__topstrip > a {
  position: relative;
  padding: 0 16px;
}

.landing__topstrip > a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 2px;
  height: 11px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.3);
  opacity: 0.75;
  transform: translate(-1px, -50%);
}

.landing__topstrip a {
  color: #f5ead9;
  text-decoration: none;
}

.landing__topstrip-close {
  position: absolute;
  top: 50%;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #cbd2e0;
  cursor: pointer;
  transform: translateY(-50%);
}

.landing__topstrip-close:hover,
.landing__topstrip-close:focus-visible {
  background: rgba(245, 234, 217, 0.14);
  color: #f5ead9;
}

.topstrip-closed .landing__topstrip {
  display: none;
}

@media (max-width: 640px) {
  /* a finger-sized target: the strip is only ~27px tall, so it overhangs a little */
  .landing__topstrip-close {
    width: 34px;
    height: 34px;
    right: 2px;
  }

  .landing__topstrip {
    padding-right: 34px;
    padding-left: 34px;
  }
}

.landing__topstrip a:hover,
.landing__topstrip a:focus-visible {
  color: #c4b5fd;
  text-decoration: underline;
}

@media (max-width: 640px) {
  /* Every public page collapses its nav into the hamburger on mobile (the
     button and #landing-nav come from components/brand_lockup.html +
     static/js/landing_nav.js). The dropdown stays a white panel with dark
     serif links, whatever the navy of the bar. */
  .landing .landing__nav-toggle {
    display: inline-flex;
  }

  .landing #landing-nav {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: max-content;
    min-width: 190px;
    max-width: calc(100vw - 32px);
    gap: 2px;
    overflow: visible;
    padding: 8px;
    white-space: normal;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(30, 37, 53, 0.22);
  }

  .landing #landing-nav.is-open {
    display: flex;
  }

  .landing #landing-nav a {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 6px;
    color: #302936;
    font-size: 12px;
  }

  .landing #landing-nav a::before {
    display: none;
  }

  .landing #landing-nav a:hover,
  .landing #landing-nav a:focus-visible {
    background: #f5ead9;
    color: #1c130f;
  }

  .landing #landing-nav .landing__register,
  .landing #landing-nav .landing__register:hover,
  .landing #landing-nav .landing__register:focus-visible {
    justify-content: flex-start;
    margin-top: 4px;
    background: #7c3aed;
    color: #fff !important;
  }

  /* The language select sits in the same white dropdown, so it swaps to dark-on-cream too. */
  .landing #landing-nav .landing__lang-select {
    align-self: stretch;
    margin-top: 4px;
    margin-left: 0;
    padding: 10px 22px 10px 12px;
    border-color: rgba(15, 23, 42, 0.14);
    background-color: #f5ead9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231c130f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    color: #1c130f;
  }

  .landing #landing-nav .landing__lang-select:hover,
  .landing #landing-nav .landing__lang-select:focus-visible {
    border-color: #7c3aed;
    color: #1c130f;
  }
}

/* ------------------------------------------------------------------
   Site footer (components/site_footer.html): navy band, gold serif type,
   short gold bars between links. Runs to the screen edges and down to the
   bottom of the page via the same shadow bleed, whatever container it sits
   in (landing, auth card page, policy page, the signed-in app).
   ------------------------------------------------------------------ */

.club-footer {
  --club-navy: #16233f;
  --club-cream: #f5ead9;
  --club-accent: #c4b5fd;
  --club-line: rgba(255, 255, 255, 0.22);
  margin-top: 44px;
  /* In the app the footer sits inside the body padding; the script in
     base.html reports it as --club-bleed-b so the footer can end flush
     with the page bottom instead of adding that padding as empty navy. */
  margin-bottom: calc(-1 * var(--club-bleed-b, 0px));
  padding: 42px 24px 18px;
  background: var(--club-navy);
  box-shadow: 0 0 0 100vmax var(--club-navy);
  clip-path: inset(-1px -100vmax -100vmax);
  color: var(--club-accent);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-variant-numeric: lining-nums;
  font-weight: 600;
  text-align: left;
}

.club-footer__inner {
  max-width: 1180px;
  margin: 0 auto;
}

.club-footer__main {
  display: grid;
  grid-template-columns: minmax(250px, 1.7fr) repeat(3, minmax(140px, 1fr));
  gap: 36px;
}

.club-footer__contact { max-width: 310px; }

.club-footer__identity { align-items: center; display: flex; gap: 10px; }

.club-footer__crest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--club-accent);
  border-radius: 999px;
  color: var(--club-accent);
  font-size: 12px;
  line-height: 1;
}

.club-footer__kicker {
  color: var(--club-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin: 0;
  line-height: 1.1;
}

.club-footer__contact h2,
.club-footer__column h2 {
  color: var(--club-cream);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.2;
  margin: 0;
}

.club-footer__intro {
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  line-height: 1.5;
  margin: 16px 0 12px;
}

.club-footer__email {
  color: var(--club-cream);
  font-size: 12px;
  font-weight: 750;
}

.club-footer__company-detail {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  margin: 14px 0 0;
}

.club-footer__column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.club-footer__column a {
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  line-height: 1.35;
}

.club-footer__bottom {
  align-items: center;
  border-top: 1px solid var(--club-line);
  color: rgba(255, 255, 255, 0.52);
  display: flex;
  flex-wrap: wrap;
  font-size: 10px;
  gap: 8px 20px;
  letter-spacing: 0.02em;
  margin-top: 36px;
  padding-top: 16px;
}

.club-footer a {
  color: inherit;
  text-decoration: none;
}

.club-footer a:hover,
.club-footer a:focus-visible {
  color: var(--club-cream);
  text-decoration: underline;
}

/* Auth and policy pages pad their own bottom edge; the footer ends the page,
   so that padding would just be extra empty navy under the text. */
.auth-page,
.policy-page {
  padding-bottom: 0;
}

/* Groups the version link and language switcher in the footer bottom row. */
.club-footer__version-lang {
  display: flex;
  align-items: center;
  gap: 8px;
}

.club-footer__bottom .lang-switcher {
  margin: 0;
}

.club-footer__bottom .lang-select {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.02em;
  padding: 0;
}

.club-footer__bottom .lang-select:hover,
.club-footer__bottom .lang-select:focus-visible {
  color: var(--club-cream);
  outline: none;
}

.club-footer__version {
  display: none;
  font-size: 10px;
  letter-spacing: 0.06em;
}

@media (max-width: 767px) {
  .club-footer__version {
    display: inline;
  }

  .club-footer__bottom .lang-select {
    padding-right: 0;
    background-image: none;
  }
}

@media (max-width: 640px) {
  .club-footer {
    margin-top: 32px;
    padding: 28px 18px 14px;
  }

  .club-footer__main {
    gap: 24px;
    grid-template-columns: 1fr 1fr;
  }

  .club-footer__contact {
    grid-column: 1 / -1;
    max-width: 360px;
  }

  .club-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    margin-top: 28px;
  }
}

@media (max-width: 390px) {
  .club-footer__main {
    grid-template-columns: 1fr;
  }

  .club-footer__contact {
    grid-column: auto;
  }
}

/* ------------------------------------------------------------------
   Modals opened from the top strip (static/js/landing_modals.js).
   Literal colours on purpose: the dialogs live outside the page container,
   where the landing custom properties can't be relied on.
   ------------------------------------------------------------------ */

html.club-modal-open {
  overflow: hidden;
}

dialog.club-modal {
  width: min(1040px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1c130f;
  overflow: visible;
}

dialog.club-modal--enquire {
  width: min(520px, calc(100vw - 32px));
}

dialog.club-modal::backdrop {
  background: rgba(28, 19, 15, 0.62);
}

.club-modal__panel {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
  overflow: hidden;
  background: #f5ead9;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.club-modal__head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 20px;
  background: #16233f;
  border-bottom: 1px solid #7c3aed;
}

.club-modal__title {
  margin: 0;
  color: #c4b5fd;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.club-modal__close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #cbd2e0;
  cursor: pointer;
}

.club-modal__close:hover,
.club-modal__close:focus-visible {
  background: rgba(245, 234, 217, 0.14);
  color: #f5ead9;
}

.club-modal__body {
  flex: 1 1 auto;
  padding: 20px;
  overflow-y: auto;
}

.club-modal__status {
  margin: 0;
  padding: 24px 0;
  color: #4a382f;
  text-align: center;
}

.club-modal__pricing .price-toggle-wrap {
  margin-top: 0;
}

.club-enquire__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.club-enquire__intro {
  margin: 0 0 6px;
  color: #4a382f;
  font-size: 14px;
  line-height: 1.55;
}

.club-enquire__error {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid #c0334a;
  border-radius: 3px;
  background: #f7dfe3;
  color: #6e1423;
  font-size: 14px;
}

.club-enquire__field {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.club-enquire__field label {
  color: #1c130f;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.club-enquire__field input,
.club-enquire__field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 3px;
  background: #fffaf0;
  color: #1c130f;
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
}

.club-enquire__field textarea {
  min-height: 110px;
  resize: vertical;
}

.club-enquire__field input:focus,
.club-enquire__field textarea:focus {
  outline: 2px solid #16233f;
  outline-offset: 1px;
}

.club-enquire .cf-turnstile {
  margin-top: 12px;
}

.club-enquire__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.club-modal__cancel,
.club-modal__submit {
  min-height: 38px;
  padding: 0 18px;
  border-radius: 3px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.club-modal__cancel {
  border: 1px solid rgba(15, 23, 42, 0.18);
  background: transparent;
  color: #1c130f;
}

.club-modal__cancel:hover,
.club-modal__cancel:focus-visible {
  background: rgba(15, 23, 42, 0.06);
}

.club-modal__submit {
  border: 1px solid #7c3aed;
  background: #7c3aed;
  color: #fff;
}

.club-modal__submit:hover,
.club-modal__submit:focus-visible {
  background: #6d28d9;
}

.club-modal__submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

.club-enquire__note {
  margin: 12px 0 0;
  color: #6b5a50;
  font-size: 12px;
  line-height: 1.5;
}

.club-enquire__done {
  padding: 8px 0 4px;
  text-align: center;
}

.club-enquire__done h3 {
  margin: 0 0 6px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 20px;
}

.club-enquire__done p {
  margin: 0 0 16px;
  color: #4a382f;
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 640px) {
  dialog.club-modal,
  dialog.club-modal--enquire {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .club-modal__panel {
    max-height: calc(100vh - 16px);
  }

  .club-modal__body {
    padding: 14px;
  }
}