/* Dark Haven - Core UI System */

/* Theme Variables */
:root {
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #050505;
    --text-primary: #ffffff;
    --text-dim: #999999;
    --border-color: #ffffff;
    --border-dim: #333333;
    --card-bg: #0a0a0a;
    --anim-color: rgba(255, 255, 255, 0.15);
    --anim-stripe: rgba(255, 255, 255, 0.08);
    --accent: #ffffff;
    --transition: all 0.4s ease;
}

.bg-accent {
    background-color: var(--accent);
}

html.light-theme {
    --bg-primary: #f5f5f5;
    --bg-secondary: #e8e8e8;
    --bg-tertiary: #ffffff;
    --text-primary: #111111;
    --text-dim: #666666;
    --border-color: #111111;
    --border-dim: #cccccc;
    --card-bg: #ffffff;
    --anim-color: rgba(0, 0, 0, 0.12);
    --anim-stripe: rgba(0, 0, 0, 0.08);
    --accent: #111111;
}

/* Base Resets & Transitions */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
    font-family: 'Share Tech Mono', monospace;
}

/* Typography */
.font-terminal {
    font-family: 'VT323', monospace;
}

.font-share {
    font-family: 'Share Tech Mono', monospace;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.terminal-text {
    color: var(--text-primary);
}

html.light-theme .terminal-text {
}

.terminal-text-dim {
    color: var(--text-dim);
}

/* Layout & Containers */
.whitespace-pre-wrap {
    white-space: pre-wrap !important;
}

.terminal-border-dim {
    border: 1px solid var(--border-dim);
}

.terminal-border-full {
    border: 1px solid var(--border-color);
}

.nav-blur {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.9);
}

html.light-theme .nav-blur {
    background-color: rgba(245, 245, 245, 0.95);
}

/* Components: Buttons */
.btn-terminal {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.btn-terminal:hover {
    background: var(--text-primary);
    color: var(--bg-primary);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

html.light-theme .btn-terminal:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.lang-flag {
    width: 28px;
    height: 21px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    margin: 0 4px;
}

/* Components: Cards */
.card-hover {
    transition: all 0.3s ease;
    border: 1px solid var(--border-dim);
    background: var(--card-bg);
}

.card-hover:hover {
    border-color: var(--border-color);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

html.light-theme .card-hover:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}

.card-image {
    transition: all 0.3s ease;
}

.card-hover:hover .card-image {
    filter: brightness(1.1);
}

html.light-theme .card-hover:hover .card-image {
    filter: brightness(1.0);
}

.slider-arrow-btn {
    background-color: var(--card-bg);
    border: 1px solid var(--border-dim);
    color: var(--text-dim);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.slider-arrow-btn:hover,
.slider-arrow-btn:active {
    border-color: var(--border-color);
    color: var(--text-primary);
    opacity: 1;
}

/* Global Animated Background */
.global-animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.binary-rain {
    position: absolute;
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    color: var(--anim-color);
    white-space: nowrap;
    animation: binary-fall linear infinite;
    opacity: 0.6;
    text-shadow: 0 0 2px var(--anim-color);
    will-change: transform, opacity;
    transform: translateZ(0);
}

.stripe {
    position: absolute;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, var(--anim-stripe), transparent);
    animation: stripe-pulse 4s ease-in-out infinite;
    will-change: transform, opacity;
    transform: translateZ(0);
}

.tv-scanline {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--anim-stripe), var(--anim-stripe), transparent);
    animation: scanline-move linear infinite;
    opacity: 0.4;
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Effects - scanlines disabled */

.glitch:hover {
    animation: glitch 0.3s infinite;
}

/* Animations */
@keyframes binary-fall {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    10% {
        opacity: 0.6;
    }

    90% {
        opacity: 0.6;
    }

    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

@keyframes stripe-pulse {

    0%,
    100% {
        opacity: 0.2;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes scanline-move {
    0% {
        top: -10px;
        opacity: 0;
    }

    5%,
    95% {
        opacity: 0.4;
    }

    100% {
        top: 100vh;
        opacity: 0;
    }
}

@keyframes glitch {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(-2px, -2px);
    }

    60% {
        transform: translate(2px, 2px);
    }

    80% {
        transform: translate(2px, -2px);
    }

    100% {
        transform: translate(0);
    }
}

/* Form Elements */
input,
textarea,
select {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-dim) !important;
    color: var(--text-primary) !important;
    padding: 0.5rem;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--border-color) !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2) !important;
    outline: none !important;
}

html.light-theme input:focus,
html.light-theme textarea:focus,
html.light-theme select:focus {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
}

/* Utilities */
.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #444 transparent;
}

.scrollbar-thin::-webkit-scrollbar {
    height: 4px;
    width: 4px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 2px;
}

.skeleton {
    background: linear-gradient(90deg, #111 25%, #222 50%, #111 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

html.light-theme .skeleton {
    background: linear-gradient(90deg, #ddd 25%, #eee 50%, #ddd 75%);
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Mega Menu Styles */
.mega-menu-content {
    background: rgba(25, 25, 25, 0.98);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: none;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8);
    padding: 10px 0;
    /* Removed overflow to allow cascading submenus */
}

.mega-menu-content::-webkit-scrollbar {
    width: 6px;
}

.mega-menu-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

html.light-theme .mega-menu-content {
    background: rgba(235, 235, 235, 0.98);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
}

.mega-menu-category {
    position: relative;
}

.mega-menu-category:last-child {
    border-bottom: none;
}

.mega-menu-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    color: var(--text-dim);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.mega-menu-title:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    padding-left: 25px;
}

.mega-menu-title .arrow {
    font-size: 16px;
    opacity: 0.5;
    transition: transform 0.3s ease;
}

.mega-menu-title:hover .arrow {
    transform: translateX(5px);
    opacity: 1;
}

html.light-theme .mega-menu-title:hover {
    background: rgba(0, 0, 0, 0.03);
}

/* Submenu Styles */
.mega-submenu-content {
    background: rgba(30, 30, 30, 0.98);
    border: none;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.6);
    padding: 8px 0;
    /* Removed overflow to allow cascading submenus */
}

.mega-submenu-content::-webkit-scrollbar {
    width: 6px;
}

.mega-submenu-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

html.light-theme .mega-submenu-content {
    background: rgba(230, 230, 230, 0.98);
}

.mega-submenu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    color: var(--text-dim);
    font-size: 12px;
    transition: all 0.3s ease;
}

.mega-submenu-link .arrow {
    font-size: 14px;
    opacity: 0.5;
    transition: transform 0.3s ease;
}

.mega-submenu-link:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    padding-left: 25px;
}

.mega-submenu-link:hover .arrow {
    transform: translateX(5px);
    opacity: 1;
}

html.light-theme .mega-submenu-link:hover {
    background: rgba(0, 0, 0, 0.03);
}

/* Theme Toggle */
.theme-toggle {
    position: relative;
    width: 50px;
    height: 26px;
    border: 1px solid var(--border-color);
    background: transparent;
    cursor: pointer;
}

.theme-toggle-slider {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: var(--text-primary);
    transition: transform 0.3s ease;
    transform: translateX(24px);
    z-index: 2;
}

html.light-theme .theme-toggle-slider {
    transform: translateX(0);
}

.theme-toggle-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
}

.theme-toggle-icon svg {
    width: 100%;
    height: 100%;
}

.theme-toggle-icon.moon {
    left: 5px;
}

.theme-toggle-icon.sun {
    right: 5px;
}

/* Mobile Adjustments */
@media (max-width: 640px) {
    .theme-toggle {
        width: 40px;
        height: 22px;
    }

    .theme-toggle-slider {
        width: 14px;
        height: 14px;
        top: 3px;
        left: 3px;
        transform: translateX(20px);
    }

    html.light-theme .theme-toggle-slider {
        transform: translateX(0);
    }

    .theme-toggle-icon.moon {
        left: 3px;
    }

    .theme-toggle-icon.sun {
        right: 3px;
    }

    section {
        padding-top: 5.5rem !important;
        padding-bottom: 2.5rem !important;
    }
}

/* Navigation Breakpoints & Language Adaptation */
.desktop-nav {
    display: none;
}

.mobile-menu-btn {
    display: block;
}

/* Wave 3.1: keep menu items at their natural width so we never see truncated
   labels like "Ч" instead of "ЧАТЫ". When the navbar runs out of horizontal
   space the language-specific media queries below collapse it into the
   mobile burger instead of silently clipping characters. */
.desktop-nav > * {
    flex-shrink: 0;
}

/* Wave 3.1: guarantee a visible separator between the menu links and the
   right-side controls (theme toggle / wallet badge / PRO / cart / avatar)
   so the wallet "5.00%" badge no longer appears glued to the last menu
   item ("ИГРА"). The right-side container already has ml-2 (8px); this
   adds 8px more from the menu side for a 16px total gap. */
.desktop-nav {
    padding-right: 0.5rem;
}

/* BUG-6 (2026-05-15): iOS Safari long-press on nav links opens the iOS
   share/copy context menu instead of navigating. Disable the iOS callout
   and text selection on all navbar anchors so a tap is always interpreted
   as navigation, not text selection. */
.desktop-nav a,
#mobile-menu a,
.mega-menu a {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Chinese language - adjusted to match English due to layout overlap.
   Wave 3.1: bumped 1150 → 1330 to leave room for navbar PRO button. */
@media (max-width: 1329px) {
    html[lang="zh"] .desktop-nav {
        display: none !important;
    }

    html[lang="zh"] .mobile-menu-btn {
        display: block !important;
    }
}

@media (min-width: 1330px) {
    html[lang="zh"] .desktop-nav {
        display: flex !important;
    }

    html[lang="zh"] .mobile-menu-btn {
        display: none !important;
    }

    #mobile-menu {
        display: none !important;
    }
}

/* English language - medium text: switch at 1330px.
   Wave 3.1: bumped 1150 → 1330 to leave room for navbar PRO button. */
@media (max-width: 1329px) {
    html[lang="en"] .desktop-nav {
        display: none !important;
    }

    html[lang="en"] .mobile-menu-btn {
        display: block !important;
    }
}

@media (min-width: 1330px) {
    html[lang="en"] .desktop-nav {
        display: flex !important;
    }

    html[lang="en"] .mobile-menu-btn {
        display: none !important;
    }

    /* Safety hide mobile menu */
    html[lang="en"] #mobile-menu {
        display: none !important;
    }
}

/* Russian language - switch at 1380px.
   Wave 3.1: bumped from 1280px → 1380px because the navbar now also carries
   the navbar PRO Boost button. With 10 Cyrillic menu labels (РАСПРОДАЖА,
   ЭКСКЛЮЗИВ etc.) plus theme/search/PRO/wallet/cart/avatar on the right,
   1280px caused the menu to overflow and clip "ЧАТЫ" → "Ч". Using the
   mobile burger below 1380px keeps the layout legible. */
@media (max-width: 1379px) {
    html[lang="ru"] .desktop-nav {
        display: none !important;
    }

    html[lang="ru"] .mobile-menu-btn {
        display: block !important;
    }
}

@media (min-width: 1380px) {
    html[lang="ru"] .desktop-nav {
        display: flex !important;
    }

    html[lang="ru"] .mobile-menu-btn {
        display: none !important;
    }

    /* Safety hide mobile menu */
    html[lang="ru"] #mobile-menu {
        display: none !important;
    }
}



/* Ensure mobile menu shows correctly when toggled.
   Внутренний скролл + overscroll:contain — чтобы тач-свайп внутри
   меню не прокручивал фон (iOS Safari в т.ч.). Высота ограничена
   окном минус шапка (~104px = top-9 + h-14). */
#mobile-menu:not(.hidden) {
    display: block !important;
    max-height: calc(100vh - 104px);
    max-height: calc(100dvh - 104px); /* iOS Safari: actual visible viewport */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding-bottom: env(safe-area-inset-bottom, 0);
}



/* Profile & Dashboard Styles */
.tab-btn {
    padding: 14px 32px;
    border-bottom: 2px solid transparent;
    color: var(--text-dim);
    transition: all 0.3s ease;
    background: transparent;
    cursor: pointer;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

.tab-btn:hover {
    color: var(--text-primary);
}

.tab-btn.active {
    color: var(--text-primary);
    border-color: var(--text-primary);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Payment modal text bolder */
#payment-modal .terminal-text-dim,
#payment-modal .terminal-text,
#payment-modal label,
#payment-modal p,
#payment-modal span,
#provider-modal .terminal-text-dim,
#provider-modal .terminal-text,
#provider-modal label,
#provider-modal p,
#provider-modal span {
    font-weight: 700;
    color: rgba(255,255,255,0.85);
}
#payment-modal h3,
#payment-modal .font-bold,
#provider-modal h3,
#provider-modal .font-bold {
    font-weight: 800;
    font-size: 1.3rem;
}
#payment-modal .text-sm,
#provider-modal .text-sm {
    font-weight: 600;
    font-size: 0.9rem;
}
#payment-modal .text-2xl,
#provider-modal .text-2xl {
    font-weight: 800;
}
#provider-modal .text-xs {
    font-weight: 700;
    font-size: 1rem;
    color: rgba(255,255,255,0.9);
}
html.light-theme #payment-modal .terminal-text-dim,
html.light-theme #payment-modal .terminal-text,
html.light-theme #payment-modal label,
html.light-theme #payment-modal p,
html.light-theme #payment-modal span,
html.light-theme #provider-modal .terminal-text-dim,
html.light-theme #provider-modal .terminal-text,
html.light-theme #provider-modal label,
html.light-theme #provider-modal p,
html.light-theme #provider-modal span {
    color: rgba(0, 0, 0, 0.85);
}
html.light-theme #payment-modal h3,
html.light-theme #payment-modal .font-bold,
html.light-theme #provider-modal h3,
html.light-theme #provider-modal .font-bold {
    color: rgba(0, 0, 0, 0.9);
}
html.light-theme #provider-modal .text-xs {
    color: rgba(0, 0, 0, 0.9);
}
html.light-theme #payment-modal input,
html.light-theme #payment-modal select,
html.light-theme #payment-modal textarea,
html.light-theme #provider-modal input,
html.light-theme #provider-modal select,
html.light-theme #provider-modal textarea {
    color: rgba(0, 0, 0, 0.85);
}
html.light-theme #payment-modal input::placeholder,
html.light-theme #provider-modal input::placeholder {
    color: rgba(0, 0, 0, 0.45);
}

.loyalty-step {
    position: relative;
    padding: 20px;
    border: 1px solid var(--border-dim);
    text-align: center;
}

.loyalty-step::after {
    content: '→';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: var(--text-dim);
}

.loyalty-step:last-child::after {
    display: none;
}

.telegram-badge {
    background: linear-gradient(135deg, #0088cc, #00a2e8);
    color: #fff;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.order-card {
    background: var(--card-bg);
    border: 1px solid var(--border-dim);
    transition: all 0.3s ease;
}

.order-card:hover {
    border-color: var(--border-color);
}

.status-pending {
    color: #fbbf24;
    border-color: #fbbf24;
}

.status-paid {
    color: #22c55e;
    border-color: #22c55e;
}

.status-shipped {
    color: var(--accent);
    border-color: var(--accent);
}

.status-cancelled {
    color: #ef4444;
    border-color: #ef4444;
}

@media (max-width: 768px) {
    .loyalty-step::after {
        display: none;
    }
}

/* News Styles */
.news-card {
    transition: all 0.3s ease;
}

.news-card:hover {
    transform: translateY(-5px);
}

.news-image {
    aspect-ratio: 16/9;
    object-fit: cover;
}

.pinned-badge {
    background: var(--text-primary);
    color: var(--bg-primary);
    padding: 2px 8px;
    font-weight: bold;
}

/* Review Styles */
.review-card {
    transition: all 0.3s ease;
}

.review-card:hover {
    transform: translateY(-5px);
}

.rating-stars {
    display: flex;
    gap: 2px;
}

.rating-star {
    color: #ffd700;
}

html.light-theme .rating-star {
    color: #d4a200;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
}

.rating-star.empty {
    color: var(--text-dim);
    opacity: 0.3;
}

/* Review star selector */
.review-star {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-dim);
    padding: 0 2px;
    transition: color 0.15s;
}
.review-star.active {
    color: #f59e0b;
}
.review-star:hover {
    color: #f59e0b;
}

/* Referral link container — keep copy button inside the gray box on narrow screens */
.ref-link-container #ref-link {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
@media (max-width: 360px) {
    .ref-link-container .ref-link-row {
        flex-direction: column;
        align-items: stretch;
    }
    .ref-link-container #ref-copy-btn {
        width: 100%;
        text-align: center;
    }
}

/* Review images — photos attached to a customer review */
.review-images {
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 0.5rem !important;
}
.review-photo {
    width: 120px;
    height: 120px;
    overflow: hidden;
    flex-shrink: 0;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.review-photo:hover {
    transform: translateY(-2px);
    border-color: var(--text-primary) !important;
}
.review-photo img {
    display: block;
    width: 100%;
    height: 100%;
}
@media (max-width: 480px) {
    .review-photo {
        width: calc(33.333% - 0.5rem);
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* Payment Logos */
.payment-logo-img {
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    transition: all 0.3s ease;
    opacity: 0.8;
}

/* Precise Area Normalization (Visual Weight) */
/* Square/Almost Square */
.payment-logo-img[src*="image1"] {
    height: 26px;
}

.payment-logo-img[src*="image2"] {
    height: 32px;
}

.payment-logo-img[src*="image6"] {
    height: 36px;
}

/* Rectangular */
.payment-logo-img[src*="image3"] {
    height: 28px;
}

.payment-logo-img[src*="image5"] {
    height: 20px;
}

/* Wide (Visa) */
.payment-logo-img[src*="image4"] {
    height: 14px;
}

@media (min-width: 640px) {

    .payment-logo-img[src*="image1"] {
        height: 38px;
    }

    .payment-logo-img[src*="image2"] {
        height: 48px;
    }

    .payment-logo-img[src*="image6"] {
        height: 52px;
    }

    .payment-logo-img[src*="image3"] {
        height: 38px;
    }

    .payment-logo-img[src*="image5"] {
        height: 28px;
    }

    .payment-logo-img[src*="image4"] {
        height: 20px;
    }
}

.payment-logo-img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Auth Pages */
.btn-telegram {
    background: linear-gradient(135deg, #0088cc, #00a2e8);
    border: none;
    color: #fff;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
}

.btn-telegram:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 136, 204, 0.5);
}

.divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-dim);
}

.back-to-shop {
    color: var(--text-dim);
    transition: color 0.3s ease;
}

.back-to-shop:hover {
    color: var(--text-primary);
}

/* Catalog Sidebar & Accordion */
.catalog-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 1rem;
}

@media (min-width: 1024px) {
    .catalog-container {
        flex-direction: row;
    }
}

.catalog-sidebar {
    width: 100%;
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .catalog-sidebar {
        width: 340px;
        position: sticky;
        top: 80px;
        align-self: flex-start;
        height: calc(100vh - 100px);
        overflow-y: auto;
        padding-right: 2rem;
        border-right: 1px solid var(--border-dim);
        margin-right: 2rem;
        scrollbar-width: thin;
        scrollbar-color: var(--border-dim) transparent;
    }

    /* Custom scrollbar for webkit */
    .catalog-sidebar::-webkit-scrollbar {
        width: 3px;
    }

    .catalog-sidebar::-webkit-scrollbar-track {
        background: transparent;
    }

    .catalog-sidebar::-webkit-scrollbar-thumb {
        background: var(--border-dim);
    }
}

.filter-accordion-item {
    border-bottom: 1px solid var(--border-dim);
}

.filter-accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 0;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: color 0.3s ease;
    color: var(--text-primary);
}

.filter-accordion-header:hover {
    color: var(--text-dim);
}

.filter-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
}

.filter-accordion-item.active .filter-accordion-content {
    max-height: 1000px;
    padding-bottom: 1.5rem;
}

.filter-accordion-header i {
    transition: transform 0.4s ease;
}

.filter-accordion-item.active .filter-accordion-header i {
    transform: rotate(180deg);
}

.filter-option-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-select-custom {
    width: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--border-dim);
    color: var(--text-primary);
    padding: 0.75rem;
    font-family: inherit;
    font-size: 0.875rem;
    appearance: none;
    cursor: pointer;
}

.filter-reset-btn {
    width: 100%;
    border: 1px solid var(--text-primary);
    background: transparent;
    color: var(--text-primary);
    padding: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 2rem;
    transition: all 0.3s ease;
}

.filter-reset-btn:hover {
    background: var(--text-primary);
    color: var(--bg-primary);
}

/* Range Slider Custom Styling for Sidebar */
.sidebar-range-container {
    padding: 1.5rem 0;
}

.sidebar-price-display {
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-bottom: 1rem;
    text-align: right;
}

/* Theme adaptation for light mode */
html.light-theme .filter-accordion-header {
    color: #000;
}

html.light-theme .filter-select-custom {
    background: #fff;
    border-color: #ddd;
}

html.light-theme .filter-accordion-item {
    border-color: #eee;
}

/* Unified Dual Range Slider Styles */
.range-slider-container {
    position: relative;
    width: 100%;
    height: 32px;
    margin: 1rem 0;
}

.range-slider-container::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    background: var(--border-dim);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.slider-track {
    position: absolute;
    height: 4px;
    background: var(--text-primary);
    box-shadow: 0 0 10px var(--text-primary);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
    transition: left 0.1s ease, width 0.1s ease;
}

.range-slider-container input[type="range"] {
    position: absolute;
    width: 100%;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    height: 0;
    outline: none;
    background: transparent;
    z-index: 3;
    margin: 0;
    top: 50%;
}

.range-slider-container input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: var(--text-primary);
    border: none;
    box-shadow: 0 0 10px var(--text-primary);
    border-radius: 0;
    transition: transform 0.2s ease;
}

.range-slider-container input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.range-slider-container input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 14px;
    height: 14px;
    background: var(--text-primary);
    border: none;
    box-shadow: 0 0 10px var(--text-primary);
    border-radius: 0;
    transition: transform 0.2s ease;
}

/* AUTHENTICATION PAGES STYLES */
.card {
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid var(--border-dim);
    padding: 2.5rem;
    max-width: 420px;
    width: 100%;
    margin-top: 4rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 10;
}

html.light-theme .card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.95);
}

.input-field {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-dim);
    padding: 12px 16px;
    color: var(--text-primary);
    font-family: 'Share Tech Mono', monospace;
    transition: all 0.3s ease;
    border-radius: 0;
    font-size: 1rem;
}

.input-field:focus {
    border-color: var(--border-color);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
    outline: none;
    background: var(--bg-primary);
}

.password-toggle-btn {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-primary);
    opacity: 0.5;
    transition: all 0.3s ease;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.password-toggle-btn:hover {
    opacity: 1;
    color: var(--text-primary);
}

html.light-theme .input-field:focus {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.error-msg {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    height: 0;
    overflow: hidden;
}

.error-msg.show {
    opacity: 1;
    height: auto;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.success-msg {
    color: #10b981;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    height: 0;
    overflow: hidden;
}

.success-msg.show {
    opacity: 1;
    height: auto;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.password-strength {
    height: 4px;
    background: var(--border-dim);
    margin-top: 8px;
    border-radius: 2px;
    overflow: hidden;
}

.password-strength-bar {
    height: 100%;
    width: 0;
    transition: all 0.3s ease;
    background: transparent;
}

.strength-1 {
    width: 25%;
    background-color: #ef4444 !important;
}

/* Red */
.strength-2 {
    width: 50%;
    background-color: #f59e0b !important;
}

/* Amber */
.strength-3 {
    width: 75%;
    background-color: #10b981 !important;
}

/* Emerald */
.strength-4 {
    width: 100%;
    background-color: #059669 !important;
}

/* Green */

/* Product Modal Colors & Sizes */
.color-btn-default {
    border-color: var(--border-dim);
    border-width: 1px !important;
}

.color-btn-default:not(:disabled):hover {
    border-color: var(--border-color);
}

.color-btn-selected {
    border-color: var(--border-color) !important;
    border-width: 1px !important;
    box-shadow: none !important;
    transform: scale(1.1);
    z-index: 10;
}

.size-btn-default {
    border-color: var(--border-dim);
    color: var(--text-dim);
}

.size-btn-default:not(:disabled):hover {
    border-color: var(--border-color);
    color: var(--text-primary);
}

.size-btn-selected {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    background-color: var(--anim-color) !important;
}

/* User Menu Logout Button Enhancement */
#user-menu-logout {
    color: #ef4444 !important;
    transition: all 0.3s ease;
    background: transparent !important;
}

#user-menu-logout:hover {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.05) !important;
}

#user-menu-logout i {
    color: inherit;
}

/* ============ PDP — Product Detail Page ============ */

.pdp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

@media (min-width: 1024px) {
    .pdp-grid {
        grid-template-columns: 58% 38%;
        gap: 4%;
    }
}

/* Right column sticky */
.pdp-info {
    position: relative;
}

@media (min-width: 1024px) {
    .pdp-info-inner {
        position: sticky;
        top: 9rem;
        /* Right description column scrolls independently of left photo column.
           Without these, sticky + long description = description scrolls with
           the page (left photos) and tail gets cut. */
        max-height: calc(100vh - 10rem);
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 0.5rem;
        scrollbar-width: thin;
    }
    .pdp-info-inner::-webkit-scrollbar {
        width: 6px;
    }
    .pdp-info-inner::-webkit-scrollbar-thumb {
        background: var(--border-color, rgba(0,0,0,0.25));
        border-radius: 3px;
    }
}

/* Desktop gallery images */
.pdp-desktop-img {
    overflow: hidden;
}

.pdp-desktop-img img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.pdp-desktop-img:hover img {
    transform: scale(1.03);
}

/* Mobile swipe gallery */
.pdp-swipe-gallery {
    position: relative;
    margin-bottom: 1.5rem;
}

.pdp-swipe-track {
    display: flex;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
}

.pdp-swipe-track::-webkit-scrollbar {
    display: none;
}

.pdp-swipe-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.pdp-swipe-slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* Dots */
.pdp-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 12px 0;
}

.pdp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-dim);
    transition: background 0.3s;
}

.pdp-dot--active {
    background: var(--text-primary);
}

/* Color links */
.pdp-color-link {
    background: none;
    border: none;
    padding: 4px 0;
    font-size: 0.875rem;
    cursor: pointer;
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.2s;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pdp-color-link:hover {
    color: var(--text-primary);
}

.pdp-color-link--active {
    color: var(--text-primary);
    font-weight: 600;
    border-bottom: 1.5px solid var(--text-primary);
}

/* Size tiles */
.pdp-size-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: 1px solid var(--border-dim);
    background: transparent;
    color: var(--text-dim);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.pdp-size-tile:hover:not(:disabled) {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

.pdp-size-tile--selected {
    border-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
    background: var(--anim-color) !important;
}

.pdp-size-tile--unavailable {
    opacity: 0.25;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Add to cart button */
.pdp-add-to-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    border: none;
    background: var(--text-primary);
    color: var(--bg-primary);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.3s;
}

.pdp-add-to-cart:hover:not(:disabled) {
    opacity: 0.85;
}

.pdp-add-to-cart:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Download button */
.pdp-download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 1rem;
    border: 1px solid var(--border-dim);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;
    box-sizing: border-box;
}

.pdp-download-btn:hover {
    border-color: var(--text-primary);
    background: var(--anim-color);
}

/* Accordions */
.pdp-accordions {
    border-top: 1px solid var(--border-dim);
}

.pdp-accordion {
    border-bottom: 1px solid var(--border-dim);
}

.pdp-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pdp-accordion-header:hover {
    opacity: 0.7;
}

.pdp-accordion-arrow {
    transition: transform 0.3s;
    flex-shrink: 0;
}

.pdp-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.pdp-accordion-body--open {
    padding-bottom: 16px;
}

/* Lightbox */
.pdp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    /* iOS Safari: own the gesture so the page underneath doesn't try to scroll
       and chain back into the document-level touchmove handlers (which froze
       the UI when the body scroll lock raced with image load). */
    touch-action: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: auto;
}

.pdp-lightbox.hidden {
    display: none;
}

.pdp-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    transition: transform 0.2s ease;
    cursor: zoom-in;
    touch-action: none;
}

.pdp-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
}

.pdp-lightbox-prev,
.pdp-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    font-size: 3rem;
    cursor: pointer;
    z-index: 10;
    padding: 1rem;
    line-height: 1;
}

.pdp-lightbox-prev { left: 1rem; }
.pdp-lightbox-next { right: 1rem; }

/* ============ PROMO POPUP ============ */
#promo-popup-tab {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: var(--bg-primary, #000);
    border: 2px solid var(--border-color, #fff);
    padding: 16px 28px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Space Mono', monospace;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary, #fff);
    letter-spacing: 2px;
    cursor: pointer;
    transition: opacity 0.3s, transform 0.3s;
    min-width: 220px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    animation: promo-pulse 2s ease-in-out infinite;
}
#promo-popup-tab:hover {
    transform: scale(1.05);
}
@keyframes promo-pulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); }
    50% { box-shadow: 0 4px 30px rgba(255, 255, 255, 0.2); }
}
#promo-popup-tab.promo-popup-hidden { display: none; }

#promo-popup {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: var(--bg-primary, #000);
    border: 2px solid var(--border-color, #fff);
    padding: 24px 28px;
    z-index: 9999;
    width: 380px;
    max-width: calc(100vw - 40px);
    font-family: 'Space Mono', monospace;
    color: var(--text-primary, #fff);
    transition: opacity 0.3s;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
#promo-popup.promo-popup-hidden { display: none; }

.promo-popup-close {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-dim, #999);
    line-height: 1;
}
.promo-popup-close:hover { color: var(--text-primary, #fff); }

#promo-popup-tab .promo-popup-close {
    position: static;
    font-size: 16px;
}

.promo-popup-title {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: 2px;
}
.promo-popup-desc {
    font-size: 13px;
    color: var(--text-dim, #999);
    margin-bottom: 14px;
    line-height: 1.4;
}
.promo-popup-form {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.promo-popup-form input {
    flex: 1;
    background: transparent;
    border: 1px solid var(--border-dim, #333);
    color: var(--text-primary, #fff);
    padding: 10px 12px;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    outline: none;
}
.promo-popup-form input:focus {
    border-color: var(--border-color, #fff);
}
.promo-popup-form button {
    background: var(--text-primary, #fff);
    color: var(--bg-primary, #000);
    border: none;
    padding: 10px 16px;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 1px;
    white-space: nowrap;
}
.promo-popup-form button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.promo-popup-hurry {
    font-size: 12px;
    color: var(--text-dim, #999);
    margin-top: 6px;
}
.promo-popup-msg {
    font-size: 13px;
    margin-top: 8px;
    min-height: 18px;
}
.promo-popup-error { color: #ef4444; }

@media (max-width: 480px) {
    #promo-popup-tab,
    #promo-popup {
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: auto;
        max-width: none;
    }
}

/* ============ LIGHT THEME CONTRAST FIXES ============ */

/* Decorative binary-rain / scanlines / stripes render as faint ghost text on
   the white background ("белое по белому" feedback). Hide them in light theme. */
html.light-theme .binary-rain,
html.light-theme .tv-scanline,
html.light-theme .stripe {
    display: none !important;
}

/* Product/content cards blend into the light background because
   --border-dim (#cccccc) on --bg-primary (#f5f5f5) is too faint.
   Darken the dim border so separators stay visible. */
html.light-theme {
    --border-dim: #b8b8b8;
}

/* Promo popup is the primary CTA. In dark theme it's a bold black tile with
   white text; the light-theme inversion drained that contrast away. Invert
   the popup so it stays a prominent dark CTA on the light page. */
html.light-theme #promo-popup-tab,
html.light-theme #promo-popup {
    background: #111111;
    color: #ffffff;
    border-color: #111111;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
html.light-theme .promo-popup-close { color: #cccccc; }
html.light-theme .promo-popup-close:hover { color: #ffffff; }
html.light-theme .promo-popup-desc,
html.light-theme .promo-popup-hurry { color: #cccccc; }
html.light-theme .promo-popup-form input {
    background: transparent;
    border-color: #444444;
    color: #ffffff;
}
html.light-theme .promo-popup-form input::placeholder { color: #888888; }
html.light-theme .promo-popup-form input:focus { border-color: #ffffff; }
html.light-theme .promo-popup-form button {
    background: #ffffff;
    color: #111111;
}

/* "НОВИНКА" / "NEW" / "新品" badge on product cards.
   Without explicit styling the label inherits the page text colour, lacks
   a background, and wraps mid-word — on narrow cards the bracketed text
   gets clipped to "[НОВИНК…". A solid dark chip with white text reads on
   any product photo and works in both themes. */
.product-badge {
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: calc(100% - 1.5rem);
    white-space: nowrap;
    line-height: 1;
    color: #ffffff !important;
    background-color: rgba(0, 0, 0, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    z-index: 2;
}
html.light-theme .product-badge {
    background-color: rgba(0, 0, 0, 0.82);
    border-color: rgba(255, 255, 255, 0.22);
}
/* ===== Swim Run mini-game (second arcade on /game/<lang>/) ===== */
.swim-run-shell {
    width: 100%;
    max-width: min(900px, calc(100vw - 24px));
    margin: 32px auto 0;
    padding: 16px 14px 20px;
    border: 1px solid rgba(33, 212, 245, .55);
    background: linear-gradient(135deg, rgba(6, 16, 28, .98), rgba(8, 24, 38, .96));
    box-shadow: 0 0 0 2px rgba(33, 212, 245, .08) inset, 0 0 28px rgba(33, 212, 245, .18);
    color: #e6f7ff;
    font-family: 'VT323', 'Share Tech Mono', monospace;
    text-align: center;
}
.swim-run-hero {
    margin-bottom: 14px;
}
.swim-run-hero h2 {
    font-size: 28px;
    letter-spacing: 2px;
    margin: 0 0 6px;
    color: #e6f7ff;
}
.swim-run-hero h2 .accent {
    color: #21d4f5;
    text-shadow: 0 0 12px rgba(33, 212, 245, .55);
}
.swim-run-subtitle {
    margin: 0;
    color: #9ad4e6;
    font-size: 14px;
    letter-spacing: 1px;
}
.swim-run-game-wrap {
    position: relative;
    margin: 14px auto 0;
    max-width: 800px;
}
#swim-run-canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    background: #050a14 url("/static/images/game/swim_run/hero_swim.3e0dd1c31682.png") center / contain no-repeat;
    border: 3px solid #21d4f5;
    box-shadow: 0 0 0 2px #06121d, 0 0 24px rgba(33, 212, 245, .35);
    image-rendering: pixelated;
    touch-action: none;
}
.swim-run-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(3, 8, 16, .35);
    color: #e6f7ff;
    z-index: 4;
    border: 3px solid transparent;
    pointer-events: auto;
    padding-bottom: 30px;
}
.swim-run-overlay.hidden { display: none; }
.swim-run-overlay-inner {
    text-align: center;
    padding: 16px 20px;
    background: rgba(6, 16, 28, .92);
    border: 1px solid rgba(33, 212, 245, .55);
    box-shadow: 0 0 14px rgba(33, 212, 245, .25);
    max-width: 80%;
}
.swim-run-overlay-inner h3 {
    margin: 0 0 8px;
    font-size: 22px;
    color: #21d4f5;
    letter-spacing: 1px;
}
.swim-run-overlay-inner p {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.5;
}
.swim-run-attempts {
    color: #9ad4e6;
    font-size: 14px;
    margin-bottom: 10px;
    letter-spacing: 1px;
}
.swim-run-btn {
    display: inline-block;
    padding: 10px 22px;
    background: #061421;
    color: #21d4f5;
    border: 2px solid #21d4f5;
    font-family: 'VT323', 'Share Tech Mono', monospace;
    font-size: 20px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all .15s ease;
    text-transform: uppercase;
}
.swim-run-btn:hover {
    background: #21d4f5;
    color: #061421;
    box-shadow: 0 0 14px rgba(33, 212, 245, .65);
}
.swim-run-hint {
    margin-top: 10px;
    font-size: 13px;
    color: #6fb9ce;
}
.swim-run-about {
    width: 100%;
    max-width: 48rem;
    margin: 16px auto 0;
    padding: 12px 14px;
    border: 1px solid rgba(33, 212, 245, .45);
    background: linear-gradient(135deg, rgba(6, 16, 28, .96), rgba(8, 24, 38, .94));
    color: #e6f7ff;
    text-align: left;
    font-family: 'VT323', 'Share Tech Mono', monospace;
    box-shadow: 0 0 14px rgba(33, 212, 245, .15);
}
.swim-run-about h3 {
    margin: 0 0 8px;
    font-size: 20px;
    color: #21d4f5;
}
.swim-run-about p {
    margin: 6px 0;
    font-size: 15px;
    line-height: 1.5;
}
.swim-run-about p.hint {
    color: #6fb9ce;
    font-size: 13px;
}
.swim-rules {
    list-style: none;
    padding: 0;
    margin: 8px 0;
}
.swim-rules li {
    padding: 4px 0;
    font-size: 15px;
}
@media (max-width: 480px) {
    .swim-run-shell { padding: 12px 8px 16px; }
    .swim-run-hero h2 { font-size: 22px; }
    .swim-run-overlay-inner { padding: 12px 14px; max-width: 92%; }
    .swim-run-overlay-inner h3 { font-size: 18px; }
    .swim-run-btn { padding: 8px 16px; font-size: 18px; }
}

/* ============================================================
   DH Payment Method Buttons & Modal Frame.
   Single unified pixel-mono style for the payment provider modal,
   retry-payment modal, and crypto-network picker. Mono palette
   only (no rainbow gradients or hardcoded colors).
   ============================================================ */
.dh-payment-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 65;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    padding: 1rem;
}
html.light-theme .dh-payment-modal-overlay {
    background: rgba(0, 0, 0, 0.55);
}

.dh-payment-contact-manager-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.875rem;
    color: var(--text-primary);
    text-decoration: none;
    border: 1px dashed var(--text-primary);
    transition: opacity .2s;
}
.dh-payment-contact-manager-link:hover {
    opacity: .7;
}

.dh-payment-modal-frame {
    position: relative;
    width: 100%;
    max-width: 36rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border: 2px solid var(--text-primary);
    font-family: 'Share Tech Mono', 'VT323', monospace;
    color: var(--text-primary);
}

.dh-payment-modal-frame--narrow {
    max-width: 28rem;
}

.dh-payment-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 2px solid var(--text-primary);
    gap: 0.75rem;
    flex-shrink: 0;
}

.dh-payment-modal-title {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-primary);
    cursor: pointer;
    margin: 0;
    line-height: 1.2;
}
.dh-payment-modal-title:hover {
    opacity: 0.75;
}

.dh-payment-modal-close {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--text-primary);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    flex-shrink: 0;
    padding: 0;
}
.dh-payment-modal-close:hover {
    background: var(--text-primary);
    color: var(--bg-primary);
}

.dh-payment-modal-body {
    padding: 1.25rem 1rem 1.25rem;
    overflow-y: auto;
    flex: 1;
}

.dh-payment-total {
    text-align: center;
    margin-bottom: 1rem;
}
.dh-payment-total__old {
    font-size: 0.85rem;
    color: var(--text-dim);
    text-decoration: line-through;
    margin: 0;
    font-family: inherit;
}
.dh-payment-total__amount {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: 0.02em;
    font-family: inherit;
}
.dh-payment-total__stars {
    font-size: 0.75rem;
    color: var(--text-dim);
    margin: 0.3rem 0 0;
    font-family: inherit;
}

.dh-payment-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.75rem;
    border: 2px dashed var(--text-primary);
    background: var(--bg-secondary);
    margin-bottom: 0.9rem;
    color: var(--text-primary);
}
.dh-payment-banner__pct {
    flex: 0 0 auto;
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--text-primary);
    background: var(--text-primary);
    color: var(--bg-primary);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}
.dh-payment-banner__text {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.3;
}

.dh-payment-method-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.dh-payment-method-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    width: 100%;
    background: var(--bg-secondary);
    border: 2px solid var(--text-primary);
    color: var(--text-primary);
    font-family: 'Share Tech Mono', 'VT323', monospace;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
    position: relative;
}
.dh-payment-method-btn:hover,
.dh-payment-method-btn:focus-visible {
    background: var(--text-primary);
    color: var(--bg-primary);
    outline: none;
}
.dh-payment-method-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.dh-payment-method-btn .dh-pm-icon {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid currentColor;
    background: transparent;
}
.dh-payment-method-btn .dh-pm-icon img {
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
}
.dh-payment-method-btn .dh-pm-icon i,
.dh-payment-method-btn .dh-pm-icon svg {
    width: 1.4rem;
    height: 1.4rem;
}
.dh-payment-method-btn .dh-pm-icon__char {
    font-size: 1.5rem;
    line-height: 1;
    font-family: 'Share Tech Mono', 'VT323', monospace;
    font-weight: 700;
}

.dh-payment-method-btn .dh-pm-body {
    flex: 1;
    min-width: 0;
}
.dh-payment-method-btn .dh-pm-title {
    font-size: 0.92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
    line-height: 1.25;
    font-family: inherit;
    overflow-wrap: anywhere;
}
.dh-payment-method-btn .dh-pm-desc {
    font-size: 0.7rem;
    margin: 0.2rem 0 0;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
    font-family: inherit;
    overflow-wrap: anywhere;
}
.dh-payment-method-btn .dh-pm-extra {
    font-size: 0.7rem;
    margin: 0.2rem 0 0;
    opacity: 0.95;
    font-family: inherit;
    overflow-wrap: anywhere;
}

.dh-payment-method-btn .dh-pm-chevron {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    opacity: 0.7;
}
.dh-payment-method-btn:hover .dh-pm-chevron {
    opacity: 1;
}

/* Inline 'discount' tag inside title */
.dh-discount-tag {
    font-size: 0.7rem;
    font-weight: 700;
    opacity: 0.9;
    margin-left: 0.4rem;
    letter-spacing: 0.05em;
}

/* Corner discount badge */
.dh-discount-badge {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    padding: 0.15rem 0.45rem;
    background: var(--text-primary);
    color: var(--bg-primary);
    border: 2px solid var(--text-primary);
    font-family: 'Share Tech Mono', 'VT323', monospace;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    line-height: 1.2;
}
.dh-payment-method-btn:hover .dh-discount-badge {
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* Crypto network rows reuse .dh-payment-method-btn but smaller */
.dh-payment-method-btn--compact {
    padding: 0.7rem 0.75rem;
    gap: 0.75rem;
}
.dh-payment-method-btn--compact .dh-pm-icon {
    width: 2.4rem;
    height: 2.4rem;
}
.dh-payment-method-btn--compact .dh-pm-title {
    font-size: 0.85rem;
}
.dh-payment-method-btn--compact .dh-pm-amount {
    font-size: 0.75rem;
    text-align: right;
    flex-shrink: 0;
    opacity: 0.9;
    font-family: inherit;
    overflow-wrap: anywhere;
}

/* DH-balance insufficient: disabled row + topup-via-support link */
.dh-pm-insufficient-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.dh-pm-topup-link {
    align-self: flex-end;
    font-family: 'Share Tech Mono', 'VT323', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    opacity: 0.85;
    text-decoration: underline;
    padding: 0.3rem 0.2rem;
}
.dh-pm-topup-link:hover,
.dh-pm-topup-link:focus-visible {
    opacity: 1;
    outline: none;
}

/* Empty/loading states inside payment modals */
.dh-payment-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-dim);
    font-family: 'Share Tech Mono', 'VT323', monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8rem;
}
.dh-payment-error {
    text-align: center;
    padding: 1rem;
    color: var(--text-primary);
    border: 2px dashed var(--text-primary);
    font-family: 'Share Tech Mono', 'VT323', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
}

@media (max-width: 480px) {
    .dh-payment-modal-body { padding: 1rem 0.75rem; }
    .dh-payment-method-btn { padding: 0.7rem 0.75rem; gap: 0.75rem; }
    .dh-payment-method-btn .dh-pm-icon { width: 2.4rem; height: 2.4rem; }
    .dh-payment-method-btn .dh-pm-title { font-size: 0.8rem; }
    .dh-payment-method-btn .dh-pm-desc,
    .dh-payment-method-btn .dh-pm-extra { font-size: 0.65rem; }
    .dh-payment-total__amount { font-size: 1.3rem; }
}

/* Light theme contrast for cart bonus (game wallet) banner */
html.light-theme .cart-game-wallet-row {
    color: #1a4d2e;
    background: rgba(46, 125, 50, 0.12);
    border-color: rgba(26, 77, 46, 0.55);
}
html.light-theme .cart-game-wallet-row strong {
    color: #0e3b1f;
}
html.light-theme .cart-game-wallet-row .ttl {
    color: #1a4d2e;
    opacity: 0.85;
}

/* Light theme contrast for cart TOTAL label/value */
html.light-theme #cart-total-label,
html.light-theme #cart-total-label.terminal-text-dim {
    color: #111111;
    font-weight: 700;
}
html.light-theme #cart-total {
    color: #111111;
    font-weight: 700;
}

/* Task L 2026-05-11: enlarge privacy consent hit-zone on desktop
   (custom cursor on PC is bigger than tiny native checkbox) */
@media (min-width: 768px) {
    #privacy-container-domestic,
    #privacy-container-international {
        cursor: pointer;
        padding: 14px;
        min-height: 56px;
        transition: background-color 0.15s ease;
    }
    #privacy-container-domestic:hover,
    #privacy-container-international:hover {
        background-color: var(--bg-tertiary) !important;
    }
    #privacy-accepted,
    #international-privacy-accepted {
        width: 22px;
        height: 22px;
        cursor: pointer;
        flex-shrink: 0;
        margin-top: 0;
    }
    #privacy-container-domestic > label[for="privacy-accepted"],
    #privacy-container-international > label[for="international-privacy-accepted"] {
        cursor: pointer;
        flex: 1 1 0%;
        padding: 2px 0;
        font-size: 0.85rem;
    }
}

/* Privacy checkbox: keep native browser appearance so the checkmark draws
   in the visible default color. Previous `accent-white` made the tick draw
   white on a light background — the box border changed on tap but the
   tick was invisible, so users thought tapping did nothing. */
#privacy-accepted,
#international-privacy-accepted {
    accent-color: #111 !important;
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    opacity: 1 !important;
}

/* Mobile: native checkbox renders at 13×13 — too small for a finger tap, users
   miss the hit-area entirely. Enlarge to 22×22 + give the whole label a vertical
   padding so any tap inside the container toggles the box. */
@media (max-width: 767.98px) {
    #privacy-accepted,
    #international-privacy-accepted {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        margin-top: 0;
    }
    #privacy-container-domestic,
    #privacy-container-international {
        align-items: center !important;
        min-height: 56px;
    }
    #privacy-container-domestic > label[for="privacy-accepted"],
    #privacy-container-international > label[for="international-privacy-accepted"] {
        flex: 1 1 0%;
        padding: 8px 0;
    }
}

/* Checkout delivery-method buttons: lock font-size so iOS Safari & Chromium
   mobile text-autosizer don't blow up the selected/bold one
   (iPhone reported "Курьер по Москве" rendering ~1.7× the others).
   `text-size-adjust: none` fully disables the autosizer; the inline `<span>`
   inherits via `* { font-size: inherit }`. */
#delivery-method-container,
#catalog-delivery-method-container,
#delivery-method-container button,
#catalog-delivery-method-container button,
[id^="method-btn-"] {
    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
}
#delivery-method-container button,
#catalog-delivery-method-container button,
[id^="method-btn-"] {
    font-size: 12px !important;
    line-height: 1.3 !important;
}
#delivery-method-container button > *,
#catalog-delivery-method-container button > *,
[id^="method-btn-"] > * {
    font-size: inherit !important;
    line-height: inherit !important;
}

/* Yandex.Доставка widget: hide eta/price line for points where the widget
   wrote "Не удалось рассчитать ...". JS tags those nodes with
   data-yax-hide-eta="1"; nodes without the attribute (successful pricing) stay. */
#yandex-map-container [data-yax-hide-eta="1"] {
    display: none !important;
}

/* Inline validation error under a field: clamp font-size so iOS Safari
   autosizer cannot re-render it as a chunky label that visually duplicates
   the actual <label> above the input. */
.field-error {
    font-size: 10px !important;
    line-height: 1.3 !important;
    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
}


/* Yandex.Доставка widget container: mobile = 420px (inline style),
   desktop ≥1024px = 600px (more room without overflow into next element).
   Without this, 600px on mobile makes the map+copyright overlap the
   "Не нашли пункт..." toggle below. */
@media (min-width: 1024px) {
    #yandex-map-container {
        height: 600px !important;
    }
}

/* Yandex.Доставка widget paints its internal `.widget__wrapper` / `.widget__map`
   well past the 420px container on mobile (measured: ~813px bleed). That overflow
   visually covers the "Не нашли пункт..." toggle button below. Clip it. */
#yandex-map-container {
    overflow: hidden;
}

/* Yandex.Доставка widget detects prefers-color-scheme: dark and switches its
   text to color:rgba(255,255,255,0.85), but leaves the white card backgrounds
   intact → white-on-white in dark mode. Diagnosed live with Puppeteer +
   Moscow SOCKS in /work/shop/chat/Скрин/yax_widget_diagnose_20260515/.

   Earlier v2 used `#yandex-map-container .widget__content *` which was too
   broad — it also caught .widget__marker-count (cluster count badges that
   visually live on the map but DOM-wise are inside .widget__content), turning
   their white digits dark on dark circles → invisible (markers looked like
   thin black slivers, see TG screenshot 2026-05-15 17:53). Narrow to the
   exact text-bearing classes the widget uses on white cards, leave markers,
   buttons, and SVG/Yandex Maps elements alone. */
/* Sidebar/list classes that DO live inside #yandex-map-container on desktop. */
#yandex-map-container .widget__filters-title-text,
#yandex-map-container .widget__filters-item-title,
#yandex-map-container .widget__filters-radio-title,
#yandex-map-container .widget__start-title,
#yandex-map-container .widget__start-desc,
#yandex-map-container .widget__location-title,
#yandex-map-container .widget__location-desc,
#yandex-map-container .widget__location-detail,
#yandex-map-container .widget__location-detail-span,
#yandex-map-container .widget__location-content,
#yandex-map-container .widget__location-lead,
#yandex-map-container .widget__location-faq,
#yandex-map-container .ydw-point-desc {
    color: rgba(0, 0, 0, 0.85) !important;
}

/* On mobile the widget hoists its header/form/input OUT of #yandex-map-container
   to the top of the modal (verified live with Puppeteer mobile viewport, see
   /work/shop/chat/Скрин/yax_test_base_20260515/global_search_input_full.png).
   Match these classes globally — `widget__` namespace is unique to the Yandex
   widget, no collision with our own styles. */
.widget__input,
input.widget__input,
.widget__input--search,
.widget__header,
.widget__form,
.widget__form-item,
.widget__title-text,
.widget__title-text-second,
.widget__label-text {
    color: rgba(0, 0, 0, 0.85) !important;
}

/* Address input placeholder («Москва») — browsers paint placeholder with
   reduced opacity by default, force readable contrast on the white field. */
.widget__input::placeholder,
input.widget__input::placeholder,
.widget__input--search::placeholder {
    color: rgba(0, 0, 0, 0.55) !important;
    opacity: 1 !important;
}

/* Cluster count badges (.widget__marker-count) collapse to ~4px width on our
   site — verified live with Puppeteer mobile viewport (size=4x40, see
   /work/shop/chat/Скрин/yax_test_base_20260515/markers_after_load_inspect.json).
   The wildcard `#yandex-map-container [class*="widget__"] { max-width: 100% }`
   from the BUG-10 mobile clip rule strips the natural width set by the widget,
   leaving only the digit width. Force a circular pill shape with a sane min
   size — Yandex's intended design is a ~32px round badge with white digit on
   dark grey (rgb(87,89,92), already correct via widget's own color rules). */
.widget__marker-count {
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
}

/* Hide the widget's native yellow "Продолжить" CTA — we auto-commit selection
   via JS so the user never sees/uses it.
   Off-screen-in-layout (position:absolute + left/top:-9999px) instead of
   `display:none` so the widget's Vue renderer still hydrates the button and
   its click handler can commit selection programmatically. offsetParent stays
   valid because position:absolute resolves to the nearest positioned ancestor.
   Selector is NOT scoped to #yandex-map-container because on iPhone the widget
   may render the CTA inside a floating overlay portal at body level. Globally
   scoping the class catches all locations. JS fallback in attachYandexWidget-
   Helpers re-applies these styles via setProperty(important) for the case
   where the widget overrides them with its own inline styles. */
button.widget__map-button,
.widget__map-button,
[class*="map-button"]:not(.widget__map-back) {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 1px !important;
    max-height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    z-index: -1 !important;
}

/* Mobile fix: Yandex.Доставка checkout block UX (BUG-10, 2026-05-15).
   On mobile the embedded widget's address card / popup escapes the 420px
   container and visually overlaps the contact form below it. Keep map
   container constrained, reduced height, and ensure widget popups stay
   inside. Manual entry is now opt-in via the toggle button on both mobile
   and desktop. */
@media (max-width: 768px) {
    #yandex-map-container {
        height: 320px !important;
    }
    /* Constrain anything inside the widget so floating popups stay within
       the 100% width of the container (widget__ classes are Yandex-internal). */
    #yandex-map-container [class*="widget__"] {
        max-width: 100% !important;
    }
}

/* Manual address entry toggle button — prominent action style shared by
   the CDEK and Yandex PVZ blocks. Looks like a clear secondary button so
   users notice they can switch to manual entry instead of map selection. */
.pvz-manual-toggle-btn {
    display: block;
    width: 100%;
    text-align: center;
    border: 1px solid var(--border-dim);
    background: var(--bg-tertiary);
    color: var(--text-primary, #fff);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.pvz-manual-toggle-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--accent, #d4af37);
}
.pvz-manual-toggle-btn:active {
    transform: translateY(1px);
}

/* BUG-10 v2 (2026-05-15): Yandex.Доставка widget overlay escapes #yandex-map-container on iPhone.
   Probe (390x844 viewport) found .widget__header at position:absolute; top:618px; z-index:4 —
   it floats over the contact form above the delivery section. .widget__content has hardcoded
   min/max-width:400px which overflows a 390px viewport. Force the inner widget back into normal
   flow on mobile: clip overflow on container, stack wrapper vertically, full-width content,
   static header. Desktop layout unchanged (the existing @media (min-width:1024px) row-layout
   still applies). */
@media (max-width: 768px) {
    #yandex-map-container {
        overflow: hidden !important;
        position: relative !important;
    }
    #yandex-map-container .widget__wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    #yandex-map-container .widget__content {
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    #yandex-map-container .widget__header {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        z-index: auto !important;
    }
}

/* BUG-10 v4 (2026-05-15): final mobile layout for Yandex.Доставка.
   The widget__header (SDK search panel) is moved OUTSIDE #yandex-map-container
   via JS (forceHeaderAboveMap), so it sits as a sibling between the info banner
   and the map container in normal flow. Compress info banner font and shrink the
   map container so the map fills it without the 88px sidebar gap. */
@media (max-width: 768px) {
    /* Smaller info banner so we don't double up on text density */
    #yandex-delivery-block > p:first-of-type {
        font-size: 9px !important;
        line-height: 1.35 !important;
        padding: 6px 8px !important;
    }
    /* Map-only container — header lives outside it now */
    #yandex-map-container {
        height: 260px !important;
    }
    /* Collapse the SDK's reserved sidebar padding so the map starts at the top */
    #yandex-map-container .ydw-widget,
    #yandex-map-container .widget__wrapper {
        padding: 0 !important;
        margin: 0 !important;
    }
    /* widget__header outside the container: give it the same border treatment
       as our other dashed-info chips so it visually belongs to the delivery section */
    #yandex-delivery-block > .widget__header {
        margin: 0 0 8px 0 !important;
        border-radius: 8px !important;
        max-width: 100% !important;
    }
}

/* BUG-10 v5 (2026-05-15): "Изменить" button on the green PVZ confirmation panel
   was not clickable after selecting a pickup point — the modal backdrop
   (.absolute inset-0 bg-black/90 inside #payment-modal) ended up on top in
   the stacking order on mobile after Yandex SDK rendered the PVZ detail panel.
   Force our confirmation box (with the Изменить button) to a higher z-index
   than the backdrop and explicitly allow pointer events. */
#yandex-selected-point {
    position: relative !important;
    z-index: 70 !important;
}
#yandex-selected-point,
#yandex-selected-point * {
    pointer-events: auto !important;
}

/* BUG-10 v6 (2026-05-15): iOS Safari tap on the Izmenit button registered as
   hover (because of class "hover:opacity-70") instead of click on first tap.
   touch-action: manipulation tells the browser this element doesn't need
   double-tap zoom — first tap = click. */
#yandex-selected-point button {
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
}

/* BUG-10 v7 (2026-05-15): kill hover:opacity-70 visual state on mobile.
   iOS Safari interprets the first tap on a button with :hover styles as
   "show hover state" instead of firing the click. Force opacity:1
   regardless of state on ≤768px. */
@media (max-width: 768px) {
    #yandex-selected-point button,
    #yandex-selected-point button:hover,
    #yandex-selected-point button:active,
    #yandex-selected-point button:focus {
        opacity: 1 !important;
    }
}

html.input-focused #global-bg *,
html.input-focused .global-animated-bg * {
    animation-play-state: paused !important;
}