/* ===== БАЗОВЫЕ СТИЛИ ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

body { 
    font-family: 'Inter', sans-serif; 
    scroll-behavior: smooth; 
    -webkit-font-smoothing: antialiased;
    background-color: #fafaf9; /* stone-50 */
    color: #292524; /* stone-800 */
}

h1, h2, h3, h4, .font-serif { 
    font-family: 'Playfair Display', serif; 
}

a { text-decoration: none; color: inherit; }
button { font-family: inherit; }

iconify-icon { stroke-width: 1.5; }

/* ===== СКРОЛЛБАР ===== */
::-webkit-scrollbar { width: 0.375rem; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d6d3d1; border-radius: 1rem; }
::-webkit-scrollbar-thumb:hover { background: #a8a29e; }

/* ===== ЧИСЛОВЫЕ ПОЛЯ ===== */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { 
    -webkit-appearance: none; margin: 0; 
}
input[type="number"] { -moz-appearance: textfield; }

/* ===== ГЛАВНЫЙ ЭКРАН (index.html) ===== */
.split-screen { 
    height: 100vh; 
    transition: opacity 0.5s ease; 
}
.split-half {
    transition: flex 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
    border: 1.5px solid #000000;
    border-radius: 1.5rem;
    overflow: hidden;
    background-color: transparent;
}

@media (min-width: 768px) { 
    .split-half:hover { 
        flex: 1.15; 
        animation: hoverTremble 0.4s ease-in-out; 
        border-color: #1c1917;
    } 
}
@keyframes hoverTremble {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-2px); }
    40%      { transform: translateX(2px); }
    60%      { transform: translateX(-1.5px); }
    80%      { transform: translateX(1.5px); }
}

/* ===== КАРТОЧКИ ВЫБОРА ===== */
.flower-card { transition: all 0.2s ease-out; }
.flower-card.selected { 
    border-color: #E11D48; 
    background-color: #FFE4E6; 
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.1);
}
.density-btn.selected {
    border-color: #10B981;
    background-color: #ECFDF5;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
}

/* ===== КАСТОМНЫЙ ЧЕКБОКС ===== */
.custom-checkbox { 
    appearance: none; 
    background-color: transparent; 
    margin: 0; 
    cursor: pointer; 
    position: relative; 
    transition: all 0.2s ease; 
}
.custom-checkbox:checked { 
    background-color: currentColor; 
    border-color: currentColor; 
}
.custom-checkbox::after {
    content: "";
    position: absolute;
    display: none;
    left: 0.35rem;
    top: 0.15rem;
    width: 0.35rem;
    height: 0.65rem;
    border: solid white;
    border-width: 0 0.125rem 0.125rem 0;
    transform: rotate(45deg);
}
.custom-checkbox:checked::after { display: block; }

/* ===== ПОЛЗУНОК ПЛОЩАДИ ===== */
.slider-wrapper { 
    position: relative; 
    padding: 1.5rem 0; 
    cursor: pointer; 
}
input[type="range"] { 
    -webkit-appearance: none; 
    background: transparent; 
    outline: none; 
    cursor: pointer; 
    width: 100%; 
}
input[type="range"]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    height: 1.5rem; 
    width: 1.5rem; 
    border-radius: 9999px; 
    background: #14B8A6; 
    cursor: grab; 
    margin-top: -0.65rem; 
    box-shadow: 0 3px 8px rgba(20, 184, 166, 0.5); 
    border: 3px solid white; 
    transition: transform 0.1s, box-shadow 0.2s; 
    z-index: 2; 
    position: relative;
}
input[type="range"]::-webkit-slider-thumb:active { 
    transform: scale(1.1); 
    cursor: grabbing; 
    box-shadow: 0 5px 15px rgba(20, 184, 166, 0.7); 
}
input[type="range"]::-webkit-slider-runnable-track { 
    width: 100%; 
    height: 0.4rem; 
    background: #e7e5e4; 
    border-radius: 9999px; 
    cursor: pointer; 
}

/* ===== МОДАЛЬНЫЕ ОКНА ===== */
.modal { 
    display: none; 
    opacity: 0; 
    transition: opacity 0.3s ease; 
}
.modal.active { 
    display: flex; 
    opacity: 1; 
}
.modal-content { 
    transform: translateY(1rem) scale(0.98); 
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
}
.modal.active .modal-content { 
    transform: translateY(0) scale(1); 
}

/* ===== АНИМАЦИЯ ПОРТФОЛИО ===== */
.portfolio-item { 
    opacity: 0; 
    transform: translateY(1rem); 
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); 
}
.portfolio-item.show { 
    opacity: 1; 
    transform: translateY(0); 
}

/* ===== НАВИГАЦИЯ ===== */
.nav-back { 
    display: inline-flex; 
    align-items: center; 
    gap: 0.5rem; 
    color: #78716c; 
    font-size: 0.875rem; 
    font-weight: 500;
    transition: color 0.2s;
}
.nav-back:hover { color: #292524; }

/* ===== КНОПКИ ===== */
.btn-primary {
    background-color: #E11D48;
    color: white;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 3px rgba(225, 29, 72, 0.3);
}
.btn-primary:hover {
    background-color: #BE185D;
}
.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary {
    background-color: #10B981;
    color: white;
    padding: 0.875rem 2rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
}
.btn-secondary:hover {
    background-color: #059669;
}

/* ===== КАРТОЧКИ ТОВАРОВ ===== */
.product-card {
    border: 1px solid #e7e5e4;
    border-radius: 1rem;
    background: white;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.product-card:hover {
    border-color: #E11D48;
    box-shadow: 0 15px 30px rgba(225, 29, 72, 0.15);
    transform: scale(1.02);
}

/* ===== ПРЕВЬЮ ЗАКАЗА ===== */
.preview-list {
    min-height: 4rem;
}
.preview-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    border-bottom: 1px dashed #e7e5e4;
}
.preview-item:last-child {
    border-bottom: none;
}

/* ===== УТИЛИТЫ ===== */
.hidden { display: none !important; }
.sticky { position: sticky; }
.top-28 { top: 7rem; }