/* Custom styles beyond Tailwind */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #33c100;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2a9d00;
}

/* Animation for product cards */
.product-card {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger animation for grid items */
.product-card:nth-child(1) { animation-delay: 0.1s; }
.product-card:nth-child(2) { animation-delay: 0.2s; }
.product-card:nth-child(3) { animation-delay: 0.3s; }
.product-card:nth-child(4) { animation-delay: 0.4s; }

/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Loading skeleton animation */
@keyframes skeleton {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

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

/* Focus styles for accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid #33c100;
    outline-offset: 2px;
}

/* Image hover zoom container */
.aspect-square {
    position: relative;
    overflow: hidden;
}

button:active i {
    transform: none;
}

/* Toast animation */
#toast.show {
    transform: translateY(0);
    opacity: 1;
}

/* Cart slide animation */
#cartContent.open {
    transform: translateX(0);
}

/* Custom selection color */
::selection {
    background: rgba(51, 193, 0, 0.2);
    color: inherit;
}

/* Floating badge pulse */
.animate-bounce {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

.product-card:hover {
    transform: translateY(-4px);
}

.btn-press:active {
    transform: scale(0.97);
}

/* SCROLL ANIMATION */

.reveal{
opacity:0;
transform:translateY(60px);
transition:all 0.8s ease;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

.hero-bg{
position:relative;
isolation:isolate;
overflow:hidden;
background-image:url("/images/bg11.png");
background-size:cover;
background-position:center;
background-repeat:no-repeat;

width:100%;
min-height:min(92vh, 720px);

display:flex;
align-items:center;
}

@media (max-width: 767px) {
    .hero-bg {
        width: 100vw;
        min-height: 100svh;
        min-height: 100dvh;
        background-position: center;
    }
}

.hero-bg::before{
content:"";
position:absolute;
inset:0;

background:linear-gradient(
90deg,
rgba(0,0,0,0.35) 0%,
rgba(0,0,0,0.18) 40%,
rgba(0,0,0,0.05) 70%,
rgba(0,0,0,0) 100%
);

}
.hero-content h1{
text-shadow:0 4px 20px rgba(0,0,0,0.6);
}

.hero-bg .hero-content{
    position:relative;
    z-index:2;
}

/* красивый скролл */
::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-track{
background:#f1f1f1;
}

::-webkit-scrollbar-thumb{
background:#cbd5e1;
border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
background:#94a3b8;
}

/* =========================
   QUICK FLOAT BUTTONS
========================= */

.quick-float-stack{
position:fixed;
right:24px;
bottom:96px;
display:flex;
flex-direction:column;
gap:10px;
z-index:998;
transition:transform .35s ease, bottom .35s ease;
}

.quick-float-btn{
width:56px;
height:56px;
border-radius:50px;
background:#ffffff;
color:#0f172a;
border:1px solid #e2e8f0;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 10px 24px rgba(15,23,42,0.16);
transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.quick-float-btn:hover{
background:#f8fafc;
transform:translateY(-2px);
box-shadow:0 14px 28px rgba(15,23,42,0.2);
}

.quick-float-btn i{
width:22px;
height:22px;
}

/* =========================
   FLOATING CALL BUTTON
========================= */

.call-widget{
position:fixed;
right:24px;
bottom:30px; /* стартовая позиция */

display:flex;
align-items:center;

height:56px;
width:56px;

background:#16a34a;
color:white;

border-radius:50px;
overflow:hidden;

box-shadow:0 12px 30px rgba(0,0,0,0.25);

cursor:pointer;
z-index:999;

transition:
bottom .35s ease,   /* добавили анимацию */
width .35s cubic-bezier(.4,0,.2,1),
box-shadow .25s;
}

/* ICON */

.call-icon{
width:56px;
height:56px;

display:flex;
align-items:center;
justify-content:center;

flex-shrink:0;
}

/* NUMBER */

.call-number{
opacity:0;
transform:translateX(10px);

font-weight:600;
white-space:nowrap;

padding-right:18px;

transition:
opacity .25s ease,
transform .25s ease;
}

/* HOVER EXPAND */

.call-widget:hover{

width:230px;

box-shadow:0 16px 40px rgba(0,0,0,0.35);
}

/* SHOW NUMBER */

.call-widget:hover .call-number{

opacity:1;
transform:translateX(0);
}

/* ICON ANIMATION */

.call-widget:hover .call-icon{

animation:phoneShake .6s ease;
}

/* PHONE SHAKE */

@keyframes phoneShake{

0%{ transform:rotate(0deg); }
20%{ transform:rotate(-12deg); }
40%{ transform:rotate(10deg); }
60%{ transform:rotate(-6deg); }
80%{ transform:rotate(6deg); }
100%{ transform:rotate(0deg); }

}

/* PULSE EFFECT */

.call-widget::before{

content:"";
position:absolute;

width:56px;
height:56px;

background:#16a34a;

border-radius:50%;

opacity:.4;

animation:pulse 2s infinite;

z-index:-1;
}

@keyframes pulse{

0%{
transform:scale(1);
opacity:.4;
}

70%{
transform:scale(1.7);
opacity:0;
}

100%{
transform:scale(1.7);
opacity:0;
}

}

/* =========================
   SCROLL TOP BUTTON
========================= */

.scroll-top-btn{

position:fixed;
right:24px;
bottom:30px;

width:56px;
height:56px;

display:flex;
align-items:center;
justify-content:center;

background:#e5e5e5;
color:#555;

border-radius:50%;

box-shadow:0 10px 25px rgba(0,0,0,0.2);

cursor:pointer;

opacity:0;
pointer-events:none;

transform:translateY(20px);

transition:all .35s ease;

z-index:998;
}

.scroll-top-btn.show{

opacity:1;
pointer-events:auto;
transform:translateY(0);
}

/* SHOW BUTTON */

.scroll-top-btn.show{

opacity:1;
transform:translateY(0);
}

/* CALL BUTTON MOVE */

.call-widget.move-up{

bottom:110px;
}

.quick-float-stack.move-up{
transform:translateY(-80px);
}

.scroll-top-btn:hover{

background:#d4d4d4;
transform:scale(1.05);
}

/* BRAND CARDS */

.brand-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;

    height: 80px;
    min-width: 140px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    transition: all .25s ease;
    cursor: pointer;

    position: relative;
}

.brand-card:hover {
    transform: translateY(-4px);

    border-color: #16a34a;

    box-shadow: 
        0 10px 25px rgba(0,0,0,0.08),
        0 0 0 2px rgba(22,163,74,0.15); /* мягкая рамка */
}

.brand-card img{

max-height:30px;
max-width:120px;

object-fit:contain;

opacity:.8;

transition:opacity .2s;
}

.brand-card:hover img{

opacity:1;
}

.logo-box {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    background: #ffffff; /* ← БЕЛЫЙ фон */
    padding: 8px 14px;

    border: 3px solid #22c55e;
    border-radius: 10px;

    font-weight: 800;
    font-size: 26px;

    transition: 0.3s;
}

/* TV */
.logo-tv {
    color: #111; /* ← тёмный вместо белого */
}

/* N */
.logo-on {
    color: #22c55e;
}

/* O кнопка */
.logo-power {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border: 3px solid #22c55e;
    border-radius: 50%;

    position: relative;
}

/* палочка */
.power-icon {
    position: absolute;
    top: -6px;

    width: 4px;
    height: 12px;

    background: #22c55e;
    border-radius: 2px;
}

/* hover */
.logo-box:hover {
    background: #22c55e;
}

.logo-box:hover .logo-tv,
.logo-box:hover .logo-on {
    color: white;
}

.logo-box:hover .logo-power {
    border-color: white;
}

.logo-box:hover .power-icon {
    background: white;
}

/* скрыть скроллбар */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.brand-card img {
    max-height: 32px;
    object-fit: contain;
}

.brands-scroll {
    scroll-behavior: smooth;
}

.brand-card {
    scroll-snap-align: start;
}

.brands-wrapper::before,
.brands-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 40px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.brands-wrapper::before {
    left: 0;
    background: linear-gradient(to right, #f9fafb, transparent);
}

.brands-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #f9fafb, transparent);
}

/* ===== BRANDS AUTO SCROLL ===== */

.brands-wrapper {
    overflow: hidden;
    padding-top: 6px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* затемнение краёв */
.brands-wrapper::before,
.brands-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.brands-wrapper::before {
    left: 0;
    background: linear-gradient(to right, #f9fafb, transparent);
}

.brands-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #f9fafb, transparent);
}

/* трек */
.brands-track {
    display: flex;
    gap: 16px;
    width: max-content;
    will-change: transform;
}

/* направления */
.brands-track.left {
    animation: scrollLeft 35s linear infinite;
}

.brands-track.right {
    animation: scrollRight 28s linear infinite;
}

/* анимации */
@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes scrollRight {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* пауза при наведении */
.brands-wrapper:hover .brands-track {
    animation-play-state: paused;
}

/* ===== REVIEWS WRAPPER FADE EFFECT ===== */
.reviews-wrapper::before,
.reviews-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.reviews-wrapper::before {
    left: 0;
    background: linear-gradient(to right, #ffffff, transparent);
}

.reviews-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #ffffff, transparent);
}

#hours,
#minutes,
#seconds,
#ms {
    display: inline-block;
    min-width: 2ch; /* под 2 цифры */
    text-align: center;
}

.timer-number {
    font-variant-numeric: tabular-nums;
    display: inline-block;
    min-width: 2ch;
    text-align: center;
}

/* ULTRA SMOOTH PROMO ANIMATION */
.promo-shake {
    animation: promoFloat 4s ease-in-out infinite;
    transform-origin: center;
    will-change: transform;
}

@keyframes promoFloat {

    /* покой */
    0%   { transform: rotate(0deg) translateY(0); }

    /* очень мягкое движение */
    10%  { transform: rotate(-0.4deg) translateY(-2px); }
    20%  { transform: rotate(0.4deg) translateY(0); }
    30%  { transform: rotate(-0.3deg) translateY(-1px); }
    40%  { transform: rotate(0.3deg) translateY(0); }

    /* возвращение */
    50%  { transform: rotate(0deg) translateY(0); }

    /* длинная пауза (ВАЖНО) */
    100% { transform: rotate(0deg) translateY(0); }
}

/* ===== CLEAN FOOTER (FIXED) ===== */

.footer-card{
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;

    border: 1px solid #e5e7eb;

    transition: all .25s ease;
}

.footer-card:hover{
    transform: translateY(-4px);
    box-shadow:
        0 10px 25px rgba(0,0,0,0.06);
}

/* элементы */
.footer-item{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:12px 14px;

    background:#f9fafb;
    border-radius:10px;

    transition: all .2s ease;
    cursor:pointer;
}

.footer-item:hover{
    background:#f3f4f6;
}

/* зелёная карточка */
.footer-highlight{
    background: linear-gradient(135deg, #f0fdf4, #ffffff);
    border: 1px solid #bbf7d0;
}

/* ===== DARK PREMIUM FOOTER ===== */

.footer-dark{
    background: linear-gradient(
        180deg,
        #1f2937 0%,
        #111827 100%
    );
}

/* карточки */
.footer-card-dark{
    background: rgba(255,255,255,0.04);
    border-radius: 16px;
    padding: 20px;

    border: 1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(6px);

    transition: all .25s ease;

    color: #d1d5db;
}

/* ===== GLOBAL RESPONSIVE TUNING ===== */
@media (max-width: 1023px) {
    .brands-wrapper::before,
    .brands-wrapper::after {
        width: 38px;
    }
    .brands-track {
        gap: 12px;
    }
}

@media (max-width: 767px) {
    .quick-float-stack,
    .scroll-top-btn {
        display: none !important;
    }

    .logo-box {
        transform: scale(.9);
        transform-origin: left center;
    }
    .brand-card {
        min-width: 110px;
    }
    .brand-card img {
        max-height: 26px;
    }
    .quick-float-stack{
        bottom: calc(96px + 5.35rem);
    }
    .call-widget{
        bottom: calc(30px + 5.35rem);
    }
    .scroll-top-btn{
        bottom: calc(30px + 5.35rem);
    }
    .call-widget.move-up{
        bottom: calc(110px + 5.35rem);
    }
    .quick-float-stack.move-up{
        transform: translateY(calc(-80px - 5.35rem));
    }
}

.footer-card-dark:hover{
    transform: translateY(-4px);

    border-color: rgba(34,197,94,0.4);

    box-shadow:
        0 10px 30px rgba(0,0,0,0.4);
}

/* элементы */
.footer-item-dark{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:12px 14px;

    background: rgba(255,255,255,0.04);
    border-radius:10px;

    transition: all .2s ease;
    cursor:pointer;
}

.footer-item-dark:hover{
    background: rgba(255,255,255,0.08);
}

/* зелёный блок */
.footer-highlight-dark{
    background: linear-gradient(
        135deg,
        rgba(34,197,94,0.15),
        rgba(255,255,255,0.03)
    );

    border: 1px solid rgba(34,197,94,0.3);
}

/* =========================
   ATTENTION BUTTON EFFECT
========================= */

.attention-btn{
    position: relative;
    overflow: hidden;

    animation: btnPulse 2.5s ease-in-out infinite;
    transition: all .3s ease;
}

/* мягкий пульс */
@keyframes btnPulse{
    0%{
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(22,163,74,0.5);
    }
    50%{
        transform: scale(1.04);
        box-shadow: 0 0 25px 6px rgba(22,163,74,0.25);
    }
    100%{
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(22,163,74,0);
    }
}

/* блеск (shine эффект) */
.attention-btn::after{
    content:"";
    position:absolute;
    top:0;
    left:-75%;
    width:50%;
    height:100%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.6),
        transparent
    );

    transform: skewX(-20deg);

    animation: shine 3.5s infinite;
}

@keyframes shine{
    0%{ left:-75%; }
    50%{ left:130%; }
    100%{ left:130%; }
}

/* hover усиление */
.attention-btn:hover{
    transform: scale(1.08);
    box-shadow: 0 10px 30px rgba(22,163,74,0.4);
}

/* ========== Главная: каскад секций и модалки ========== */

@keyframes homeFadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-cascade-1,
.hero-cascade-2,
.hero-cascade-3,
.hero-cascade-4 {
    opacity: 0;
    transform: translateY(24px);
}

.reveal.active .hero-cascade-1 {
    animation: homeFadeUp 0.75s cubic-bezier(0.22, 1, 0.3, 1) 0.06s forwards;
}
.reveal.active .hero-cascade-2 {
    animation: homeFadeUp 0.75s cubic-bezier(0.22, 1, 0.3, 1) 0.14s forwards;
}
.reveal.active .hero-cascade-3 {
    animation: homeFadeUp 0.75s cubic-bezier(0.22, 1, 0.3, 1) 0.22s forwards;
}
.reveal.active .hero-cascade-4 {
    animation: homeFadeUp 0.75s cubic-bezier(0.22, 1, 0.3, 1) 0.3s forwards;
}

@keyframes homeRevealItem {
    from {
        opacity: 0;
        transform: translateY(32px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reveal.reveal-cascade .reveal-cascade-item {
    opacity: 0;
    transform: translateY(32px);
}

.reveal.reveal-cascade.active .grid > .reveal-cascade-item:nth-child(1) {
    animation: homeRevealItem 0.65s cubic-bezier(0.22, 1, 0.3, 1) 0.05s forwards;
}
.reveal.reveal-cascade.active .grid > .reveal-cascade-item:nth-child(2) {
    animation: homeRevealItem 0.65s cubic-bezier(0.22, 1, 0.3, 1) 0.1s forwards;
}
.reveal.reveal-cascade.active .grid > .reveal-cascade-item:nth-child(3) {
    animation: homeRevealItem 0.65s cubic-bezier(0.22, 1, 0.3, 1) 0.15s forwards;
}
.reveal.reveal-cascade.active .grid > .reveal-cascade-item:nth-child(4) {
    animation: homeRevealItem 0.65s cubic-bezier(0.22, 1, 0.3, 1) 0.2s forwards;
}
.reveal.reveal-cascade.active .grid > .reveal-cascade-item:nth-child(5) {
    animation: homeRevealItem 0.65s cubic-bezier(0.22, 1, 0.3, 1) 0.25s forwards;
}
.reveal.reveal-cascade.active .grid > .reveal-cascade-item:nth-child(6) {
    animation: homeRevealItem 0.65s cubic-bezier(0.22, 1, 0.3, 1) 0.3s forwards;
}
.reveal.reveal-cascade.active .grid > .reveal-cascade-item:nth-child(7) {
    animation: homeRevealItem 0.65s cubic-bezier(0.22, 1, 0.3, 1) 0.35s forwards;
}
.reveal.reveal-cascade.active .grid > .reveal-cascade-item:nth-child(8) {
    animation: homeRevealItem 0.65s cubic-bezier(0.22, 1, 0.3, 1) 0.4s forwards;
}
.reveal.reveal-cascade.active .grid > .reveal-cascade-item:nth-child(9) {
    animation: homeRevealItem 0.65s cubic-bezier(0.22, 1, 0.3, 1) 0.45s forwards;
}
.reveal.reveal-cascade.active .grid > .reveal-cascade-item:nth-child(10) {
    animation: homeRevealItem 0.65s cubic-bezier(0.22, 1, 0.3, 1) 0.5s forwards;
}
.reveal.reveal-cascade.active .grid > .reveal-cascade-item:nth-child(11) {
    animation: homeRevealItem 0.65s cubic-bezier(0.22, 1, 0.3, 1) 0.55s forwards;
}
.reveal.reveal-cascade.active .grid > .reveal-cascade-item:nth-child(12) {
    animation: homeRevealItem 0.65s cubic-bezier(0.22, 1, 0.3, 1) 0.6s forwards;
}

.modal-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: 9999px;
    background: #f3f4f6;
    color: #374151;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.modal-close-btn:hover {
    background: #e5e7eb;
    color: #111827;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.modal-close-btn:active {
    transform: scale(0.94);
}

@media (max-width: 640px) {
    .scroll-top-btn {
        right: 14px;
        bottom: calc(86px + 5.35rem);
        width: 48px;
        height: 48px;
    }

    .call-widget {
        right: 14px;
        bottom: calc(20px + 5.35rem);
        width: 52px;
        height: 52px;
    }

    .call-widget:hover {
        width: 52px;
    }

    .call-widget:hover .call-number {
        opacity: 0;
    }

    .call-widget.move-up {
        bottom: calc(82px + 5.35rem);
    }

    .quick-float-stack{
        right:14px;
        bottom:calc(80px + 5.35rem);
        gap:8px;
    }

    .quick-float-btn{
        width:52px;
        height:52px;
    }

    .quick-float-stack.move-up{
        transform:translateY(-62px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.active,
    .hero-cascade-1,
    .hero-cascade-2,
    .hero-cascade-3,
    .hero-cascade-4,
    .reveal.reveal-cascade .reveal-cascade-item {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* Избранное: заливка сердца после Lucide */
.tvon-fav--on svg,
.tvon-fav-btn.tvon-fav--on svg {
    color: rgb(239 68 68);
    fill: currentColor;
}

/* Премиальные модалки (партнёры / опт) */
.tvon-modal-shell {
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    background: linear-gradient(165deg, #f8fafc 0%, #ecfdf5 38%, #f1f5f9 100%);
}

.tvon-modal-shell .tvon-modal-hero {
    background: linear-gradient(120deg, #0f172a 0%, #14532d 42%, #064e3b 100%);
    color: #f8fafc;
    position: relative;
    overflow: hidden;
}

.tvon-modal-shell .tvon-modal-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(52, 211, 153, 0.35), transparent 55%);
    pointer-events: none;
}

.tvon-modal-shell .tvon-modal-hero h2,
.tvon-modal-shell .tvon-modal-hero p {
    position: relative;
    z-index: 1;
}

.tvon-modal-shell .tvon-modal-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.75rem;
}

.tvon-modal-shell .tvon-field {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.92);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tvon-modal-shell .tvon-field:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.tvon-modal-shell .tvon-choice {
    border-radius: 0.875rem;
    border: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.85);
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.tvon-modal-shell .tvon-choice:hover {
    border-color: #6ee7b7;
    background: #fff;
}

.tvon-modal-shell .tvon-choice:has(input:checked) {
    border-color: #059669;
    background: #ecfdf5;
    box-shadow: 0 0 0 1px rgba(5, 150, 105, 0.25);
}

.tvon-modal-shell .tvon-submit {
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 0.875rem;
    font-weight: 600;
    color: #fff;
    border: none;
    cursor: pointer;
    background: linear-gradient(105deg, #059669 0%, #0d9488 50%, #047857 100%);
    box-shadow: 0 10px 30px rgba(5, 150, 105, 0.35);
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.2s ease;
}

.tvon-modal-shell .tvon-submit:hover {
    filter: brightness(1.05);
    box-shadow: 0 14px 36px rgba(5, 150, 105, 0.4);
}

.tvon-modal-shell .tvon-submit:active {
    transform: scale(0.99);
}

/* Модалки «Консультация» / «Опт»: поля как в макете (белый фон, мягкий фокус) */
#consultModal .tvon-field,
#wholesaleModal .tvon-field,
#partnerModal .tvon-field,
#masterModal .tvon-field {
    padding: 0.75rem 1.25rem;
    border-radius: 0.875rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #374151;
    font-size: 1rem;
    line-height: 1.5;
    box-shadow: none;
}

#consultModal .tvon-field::placeholder,
#wholesaleModal .tvon-field::placeholder,
#partnerModal .tvon-field::placeholder,
#masterModal .tvon-field::placeholder {
    color: #9ca3af;
}

#consultModal .tvon-field:focus,
#wholesaleModal .tvon-field:focus,
#partnerModal .tvon-field:focus,
#masterModal .tvon-field:focus {
    outline: none;
    border-color: #cbd5e1;
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.28);
}

/* TV Finder (главная) — слайдер расстояния (м) */
.tv-finder-dist__range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 0.5rem;
    margin: 0.35rem 0 0;
    border-radius: 9999px;
    background: linear-gradient(to right, #16a34a 0%, #16a34a var(--tv-finder-pct, 34%), #e5e7eb var(--tv-finder-pct, 34%), #e5e7eb 100%);
    cursor: pointer;
}

.tv-finder-dist__range:focus {
    outline: none;
}

.tv-finder-dist__range:focus-visible {
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.35);
}

.tv-finder-dist__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #16a34a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.tv-finder-dist__range::-moz-range-thumb {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #16a34a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.tv-finder-dist__range::-moz-range-track {
    height: 0.5rem;
    border-radius: 9999px;
    background: transparent;
}

.tv-finder-hero-img {
    mask-image: linear-gradient(to left, black 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(to left, black 55%, transparent 100%);
}

@media (min-width: 1024px) {
    .tv-finder-hero-img {
        mask-image: linear-gradient(to left, black 70%, rgba(0, 0, 0, 0.2) 92%, transparent 100%);
        -webkit-mask-image: linear-gradient(to left, black 70%, rgba(0, 0, 0, 0.2) 92%, transparent 100%);
    }
}