/* Основные стили для Telegram Mini App - Дюна */

/* Стили для hr.top_hr */
.top_hr {
    margin-bottom: 16px;
    margin-left: -16px;
    min-width: 110%;
}

/* ============================================
   ДИЗАЙН-СИСТЕМА DUNA SALON
   Premium / Luxury / Minimalist
   ============================================ */

:root {
    /* Brand Colors */
    --color-primary: #A3836B; /* Gold/Bronze - активные элементы, иконки, заголовки */
    --color-deep-dark: #121826; /* Карта баланса, логотип, премиальные кнопки */
    
    /* Neutral Colors */
    --color-bg: #FFFFFF; /* Основной фон */
    --color-bg-light: #F8FAFC; /* Slate 50 - фон карточек, подложек */
    --color-border: #F1F5F9; /* Slate 100 - разделители и границы */
    
    /* Typography Colors */
    --color-heading: #1E293B; /* Slate 800 - основной текст и заголовки */
    --color-subtitle: #94A3B8; /* Slate 400 - вспомогательный текст */
    --color-tracking: #CBD5E1; /* Slate 300 - мелкий текст в капсе */
    
    /* Legacy (для совместимости) */
    --color-primary-hover: #8d6b52;
    --color-text: #1E293B;
    --color-text-light: #94A3B8;
    --color-success: #4caf50;
    --color-error: #f44336;
    
    /* Shadows */
    --shadow-soft: 0 10px 30px -15px rgba(0, 0, 0, 0.05); /* Мягкая тень для карточек */
    --shadow-medium: 0 20px 40px -15px rgba(0, 0, 0, 0.15); /* Средняя тень */
    --shadow-strong: 0 20px 40px -10px rgba(0, 0, 0, 0.3); /* Сильная тень */
    --shadow-primary: 0 10px 20px -5px rgba(163, 131, 107, 0.3); /* Тень для primary кнопок */
    
    /* Border Radius */
    --radius-large: 50px; /* Крупные блоки (Banner/Card) */
    --radius-medium: 45px; /* Альтернатива для крупных блоков */
    --radius-card: 35px; /* Средние элементы (кнопки выбора, блоки мастеров) */
    --radius-input: 24px; /* Инпуты, кнопки навигации (rounded-3xl) */
    --radius-small: 16px; /* Малые элементы (rounded-2xl) */
    --radius-full: 9999px; /* Круглые элементы */
    
    /* Spacing */
    --spacing-container: 24px; /* p-6 */
    --spacing-large: 32px; /* p-8 */
    --spacing-block: 32px; /* space-y-8 */
    --spacing-element: 16px; /* gap-4 */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Типографика согласно дизайн-системе */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--color-bg);
    color: var(--color-heading);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Playfair Display для логотипа и акцентов */
.font-serif, .logo-text {
    font-family: 'Playfair Display', serif;
}

/* Inter для всех интерфейсных элементов */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, button, input, textarea, select, label, li, ul, ol, table, td, th, tr {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#app {
    min-height: 100vh;
    padding-bottom: 80px; /* Отступ для нижнего меню */
}

/* Загрузка */
.loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--color-bg);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

.loader.hidden {
    display: none !important;
}

.loader-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--color-bg-light);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loader-text {
    margin-top: 16px;
    color: var(--color-text-light);
    font-size: 14px;
}

/* Экраны - по умолчанию все скрыты */
.screen {
    display: none !important;
    max-width: 100%;
    margin: 0 auto;
}

/* Экран авторизации */
#screen-auth {
    padding: 0;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

/* Экран регистрации — как auth по разметке, плюс прокрутка в .auth-content-wrapper */
#screen-register {
    padding: 0;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}
#screen-register .auth-description-block {
    display: none;
}

/* Экран салонов - теперь скрыт по умолчанию */
#screen-salons:not(.hidden) {
    display: block !important;
    padding: 16px;
}

/* Главный экран (home) */
#screen-home:not(.hidden) {
    display: block !important;
    padding: 0;
}

/* Остальные экраны показываем только когда не скрыты */
.screen:not(#screen-auth):not(#screen-salons):not(#screen-home):not(.hidden) {
    display: block !important;
    padding: 16px;
}

.screen.hidden {
    display: none !important;
}

#screen-auth.hidden {
    display: none !important;
}

/* Заголовок */
.header {
    margin-bottom: 0px;
    padding: 0px;
    /* border-bottom: 2px solid var(--color-primary); */
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 10;
    background: var(--color-bg);
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 16px;
    position: relative;
}

.menu-toggle {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    z-index: 10;
}

.menu-icon {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 24px;
    height: 18px;
    position: relative;
    transition: all 0.3s ease;
}

.menu-line {
    width: 100%;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.menu-toggle.active .menu-icon {
    gap: 0;
}

.menu-toggle.active .menu-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.menu-toggle.active .menu-line:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active .menu-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

.header-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
}

.logo-header-image {
    max-width: 140px;
    height: auto;
    max-height: 60px;
}

/* Логотип с Playfair Display (согласно дизайн-системе) */
.logo-text {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 24px;
    letter-spacing: 0.3em;
    color: var(--color-primary);
}

.header-phone-btn {
    background: rgba(163, 131, 107, 0.05);
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-small);
    color: var(--color-primary);
    transition: all 0.2s ease;
}

.header-phone-btn:active {
    transform: scale(0.9);
}

.header-phone-icon {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
}

.header-with-back {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 16px;
}

.header h1 {
    font-size: 24px;
    font-weight: 500;
    color: #6D6E71;
    margin-bottom: 8px;
    text-align: left;
    flex: 1;
}

.header-with-back h1 {
    margin-bottom: 0;
    text-align: left;
}

.subtitle {
    font-size: 14px;
    color: var(--color-text-light);
}

/* Кнопка назад */
.btn-back {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.btn-back:active {
    opacity: 0.7;
}

.btn-back img {
    width: 100%;
    height: 100%;
}

/* Прогресс-бар бронирования */
.booking-progress-bar {
    padding: 16px 0px;
    background: var(--color-bg);
}

.booking-progress-track {
    height: 6px;
    width: 100%;
    background: rgb(241 245 249);
    border-radius: 9999px;
    overflow: hidden;
}

.booking-progress-fill {
    height: 100%;
    background: rgb(163, 131, 107);
    transition: width 0.7s ease;
    border-radius: 9999px;
}

/* Хлебные крошки */
.services-breadcrumbs {
    padding: 10px 0px 16px 0px;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: var(--color-bg);
}

.services-breadcrumbs::-webkit-scrollbar {
    display: none;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 12px;
    border-radius: 9999px;
    transition: all 0.2s;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    border: none !important;
}

.breadcrumb-item:not(.breadcrumb-active) {
    background: rgba(163, 131, 107, 0.05);
    color: rgb(163, 131, 107);
}

.breadcrumb-item.breadcrumb-active {
    background: rgb(163, 131, 107);
    color: white;
}

.breadcrumb-item:not(.breadcrumb-active):hover {
    background: rgba(163, 131, 107, 0.1);
}

.breadcrumb-separator {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: rgb(203, 213, 225);
}

.breadcrumb-separator svg {
    width: 10px;
    height: 10px;
}

/* Контейнер списка */
.list-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    padding-top: 0;
}

.list-container .category-item-clickable:first-child {
    border-top: 1px solid rgb(241 245 249);
}

/* Список услуг (последовательная навигация) */
.services-container {
    display: block;
    min-height: calc(100vh - 200px);
    max-height: calc(100vh - 200px);
    overflow: hidden;
    background: var(--color-bg);
}

#services-list {
    padding: 0px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 200px);
}

.category-services-container {
    border-left: 2px solid var(--color-border);
    padding-left: 12px;
    margin-left: 8px;
}

.category-chevron {
    transition: transform 0.2s ease;
}

.category-item-clickable {
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgb(241 245 249);
    border-radius: 0;
    margin-bottom: 0;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.category-item-clickable:hover {
    background: rgba(163, 131, 107, 0.05);
}

.category-item-clickable:active {
    background: rgba(163, 131, 107, 0.1);
}

.category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.category-title {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: rgb(30 41 59);
    text-transform: none;
    letter-spacing: 0.02em;
}

.category-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.services-categories {
    width: 40%;
    overflow-y: auto;
    background: #f8f8f8;
    border-right: 1px solid #e0e0e0;
    padding: 0;
}

.services-categories .category-item {
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 15px;
    color: var(--color-text);
    background: transparent;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.services-categories .category-item:hover {
    background: rgba(167, 129, 101, 0.05);
}

.services-categories .category-item.selected {
    background: var(--color-primary);
    color: white;
    font-weight: 500;
}

.services-categories .category-item.selected::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: white;
}

.services-content {
    width: 60%;
    overflow-y: auto;
    padding: 0;
    background: var(--color-bg);
}

.services-subcategories {
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 0;
}

.services-subcategories.hidden {
    display: none;
}

.services-subcategories .subcategories-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    margin-bottom: 16px;
    padding: 0 4px;
    letter-spacing: 0.5px;
}

.services-subcategories .subcategory-item {
    padding: 16px 20px;
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--color-bg);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.services-subcategories .subcategory-item:hover {
    background: rgba(167, 129, 101, 0.05);
    box-shadow: 0 2px 8px rgba(167, 129, 101, 0.15);
    transform: translateY(-1px);
}

.services-subcategories .subcategory-item:active {
    transform: translateY(0);
}

.services-subcategories .subcategory-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text);
    flex: 1;
}

.services-subcategories .subcategory-arrow {
    font-size: 18px;
    color: var(--color-primary);
    margin-left: 12px;
    font-weight: bold;
}

.services-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 16px;
}

.services-list.hidden {
    display: none;
}

.services-list .service-item {
    border-bottom: 1px solid #e0e0e0;
    border-radius: 0;
    margin-bottom: 0;
}

.services-list .service-item:last-child {
    border-bottom: none;
}

/* Карточки */
.card {
    background: var(--color-bg);
    /* border: 1px solid var(--color-border); */
    border-radius: var(--border-radius);
    padding: 0px 0px 16px 0px;
    cursor: pointer;
    transition: all 0.3s ease;
    /* box-shadow: var(--shadow); */
}

.card:active {
    transform: scale(0.98);
    box-shadow: var(--shadow-hover);
}

.card.selected {
    border-color: var(--color-primary);
    border-width: 2px;
    background: rgba(167, 129, 101, 0.05);
}

/* Карточка салона */
/* Старые стили для совместимости */
.salon-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
}

.salon-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.salon-card:active {
    transform: translateY(0);
}

.salon-image {
    width: 100%;
    height: 150px;
    border-radius: var(--border-radius);
    background: var(--color-bg-light);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    margin-bottom: 12px;
}

/* Новый дизайн экрана выбора салона (из React приложения) */
.salons-content {
    /* padding: var(--spacing-container); */
    background: var(--color-bg);
    min-height: 100vh;
    animation: slideInUp 0.4s ease-out;
}

.salons-header-section {
    padding: 0px;
    padding-bottom: 0;
}

.salons-header-section .flex {
    display: flex;
}

.salons-header-section .items-start {
    align-items: flex-start;
}

.salons-header-section .justify-between {
    justify-content: space-between;
}

.salons-header-section .mt-2 {
    margin-top: 8px;
}

.salons-header-section .flex-1 {
    flex: 1;
}

.salons-header-section .p-2 {
    padding: 8px;
}

.salons-header-section .-ml-2 {
    margin-left: -8px;
}

.salons-header-section .text-slate-400 {
    color: #94a3b8;
}

.salons-header-section .mb-2 {
    margin-bottom: 8px;
}

.salons-header-section .gap-1 {
    gap: 4px;
}

.salons-header-section .text-\[10px\] {
    font-size: 10px;
}

.salons-header-section .uppercase {
    text-transform: uppercase;
}

.salons-header-section .font-black {
    font-weight: 900;
}

.salons-header-section .tracking-widest {
    letter-spacing: 0.1em;
}

.salons-header-section .text-2xl {
    font-size: 24px;
}

.salons-header-section .text-slate-800 {
    color: #1e293b;
}

.salons-header-section .leading-\[1\.15\] {
    line-height: 1.15;
}

.salons-header-section .text-slate-300 {
    color: #cbd5e1;
}

.salons-header-section .font-bold {
    font-weight: 700;
}

.salons-header-section .tracking-\[0\.2em\] {
    letter-spacing: 0.2em;
}

.salons-header-section .mt-3 {
    margin-top: 12px;
}

.salons-header-section .w-12 {
    width: 48px;
}

.salons-header-section .h-12 {
    height: 48px;
}

.salons-header-section .bg-\[#A3836B\]\/10 {
    background-color: rgba(163, 131, 107, 0.1);
}

.salons-header-section .rounded-2xl {
    border-radius: 16px;
}

.salons-header-section .items-center {
    align-items: center;
}

.salons-header-section .justify-center {
    justify-content: center;
}

.salons-header-section .text-\[#A3836B\] {
    color: #a3836b;
}

.salons-header-section .mt-1 {
    margin-top: 4px;
}

.salons-header-section .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Старые классы для обратной совместимости (можно удалить позже) */
.salons-back-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px;
    margin-left: -8px;
    margin-bottom: 8px;
    color: var(--color-subtitle);
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    flex-shrink: 0;
}

.salons-back-text {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-family: 'Inter', sans-serif;
}

.salons-title-section {
    flex: 1;
    min-width: 0;
}

.salons-main-title {
    font-size: 24px;
    font-weight: 900;
    color: var(--color-heading);
    line-height: 1.15;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

.salons-subtitle {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-tracking);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-top: 12px;
    font-family: 'Inter', sans-serif;
}

.salons-icon-wrapper {
    width: 48px;
    height: 48px;
    background: rgba(163, 131, 107, 0.1);
    border-radius: var(--radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    margin-top: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.salons-list-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0px;
    padding-top: 24px;
}

/* Экран действий салона (новый дизайн) */
.salon-actions-content {
    padding: 0px !important;
    background: var(--color-bg);
    min-height: 100vh;
    animation: slideInUp 0.4s ease-out;
}

.salon-actions-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.salon-actions-back-btn {
    padding: 8px;
    margin-left: -8px;
    color: #94a3b8;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.salon-actions-back-btn:active {
    transform: scale(0.9);
}

.salon-actions-title-section {
    flex: 1;
}

.salon-actions-title {
    font-size: 20px;
    font-weight: 900;
    color: #1e293b;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

.salon-actions-subtitle {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 2px;
    font-family: 'Inter', sans-serif;
}

.salon-actions-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.salon-action-card {
    width: 100%;
    padding: 20px;
    background: var(--color-bg);
    border: 1px solid #f1f5f9;
    border-radius: 30px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.salon-action-card:active {
    transform: scale(0.95);
}

.salon-action-card-certificate {
    background: rgba(163, 131, 107, 0.05);
    border-color: rgba(163, 131, 107, 0.1);
}

.salon-action-icon {
    width: 56px;
    height: 56px;
    background: rgba(163, 131, 107, 0.05);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.salon-action-icon-certificate {
    background: var(--color-primary);
    color: white;
}

.salon-action-content {
    flex: 1;
    text-align: left;
}

.salon-action-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 2px 0;
    font-family: 'Inter', sans-serif;
}

.salon-action-title-certificate {
    color: var(--color-primary);
}

.salon-action-subtitle {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

.salon-action-subtitle-certificate {
    color: rgba(163, 131, 107, 0.6);
}

.salon-action-arrow {
    color: #e2e8f0;
    flex-shrink: 0;
}

.salon-action-arrow-certificate {
    color: rgba(163, 131, 107, 0.3);
}

/* Экран сертификатов (новый дизайн) */
.certificate-screen-content {
    position: relative;
    min-height: 100vh;
    background: var(--color-bg);
    animation: slideInUp 0.4s ease-out;
    overflow: hidden;
}

.certificate-bg-decorations {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    pointer-events: none;
    z-index: 1;
}

.certificate-star-1 {
    position: absolute;
    top: 80px;
    right: 80px;
    color: var(--color-primary);
}

.certificate-star-2 {
    position: absolute;
    top: 240px;
    left: 40px;
    color: var(--color-primary);
}

.certificate-star-3 {
    position: absolute;
    bottom: 160px;
    right: 40px;
    color: var(--color-primary);
}

.certificate-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-container);
    padding-bottom: 0;
    position: relative;
    z-index: 20;
}

.certificate-back-btn {
    padding: 8px;
    color: #94a3b8;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.certificate-back-btn:active {
    transform: scale(0.9);
}

.certificate-header-title {
    font-size: 20px;
    font-weight: 900;
    color: #1e293b;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

.certificate-header-spacer {
    width: 40px;
}

.certificate-type-toggle {
    display: flex;
    background: #f1f5f9;
    border-radius: 9999px;
    padding: 6px;
    margin: var(--spacing-container);
    margin-top: 24px;
    border: 1px solid #e2e8f0;
    position: relative;
    z-index: 10;
}

.certificate-toggle-btn {
    flex: 1;
    padding: 16px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    border-radius: 9999px;
    border: none;
    background: transparent;
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.certificate-toggle-btn.active {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 10px 15px -3px rgba(163, 131, 107, 0.2);
}

.certificate-visual-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px var(--spacing-container);
    text-align: center;
    position: relative;
    z-index: 10;
}

.certificate-card-preview {
    position: relative;
    width: 100%;
    min-height: 300px;
    aspect-ratio: 1.58 / 1;
    background: white;
    border-radius: 45px;
    overflow: hidden;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(241, 245, 249, 0.5);
    margin-bottom: 48px;
    transition: transform 1s ease;
}

.certificate-card-preview:hover {
    transform: scale(1.05);
}

.certificate-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.certificate-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(163 131 107 / 62%), transparent);
}

.certificate-card-text {
    position: absolute;
    bottom: 40px;
    left: 40px;
    text-align: left;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.certificate-card-label {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.45em;
    opacity: 0.9;
    margin: 0 0 8px 0;
    font-family: 'Inter', sans-serif;
}

.certificate-card-title {
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

.certificate-card-sparkle {
    position: absolute;
    top: 40px;
    right: 40px;
    color: rgba(255, 255, 255, 0.4);
}

.certificate-title-section {
    margin-bottom: 48px;
}

.certificate-main-title {
    font-size: 36px;
    font-weight: 900;
    color: var(--color-heading);
    text-transform: uppercase;
    letter-spacing: -0.03em;
    line-height: 1;
    margin: 0 0 12px 0;
    font-family: 'Inter', sans-serif;
}

.certificate-subtitle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.certificate-subtitle-line {
    width: 32px;
    height: 1px;
    background: rgba(163, 131, 107, 0.3);
}

.certificate-subtitle {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.4em;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

.certificate-buy-btn {
    width: 100%;
    max-width: 260px;
    padding: 24px;
    background: var(--color-primary);
    color: white;
    border-radius: 32px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    border: none;
    cursor: pointer;
    box-shadow: 0 20px 25px -5px rgba(163, 131, 107, 0.4);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

.certificate-buy-btn:active {
    transform: scale(0.95);
}

.certificate-buy-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: translateX(-100%);
    transition: transform 1s ease;
}

.certificate-buy-btn:hover::before {
    transform: translateX(100%);
}

.certificate-description-bottom {
    padding: 0 48px 112px;
    text-align: center;
    position: relative;
    z-index: 10;
}

.certificate-description-text {
    font-size: 10px;
    font-weight: 900;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.6;
    max-width: 280px;
    margin: 0 auto;
    font-family: 'Inter', sans-serif;
}

/* Экран личного кабинета (новый дизайн) */
.profile-screen-content {
    background: var(--color-bg);
    min-height: calc(100vh - 120px);
    animation: slideInUp 0.4s ease-out;
    display: flex;
    flex-direction: column;
    padding: 0px;
}

.profile-user-card {
    background: rgba(241, 245, 249, 0.5);
    border-radius: 50px;
    padding: 40px;
    display: flex;
    align-items: center;
    gap: 32px;
    margin: 0 0 32px 0;
    border: 1px solid #f1f5f9;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.profile-user-info {
    flex: 1;
}

.profile-user-name {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px 0;
    font-family: 'Inter', sans-serif;
}

.profile-user-phone {
    font-size: 14px;
    font-weight: 500;
    color: #94a3b8;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 0 0 32px 0;
}

.profile-stat-card {
    background: white;
    border: 1px solid #f1f5f9;
    border-radius: 35px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-family: 'Inter', sans-serif;
}

.profile-stat-card:active {
    transform: scale(0.95);
}

.profile-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-stat-icon-bonus {
    background: rgba(251, 146, 60, 0.1);
    color: #fb923c;
}

.profile-stat-icon-deposit {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.profile-stat-content {
    text-align: center;
}

.profile-stat-label {
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #cbd5e1;
    margin: 0 0 2px 0;
    font-family: 'Inter', sans-serif;
}

.profile-stat-value {
    font-size: 16px;
    font-weight: 900;
    color: #1e293b;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

.profile-menu-list {
    padding: 0;
    flex: 1;
    overflow-y: auto;
    padding-bottom: 96px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px;
    background: white;
    border: none;
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.profile-menu-item:active {
    background: #f1f5f9;
}

.profile-menu-item-logout {
    margin-top: 24px;
    color: #f87171;
}

.profile-menu-item-logout:active {
    background: #fef2f2;
}

.profile-menu-icon {
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.profile-menu-icon-logout {
    background: #fef2f2;
    color: #f87171;
    border-color: #fee2e2;
}

.profile-menu-text {
    flex: 1;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
    color: #334155;
    font-family: 'Inter', sans-serif;
}

.profile-menu-text-logout {
    color: #f87171;
}

.profile-menu-arrow {
    color: #e2e8f0;
    flex-shrink: 0;
}

/* Новый дизайн карточек салонов (из React приложения) */
.salon-card-new {
    position: relative;
    background: var(--color-bg);
    border-radius: var(--radius-large);
    overflow: hidden;
    box-shadow: var(--shadow-medium);
    cursor: pointer;
    transition: all 0.3s ease;
    height: 288px;
}

.salon-card-new:active {
    transform: scale(0.97);
}

.salon-card-image-new {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}

.salon-card-new:hover .salon-card-image-new {
    transform: scale(1.1);
}

.salon-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
    z-index: 1;
}

.salon-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px;
    color: white;
    z-index: 2;
}

.salon-card-label {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    color: var(--color-primary);
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
}

.salon-card-title-new {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 12px 0;
    font-family: 'Inter', sans-serif;
}

.salon-card-address-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.9;
}

.salon-card-pin-icon {
    flex-shrink: 0;
}

.salon-card-address-new {
    font-size: 12px;
    font-weight: 600;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

.salon-info {
    flex: 1;
    padding: 0 4px;
}

.salon-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.salon-title-text {
    flex: 1;
    font-weight: 400;
}

span.salon-title-text {
    font-weight: 400;
}

.salon-arrow {
    color: #6d6d6d;
    font-size: 20px;
    font-weight: bold;
    margin-left: 8px;
    flex-shrink: 0;
}

.salon-details {
    font-size: 14px;
    color: var(--color-text-light);
    line-height: 1.5;
}

.salon-details div {
    margin-bottom: 4px;
}

/* Карточка услуги */
.service-card {
    padding: 16px 20px;
    border-radius: var(--radius-medium);
    border: 1px solid rgba(163, 131, 107, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    background: white;
    margin-bottom: 12px;
}

/* Новый стиль карточки услуги */
.service-card-new {
    padding: 20px;
    border-radius: 30px;
    border: 1px solid rgb(248 250 252);
    background: white;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
    margin-bottom: 12px;
    cursor: pointer;
}

.service-card-new:hover {
    transform: scale(0.98);
}

.service-card-new:active {
    transform: scale(0.96);
}

.service-card-new.selected {
    background: rgba(163, 131, 107, 0.05);
    border: 1px solid rgba(163, 131, 107, 0.4);
    box-shadow: 0 1px 3px 0 rgba(163, 131, 107, 0.2);
}

.service-card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.service-card-main {
    flex: 1;
    padding-right: 16px;
}

.service-title-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.service-title-new {
    font-size: 14px;
    font-weight: 700;
    color: rgb(30 41 59);
    line-height: 1.4;
    margin: 0;
    flex: 1;
}

.service-info-icon-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.service-price-duration-block {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgb(148 163 184);
}

.service-price-new {
    font-size: 14px;
    font-weight: 900;
    color: rgb(163 131 107);
    text-transform: none;
    letter-spacing: 0;
}

.service-duration-new {
    font-size: 10px;
    font-weight: 700;
    color: rgb(148 163 184);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.service-add-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(248 250 252);
    color: rgb(203 213 225);
    transition: all 0.2s;
    flex-shrink: 0;
}

.service-card-new.selected .service-add-btn {
    background: rgb(163, 131, 107);
    color: white;
}

.service-card.service-item {
    border: 1px solid rgba(163, 131, 107, 0.1);
    border-radius: var(--radius-medium);
    transition: all 0.2s;
    padding: 16px 20px;
    background: white;
    margin-bottom: 12px;
}

.service-card.service-item:hover {
    background: rgba(163, 131, 107, 0.05);
    border-color: rgba(163, 131, 107, 0.2);
}

.service-card.service-item:active {
    background: rgba(163, 131, 107, 0.1);
}

.service-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.service-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-heading);
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}

.service-course-badge {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(163, 131, 107, 0.1);
    border: 1px solid rgba(163, 131, 107, 0.2);
    border-radius: var(--radius-small);
    font-size: 11px;
    font-weight: 500;
    color: var(--color-primary);
    text-transform: lowercase;
    flex-shrink: 0;
}

.service-info-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.service-info-icon:hover {
    transform: scale(1.1);
}

.service-info-icon svg {
    width: 100%;
    height: 100%;
}

.service-subtitle {
    font-size: 14px;
    color: var(--color-text-light);
    margin-bottom: 12px;
}

/* Блок с ценой и временем (как на основном сайте) */
.service-price-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
}

.service-duration {
    font-weight: 300;
    display: inline-block;
    width: 120px;
    font-size: 14px;
    color: var(--color-text-light);
    text-align: left;
    flex-shrink: 0;
}

.service-price {
    font-size: 15px;
    color: var(--color-text);
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

/* Меню салона */
.salon-menu-container {
    padding: 20px;
}

.salon-menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 -20px;
}

.menu-button {
    width: 100%;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow);
}

.menu-button:hover {
    background: var(--color-bg-light);
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
}

.menu-button:active {
    transform: translateY(0);
    box-shadow: var(--shadow);
}

.menu-button-text {
    flex: 1;
    text-align: left;
}

.menu-button-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.menu-button-icon svg {
    width: 100%;
    height: 100%;
}

.menu-button-arrow {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
}

.menu-button-arrow img {
    width: 100%;
    height: 100%;
}

/* Блок подарочного сертификата */
.certificate-block {
    margin: 0 0px 20px 0px;
}

.certificate-button {
    width: 100%;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid #6d6d6d;
    border-radius: var(--border-radius);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
}

.certificate-button:hover {
    background: var(--color-bg-light);
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
}

.certificate-button:active {
    transform: translateY(0);
    box-shadow: var(--shadow);
}

.certificate-button-content {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.certificate-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.certificate-icon svg {
    width: 100%;
    height: 100%;
}

.certificate-text {
    flex: 1;
    text-align: left;
    color: var(--color-text);
}

.certificate-arrow {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Экран выбора типа сертификата */
.certificate-selection-container {
    padding: 0px;
}

.certificate-description {
    font-size: 15px;
    font-weight: 300;
    color: var(--color-text);
    line-height: 1.6;
    margin-bottom: 24px;
    text-align: left;
}

.certificate-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.certificate-option-button {
    width: 100%;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    box-shadow: var(--shadow);
}

.certificate-option-button:hover {
    background: var(--color-bg-light);
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
}

.certificate-option-button:active {
    transform: translateY(0);
    box-shadow: var(--shadow);
}

.certificate-option-content {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.certificate-option-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.certificate-option-icon svg {
    width: 100%;
    height: 100%;
}

.certificate-option-text {
    flex: 1;
    text-align: left;
    color: var(--color-text);
}

.certificate-option-arrow {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Формы сертификатов */
.certificate-form-container {
    padding: 0 24px; /* px-6 */
    margin-top: 120px;
}

.certificate-form-description {
    font-size: 15px;
    font-weight: 300;
    color: var(--color-text);
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: left;
}

.cert-form-step {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cert-form-section-title {
    font-size: 10px; /* text-[10px] */
    font-weight: 900; /* font-black */
    color: rgb(30, 41, 59); /* text-slate-800 */
    text-transform: uppercase;
    letter-spacing: 0.2em; /* tracking-widest */
    text-align: left;
    padding-bottom: 8px; /* pb-2 */
    margin-bottom: 16px; /* mb-4 */
    border-bottom: 1px solid rgba(163, 131, 107, 0.2); /* border-b border-[#A3836B]/20 */
}

.cert-option-btn {
    width: 100%;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: var(--shadow);
}

.cert-option-btn:hover {
    background: var(--color-bg-light);
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
}

.cert-option-btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow);
}

/* Индикатор шагов с градиентом */
.cert-steps-indicator-gradient {
    padding: 24px 20px;
}

.cert-gradient-track {
    position: relative;
    height: 4px;
    background: none;
    border-radius: 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cert-gradient-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #A78165, #c49d7a);
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.cert-step-dot {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    transform: scale(1);
}

.cert-step-dot:hover {
    transform: scale(1.1);
}

.cert-step-dot.active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    transform: scale(1.2);
    box-shadow: 0 4px 12px rgba(167, 129, 101, 0.4);
}

.cert-step-dot.completed {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.cert-step-dot.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.cert-step-dot.disabled:hover {
    transform: scale(1);
}

.cert-step-dot-inner {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-light);
    transition: color 0.3s;
}

.cert-step-dot.active .cert-step-dot-inner,
.cert-step-dot.completed .cert-step-dot-inner {
    color: #fff;
}

.cert-step-line {
    flex: 1;
    height: 3px;
    background: #e0e0e0;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0 8px;
}

.cert-step-line.active {
    background: linear-gradient(90deg, var(--color-primary), #c49d7a);
    box-shadow: 0 0 8px rgba(167, 129, 101, 0.3);
}

/* Анимация пульсации для градиента */
@keyframes gradientPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

.cert-gradient-fill {
    animation: gradientPulse 2s ease-in-out infinite;
}

/* Превью карты */
.cert-design-preview {
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
}

.cert-preview-sticky {
    position: relative;
    z-index: 10;
    margin-top: -80px; /* Фото заходит под progress indicator */
    margin-bottom: 40px; /* mb-10 */
    padding: 0;
}

.cert-preview-card {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1.58 / 1; /* aspect-[1.58/1] */
    border-radius: 35px; /* rounded-[35px] */
    background: linear-gradient(135deg, #A78165, #8d6b52);
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.15); /* shadow-[0_30px_60px_-15px_rgba(0,0,0,0.15)] */
    margin: 0 auto;
}

.cert-preview-nominal {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: 24px;
    font-weight: 600;
    color: white;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Варианты цветов */
.cert-color-options {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 8px 0;
    -webkit-overflow-scrolling: touch;
}

.cert-color-option {
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
}

.cert-color-circle {
    width: 48px; /* w-12 */
    height: 48px; /* h-12 */
    border-radius: 50%; /* rounded-full */
    border: 4px solid white; /* border-4 border-white для неактивных */
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* shadow-sm */
}

.cert-color-option.active .cert-color-circle {
    border-color: rgb(163, 131, 107); /* border-[#A3836B] */
    transform: scale(1.1); /* scale-110 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}


/* Варианты стилей */
.cert-style-options {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 8px 0;
    -webkit-overflow-scrolling: touch;
}

.cert-style-option {
    flex-shrink: 0;
    width: 80px; /* w-20 */
    height: 80px; /* h-20 */
    border-radius: 16px; /* rounded-2xl */
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid rgb(241, 245, 249); /* border-slate-100 */
    overflow: hidden;
}

.cert-style-option.active {
    border-color: rgb(163, 131, 107); /* border-[#A3836B] */
    box-shadow: 0 0 0 2px rgba(163, 131, 107, 0.1);
}

.cert-style-option.cert-style-upload {
    display: none;
}

.cert-style-image {
    width: 83%;
    height: 53%;
    object-fit: cover;
    border-radius: 10px;
}

.cert-preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.8;
    border-radius: 12px;
    z-index: 1;
}

.cert-design-label {
    font-size: 10px; /* text-[10px] */
    font-weight: 900; /* font-black */
    color: rgb(163, 131, 107); /* text-[#A3836B] */
    text-transform: uppercase;
    letter-spacing: 0.3em; /* tracking-[0.3em] */
    margin-bottom: 16px; /* mb-4 */
}

.cert-design-section {
    margin-bottom: 24px;
}

/* Выбор номинала */
.cert-nominal-input-section {
    margin-bottom: 24px;
}

.cert-nominal-input-label {
    font-size: 10px; /* text-[10px] */
    font-weight: 900; /* font-black */
    color: rgb(163, 131, 107); /* text-[#A3836B] */
    text-transform: uppercase;
    letter-spacing: 0.3em; /* tracking-[0.3em] */
    margin-bottom: 16px; /* mb-4 */
}

.cert-nominal-input-wrapper {
    position: relative;
    margin-bottom: 32px; /* mb-8 */
}

.cert-nominal-input {
    width: 100%;
    background: rgb(248, 250, 252);
    border: none;
    border-radius: 24px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 900;
    color: rgb(30, 41, 59);
    outline: none;
    transition: all 0.3s;
}

.cert-nominal-input:focus {
    box-shadow: 0 0 0 2px rgba(163, 131, 107, 0.2); /* focus:ring-2 focus:ring-[#A3836B]/20 */
}

.cert-nominal-input::placeholder {
    color: rgb(148, 163, 184); /* text-slate-400 */
}

.cert-nominal-currency {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    font-weight: 900;
    color: rgb(148, 163, 184);
    pointer-events: none;
}

.cert-nominal-preset-section {
    margin-bottom: 24px;
}

.cert-nominal-label {
    font-size: 10px; /* text-[10px] */
    font-weight: 900; /* font-black */
    color: rgb(163, 131, 107); /* text-[#A3836B] */
    text-transform: uppercase;
    letter-spacing: 0.3em; /* tracking-[0.3em] */
    margin-bottom: 16px; /* mb-4 */
}

.cert-nominal-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.cert-nominal-preset {
    padding: 10px 5px;
    border-radius: 24px;
    border: 1px solid rgb(241, 245, 249);
    background: white;
    font-size: 14px;
    font-weight: 700;
    color: rgb(71, 85, 105);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.cert-nominal-preset:hover {
    border-color: rgb(163, 131, 107);
    background: rgba(163, 131, 107, 0.05);
}

.cert-nominal-preset.active {
    border-color: rgb(163, 131, 107); /* border-[#A3836B] */
    background: rgb(163, 131, 107); /* bg-[#A3836B] */
    color: white;
}

/* Выбор получателя */
.cert-recipient-options {
    display: flex;
    background: rgb(248, 250, 252); /* bg-slate-50 */
    border-radius: 9999px; /* rounded-full */
    padding: 6px; /* p-1.5 */
    margin-bottom: 24px;
    gap: 0;
}

.cert-recipient-btn {
    flex: 1;
    padding: 16px; /* py-4 */
    border: none;
    border-radius: 9999px; /* rounded-full */
    background: transparent;
    font-size: 10px; /* text-[10px] */
    font-weight: 900; /* font-black */
    text-transform: uppercase;
    letter-spacing: 0.2em; /* tracking-widest */
    color: rgb(148, 163, 184); /* text-slate-300 */
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.cert-recipient-btn.active {
    background: rgb(163, 131, 107); /* bg-[#A3836B] */
    color: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}

.cert-recipient-hint {
    font-size: 12px;
    color: var(--color-text-light);
    margin-top: 8px;
    margin-bottom: 16px;
}

.cert-add-message-btn {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.2s;
}

.cert-add-message-btn:hover {
    background: var(--color-bg-light);
}

.cert-add-icon {
    font-size: 20px;
    font-weight: 300;
    color: var(--color-primary);
}

.cert-message-textarea {
    margin-top: 0;
    resize: none;
    border-radius: 40px; /* rounded-[40px] */
    padding: 24px; /* p-6 */
    min-height: 120px; /* min-h-[120px] */
}

/* Выбор даты */
.cert-date-options {
    display: flex;
    background: rgb(248, 250, 252); /* bg-slate-50 */
    border-radius: 9999px; /* rounded-full */
    padding: 6px; /* p-1.5 */
    margin-bottom: 24px;
    gap: 0;
}

.cert-date-option-btn {
    flex: 1;
    padding: 16px; /* py-4 */
    border: none;
    border-radius: 9999px; /* rounded-full */
    background: transparent;
    font-size: 10px; /* text-[10px] */
    font-weight: 900; /* font-black */
    text-transform: uppercase;
    letter-spacing: 0.2em; /* tracking-widest */
    color: rgb(148, 163, 184); /* text-slate-300 */
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.cert-date-option-btn.active {
    background: rgb(163, 131, 107); /* bg-[#A3836B] */
    color: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}

.cert-date-info {
    padding: 24px; /* p-6 */
    background: rgb(248, 250, 252); /* bg-slate-50 */
    border-radius: 35px; /* rounded-[35px] */
    border: 1px solid rgb(241, 245, 249); /* border-slate-100 */
    font-size: 14px; /* text-sm */
    font-weight: 700; /* font-bold */
    color: rgb(148, 163, 184); /* text-slate-400 */
    line-height: 1.6; /* leading-relaxed */
    margin-bottom: 24px;
}

/* Поле ввода даты/времени */
#cert-electronic-date-input {
    width: 100%;
    background: rgb(248, 250, 252); /* bg-slate-50 */
    border: none;
    border-radius: 24px; /* rounded-3xl */
    padding: 24px; /* p-6 */
    font-size: 14px; /* text-sm */
    font-weight: 700; /* font-bold */
    color: rgb(30, 41, 59); /* text-slate-800 */
    outline: none;
    transition: all 0.3s;
    margin-top: 24px;
}

#cert-electronic-date-input:focus {
    box-shadow: 0 0 0 2px rgba(163, 131, 107, 0.2); /* focus:ring-2 focus:ring-[#A3836B]/20 */
}

.cert-date-info div:first-child {
    color: var(--color-text-light);
    margin-bottom: 4px;
}

.cert-date-info div:last-child {
    font-weight: 500;
    color: var(--color-text);
}

/* Кнопка Далее - контейнер */
.cert-next-btn-container {
    padding: 24px 0px;
    background: white;
    padding-bottom: 48px;
    position: relative;
    z-index: 10;
}

/* Кнопка Далее */
.cert-next-btn {
    width: 100%;
    padding: 12px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    background: rgb(163, 131, 107);
    color: white;
    border: none;
    border-radius: 35px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transition: all 0.2s;
    cursor: pointer;
}

.cert-next-btn:active {
    transform: scale(0.95); /* active:scale-95 */
}

.cert-next-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Цветовые варианты для превью карты */
.cert-preview-card.cert-color-red {
    background: linear-gradient(135deg, #A78165, #8d6b52);
}

.cert-preview-card.cert-color-pink {
    background: linear-gradient(135deg, #ff9a9e, #fecfef);
}

.cert-preview-card.cert-color-blue {
    background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
}

.cert-preview-card.cert-color-purple {
    background: linear-gradient(135deg, #d299c2, #fef9d7);
}

.cert-preview-card.cert-color-orange {
    background: linear-gradient(135deg, #fad961, #f76b1c);
}

.cert-preview-card.cert-color-green {
    background: linear-gradient(135deg, #84fab0, #8fd3f4);
}

/* Заголовок меню салона (красный фон) */
.salon-menu-header {
    background: var(--color-primary);
    color: white;
    padding: 16px 20px;
    margin: -20px -20px 20px -20px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    border-radius: 10px;
}

.service-action {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--color-primary);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* Карточка мастера */
.master-card {
    display: flex;
    gap: 16px;
    align-items: center;
    position: relative;
}

.master-image-wrapper {
    position: relative;
    flex-shrink: 0;
}

.master-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-bg-light);
    background-size: cover;
    background-position: center;
}

.master-info-icon {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.2s;
}

.master-info-icon:hover {
    transform: scale(1.1);
}

.master-info-icon svg {
    width: 100%;
    height: 100%;
}

.master-info {
    flex: 1;
}

.master-name {
    font-size: 16px;
    font-weight: 300;
    color: var(--color-text);
    margin-bottom: 0;
}

.master-specialization {
    font-size: 14px;
    color: var(--color-text-light);
    font-weight: 200;
}

/* Модальное окно карточки мастера */
.master-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.master-detail-modal.hidden {
    display: none;
}

.master-detail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.master-detail-content {
    position: relative;
    width: 90%;
    max-width: 500px;
    height: 90vh;
    background: white;
    border-radius: 16px;
    padding: 24px;
    overflow-y: auto;
    z-index: 10001;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.master-detail-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    transition: all 0.2s;
}

.master-detail-close:hover {
    background: #e0e0e0;
    transform: scale(1.1);
}

.master-detail-photo {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.master-detail-image {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: var(--color-bg-light);
    background-size: cover;
    background-position: center;
    border: none;
}

.master-detail-header {
    text-align: center;
    margin-bottom: 24px;
}

.master-detail-name {
    font-size: 24px;
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.master-detail-specialization {
    display: inline-block;
    padding: 0;
    border: 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 12px;
}

.master-detail-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
    color: var(--color-primary);
}

.master-detail-rating .star-icon {
    width: 20px;
    height: 20px;
}

.master-detail-icons {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e0e0e0;
}

.master-detail-icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 4px 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    color: #6d6d6d;
    min-width: 0;
}

.master-detail-icon-btn:active {
    opacity: 0.7;
    transform: scale(0.95);
}

.master-detail-icon-wrapper {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.master-detail-icon-wrapper svg {
    width: 100%;
    height: 100%;
}

.master-detail-icon-btn span {
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
    color: inherit;
}

/* Стрелочка наверх */
.master-detail-scroll-top {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    box-shadow: 0 4px 12px rgba(167, 129, 101, 0.3);
    transition: all 0.3s;
    opacity: 0;
    pointer-events: none;
}

.master-detail-scroll-top:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

.master-detail-scroll-top:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(167, 129, 101, 0.4);
}

.master-detail-scroll-top:active {
    transform: translateY(0);
}

.master-detail-scroll-top svg {
    width: 24px;
    height: 24px;
}

.master-detail-accordion {
    margin-bottom: 16px;
}

.master-detail-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #f5f5f5;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text);
    transition: background 0.2s;
}

.master-detail-accordion-header:hover {
    background: #e0e0e0;
}

.master-detail-accordion-arrow {
    transition: transform 0.3s;
    font-size: 12px;
}

.master-detail-accordion-header.active .master-detail-accordion-arrow {
    transform: rotate(180deg);
}

.master-detail-accordion-content {
    padding: 16px;
    background: white;
    border-radius: 0 0 8px 8px;
}

.master-detail-accordion-content.hidden {
    display: none;
}

.master-detail-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text);
}

.master-detail-reviews {
    margin-bottom: 24px;
}

.master-detail-reviews-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #f5f5f5;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text);
    transition: background 0.2s;
}

.master-detail-reviews-header:hover {
    background: #e0e0e0;
}

.master-detail-reviews-content {
    padding: 16px;
    background: white;
    border-radius: 0 0 8px 8px;
}

.master-detail-reviews-content.hidden {
    display: none;
}

.master-review-form {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e0e0e0;
}

.master-review-form-title {
    font-size: 14px;
    color: var(--color-primary);
    margin-bottom: 12px;
    font-weight: 500;
}

.master-review-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 100px;
    margin-bottom: 12px;
}

.master-review-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.master-review-submit {
    width: 100%;
}

.master-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.master-review-item {
    padding: 16px;
    background: #f9f9f9;
    border-radius: 8px;
}

.master-review-author {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 8px;
}

.master-review-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.master-review-stars .star-icon {
    width: 16px;
    height: 16px;
}

.master-review-date {
    font-size: 12px;
    color: var(--color-text-light);
    margin-bottom: 8px;
}

.master-review-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text);
}

.master-detail-book-btn {
    width: 100%;
    margin-top: 24px;
}

/* Модальное окно слайдера */
.master-gallery-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
}

.master-gallery-modal.hidden {
    display: none;
}

.master-gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(4px);
}

.master-gallery-content {
    position: relative;
    width: 90%;
    max-width: 600px;
    background: white;
    border-radius: 16px;
    padding: 24px;
    z-index: 10003;
}

.master-gallery-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    transition: all 0.2s;
    z-index: 10004;
}

.master-gallery-close:hover {
    background: #e0e0e0;
    transform: scale(1.1);
}

.master-gallery-header {
    margin-bottom: 20px;
    text-align: center;
}

.master-gallery-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text);
}

.master-gallery-slider {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.master-gallery-prev,
.master-gallery-next {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.master-gallery-prev:hover,
.master-gallery-next:hover {
    /*background: var(--color-hover);*/
    transform: scale(1.1);
}

.master-gallery-image-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    /*background: #f5f5f5;*/
    border-radius: 8px;
    overflow: hidden;
}

.master-gallery-image {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
}

.master-gallery-counter {
    text-align: center;
    font-size: 14px;
    color: var(--color-text-light);
}

/* Модальное окно информации об услуге */
.service-info-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-info-modal.hidden {
    display: none;
}

.service-info-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.service-info-content {
    position: relative;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    background: white;
    border-radius: 16px;
    padding: 24px;
    overflow-y: auto;
    z-index: 10001;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.service-info-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    transition: all 0.2s;
    z-index: 10002;
}

.service-info-close:hover {
    background: #e0e0e0;
    transform: scale(1.1);
}

.service-info-header {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e0e0e0;
}

.service-info-logo {
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
}

.service-info-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text);
    text-transform: uppercase;
    line-height: 1.3;
}

/* Аккордеон для каталога услуг (в модалке сертификата) */
.services-catalog-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    outline: none;
}

.services-catalog-details > summary::-webkit-details-marker {
    display: none;
}

.services-catalog-details > summary::after {
    content: "▾";
    font-size: 14px;
    color: inherit; /* цвет как у текста */
    line-height: 1;
    transform: rotate(-90deg); /* закрыто: стрелка вправо */
    transition: transform 0.15s ease;
    flex: 0 0 auto;
}

.services-catalog-details[open] > summary::after {
    transform: rotate(0deg); /* открыто: стрелка вниз */
}

.service-info-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text);
}

.service-info-body p {
    margin-bottom: 16px;
}

.service-info-body p:last-child {
    margin-bottom: 0;
}

.service-info-body strong,
.service-info-body b {
    font-weight: 600;
    color: var(--color-primary);
}

.service-info-body em,
.service-info-body i {
    font-style: italic;
}

.service-info-body ul,
.service-info-body ol {
    margin: 16px 0;
    padding-left: 24px;
}

.service-info-body li {
    margin-bottom: 8px;
}

.service-info-body li:last-child {
    margin-bottom: 0;
}

.service-info-body h1,
.service-info-body h2,
.service-info-body h3,
.service-info-body h4,
.service-info-body h5,
.service-info-body h6 {
    font-weight: 600;
    color: var(--color-text);
    margin: 16px 0 8px 0;
}

.service-info-body h1:first-child,
.service-info-body h2:first-child,
.service-info-body h3:first-child {
    margin-top: 0;
}

.service-info-warning {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 12px 16px;
    margin: 16px 0;
    border-radius: 4px;
    font-weight: 600;
    color: #856404;
}

/* Выбор даты и времени */
.datetime-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 120px; /* Отступ для нижнего меню и кнопки записи */
}

/* Карточка услуги и мастера на экране выбора времени */
.datetime-service-card {
    background: rgba(163, 131, 107, 0.1);
    border-radius: var(--radius-medium);
    padding: 16px 40px;
    margin-bottom: 16px;
}

.datetime-service-card.hidden {
    display: none;
}

.datetime-service-name {
    font-size: 14px;
    font-weight: 700;
    color: rgb(163, 131, 107);
    text-transform: none;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
    line-height: 1.4;
}

.datetime-master-name {
    font-size: 12px;
    font-weight: 600;
    color: rgb(30, 41, 59);
    line-height: 1.4;
}

.date-picker {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.calendar-month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}

.calendar-month-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    border-radius: var(--border-radius);
}

.calendar-month-btn:hover {
    background: var(--color-bg-light);
}

.calendar-month-btn img {
    width: 20px;
    height: 20px;
}

.calendar-month-label {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text);
    text-transform: capitalize;
}

.calendar-content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.date-item-empty {
    visibility: hidden;
}

.date-header {
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    color: var(--color-text-light);
    padding: 8px;
}

.date-item {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #a3836b;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.date-item:active {
    transform: scale(0.95);
}

.date-item.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.date-item.checking-availability {
    opacity: 0.6 !important;
    position: relative;
    pointer-events: none !important;
    cursor: wait !important;
}

.date-item.date-item-selected {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
    font-weight: 600;
}

.date-item.date-item-today {
    border-color: var(--color-primary);
    border-width: 2px;
}

.date-item.date-item-unavailable {
    opacity: 0.3;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #a3836b;
    border-radius: var(--border-radius);
    font-size: 14px;
    transition: all 0.2s;
    cursor: not-allowed;
}

.date-item.date-item-today.date-item-unavailable {
    background-color: #a78165;
    color: #ffffff;
    opacity: 1;
}

.date-item.checking-availability::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    animation: pulse 1.5s ease-in-out infinite;
}

/* Индикатор загрузки календаря */
.calendar-loading-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    min-height: 200px;
}

.calendar-loading-icon {
    animation: calendarPulse 1.5s ease-in-out infinite;
}

.calendar-loading-icon svg {
    display: block;
}

@keyframes calendarPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

/* Прелоадер для загрузки дат */
.date-availability-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-top: 16px;
    gap: 12px;
}

.date-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(167, 129, 101, 0.2);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.date-loading-text {
    font-size: 14px;
    color: var(--color-text-light);
    font-weight: 300;
    text-align: center;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.date-item.today {
    border-color: var(--color-primary);
    font-weight: 600;
}

.date-item.selected {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* Уведомление об акции дня */
.daily-promotion-notification {
    margin: 16px 0px;
    padding: 16px;
    background: linear-gradient(135deg, #A3836B 0%, #c49d7a 100%);
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(163, 131, 107, 0.3);
    animation: slideDown 0.3s ease-out;
}

.daily-promotion-notification.hidden {
    display: none;
}

.promotion-notification-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.promotion-notification-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.promotion-notification-icon svg {
    width: 48px;
    height: 48px;
    stroke: #fff;
}

.promotion-notification-text {
    flex: 1;
}

.promotion-notification-title {
    font-size: 14px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.promotion-notification-message {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.4;
}

.promotion-notification-btn {
    flex-shrink: 0;
    padding: 10px 16px;
    background: white;
    color: var(--color-primary);
    border: none;
    border-radius: 3rem;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
}

.promotion-notification-btn:active {
    transform: scale(0.95);
    background: #f5f5f5;
}

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

.time-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-bottom: 100px; /* Отступ для нижнего меню и кнопки записи */
}

@media (max-width: 480px) {
    .time-slots {
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
    }
}

.time-slot {
    padding: 10px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    font-weight: 400;
    background: white;
    color: var(--color-text);
}

/* Стили для повторной записи */
.time-slots-repeat {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding-bottom: 0px !important;
}

.time-slots-repeat .time-slot {
    border-radius: 24px !important;
}

@media (max-width: 480px) {
    .time-slot {
        padding: 8px 4px;
        font-size: 12px;
    }
}

.time-slot:active {
    transform: scale(0.95);
}

.time-slot.disabled {
    background: #F1F5F9;
    color: #94A3B8;
    border-color: #E2E8F0;
    opacity: 1;
    cursor: not-allowed;
}

.time-slot.selected {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.time-slot.blocked {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    opacity: 0.8;
}

.time-slot.promotion {
    background: #5bad24; /* Зеленый цвет для акции дня (как в ajax.php класс 'st') */
    color: white;
    border-color: #5bad24;
    font-weight: 500;
}

/* Форма бронирования */
.booking-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px;
}

.booking-confirmation-warning {
    font-size: 14px;
    font-weight: 400;
    color: #E51B21;
    padding: 12px 16px;
    margin-bottom: 16px;
    line-height: 1.5;
    background: #fff;
    border-left: 3px solid #E51B21;
}

.booking-consent-text {
    font-size: 12px;
    font-weight: 300;
    color: #6D6E71;
    padding: 12px 0 0 0;
    margin-top: 8px;
    line-height: 1.5;
}

/* Новый формат списка услуг */
.booking-services-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-bg);
    border-radius: var(--radius-medium);
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--color-border);
}

.booking-service-card {
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border);
}

.booking-service-card:last-child {
    border-bottom: none;
}

.booking-service-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 16px;
}

.booking-service-payment-notice {
    font-size: 14px;
    font-weight: 300;
    color: #E51B21;
    padding: 0 0 12px 0;
    margin: 0;
    line-height: 1.4;
}

.booking-service-title {
    font-size: 14px;
    font-weight: 700;
    color: rgb(163, 131, 107);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.4;
    flex: 1;
}

.booking-service-price {
    font-size: 16px;
    font-weight: 700;
    color: rgb(30, 41, 59);
    white-space: nowrap;
}

.booking-service-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.booking-service-datetime {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgb(148, 163, 184);
}

.booking-service-datetime svg {
    width: 16px;
    height: 16px;
    color: rgb(148, 163, 184);
    flex-shrink: 0;
}

.booking-service-duration {
    font-size: 12px;
    font-weight: 500;
    color: rgb(148, 163, 184);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-top: 8px;
}

.booking-service-duration .booking-duration-value {
    color: #E51B21;
    font-weight: 400;
    font-size: 14px;
    text-transform: none;
}

.booking-service-master {
    font-size: 12px;
    font-weight: 500;
    color: rgb(148, 163, 184);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Итоговая сумма */
.booking-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    margin-bottom: 16px;
}

.booking-total-label {
    font-size: 16px;
    font-weight: 600;
    color: rgb(30, 41, 59);
}

.booking-total-price {
    font-size: 20px;
    font-weight: 700;
    color: rgb(30, 41, 59);
}

/* Кнопка подтверждения */
.booking-confirm-btn {
    width: 100%;
    padding: 16px 24px;
    background: rgb(163, 131, 107);
    color: white;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    border: none;
    border-radius: var(--radius-medium);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
}

.booking-confirm-btn:hover {
    background: rgb(143, 115, 95);
    transform: translateY(-2px);
}

.booking-confirm-btn:active {
    transform: scale(0.98);
}

.booking-summary {
    background: var(--color-bg-light);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 8px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 14px;
}

.summary-item:last-child {
    margin-bottom: 0;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.summary-item .label {
    color: var(--color-text-light);
}

.summary-item .value {
    font-weight: 600;
    color: var(--color-text);
    text-align: right;
}

.summary-item .value.price {
    color: var(--color-primary);
    font-size: 18px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 0px;
}

.form-group input,
.form-group textarea {
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 24px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s;
    margin: 0px;
    margin-bottom: 16px;
    font-weight: 400;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

/* Кнопки */
.btn-primary {
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    margin-top: 0;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 24px;
}

.btn-primary:active {
    background: var(--color-primary-hover);
    transform: scale(0.98);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

button.btn-secondary {
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 3rem;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    margin-top: 0 !important;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-top: 16px; */
}

/* Кнопки действий в списке записей */
.booking-action-btn {
    width: 100%;
    margin-top: 12px;
    font-weight: 600;
}

.booking-confirm-btn {
    background: #585858;
}

.booking-cancel-btn {
    background: #585858 !important;
    color: white !important;
}

/* Экран успеха */
.success-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 40px 20px;
}

.success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-success);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 24px;
}

.success-icon.is-error {
    background: #dc2626;
}

.booking-result-status {
    font-size: 18px;
    font-weight: 600;
    margin-top: 16px;
    margin-bottom: 24px;
    color: var(--color-text);
}

.booking-result-help {
    width: 100%;
    max-width: 400px;
    background: #fff5f5;
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: var(--border-radius);
    padding: 16px;
    margin-bottom: 18px;
    text-align: left;
}

.booking-result-help-title {
    font-weight: 700;
    color: #dc2626;
    margin-bottom: 6px;
}

.booking-result-help-text {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 10px;
}

.booking-result-help-phones {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.booking-result-help-phones .phone-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #111827;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    padding: 0;
    transition: opacity 0.2s;
}

.booking-result-help-phones .phone-item:hover {
    opacity: 0.8;
}

.booking-result-help-phones .phone-item:active {
    opacity: 0.6;
}

.booking-result-help-phones .phone-icon {
    width: 20px;
    height: 20px;
    color: #8B4513;
    flex-shrink: 0;
}

.booking-result-help-phones .phone-item span {
    color: #111827;
}

.success-container h1 {
    font-size: 24px;
    margin-bottom: 16px;
    color: var(--color-text);
}

.success-container p {
    font-size: 16px;
    color: var(--color-text-light);
    margin-bottom: 24px;
    max-width: 400px;
}

.booking-info {
    background: var(--color-bg-light);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 24px;
    width: 100%;
    max-width: 400px;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.info-item strong {
    font-size: 14px;
    color: var(--color-text-light);
}

.info-item span {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary);
}

/* Личный кабинет */
.profile-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.profile-info {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 20px;
    background: var(--color-bg-light);
    border-radius: var(--border-radius);
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 600;
    flex-shrink: 0;
}

.profile-details h2 {
    font-size: 20px;
    margin-bottom: 4px;
}

.profile-details p {
    font-size: 14px;
    color: var(--color-text-light);
}

/* Блок бронирования времени */
.profile-booking-info {
    background: #585858;
    color: white;
    padding: 16px;
    text-align: center;
    border-radius: var(--border-radius);
	    display: none;
}

.booking-info-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

.booking-info-status {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: 8px;
}

.booking-info-link {
    margin-bottom: 8px;
}

.booking-info-link a {
    color: var(--color-secondary);
    text-decoration: underline;
    font-size: 14px;
}

.booking-info-note {
    font-size: 12px;
    color: var(--color-secondary);
    margin-top: 8px;
}

/* Информация о бонусах */
.profile-bonus-info {
    padding: 16px;
    text-align: center;
    background: var(--color-bg-light);
    border-radius: var(--border-radius);
	display: none;
}

.profile-bonus-info p {
    font-size: 14px;
    color: var(--color-text);
    margin: 0;
}

.profile-bonus-info a {
    color: var(--color-primary);
    text-decoration: underline;
}

.profile-menu {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.profile-menu-item {
    display: flex
;
    align-items: center;
    justify-content: space-between;
    padding: 16px 12px;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.2s;
    width: 100%;
    text-align: left;
}

.profile-menu-item:hover {
    background: var(--color-bg-light);
}

.profile-menu-item-logout {
    color: var(--color-error);
}

.menu-item-text {
    font-size: 16px;
    color: var(--color-text);
    flex: 1;
}

.menu-item-arrow {
    width: 20px;
    height: 20px;
    opacity: 0.5;
}

.profile-menu-hr {
    width: 350px;
    margin: 0 auto;
    opacity: 0.5;
    border: none;
    border-top: 1px solid var(--color-border);
}

.menu-item-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-right: 12px;
    opacity: 0.7;
}

.profile-menu-item-logout .menu-item-icon {
    opacity: 1;
}

/* Редактирование профиля */
.profile-edit-container {
    padding: var(--spacing-container);
    padding-top: 16px;
    min-height: calc(100vh - 200px);
}

.profile-edit-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 8px;
    display: block;
}

.form-note {
    font-size: 14px;
    font-weight: 300;
    color: var(--color-text-light);
    line-height: 1.5;
    margin-top: 8px;
}

/* Курсовые процедуры */
.course-progress {
    margin-top: 12px;
}

.course-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--color-bg-light);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.course-progress-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.course-progress-text {
    font-size: 14px;
    color: var(--color-text-light);
    text-align: center;
}

/* Депозит */
.deposit-container {
    padding: 24px var(--spacing-container);
    padding-top: 24px;
    min-height: calc(100vh - 200px);
}

/* Переключатель типа депозита (новый дизайн) */
.deposit-tabs-new {
    display: flex;
    background: rgb(248 250 252); /* bg-slate-50 */
    border-radius: 9999px; /* rounded-full */
    padding: 6px; /* p-1.5 */
    margin: 0 0 32px 0; /* mb-8 */
    overflow: hidden;
}

.deposit-tab-new {
    flex: 1;
    padding: 16px; /* py-4 */
    background: transparent;
    border: none;
    color: rgb(148 163 184); /* text-slate-300 */
    font-size: 10px; /* text-[10px] */
    font-weight: 900; /* font-black */
    text-transform: uppercase;
    letter-spacing: 0.2em; /* tracking-widest */
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 9999px; /* rounded-full */
}

.deposit-tab-new.active {
    background: rgb(163 131 107); /* bg-[#A3836B] */
    color: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}

.deposit-tab-new:not(.active):hover {
    opacity: 0.8;
}

/* Баланс депозита - новый дизайн */
.deposit-balance-section,
.deposit-topup-section,
.deposit-history-section,
.deposit-advance-section {
    padding: 0;
    margin-bottom: 40px; /* mb-10 */
}

/* Карточка баланса депозита (новый дизайн как на скрине 2) */
.deposit-balance-card-new {
    background: rgb(30 41 59); /* bg-slate-900 */
    border-radius: 40px; /* rounded-[40px] */
    padding: 40px; /* p-10 */
    color: white;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
    position: relative;
    overflow: hidden;
}

.deposit-balance-icon-bg {
    position: absolute;
    top: 0;
    right: 0;
    padding: 40px; /* p-10 */
    opacity: 0.1; /* opacity-10 */
    color: white;
}

.deposit-balance-icon-bg svg {
    width: 120px;
    height: 120px;
}

.deposit-balance-content {
    position: relative;
    z-index: 10;
}

.deposit-balance-title-new {
    font-size: 10px; /* text-[10px] */
    font-weight: 900; /* font-black */
    text-transform: uppercase;
    letter-spacing: 0.4em; /* tracking-[0.4em] */
    opacity: 0.5; /* opacity-50 */
    margin-bottom: 16px; /* mb-4 */
}

.deposit-balance-value-new {
    font-size: 48px; /* text-5xl */
    font-weight: 700; /* font-black */
    line-height: 1;
    letter-spacing: -0.02em;
}

/* Блок пополнения депозита (новый дизайн) */
.deposit-topup-section-new {
    margin-bottom: 40px; /* mb-10 */
}

.deposit-topup-title-new {
    font-size: 10px; /* text-[10px] */
    font-weight: 900; /* font-black */
    color: rgb(30 41 59); /* text-slate-800 */
    text-transform: uppercase;
    letter-spacing: 0.2em; /* tracking-widest */
    margin-bottom: 16px; /* mb-4 */
    padding: 0 8px; /* px-2 */
}

.deposit-topup-form-new {
    display: flex;
    flex-direction: column;
    gap: 16px; /* space-y-4 */
    margin-bottom: 40px; /* для навигации */
}

.deposit-topup-input-new {
    width: 100%;
    padding: 24px; /* py-5 px-6 */
    border: 1px solid rgb(241 245 249); /* border-slate-100 */
    border-radius: 16px; /* rounded-2xl */
    font-size: 16px; /* text-sm */
    font-weight: 700; /* font-bold */
    color: rgb(71 85 105); /* text-slate-600 */
    background: white;
    outline: none;
    transition: all 0.3s;
}

.deposit-topup-input-new:focus {
    border-color: rgb(163 131 107); /* border-[#A3836B] */
    box-shadow: 0 0 0 2px rgba(163, 131, 107, 0.1);
}

.deposit-topup-btn-new {
    width: 100%;
    background: rgb(30 41 59); /* bg-slate-900 */
    color: white;
    border: none;
    border-radius: 35px; /* rounded-[35px] */
    padding: 24px; /* py-6 */
    font-size: 12px; /* text-xs */
    font-weight: 900; /* font-black */
    text-transform: uppercase;
    letter-spacing: 0.4em; /* tracking-[0.4em] */
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
}

.deposit-topup-btn-new:active {
    transform: scale(0.95);
    opacity: 0.9;
}

/* История операций депозита (новый дизайн - карточки как у бонусов) */
.deposit-history-title-new {
    font-size: 10px; /* text-[10px] */
    font-weight: 900; /* font-black */
    color: rgb(30 41 59); /* text-slate-800 */
    text-transform: uppercase;
    letter-spacing: 0.2em; /* tracking-widest */
    margin-bottom: 16px; /* mb-4 */
    padding: 0 8px; /* px-2 */
}

.deposit-history-list-new {
    display: flex;
    flex-direction: column;
    gap: 16px; /* space-y-4 */
    margin-bottom: 80px; /* pb-20 для навигации */
}

.deposit-history-item-new {
    padding: 24px; /* p-6 */
    background: rgb(248 250 252); /* bg-slate-50 */
    border-radius: 35px; /* rounded-[35px] */
    border: 1px solid rgb(241 245 249); /* border-slate-100 */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.deposit-history-item-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.deposit-history-item-left {
    display: flex;
    align-items: center;
    gap: 16px; /* gap-4 */
    flex: 1;
}

.deposit-history-icon {
    width: 40px; /* w-10 */
    height: 40px; /* h-10 */
    border-radius: 12px; /* rounded-xl */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.deposit-history-icon-plus {
    background: rgb(240 253 244); /* bg-green-50 */
    color: rgb(34 197 94); /* text-green-500 */
}

.deposit-history-icon-minus {
    background: rgb(254 242 242); /* bg-red-50 */
    color: rgb(239 68 68); /* text-red-500 */
}

.deposit-history-icon svg {
    width: 18px;
    height: 18px;
}

.deposit-history-item-info {
    flex: 1;
}

.deposit-history-amount {
    font-weight: 700; /* font-bold */
    color: rgb(30 41 59); /* text-slate-800 */
    font-size: 16px;
}

.deposit-history-date {
    font-size: 10px; /* text-[10px] */
    font-weight: 700; /* font-bold */
    color: rgb(148 163 184); /* text-slate-400 */
    text-transform: uppercase;
    letter-spacing: 0.2em; /* tracking-widest */
    margin-top: 4px; /* mt-0.5 */
}

.deposit-history-item-right {
    text-align: right;
    flex-shrink: 0;
}

.deposit-history-balance-label {
    font-size: 10px; /* text-[10px] */
    font-weight: 700; /* font-bold */
    color: rgb(148 163 184); /* text-slate-300 */
    text-transform: uppercase;
    letter-spacing: 0.2em; /* tracking-widest */
}

.deposit-history-balance-value {
    font-size: 14px; /* text-sm */
    font-weight: 700; /* font-bold */
    color: rgb(71 85 105); /* text-slate-600 */
    margin-top: 4px;
}

.deposit-history-description {
    width: 100%;
    font-size: 12px;
    color: rgb(148 163 184); /* text-slate-400 */
    font-style: normal;
    padding-top: 12px;
    border-top: 1px solid rgb(241 245 249);
    margin-top: 4px;
}

.deposit-history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 256px; /* h-64 */
    color: rgb(148 163 184); /* text-slate-300 */
    margin-bottom: 80px;
}

.deposit-history-empty svg {
    width: 48px;
    height: 48px;
    stroke-width: 1;
}

.deposit-history-empty-text {
    font-size: 12px;
    font-weight: 700; /* font-bold */
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-top: 16px;
}

/* Бонусы - новый дизайн */
.bonuses-container {
    padding: 24px var(--spacing-container);
    padding-top: 24px;
    min-height: calc(100vh - 200px);
}

/* Карточка баланса бонусов (новый дизайн как на скрине 1) */
.bonuses-balance-card-new {
    background: linear-gradient(to bottom right, rgb(163 131 107), rgb(125 101 82)); /* from-[#A3836B] to-[#7d6552] */
    border-radius: 40px; /* rounded-[40px] */
    padding: 40px; /* p-10 */
    color: white;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
    position: relative;
    overflow: hidden;
    margin-bottom: 40px; /* mb-10 */
}

.bonuses-balance-icon-bg {
    position: absolute;
    top: 0;
    right: 0;
    padding: 40px; /* p-10 */
    opacity: 0.2; /* opacity-20 */
    color: white;
}

.bonuses-balance-icon-bg svg {
    width: 100px;
    height: 100px;
}

.bonuses-balance-content {
    position: relative;
    z-index: 10;
}

.bonuses-balance-title-new {
    font-size: 10px; /* text-[10px] */
    font-weight: 900; /* font-black */
    text-transform: uppercase;
    letter-spacing: 0.4em; /* tracking-[0.4em] */
    opacity: 0.8; /* opacity-80 */
    margin-bottom: 16px; /* mb-4 */
}

.bonuses-balance-wrapper {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.bonuses-balance-value-new {
    font-size: 48px; /* text-5xl */
    font-weight: 700; /* font-black */
    line-height: 1;
    letter-spacing: -0.02em;
}

/* История операций бонусов (новый дизайн) */
.bonuses-history-title-new {
    font-size: 10px; /* text-[10px] */
    font-weight: 900; /* font-black */
    color: rgb(30 41 59); /* text-slate-800 */
    text-transform: uppercase;
    letter-spacing: 0.2em; /* tracking-widest */
    margin-bottom: 16px; /* mb-4 */
    padding: 0 8px; /* px-2 */
}

.bonuses-history-list-new {
    display: flex;
    flex-direction: column;
    gap: 16px; /* space-y-4 */
    margin-bottom: 80px; /* pb-20 для навигации */
}

.bonuses-history-item-new {
    padding: 24px; /* p-6 */
    background: rgb(248 250 252); /* bg-slate-50 */
    border-radius: 35px; /* rounded-[35px] */
    border: 1px solid rgb(241 245 249); /* border-slate-100 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.bonuses-history-item-left {
    display: flex;
    align-items: center;
    gap: 16px; /* gap-4 */
    flex: 1;
}

.bonuses-history-icon {
    width: 40px; /* w-10 */
    height: 40px; /* h-10 */
    border-radius: 12px; /* rounded-xl */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bonuses-history-icon-plus {
    background: rgb(240 253 244); /* bg-green-50 */
    color: rgb(34 197 94); /* text-green-500 */
}

.bonuses-history-icon-minus {
    background: rgb(254 242 242); /* bg-red-50 */
    color: rgb(239 68 68); /* text-red-500 */
}

.bonuses-history-icon svg {
    width: 18px;
    height: 18px;
}

.bonuses-history-item-info {
    flex: 1;
}

.bonuses-history-amount {
    font-weight: 700; /* font-bold */
    color: rgb(30 41 59); /* text-slate-800 */
    font-size: 16px;
}

.bonuses-history-date {
    font-size: 10px; /* text-[10px] */
    font-weight: 700; /* font-bold */
    color: rgb(148 163 184); /* text-slate-400 */
    text-transform: uppercase;
    letter-spacing: 0.2em; /* tracking-widest */
    margin-top: 4px; /* mt-0.5 */
}

.bonuses-history-item-right {
    text-align: right;
    flex-shrink: 0;
}

.bonuses-history-balance-label {
    font-size: 10px; /* text-[10px] */
    font-weight: 700; /* font-bold */
    color: rgb(148 163 184); /* text-slate-300 */
    text-transform: uppercase;
    letter-spacing: 0.2em; /* tracking-widest */
}

.bonuses-history-balance-value {
    font-size: 14px; /* text-sm */
    font-weight: 700; /* font-bold */
    color: rgb(71 85 105); /* text-slate-600 */
    margin-top: 4px;
}

.bonuses-history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 256px; /* h-64 */
    color: rgb(148 163 184); /* text-slate-300 */
    margin-bottom: 80px;
}

.bonuses-history-empty svg {
    width: 48px;
    height: 48px;
    stroke-width: 1;
}

.bonuses-history-empty-text {
    font-size: 12px;
    font-weight: 700; /* font-bold */
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-top: 16px;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 16px;
    text-align: left;
    transition: all 0.2s;
}

.menu-item:active {
    background: var(--color-bg-light);
    transform: scale(0.98);
}

.menu-item span {
    font-size: 24px;
}

/* Поиск */
.search-container {
    /*padding: 0 16px;
    margin-bottom: 16px;*/
}

.search-input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    font-size: 16px;
    background: var(--color-bg-light);
    color: var(--color-text);
    box-sizing: border-box;
    height: 48px;
}

.search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(167, 129, 101, 0.1);
}

.search-container {
    position: relative;
}

.search-container::before {
    content: '';
    display: block;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2720%27%20height%3D%2720%27%20viewBox%3D%270%200%2020%2020%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M9%2017C13.4183%2017%2017%2013.4183%2017%209C17%204.58172%2013.4183%201%209%201C4.58172%201%201%204.58172%201%209C1%2013.4183%204.58172%2017%209%2017Z%27%20stroke%3D%27%23A3836B%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3Cpath%20d%3D%27M19%2019L14.65%2014.65%27%20stroke%3D%27%23A3836B%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 10;
}

/* Фильтр услуг */
.search-filter-container {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    padding: 0px;
}

.filter-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid rgb(241 245 249);
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
    flex-shrink: 0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.filter-btn:hover {
    border-color: var(--color-primary);
    background: var(--color-bg-light);
}

.filter-btn:active {
    transform: scale(0.95);
}

.filter-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* Экран фильтров (полноэкранный) */
#screen-filters,
#screen-masters-filters {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*padding: 32px;*/
    border-bottom: 1px solid rgb(241 245 249);
}

.filters-header h1 {
    font-size: 20px;
    font-weight: 700;
    color: rgb(30 41 59);
    margin: 0;
    font-family: 'Inter', sans-serif;
}

.filters-close-btn {
    background: none;
    border: none;
    padding: 8px;
    margin-right: -8px;
    cursor: pointer;
    color: rgb(148 163 184);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.filters-close-btn:hover {
    opacity: 0.7;
}

.filters-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    padding-bottom: 80px;
}

.filters-content .filter-section {
    border-bottom: 1px solid rgb(241 245 249);
}

.filters-content .filter-item {
    padding: 16px 0px 8px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s;
    cursor: pointer;
}

.filters-content .filter-item:hover {
    background: transparent;
    opacity: 0.6;
}

.filters-content .filter-item:active {
    opacity: 0.6;
}

.filters-content .filter-item-title {
    font-size: 16px;
    font-weight: 500;
    color: rgb(51 65 85);
    font-family: 'Inter', sans-serif;
}

.filters-content .filter-item-arrow {
    color: rgb(203 213 225);
    transition: color 0.2s;
}

.filters-content .filter-item:hover .filter-item-arrow {
    color: rgb(163, 131, 107);
}

.filters-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid rgb(241 245 249);
    padding: 32px;
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
    z-index: 10001;
    display: flex;
    gap: 16px;
    align-items: center;
}

.filters-apply-btn {
    flex: 1;
    width: 100%;
    padding: 20px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
}

/* Активная кнопка, когда есть выбранные фильтры */
.filters-apply-btn:not(:disabled) {
    background: var(--color-primary);
    color: white;
    cursor: pointer;
}

.filters-apply-btn:not(:disabled):hover {
    background: var(--color-primary-hover);
}

.filters-apply-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.filters-reset-btn {
    flex: 1;
    width: 100%;
    padding: 20px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
}

/* Активная кнопка «Сбросить», когда есть выбранные фильтры */
.filters-reset-btn:not(:disabled) {
    background: var(--color-primary);
    color: white;
    cursor: pointer;
}

.filters-reset-btn:not(:disabled):hover {
    background: var(--color-primary-hover);
}

.filters-reset-btn:active:not(:disabled) {
    transform: scale(0.95);
}

/* Неактивное состояние — серая */
.filters-apply-btn:disabled,
.filters-reset-btn:disabled {
    background: rgb(241 245 249);
    color: rgb(148 163 184);
    cursor: not-allowed;
    border: none;
    opacity: 1;
}

.filters-apply-btn:disabled:hover,
.filters-reset-btn:disabled:hover {
    background: rgb(241 245 249);
    transform: none;
}

.filter-section {
    border-bottom: 1px solid rgb(241 245 249);
}

.filter-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-item:hover {
    background: transparent;
    opacity: 0.6;
}

.filter-item:active {
    opacity: 0.6;
}

.filter-item-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.filter-item-title {
    font-size: 16px;
    font-weight: 500;
    color: rgb(51 65 85);
    margin-bottom: 4px;
    font-family: 'Inter', sans-serif;
}

.filter-item-selected {
    font-size: 14px;
    color: var(--color-text-light);
    font-weight: 300;
}

.filter-item-arrow {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-left: 12px;
    color: rgb(203 213 225);
    transition: color 0.2s;
}

.filter-item:hover .filter-item-arrow {
    color: rgb(163, 131, 107);
}

/* Экран выбора категории/проблем в фильтре */
#screen-filter-category,
#screen-filter-problems {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.3s ease-out;
}

.filter-sub-header {
    display: flex;
    align-items: center;
    /*padding: 32px;
    padding-left: 24px;*/
    border-bottom: 1px solid rgb(241 245 249);
    gap: 16px;
}

.filter-sub-header .btn-back {
    padding: 8px;
    margin-left: -8px;
    color: rgb(148 163 184);
    width: auto;
    height: auto;
}

.filter-sub-header .btn-back svg {
    width: 20px;
    height: 20px;
}

.filter-sub-header h1 {
    font-size: 20px;
    font-weight: 700;
    color: rgb(30 41 59);
    margin: 0;
    flex: 1;
    font-family: 'Inter', sans-serif;
}

.filter-sub-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Список специализаций в фильтре мастеров */
#filter-specializations-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    padding: 16px !important;
}

.filter-option {
    padding: 24px 0;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 1px solid rgb(241 245 249);
    font-size: 16px;
    font-weight: 500;
    color: rgb(51 65 85);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Inter', sans-serif;
}

.filter-option:last-child {
    border-bottom: none;
}

.filter-option:hover {
    background: transparent;
    opacity: 0.6;
}

.filter-option:active {
    opacity: 0.6;
}

.filter-option.selected {
    background: transparent;
    color: rgb(51 65 85);
    font-weight: 500;
}

.filter-option.selected::after {
    content: '✓';
    font-weight: 700;
    color: rgb(163, 131, 107);
    margin-left: 12px;
}

/* Фильтр проблем */
.filter-sub-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 140px); /* Высота экрана минус header и footer */
    padding-bottom: 20px;
}

.problems-filter-group {
    padding: 0;
    border-bottom: 1px solid rgb(241 245 249);
}

.problems-filter-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 8px 0;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;
}

.problems-filter-title-wrapper:hover {
    opacity: 0.6;
}

.problems-filter-title {
    font-size: 16px;
    font-weight: 500;
    color: rgb(51 65 85);
    margin: 0;
    flex: 1;
    font-family: 'Inter', sans-serif;
}

.problems-filter-subtitle {
    font-size: 11px;
    font-weight: 500;
    color: rgb(203 213 225);
    margin-top: 2px;
    font-family: 'Inter', sans-serif;
}

.problems-filter-chevron {
    width: 18px;
    height: 18px;
    min-width: 18px;
    color: rgb(203 213 225);
    transform: rotate(0deg);
    transition: transform 0.2s ease-out, color 0.2s;
    flex-shrink: 0;
}

.problems-filter-title-wrapper:hover .problems-filter-chevron {
    color: rgb(163, 131, 107);
}

.problems-filter-chevron.open {
    transform: rotate(180deg);
    color: rgb(163, 131, 107);
}

.problems-filter-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    padding-bottom: 24px;
    padding-left: 8px;
    padding-right: 8px;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.problems-filter-options.collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    gap: 0;
}

.problems-filter-options:not(.collapsed) {
    max-height: 2000px;
    opacity: 1;
    margin: 0;
    padding-bottom: 24px;
    padding-left: 0px;
    padding-right: 0px;
    gap: 12px;
}

.problem-option-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgb(241 245 249);
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.problem-option-row:hover {
    background: rgb(226 232 240);
}

.problem-option {
    flex: 1;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    font-size: 14px;
    font-weight: 500;
    color: rgb(71 85 105);
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    font-family: 'Inter', sans-serif;
}

.problem-option:hover {
    color: rgb(71 85 105);
}

.problem-option.active {
    background: transparent;
    border: none;
    color: rgb(71 85 105);
    font-weight: 500;
}

.problem-checkbox {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid rgb(226 232 240);
    border-radius: 0.5rem;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.problem-checkbox.checked {
    background: rgb(163, 131, 107);
    border-color: rgb(163, 131, 107);
}

.problem-checkbox.checked svg {
    display: block;
    width: 12px;
    height: 12px;
}

.problem-checkbox svg {
    display: none;
}
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.problem-checkbox:hover {
    border-color: var(--color-primary);
}

.problem-checkbox.checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.problem-checkbox.checked svg {
    display: block;
}

.problem-checkbox svg {
    display: none;
    width: 16px;
    height: 16px;
}

/* Футер для экрана выбора проблем */
.filter-sub-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid rgb(241 245 249);
    padding: 32px;
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
    z-index: 10001;
}

.problems-select-btn {
    width: 100%;
    padding: 20px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    border-radius: 1rem;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
}

.problems-select-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.problems-select-btn:disabled,
.problems-select-btn.disabled {
    background: rgb(241 245 249);
    color: rgb(148 163 184);
    cursor: not-allowed;
    border: none;
    opacity: 1;
}

.problems-select-btn:disabled:hover,
.problems-select-btn.disabled:hover {
    background: rgb(241 245 249);
    transform: none;
}

/* Отступ для контента, чтобы не перекрывался футером */
#screen-filter-problems .filter-sub-content {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 120px;
}

/* Категории услуг */
.category-card {
    background: var(--color-bg-light) !important;
    font-weight: 600;
    cursor: pointer;
}

.category-card:hover {
    background: #e8e8e8 !important;
}


/* Записи */
.bookings-container {
    padding: 0px;
    padding-top: 16px;
    min-height: calc(100vh - 200px);
}

.bookings-tabs-new {
    display: flex;
    background: rgb(248 250 252);
    border-radius: 9999px;
    padding: 6px;
    margin: 0 0 32px 0;
    gap: 0;
}

.bookings-tab-new {
    flex: 1;
    padding: 16px;
    background: transparent;
    border: none;
    color: rgb(203 213 225);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 9999px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.bookings-tab-new.active {
    background: white;
    color: rgb(163, 131, 107);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.bookings-tab-new:not(.active):hover {
    opacity: 0.8;
}

.booking-item-new {
    padding: 24px;
    background: rgb(248 250 252);
    border-radius: 35px;
    border: 1px solid rgb(248 250 252);
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
    transition: all 0.2s;
}

.booking-item-icon {
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(163, 131, 107);
    flex-shrink: 0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.booking-item-content {
    flex: 1;
    min-width: 0;
}

.booking-item-title-new {
    font-size: 16px;
    font-weight: 700;
    color: rgb(30 41 59);
    margin-bottom: 12px;
    line-height: 1.4;
}

.booking-item-warning {
    font-size: 14px;
    font-weight: 700;
    color: #E51B21;
    margin-bottom: 8px;
    line-height: 1.4;
    padding: 0;
}

.booking-item-payment-info {
    font-size: 14px;
    font-weight: 400;
    color: #E51B21;
    margin-bottom: 12px;
    line-height: 1.4;
    padding: 0;
}

.booking-payment-label {
    font-weight: 400;
}

.booking-payment-amount {
    font-weight: 600;
}

.booking-item-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.booking-item-detail {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.booking-item-detail-label {
    font-weight: 300;
    color: rgb(148 163 184);
    flex-shrink: 0;
}

.booking-item-detail-value {
    font-weight: 400;
    color: rgb(30 41 59);
    flex: 1;
}

/* Стили для продолжительности - без рамки, простой текст */
.booking-item-duration {
    margin-top: 0;
}

.booking-item-duration .booking-item-detail-label {
    font-size: 12px;
    font-weight: 500;
    color: rgb(148, 163, 184);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.booking-duration-value {
    color: #E51B21 !important;
    font-weight: 400;
    font-size: 14px;
    text-transform: none;
}

.booking-item-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.booking-item-actions .booking-action-btn {
    width: 100%;
    margin: 0;
    border-radius: 3rem;
    font-size: 10px;
}

.booking-item-datetime {
    font-size: 10px;
    font-weight: 700;
    color: rgb(148 163 184);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 4px;
}

.booking-item-arrow {
    width: 18px;
    height: 18px;
    color: rgb(226 232 240);
    flex-shrink: 0;
}

.booking-item-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 256px;
    color: rgb(203 213 225);
    text-align: center;
    padding: 40px;
}

.booking-item-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    stroke-width: 1;
}

.booking-item-empty-text {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 16px;
}

/* Старые стили для обратной совместимости */
.booking-item {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 16px;
    margin-bottom: 12px;
}

.booking-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.booking-item-title {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text);
}

.booking-item-status {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 300;
    text-transform: uppercase;
}

.booking-item-status.confirmed {
    background: var(--color-success);
    color: white;
}

.booking-item-status.pending {
    background: #ff9800;
    color: white;
}

.booking-item-status.cancelled {
    background: var(--color-error);
    color: white;
}

.booking-item-details {
    font-size: 14px;
    color: var(--color-text-light);
    line-height: 1.6;
}

.booking-item-details div {
    margin-bottom: 4px;
}

/* Экран деталей записи (оплата/отмена) */
.booking-details-container {
    padding: 20px;
}

.booking-details-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 24px;
    box-shadow: var(--shadow);
}

.booking-details-title {
    font-size: 18px;
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: none;
}

.booking-details-info {
    margin-bottom: 24px;
}

.booking-details-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 14px;
}

.booking-details-label {
    font-weight: 300;
    color: var(--color-text-light);
    flex: 0 0 auto;
    margin-right: 12px;
}

.booking-details-value {
    font-weight: 400;
    color: var(--color-text);
    text-align: right;
    flex: 1;
}

.booking-details-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-pay-booking {
    width: 100%;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.btn-cancel-booking {
    width: 100%;
    background: #585858 !important;
    color: white !important;
    border: 1px solid #585858;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.btn-repeat-booking {
    width: 100%;
    background: white;
    color: #000;
    border: 1px solid #000;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.4em;
    padding: 20px 0;
    margin-top: 16px;
    transition: all 0.3s;
    border-radius: 0;
    height: auto;
}

.btn-repeat-booking:hover {
    background: #000;
    color: white;
}

.btn-repeat-booking:active {
    transform: scale(0.98);
}

.btn-cancel-booking:active {
    background: #484848;
    transform: scale(0.98);
}

.btn-confirm-booking {
    width: 100%;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Экран подтверждения отмены */
.cancel-confirm-container {
    padding: 20px;
}

.cancel-confirm-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 24px;
    box-shadow: var(--shadow);
}

.cancel-confirm-message {
    font-size: 16px;
    color: var(--color-text);
    margin-bottom: 16px;
    text-align: center;
    line-height: 1.6;
}

.cancel-confirm-warning {
    font-size: 14px;
    color: var(--color-error);
    margin-bottom: 24px;
    padding: 12px;
    background: #fff5f5;
    border-radius: var(--border-radius);
    border-left: 3px solid var(--color-error);
}

.cancel-confirm-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Экран авторизации - новый дизайн с видео */
.auth-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.auth-background-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    margin-top: -120px;
}

/*.auth-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
    z-index: 1;
}*/

.auth-content-wrapper {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: -170px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0px -5px 7px -4px rgb(152 154 183 / 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0;
}

.auth-description-block {
    padding: 24px 20px;
    color: white;
    text-align: center;
    margin-bottom: auto;
    padding-top: 60px;
}

.auth-description-text {
    font-size: 16px;
    line-height: 1.6;
    color: #2E190B;
    /* text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); */
    max-width: 90%;
    margin: 0 auto;
}

.auth-form-block {
    background: white;
    border-radius: 24px 24px 0 0;
    padding: 32px 20px 40px 20px;
    /*box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);*/
    width: 100%;
}

/* Прокрутка на странице регистрации — форма длинная */
#screen-register .auth-content-wrapper {
    /*max-height: 90vh;*/
	    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Экран авторизации - упрощенная версия */
.auth-container-simple {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 90vh;
    padding: 40px 24px;
    background: #ffffff;
    max-width: 600px;
    margin: 0 auto;
}

.auth-logo-simple {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
}

.auth-logo-image {
    width: 240px;
    height: auto;
    max-width: 100%;
}

.auth-container {
    display: flex;
    min-height: 100vh;
    background: #ffffff;
}

.auth-left {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 500px;
    margin: 0 auto;
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
}

.logo-icon {
    position: relative;
    width: 60px;
    height: 60px;
}

.logo-shape {
    position: absolute;
    border-radius: 4px;
}

.logo-grey {
    width: 40px;
    height: 40px;
    background: #6d6d6d;
    top: 0;
    left: 0;
    z-index: 1;
}

.logo-red {
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    top: 10px;
    left: 10px;
    z-index: 2;
    border-radius: 50% 4px 4px 4px;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: 2px;
}

.logo-slogan {
    font-size: 12px;
    color: var(--color-text);
    letter-spacing: 1px;
    margin-top: 4px;
}

.login-title {
    font-size: 28px;
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: 0px;
    padding-bottom: 16px;
    border-bottom: none;
    text-align: left;
}

.login-title-divider {
    width: 100%;
    height: 2px;
    background: var(--color-primary);
    margin-bottom: 24px;
    display: none !important;
}

.auth-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.btn-auth {
    padding: 16px 24px;
    border-radius: var(--border-radius);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
}

.btn-auth-primary {
    background: var(--color-primary);
    color: white;
}

.btn-auth-primary:active {
    background: var(--color-primary-hover);
    transform: scale(0.98);
}

.btn-auth-secondary {
    background: white;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.btn-auth-secondary:active {
    background: var(--color-bg-light);
    transform: scale(0.98);
}

.auth-right {
    flex: 1;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(167, 129, 101, 0.05) 0%, rgba(255, 255, 255, 0.1) 100%);
    position: relative;
    overflow: hidden;
}

.auth-right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23E51B21" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23E51B21" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
    pointer-events: none;
}

.login-form-center {
    width: 100%;
    max-width: 100%;
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    margin-top: 0;
}

.login-form {
    width: 100%;
    max-width: 400px;
    background: white;
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    position: relative;
    z-index: 1;
}

.login-title {
    font-size: 24px;
    font-weight: 400;
    color: #2E190B;
    margin-bottom: 8px;
    padding-bottom: 0px;
    /* border-bottom: 2px solid var(--color-primary); */
}

.form-input {
    width: 100%;
    padding: 20px; /* p-5 */
    border: none;
    border-radius: 24px; /* rounded-3xl */
    font-size: 14px; /* text-sm */
    font-weight: 700; /* font-bold */
    font-family: inherit;
    margin-bottom: 16px;
    margin-top: 0;
    transition: all 0.3s;
    background: rgb(248, 250, 252); /* bg-slate-50 */
    color: rgb(30, 41, 59); /* text-slate-800 */
    outline: none;
}

.form-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(163, 131, 107, 0.2); /* focus:ring-2 focus:ring-[#A3836B]/20 */
}

.form-input::placeholder {
    color: rgb(148, 163, 184); /* text-slate-400 */
}

.login-agreement {
    font-size: 12px;
    color: var(--color-text-light);
    margin-bottom: 24px;
    line-height: 1.5;
}

.link-red {
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
}

.link-red:active {
    opacity: 0.7;
}

.btn-login {
    width: 100%;
    margin-bottom: 12px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.btn-forgot {
    width: 100%;
    background: var(--color-primary);
    margin-bottom: 24px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.btn-primary:disabled,
.btn-forgot:disabled,
.btn-auth-secondary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.login-register {
    text-align: center;
    font-size: 14px;
    color: var(--color-text-light);
}

/* Адаптивность для экрана авторизации */
@media (max-width: 768px) {
    .auth-description-block {
        padding: 20px 16px;
        padding-top: 40px;
    }
    
    .auth-description-text {
        font-size: 14px;
    }
    
    .auth-form-block {
        padding: 0px 16px 32px 16px;
        border-radius: 20px 20px 0 0;
    }
    
    .auth-description-block {
        padding: 16px 16px;
        padding-top: 16px;
    }
    
    .auth-container {
        flex-direction: column;
    }
    
    .auth-left,
    .auth-right {
        padding: 24px;
    }
    
    .auth-right {
        min-height: auto;
    }
}

@media (max-width: 480px) {
    .screen {
        padding: 12px;
    }

    .header h1 {
        font-size: 14px;
    }

    .time-slots {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .auth-left,
    .auth-right {
        padding: 20px;
    }
    
    .login-form {
        padding: 24px;
    }
    
    .auth-main-title {
        font-size: 28px;
    }
}

/* Toast уведомления — в стиле Дюна (primary, скругления, тени) */
.toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: none;
    max-width: 90%;
}

.toast {
    background: white;
    color: var(--color-text);
    padding: 16px 24px;
    border-radius: var(--radius-input, 24px);
    box-shadow: var(--shadow-medium);
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    min-width: 280px;
    max-width: 400px;
    animation: toastSlideIn 0.3s ease-out;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* Успех — основной бронз/золото бренда */
.toast.toast-success {
    background: var(--color-primary);
    color: white;
    border-left: 4px solid var(--color-primary-hover);
    box-shadow: var(--shadow-primary);
}

/* Ошибка — тёмный оттенок бренда (коричневый) */
.toast.toast-error {
    background: var(--color-primary-hover);
    color: white;
    border-left: 4px solid #6d4a3a;
    box-shadow: 0 4px 20px rgba(141, 107, 82, 0.35);
}

/* Инфо — нейтральный тёмный тон */
.toast.toast-info {
    background: var(--color-heading);
    color: white;
    border-left: 4px solid #334155;
}

.toast-icon {
    font-size: 20px;
    flex-shrink: 0;
}

/* Двухстрочный toast (заголовок + текст) — как на боевом, в стиле Дюна */
.toast.toast-with-title {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 0;
    min-width: 300px;
    overflow: hidden;
    background: transparent;
}
.toast.toast-with-title.toast-success {
    border-left: none;
    box-shadow: var(--shadow-medium);
}

.toast-with-title .toast-header {
    background: var(--color-primary);
    color: white;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 15px;
}

.toast-with-title .toast-body {
    background: var(--color-bg, #fff);
    color: var(--color-text);
    padding: 14px 16px;
    font-weight: 500;
    font-size: 14px;
    text-align: left;
}

.toast-close {
    background: rgba(255, 255, 255, 0.25);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.toast-close:hover {
    background: rgba(255, 255, 255, 0.4);
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) translateX(-50%);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateX(-50%);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateY(0) translateX(-50%);
    }
    to {
        opacity: 0;
        transform: translateY(-20px) translateX(-50%);
    }
}

.toast.hiding {
    animation: toastSlideOut 0.3s ease-in forwards;
}

/* Анимации */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card,
.booking-item {
    animation: fadeIn 0.3s ease;
}

/* Нижнее меню навигации */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 1px solid #e0e0e0;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

/* Скрываем нижнее меню на экране авторизации */
#screen-auth:not(.hidden) ~ .bottom-nav,
body:has(#screen-auth:not(.hidden)) .bottom-nav,
.bottom-nav.hide-on-auth {
    display: none !important;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    cursor: pointer;
    padding: 4px 8px;
    transition: all 0.2s;
    color: #6d6d6d;
    min-width: 0;
}

.bottom-nav-item:active {
    opacity: 0.7;
    transform: scale(0.95);
}

.bottom-nav-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.bottom-nav-icon svg {
    width: 100%;
    height: 100%;
}

.bottom-nav-label {
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
    color: inherit;
}

.bottom-nav-item.active {
    color: var(--color-primary);
}

.bottom-nav-logo {
    position: relative;
    width: 50px;
    height: 50px;
    margin: 0 8px;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 1001;
    margin-bottom: 0;
}

.bottom-nav-logo:active {
    transform: scale(0.9);
}

.bottom-nav-logo .logo-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #ffffff;
    padding: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--color-primary);
}

/* Отступ для контента, чтобы не перекрывался нижним меню */
#app {
    padding-bottom: 70px;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .services-container {
        flex-direction: column;
        max-height: none;
        min-height: auto;
    }
    
    .services-categories {
        width: 100%;
        max-height: 200px;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .services-content {
        width: 100%;
        max-height: calc(100vh - 400px);
    }
}

/* Кнопка выбора специалиста (внизу экрана услуг) */
/* Кнопка "Продолжить" на экране услуг */
.services-continue-btn {
    position: fixed;
    bottom: 80px; /* Ближе к нижнему меню */
    left: 32px; /* 8px * 4 = 32px (left-8 в Tailwind) */
    right: 32px; /* 8px * 4 = 32px (right-8 в Tailwind) */
    z-index: 60;
    animation: slideInUp 0.3s ease-out;
}

.services-continue-btn.hidden {
    display: none;
}

.services-continue-button {
    width: 100%;
    background: rgb(163, 131, 107); /* #A3836B */
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 12px; /* text-xs */
    font-weight: 900; /* font-black */
    text-transform: uppercase;
    letter-spacing: 0.3em; /* tracking-[0.3em] */
    padding: 24px; /* py-6 = 24px */
    border-radius: 35px; /* rounded-[35px] */
    border: none;
    box-shadow: 0 20px 40px -10px rgba(163, 131, 107, 0.5);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.services-continue-button:active {
    transform: scale(0.95);
}

.services-count-text {
    display: inline;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* Чекбокс для услуг */
.service-checkbox-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 12px;
}

.service-checkbox {
    display: none;
}

.service-checkbox-label {
    width: 24px;
    height: 24px;
    border: 1px solid #6d6d6d;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: all 0.2s ease;
}

/* Боковое меню */
.side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 10001;
    display: none;
    pointer-events: none;
}

.side-menu.active {
    display: block;
    pointer-events: auto;
}

/*.side-menu-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}*/

.side-menu.active .side-menu-overlay {
    opacity: 1;
}

.side-menu-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    
    height: 100%;
    background: #ffffff;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.side-menu.active .side-menu-content {
    transform: translateX(0);
}

.side-menu-header {
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 12px;
}

.menu-toggle-in-menu {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
    transition: background 0.2s;
}

.menu-toggle-in-menu:active {
    background: var(--color-bg-light);
}

.menu-icon-in-menu {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 24px;
    height: 18px;
    position: relative;
    transition: all 0.3s ease;
}

.menu-line-in-menu {
    width: 100%;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.menu-line-in-menu:nth-child(1) {
    transform: rotate(45deg) translate(4px, 6px);
}

.menu-line-in-menu:nth-child(2) {
    opacity: 0;
}

.menu-line-in-menu:nth-child(3) {
    transform: rotate(-45deg) translate(-3px, 0px);
}

.menu-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary);
    flex: 1;
}

.side-menu-list {
    flex: 1;
    padding: 0;
}

.side-menu-list .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 12px;
    background: transparent;
    border: none;
    /*border-bottom: 1px solid var(--color-border);*/
    width: 100%;
    cursor: pointer;
    transition: background 0.2s;
    text-align: left;
}

.side-menu-list .menu-item:active {
    background: var(--color-bg-light);
}

.side-menu-list .menu-item-text {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text);
    flex: 1;
}

.side-menu-list .menu-item-arrow {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-left: 8px;
}

/* Контакты в меню */
.side-menu-contacts {
    padding: 20px 16px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-light);
    flex-shrink: 0;
}

.contacts-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 20px;
}

.contacts-addresses {
    margin-bottom: 20px;
}

.contact-address {
    margin-bottom: 12px;
}

.address-text {
    font-size: 14px;
    color: var(--color-text);
    margin-bottom: 8px;
    line-height: 1.5;
}

.address-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.address-link:active {
    color: var(--color-primary-hover);
    opacity: 0.8;
}

.pin-icon {
    flex-shrink: 0;
}

.contacts-phones {
    margin-bottom: 0;
}

.phones-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 12px;
}

.phones-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.phone-link {
    font-size: 16px;
    color: var(--color-primary);
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.2s;
    font-weight: 500;
}

.phone-link:active {
    color: var(--color-primary-hover);
    opacity: 0.8;
}

.contacts-social {
    display: flex;
    justify-content: flex-start;
}

.contacts-social .header-social {
    margin: 0;
}

/* Стили для страниц с контентом */
.content-page {
    padding: 16px;
    line-height: 1.6;
    color: var(--color-text);
}

.content-page img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    margin: 16px 0;
}

.content-page table {
    width: 100%;
    overflow-x: auto;
    display: block;
    margin: 16px 0;
}

.content-page iframe {
    max-width: 100%;
    margin: 16px 0;
}

.content-page h1,
.content-page h2,
.content-page h3,
.content-page h4 {
    margin-top: 24px;
    margin-bottom: 12px;
    color: var(--color-text);
    font-weight: 600;
}

.content-page h1 {
    font-size: 24px;
}

.content-page h2 {
    font-size: 20px;
}

.content-page h3 {
    font-size: 18px;
}

.content-page p {
    margin-bottom: 12px;
    line-height: 1.6;
}

.content-page ul,
.content-page ol {
    margin: 16px 0;
    padding-left: 24px;
}

.content-page li {
    margin-bottom: 8px;
}

.content-page a {
    color: var(--color-primary);
    text-decoration: none;
}

.content-page a:hover {
    text-decoration: underline;
}

.content-section {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border);
}

.content-section:last-child {
    border-bottom: none;
}

.content-section ol ol {
    margin-top: 8px;
    margin-bottom: 8px;
    padding-left: 20px;
}

.content-section ol ol li {
    margin-bottom: 4px;
}

.bonus-status-list {
    list-style: none;
    padding-left: 0;
}

.bonus-status-list li {
    margin-bottom: 16px;
    padding: 12px;
    background: #f9f9f9;
    border-radius: var(--border-radius);
    border-left: 3px solid var(--color-primary);
}

/* Стили для раздела документов */
.documents-content {
    padding: 16px;
}

.documents-section {
    margin-bottom: 40px;
}

.documents-section:last-child {
    margin-bottom: 0;
}

.documents-section-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 20px;
    text-align: left;
}

.documents-gallery {
    position: relative;
    width: 100%;
}

.documents-gallery-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 8px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.documents-gallery-container::-webkit-scrollbar {
    display: none;
}

.documents-gallery-item {
    position: relative;
    flex: 0 0 calc(50% - 6px);
    min-width: calc(50% - 6px);
    scroll-snap-align: start;
    background: white;
    border: 1px solid #A78165;
    border-radius: var(--border-radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
}

.documents-gallery-item:active {
    transform: scale(0.98);
}

.documents-gallery-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.documents-gallery-zoom-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 10;
}

.documents-gallery-zoom-icon:hover {
    background: rgba(0, 0, 0, 0.8);
}

.documents-gallery-zoom-icon img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

.documents-gallery-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding: 0 8px;
}

.documents-gallery-prev,
.documents-gallery-next {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.documents-gallery-prev:hover,
.documents-gallery-next:hover {
    background: var(--color-primary-hover);
    transform: scale(1.1);
}

.documents-gallery-prev:disabled,
.documents-gallery-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.documents-gallery-counter {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    padding: 0 16px;
}

/* Модальное окно просмотра документа */
.document-viewer-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10005;
    display: flex;
    align-items: center;
    justify-content: center;
}

.document-viewer-modal.hidden {
    display: none;
}

.document-viewer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(4px);
}

.document-viewer-content {
    position: relative;
    width: 95%;
    max-width: 900px;
    max-height: 95vh;
    z-index: 10006;
    display: flex;
    align-items: center;
    justify-content: center;
}

.document-viewer-close {
    position: absolute;
    top: -40px;
    right: 0;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10007;
}

.document-viewer-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.document-viewer-image {
    max-width: 100%;
    max-height: 95vh;
    object-fit: contain;
    border-radius: 8px;
}

/* Исправление для header-logo - чтобы не перекрывало другие элементы */
.header-top {
    position: relative;
}

.header-logo {
    pointer-events: auto;
    z-index: 1;
}

.menu-toggle {
    z-index: 2;
}

.header-phone-btn {
    z-index: 1;
}

/* Модальное окно телефонов */
.phone-modal {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10001;
    display: none;
    pointer-events: none;
}

.phone-modal.active {
    display: block;
    pointer-events: auto;
}

.phone-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.phone-modal.active .phone-modal-overlay {
    opacity: 1;
}

.phone-modal-content {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    max-height: 80vh;
    overflow-y: auto;
}

.phone-modal.active .phone-modal-content {
    transform: translateY(0);
}

.phone-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px;
    border-bottom: 1px solid var(--color-border);
}

.phone-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.phone-modal-close {
    background: none;
    border: none;
    font-size: 32px;
    color: var(--color-text);
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.phone-modal-body {
    padding: 20px 16px;
}

.phone-modal-body .phones-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.phone-modal-body .phone-link {
    font-size: 20px;
    color: #383838;
    text-decoration: none;
    display: block;
    padding: 12px 0;
    transition: color 0.2s;
}

.phone-modal-body .phone-link:active {
    color: var(--color-primary);
}

.service-checkbox:checked + .service-checkbox-label {
    background: var(--color-primary);
    border-color: var(--color-primary);
    width: 24px;
    height: 24px;
}

.service-checkbox:checked + .service-checkbox-label::after {
   content: '✓';
    color: white;
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
    display: block;
    background: #A78165;
    padding: 3px 5px;
}

.service-card.selected {
    background: rgba(167, 129, 101, 0.05);
}

/* Блок выбора мастера для услуги */
.service-master-block {
    background: var(--color-bg);
    border-radius: var(--border-radius);
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid #e0e0e0;
    position: relative;
}

.service-master-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 12px;
}

.service-master-service-name {
    font-size: 16px;
    font-weight: 300;
    color: var(--color-text);
    margin-bottom: 0;
    line-height: 18px;
    flex: 1;
}

.service-master-remove-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    transition: all 0.2s;
    border-radius: 4px;
}

.service-master-remove-btn:active {
    opacity: 0.7;
    transform: scale(0.95);
    background: rgba(167, 129, 101, 0.1);
}

.service-master-remove-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) saturate(100%) invert(15%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.service-master-remove-btn:active .service-master-remove-icon {
    filter: brightness(0) saturate(100%) invert(15%) sepia(90%) saturate(5000%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.service-master-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.service-master-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.service-master-name {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: 4px;
}

.service-master-spec {
    font-size: 14px;
    color: var(--color-text-light);
    font-weight: 300;
}

.service-master-select-btn {
    width: 100%;
    margin-top: 8px;
}

/* Новые стили для экрана выбора мастеров */
.header-title-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header-subtitle {
    font-size: 10px;
    font-weight: 500;
    color: rgb(148, 163, 184);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.service-master-block-new {
    background: var(--color-bg);
    border-radius: 0;
    padding: 16px;
    margin-bottom: 0;
    border: none;
    border-bottom: 1px solid rgb(241, 245, 249);
}

.service-master-service-name-new {
    font-size: 14px;
    font-weight: 700;
    color: rgb(30, 41, 59);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
    line-height: 1.4;
}

.service-master-select-btn-new {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgb(241, 245, 249);
    border: 1px solid rgb(241, 245, 249);
    border-radius: var(--radius-medium);
    font-size: 14px;
    font-weight: 500;
    color: rgb(30, 41, 59);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.service-master-select-btn-new:hover {
    background: rgb(241, 245, 249);
    border-color: rgb(241, 245, 249);
}

.service-master-select-btn-new.selected {
    background: rgb(241, 245, 249);
    border-color: rgb(241, 245, 249);
}

.service-master-select-btn-new svg {
    flex-shrink: 0;
    color: rgb(148, 163, 184);
}

.service-master-select-btn-new.selected svg {
    color: rgb(148, 163, 184);
}

.service-master-select-btn-new span {
    flex: 1;
    text-align: left;
}

/* Кнопка "ВЫБРАТЬ ВРЕМЯ" в стиле "Продолжить" */
.masters-select-time-btn-container {
    position: fixed;
    bottom: 80px;
    left: 32px;
    right: 32px;
    z-index: 60;
    animation: slideInUp 0.3s ease-out;
}

.masters-select-time-btn-container.hidden {
    display: none;
}

.masters-select-time-btn {
    width: 100%;
    background: rgb(163, 131, 107); /* #A3836B */
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 12px; /* text-xs */
    font-weight: 900; /* font-black */
    text-transform: uppercase;
    letter-spacing: 0.3em;
    padding: 16px 24px;
    border: none;
    border-radius: 35px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 20px 40px -10px rgba(163, 131, 107, 0.5);
}

.masters-select-time-btn:not(.disabled):not(:disabled):hover {
    background: rgb(143, 115, 95);
    transform: translateY(-2px);
    box-shadow: 0 24px 48px -10px rgba(163, 131, 107, 0.6);
}

.masters-select-time-btn:not(.disabled):not(:disabled):active {
    transform: scale(0.95);
}

.masters-select-time-btn.disabled,
.masters-select-time-btn:disabled {
    background: rgb(241, 245, 249);
    color: rgb(148, 163, 184);
    cursor: not-allowed;
    box-shadow: none;
}

/* Новые стили для экрана выбора мастеров */
.header-title-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header-subtitle {
    font-size: 10px;
    font-weight: 500;
    color: rgb(148, 163, 184);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.service-master-block-new {
    background: var(--color-bg);
    border-radius: 0;
    padding: 16px;
    margin-bottom: 0;
    border: none;
    border-bottom: 1px solid rgb(241, 245, 249);
}

.service-master-block-new:last-child {
    border-bottom: none;
}

.service-master-service-name-new {
    font-size: 14px;
    font-weight: 700;
    color: rgb(30, 41, 59);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.service-master-service-name-new > span {
    flex: 1;
}

.service-remove-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #EF4444;
    transition: opacity 0.2s, transform 0.2s;
    flex-shrink: 0;
}

.service-remove-btn:hover {
    opacity: 0.7;
    transform: scale(1.1);
}

.service-remove-btn:active {
    transform: scale(0.95);
}

.service-master-select-btn-new {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgb(241, 245, 249);
    border: 1px solid rgb(241, 245, 249);
    border-radius: var(--radius-medium);
    font-size: 14px;
    font-weight: 500;
    color: rgb(30, 41, 59);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.service-master-select-btn-new:hover {
    background: rgb(241, 245, 249);
    border-color: rgb(241, 245, 249);
}

.service-master-select-btn-new.selected {
    background: rgb(241, 245, 249);
    border-color: rgb(241, 245, 249);
}

.service-master-select-btn-new svg {
    flex-shrink: 0;
    color: rgb(148, 163, 184);
}

.service-master-select-btn-new.selected svg {
    color: rgb(148, 163, 184);
}

.service-master-select-btn-new span {
    flex: 1;
    text-align: left;
}

/* Кнопка "ВЫБРАТЬ ВРЕМЯ" в стиле "Продолжить" */
.masters-select-time-btn-container {
    position: fixed;
    bottom: 80px;
    left: 32px;
    right: 32px;
    z-index: 60;
    animation: slideInUp 0.3s ease-out;
}

.masters-select-time-btn-container.hidden {
    display: none;
}

/* Отступ для списка на экране masters, чтобы не перекрывался кнопкой */
#screen-masters .list-container {
    padding-bottom: 120px;
}

.masters-select-time-btn {
    width: 100%;
    background: rgb(163, 131, 107); /* #A3836B */
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 12px; /* text-xs */
    font-weight: 900; /* font-black */
    text-transform: uppercase;
    letter-spacing: 0.3em;
    padding: 16px 24px;
    border: none;
    border-radius: 35px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 20px 40px -10px rgba(163, 131, 107, 0.5);
}

.masters-select-time-btn:not(.disabled):not(:disabled):hover {
    background: rgb(143, 115, 95);
    transform: translateY(-2px);
    box-shadow: 0 24px 48px -10px rgba(163, 131, 107, 0.6);
}

.masters-select-time-btn:not(.disabled):not(:disabled):active {
    transform: scale(0.95);
}

.masters-select-time-btn.disabled,
.masters-select-time-btn:disabled {
    background: rgb(241, 245, 249);
    color: rgb(148, 163, 184);
    cursor: not-allowed;
    box-shadow: none;
}

/* Иконка звезды */
.star-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;
}

.master-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

/* Блок выбранных услуг на экране выбора даты/времени */
.selected-services-datetime {
    background: var(--color-bg);
    border-radius: var(--border-radius);
    padding: 16px;
    margin-bottom: 24px;
    border: 1px solid #e0e0e0;
}

.selected-services-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-primary);
}

.selected-service-item-datetime {
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
}

.selected-service-item-datetime:last-child {
    border-bottom: none;
}

.selected-service-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.selected-service-name {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text);
}

.selected-service-master {
    font-size: 14px;
    color: var(--color-text-light);
    font-weight: 300;
}

/* Кнопка выбора даты и времени для услуги */
.service-datetime-btn {
    width: 100%;
    margin-top: 12px;
}

.service-datetime-selected {
    margin-top: 12px;
    padding: 12px;
    background: rgba(167, 129, 101, 0.05);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-primary);
}

.service-datetime-label {
    font-size: 12px;
    color: var(--color-text-light);
    margin-bottom: 4px;
}

.service-datetime-value {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 0;
}

.service-datetime-selected .btn-link {
    background: none;
    border: none;
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Кнопка "Записаться" */
.services-book-btn {
    position: fixed;
    bottom: 70px;
    left: 0;
    right: 0;
    padding: 16px;
    background: #ffffff;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    z-index: 999;
}

.services-book-btn.hidden {
    display: none;
}

.services-book-btn .btn-primary {
    width: 100%;
    margin: 0;
}

/* Маленькая красная кнопка "Изменить" */
.btn-secondary-small {
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    white-space: nowrap;
}

.btn-secondary-small:active {
    opacity: 0.8;
    transform: scale(0.98);
}

/* Кнопка "Повторить запись" для курсовых процедур (как в оригинале) */
.copy {
    bottom: 8px;
    right: -1px;
    position: absolute;
    cursor: pointer;
    z-index: 99;
}

.copy div {
    width: 47px;
    height: 20px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M3 21v-5h5"/></svg>') center no-repeat;
    background-size: contain;
}

.copy:hover div {
    opacity: 0.7;
}

/* Глобальная кнопка "Записаться" (видима на всех экранах) */
.global-book-btn {
    position: fixed;
    bottom: 70px;
    left: 0;
    right: 0;
    padding: 16px;
    background: #ffffff;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    z-index: 998;
    pointer-events: auto;
}

.global-book-btn.hidden {
    display: none;
}

.global-book-btn .btn-primary {
    width: 100%;
    margin: 0;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 22px;
    padding: 20px 24px;
    font-size: 11px;
    font-weight: 900;
    text-transform: none;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
    box-shadow: var(--shadow-primary);
}

.global-book-btn .btn-primary:active {
    transform: scale(0.95);
    background: var(--color-primary-hover);
}

/* Модальное окно оплаты */
.payment-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-modal.hidden {
    display: none;
}

.payment-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.payment-modal-content {
    position: relative;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    background: white;
    border-radius: 16px;
    padding: 24px;
    overflow-y: auto;
    z-index: 10001;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.payment-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    transition: all 0.2s;
    z-index: 10002;
}

.payment-modal-close:hover {
    background: #e0e0e0;
    transform: scale(1.1);
}

.payment-modal-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

.payment-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.payment-modal-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.payment-service-info {
    margin-bottom: 20px;
}

.payment-service-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 12px;
}

.payment-service-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.payment-detail-item {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.payment-detail-label {
    color: var(--color-text-light);
    font-weight: 300;
}

.payment-detail-value {
    color: var(--color-text);
    font-weight: 400;
    text-align: right;
}

.payment-summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    background: var(--color-bg-light);
    border-radius: var(--border-radius);
}

.payment-summary-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.payment-summary-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
}

.payment-summary-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary);
    text-align: right;
}

.payment-deposit-info,
.payment-bonus-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.payment-available {
    font-size: 12px;
    color: var(--color-text-light);
    flex: 1;
}

.payment-input {
    flex: 0 0 100px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 16px;
    text-align: center;
    max-width: 120px;
}

.payment-currency {
    font-size: 16px;
    color: var(--color-text);
}

.payment-total {
    padding-top: 16px;
    border-top: 2px solid var(--color-primary);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.payment-total .payment-summary-label {
    font-size: 18px;
    font-weight: 600;
}

.payment-total .payment-summary-value {
    font-size: 24px;
}

.payment-pay-btn {
    width: 100%;
    margin-top: 8px;
}

/* Модальное окно согласия на оплату */
.payment-agreement-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-agreement-modal.hidden {
    display: none;
}

.payment-agreement-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.payment-agreement-content {
    position: relative;
    width: 90%;
    max-width: 500px;
    background: white;
    border-radius: 16px;
    padding: 24px;
    z-index: 10003;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.payment-agreement-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    transition: all 0.2s;
    z-index: 10004;
}

.payment-agreement-close:hover {
    background: #e0e0e0;
    transform: scale(1.1);
}

.payment-agreement-header {
    margin-bottom: 20px;
    text-align: center;
}

.payment-agreement-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.payment-agreement-body {
    margin-bottom: 24px;
}

.payment-agreement-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text);
    margin-bottom: 16px;
}

/* Модальное окно повторной записи */
/* Модальное окно формы отзыва */
.review-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-modal.hidden {
    display: none;
}

.review-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.review-modal-content {
    position: relative;
    background: #fff;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 10001;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.review-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 32px;
    color: #666;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
}

.review-modal-close:hover {
    color: #000;
}

.review-modal-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid #e5e5e5;
}

.review-modal-title {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    text-align: center;
}

.review-modal-body {
    padding: 24px;
}

.review-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.review-label {
    font-size: 16px;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0;
}

.review-star-field {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
}

.review-star {
    font-size: 32px;
    color: #ddd;
    cursor: pointer;
    transition: color 0.2s;
    user-select: none;
}

.review-star:hover,
.review-star.active {
    color: #ffc107;
}

.review-textarea {
    width: 100%;
    min-height: 150px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}

.review-textarea:focus {
    outline: none;
    border-color: #1a1a1a;
}

.review-form-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.review-cancel-btn,
.review-submit-btn {
    flex: 1;
    padding: 12px 24px;
    border-radius: 3rem;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.review-cancel-btn {
    background: #A3836B;
    color: #fff;
}

.review-cancel-btn:hover {
    background: #8d6b52;
}

.review-submit-btn {
    background: #1a1a1a;
    color: #fff;
}

.review-submit-btn:hover {
    background: #333;
}

.review-submit-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.review-star {
    color: #ffc107;
}

.repeat-booking-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.repeat-booking-modal.hidden {
    display: none;
}

.repeat-booking-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.repeat-booking-content {
    position: relative;
    width: 90%;
    max-width: 400px;
    background: white;
    border-radius: 16px;
    padding: 24px;
    z-index: 10001;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.repeat-booking-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    transition: all 0.2s;
    z-index: 10002;
}

.repeat-booking-close:hover {
    background: #e0e0e0;
    transform: scale(1.1);
}

.repeat-booking-header {
    margin-bottom: 24px;
    text-align: center;
}

.repeat-booking-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.repeat-booking-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.repeat-booking-btn {
    width: 100%;
    padding: 16px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 24px;
}

.repeat-booking-btn-primary {
    background: #8d6b52;
    color: white;
}

.repeat-booking-btn-primary:hover {
    background: #7a5a44;
}

.repeat-booking-btn-secondary {
    background: #A3836B;
    color: white;
}

.repeat-booking-btn-secondary:hover {
    background: #8d6b52;
}

/* Модальное окно предупреждения о записи */
.warning-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.warning-modal.hidden {
    display: none;
}

.warning-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.warning-modal-content {
    position: relative;
    width: 90%;
    max-width: 420px;
    background: white;
    border-radius: var(--radius-card, 16px);
    padding: 0;
    z-index: 10003;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: modalSlideIn 0.3s ease-out;
	padding: 20px;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.warning-modal-service-name {
    font-weight: 400;
    font-size: 20px;
    padding: 16px 16px 6px 16px;
    color: var(--color-heading, #1E293B);
    border-bottom: 2px solid #EF4444;
    margin: 0 0 12px 0;
}

.warning-modal-warning-text {
    font-weight: 300;
    font-size: 14px;
    color: #E51B21;
    padding: 0 16px 12px 16px;
    line-height: 1.5;
    white-space: pre-line;
}

.warning-modal-details {
    padding: 0 16px 16px 16px;
    font-weight: 300;
    font-size: 14px;
    color: #6D6E71;
    line-height: 1.8;
}

.warning-modal-details-item {
    margin-bottom: 8px;
}

.warning-modal-details-item strong {
    color: #242430;
}

.warning-modal-actions {
    padding: 0 16px 16px 16px;
}

.btn-warning-acknowledge {
    width: 100%;
    padding: 16px 24px;
    background: #EF4444;
    color: white;
    border: none;
    border-radius: var(--radius-input, 24px);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-warning-acknowledge:hover {
    background: #DC2626;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
    transform: translateY(-1px);
}

.btn-warning-acknowledge:active {
    background: #B91C1C;
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

/* Стили для кнопки "Повторить запись" в списке записей */
.booking-action-btn.repeat-booking-btn {
    background: var(--color-primary);
    color: white;
    border: none;
}

.booking-action-btn.repeat-booking-btn:hover {
    background: var(--color-primary-hover);
}

/* Стили для кнопки "ЗАПИСАТЬСЯ" на экране выбора времени */
.datetime-book-btn-container {
    padding: 16px;
    margin-top: 20px;
}

.datetime-book-btn {
    width: 100%;
    padding: 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 24px;
    background: var(--color-primary);
    color: white;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.2s;
}

.datetime-book-btn:hover {
    background: var(--color-primary-hover);
}

.datetime-book-btn:active {
    transform: scale(0.98);
}

.datetime-book-btn.disabled,
.datetime-book-btn:disabled {
    background: #E8EDF3;
    color: #5C6B80;
    cursor: not-allowed;
    opacity: 1;
}

.datetime-book-btn.disabled:hover,
.datetime-book-btn:disabled:hover {
    background: #E8EDF3;
    transform: none;
}

.payment-agreement-text:last-child {
    margin-bottom: 0;
}

.payment-agreement-link {
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
}

.payment-agreement-link:hover {
    color: var(--color-primary-hover);
}

.payment-agreement-actions {
    display: flex;
    justify-content: center;
}

/* Стили для экрана оплаты сертификата */
.certificate-payment-container {
    padding: 16px;
    max-width: 100%;
}

.payment-summary {
    background: var(--color-bg);
    border-radius: var(--border-radius);
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--color-border);
}

.payment-item {
    padding: 14px 0;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.payment-item:first-child {
    border-top: 1px solid #e5e5e5;
}

.payment-item:last-child {
    border-bottom: none;
}

.payment-item-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.payment-label {
    font-size: 18px;
    font-weight: 400;
    color: var(--color-text);
}

.payment-value {
    font-size: 22px;
    font-weight: 400;
    color: var(--color-text);
}

.payment-value.price {
    color: var(--color-primary);
}

.payment-available {
    font-size: 12px;
    color: #bdbdc1;
}

.payment-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.payment-input {
    width: 100px;
    padding: 10px 16px;
    box-sizing: border-box;
    text-align: right;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 16px;
}

.payment-currency {
    font-size: 18px;
    color: var(--color-text);
}

.payment-total {
    border-top: 1px solid #e5e5e5;
    margin-top: 10px;
    padding-top: 16px;
    font-weight: 600;
}

.payment-total .payment-label {
    font-weight: 600;
}

.payment-total .payment-value {
    font-size: 22px;
    font-weight: 600;
}

/* Стили для электронного сертификата - форма "В подарок" */
.cert-warning-banner {
    background: rgba(163, 131, 107, 0.05); /* bg-[#A3836B]/5 */
    border: 1px solid rgba(163, 131, 107, 0.1); /* border border-[#A3836B]/10 */
    border-radius: 30px; /* rounded-[30px] */
    padding: 24px; /* p-6 */
    font-size: 10px; /* text-[10px] */
    font-weight: 700; /* font-bold */
    color: rgb(163, 131, 107); /* text-[#A3836B] */
    line-height: 1.6; /* leading-relaxed */
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 0.2em; /* tracking-widest */
}

.cert-form-instruction {
    font-size: 14px; /* text-sm */
    font-weight: 700; /* font-bold */
    color: rgb(30, 41, 59); /* text-slate-800 */
    margin-bottom: 16px; /* mb-4 */
    line-height: 1.6;
}

.cert-form-section {
    margin-bottom: 24px;
}

.cert-form-section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-primary);
}

/* Стили для шага 5 - контрольная проверка */
.cert-review-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cert-review-section {
    background: var(--color-bg);
    border-radius: var(--border-radius);
    padding: 16px;
    border: 1px solid var(--color-border);
}

.cert-review-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-primary);
}

.cert-review-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #e5e5e5;
}

.cert-review-item:last-child {
    border-bottom: none;
}

.cert-review-label {
    font-size: 14px;
    color: var(--color-text-light);
    font-weight: 300;
}

.cert-review-value {
    font-size: 14px;
    color: var(--color-text);
    font-weight: 400;
    text-align: right;
}

.cert-review-value.price {
    color: var(--color-primary);
    font-weight: 600;
}

.cert-review-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.cert-review-actions .btn-primary,
.cert-review-actions .btn-secondary {
    flex: 1;
}

.payment-agreement-btn {
    width: 100%;
}

/* ============================================
   Стили для главного экрана (screen-home)
   Точный дизайн из React приложения
   ============================================ */

#screen-home {
    padding: 0 !important;
}

/* Исправление отступов для шапки на главной странице */
#screen-home .header {
    padding: var(--spacing-container) var(--spacing-container) 0 var(--spacing-container);
}

#screen-home .header-top {
    padding: 0;
}

.home-content {
    padding: 24px var(--spacing-container) var(--spacing-container) var(--spacing-container);
    background: var(--color-bg);
    min-height: 100vh;
}

/* Блок баланса (точный дизайн из React: bg-[#121826] rounded-[45px]) */
.balance-block {
    background: var(--color-deep-dark);
    border-radius: var(--radius-medium);
    padding: var(--spacing-large);
    color: white;
    box-shadow: var(--shadow-strong);
    position: relative;
    overflow: hidden;
    margin-bottom: 32px;
}

.balance-inner {
    position: relative;
    z-index: 10;
}

.balance-label-text {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--color-primary);
    margin-bottom: 12px;
    font-family: 'Inter', sans-serif;
}

.balance-amount-wrapper {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 40px;
}

.balance-amount-value {
    font-size: 48px;
    font-weight: 700;
    color: white;
    line-height: 1;
    letter-spacing: -0.02em;
    font-family: 'Inter', sans-serif;
}

.balance-currency-text {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
    font-family: 'Inter', sans-serif;
}

.balance-actions-wrapper {
    display: flex;
    gap: 16px;
    align-items: center;
}

.btn-book-primary {
    flex: 1;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 22px;
    padding: 20px 24px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
    box-shadow: var(--shadow-primary);
}

.btn-book-primary:active {
    transform: scale(0.95);
}

.btn-gift-square {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-gift-square:active {
    transform: scale(0.95);
}

/* Секция спецпредложений (точный дизайн из React) */
.promotions-wrapper {
    margin-bottom: 32px;
    padding: 0;
}

/* Табы для переключения между спецпредложениями и акциями */
.promotions-tabs {
    display: flex;
    gap: 0;
    padding: 8px;
    margin: 0 8px 16px 8px;
    background: #f1f5f9;
    border-radius: 25px;
}

.promotions-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: #94A3B8;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    position: relative;
}

.promotions-tab.active {
    background: white;
    color: var(--color-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    border-radius: 25px;
}

.promotions-tab:active {
    transform: scale(0.98);
}

/* Контент табов */
.promotions-content {
    display: none;
}

.promotions-content.active {
    display: block;
}

.promotions-heading {
    font-size: 10px;
    font-weight: 900;
    color: var(--color-heading);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: var(--spacing-element);
    padding: 0 8px;
    font-family: 'Inter', sans-serif;
}

.promotions-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 8px 16px 8px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.promotions-scroll::-webkit-scrollbar {
    display: none;
}

.promotion-card {
    /* Как в React: min-w-[85%] для показа части следующей карточки */
    min-width: 85%;
    width: 85%;
    /* Квадратная карточка */
    aspect-ratio: 1;
    max-width: 320px;
    max-height: 320px;
    border-radius: var(--radius-large);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    scroll-snap-align: center;
    background: var(--color-bg-light);
}

.promotion-card:active {
    transform: scale(0.98);
}

.promotion-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Убрали overlay и текстовые элементы - только фото */

/* Быстрый доступ (точный дизайн из React) */
.quick-access-wrapper {
    margin-top: 32px;
    padding: 0;
}

.quick-access-heading {
    font-size: 10px;
    font-weight: 900;
    color: var(--color-heading);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: var(--spacing-element);
    padding: 0 8px;
    font-family: 'Inter', sans-serif;
}

.quick-access-grid {
    display: flex;
    gap: 12px;
    padding: 0px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
}

.quick-access-grid::-webkit-scrollbar {
    display: none;
}

.quick-access-card {
    flex: 0 0 auto;
    min-width: calc((100vw - var(--spacing-container) * 2 - 24px) / 3);
    max-width: 100%;
    padding: 32px 16px;
    background: none;
    border: none;
    border-radius: var(--radius-medium);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-element);
    cursor: pointer;
    transition: all 0.2s 
ease;
    box-shadow: var(--shadow-soft);
    font-family: 'Inter', sans-serif;
}

.quick-access-card:active {
    transform: scale(0.95);
}

.quick-access-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-small);
    background: rgba(163, 131, 107, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.quick-access-svg {
    color: var(--color-primary);
}

.quick-access-label {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-heading);
    font-family: 'Inter', sans-serif;
}

/* Стили для объединенного экрана выбора времени */
.unified-calendar-container {
    background: var(--color-bg);
    padding: 16px;
    margin-bottom: 16px;
    border-radius: var(--radius-medium);
}

.service-block-unified {
    background: var(--color-bg);
    border-radius: var(--radius-medium);
    margin-bottom: 16px;
    border: 1px solid rgb(241, 245, 249);
    overflow: hidden;
}

.service-block-unified-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    cursor: pointer;
    border-bottom: 1px solid rgb(241, 245, 249);
}

.service-block-unified-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 1;
}

.service-block-unified-title > span {
    font-size: 14px;
    font-weight: 700;
    color: rgb(30, 41, 59);
    text-transform: uppercase;
}

.service-block-unified-toggle {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(30, 41, 59);
    transition: transform 0.2s;
}

.service-block-unified-toggle.expanded {
    transform: rotate(180deg);
}

.service-block-unified-content {
    padding: 16px;
}

.service-block-unified-content.hidden {
    display: none;
}

.master-block-unified {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgb(241, 245, 249);
}

.master-block-unified:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.master-block-unified-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-small);
    transition: background 0.2s;
}

.master-block-unified-info:hover {
    background: rgb(241, 245, 249);
}

.master-block-unified-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: rgb(241, 245, 249);
    display: flex;
    align-items: center;
    justify-content: center;
}

.master-block-unified-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.master-avatar-placeholder {
    width: 100%;
    height: 100%;
    background: rgb(203, 213, 225);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(148, 163, 184);
    font-size: 20px;
}

.master-avatar-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.master-block-unified-details {
    flex: 1;
    min-width: 0;
}

.master-block-unified-name {
    font-size: 16px;
    font-weight: 600;
    color: rgb(30, 41, 59);
    margin-bottom: 4px;
}

.master-block-unified-spec {
    font-size: 14px;
    color: rgb(148, 163, 184);
}

.master-block-unified-selected {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #a3836b;
    background: transparent;
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.master-block-unified-selected.selected {
    background: #a3836b;
    color: white;
    border-color: #a3836b;
}

.master-block-unified-times {
    margin-top: 12px;
}

.time-slots-grid-unified {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.time-slot-unified {
    padding: 10px 12px;
    background: white;
    border: 1px solid rgb(241, 245, 249);
    border-radius: var(--radius-small);
    font-size: 14px;
    font-weight: 500;
    color: rgb(30, 41, 59);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.time-slot-unified:hover {
    background: rgb(241, 245, 249);
    border-color: #FBC02D;
}

.time-slot-unified.selected {
    background: #a3836b !important;
    border-color: #a3836b !important;
    color: rgb(255 255 255) !important;
    font-weight: 600;
    opacity: 1 !important;
}

.time-slot-unified.selected.disabled {
    background: #a3836b !important;
    border-color: #a3836b !important;
    color: rgb(255 255 255) !important;
    font-weight: 600;
    opacity: 1 !important;
    cursor: default;
}

.time-slot-unified.hover-highlight {
    background: #a3836b;
    border-color: #a3836b;
    color: rgb(255 255 255);
    opacity: 0.7;
}

.time-slot-unified.disabled {
    background: rgb(248, 250, 252);
    border-color: rgb(226, 232, 240);
    color: rgb(148, 163, 184);
    cursor: not-allowed;
    opacity: 0.6;
}

.time-slot-unified.disabled:hover {
    background: rgb(248, 250, 252);
    border-color: rgb(226, 232, 240);
}

/* Стили для календаря на экране выбора специалистов */
.masters-calendar-container {
    background: var(--color-bg);
    /*padding: 16px;*/
    margin-bottom: 16px;
    border-radius: var(--radius-medium);
}

/* Стили для раскрывающихся блоков услуг */
.service-expandable-block {
    background: var(--color-bg);
    border-radius: var(--radius-medium);
    margin-bottom: 16px;
    border: 1px solid rgb(241, 245, 249);
    overflow: hidden;
}

.service-expandable-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 16px 24px;
    cursor: pointer;
    border-bottom: 1px solid rgb(241, 245, 249);
}

.service-expandable-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 1;
}

.service-expandable-title > span {
    font-size: 14px;
    font-weight: 700;
    color: rgb(30, 41, 59);
    text-transform: none;
}

.service-expandable-toggle {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(30, 41, 59);
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: 10px;
}

.service-expandable-toggle.expanded {
    transform: rotate(180deg);
}

.service-expandable-content {
    padding: 16px;
}

.service-expandable-content.hidden {
    display: none;
}

.master-expandable-block {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgb(241, 245, 249);
}

.master-expandable-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.master-expandable-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-small);
    transition: background 0.2s;
}

.master-expandable-info:hover {
    background: rgb(241, 245, 249);
}

.master-expandable-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: rgb(241, 245, 249);
    display: flex;
    align-items: center;
    justify-content: center;
}

.master-expandable-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.master-expandable-details {
    flex: 1;
    min-width: 0;
}

.master-expandable-name {
    font-size: 16px;
    font-weight: 600;
    color: rgb(30, 41, 59);
    margin-bottom: 4px;
}

.master-expandable-spec {
    font-size: 14px;
    color: rgb(148, 163, 184);
}

.master-expandable-selected {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #a3836b;
    background: transparent;
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.master-expandable-selected.selected {
    background: #a3836b;
    color: white;
    border-color: #a3836b;
}

.master-expandable-times {
    margin-top: 12px;
}

.time-slots-grid-expandable {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(57px, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.time-slot-expandable {
    padding: 8px 10px;
    background: white;
    border: 1px solid rgb(241, 245, 249);
    border-radius: var(--radius-small);
    font-size: 12px;
    font-weight: 500;
    color: rgb(30, 41, 59);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.time-slot-expandable:hover {
    background: rgb(241, 245, 249);
    border-color: #FBC02D;
}

.time-slot-expandable.selected {
    background: #a3836b !important;
    border-color: #a3836b !important;
    color: rgb(255 255 255) !important;
    font-weight: 600;
    opacity: 1 !important;
}

.time-slot-expandable.selected.disabled {
    background: #a3836b !important;
    border-color: #a3836b !important;
    color: rgb(255 255 255) !important;
    font-weight: 600;
    opacity: 1 !important;
    cursor: default;
}

.time-slot-expandable.hover-highlight {
    background: #a3836b;
    border-color: #a3836b;
    color: rgb(255 255 255);
    opacity: 0.7;
}

.time-slot-expandable.disabled {
    background: rgb(248, 250, 252);
    border-color: rgb(226, 232, 240);
    color: rgb(148, 163, 184);
    cursor: not-allowed;
    opacity: 0.6;
}

.time-slot-expandable.disabled:hover {
    background: rgb(248, 250, 252);
    border-color: rgb(226, 232, 240);
}

/* ============================================
   Анимации согласно дизайн-системе
   ============================================ */
@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-in {
    animation: slideInUp 0.4s ease-out;
}

/* Свайп акций с snap (согласно дизайн-системе) */
.promotions-scroll {
    scroll-snap-type: x mandatory;
}

.promotion-card {
    scroll-snap-align: center;
}

/* Упрощенный вид мастера (запись через мастера) */
.master-single-view {
    
    padding: 16px 0px;
    background: white;
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-soft);
}

.master-single-info {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.master-single-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.master-single-details {
    flex: 1;
}

.master-single-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: 4px;
}

.master-single-spec {
    font-size: 13px;
    color: var(--color-subtitle);
}

.master-single-times {
    margin-top: 16px;
}

.time-slots-grid-single {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
    gap: 12px;
    padding: 8px 0;
}

.time-slot-single {
    padding: 12px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: white;
    color: var(--color-heading);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.time-slot-single:hover {
    border-color: var(--color-primary);
    background: rgba(163, 131, 107, 0.05);
}

.time-slot-single.selected {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
    font-weight: 600;
    opacity: 1 !important;
}

.time-slot-single.selected.disabled {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
    font-weight: 600;
    opacity: 1 !important;
    cursor: default;
}

.time-slot-single.promotion {
    border-color: #4caf50;
    background: rgba(76, 175, 80, 0.1);
}

.time-slot-single.promotion.selected {
    background: #4caf50 !important;
    border-color: #4caf50 !important;
    opacity: 1 !important;
}

.time-slot-single.disabled {
    background: rgb(248, 250, 252);
    border-color: rgb(226, 232, 240);
    color: rgb(148, 163, 184);
    cursor: not-allowed;
    opacity: 0.6;
}

.time-slot-single.disabled:hover {
    background: rgb(248, 250, 252);
    border-color: rgb(226, 232, 240);
}

/* ============================================
   СТИЛИ ДЛЯ ГРУППИРОВАННЫХ УСЛУГ
   (Ногтевой сервис и Парикмахерский сервис)
   ============================================ */

.service-grouped-block {
    background: var(--color-bg);
    border-radius: var(--radius-medium);
    margin-bottom: 16px;
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.service-grouped-header {
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
}

.service-grouped-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-heading);
}

.service-grouped-count {
    font-size: 14px;
    color: var(--color-subtitle);
    font-weight: 400;
}

.service-grouped-duration {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--color-subtitle);
}

.service-grouped-duration svg {
    width: 16px;
    height: 16px;
    stroke: var(--color-subtitle);
}

.service-grouped-list {
    padding: 12px 16px;
    background: var(--color-bg-light);
}

.service-grouped-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 14px;
    color: var(--color-heading);
}

.service-grouped-item-number {
    color: var(--color-primary);
    font-weight: 600;
    min-width: 20px;
}

.service-grouped-item-title {
    flex: 1;
}

.service-grouped-master-section,
.service-grouped-time-section {
    padding: 16px;
    border-top: 1px solid var(--color-border);
}

.service-grouped-master-header,
.service-grouped-time-header {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-heading);
    margin-bottom: 12px;
}

.service-grouped-master-container {
    margin-top: 8px;
}

.master-selected-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--color-bg-light);
    border-radius: var(--radius-small);
    border: 1px solid var(--color-border);
}

.master-selected-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.master-selected-info {
    flex: 1;
    min-width: 0;
}

.master-selected-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-heading);
    margin-bottom: 4px;
}

.master-selected-spec {
    font-size: 13px;
    color: var(--color-subtitle);
}

.master-change-btn,
.time-change-btn {
    padding: 8px 16px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    font-size: 13px;
    color: var(--color-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.master-change-btn:hover,
.time-change-btn:hover {
    background: var(--color-bg-light);
    border-color: var(--color-primary);
}

.master-select-btn {
    width: 100%;
    padding: 16px;
    background: var(--color-bg-light);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-heading);
    cursor: pointer;
    transition: all 0.2s;
}

.master-select-btn:hover {
    background: var(--color-bg);
    border-color: var(--color-primary);
    border-style: solid;
}

.master-select-btn svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-primary);
}

.time-selected-card {
    padding: 12px;
    background: var(--color-bg-light);
    border-radius: var(--radius-small);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.time-selected-date {
    font-size: 14px;
    color: var(--color-heading);
    font-weight: 500;
}

.time-selected-time {
    font-size: 16px;
    color: var(--color-primary);
    font-weight: 600;
    margin-left: 12px;
}

/* Модальное окно выбора мастера */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 16px;
}

.modal-content {
    background: var(--color-bg);
    border-radius: var(--radius-medium);
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-heading);
    margin: 0;
}

.modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 24px;
    color: var(--color-subtitle);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-small);
    transition: all 0.2s;
}

.modal-close:hover {
    background: var(--color-bg-light);
    color: var(--color-heading);
}

.modal-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}

.master-selection-item {
    width: 100%;
    padding: 12px;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.master-selection-item:hover {
    background: var(--color-bg);
    border-color: var(--color-primary);
}

.master-selection-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.master-selection-info {
    flex: 1;
    min-width: 0;
}

.master-selection-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-heading);
    margin-bottom: 4px;
}

.master-selection-spec {
    font-size: 13px;
    color: var(--color-subtitle);
}

/* ============================================
   СТИЛИ ДЛЯ ГРУППИРОВАННЫХ УСЛУГ (НОВАЯ ЛОГИКА)
   Показываем всех мастеров друг под другом
   ============================================ */

.grouped-services-info {
    background: var(--color-bg);
    border-radius: var(--radius-medium);
    margin-bottom: 16px;
    border: 1px solid var(--color-border);
    padding: 16px;
}

.grouped-services-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.grouped-services-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-heading);
}

.grouped-services-count {
    font-size: 14px;
    color: var(--color-subtitle);
    font-weight: 400;
}

.grouped-services-duration {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--color-subtitle);
}

.grouped-services-duration svg {
    width: 16px;
    height: 16px;
    stroke: var(--color-subtitle);
}

.grouped-services-list {
    margin-top: 12px;
}

.grouped-service-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 14px;
    color: var(--color-heading);
    position: relative;
}

.grouped-service-number {
    color: var(--color-primary);
    font-weight: 600;
    min-width: 20px;
}

.grouped-service-title {
    flex: 1;
}

.grouped-service-remove-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: #EF4444;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-small);
    transition: all 0.2s;
    flex-shrink: 0;
}

.grouped-service-remove-btn:hover {
    background: rgba(239, 68, 68, 0.1);
}

.grouped-service-remove-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.master-block-grouped {
    background: var(--color-bg);
    border-radius: var(--radius-medium);
    margin-bottom: 16px;
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.master-block-grouped-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.master-block-grouped-info:hover {
    background: var(--color-bg-light);
}

.master-block-grouped-avatar {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    overflow: hidden;
}

.master-block-grouped-details {
    flex: 1;
    min-width: 0;
}

.master-block-grouped-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-heading);
    margin-bottom: 4px;
}

.master-block-grouped-spec {
    font-size: 14px;
    color: var(--color-subtitle);
}

.master-block-grouped-selected {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--color-bg);
    background: var(--color-primary);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.2s;
}

.master-block-grouped-selected.selected {
    opacity: 1;
}

.master-block-grouped-times {
    padding: 16px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-light);
}