/* ============================================================================
AMV CLINIC — оформление виджета онлайн-записи
Палитра референса amvclinic.ru:
#FFF9F5 — кремовый фон #F2ECE8 — светлый вторичный
#302A26 — тёмный (эспрессо) #170C05 — почти чёрный
#4E4640 — основной текст #6A5F56 — вторичный текст
Шрифт: CormorantUnicase (капс) для заголовков/кнопок, Arial — для ввода.
ВАЖНО: виджет — это Vue + Vuetify. Его типографика (.title/.caption) и
цветовые утилиты (.blue-grey.lighten-5, .primary--text, .accent--text,
.blue-grey--text, .green--text) заданы с !important, поэтому селекторы
идут через .rnova-widget .v-application ... — иначе они проигрывают
по специфичности.
============================================================================ */
/* 1. ФОН ОБЛАСТРВРДЖЕТА (штатно .blue-grey.lighten-5 = #ECEFF1) --------- */
.rnova-widget .v-application,
.rnova-widget .v-application--wrap,
.rnova-widget .v-application .v-main,
.rnova-widget .v-application .v-main.blue-grey,
.rnova-widget .v-application .v-main.blue-grey.lighten-5 {
background-color: #FFF9F5 !important;
}
/* 2. БАЗОВЫЙ РЁР РФТ РЦВЕТ ТЕКСТА ----------------------------------------- */
.rnova-widget .v-application {
font-family: 'CormorantUnicase', Arial, sans-serif !important;
color: #4E4640;
}
/* 3. РўРПОГРАФРРљРђ (заголовки шагов, блоки, РїРѕРґРїРёСЃРё) ----------------------- */
.rnova-widget .v-application .title,
.rnova-widget .v-application .headline,
.rnova-widget .v-application .display-1,
.rnova-widget .v-application .subtitle-1,
.rnova-widget .v-application .subtitle-2,
.rnova-widget .v-application h1,
.rnova-widget .v-application h2,
.rnova-widget .v-application h3 {
font-family: 'CormorantUnicase', Arial, sans-serif !important;
font-weight: 400 !important;
text-transform: uppercase !important;
letter-spacing: .02em !important;
color: #302A26 !important;
}
.rnova-widget .v-application .caption {
font-family: 'CormorantUnicase', Arial, sans-serif !important;
text-transform: uppercase !important;
letter-spacing: .04em !important;
color: #6A5F56 !important;
}
.rnova-widget .v-application .v-stepper__step--active .caption { color: #302A26 !important; }
.rnova-widget .v-application .grey--text { color: #6A5F56 !important; }
.rnova-widget .v-application .black--text { color: #4E4640 !important; }
/* 4. СТЕППЕР(шаги 1–2–3) ------------------------------------------------- */
.rnova-widget .v-application .v-stepper,
.rnova-widget .v-application .v-stepper__header,
.rnova-widget .v-application .v-stepper__content,
.rnova-widget .v-application .v-sheet {
background: transparent !important;
box-shadow: none !important;
}
.rnova-widget .v-application .v-stepper__step__step {
background: #302A26 !important;
color: #FFF9F5 !important;
}
.rnova-widget .v-application hr.v-divider { border-color: #F2ECE8 !important; }
/* 5. РљРќРћРџРљР: контурные, прямые углы, капс -------------------------------- */
.rnova-widget .v-application .v-btn {
font-family: 'CormorantUnicase', Arial, sans-serif !important;
text-transform: uppercase !important;
letter-spacing: .06em !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.rnova-widget .v-application .v-btn.accent,
.rnova-widget .v-application .v-btn.accent.white--text {
background: transparent !important;
color: #4E4640 !important;
border: 1px solid #4E4640 !important;
}
.rnova-widget .v-application .v-btn.accent:hover {
background: #302A26 !important;
color: #FFF9F5 !important;
border-color: #302A26 !important;
}
/* кнопки-стрелки (вперёд/назад) остаются круглыми */
.rnova-widget .v-application .v-btn--round { border-radius: 50% !important; }
/* кнопки выбора времени: штатный класс .blue-grey--text */
.rnova-widget .v-application .v-btn.v-btn--outlined.blue-grey--text {
color: #4E4640 !important;
border-color: #6A5F56 !important;
background: #FFF9F5 !important;
}
.rnova-widget .v-application .v-btn.v-btn--outlined.blue-grey--text:hover {
background: #302A26 !important;
color: #FFF9F5 !important;
border-color: #302A26 !important;
}
/* 6. РЎРџРРЎРљР (врачи, услуги) --------------------------------------------- */
.rnova-widget .v-application .v-list-item {
font-family: 'CormorantUnicase', Arial, sans-serif !important;
}
.rnova-widget .v-application .v-list-item__title { color: #4E4640 !important; }
.rnova-widget .v-application .v-list-item__subtitle { color: #6A5F56 !important; }
.rnova-widget .v-application .primary--text { color: #302A26 !important; }
.rnova-widget .v-application .v-list-item--active,
.rnova-widget .v-application .v-list-item--active .v-list-item__title,
.rnova-widget .v-application .v-list-item--active .v-list-item__subtitle {
background-color: #F2ECE8 !important;
color: #302A26 !important;
}
.rnova-widget .v-application .v-list-item:hover { background-color: #F2ECE8 !important; }
/* 7. РљРђР РўРћР§РљР ------------------------------------------------------------ */
.rnova-widget .v-application .v-card {
background-color: #FFF9F5 !important;
box-shadow: none !important;
border: 1px solid #F2ECE8;
border-radius: 0 !important;
}
/* 8. ПОЛЯ ВВОДА: оформляем .v-input__slot, а НЕ input -------------------- */
.rnova-widget .v-application .v-text-field > .v-input__control > .v-input__slot {
background: #FFF9F5 !important;
border: 1px solid #6A5F56 !important;
border-radius: 0 !important;
padding: 4px 10px !important;
box-shadow: none !important;
}
.rnova-widget .v-application .v-text-field > .v-input__control > .v-input__slot::before,
.rnova-widget .v-application .v-text-field > .v-input__control > .v-input__slot::after {
display: none !important;
}
.rnova-widget .v-application input,
.rnova-widget .v-application textarea {
border: none !important;
margin: 0 !important;
padding: 6px 0 !important;
background: transparent !important;
font-family: Arial, sans-serif !important;
color: #4E4640 !important;
border-radius: 0 !important;
}
.rnova-widget .v-application label.v-label { color: #6A5F56 !important; }
.rnova-widget .v-application .v-messages__message { color: #6A5F56 !important; }
.rnova-widget .v-application .v-input__slot { border-radius: 0 !important; }
/* 9. АКЦЕНТНЫЕ ТЕКСТЫ (accent--text) ------------------------------------ */
/* После установки настройки «Цвет» = #302A26 они станут эспрессо сами;
правило — страховка на случай, если цвет не задан в настройках. */
.rnova-widget .v-application .accent--text { color: #302A26 !important; }
/* 10. КАЛЕНДАРЬ (шаг «Дата и время») ------------------------------------ */
.rnova-widget .v-application .v-picker__title,
.rnova-widget .v-application .v-picker__title.accent {
background: #302A26 !important;
color: #FFF9F5 !important;
}
.rnova-widget .v-application .v-picker__title * { color: #FFF9F5 !important; }
.rnova-widget .v-application .v-date-picker-table .v-btn { border-radius: 0 !important; }
.rnova-widget .v-application .v-date-picker-table .v-btn--active {
background: #302A26 !important;
color: #FFF9F5 !important;
}
/* 11. РНТЕРВАЛЫ ВРЕМЕНР(.intervals / .intervals-card) ------------------ */
/* Штатно: рамка 2px зелёная (#4CAF50), радиус 10px.
Вариант A (по умолчанию ниже) — монохром в палитре сайта.
Вариант B — оставить «зелёный = свободно», раскомментируйте строки. */
.rnova-widget .v-application .intervals .intervals-card {
border-radius: 0 !important;
border-width: 1px !important;
border-color: #6A5F56 !important;
background: #FFF9F5 !important;
}
.rnova-widget .v-application .intervals .intervals-card:hover {
border-color: #302A26 !important;
background: #F2ECE8 !important;
}
/* Вариант B (мягкий зелёный вместо монохрома):
.rnova-widget .v-application .intervals .intervals-card { border-color: #5F6B52 !important; }
.rnova-widget .v-application .green--text { color: #5F6B52 !important; }
*/
.rnova-widget .v-application .clinic-title span { color: #6A5F56 !important; }
.rnova-widget .v-application .clinic-title { color: #4E4640 !important; }
.rnova-widget .v-application .profession-title {
font-family: 'CormorantUnicase', Arial, sans-serif !important;
font-weight: 400 !important;
text-transform: uppercase !important;
color: #302A26 !important;
}
/* 12. МЕЛОЧР: аватары, фото, геометрия ---------------------------------- */
.rnova-widget .v-application .rounded-lg,
.rnova-widget .v-application .rounded { border-radius: 0 !important; }
.rnova-widget .v-application .grey.lighten-5 { background-color: #F2ECE8 !important; }
.rnova-widget .v-application .v-chip { border-radius: 0 !important; }
.rnova-widget .v-application .v-image { background: #F2ECE8; }
/* 13. РЁРђР“ «ДАННЫЕ РџРђР¦РЕНТА» Рё служебные сообщения ----------------------- */
.rnova-widget .v-application .v-input--selection-controls label { color: #4E4640 !important; }
.rnova-widget .v-application .v-input--checkbox .v-icon { color: #302A26 !important; }
.rnova-widget .v-application .action-buttons .v-btn { margin-top: 8px; }
.rnova-widget .v-application .error--text { color: #8C4A3F !important; }
/* Оформление адреса в виджете — добавить в «Произвольный CSS» виджета
(РњРРЎ в†’ Рнтеграции в†’ Виджеты в†’ сайт) или РІ CSS сайта (Tilda). */
.rnova-widget .clinic-title .amv-clinic-address {
color: #6A5F56; /* вторичный цвет палитры сайта */
font-size: .85em;
letter-spacing: .02em;
}
/* По желанию: пиктограмма геолокации — в палитре бренда (штатно зелёная #6EB449) */
.rnova-widget .clinic-title svg path { fill: #4E4640; }