:root{
	/* === Hashtag98 brand tokens (single source of truth, doc §16.2) ===
	   Monochrome identity: dark #151515 surfaces + white text, pill buttons. */
	--brand-primary:        #151515;
	--brand-primary-hover:  #3a3a3a;
	--brand-primary-active: #000000;
	--brand-on-primary:     #FFFFFF;
	--brand-radius:         30px;

	--corporative-color: var(--brand-primary);
	--mirai-ui-font: 'Inter', sans-serif;

	/* Primary CTA — brand dark */
	--mirai-ui-button-background: var(--brand-primary);
	--mirai-ui-button-background-active: var(--brand-primary-active);
	--mirai-ui-button-color: var(--brand-on-primary);
	--mirai-ui-button-color-active: var(--brand-on-primary);

	/* Secondary button — used by the session widget's <ui-button type="link">.
	   Default background MUST be transparent — without this Mirai falls back to
	   white, painting a solid white square over the icon on the dark/transparent
	   header (visible in Chrome desktop and iOS Safari/Chrome). */
	--mirai-ui-button-secondary-background: transparent;
	--mirai-ui-button-secondary-background-active: rgba(255, 255, 255, 0.15);
	--mirai-ui-button-secondary-color: #FFFFFF;
	--mirai-ui-button-secondary-color-active: #FFFFFF;
	/* Defensive: alternate naming used by some Mirai versions. */
	--mirai-session-background: transparent;
	--mirai-session-background-active: rgba(255, 255, 255, 0.15);

	/* UI defaults — pill style matching the site's header CTA */
	--mirai-ui-border-radius: var(--brand-radius);
	--mirai-ui-modal-layer: 10000;

	/* Finder button — brand dark, pill radius */
	--mirai-finder-button-background: var(--brand-primary);
	--mirai-finder-button-background-active: var(--brand-primary-active);
	--mirai-finder-button-color: var(--brand-on-primary);
	--mirai-finder-button-color-active: var(--brand-on-primary);
	--mirai-finder-button-border-radius: var(--brand-radius);
	--mirai-finder-border-radius: var(--brand-radius);
	--mirai-finder-field-border-radius: var(--brand-radius);

	/* Session (shown over dark transparent nav) */
	--mirai-session-color: #FFFFFF;
	--mirai-session-icon-color: #FFFFFF;
	--mirai-session-color-active: var(--brand-on-primary);
	--mirai-session-icon-color-active: var(--brand-on-primary);
}

/* ================================= */
/* CSS FOR NEW CLUB */
[data-mirai-component="signup"] {
    display: flex;
    justify-content: center;
}

[data-mirai-component="profile"],
[data-mirai-component="signup"] {
    padding: 100px 0;
}

/* Session trigger button styling in header — scoped to DIRECT children only
   to avoid leaking styles into the login modal/popup that Mirai renders inside.
   Uses !important + fill/stroke to defeat Safari's Web Component default colors
   (Safari does not inherit `color` into shadow DOM the same way Chrome does,
   leaving the session label and icon black). */
[data-mirai-component="session"] {
    color: #fff !important;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

[data-mirai-component="session"] > a,
[data-mirai-component="session"] > button,
[data-mirai-component="session"] ui-button,
[data-mirai-component="session"] ui-button[type="link"] {
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--brand-radius);
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all 0.2s ease;
    background: transparent;
}

/* Text + currentColor-based icons inherit white via `color`.
   Avoid blanket `fill`/`stroke` on `*` — that paints every <rect>/<path>/<circle>
   inside the icon SVG white and collapses multi-element icons into a solid
   white square (the "cuadro blanco" symptom on iOS). SVGs that use
   currentColor will pick up the white from `color`; SVGs with hardcoded
   colors are handled by Mirai's own theming vars (--mirai-session-icon-color). */
[data-mirai-component="session"],
[data-mirai-component="session"] ui-button {
    color: #fff !important;
}

/* Shadow-DOM bypass for Mirai's <ui-button>: only the elements explicitly
   exposed as parts get painted. `fill: currentColor` lets SVGs that opt into
   theming inherit the white above without forcing it on internal background
   shapes. */
[data-mirai-component="session"]::part(label),
[data-mirai-component="session"]::part(icon),
[data-mirai-component="session"]::part(trigger),
[data-mirai-component="session"] ui-button::part(label),
[data-mirai-component="session"] ui-button::part(icon) {
    color: #fff !important;
    fill: currentColor !important;
}

[data-mirai-component="session"] > a:hover,
[data-mirai-component="session"] > button:hover,
[data-mirai-component="session"] ui-button:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #fff !important;
}

/* Inside Mirai's session modal/popup the descendant !important rules above
   would paint ALL text white, breaking the form. Re-establish dark text only
   inside the modal/dialog content rendered by Mirai. */
[data-mirai-component="session"] [role="dialog"],
[data-mirai-component="session"] [role="dialog"] *,
[data-mirai-component="session"] .mirai-modal,
[data-mirai-component="session"] .mirai-modal * {
    color: inherit !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* ================================= */
/* Finder "Buscar" button — force brand color on all viewports (doc §16.4).
   The CSS variables above (--mirai-finder-button-background) cover Mirai's
   official theming hooks, but on mobile the finder sometimes renders a
   different button variant (web component / shadow DOM ::part) whose color
   isn't picked up by those vars. Targeting the common selectors directly
   with !important guarantees the brand color regardless of which Mirai
   variant is rendered. */
[data-mirai-component="finder"] button[type="submit"],
[data-mirai-component="finder"] ui-button[primary],
[data-mirai-component="finder"] ui-button[type="primary"],
[data-mirai-component="finder"] [data-action="search"],
[data-mirai-component="finder"] [data-action="submit"] {
    background-color: var(--brand-primary) !important;
    background: var(--brand-primary) !important;
    color: var(--brand-on-primary) !important;
    border-color: var(--brand-primary) !important;
}

[data-mirai-component="finder"] button[type="submit"]:hover,
[data-mirai-component="finder"] ui-button[primary]:hover,
[data-mirai-component="finder"] [data-action="search"]:hover {
    background-color: var(--brand-primary-hover) !important;
    background: var(--brand-primary-hover) !important;
    color: var(--brand-on-primary) !important;
    border-color: var(--brand-primary-hover) !important;
}

[data-mirai-component="finder"] button[type="submit"]:active,
[data-mirai-component="finder"] ui-button[primary]:active,
[data-mirai-component="finder"] [data-action="search"]:active {
    background-color: var(--brand-primary-active) !important;
    background: var(--brand-primary-active) !important;
    color: var(--brand-on-primary) !important;
    border-color: var(--brand-primary-active) !important;
}

/* Mirai mobile finder may expose ::part for the submit button — brand that too. */
[data-mirai-component="finder"]::part(button-submit),
[data-mirai-component="finder"]::part(submit-button),
[data-mirai-component="finder"]::part(search-button) {
    background-color: var(--brand-primary) !important;
    color: var(--brand-on-primary) !important;
}

/* Mobile sticky bar: bar bg is brand-dark (#151515) and so is the "Buscar"
   button (the real element is an icon <ui-button>, no [type=submit]/[primary]).
   Keep brand-black fill + white icon, add a white outline so it reads on the
   dark bar (brand color stays #151515). */
[data-finder-pinned] [data-mirai-component="finder"] ui-button,
[data-finder-pinned] [data-mirai-component="finder"] button {
    background-color: var(--brand-primary) !important;
    background: var(--brand-primary) !important;
    color: var(--brand-on-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
}

/* Accents inside modals — selected day in the datepicker, highlighted options
   (doc §16.5). */
[data-mirai-component] [aria-selected="true"],
[data-mirai-component] [data-selected="true"] {
    background-color: var(--brand-primary) !important;
    color: var(--brand-on-primary) !important;
}

/* ================================= */
/* Finder full-width: Mirai injects its root with its own width/max-width,
   which leaves the widget narrow inside our full-width booking box. Force
   the injected root (and its form) to stretch to the container. */
[data-mirai-component="finder"] {
    width: 100% !important;
    max-width: none !important;
}

[data-mirai-component="finder"] > *,
[data-mirai-component="finder"] form {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}