/* HomeNest UA — спільні стилі та теми оформлення (глибока синя темна + світла) */
html, body { overflow-x: clip; max-width: 100%; }
body { -webkit-tap-highlight-color: transparent; transition: background-color 0.25s ease, color 0.25s ease; }

/* Пульсація головної кнопки */
@keyframes cta-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.55); }
  70%  { box-shadow: 0 0 0 12px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
.cta-pulse { animation: cta-pulse 2.2s infinite; }

/* Глибоке сапфірове світіння */
@keyframes flicker { 0%,100% { opacity:.55 } 40% { opacity:.85 } 60% { opacity:.65 } 80% { opacity:.9 } }
.fire-glow::before {
  content:""; position:absolute; inset:10% 10% 35% 10%;
  background: radial-gradient(ellipse at center, rgba(37,99,235,.55), rgba(29,78,216,0) 70%);
  filter: blur(30px); animation: flicker 3s infinite; z-index:0; pointer-events:none;
}

/* Слайдер */
.slider { scroll-snap-type: x mandatory; scrollbar-width: none; }
.slider::-webkit-scrollbar { display: none; }
.slider > * { scroll-snap-align: center; }

/* Акордеон */
.faq-body { display:grid; grid-template-rows:0fr; transition: grid-template-rows .3s ease; }
.faq-item.open .faq-body { grid-template-rows:1fr; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* Прогрес-бар залишку */
@keyframes stripes { from { background-position: 0 0 } to { background-position: 28px 0 } }
.stock-bar { background-image: linear-gradient(45deg, rgba(255,255,255,.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%, transparent 75%); background-size: 28px 28px; animation: stripes 1s linear infinite; }

/* Spinner */
@keyframes spin { to { transform: rotate(360deg) } }
.spinner { width:20px; height:20px; border:3px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation: spin .8s linear infinite; }

/* ==========================================================
   1. ТЕМНА ТЕМА (html.dark) — Глибокий синій космічний стиль
   ========================================================== */
html.dark { color-scheme: dark; }
html.dark body { background: #070D1E !important; color: #E2E8F0 !important; }
html.dark .bg-white { background-color: #0E1830 !important; }
html.dark .bg-white\/95 { background-color: rgba(7, 13, 30, .96) !important; }
html.dark .bg-cream, html.dark #specsTable > tr:nth-child(odd) { background-color: #0A1326 !important; }
html.dark .from-orange-50 { --tw-gradient-from: #0F1E3D var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(15, 30, 61, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html.dark .to-white { --tw-gradient-to: #070D1E var(--tw-gradient-to-position) !important; }
html.dark .bg-orange-100 { background-color: rgba(37, 99, 235, .2) !important; }
html.dark .hover\:bg-orange-50:hover { background-color: rgba(37, 99, 235, .15) !important; }
html.dark .bg-slate-100, html.dark .disabled\:bg-slate-100:disabled { background-color: #121F3D !important; }
html.dark .bg-slate-300 { background-color: #2D4166 !important; }
html.dark .bg-red-50 { background-color: rgba(239, 68, 68, .15) !important; }
html.dark .bg-buy-600\/10 { background-color: rgba(34, 197, 94, .15) !important; }

html.dark .text-graphite, html.dark .text-slate-800 { color: #F1F5F9 !important; }
html.dark .text-slate-700 { color: #D5DEE9 !important; }
html.dark .text-slate-600 { color: #94A3B8 !important; }
html.dark .text-slate-500 { color: #64748B !important; }
html.dark .text-slate-200 { color: #1E3258 !important; }
html.dark .text-buy-700 { color: #4ADE80 !important; }
html.dark .text-red-600 { color: #F87171 !important; }

html.dark .border-slate-100 { border-color: #152445 !important; }
html.dark .border-slate-200 { border-color: #1C305C !important; }
html.dark .border-slate-300 { border-color: #263E72 !important; }
html.dark .border-orange-100 { border-color: rgba(37, 99, 235, .4) !important; }
html.dark .shadow-orange-200 { --tw-shadow-color: rgba(37, 99, 235, .3) !important; }

html.dark input, html.dark textarea { color: #F1F5F9 !important; background-color: #0A1326 !important; }
html.dark input:disabled { background-color: #121F3D !important; }
html.dark input::placeholder, html.dark textarea::placeholder { color: #64748B !important; }
html.dark .fb-tab.bg-graphite { background-color: #1D4ED8 !important; }
html.dark .bg-graphite.js-close-modal, html.dark #questionForm .fb-submit { background-color: #1D4ED8 !important; }

html.dark #slider figure { background-color: #0E1830 !important; }
html.dark #slider figure > div { background-color: #000000 !important; }
html.dark #slider figcaption { background-color: #0E1830 !important; }
html.dark #mobileMenu { background-color: #0E1830 !important; border-color: #1C305C !important; }

html.dark .theme-sun { display: block !important; color: #60A5FA !important; }
html.dark .theme-moon { display: none !important; }

/* ==========================================================
   2. СВІТЛА ТЕМА (html:not(.dark)) — Чистий світлий стиль з синіми акцентами
   ========================================================== */
html:not(.dark) { color-scheme: light; }
html:not(.dark) body { background: #F8FAFC !important; color: #1E293B !important; }
html:not(.dark) .bg-white { background-color: #FFFFFF !important; }
html:not(.dark) .bg-white\/95 { background-color: rgba(255, 255, 255, .96) !important; }
html:not(.dark) .bg-cream, html:not(.dark) #specsTable > tr:nth-child(odd) { background-color: #F1F5F9 !important; }
html:not(.dark) .from-orange-50 { --tw-gradient-from: #EFF6FF var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(239, 246, 255, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html:not(.dark) .to-white { --tw-gradient-to: #F8FAFC var(--tw-gradient-to-position) !important; }
html:not(.dark) .bg-orange-100 { background-color: #DBEAFE !important; }
html:not(.dark) .hover\:bg-orange-50:hover { background-color: #EFF6FF !important; }
html:not(.dark) .bg-slate-100, html:not(.dark) .disabled\:bg-slate-100:disabled { background-color: #F1F5F9 !important; }
html:not(.dark) .bg-slate-300 { background-color: #CBD5E1 !important; }
html:not(.dark) .bg-red-50 { background-color: #FEF2F2 !important; }
html:not(.dark) .bg-buy-600\/10 { background-color: rgba(34, 197, 94, .12) !important; }

html:not(.dark) .text-graphite, html:not(.dark) .text-slate-800 { color: #0F172A !important; }
html:not(.dark) .text-slate-700 { color: #334155 !important; }
html:not(.dark) .text-slate-600 { color: #475569 !important; }
html:not(.dark) .text-slate-500 { color: #64748B !important; }
html:not(.dark) .text-slate-200 { color: #E2E8F0 !important; }
html:not(.dark) .text-buy-700 { color: #15803D !important; }
html:not(.dark) .text-red-600 { color: #DC2626 !important; }

html:not(.dark) .border-slate-100 { border-color: #F1F5F9 !important; }
html:not(.dark) .border-slate-200 { border-color: #E2E8F0 !important; }
html:not(.dark) .border-slate-300 { border-color: #CBD5E1 !important; }
html:not(.dark) .border-orange-100 { border-color: #BFDBFE !important; }
html:not(.dark) .shadow-orange-200 { --tw-shadow-color: rgba(37, 99, 235, .15) !important; }

html:not(.dark) input, html:not(.dark) textarea { color: #0F172A !important; background-color: #FFFFFF !important; }
html:not(.dark) input:disabled { background-color: #F1F5F9 !important; }
html:not(.dark) input::placeholder, html:not(.dark) textarea::placeholder { color: #94A3B8 !important; }
html:not(.dark) .fb-tab.bg-graphite { background-color: #1D4ED8 !important; }
html:not(.dark) .bg-graphite.js-close-modal, html:not(.dark) #questionForm .fb-submit { background-color: #1D4ED8 !important; }

html:not(.dark) #slider figure { background-color: #FFFFFF !important; border-color: #E2E8F0 !important; }
html:not(.dark) #slider figure > div { background-color: #F8FAFC !important; }
html:not(.dark) #slider figcaption { background-color: #FFFFFF !important; color: #0F172A !important; }
html:not(.dark) #mobileMenu { background-color: #FFFFFF !important; border-color: #E2E8F0 !important; }

html:not(.dark) .theme-sun { display: none !important; }
html:not(.dark) .theme-moon { display: block !important; color: #1E293B !important; }

/* ==========================================================
   3. АНІМАЦІЯ ТА СТИЛЬ ЛОГОТИПУ HOMENEST
   ========================================================== */
@keyframes homenest-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-2.5px) rotate(1.2deg);
  }
}

@keyframes homenest-glow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.4), 0 0 18px rgba(59, 130, 246, 0.25);
    filter: drop-shadow(0 2px 6px rgba(29, 78, 216, 0.45));
  }
  50% {
    box-shadow: 0 0 18px rgba(37, 99, 235, 0.65), 0 0 30px rgba(59, 130, 246, 0.4);
    filter: drop-shadow(0 3px 10px rgba(29, 78, 216, 0.75));
  }
}

.homenest-logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 12px;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: homenest-glow 3.5s ease-in-out infinite;
}

html.dark .homenest-logo-badge {
  background: linear-gradient(135deg, rgba(14, 24, 48, 0.95), rgba(10, 19, 38, 0.9)) !important;
  border: 1px solid rgba(37, 99, 235, 0.5) !important;
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.35) !important;
}

html:not(.dark) .homenest-logo-badge {
  background: linear-gradient(135deg, #EFF6FF, #DBEAFE) !important;
  border: 1px solid rgba(37, 99, 235, 0.4) !important;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.15) !important;
}

.homenest-logo-img {
  animation: homenest-float 3.5s ease-in-out infinite;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease;
  will-change: transform;
}

.group:hover .homenest-logo-badge {
  border-color: rgba(37, 99, 235, 0.9) !important;
  box-shadow: 0 6px 22px rgba(29, 78, 216, 0.55) !important;
  transform: translateY(-1.5px);
}

.group:hover .homenest-logo-img {
  animation-play-state: paused;
  transform: scale(1.15) rotate(-3deg);
  filter: drop-shadow(0 4px 12px rgba(37, 99, 235, 0.7));
}

.group:active .homenest-logo-badge {
  transform: scale(0.95);
}

/* ==========================================================
   Бейджі на картках товарів (каталог та блок «Дивіться також»)
   Виключає накладання мітки товару та відсотка знижки на смартфонах
   ========================================================== */
.product-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  pointer-events: none;
  z-index: 10;
}

@media (min-width: 640px) {
  .product-badges {
    top: 12px;
    left: 12px;
    right: 12px;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }
}

.badge-tag {
  display: inline-flex;
  align-items: center;
  background-color: rgba(14, 24, 48, 0.92) !important;
  color: #FFFFFF !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  padding: 3px 8.5px;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  white-space: nowrap;
  max-width: 100%;
}

.badge-discount {
  display: inline-flex;
  align-items: center;
  background-color: #2563EB !important;
  color: #FFFFFF !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  padding: 3px 8px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.45);
  white-space: nowrap;
}

@media (min-width: 640px) {
  .badge-tag {
    font-size: 12px;
    padding: 5px 11px;
  }
  .badge-discount {
    font-size: 13px;
    padding: 5px 10px;
    margin-left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-pulse, .fire-glow::before, .stock-bar, .homenest-logo-badge, .homenest-logo-img { animation: none !important; }
}