/* ==========================================================================
   Библиотека Пара — Хэллоуин-тема
   Подключается последней (lib/theme.php), поверх base.css и страничных файлов.
   ========================================================================== */

:root {
    --bg:            #0F0A13;
    --bg-elev:       #17101B;
    --surface:       #1A1220;
    --surface-2:     #251829;
    --surface-3:     #31203A;
    --border:        #3A2440;
    --border-strong: #503054;

    --accent:       #FF7A1A;
    --accent-2:     #FFA14D;
    --accent-deep:  #D9531A;
    --accent-soft:  rgba(255, 122, 26, 0.14);
    --accent-ring:  rgba(255, 122, 26, 0.34);
    --accent-grad:  linear-gradient(135deg, #FFB347 0%, #FF7A1A 42%, #E4358A 100%);
    --shadow-accent: 0 12px 32px -10px rgba(255, 106, 26, 0.6);

    --gold:      #B987FF;
    --gold-soft: rgba(185, 135, 255, 0.16);
}

body {
    background:
        radial-gradient(520px 340px at 6% -4%, rgba(255, 122, 26, 0.22), transparent 70%),
        radial-gradient(460px 320px at 100% 0%, rgba(150, 70, 255, 0.20), transparent 70%),
        var(--bg);
}

/* --- Шапка --------------------------------------------------------------- */

header {
    background: rgba(15, 10, 19, 0.84);
    border-bottom-color: rgba(255, 122, 26, 0.28);
}

header::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 122, 26, 0.9) 30%, rgba(228, 53, 138, 0.9) 70%, transparent);
    pointer-events: none;
}

/* Паутина в правом верхнем углу */
header::after {
    content: '';
    position: absolute;
    right: 0; top: 0;
    width: 60px; height: 60px;
    z-index: -1;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23FFB070' stroke-width='1' opacity='.55'%3E%3Cpath d='M64 0L0 0M64 0L0 22M64 0L10 52M64 0L34 64M64 0L64 64'/%3E%3Cpath d='M46 0Q42 14 64 18M28 0Q24 26 64 34M10 0Q10 40 64 50'/%3E%3C/svg%3E") no-repeat right top / contain;
}

/* --- Заголовок раздела: летучая мышь ------------------------------------- */

main h1::after {
    content: '';
    display: inline-block;
    width: 48px; height: 28px;
    margin-left: 12px;
    vertical-align: -5px;
    background: url("../img/bat_big.svg") center / contain no-repeat;
    filter: drop-shadow(0 4px 8px rgba(255, 106, 26, 0.45));
    animation: hw-bob 2.8s ease-in-out infinite;
}

@keyframes hw-bob {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-4px) rotate(3deg); }
}

/* --- Карточки ------------------------------------------------------------ */

.card { border-color: rgba(255, 122, 26, 0.16); }
.card:active { border-color: var(--accent); }

.card .button::before {
    content: '';
    display: inline-block;
    width: 14px; height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
    background: url("../img/pumpkin.svg") center / contain no-repeat;
}

.new-badge {
    background: linear-gradient(135deg, #C9A2FF, #7B3FE4);
    color: #fff;
}

/* --- Кнопки внизу экрана ------------------------------------------------- */

.button-footer::before {
    content: '';
    display: inline-block;
    width: 18px; height: 18px;
    margin-right: 8px;
    vertical-align: -3px;
    background: url("../img/pumpkin.svg") center / contain no-repeat;
}

.button-footer.disabled::before,
.button-footer[disabled]::before { opacity: .35; }

.button-footer:active,
#submit-btn:active { box-shadow: 0 6px 18px -6px rgba(255, 106, 26, 0.55); }

/* --- Страница «Заказ принят»: маскот ------------------------------------- */

.mascot-wrap {
    position: relative;
    width: 156px;
    margin: 0 auto 26px;
}

.mascot {
    display: block;
    width: 156px; height: 156px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent);
    box-shadow:
        0 0 0 9px rgba(255, 122, 26, 0.10),
        0 20px 44px -12px rgba(255, 106, 26, 0.65);
    animation: hw-float 3.4s ease-in-out infinite;
}

.mascot-wrap .success-icon {
    position: absolute;
    right: -6px; bottom: -2px;
    width: 46px; height: 46px;
    margin: 0;
    box-shadow: 0 0 0 4px var(--bg);
}

.mascot-wrap .success-icon svg { width: 22px; height: 22px; }

@keyframes hw-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* --- Дождь из тыкв ------------------------------------------------------- */

.hw-rain {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    pointer-events: none;
}

.hw-rain span {
    position: absolute;
    top: -12vh;
    line-height: 1;
    will-change: transform, opacity;
    animation: hw-fall linear forwards;
}

@keyframes hw-fall {
    0%   { transform: translate3d(0, 0, 0) rotate(0); opacity: 0; }
    8%   { opacity: 1; }
    100% { transform: translate3d(var(--dx), 118vh, 0) rotate(var(--rot)); opacity: .95; }
}

@media (prefers-reduced-motion: reduce) {
    .hw-rain { display: none; }
    .mascot, main h1::after { animation: none; }
}