/**
 * METABOLIC CLINIC MASTER STYLESHEET
 * 
 * Optimized for: Flask + Tailwind CSS
 * Design System: Dark Premium Medical / Crimson Cyber-Glow
 * Project: Metabolic Clinic
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ==========================================================================
   1. COLOR & THEME VARIABLES (Dark Crimson Palette)
   ========================================================================== */
:root {
    /* Primary Crimson / Rose Brand Palette */
    --brand-500: #e11d48;        /* Vivid Crimson Accent */
    --brand-600: #be123c;        /* Deep Crimson Hover */
    --brand-700: #9f1239;        /* Dark Crimson Border/Accent */
    --brand-light: rgba(225, 29, 72, 0.1); /* Soft Crimson Glow Accent */
    --brand-glow: rgba(225, 29, 72, 0.35);

    /* Secondary Accents */
    --accent-gold: #fbbf24;      /* Rating stars / Badges */
    --success: #10b981;
    --error: #f43f5e;

    /* Backgrounds & Dark Surfaces */
    --dark-950: #090a0f;        /* Deep Obsidian / Main Page Background */
    --dark-900: #12131a;        /* Elevated Surface (Cards / Header) */
    --glass-bg: rgba(18, 19, 26, 0.75);
    --glass-border: rgba(255, 255, 255, 0.08); /* Subtle Dark Glass Border */
    
    /* Typography Colors */
    --text-primary: #ffffff;    /* Pure White Titles */
    --text-secondary: #94a3b8;  /* Muted Slate Text */
    --text-muted: #64748b;      /* Dark Muted Placeholders */

    /* Typography Fonts */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
}

/* ==========================================================================
   2. TAILWIND OVERRIDES (Light-to-Dark Dark Red Transformation)
   ========================================================================== */

/* Глобальный тёмный фон */
body, 
.bg-dark-950, 
.bg-slate-950,
.bg-gray-950,
.bg-white {
    background-color: var(--dark-950) !important;
    color: var(--text-secondary) !important;
}

/* Тёмные стеклянные карточки */
.bg-dark-900, 
.bg-slate-900,
.bg-gray-900,
.bg-white,
.glass-card,
.glass-card-premium {
    background-color: var(--dark-900) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5) !important;
}

/* Исправляем цвета текста под тёмный интерфейс */
.text-slate-300, 
.text-slate-400, 
.text-gray-400,
.text-gray-600,
.text-black {
    color: var(--text-secondary) !important;
}

/* Все заголовки теперь белые */
h1, h2, h3, h4, h5, h6, 
.text-white, 
.text-slate-900 {
    color: var(--text-primary) !important;
}

/* Красные акцентные цвета (как на скриншоте) */
.text-brand-500, .text-rose-500, .text-red-500 { color: var(--brand-500) !important; }
.bg-brand-500, .bg-rose-500, .bg-red-500 { background-color: var(--brand-500) !important; }
.border-brand-500, .border-rose-500 { border-color: var(--brand-500) !important; }

/* ==========================================================================
   3. CORE SETUP & SCROLLBARS
   ========================================================================== */
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background-color: var(--dark-950);
    color: var(--text-secondary);
    -webkit-font-smoothing: antialiased;
}

/* Тёмный скроллбар с малиновым акцентом */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--dark-950); }
::-webkit-scrollbar-thumb { 
    background: #1e293b; 
    border-radius: 10px; 
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-500); }

/* ==========================================================================
   4. UI COMPONENTS (DARK CRIMSON STYLE)
   ========================================================================== */

/* Главная CTA Кнопка (как на скриншоте "Записаться на метаболический разбор") */
.btn-primary,
button[type="submit"],
.bg-brand-500.text-white {
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    padding: 14px 28px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none !important;
    box-shadow: 0 4px 20px 0 rgba(225, 29, 72, 0.4) !important;
    cursor: pointer;
}

.btn-primary:hover,
button[type="submit"]:hover {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(225, 29, 72, 0.6) !important;
}

/* Карточки с красным свечением при наведении */
.option-card, .selection-card, .doctor-card {
    background: var(--dark-900) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 1.25rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.option-card:hover, .selection-card:hover {
    border-color: var(--brand-500) !important;
    background-color: var(--dark-900) !important;
    box-shadow: 0 0 20px rgba(225, 29, 72, 0.2) !important;
    transform: translateY(-3px);
}

/* Поля ввода (Inputs) для тёмного фона */
.input-premium, .textarea-premium, input, textarea {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
}

.input-premium:focus, .textarea-premium:focus, input:focus, textarea:focus {
    border-color: var(--brand-500) !important;
    box-shadow: 0 0 15px var(--brand-glow) !important;
    outline: none !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* ==========================================================================
   5. TYPOGRAPHY & BADGES
   ========================================================================== */
h1, .text-4xl, .text-3xl {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 2.5rem;
    line-height: 1.2;
    color: var(--text-primary) !important;
    letter-spacing: -0.02em;
}

h2, h3, .text-xl, .text-2xl {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-primary) !important;
}

.text-muted {
    color: var(--text-muted) !important;
    font-size: 0.875rem;
}

/* Бейдж с темным красным фоном (как "Центр метаболической оптимизации") */
.step-badge-glow,
.badge-pill {
    background: rgba(225, 29, 72, 0.15) !important;
    border: 1px solid rgba(225, 29, 72, 0.3) !important;
    color: #f43f5e !important;
    box-shadow: 0 0 15px var(--brand-glow) !important;
    border-radius: 9999px;
    padding: 6px 16px;
    font-weight: 600;
}

/* ==========================================================================
   6. ANIMATIONS, CHAT & LOADER
   ========================================================================== */
.fade-up {
    animation: fadeUp 0.5s ease-out forwards;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

#chat-messages::-webkit-scrollbar-thumb { 
    background: var(--brand-500); 
}

/* Уведомления Toastify */
.toastify {
    background: var(--dark-900) !important;
    color: var(--text-primary) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    border: 1px solid var(--glass-border) !important;
    border-left: 5px solid var(--brand-500) !important;
}

#new_client_tab {
    background-color: rgba(225, 29, 72, 0.2) !important;
}

.pb-safe { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }

/* Экран загрузки с глубоким размытием */
.loader-overlay-fixed {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(9, 10, 15, 0.85) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
}

.loader-content span,
.loader-content p {
    color: #ffffff !important;
}

.loader-content .text-brand-500 {
    color: var(--brand-500) !important;
}


/* Отменяем старый красный фон кнопки в обычном состоянии */
button#consultation_element_item.dark-neutral-card {
    background-color: #12131a !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Переопределяем состояние при наведении */
button#consultation_element_item.dark-neutral-card:hover {
    background-color: #1a1b26 !important;
    border-color: rgba(225, 29, 72, 0.4) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 0 20px rgba(225, 29, 72, 0.25) !important;
}