/* ==========================================================================
   METAVITAL Booking — "Cal" theme overlay
   Source of truth: /DESIGN.md (Cal.com system from voltagent/awesome-design-md,
   adapted to the METAVITAL brand). Loaded after app.css; re-maps --mv-* tokens
   and overrides the core component selectors. Landing pages (/present/*) keep
   their own stylesheet and are not covered here.
   ========================================================================== */

/* ---------- Inter (self-hosted, variable weight 100-900) ---------- */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/fonts/inter-cyrillic-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/fonts/inter-cyrillic-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens: light ---------- */
:root {
    --mv-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Brand accent (METAVITAL blue) — used sparingly */
    --mv-brand: #0074bc;
    --mv-brand-strong: #005a94;
    --mv-brand-rgb: 0, 116, 188;

    /* Primary action = ink */
    --mv-primary: #111111;
    --mv-primary-dark: #000000;
    --mv-primary-light: #242424;
    --mv-primary-rgb: 17, 17, 17;
    --mv-on-primary: #ffffff;
    --mv-accent: #10b981;

    --mv-bg: #ffffff;
    --mv-card: #ffffff;
    --mv-text: #111111;
    --mv-body: #374151;
    --mv-muted: #6b7280;
    --mv-border: #e5e7eb;
    --mv-border-strong: #d4d4d8;
    --mv-hairline-soft: #f3f4f6;
    --mv-shadow: none;
    --mv-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.08);

    --mv-glass-bg: #ffffff;
    --mv-glass-blur: 0px;
    --mv-surface: #ffffff;
    --mv-surface-raised: #ffffff;
    --mv-surface-overlay: #ffffff;
    --mv-surface-muted: #f8f9fa;
    --mv-surface-alt: #f5f5f5;
    --mv-surface-translucent: #ffffff;
    --mv-surface-frosted: #ffffff;
    --mv-surface-dark: #101010;
    --mv-surface-dark-elevated: #1a1a1a;
    --mv-on-dark: #ffffff;
    --mv-on-dark-soft: #a1a1aa;

    --mv-input-bg: #ffffff;
    --mv-input-border: #e5e7eb;
    --mv-control-height: 2.5rem;
    --mv-control-padding-y: 0.55rem;
    --mv-control-padding-x: 0.875rem;
    --mv-control-radius: 8px;
    --mv-control-font-size: 0.9375rem;
    --mv-control-shadow: none;

    --mv-chip-height: 2rem;
    --mv-chip-padding-y: 0.3rem;
    --mv-chip-padding-x: 0.75rem;
    --mv-chip-radius: 9999px;
    --mv-chip-font-size: 0.8125rem;
    --mv-chip-shadow: none;

    --mv-table-bg: #ffffff;
    --mv-table-head-bg: #f8f9fa;
    --mv-table-head-text: #6b7280;
    --mv-table-row-border: #e5e7eb;

    --mv-nav-link: #374151;
    --mv-btn-outline-bg: #ffffff;
    --mv-gradient-primary: transparent;
    --mv-gradient-accent: transparent;

    --mv-label: #111111;
    --mv-label-muted: #6b7280;

    --mv-spec-tag-bg: #f5f5f5;
    --mv-spec-tag-border: #e5e7eb;
    --mv-spec-tag-text: #111111;

    --mv-calendar-bg: #ffffff;
    --mv-calendar-day-bg: #ffffff;
    --mv-calendar-day-border: #e5e7eb;
    --mv-slot-btn-bg: #ffffff;
    --mv-slot-btn-border: #e5e7eb;
    --mv-cal-grid-line: #f3f4f6;
    --mv-day-card-active-bg: #ffffff;
    --mv-day-interval-bg: #f8f9fa;

    --mv-status-neutral-bg: #f5f5f5;
    --mv-status-neutral-text: #374151;
    --mv-overlay-subtle: #f3f4f6;
    --mv-shop-sticky-bg: #ffffff;
    --mv-license-meta-bg: #f8f9fa;
    --mv-license-module-bg: #ffffff;

    --mv-info-bg: #eff6ff;
    --mv-info-border: #bfdbfe;
    --mv-info-text: #1d4ed8;
    --mv-info-bg-soft: #eff6ff;
    --mv-info-text-deep: #1e3a8a;
    --mv-success-text: #047857;
    --mv-success-bg: #ecfdf5;
    --mv-success-border: #a7f3d0;
    --mv-danger-text: #b91c1c;
    --mv-danger-bg: #fef2f2;
    --mv-danger-border: #fecaca;
    --mv-warning-bg: #fffbeb;
    --mv-warning-border: #fde68a;
    --mv-warning-text: #92400e;
    --mv-disabled-bg: #e5e7eb;
    --mv-disabled-text: #6b7280;
    --mv-disabled-border: #e5e7eb;
    --mv-badge-bg: #111111;
}

/* ---------- Tokens: dark ---------- */
[data-theme="dark"] {
    --mv-brand: #4aa8e0;
    --mv-brand-strong: #7ec8f5;
    --mv-brand-rgb: 74, 168, 224;

    --mv-primary: #ffffff;
    --mv-primary-dark: #e4e4e7;
    --mv-primary-light: #f4f4f5;
    --mv-primary-rgb: 255, 255, 255;
    --mv-on-primary: #111111;

    --mv-bg: #101010;
    --mv-card: #1a1a1a;
    --mv-text: #fafafa;
    --mv-body: #d4d4d8;
    --mv-muted: #a1a1aa;
    --mv-border: rgba(255, 255, 255, 0.12);
    --mv-border-strong: rgba(255, 255, 255, 0.24);
    --mv-hairline-soft: rgba(255, 255, 255, 0.07);
    --mv-shadow: none;
    --mv-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);

    --mv-glass-bg: #101010;
    --mv-surface: #1a1a1a;
    --mv-surface-raised: #1a1a1a;
    --mv-surface-overlay: #1a1a1a;
    --mv-surface-muted: #171717;
    --mv-surface-alt: #262626;
    --mv-surface-translucent: #1a1a1a;
    --mv-surface-frosted: #1a1a1a;
    --mv-surface-dark: #000000;
    --mv-surface-dark-elevated: #141414;

    --mv-input-bg: #1a1a1a;
    --mv-input-border: rgba(255, 255, 255, 0.16);
    --mv-table-bg: #1a1a1a;
    --mv-table-head-bg: #171717;
    --mv-table-head-text: #a1a1aa;
    --mv-table-row-border: rgba(255, 255, 255, 0.1);
    --mv-nav-link: #d4d4d8;
    --mv-btn-outline-bg: #1a1a1a;
    --mv-label: #fafafa;
    --mv-label-muted: #a1a1aa;

    --mv-spec-tag-bg: #262626;
    --mv-spec-tag-border: rgba(255, 255, 255, 0.12);
    --mv-spec-tag-text: #fafafa;

    --mv-calendar-bg: #1a1a1a;
    --mv-calendar-day-bg: #1a1a1a;
    --mv-calendar-day-border: rgba(255, 255, 255, 0.14);
    --mv-slot-btn-bg: #1a1a1a;
    --mv-slot-btn-border: rgba(255, 255, 255, 0.16);
    --mv-cal-grid-line: rgba(255, 255, 255, 0.07);
    --mv-day-card-active-bg: #262626;
    --mv-day-interval-bg: rgba(255, 255, 255, 0.05);

    --mv-status-neutral-bg: #262626;
    --mv-status-neutral-text: #d4d4d8;
    --mv-overlay-subtle: rgba(255, 255, 255, 0.08);
    --mv-shop-sticky-bg: #1a1a1a;
    --mv-license-meta-bg: #171717;
    --mv-license-module-bg: #1a1a1a;

    --mv-info-bg: rgba(74, 168, 224, 0.14);
    --mv-info-border: rgba(74, 168, 224, 0.35);
    --mv-info-text: #9ed4f7;
    --mv-info-bg-soft: rgba(74, 168, 224, 0.1);
    --mv-info-text-deep: #bfe3fa;
    --mv-success-text: #6ee7b7;
    --mv-success-bg: rgba(16, 185, 129, 0.14);
    --mv-success-border: rgba(16, 185, 129, 0.35);
    --mv-danger-text: #fca5a5;
    --mv-danger-bg: rgba(239, 68, 68, 0.14);
    --mv-danger-border: rgba(239, 68, 68, 0.35);
    --mv-warning-bg: rgba(245, 158, 11, 0.14);
    --mv-warning-border: rgba(245, 158, 11, 0.4);
    --mv-warning-text: #fbbf24;
    --mv-disabled-bg: #262626;
    --mv-disabled-text: #71717a;
    --mv-disabled-border: #262626;
    --mv-badge-bg: #ffffff;
}

/* ---------- Base ---------- */
html {
    background-color: var(--mv-bg);
}

body {
    font-family: var(--mv-font-sans);
    font-feature-settings: "cv11", "ss01";
    background-image: none;
    letter-spacing: 0;
    color: var(--mv-text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
    font-weight: 600;
    color: var(--mv-text);
}

h1 {
    font-size: clamp(1.75rem, 1.35rem + 1.2vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin: 0 0 0.4rem;
}

h2 {
    font-size: 1.375rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

h3 {
    font-size: 1.125rem;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.mv-muted {
    color: var(--mv-muted);
    font-size: 0.9375rem;
}

.mv-main a:not([class]) {
    color: var(--mv-brand);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

[data-theme="dark"] .mv-brand-logo {
    filter: brightness(1.35) saturate(0.9);
}

/* ---------- Header / navigation ---------- */
.mv-header {
    background: var(--mv-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--mv-border);
}

.mv-header-has-context .mv-header-chrome {
    background: var(--mv-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--mv-border);
    border-radius: 0;
    box-shadow: none;
}

.mv-header-inner {
    min-height: 4rem;
    padding: 0.65rem 1.5rem;
}

.mv-brand-tag {
    color: var(--mv-brand);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0;
}

.mv-nav a {
    color: var(--mv-nav-link);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.45rem 0.7rem;
    margin-left: 0.25rem;
    min-height: 2.5rem;
    border-radius: 8px;
}

.mv-nav a:hover {
    background: var(--mv-surface-alt);
    color: var(--mv-text);
}

.mv-header-tools {
    gap: 0.4rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--mv-border);
}

.mv-theme-toggle,
.mv-nav-toggle,
.mv-lang-trigger {
    background: var(--mv-surface);
    border: 1px solid var(--mv-border);
    color: var(--mv-text);
    box-shadow: none;
}

.mv-theme-toggle,
.mv-lang-trigger {
    min-height: 2.25rem;
}

.mv-theme-toggle {
    width: 2.25rem;
    height: 2.25rem;
}

.mv-nav-toggle {
    border-radius: 8px;
}

.mv-theme-toggle:hover,
.mv-lang-trigger:hover,
.mv-nav-toggle:hover {
    background: var(--mv-surface-alt);
    border-color: var(--mv-border-strong);
    box-shadow: none;
}

.mv-nav-unread-badge,
.mv-badge {
    background: var(--mv-badge-bg);
    color: var(--mv-on-primary);
}

/* ---------- Cards ---------- */
.mv-card {
    background: var(--mv-card);
    border: 1px solid var(--mv-border);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.mv-grid > .mv-card {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mv-grid > .mv-card:hover {
    border-color: var(--mv-border-strong);
    box-shadow: var(--mv-shadow-hover);
    transform: none;
}

.mv-home-filter {
    background: var(--mv-surface-alt);
    border-color: transparent;
    padding: 1rem 1.25rem;
}

.mv-home-filter-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mv-muted);
    margin-bottom: 0.5rem;
}

/* ---------- Buttons ---------- */
.mv-btn {
    background: var(--mv-primary);
    color: var(--mv-on-primary);
    border: 1px solid var(--mv-primary);
    padding: 0.7rem 1.25rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    box-shadow: none;
    filter: none;
}

.mv-btn:hover:not(:disabled) {
    background: var(--mv-primary-light);
    border-color: var(--mv-primary-light);
    filter: none;
    transform: none;
    box-shadow: none;
}

.mv-btn:active:not(:disabled) {
    background: var(--mv-primary-light);
    filter: none;
    transform: none;
    box-shadow: none;
}

.mv-btn:disabled,
.mv-btn.mv-btn-busy {
    background: var(--mv-disabled-bg);
    color: var(--mv-disabled-text);
    border-color: var(--mv-disabled-border);
    opacity: 1;
}

.mv-btn-outline,
.mv-btn.mv-btn-outline {
    background: var(--mv-btn-outline-bg);
    color: var(--mv-text);
    border: 1px solid var(--mv-border);
    box-shadow: none;
}

.mv-btn-outline:hover:not(:disabled),
.mv-btn.mv-btn-outline:hover:not(:disabled) {
    background: var(--mv-surface-alt);
    border-color: var(--mv-border-strong);
    color: var(--mv-text);
    transform: none;
    box-shadow: none;
}

.mv-btn-outline:active:not(:disabled),
.mv-btn.mv-btn-outline:active:not(:disabled) {
    background: var(--mv-surface-alt);
    transform: none;
    box-shadow: none;
}

.mv-btn-link {
    color: var(--mv-brand);
    font-weight: 500;
}

.mv-btn-link:hover:not(:disabled) {
    color: var(--mv-brand-strong);
    opacity: 1;
}

.mv-btn-danger,
.mv-btn.mv-btn-danger {
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
    box-shadow: none;
}

.mv-btn-danger:hover:not(:disabled),
.mv-btn.mv-btn-danger:hover:not(:disabled) {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
    transform: none;
    box-shadow: none;
}

.mv-btn-outline.mv-btn-danger,
.mv-btn.mv-btn-outline.mv-btn-danger {
    background: var(--mv-btn-outline-bg);
    color: var(--mv-danger-text);
    border-color: var(--mv-danger-border);
}

.mv-btn-outline.mv-btn-danger:hover:not(:disabled),
.mv-btn.mv-btn-outline.mv-btn-danger:hover:not(:disabled) {
    background: var(--mv-danger-bg);
    color: var(--mv-danger-text);
    border-color: var(--mv-danger-border);
}

.mv-btn-sm {
    padding: 0.45rem 0.85rem;
    font-size: 0.8125rem;
}

/* ---------- Forms ---------- */
.mv-form label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mv-label);
    margin-bottom: 0.4rem;
}

.mv-form input:not([type="checkbox"]):not([type="radio"]),
.mv-form select,
.mv-form textarea,
.mv-table-search input:not([type="checkbox"]):not([type="radio"]),
.mv-spec-tag-editor input:not([type="checkbox"]):not([type="radio"]) {
    font-family: inherit;
    border: 1px solid var(--mv-input-border);
    border-radius: var(--mv-control-radius);
    background: var(--mv-input-bg);
    box-shadow: none;
}

.mv-form input:focus,
.mv-form select:focus,
.mv-form textarea:focus,
.mv-table-search input:focus,
.mv-spec-tag-editor input:focus {
    outline: none;
    border-color: var(--mv-text);
    box-shadow: 0 0 0 3px rgba(var(--mv-primary-rgb), 0.12);
    background: var(--mv-input-bg);
}

.mv-alert {
    border-radius: 8px;
    font-size: 0.9375rem;
}

/* ---------- Chips / tags ---------- */
.mv-spec-tag {
    background: var(--mv-spec-tag-bg);
    border-color: var(--mv-spec-tag-border);
    color: var(--mv-spec-tag-text);
    font-weight: 500;
    box-shadow: none;
}

.mv-spec-tag-btn:hover:not(.is-selected) {
    background: var(--mv-surface-alt);
    border-color: var(--mv-border-strong);
    box-shadow: none;
    transform: none;
}

[data-theme="dark"] .mv-spec-tag-btn:hover:not(.is-selected) {
    background: var(--mv-surface-alt);
}

[data-theme="dark"] .mv-shop-availability-chips .mv-shop-chip.is-active .mv-shop-chip-icon {
    filter: brightness(0);
}

.mv-spec-tag-btn.is-selected,
a.mv-spec-tag-btn.is-selected {
    background: var(--mv-primary);
    border-color: var(--mv-primary);
    color: var(--mv-on-primary);
    font-weight: 600;
    box-shadow: none;
}

/* ---------- Specialist cards / avatars ---------- */
.mv-specialist-pick-card {
    border: 1px solid var(--mv-border);
    border-radius: 12px;
}

.mv-specialist-pick-card.selected {
    border-color: var(--mv-primary);
    background: var(--mv-surface-alt);
    box-shadow: 0 0 0 1px var(--mv-primary);
}

/* ---------- Calendar ---------- */
.mv-calendar {
    border: 1px solid var(--mv-border);
    border-radius: 12px;
    padding: 1rem;
    background: var(--mv-calendar-bg);
}

.mv-calendar-day {
    border-radius: 8px;
    font-weight: 500;
    border: 1px solid var(--mv-calendar-day-border);
    background: var(--mv-calendar-day-bg);
}

.mv-calendar-day.today {
    border-color: var(--mv-brand);
    box-shadow: inset 0 0 0 1px var(--mv-brand);
}

.mv-calendar-day.selected {
    background: var(--mv-primary);
    color: var(--mv-on-primary);
    border-color: var(--mv-primary);
    box-shadow: none;
}

/* ---------- Tables ---------- */
table.mv-table {
    background: var(--mv-table-bg);
    border: 1px solid var(--mv-border);
    border-radius: 12px;
}

table.mv-table th,
table.mv-table td {
    border-bottom: 1px solid var(--mv-table-row-border);
    font-size: 0.9rem;
}

table.mv-table th {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mv-table-head-text);
    background: var(--mv-table-head-bg);
}

/* ---------- Footer (the only dark surface) ---------- */
.mv-site-legal-footer:not(.mv-landing-footer),
[data-theme="dark"] .mv-site-legal-footer:not(.mv-landing-footer) {
    padding: 3rem 1.5rem 3.25rem;
    margin-top: 3rem;
    color: var(--mv-on-dark-soft);
    background: var(--mv-surface-dark);
    border-top: 0;
}

.mv-site-legal-footer:not(.mv-landing-footer) .mv-site-legal-footer-disclaimer,
.mv-site-legal-footer:not(.mv-landing-footer) .mv-site-legal-footer-copyright,
[data-theme="dark"] .mv-site-legal-footer:not(.mv-landing-footer) .mv-site-legal-footer-disclaimer,
[data-theme="dark"] .mv-site-legal-footer:not(.mv-landing-footer) .mv-site-legal-footer-copyright {
    color: var(--mv-on-dark-soft);
    font-size: 0.8125rem;
}

.mv-site-legal-footer:not(.mv-landing-footer) .mv-site-legal-footer-links {
    font-size: 0.875rem;
}

.mv-site-legal-footer:not(.mv-landing-footer) .mv-site-legal-footer-links a,
[data-theme="dark"] .mv-site-legal-footer:not(.mv-landing-footer) .mv-site-legal-footer-links a {
    color: var(--mv-on-dark);
}

.mv-site-legal-footer:not(.mv-landing-footer) .mv-site-legal-footer-links a:hover,
[data-theme="dark"] .mv-site-legal-footer:not(.mv-landing-footer) .mv-site-legal-footer-links a:hover {
    color: var(--mv-on-dark);
    text-decoration: underline;
}

.mv-site-legal-footer:not(.mv-landing-footer) .mv-site-legal-footer-sep,
[data-theme="dark"] .mv-site-legal-footer:not(.mv-landing-footer) .mv-site-legal-footer-sep {
    color: rgba(255, 255, 255, 0.3);
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
    .mv-btn,
    .mv-btn-outline,
    .mv-nav a,
    .mv-spec-tag-btn {
        transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
}