/* =============================================================================
   assets/css/components.css — переиспользуемые UI-компоненты
   ========================================================================== */

/* --- Сплэш-экран --------------------------------------------------------- */
.app-splash {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg);
    transition: opacity var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
}
.app-splash.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.app-splash__cup-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.app-splash__steam { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); width: 60px; height: 30px; pointer-events: none; }
.app-splash__steam span {
    position: absolute; bottom: 0; width: 4px; height: 4px; border-radius: 50%;
    background: rgba(176, 123, 79, 0.55); animation: steam-rise 1.8s var(--ease-in-out) infinite;
}
.app-splash__steam span:nth-child(1) { left: 14px; animation-delay: 0s; }
.app-splash__steam span:nth-child(2) { left: 28px; animation-delay: 0.4s; }
.app-splash__steam span:nth-child(3) { left: 42px; animation-delay: 0.8s; }
.app-splash__cup {
    width: 120px; height: 120px; border-radius: var(--radius-xl);
    background: linear-gradient(160deg, var(--color-latte), var(--color-coffee));
    box-shadow: var(--shadow-pop);
    display: flex; align-items: center; justify-content: center;
    animation: splash-pulse 1.6s var(--ease-in-out) infinite;
}
.app-splash__logo {
    color: var(--color-foam); font-weight: var(--fw-bold);
    font-size: var(--fs-lg); letter-spacing: -0.5px;
}

/* --- Заголовок страницы -------------------------------------------------- */
.page-head {
    padding: var(--space-6) var(--space-5) var(--space-3);
    display: flex; align-items: center; justify-content: space-between;
}
.page-head__title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: -0.8px; }
.page-head__subtitle { color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--space-1); }

/* --- Кнопки -------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-pill);
    font-weight: var(--fw-semi); font-size: var(--fs-md);
    background: var(--primary); color: var(--text-invert);
    box-shadow: var(--shadow-sm);
    position: relative; overflow: hidden;
    transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur) var(--ease-out), background var(--dur);
    min-height: 52px;
}
.btn:active { transform: scale(0.96); background: var(--primary-press); }
.btn--block { width: 100%; }
.btn--ghost { background: transparent; color: var(--primary); box-shadow: inset 0 0 0 2px var(--border-strong); }
.btn--ghost:active { background: var(--bg-subtle); }
.btn--soft  { background: var(--bg-subtle); color: var(--text); box-shadow: none; }

/* --- Карточка ------------------------------------------------------------ */
.card {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* --- Бейджи -------------------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: var(--radius-pill);
    font-size: var(--fs-xs); font-weight: var(--fw-bold);
    letter-spacing: 0.2px; text-transform: uppercase;
    color: var(--color-foam);
}
.badge--new        { background: var(--color-matcha); }
.badge--hit        { background: var(--color-latte); }
.badge--recommend  { background: var(--color-coffee); }
.badge--soft       { background: var(--bg-subtle); color: var(--text-muted); }

/* --- Поле ввода с иконкой ------------------------------------------------ */
.input-wrap { position: relative; }
.input-wrap .ico {
    position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; color: var(--text-muted); pointer-events: none;
}
.input-wrap .input { padding-left: calc(var(--space-4) + 28px); }

/* --- Quantity stepper (− n +) -------------------------------------------- */
.stepper {
    display: inline-flex; align-items: center; gap: var(--space-3);
    background: var(--bg-subtle); border-radius: var(--radius-pill);
    padding: 4px; user-select: none;
}
.stepper__btn {
    width: 40px; height: 40px; border-radius: var(--radius-circle);
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-elevated); color: var(--text);
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur-fast) var(--ease-spring), background var(--dur);
}
.stepper__btn:active { transform: scale(0.88); background: var(--primary); color: var(--text-invert); }
.stepper__btn .ico { width: 20px; height: 20px; }
.stepper__val { font-weight: var(--fw-bold); font-size: var(--fs-md); min-width: 24px; text-align: center; }

/* --- Круглая кнопка-иконка ---------------------------------------------- */
.icon-btn {
    width: 44px; height: 44px; border-radius: var(--radius-circle);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-elevated); color: var(--text);
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur-fast) var(--ease-spring), background var(--dur), color var(--dur);
}
.icon-btn:active { transform: scale(0.9); }
.icon-btn--ghost { background: transparent; box-shadow: none; color: var(--text-muted); }
.icon-btn .ico { width: 22px; height: 22px; }

/* --- Segmented control (фильтры) ---------------------------------------- */
.segmented {
    display: flex; gap: 6px; overflow-x: auto; padding: var(--space-2) 0;
    scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }
.segmented__btn {
    flex: none; padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill);
    background: var(--bg-subtle); color: var(--text-muted);
    font-weight: var(--fw-medium); font-size: var(--fs-sm); white-space: nowrap;
    transition: all var(--dur) var(--ease-out);
}
.segmented__btn.is-active { background: var(--primary); color: var(--text-invert); box-shadow: var(--shadow-sm); }

/* --- Switch (переключатель) --------------------------------------------- */
.switch {
    position: relative; width: 52px; height: 30px; border-radius: var(--radius-pill);
    background: var(--border-strong); flex: none; cursor: pointer;
    transition: background var(--dur) var(--ease-out);
}
.switch::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 24px; height: 24px; border-radius: var(--radius-circle);
    background: var(--bg-elevated); box-shadow: var(--shadow-xs);
    transition: transform var(--dur) var(--ease-spring);
}
.switch.is-on { background: var(--primary); }
.switch.is-on::after { transform: translateX(22px); }

/* --- Skeleton-карточки --------------------------------------------------- */
.sk { border-radius: var(--radius-lg); }
.sk-card { background: var(--bg-elevated); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xs); }
.sk-card .sk-img { aspect-ratio: 4/3; }
.sk-card .sk-line { height: 14px; margin: var(--space-3) var(--space-4); }
.sk-card .sk-line--sm { width: 40%; }

/* --- Разделитель --------------------------------------------------------- */
.divider { height: 1px; background: var(--border); margin: var(--space-4) 0; border: none; }

/* --- Пустое состояние ---------------------------------------------------- */
.empty {
    text-align: center; padding: var(--space-9) var(--space-6);
    color: var(--text-muted);
}
.empty__icon { font-size: 56px; margin-bottom: var(--space-4); opacity: 0.5; }
.empty__title { font-size: var(--fs-lg); font-weight: var(--fw-semi); color: var(--text); margin-bottom: var(--space-2); }

/* --- Поле ввода ---------------------------------------------------------- */
.field { margin-bottom: var(--space-4); }
.field__label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); margin-bottom: var(--space-2); color: var(--text-muted); }
.input {
    width: 100%; padding: var(--space-4) var(--space-4);
    background: var(--bg-elevated);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    transition: border-color var(--dur), box-shadow var(--dur);
    min-height: 52px;
}
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(176,123,79,0.14); }
.input::placeholder { color: var(--text-muted); opacity: 0.7; }

/* --- Нижняя навигация ---------------------------------------------------- */
.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    max-width: var(--app-max-w); margin: 0 auto;
    height: calc(var(--nav-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: rgba(255,255,255,0.86);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--border);
    display: grid; grid-template-columns: repeat(3, 1fr);
}
.bottom-nav__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    color: var(--text-muted);
    transition: color var(--dur), transform var(--dur-fast) var(--ease-spring);
    position: relative;
}
.bottom-nav__item.is-active { color: var(--primary); }
.bottom-nav__icon {
    width: 26px; height: 26px;
    background: currentColor;
    -webkit-mask: var(--icon-svg, none) center / contain no-repeat;
            mask: var(--icon-svg, none) center / contain no-repeat;
    opacity: 0.9;
}
.bottom-nav__item.is-active .bottom-nav__icon { opacity: 1; transform: translateY(-1px); }
.bottom-nav__label { font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.bottom-nav__item:active { transform: scale(0.9); }

/* --- Тосты --------------------------------------------------------------- */
.toast-container {
    position: fixed; left: 0; right: 0; top: calc(var(--safe-top) + var(--space-4));
    z-index: 200; display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    max-width: 92%;
    background: var(--color-espresso); color: var(--color-foam);
    padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md); font-weight: var(--fw-medium);
    display: flex; align-items: center; gap: var(--space-2);
    animation: toast-in var(--dur) var(--ease-spring);
}
.toast.is-leaving { animation: toast-out var(--dur) var(--ease-in-out) forwards; }
.toast--success { background: var(--success); }
.toast--warn    { background: var(--warning); color: var(--text); }
.toast--error   { background: var(--danger); }

/* --- Слои эмоций / пасхалок --------------------------------------------- */
.fx-layer, .easter-layer { position: fixed; inset: 0; pointer-events: none; z-index: 150; overflow: hidden; }
.fx-layer { z-index: 180; }
#fx-layer canvas { width: 100%; height: 100%; }

/* --- Подсказка установки ------------------------------------------------- */
.install-hint {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--nav-h) + var(--safe-bottom) + var(--space-4)); z-index: 160;
    width: calc(100% - var(--space-8)); max-width: var(--app-max-w);
}