<!-- =============== style.css =============== -->
/* Общие стили и кастомные классы Tailwind, если нужны поверх CDN */
body {
    font-family: 'Inter', sans-serif;
    /* Добавим немного плавности для скролла якорей, если html.scroll-behavior не везде работает */
    scroll-padding-top: 80px; /* Учитываем высоту фиксированной навигации */
}

/* Кастомные розовые цвета (уже есть в HTML, но можно вынести для чистоты) */
.bg-brand-pink { background-color: #fce4ec; }
.text-brand-pink-dark { color: #ec407a; }
.border-brand-pink-dark { border-color: #ec407a; }
.hover\:bg-brand-pink-dark:hover { background-color: #e91e63; }
.focus\:ring-brand-pink-dark:focus { 
    --tw-ring-color: #ec407a; /* Tailwind v3 */
    box-shadow: 0 0 0 3px var(--tw-ring-color); /* Fallback/custom */
}

/* Стили для навигации */
.nav-link {
    @apply text-gray-600 hover:text-brand-pink-dark px-3 py-2 rounded-md text-sm font-medium transition-colors;
}
.nav-link-mobile {
    @apply block text-gray-600 hover:text-brand-pink-dark hover:bg-pink-50 px-4 py-2 text-sm font-medium transition-colors;
}


/* Общие стили для секций и заголовков */
.section-title {
    @apply text-3xl sm:text-4xl font-bold text-center text-gray-800 mb-10 md:mb-16;
}
.subsection-title {
    @apply text-2xl sm:text-3xl font-semibold text-brand-pink-dark mb-6 text-center md:text-left;
}

/* Стили для карточек */
.info-card {
    @apply bg-pink-50 p-6 sm:p-8 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300;
}
.info-card-title {
    @apply text-xl sm:text-2xl font-semibold text-brand-pink-dark mb-4;
}

.feature-card {
    @apply bg-pink-50 p-6 rounded-lg shadow-md text-center hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1;
}

/* Стили для таймлайна "Как заказать" */
.timeline-item {
    @apply ml-8 relative pb-2; /* Увеличил ml для иконки */
}
.timeline-icon {
    @apply absolute flex items-center justify-center w-10 h-10 bg-pink-200 rounded-full -left-5 ring-4 ring-white text-brand-pink-dark text-xl;
}
.timeline-title {
    @apply font-semibold text-lg text-gray-900 mb-1;
}
.timeline-text {
    @apply text-sm text-gray-600;
}

/* Стили для формы */
.form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}
.form-input {
    @apply mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-brand-pink-dark focus:border-brand-pink-dark sm:text-sm transition-colors;
}
.form-input:focus {
    border-color: #ec407a;
    box-shadow: 0 0 0 0.2rem rgba(236, 64, 122, 0.25);
}
.form-input.border-red-500 { /* Стиль для невалидных полей */
    border-color: #ef4444; /* Tailwind red-500 */
}
.form-input.border-red-500:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.25);
}


/* Стили для основной кнопки призыва к действию (CTA) */
.cta-button {
    @apply bg-brand-pink-dark hover:bg-pink-700 text-white font-semibold py-3 px-8 rounded-lg text-lg shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-50;
}
/* Стиль для кнопки отправки формы в состоянии загрузки */
.cta-button:disabled {
    @apply bg-pink-300 cursor-not-allowed;
}


/* Стили для ссылок в футере */
.footer-link {
    @apply hover:text-brand-pink-dark transition-colors duration-200;
}

/* Анимации (простые) */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 1s ease-out;
}
.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Стили для модального окна (уже есть в HTML, но можно вынести) */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
    /* Плавное появление модального окна */
    animation: fadeIn 0.3s ease-out;
}
.modal-content {
    background-color: #ffffff;
    margin: 10% auto;
    padding: 25px 30px;
    border: none;
    width: 90%;
    max-width: 450px;
    border-radius: 0.75rem;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    /* Плавное появление контента модального окна */
    animation: fadeInUp 0.3s ease-out;
}
.modal-header {
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 20px;
}
.modal-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #374151;
}
.modal-body p {
    font-size: 1rem;
    color: #4b5563;
    margin-bottom: 25px;
}
.close-button {
    position: absolute;
    top: 15px;
    right: 20px;
    color: #9ca3af;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
    transition: color 0.2s ease;
}
.close-button:hover,
.close-button:focus {
    color: #1f2937;
    text-decoration: none;
    cursor: pointer;
}
.modal-button {
    background-color: #ec407a;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.modal-button:hover {
    background-color: #e91e63;
}

/* Для отладки адаптивности можно добавить рамки */
/*
* {
    border: 1px solid red !important;
}
*/