/* ==========================================================
   A&I Luxury Hair — premium polish layer
   Только внешний вид. Логику и структуру не меняет.
   ========================================================== */

:root {
    --ai-bg-deep: #021a13;
    --ai-bg-card: rgba(5, 43, 31, .72);
    --ai-bg-card-soft: rgba(246, 240, 230, .045);
    --ai-gold: #D6B46A;
    --ai-gold-2: #F1DA89;
    --ai-cream: #F6F0E6;
    --ai-muted: rgba(246, 240, 230, .68);
    --ai-border: rgba(214, 180, 106, .18);
    --ai-border-strong: rgba(214, 180, 106, .32);
    --ai-shadow: 0 24px 70px rgba(0, 0, 0, .24);
    --ai-shadow-soft: 0 16px 42px rgba(0, 0, 0, .18);
    --ai-radius-xl: 32px;
    --ai-radius-lg: 24px;
    --ai-radius-md: 18px;
    --ai-transition: 180ms ease;
}

/* Общая дорогая глубина фона */
html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at 18% 0%, rgba(214, 180, 106, .075), transparent 34%),
        radial-gradient(circle at 100% 22%, rgba(20, 120, 82, .16), transparent 34%),
        linear-gradient(180deg, #021a13 0%, #05281d 48%, #021a13 100%) !important;
    color: var(--ai-cream);
}

/* Мягкий premium-noise без картинок */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
        radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .035) 0 1px, transparent 1px),
        radial-gradient(circle at 80% 30%, rgba(214, 180, 106, .035) 0 1px, transparent 1px);
    background-size: 46px 46px, 62px 62px;
    opacity: .36;
}

/* Единый стиль карточек/секций */
section,
.card,
.admin-card,
.panel,
.block,
[class*="card"],
[class*="panel"] {
    border-color: var(--ai-border) !important;
}

body:not(.no-ai-premium) section.card,
body:not(.no-ai-premium) .card,
body:not(.no-ai-premium) .admin-card,
body:not(.no-ai-premium) .panel,
body:not(.no-ai-premium) .block {
    position: relative;
    overflow: hidden;
    border-radius: var(--ai-radius-xl) !important;
    background:
        radial-gradient(circle at top left, rgba(214, 180, 106, .105), transparent 34%),
        linear-gradient(135deg, rgba(246, 240, 230, .06), rgba(246, 240, 230, .022)),
        rgba(5, 43, 31, .68) !important;
    box-shadow: var(--ai-shadow-soft);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body:not(.no-ai-premium) section.card::before,
body:not(.no-ai-premium) .card::before,
body:not(.no-ai-premium) .admin-card::before,
body:not(.no-ai-premium) .panel::before,
body:not(.no-ai-premium) .block::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(135deg, rgba(255,255,255,.07), transparent 28%, transparent 72%, rgba(214,180,106,.08));
    opacity: .78;
}

/* Контент карточек поверх декоративного слоя */
section.card > *,
.card > *,
.admin-card > *,
.panel > *,
.block > * {
    position: relative;
}

/* Заголовки */
h1, h2, h3 {
    letter-spacing: -.025em;
}

h1, h2 {
    color: var(--ai-gold) !important;
    text-shadow: 0 10px 32px rgba(214, 180, 106, .10);
}

h3 {
    color: rgba(241, 218, 137, .94) !important;
}

/* Текст */
p,
li,
label,
.muted,
small {
    color: var(--ai-muted);
}

/* Формы */
input,
textarea,
select {
    border: 1px solid rgba(214, 180, 106, .18) !important;
    background:
        linear-gradient(135deg, rgba(3, 25, 18, .88), rgba(3, 25, 18, .66)) !important;
    color: var(--ai-cream) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 8px 24px rgba(0,0,0,.12);
    transition:
        border-color var(--ai-transition),
        box-shadow var(--ai-transition),
        transform var(--ai-transition);
}

input:focus,
textarea:focus,
select:focus {
    border-color: rgba(241, 218, 137, .72) !important;
    box-shadow:
        0 0 0 4px rgba(214, 180, 106, .12),
        inset 0 1px 0 rgba(255,255,255,.06),
        0 12px 30px rgba(0,0,0,.16);
    outline: none !important;
}

/* Кнопки */
button,
.btn,
a.btn,
.secondary,
.danger,
.success {
    position: relative;
    overflow: hidden;
    transition:
        transform var(--ai-transition),
        filter var(--ai-transition),
        box-shadow var(--ai-transition),
        border-color var(--ai-transition);
}

button:hover,
.btn:hover,
a.btn:hover,
.secondary:hover,
.danger:hover,
.success:hover {
    transform: translateY(-1px);
    filter: brightness(1.035);
}

button:active,
.btn:active,
a.btn:active,
.secondary:active,
.danger:active,
.success:active {
    transform: translateY(0) scale(.99);
}

/* Золотые основные кнопки */
button:not(.danger):not(.secondary):not(.success):not(.date-card):not(.time-chip):not(.ai-select-button):not(.ai-booking-slot-btn),
.btn:not(.danger):not(.secondary):not(.success):not(.date-card):not(.time-chip):not(.ai-select-button):not(.ai-booking-slot-btn),
a.btn:not(.danger):not(.secondary):not(.success):not(.date-card):not(.time-chip):not(.ai-select-button):not(.ai-booking-slot-btn) {
    background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,.28), transparent 30%),
        linear-gradient(135deg, var(--ai-gold), var(--ai-gold-2)) !important;
    color: #041b13 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.30),
        0 16px 36px rgba(214,180,106,.16);
}

/* Вторичные кнопки */
.secondary,
button.secondary,
a.secondary,
.btn.secondary {
    background:
        linear-gradient(135deg, rgba(246,240,230,.11), rgba(246,240,230,.055)) !important;
    border: 1px solid rgba(214,180,106,.20) !important;
    color: var(--ai-cream) !important;
}

/* Красные кнопки */
.danger,
button.danger,
.btn.danger {
    background:
        radial-gradient(circle at 30% 15%, rgba(255,255,255,.18), transparent 30%),
        linear-gradient(135deg, #ff2f65, #ff1f5b) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 14px 30px rgba(255,47,101,.16);
}

/* Успешные кнопки */
.success,
button.success,
.btn.success {
    background:
        linear-gradient(135deg, #41e3a0, #76f0ba) !important;
    color: #041b13 !important;
}

/* Таблицы */
table {
    border-collapse: separate !important;
    border-spacing: 0 12px !important;
}

thead th {
    color: var(--ai-gold) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 0 !important;
}

tbody tr {
    background:
        linear-gradient(135deg, rgba(246,240,230,.052), rgba(246,240,230,.018)),
        rgba(8, 50, 38, .52) !important;
    border-radius: 22px;
    transition:
        transform var(--ai-transition),
        background var(--ai-transition),
        box-shadow var(--ai-transition);
}

tbody tr:hover {
    transform: translateY(-1px);
    background:
        linear-gradient(135deg, rgba(246,240,230,.075), rgba(246,240,230,.026)),
        rgba(10, 58, 43, .58) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.14);
}

tbody td {
    border: 0 !important;
}

tbody td:first-child {
    border-radius: 22px 0 0 22px;
}

tbody td:last-child {
    border-radius: 0 22px 22px 0;
}

/* Промокоды после финального исправления */
.promo-page .promo-row-final {
    transition:
        transform var(--ai-transition),
        box-shadow var(--ai-transition),
        background var(--ai-transition);
}

.promo-page .promo-row-final:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 38px rgba(0,0,0,.16);
}

/* Блок записей */
.admin-page table tbody tr td,
.admin-page .appointment-card,
.admin-page [class*="appointment"][class*="card"] {
    color: rgba(246, 240, 230, .88);
}

/* Фото */
.ai-hair-photo-box,
.ai-admin-client-photo-card {
    box-shadow:
        0 18px 46px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Галерея и изображения */
img {
    transition:
        transform 240ms ease,
        filter 240ms ease,
        box-shadow 240ms ease;
}

.gallery img:hover,
[class*="gallery"] img:hover,
.service-card img:hover,
[class*="service"] img:hover {
    transform: scale(1.018);
    filter: brightness(1.045) contrast(1.02);
}

/* Верхние панели */
.top,
.header,
.site-header,
.admin-header,
.topbar,
.admin-topbar {
    background:
        linear-gradient(135deg, rgba(1, 18, 13, .88), rgba(3, 31, 24, .72)) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* Мягкое появление */
.ai-reveal {
    opacity: 0;
    transform: translateY(12px);
}

.ai-reveal.ai-reveal-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 520ms ease,
        transform 520ms ease;
}

/* Лёгкий premium shimmer для главных CTA */
.ai-premium-shine {
    position: relative;
    overflow: hidden;
}

.ai-premium-shine::after {
    content: "";
    position: absolute;
    top: -40%;
    bottom: -40%;
    left: -80%;
    width: 42%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
    animation: aiShine 4.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes aiShine {
    0%, 55% { left: -80%; }
    78%, 100% { left: 130%; }
}

/* Аккуратная подсветка карточек */
@media (hover: hover) {
    body:not(.no-ai-premium) section.card:hover,
    body:not(.no-ai-premium) .card:hover,
    body:not(.no-ai-premium) .admin-card:hover,
    body:not(.no-ai-premium) .panel:hover,
    body:not(.no-ai-premium) .block:hover {
        box-shadow: var(--ai-shadow);
        border-color: rgba(214, 180, 106, .24) !important;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .ai-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Мобильная аккуратность */
@media (max-width: 760px) {
    body:not(.no-ai-premium) section.card,
    body:not(.no-ai-premium) .card,
    body:not(.no-ai-premium) .admin-card,
    body:not(.no-ai-premium) .panel,
    body:not(.no-ai-premium) .block {
        border-radius: 24px !important;
    }

    tbody tr:hover {
        transform: none;
    }

    button:hover,
    .btn:hover,
    a.btn:hover,
    .secondary:hover,
    .danger:hover,
    .success:hover {
        transform: none;
    }
}