/* Модальное окно записи к тьютору начало стилей */
/* Стили для модального overlay */
.modal-overlay-zapis {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
overflow-y: auto;
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease;
}
.modal-overlay-zapis.show {
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease;
}
.modal-overlay-zapis.hide {
animation: fadeOut 0.3s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* Кнопка закрытия */
.modal-close-btn {
position: absolute;
top: 5px;
right: 5px;
width: 30px;
height: 30px;
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 50%;
font-size: 18px;
color: #6c757d;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 1001;
transition: all 0.2s;
}
.modal-close-btn:hover {
background: #e9ecef;
color: #495057;
}
/* Модальное окно записи к тьютору начало стилей */
.edit-zapis .container {
display: flex;
max-width: 1400px;
margin: 0 auto;
background: white;
border-radius: 12px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
overflow: hidden;
min-height: 90vh;
margin-top: 20px;
margin-bottom: 20px;
position: relative;
}
/* Левая панель */
.edit-zapis .left-panel {
width: 280px;
background: #f8f9fa;
border-right: 1px solid #e9ecef;
padding: 20px;
display: flex;
flex-direction: column;
}
.edit-zapis .form-group {
margin-bottom: 20px;
}
.edit-zapis .form-label {
color: #6c757d;
font-size: 14px;
margin-bottom: 8px;
display: block;
font-weight: 500;
}
.edit-zapis .barber-select {
width: 100%;
padding: 12px 16px;
border: 1px solid #ced4da;
border-radius: 8px;
background: white;
font-size: 14px;
color: #495057;
appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
background-position: right 12px center;
background-repeat: no-repeat;
background-size: 16px;
}
.edit-zapis .date-section {
margin-bottom: 20px;
}
.edit-zapis .date-section h3 {
color: #6c757d;
font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
}
.edit-zapis .date-input {
width: 100%;
padding: 12px 16px;
border: 1px solid #ced4da;
border-radius: 8px;
background: white;
font-size: 14px;
color: #495057;
}
.edit-zapis .email-input {
width: 100%;
padding: 12px 16px;
border: 1px solid #ced4da;
border-radius: 8px;
background: white;
font-size: 14px;
color: #495057;
}
.edit-zapis .phone-input {
width: 100%;
padding: 12px 16px;
border: 1px solid #ced4da;
border-radius: 8px;
background: white;
font-size: 14px;
color: #495057;
}
.edit-zapis .time-section {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 20px;
}
.edit-zapis .time-section h3 {
color: #6c757d;
font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
}
.edit-zapis .time-inputs {
display: flex;
gap: 10px;
align-items: center;
}
.edit-zapis .time-input {
flex: 1;
padding: 10px 10px;
border: 1px solid #ced4da;
border-radius: 8px;
background: white;
font-size: 14px;
color: #495057;
text-align: center;
width: 103px;
}
.edit-zapis .duration-section {
margin-bottom: 20px;
}
.edit-zapis .duration-select {
width: 100%;
padding: 12px 16px;
border: 1px solid #ced4da;
border-radius: 8px;
background: white;
font-size: 14px;
color: #495057;
appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
background-position: right 12px center;
background-repeat: no-repeat;
background-size: 16px;
}
/* Центральная панель */
.edit-zapis .center-panel {
flex: 1;
padding: 20px;
background: white;
display: flex;
flex-direction: column;
}
.edit-zapis .status-bar {
display: flex;
gap: 15px;
margin-bottom: 20px;
align-items: center;
}
.edit-zapis .status-button {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border: none;
border-radius: 20px;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.edit-zapis .status-button.active {
background: #495057;
color: white;
}
.edit-zapis .status-button.inactive {
background: #f8f9fa;
color: #6c757d;
border: 1px solid #dee2e6;
}
.edit-zapis .status-button:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.edit-zapis .services-list {
background: #f8f9fa;
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
}
.edit-zapis .services-list h4 {
color: #495057;
font-size: 16px;
margin-bottom: 15px;
}
.edit-zapis .field-input {
width: 100%;
padding: 12px 16px;
border: 1px solid #ced4da;
border-radius: 8px;
background: white;
font-size: 14px;
color: #495057;
resize: vertical;
font-family: inherit;
}
.edit-zapis .additional-fields {
margin-top: auto;
margin-bottom: 20px;
}
/* Правая панель */
.edit-zapis .right-panel {
width: 320px;
background: #f8f9fa;
border-left: 1px solid #e9ecef;
padding: 20px;
display: flex;
flex-direction: column;
}
.edit-zapis .form-input {
width: 100%;
padding: 12px 16px;
border: 1px solid #ced4da;
border-radius: 8px;
background: white;
font-size: 14px;
color: #495057;
}
.edit-zapis .test-field {
background: #e9ecef;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
flex-grow: 1;
}
.edit-zapis .test-field h4 {
color: #6c757d;
font-size: 14px;
font-weight: 500;
margin-bottom: 15px;
}
.edit-zapis .test-field textarea {
width: 100%;
height: 100px;
padding: 12px 16px;
border: 1px solid #ced4da;
border-radius: 8px;
background: white;
font-size: 14px;
color: #495057;
resize: vertical;
font-family: inherit;
}
/* Кнопки внизу правой панели */
.edit-zapis .button-container {
display: flex;
gap: 10px;
margin-top: auto;
}
.edit-zapis .delete-button,
.edit-zapis .save-button,
.delete-button,
.save-button {
flex: 1;
padding: 12px 20px;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
position: relative;
overflow: hidden;
}
.edit-zapis .save-button,
.save-button {
background: #ffc107;
color: #495057;
}
.save-button {
width: 100%;
}
.edit-zapis .save-button:hover,
.save-button:hover {
background: #ffb700;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}
.edit-zapis .delete-button,
.delete-button {
background: #dc3545;
color: white;
}
.edit-zapis .delete-button:hover,
.delete-button:hover {
background: #c82333;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}
.edit-zapis .save-button:active,
.edit-zapis .delete-button:active,
.save-button:active,
.delete-button:active {
transform: translateY(0);
}
.edit-zapis .save-button::before,
.edit-zapis .delete-button::before,
.save-button::before,
delete-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.edit-zapis .save-button:hover::before,
.edit-zapis .delete-button:hover::before,
.save-button:hover::before,
.delete-button:hover::before {
left: 100%;
}
/* Адаптивность */
@media (max-width: 1200px) {
.edit-zapis .container {
flex-direction: column;
margin: 10px;
}
.edit-zapis .left-panel,
.edit-zapis .right-panel {
width: 100%;
}
.edit-zapis .center-panel {
width: 100%;
}
.edit-zapis .button-container {
flex-direction: column;
}
}
/* Модальное окно записи к тьютору окончание стилей */
/* Support Button */
.support-btn {
position: fixed;
bottom: 24px;
right: 24px;
width: 60px;
height: 60px;
background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
border-radius: 50%;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4);
transition: all 0.3s ease;
z-index: 1000;
}
.support-btn:hover {
transform: scale(1.1);
box-shadow: 0 6px 25px rgba(37, 99, 235, 0.5);
}
.support-btn::before {
content: '💬';
font-size: 24px;
}
/* Modal Overlay */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
/* backdrop-filter: blur(8px); */
display: none;
z-index: 2000;
opacity: 0;
transition: opacity 0.3s ease;
}
.modal-overlay.active {
display: flex;
opacity: 1;
}
/* Modal Content - Your original interface */
.modal-content {
position: relative;
width: 100%;
height: 100%;
/*background: linear-gradient(180deg, #4169E1 0%, #8B4513 50%, #4169E1 100%); */
overflow: hidden;
transform: scale(1);
transition: transform 0.3s ease;
}
.modal-overlay.active .modal-content {
transform: scale(1);
}
#specialistModal {
display: none;
position: fixed;
inset: 0;
z-index: 1000;
}
#specialistModal.active {
display: block;
}
/* Окно записи к специалисту начало */
.speciatist .background-blur {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background: url('data:image/svg+xml,') center/cover; */
filter: blur(8px);
opacity: 0.4;
}
/* Top navigation */
.top-nav {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.nav-left {
display: flex;
align-items: center;
gap: 16px;
}
/* Модальное окно TyutorGrid-modal начало */
/* в файле modal_tyutorgrid.css */
/* Модальное окно TyutorGrid-modal окончание */
.close-btn,
.back-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.close-btn:hover,
.back-btn:hover {
background: rgba(255, 255, 255, 1);
transform: scale(1.05);
}
.close-btn::before,
.close-btn::after {
content: '';
position: absolute;
width: 16px;
height: 2px;
background: #666;
border-radius: 1px;
}
.close-btn::before {
transform: rotate(45deg);
}
.close-btn::after {
transform: rotate(-45deg);
}
.back-btn::before {
content: '';
width: 8px;
height: 8px;
border: 2px solid #666;
border-right: none;
border-bottom: none;
transform: rotate(-45deg);
}
.brand-info {
display: flex;
align-items: center;
gap: 12px;
}
.brand-logo {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.brand-logo img {
height: 32px;
}
.brand-text {
display: flex;
flex-direction: column;
}
.brand-title {
font-size: 16px;
font-weight: 600;
/*color: white; */
line-height: 1.2;
}
.brand-subtitle {
font-size: 12px;
/*color: rgba(255, 255, 255, 0.8);*/
}
.dropdown-icon {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.dropdown-icon::after {
content: '';
width: 6px;
height: 6px;
border: 2px solid rgba(255, 255, 255, 0.8);
border-left: none;
border-top: none;
transform: rotate(45deg);
}
.modal-overlay .main-card {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
right: 0;
width: 500px;
height: 100vh;
transform: none;
border-radius: 0;
padding: 100px 24px 0px;
background: white;
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
/* Делаем карточку контейнером с flex-распределением */
justify-content: flex-start;
}
.modal-overlay.gotovo .main-card {
padding: 65px 0px 0px !important
}
.modal-overlay.date .main-card {
padding: 65px 10px 10px !important
}
.modal-overlay.gotovo .content {
background-color: #f2f2f2;
}
.modal-overlay.gotovo .block-detail {
margin: 8px 0 0;
background-color: hsl(0deg 0% 100%);
padding: 12px 16px 16px;
border-bottom-right-radius: 24px;
border-bottom-left-radius: 24px;
}
.modal-overlay.gotovo .block-your-data {
margin: 8px 0 0;
background-color: hsl(0deg 0% 100%);
padding: 12px 16px 16px;
border-top-right-radius: 24px;
border-top-left-radius: 24px;
border-bottom-right-radius: 24px;
border-bottom-left-radius: 24px;
}
.modal-overlay.gotovo .block-itog {
margin: 8px 0 0;
background-color: hsl(0deg 0% 100%);
padding: 12px 16px 16px;
border-top-right-radius: 24px;
border-top-left-radius: 24px;
border-bottom-right-radius: 24px;
border-bottom-left-radius: 24px;
}
.modal-overlay.gotovo .block-final {
margin: 8px 0 0;
background-color: hsl(0deg 0% 100%);
padding: 12px 16px 16px;
}
.modal-overlay.gotovo .footer-text {
padding: 0px;
text-align: justify;
}
/* Модальное окно финальной записи - fullGotovo*/
.modal-overlay.fullgotovo .header {
display: flex;
align-items: center;
padding: 16px;
border-bottom: 1px solid #e0e0e0;
background: white;
position: sticky;
top: 0;
z-index: 100;
}
.modal-overlay.fullgotovo .close-btn {
width: 24px;
height: 24px;
border: none;
background: none;
font-size: 18px;
color: #666;
cursor: pointer;
margin-right: 16px;
}
.modal-overlay.fullgotovo .location-info {
display: flex;
align-items: center;
flex: 1;
}
.modal-overlay.fullgotovo .location-icon {
width: 40px;
height: 40px;
background: #007AFF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
position: relative;
}
.modal-overlay.fullgotovo .location-icon::after {
content: '';
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
}
.modal-overlay.fullgotovo .location-text h3 {
font-size: 16px;
font-weight: 600;
color: #000;
margin-bottom: 4px;
}
.modal-overlay.fullgotovo .location-text p {
font-size: 14px;
color: #666;
}
.modal-overlay.fullgotovo .dropdown-arrow {
color: #666;
font-size: 18px;
margin-left: 8px;
}
.modal-overlay.fullgotovo .service-selector {
padding: 16px;
background: #E3F2FD;
margin: 16px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
.modal-overlay.fullgotovo .service-info {
display: flex;
align-items: center;
}
.modal-overlay.fullgotovo .service-icon {
width: 24px;
height: 24px;
background: #007AFF;
border-radius: 50%;
margin-right: 12px;
position: relative;
}
.modal-overlay.fullgotovo .service-icon::after {
content: '🔔';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
}
.modal-overlay.fullgotovo .service-name {
font-size: 16px;
color: #007AFF;
font-weight: 500;
}
.modal-overlay.fullgotovo .arrow-right {
color: #007AFF;
font-size: 18px;
}
.modal-overlay.fullgotovo .cancellation-notice {
margin: 16px;
padding: 12px 16px;
background: #FFEBEE;
border-radius: 8px;
display: flex;
align-items: center;
color: #D32F2F;
font-size: 14px;
}
.modal-overlay.fullgotovo .cancellation-notice::before {
content: '✗';
margin-right: 8px;
font-weight: bold;
}
.modal-overlay.fullgotovo .success-notice {
margin: 16px;
padding: 12px 16px;
background: #E8F5E8;
border-radius: 8px;
display: flex;
align-items: center;
color: #2E7D32;
font-size: 14px;
}
.modal-overlay.fullgotovo .success-notice::before {
content: '✓';
margin-right: 8px;
font-weight: bold;
}
.modal-overlay.fullgotovo .hidden {
display: none !important;
}
.modal-overlay.fullgotovo .action-buttons {
display: flex;
justify-content: space-around;
padding: 24px 16px;
gap: 16px;
}
.modal-overlay.fullgotovo .action-button {
display: flex;
flex-direction: column;
align-items: center;
background: none;
border: none;
cursor: pointer;
flex: 1;
padding: 12px 8px;
border-radius: 12px;
transition: background-color 0.2s;
}
.modal-overlay.fullgotovo .action-button:hover {
background-color: #f5f5f5;
}
.modal-overlay.fullgotovo .action-button-icon {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
font-size: 24px;
color: white;
}
.modal-overlay.fullgotovo .action-button.primary .action-button-icon {
background: #007AFF;
}
.modal-overlay.fullgotovo .action-button.secondary .action-button-icon {
background: white;
border: 2px solid #e0e0e0;
color: #666;
}
.modal-overlay.fullgotovo .action-button-text {
font-size: 14px;
color: #333;
text-align: center;
line-height: 1.2;
font-weight: 500;
}
.modal-overlay.fullgotovo .modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.modal-overlay.fullgotovo .modal {
background: white;
border-radius: 20px;
width: calc(100% - 32px);
max-width: 400px;
margin: 16px;
position: relative;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.modal-overlay.fullgotovo .modal-close {
position: absolute;
top: 16px;
right: 16px;
background: none;
border: none;
font-size: 24px;
color: #666;
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.modal-overlay.fullgotovo .modal-content {
padding: 32px 24px 24px 24px;
text-align: center;
}
.modal-overlay.fullgotovo .modal-icon {
width: 80px;
height: 80px;
background: #E3F2FD;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
}
.modal-overlay.fullgotovo .modal-icon::after {
content: '✗';
font-size: 32px;
color: #007AFF;
font-weight: bold;
}
.modal-overlay.fullgotovo .modal-title {
font-size: 24px;
font-weight: 600;
color: #000;
margin-bottom: 24px;
}
.modal-overlay.fullgotovo .modal-contact {
display: flex;
align-items: center;
margin-bottom: 16px;
color: #666;
font-size: 16px;
}
.modal-overlay.fullgotovo .modal-contact-icon {
width: 24px;
height: 24px;
margin-right: 12px;
color: #666;
}
.modal-overlay.fullgotovo .modal-contact-text {
color: #000;
}
.modal-overlay.fullgotovo .whatsapp-icon {
width: 40px;
height: 40px;
background: #25D366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 16px auto;
cursor: pointer;
}
.modal-overlay.fullgotovo .whatsapp-icon::after {
content: '💬';
font-size: 18px;
}
.modal-overlay.fullgotovo .modal-buttons {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 24px;
}
.modal-overlay.fullgotovo .modal-button {
width: 100%;
padding: 16px;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s;
}
.modal-overlay.fullgotovo .modal-button.primary {
background: #007AFF;
color: white;
}
.modal-overlay.fullgotovo .modal-button.primary:hover {
background: #0056CC;
}
.modal-overlay.fullgotovo .modal-button.secondary {
background: #f5f5f5;
color: #333;
}
.modal-overlay.fullgotovo .modal-button.secondary:hover {
background: #e0e0e0;
}
.modal-overlay.fullgotovo .appointment-details {
margin: 32px 16px 16px 16px;
}
.modal-overlay.fullgotovo .date-time {
color: #999;
font-size: 18px;
margin-bottom: 8px;
}
.modal-overlay.fullgotovo .time-slot {
color: #999;
font-size: 16px;
margin-bottom: 24px;
}
.modal-overlay.fullgotovo .master-info {
display: flex;
align-items: center;
margin-bottom: 24px;
}
.modal-overlay.fullgotovo .master-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
background: #ddd;
margin-right: 16px;
background-image: url('data:image/svg+xml,');
background-size: cover;
}
.modal-overlay.fullgotovo .master-details h4 {
font-size: 18px;
color: #000;
margin-bottom: 4px;
font-weight: 600;
}
.modal-overlay.fullgotovo .master-role {
font-size: 14px;
color: #666;
margin-bottom: 8px;
}
.modal-overlay.fullgotovo .rating {
display: flex;
align-items: center;
}
.modal-overlay.fullgotovo .stars {
color: #FFB400;
margin-right: 8px;
font-size: 14px;
}
.modal-overlay.fullgotovo .reviews {
color: #666;
font-size: 14px;
}
.modal-overlay.fullgotovo .master-menu {
color: #666;
font-size: 20px;
margin-left: auto;
cursor: pointer;
}
.modal-overlay.fullgotovo .book-again-btn {
width: calc(100% - 32px);
margin: 0 16px 24px 16px;
padding: 16px;
background: #007AFF;
color: white;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s;
}
.modal-overlay.fullgotovo .book-again-btn:hover {
background: #0056CC;
}
.modal-overlay.fullgotovo .gift-notice {
margin: 16px;
padding: 16px;
background: #E8F4FD;
border-radius: 12px;
display: flex;
align-items: flex-start;
}
.modal-overlay.fullgotovo .gift-icon {
width: 40px;
height: 40px;
background: #007AFF;
border-radius: 50%;
margin-right: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 4px;
}
.modal-overlay.fullgotovo .gift-icon::after {
content: '🎁';
font-size: 18px;
}
.modal-overlay.fullgotovo .gift-text {
flex: 1;
}
.modal-overlay.fullgotovo .gift-message {
color: #000;
font-size: 16px;
line-height: 1.4;
margin-bottom: 16px;
}
.modal-overlay.fullgotovo .select-gift-btn {
background: #007AFF;
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s;
}
.modal-overlay.fullgotovo .select-gift-btn:hover {
background: #0056CC;
}
.modal-overlay.fullgotovo .contacts-section {
margin: 32px 16px 16px 16px;
padding-bottom: 32px;
}
.modal-overlay.fullgotovo .contacts-title {
font-size: 24px;
color: #000;
font-weight: 700;
margin-bottom: 16px;
}
.modal-overlay.fullgotovo .contact-item {
display: flex;
align-items: center;
padding: 12px 0;
}
.modal-overlay.fullgotovo .contact-icon {
width: 40px;
height: 40px;
background: #007AFF;
border-radius: 50%;
margin-right: 16px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.modal-overlay.fullgotovo .contact-icon::after {
content: '';
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
}
.modal-overlay.fullgotovo .contact-name {
font-size: 16px;
color: #000;
font-weight: 500;
margin-left: 15px;
}
.modal-overlay.fullgotovo .address-section {
margin: 16px;
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.modal-overlay.fullgotovo .address-header {
display: flex;
align-items: center;
padding: 16px;
border-bottom: 1px solid #f0f0f0;
}
.modal-overlay.fullgotovo .location-pin {
width: 24px;
height: 24px;
margin-right: 12px;
color: #666;
}
.modal-overlay.fullgotovo .address-text {
font-size: 16px;
color: #000;
flex: 1;
}
.modal-overlay.fullgotovo .copy-icon {
width: 24px;
height: 24px;
color: #666;
cursor: pointer;
}
.modal-overlay.fullgotovo .map-container {
height: 200px;
position: relative;
background: #f5f5f5;
background-size: cover;
}
.modal-overlay.fullgotovo .map-marker {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
background: #ff6b35;
border: 2px solid white;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.modal-overlay.fullgotovo .yandex-logo {
position: absolute;
bottom: 8px;
right: 8px;
font-size: 12px;
color: #666;
font-weight: bold;
}
.modal-overlay.fullgotovo .contact-info {
padding: 16px;
}
.modal-overlay.fullgotovo .contact-row {
display: flex;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
}
.modal-overlay.fullgotovo .contact-row:last-child {
border-bottom: none;
}
.modal-overlay.fullgotovo .contact-row-icon {
width: 24px;
height: 24px;
margin-right: 12px;
color: #666;
}
.modal-overlay.fullgotovo .contact-row-text {
font-size: 16px;
color: #007AFF;
text-decoration: none;
}
.modal-overlay.fullgotovo .contact-row-text:hover {
text-decoration: underline;
}
.modal-overlay.speciatist.active .main-card {
padding: 75px 24px 0px !important;
}
.modal-overlay .main-card-content {
flex: 1;
overflow-y: auto;
padding-bottom: 16px;
padding-right: 4px;
scrollbar-gutter: stable;
}
/* Page title */
.page-title {
font-size: 28px;
font-weight: 700;
color: #1F2937;
margin-bottom: 32px;
line-height: 1.2;
}
/* Spring blonde notification */
.spring-notification {
background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
border-radius: 16px;
padding: 16px 20px;
margin-bottom: 32px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid rgba(59, 130, 246, 0.1);
}
.spring-notification:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
.notification-content {
display: flex;
align-items: center;
gap: 12px;
}
.notification-icon {
width: 24px;
height: 24px;
background: #3B82F6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.notification-icon::before {
content: '';
width: 8px;
height: 12px;
border: 2px solid white;
border-left: none;
border-top: none;
transform: rotate(45deg) translateY(-1px);
}
.notification-text {
font-size: 16px;
font-weight: 500;
color: #1E40AF;
}
.cherry-icon {
font-size: 18px;
margin-left: 4px;
}
.arrow-right {
width: 8px;
height: 8px;
border: 2px solid #3B82F6;
border-left: none;
border-bottom: none;
transform: rotate(45deg);
opacity: 0.7;
}
/* Specialist options */
.modal-overlay .specialist-options {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 32px;
}
.modal-overlay .specialist-item {
background: rgba(249, 250, 251, 0.8);
border-radius: 16px;
padding: 18px 20px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid rgba(229, 231, 235, 0.5);
position: relative;
}
.modal-overlay .specialist-item:hover {
background: rgba(243, 244, 246, 0.9);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.modal-overlay .specialist-content {
display: flex;
align-items: center;
gap: 16px;
flex: 1;
}
.modal-overlay .specialist-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: #6B7280;
}
.modal-overlay .specialist-icon::before {
content: '👥';
font-size: 20px;
}
.modal-overlay .specialist-text {
font-size: 16px;
font-weight: 500;
color: #374151;
}
.modal-overlay .specialist-arrow {
width: 8px;
height: 8px;
border: 2px solid #9CA3AF;
border-left: none;
border-bottom: none;
transform: rotate(45deg);
opacity: 0.7;
}
/* Waiting list section */
.modal-overlay .waiting-list {
margin-bottom: 32px;
}
.modal-overlay .waiting-list-header {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 20px;
background: rgba(249, 250, 251, 0.8);
border-radius: 16px;
border: 1px solid rgba(229, 231, 235, 0.5);
margin-bottom: 16px;
}
/*.modal-overlay .waiting-list-logo {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 14px;
flex-shrink: 0;
}*/
.modal-overlay .waiting-list-logo {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
overflow: hidden;
flex-shrink: 0;
position: relative;
}
.modal-overlay .waiting-list-logo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.modal-overlay .waiting-list-info {
flex: 1;
}
.modal-overlay .waiting-list-title {
font-size: 18px;
font-weight: 600;
color: #1F2937;
margin-bottom: 4px;
}
.modal-overlay .waiting-list-description {
font-size: 14px;
color: #6B7280;
line-height: 1.4;
}
.modal-overlay .info-icon,
.modal-overlay .waiting-info-icon {
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(107, 114, 128, 0.1);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.modal-overlay .info-icon::before,
.modal-overlay .waiting-info-icon::before {
content: 'i';
font-size: 14px;
font-weight: 600;
color: #6B7280;
}
.modal-overlay .time-section {
margin-bottom: 16px;
flex-direction: column;
align-items: flex-start;
gap: 0px !important;
}
.modal-overlay .time-section-title {
font-size: 16px;
font-weight: 600;
color: #374151;
margin-bottom: 16px;
}
.modal-overlay .time-slots {
display: flex;
gap: 12px;
flex-wrap: wrap;
/*flex-direction: column; */
}
.modal-overlay.date .time-slots {
display: flex;
gap: 12px;
flex-wrap: wrap;
flex-direction: column !important;
}
.modal-overlay .timeslot {
padding: 12px 16px;
background: rgba(249, 250, 251, 0.8);
border: 1px solid rgba(229, 231, 235, 0.5);
border-radius: 12px;
font-size: 14px;
font-weight: 500;
color: #374151;
cursor: pointer;
transition: all 0.2s ease;
}
.modal-overlay .timeslot:hover {
background: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.3);
color: #1E40AF;
}
.modal-overlay .timeslot.selected {
background: #1e40af;
color: white;
}
/* Master section */
.modal-overlay .master-section {
margin-bottom: 32px;
}
.modal-overlay .master-card {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 20px;
/* background: rgba(249, 250, 251, 0.8); */
border-radius: 16px;
border: 1px solid rgba(229, 231, 235, 0.5);
margin-bottom: 16px;
cursor: pointer;
transition: all 0.2s ease;
}
.modal-overlay .master-card:hover {
/*background: rgba(243, 244, 246, 0.9); */
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.modal-overlay .master-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
overflow: hidden;
flex-shrink: 0;
position: relative;
}
.modal-overlay .master-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/*.modal-overlay .master-avatar::before {
content: '';
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 20px;
background: #9CA3AF;
border-radius: 50%;
}
.modal-overlay .master-avatar::after {
content: '';
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 36px;
height: 18px;
background: #9CA3AF;
border-radius: 18px 18px 0 0;
}*/
.modal-overlay .master-info {
flex: 1;
}
.modal-overlay .master-name {
font-size: 16px;
font-weight: 600;
color: #1F2937;
margin-bottom: 4px;
}
.modal-overlay .master-role {
font-size: 14px;
color: #6B7280;
margin-bottom: 8px;
}
.modal-overlay .master-rating {
display: flex;
align-items: center;
gap: 4px;
}
.modal-overlay .star {
color: #FCD34D;
font-size: 14px;
}
.modal-overlay .rating-text {
font-size: 14px;
color: #6B7280;
margin-left: 4px;
}
.modal-overlay .master-info-icon {
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(107, 114, 128, 0.1);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
}
.modal-overlay .master-info-icon::before {
content: 'i';
font-size: 14px;
font-weight: 600;
color: #6B7280;
}
/* Footer */
.modal-overlay .footer {
margin-top: auto;
/* Будет "прижат" к низу */
position: static;
text-align: center;
width: 100%;
/*padding-bottom: 20px; */
margin-top: 10px;
margin-bottom: 10px;
background-color: white;
}
.modal-overlay .footer-text {
font-size: 14px;
color: #1a28c2;
font-weight: 500;
margin-bottom: 0px;
}
/* Стилизация полосы прокрутки */
.modal-overlay .main-card-content::-webkit-scrollbar {
width: 4px;
/* Узкая полоса по умолчанию */
transition: width 0.3s ease;
/* Плавное изменение ширины */
}
.modal-overlay .main-card-content::-webkit-scrollbar-track {
background: rgba(241, 245, 249, 0.5);
border-radius: 10px;
}
.modal-overlay .main-card-content::-webkit-scrollbar-thumb {
background: rgba(59, 130, 246, 0.7);
border-radius: 10px;
transition: background 0.3s ease;
}
.modal-overlay .main-card-content::-webkit-scrollbar-thumb:hover {
background: #3B82F6;
}
/* Увеличиваем ширину скроллбара при наведении на контейнер */
.modal-overlay .main-card-content:hover::-webkit-scrollbar {
width: 4px;
/* Широкая полоса при наведении */
}
/* Для Firefox */
.modal-overlay .main-card-content {
scrollbar-width: thin;
scrollbar-color: rgba(59, 130, 246, 0.7) rgba(241, 245, 249, 0.5);
}
.egedrive-logo {
font-weight: 600;
color: #ccc;
}
/* Responsive design */
@media (max-width: 768px) {
.main-card {
width: 100%;
padding: 80px 20px 20px;
}
.brand-text {
display: none;
}
.page-title {
font-size: 24px;
}
}
/* Animation for card appearance */
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.main-card {
animation: fadeInRight 0.4s ease-out;
}
/* Hover effects for better UX */
.spring-notification:active,
.specialist-item:active,
.master-card:active {
transform: translateY(0) scale(0.98);
}
/* Окно записи к специалисту окончание */
/* Background image blur effect */
.modal-overlay .background-blur {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background: url('data:image/svg+xml,') center/cover;*/
filter: blur(8px);
opacity: 0.4;
}
/* Top navigation */
.modal-overlay .top-nav {
position: absolute;
top: 0;
left: -50px;
right: 0;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.modal-overlay .close-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.modal-overlay .close-btn:hover {
background: rgba(255, 255, 255, 1);
transform: scale(1.05);
}
.modal-overlay .close-btn::before,
.modal-overlay .close-btn::after {
content: '';
position: absolute;
width: 16px;
height: 2px;
background: #666;
border-radius: 1px;
}
.modal-overlay .close-btn::before {
transform: rotate(45deg);
}
.modal-overlay .close-btn::after {
transform: rotate(-45deg);
}
.modal-overlay .user-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.user-icon:hover {
background: rgba(255, 255, 255, 1);
transform: scale(1.05);
}
.user-icon::before {
content: '';
width: 16px;
height: 16px;
border: 2px solid #666;
border-radius: 50% 50% 0 0;
position: relative;
}
.user-icon::after {
content: '';
position: absolute;
width: 20px;
height: 10px;
border: 2px solid #666;
border-radius: 0 0 10px 10px;
border-top: none;
top: 20px;
}
/* Header with logo and title */
.header {
text-align: center;
margin-bottom: 32px;
}
.logo2 {
height: 64px;
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.logo2 img {
height: 64px;
}
.modal-overlay .title2 {
font-size: 24px;
font-weight: 700;
color: #1F2937;
margin-bottom: 4px;
line-height: 1.2;
}
.subtitle2 {
font-size: 14px;
color: #6B7280;
font-weight: 400;
}
/* Spring blonde notification */
.spring-notification {
background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
border-radius: 16px;
padding: 16px 20px;
margin-bottom: 24px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid rgba(59, 130, 246, 0.1);
}
.spring-notification:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
.notification-content {
display: flex;
align-items: center;
gap: 12px;
}
.notification-icon {
width: 24px;
height: 24px;
background: #3B82F6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.notification-icon::before {
content: '';
width: 8px;
height: 12px;
border: 2px solid white;
border-left: none;
border-top: none;
transform: rotate(45deg) translateY(-1px);
}
.notification-text {
font-size: 16px;
font-weight: 500;
color: #1E40AF;
}
.cherry-icon {
font-size: 18px;
margin-left: 4px;
}
.arrow-right {
width: 8px;
height: 8px;
border: 2px solid #3B82F6;
border-left: none;
border-bottom: none;
transform: rotate(45deg);
opacity: 0.7;
}
/* Menu options */
.menu-options {
display: flex;
flex-direction: column;
gap: 8px;
}
.menu-item {
background: rgba(249, 250, 251, 0.8);
border-radius: 16px;
padding: 18px 20px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid rgba(229, 231, 235, 0.5);
}
.menu-item:hover {
background: rgba(243, 244, 246, 0.9);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.menu-item-content {
display: flex;
align-items: center;
gap: 16px;
}
.menu-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: #6B7280;
}
.specialist-icon::before {
content: '👥';
font-size: 20px;
}
.modal-overlay.osnv .calendar-icon::before {
content: '📅';
font-size: 20px;
}
.services-icon {
position: relative;
}
.services-icon::before {
content: '';
width: 20px;
height: 2px;
background: #6B7280;
position: absolute;
border-radius: 1px;
}
.services-icon::after {
content: '';
width: 16px;
height: 2px;
background: #6B7280;
position: absolute;
top: 6px;
border-radius: 1px;
}
.services-icon {
background: linear-gradient(to bottom,
transparent 25%,
#6B7280 25%,
#6B7280 35%,
transparent 35%,
transparent 55%,
#6B7280 55%,
#6B7280 65%,
transparent 65%);
width: 20px;
height: 20px;
}
.menu-text {
font-size: 16px;
font-weight: 500;
color: #374151;
}
.menu-arrow {
width: 8px;
height: 8px;
border: 2px solid #9CA3AF;
border-left: none;
border-bottom: none;
transform: rotate(45deg);
opacity: 0.7;
}
.egedrive-logo {
font-weight: 600;
color: #ccc;
}
/* Responsive design */
@media (max-width: 768px) {
.main-card {
width: 100%;
padding: 80px 20px 20px;
}
.title {
font-size: 22px;
}
.menu-item {
padding: 16px 18px;
}
}
/* Animation for card appearance */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate(-50%, -40%);
}
to {
opacity: 1;
transform: translate(-50%, -50%);
}
}
/* Hover effects for better UX */
.spring-notification:active {
transform: translateY(0) scale(0.98);
}
.menu-item:active {
transform: translateY(0) scale(0.98);
}
.select-indicator {
width: 20px;
height: 20px;
border: 2px solid #e5e7eb;
border-radius: 50%;
flex-shrink: 0;
position: relative;
transition: all 0.2s ease;
}
.select-indicator.selected {
border-color: #3b82f6;
background: #3b82f6;
}
.select-indicator.selected::after {
content: '';
position: absolute;
top: 2px;
left: 5px;
width: 6px;
height: 10px;
border: 2px solid white;
border-left: none;
border-top: none;
transform: rotate(45deg);
}
/* Main container */
.modal-overlay .container {
position: relative;
z-index: 1;
background: white;
min-height: 100vh;
max-width: 414px;
margin: 0 auto;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
/* Header */
.modal-overlay .header {
position: sticky;
top: 0;
background: white;
z-index: 100;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.modal-overlay .header-top {
display: flex;
align-items: center;
padding: 12px 16px;
gap: 12px;
}
.modal-overlay .close-btn {
width: 32px;
height: 32px;
border-radius: 50%;
background: #f1f5f9;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
}
.modal-overlay .close-btn::before,
.modal-overlay .close-btn::after {
content: '';
position: absolute;
width: 14px;
height: 2px;
background: #64748b;
border-radius: 1px;
}
.modal-overlay .close-btn::before {
transform: rotate(45deg);
}
.modal-overlay .close-btn::after {
transform: rotate(-45deg);
}
.modal-overlay .back-btn {
width: 32px;
height: 32px;
border-radius: 50%;
background: #f1f5f9;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.modal-overlay .back-btn::before {
content: '';
width: 8px;
height: 8px;
border: 2px solid #64748b;
border-right: none;
border-bottom: none;
transform: rotate(-45deg);
}
.modal-overlay .salon-info {
flex: 1;
display: flex;
align-items: center;
gap: 12px;
}
.modal-overlay .salon-logo {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 12px;
text-align: center;
line-height: 1.1;
}
.modal-overlay .salon-details {
flex: 1;
}
.modal-overlay .salon-name {
font-size: 16px;
font-weight: 600;
color: #1f2937;
margin-bottom: 2px;
}
.modal-overlay .salon-address {
font-size: 12px;
color: #6b7280;
line-height: 1.3;
}
.modal-overlay .dropdown-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.modal-overlay .dropdown-icon::after {
content: '';
width: 6px;
height: 6px;
border: 2px solid #9ca3af;
border-left: none;
border-top: none;
transform: rotate(45deg);
}
/* Page title */
.modal-overlay .page-title {
font-size: 24px;
font-weight: 700;
color: #1f2937;
padding: 20px 16px 16px;
}
/* Search */
.modal-overlay .search-container {
padding: 0 16px 20px;
}
.modal-overlay .search-box {
position: relative;
width: 100%;
}
.modal-overlay .search-input {
width: 100%;
padding: 16px 16px 16px 50px;
border: 1px solid #e5e7eb;
border-radius: 16px;
font-size: 16px;
background: #f8fafc;
color: #374151;
outline: none;
transition: all 0.2s ease;
}
.modal-overlay .search-input:focus {
border-color: #3b82f6;
background: white;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.modal-overlay .search-input::placeholder {
color: #9ca3af;
}
.modal-overlay .search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
color: #9ca3af;
}
.modal-overlay .search-icon::before {
content: '🔍';
font-size: 16px;
}
/* Featured service */
.modal-overlay .featured-service {
margin: 0 16px 24px;
border-radius: 16px;
overflow: hidden;
background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
position: relative;
cursor: pointer;
transition: transform 0.2s ease;
}
.modal-overlay .featured-service:hover {
transform: translateY(-2px);
}
.modal-overlay .featured-badge {
position: absolute;
top: 16px;
left: 16px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 6px 12px;
display: flex;
align-items: center;
gap: 6px;
z-index: 2;
}
.modal-overlay .bell-icon {
width: 16px;
height: 16px;
color: white;
}
.modal-overlay .bell-icon::before {
content: '🔔';
font-size: 14px;
}
.modal-overlay .featured-text {
color: white;
font-size: 12px;
font-weight: 500;
}
.modal-overlay .featured-content {
padding: 60px 16px 16px;
position: relative;
z-index: 1;
}
.modal-overlay .featured-title {
color: white;
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
}
.modal-overlay .cherry-icon {
position: relative;
right: 16px;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
}
/* Services section */
.modal-overlay .services-section {
padding: 0 16px;
}
.modal-overlay .section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.modal-overlay .section-title {
font-size: 20px;
font-weight: 700;
color: #1f2937;
}
.modal-overlay .collapse-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s ease;
}
.modal-overlay .collapse-icon::after {
content: '';
width: 8px;
height: 8px;
border: 2px solid #6b7280;
border-left: none;
border-bottom: none;
transform: rotate(-45deg);
}
.modal-overlay .collapse-icon.collapsed::after {
transform: rotate(135deg);
}
/* Service cards */
.modal-overlay .service-cards {
display: grid;
gap: 16px;
margin-bottom: 32px;
}
.modal-overlay .service-card {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.modal-overlay .service-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.modal-overlay .service-image {
width: 100%;
height: 200px;
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ef4444 100%);
position: relative;
overflow: hidden;
}
.modal-overlay .service-image.men {
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #f59e0b 100%);
}
.modal-overlay .service-image.women {
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ef4444 100%);
}
.modal-overlay .service-logo {
position: absolute;
top: 16px;
left: 16px;
background: white;
border-radius: 8px;
padding: 8px 12px;
font-size: 10px;
font-weight: 700;
color: #3b82f6;
line-height: 1;
}
.modal-overlay .service-title-overlay {
position: absolute;
bottom: 16px;
left: 16px;
right: 16px;
color: white;
font-size: 20px;
font-weight: 700;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
line-height: 1.2;
}
.modal-overlay .service-details {
padding: 16px;
}
.modal-overlay .service-name {
font-size: 16px;
font-weight: 600;
color: #1f2937;
margin-bottom: 4px;
}
.modal-overlay .service-description {
font-size: 14px;
color: #6b7280;
margin-bottom: 8px;
line-height: 1.4;
}
.modal-overlay .service-info {
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-overlay .service-duration {
font-size: 14px;
color: #6b7280;
}
.modal-overlay .service-more {
font-size: 14px;
color: #3b82f6;
font-weight: 500;
}
.modal-overlay .service-price {
font-size: 18px;
font-weight: 700;
color: #1f2937;
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-overlay .service-card {
animation: fadeInUp 0.3s ease-out;
}
.modal-overlay .service-card:nth-child(2) {
animation-delay: 0.1s;
}
.modal-overlay .service-card:nth-child(3) {
animation-delay: 0.2s;
}
/* Bottom padding */
.modal-overlay .services-section {
padding-bottom: 40px;
}
/* Ripple effect */
.modal-overlay .ripple {
position: absolute;
border-radius: 50%;
background: rgba(59, 130, 246, 0.2);
transform: scale(0);
animation: ripple 0.6s linear;
pointer-events: none;
}
@keyframes ripple {
to {
transform: scale(4);
opacity: 0;
}
}
/* Main container */
.modal-overlay .container {
position: relative;
z-index: 1;
background: white;
min-height: 100vh;
max-width: 414px;
margin: 0 auto;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
/* Добавляем вертикальную полосу прокрутки */
overflow-y: auto;
max-height: 100vh;
}
/* Стили для полосы прокрутки */
.modal-overlay .container::-webkit-scrollbar {
width: 8px;
}
.modal-overlay .container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.modal-overlay .container::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 4px;
}
.modal-overlay .container::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}
/* Header */
.modal-overlay .header {
position: sticky;
top: 0;
background: white;
z-index: 100;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.modal-overlay .header-top {
display: flex;
align-items: center;
padding: 12px 16px;
gap: 12px;
}
.modal-overlay .close-btn {
width: 32px;
height: 32px;
border-radius: 50%;
background: #f1f5f9;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
}
.modal-overlay .close-btn::before,
.modal-overlay .close-btn::after {
content: '';
position: absolute;
width: 14px;
height: 2px;
background: #64748b;
border-radius: 1px;
}
.modal-overlay .close-btn::before {
transform: rotate(45deg);
}
.modal-overlay .close-btn::after {
transform: rotate(-45deg);
}
.modal-overlay .back-btn {
width: 32px;
height: 32px;
border-radius: 50%;
background: #f1f5f9;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.modal-overlay .back-btn::before {
content: '';
width: 8px;
height: 8px;
border: 2px solid #64748b;
border-right: none;
border-bottom: none;
transform: rotate(-45deg);
}
.modal-overlay .salon-info {
flex: 1;
display: flex;
align-items: center;
gap: 12px;
}
.modal-overlay .salon-logo {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 12px;
text-align: center;
line-height: 1.1;
}
.modal-overlay .salon-details {
flex: 1;
}
.modal-overlay .salon-name {
font-size: 16px;
font-weight: 600;
color: #1f2937;
margin-bottom: 2px;
}
.modal-overlay .salon-address {
font-size: 12px;
color: #6b7280;
line-height: 1.3;
}
.modal-overlay .dropdown-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.modal-overlay .dropdown-icon::after {
content: '';
width: 6px;
height: 6px;
border: 2px solid #9ca3af;
border-left: none;
border-top: none;
transform: rotate(45deg);
}
/* Page title */
.modal-overlay .page-title {
font-size: 24px;
font-weight: 700;
color: #1f2937;
padding: 20px 16px 16px;
}
/* Search */
.modal-overlay .search-container {
padding: 0 16px 20px;
}
.modal-overlay .search-box {
position: relative;
width: 100%;
}
.modal-overlay .search-input {
width: 100%;
padding: 16px 16px 16px 50px;
border: 1px solid #e5e7eb;
border-radius: 16px;
font-size: 16px;
background: #f8fafc;
color: #374151;
outline: none;
transition: all 0.2s ease;
}
.modal-overlay .search-input:focus {
border-color: #3b82f6;
background: white;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.modal-overlay .search-input::placeholder {
color: #9ca3af;
}
.modal-overlay .search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
color: #9ca3af;
}
.modal-overlay .search-icon::before {
content: '🔍';
font-size: 16px;
}
/* Featured service */
.modal-overlay .featured-service {
margin: 0 16px 24px;
border-radius: 16px;
overflow: hidden;
background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
position: relative;
cursor: pointer;
transition: transform 0.2s ease;
}
.modal-overlay .featured-service:hover {
transform: translateY(-2px);
}
.modal-overlay .featured-badge {
position: absolute;
top: 16px;
left: 16px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 6px 12px;
display: flex;
align-items: center;
gap: 6px;
z-index: 2;
}
.modal-overlay .bell-icon {
width: 16px;
height: 16px;
color: white;
}
.modal-overlay .bell-icon::before {
content: '🔔';
font-size: 14px;
}
.modal-overlay .featured-text {
color: white;
font-size: 12px;
font-weight: 500;
}
.modal-overlay .featured-content {
padding: 60px 16px 16px;
position: relative;
z-index: 1;
}
.modal-overlay .featured-title {
color: white;
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
}
/* Services section */
.modal-overlay .services-section {
padding: 0 16px;
}
.modal-overlay .section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.modal-overlay.gotovo .section-title {
font-size: 24px;
font-weight: 700;
color: #1f2937;
padding: 8px 8px 16px 0px;
}
.modal-overlay .collapse-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s ease;
}
.modal-overlay .collapse-icon::after {
content: '';
width: 8px;
height: 8px;
border: 2px solid #6b7280;
border-left: none;
border-bottom: none;
transform: rotate(-45deg);
transition: transform 0.2s ease;
}
.modal-overlay .collapse-icon.collapsed::after {
transform: rotate(45deg);
}
/* Service cards */
.modal-overlay .service-cards {
display: grid;
gap: 16px;
margin-bottom: 32px;
transition: all 0.3s ease;
overflow: hidden;
}
.modal-overlay .service-cards.collapsed {
max-height: 0;
margin-bottom: 0;
opacity: 0;
}
.modal-overlay .service-card {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.modal-overlay .service-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.modal-overlay .service-image {
width: 100%;
height: 200px;
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ef4444 100%);
position: relative;
overflow: hidden;
}
.modal-overlay .service-image.algebra {
background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
}
.modal-overlay .service-image.geometry {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
}
.modal-overlay .service-image.calculus {
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%);
}
.modal-overlay .service-logo {
position: absolute;
top: 16px;
left: 16px;
background: white;
border-radius: 8px;
padding: 8px 12px;
font-size: 10px;
font-weight: 700;
color: #3b82f6;
line-height: 1;
}
.modal-overlay .service-title-overlay {
position: absolute;
bottom: 16px;
left: 16px;
right: 16px;
color: white;
font-size: 20px;
font-weight: 700;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
line-height: 1.2;
}
.modal-overlay .service-details {
padding: 16px;
}
.modal-overlay .service-name {
font-size: 16px;
font-weight: 600;
color: #1f2937;
margin-bottom: 4px;
}
.modal-overlay .service-description {
font-size: 14px;
color: #6b7280;
margin-bottom: 8px;
line-height: 1.4;
}
.modal-overlay .service-info {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.modal-overlay .service-duration {
font-size: 14px;
color: #6b7280;
}
.modal-overlay .service-more {
font-size: 14px;
color: #3b82f6;
font-weight: 500;
}
.modal-overlay .service-price {
font-size: 18px;
font-weight: 700;
color: #1f2937;
}
/* Кнопки выбора услуги */
.modal-overlay .service-select-button {
width: 100%;
padding: 12px 16px;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
border: none;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
margin-top: 8px;
}
.modal-overlay .service-select-button:hover {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
transform: translateY(-1px);
}
.modal-overlay .service-select-button.selected {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}
.modal-overlay .service-select-button.selected:hover {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}
/* Глобальная кнопка */
.modal-overlay .service-button {
display: none;
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
color: white;
border: none;
border-radius: 16px;
padding: 16px 24px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 20px rgba(14, 165, 233, 0.3);
width: 100%;
max-width: 400px;
z-index: 10;
opacity: 1;
}
.modal-overlay .service-button.show {
opacity: 1;
display: block;
}
.modal-overlay .service-button:hover {
box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4);
/*transform: translateX(-50%) translateY(-2px); */
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-overlay .service-card {
animation: fadeInUp 0.3s ease-out;
}
.modal-overlay .service-card:nth-child(2) {
animation-delay: 0.1s;
}
.modal-overlay .service-card:nth-child(3) {
animation-delay: 0.2s;
}
/* Bottom padding */
.modal-overlay .services-section {
padding-bottom: 25px;
/* Увеличиваем отступ снизу для глобальной кнопки */
}
/* No results message */
.modal-overlay .no-results {
display: none;
text-align: center;
padding: 40px 20px;
color: #6b7280;
font-size: 16px;
}
/* Ripple effect */
.modal-overlay .ripple {
position: absolute;
border-radius: 50%;
background: rgba(59, 130, 246, 0.2);
transform: scale(0);
animation: ripple 0.6s linear;
pointer-events: none;
}
@keyframes ripple {
to {
transform: scale(4);
opacity: 0;
}
}
/* Дополнительный контент для демонстрации скроллинга */
.modal-overlay .extra-content {
padding: 20px 16px;
background: #f8fafc;
margin: 20px 0;
border-radius: 16px;
margin-left: 16px;
margin-right: 16px;
}
.modal-overlay .extra-content h3 {
color: #1f2937;
margin-bottom: 12px;
font-size: 18px;
font-weight: 600;
}
.modal-overlay .extra-content p {
color: #6b7280;
line-height: 1.5;
margin-bottom: 12px;
}
/* Calendar section */
.modal-overlay .calendar-section {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.modal-overlay .calendar-container {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.modal-overlay .scrollable-content {
flex: 1;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #cbd5e1 #f1f5f9;
}
.modal-overlay .scrollable-content::-webkit-scrollbar {
width: 6px;
}
.modal-overlay .scrollable-content::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 3px;
}
.modal-overlay .scrollable-content::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
}
.modal-overlay .scrollable-content::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
.modal-overlay .month-selector {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
flex-shrink: 0;
}
.modal-overlay .month-button {
background: #f3f4f6;
border: none;
border-radius: 20px;
padding: 8px 16px;
font-size: 16px;
font-weight: 500;
color: #374151;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s ease;
}
.modal-overlay .month-button:hover {
background: #e5e7eb;
}
.modal-overlay .month-button::after {
content: '';
width: 6px;
height: 6px;
border: 2px solid #6b7280;
border-left: none;
border-top: none;
transform: rotate(45deg);
transition: transform 0.2s ease;
}
.modal-overlay .month-button.expanded::after {
transform: rotate(-135deg);
}
.modal-overlay .nav-arrows {
display: flex;
gap: 16px;
}
.modal-overlay .nav-arrow {
width: 32px;
height: 32px;
border: none;
background: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.modal-overlay .nav-arrow::before {
content: '';
width: 8px;
height: 8px;
border: 2px solid #6b7280;
border-right: none;
border-bottom: none;
}
.modal-overlay .nav-arrow.prev::before {
transform: rotate(-45deg);
}
.modal-overlay .nav-arrow.next::before {
transform: rotate(135deg);
}
/* Calendar grid */
.modal-overlay .calendar-grid {
overflow: hidden;
transition: all 0.3s ease;
flex-shrink: 0;
padding-left: 25px;
}
.modal-overlay .weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.modal-overlay .weekday {
text-align: center;
font-size: 14px;
font-weight: 500;
color: #6b7280;
padding: 8px 0;
}
.modal-overlay .days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
}
.modal-overlay .day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 500;
cursor: pointer;
border-radius: 50%;
transition: all 0.2s ease;
color: #374151;
}
.modal-overlay.date .day,
.modal-overlay.date .weekday {
width: 32px;
height: 32px;
}
.modal-overlay .day:hover {
background: #f3f4f6;
}
.modal-overlay .day.other-month {
color: #d1d5db;
}
.modal-overlay .day.selected {
background: #3b82f6;
color: white;
}
.modal-overlay .day.today {
background: #93c5fd;
color: #1e40af;
}
/* No availability message */
.modal-overlay .no-availability {
text-align: center;
padding: 20px;
display: none;
}
.modal-overlay .no-availability.show {
display: block;
}
.modal-overlay .no-availability h3 {
font-size: 18px;
font-weight: 600;
color: #374151;
margin-bottom: 12px;
}
.modal-overlay .no-availability p {
font-size: 14px;
color: #6b7280;
margin-bottom: 8px;
}
.modal-overlay .next-date-button {
background: #0ea5e9;
color: white;
border: none;
border-radius: 24px;
padding: 12px 32px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
margin-top: 24px;
transition: all 0.2s ease;
}
.modal-overlay .next-date-button:hover {
background: #0284c7;
}
.modal-overlay .time-period {
margin-bottom: 32px;
}
.modal-overlay .period-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.modal-overlay .period-title {
font-size: 18px;
font-weight: 600;
color: #374151;
}
.modal-overlay .period-toggle {
width: 8px;
height: 8px;
border: 2px solid #6b7280;
border-left: none;
border-bottom: none;
transform: rotate(132deg);
cursor: pointer;
transition: transform 0.2s ease;
margin-right: 7px;
}
.modal-overlay .period-toggle.expanded {
transform: rotate(-45deg);
}
.modal-overlay .time-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
transition: all 0.3s ease;
}
.modal-overlay .time-grid.collapsed {
display: none;
}
.modal-overlay .time-slot {
background: #f3f4f6;
border: none;
border-radius: 20px;
padding: 12px 16px;
font-size: 14px;
font-weight: 500;
color: #374151;
cursor: pointer;
transition: all 0.2s ease;
}
.modal-overlay .time-slot:hover {
background: #e5e7eb;
}
.modal-overlay .time-slot.selected {
background: #3b82f6;
color: white;
}
/* Footer */
.modal-overlay .footer {
margin-top: auto;
padding: 20px 0;
text-align: center;
border-top: 1px solid #e5e7eb;
flex-shrink: 0;
}
.modal-overlay .footer-text {
font-size: 14px;
color: #6b7280;
}
.modal-overlay .yclients-logo {
font-weight: 600;
color: #9ca3af;
}
/* Responsive */
@media (max-width: 768px) {
.modal-overlay .container {
max-width: 100%;
}
.modal-overlay .main-card {
padding: 80px 16px 16px;
}
.modal-overlay .time-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.modal-overlay .master-info {
display: flex;
align-items: flex-start;
flex-direction: column;
}
.modal-overlay .master-info-final {
width: 100%;
justify-content: flex-start;
align-items: center;
gap: 12px;
display: inline-flex;
}
.modal-overlay .master-info-final .master-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: #e0e0e0;
background-image: url('data:image/svg+xml,');
background-size: cover;
align-self: stretch;
justify-content: center;
align-items: flex-start;
display: flex;
}
.modal-overlay .master-info-final .master-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.modal-overlay .master-details h4 {
font-size: 18px;
font-weight: 500;
color: #333;
margin-bottom: 4px;
}
.modal-overlay .master-details p {
font-size: 14px;
color: #666;
}
.modal-overlay.gotovo .edit-btn {
width: 24px;
height: 24px;
border: none;
background: none;
margin-left: auto;
cursor: pointer;
color: #666;
}
.modal-overlay.gotovo .edit-btn svg {
display: block;
width: inherit;
height: inherit;
line-height: inherit;
}
.modal-overlay .datetime-info {
display: flex;
align-items: center;
margin-bottom: 32px;
padding: 16px 0;
}
.modal-overlay .datetime-info-final {
width: 100%;
justify-content: flex-start;
align-items: center;
gap: 12px;
display: inline-flex;
}
.modal-overlay .datetime-info-final .logo-icon-container {
width: 48px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
background-color: hsl(0deg 0% 15% / 7%);
;
border-radius: 50%;
}
.modal-overlay .datetime-info-final .logo-icon-container .calendar-icon {
width: 24px;
height: 24px;
color: var(--y-core-color-icon-primary);
}
.modal-overlay .datetime-info-final .calendar-icon svg {
display: block;
width: inherit;
height: inherit;
line-height: inherit;
}
.modal-overlay .datetime-details p {
font-size: 14px;
color: #666;
margin-bottom: 4px;
}
.modal-overlay .datetime-details h4 {
font-size: 16px;
font-weight: 500;
color: #333;
}
.modal-overlay .separator {
height: 1px;
background: #e0e0e0;
margin: 24px 0;
}
.modal-overlay.uslugi .services-section {
margin-bottom: 0px !important;
}
.modal-overlay.gotovo .services-section {
margin-bottom: 0px;
display: flex;
flex-direction: column;
gap: 16px;
padding: 0px;
}
.modal-overlay.gotovo .services-header {
font-weight: 700;
font-size: 20px;
line-height: 24px;
color: var(--y-core-color-text-primary);
display: flex;
justify-content: space-between;
}
.modal-overlay.gotovo .services-header .services-header-detail {
display: flex;
align-items: flex-start;
}
.modal-overlay .services-title {
font-size: 18px;
font-weight: 600;
color: #333;
}
.modal-overlay .duration {
color: #666;
font-size: 14px;
margin-left: 8px;
}
.modal-overlay .service-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 8px;
}
.modal-overlay.gotovo .service-info {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 16px;
flex-direction: column;
}
.modal-overlay .service-info h5 {
font-size: 16px;
color: #333;
margin-bottom: 4px;
}
.modal-overlay .service-info p {
font-size: 14px;
color: #666;
}
.modal-overlay .service-price {
font-size: 16px;
font-weight: 600;
color: #333;
}
.modal-overlay.gotovo .total-section {
padding: 16px 0;
border-top: 1px solid #e0e0e0;
}
.modal-overlay .total-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-overlay .total-label {
font-size: 16px;
font-weight: 600;
color: #333;
}
.modal-overlay .total-price {
font-size: 18px;
font-weight: 600;
color: #333;
}
.modal-overlay .form-section {
margin-bottom: 32px;
}
.modal-overlay .form-title {
font-size: 18px;
font-weight: 600;
color: #333;
margin-bottom: 24px;
}
.modal-overlay .form-group {
margin-bottom: 20px;
}
.modal-overlay .form-label {
font-size: 14px;
color: #666;
margin-bottom: 8px;
display: block;
}
.modal-overlay .form-input {
width: 100%;
padding: 16px;
border: 2px solid #e0e0e0;
border-radius: 12px;
font-size: 16px;
background: white;
transition: border-color 0.3s;
}
.modal-overlay .form-input:focus {
outline: none;
border-color: #1976d2;
}
.modal-overlay .form-input::placeholder {
color: #bbb;
}
.modal-overlay .checkbox-group {
margin-bottom: 16px;
}
.modal-overlay .checkbox-item {
display: flex;
align-items: flex-start;
margin-bottom: 12px;
}
.modal-overlay .checkbox {
width: 20px;
height: 20px;
border: 2px solid #e0e0e0;
border-radius: 4px;
margin-right: 12px;
margin-top: 2px;
cursor: pointer;
position: relative;
flex-shrink: 0;
}
.modal-overlay .checkbox.checked {
background: #1976d2;
border-color: #1976d2;
}
.modal-overlay .checkbox.checked::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 12px;
}
.modal-overlay .checkbox-label {
font-size: 14px;
color: #666;
line-height: 1.4;
cursor: pointer;
}
.modal-overlay .checkbox-label a {
color: #1976d2;
text-decoration: none;
}
.modal-overlay .submit-btn {
width: 100%;
padding: 16px;
background: #1976d2;
color: white;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
margin-bottom: 16px;
transition: background 0.3s;
}
.modal-overlay .submit-btn:hover {
background: #1565c0;
}
.modal-overlay .footer-text {
font-size: 12px;
color: #999;
text-align: center;
line-height: 1.4;
padding-bottom: 20px;
}
.modal-overlay .scrollable {
max-height: 100vh;
overflow-y: auto;
}
.modal-overlay.about {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
/* backdrop-filter: blur(8px); */
display: none;
z-index: 2000;
opacity: 0;
transition: opacity 0.3s ease;
}
.modal-overlay.about .main-card {
padding: 88px 0px 0px;
background-color: #ccc;
}
.modal-overlay.about .main-card .main-card-content {
background-color: white;
padding: 20px 10px 20px 20px;
border-top-right-radius: 24px;
border-top-left-radius: 24px;
}
.modal-overlay.about .text-modal-about {
margin-bottom: 15px;
}
.modal-overlay.about .text-modal-about .about-logo {
position: absolute;
width: 100%;
height: 70px;
top: 58px;
left: 10px;
z-index: 100;
}
.modal-overlay.about .text-modal-about img {
width: 88px;
height: 50px;
}
.modal-overlay.about .text-modal-about .about-full {
font-size: 23px;
font-weight: 500;
text-transform: uppercase;
margin-top: 10px;
}
.modal-overlay.about .text-modal-about .about-full span {
font-size: 18px;
text-transform: none;
}
.modal-overlay.about .time-items {
display: flex;
align-items: center;
gap: 10px;
justify-content: space-between;
flex-direction: column;
}
.modal-overlay.about .time-items .time-items-line {
display: flex;
align-items: center;
}
.modal-overlay.about .modal-content {
transform: scale(1);
}
.modal-overlay.about .card {
width: 100%;
max-width: 380px;
background: white;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.modal-overlay.about .header {
background: #f8f9fa;
padding: 16px;
border-bottom: 1px solid #eaeaea;
}
.modal-overlay.about .foto-section {
margin-top: 30px;
}
.modal-overlay.about .raspologenie {
margin-top: 30px;
}
.modal-overlay.about .raspologenie-title {
font-size: 18px;
font-weight: 600;
color: #2d3748;
line-height: 1.4;
margin-bottom: 15px;
}
.modal-overlay.about .foto-title {
font-size: 18px;
font-weight: 600;
color: #2d3748;
line-height: 1.4;
}
.modal-overlay.about .bc-foto {
position: relative;
width: 100%;
height: 335px;
overflow: visible;
}
.modal-overlay.about .bc-foto img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(0.8);
transform-origin: center;
object-position: 4px -51px;
border-radius: 24px;
}
.modal-overlay.about .map-foto {
position: relative;
width: 100%;
height: 335px;
overflow: visible;
}
.modal-overlay.about .map-foto img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.modal-overlay.about .title {
font-size: 18px;
font-weight: 600;
color: #2d3748;
line-height: 1.4;
}
.modal-overlay.about .subtitle {
font-size: 14px;
color: #718096;
margin-top: 4px;
}
.modal-overlay.about .content {
padding: 20px 16px;
}
.modal-overlay.about .info-item {
display: flex;
align-items: flex-start;
margin-bottom: 16px;
}
.modal-overlay.about .icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
color: #718096;
}
.modal-overlay.about .text {
flex: 1;
font-size: 15px;
color: #4a5568;
line-height: 1.4;
}
.modal-overlay.about .section-title {
font-weight: 600;
color: #2d3748;
font-size: 16px;
margin: 24px 0 12px;
padding-top: 8px;
border-top: 1px solid #edf2f7;
}
.modal-overlay.about .buttons {
display: flex;
gap: 12px;
margin-top: 20px;
}
.modal-overlay.about .btn {
flex: 1;
height: 44px;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 15px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.modal-overlay.about .btn-photo {
background: white;
color: #4299e1;
border: 1px solid #cbd5e0;
}
.modal-overlay.about .btn-photo:hover {
background: #ebf8ff;
border-color: #90cdf4;
}
.modal-overlay.about .btn-appointment {
background: #4299e1;
color: white;
}
.modal-overlay.about .btn-appointment:hover {
background: #3182ce;
}
.modal-overlay.about .footer {
background: #f8f9fa;
padding: 16px;
display: flex;
justify-content: space-between;
border-top: 1px solid #eaeaea;
}
.modal-overlay.about .footer-link {
display: flex;
align-items: center;
color: #4299e1;
font-weight: 500;
font-size: 14px;
text-decoration: none;
}
.modal-overlay.about .footer-link i {
margin-right: 6px;
}
.modal-overlay.about .footer-link:hover {
text-decoration: underline;
}
.modal-overlay.about .submit-btn {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
color: white;
border: none;
border-radius: 16px;
padding: 16px 24px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 20px rgba(14, 165, 233, 0.3);
width: 100%;
max-width: 400px;
z-index: 10;
}