/* === Lightweight UI overrides (non-breaking) === */
:root{
  --bg0: 248 250 252; /* near-slate-50 */
  --bg1: 236 253 245; /* teal-50-ish */
  --bg2: 240 249 255; /* sky-50-ish */
  --card: 255 255 255;
  --card-border: 0 0 0;
}
html.dark{
  --bg0: 6 8 12;
  --bg1: 7 18 16;
  --bg2: 7 12 22;
  --card: 13 15 18;
  --card-border: 255 255 255;
}

/* Soft background: CSS gradients immediately, optional noise later (async). */
body{
  background-color: rgb(var(--bg0));
  overflow-x: hidden;
}
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1000px 500px at 15% 10%, rgba(var(--bg1),0.70), transparent 65%),
    radial-gradient(900px 500px at 85% 15%, rgba(var(--bg2),0.60), transparent 60%),
    radial-gradient(1100px 700px at 50% 85%, rgba(0,0,0,0.03), transparent 60%);
  filter: saturate(1.05);
}
html.dark body::before{
  background:
    radial-gradient(1000px 500px at 15% 10%, rgba(var(--bg1),0.25), transparent 65%),
    radial-gradient(900px 500px at 85% 15%, rgba(var(--bg2),0.20), transparent 60%),
    radial-gradient(1100px 700px at 50% 85%, rgba(255,255,255,0.04), transparent 60%);
}
html.noise-ready body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../images/noise.webp");
  background-repeat: repeat;
  opacity: 0.05;
  mix-blend-mode: overlay;
}
html.dark.noise-ready body::after{ opacity: 0.07; }

/* === Category tiles (marketplace style) === */
/*
  Responsive grid for category cards:
  - phones:   1 column
  - tablets:  2 columns
  - desktop:  3 columns (no 4-col layout)
*/
#what-we-buy .grid{
  align-items: stretch;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 640px){
  #what-we-buy .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  #what-we-buy .grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.category-card{
  position: relative;
  /* Two-column grid inside each card: text never overlaps the image */
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(96px, 34%, 160px);
  column-gap: 12px;
  align-items: center;
  padding: 14px 14px 14px 16px;
  min-height: 108px;
  border-radius: 18px;
  /* Pure white inside cards (light mode) */
  background: #fff;
  border: 1px solid rgba(var(--card-border), 0.08);
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
html.dark .category-card{
  background: rgba(var(--card), 0.75);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 14px 32px rgba(0,0,0,0.35);
}
.category-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.12);
}
html.dark .category-card:hover{
  box-shadow: 0 22px 55px rgba(0,0,0,0.55);
  border-color: rgba(255,255,255,0.12);
}

/* Kill old "banner overlay" look */
.category-card-overlay{ display: none !important; }

.category-card-content{
  grid-column: 1;
  min-width: 0;
}
.category-card-title{
  margin: 0 0 6px 0;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.category-card-description{
  margin: 0;
  font-size: 12.5px;
  line-height: 1.35;
  opacity: .78;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Image on the right, noticeable & consistent */
.category-card-image-wrapper{
  grid-column: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}
.category-card-image{
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
  /* keep the “right aligned” look without intruding into text column */
  transform: translateX(10px) translateY(2px) scale(1.05);
  transform-origin: 100% 50%;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.18));
  opacity: 1;
}

/* Make tiles breathe on tiny screens */
@media (max-width: 420px){
  .category-card{ padding: 12px 12px 12px 14px; min-height: 104px; }
  .category-card{ grid-template-columns: minmax(0, 1fr) clamp(88px, 36%, 140px); }
  .category-card-title{ font-size: 14px; }
}

/* === How it works: keep the green line behind (and not visible through) the number blocks === */
#how-it-works .glass-panel{
  /* the line is behind (z-0), but "glass" transparency makes it visible through the cards */
  background: rgb(var(--card)) !important;
}
html.dark #how-it-works .glass-panel{
  background: rgb(var(--card)) !important;
}

/* === Mobile sticky CTA bar === */
.mobile-cta-bar{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(0,0,0,0.08);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
  transition: transform .18s ease, opacity .18s ease;
}
html.dark .mobile-cta-bar{
  background: rgba(15,18,22,0.72);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 22px 55px rgba(0,0,0,0.55);
}
.mobile-cta-btn{
  flex: 1 1 0;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  user-select: none;
}

/* === Telegram username: prefix @ aligned like the ₽ suffix in the price field ===
   - Keep visual convenience (@ inside the input)
   - Ensure input text never overlaps the prefix (even if Tailwind utility order changes)
*/
input#telegram,
input[name="telegram"]{
  padding-left: 2.5rem !important; /* equals Tailwind pl-10 / pr-10 spacing */
}
.mobile-cta-primary{
  background: rgba(16,185,129,1);
  color: white;
}
.mobile-cta-secondary{
  background: rgba(0,0,0,0.06);
  color: inherit;
}
html.dark .mobile-cta-secondary{ background: rgba(255,255,255,0.10); }

.cta-hidden .mobile-cta-bar{
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 768px){
  .mobile-cta-bar{ display: none; }
}

/* Ensure content not hidden by sticky bar */
@media (max-width: 767px){
  body{ padding-bottom: 92px; }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  .category-card, .mobile-cta-bar{ transition: none !important; }
  .category-card:hover{ transform: none; }
}

/* Slightly better long-text readability */
#seo .prose, #seo .max-w-4xl, #seo .max-w-5xl{
  max-width: 65ch;
}

/* === Valuation form: force a clean white panel (no translucency) === */
#valuation{ position: relative; }

#valuation .glass-panel{
  position: relative;
  z-index: 5;
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Dark theme: keep the form readable (similar to other cards on the site).
   Previously we forced a white panel, which makes light text unreadable in dark mode.
*/
html.dark #valuation .glass-panel{
  background: rgba(var(--card), 0.82) !important;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 22px 55px rgba(0,0,0,0.55);
}

/* Inputs/Select trigger are transparent by default — make them sit on solid white */
#valuation .glass-panel input,
#valuation .glass-panel textarea,
#valuation .glass-panel button.bg-transparent,
#valuation .glass-panel [role="combobox"].bg-transparent{
  background-color: #ffffff !important;
}

/* Dark theme input surfaces */
html.dark #valuation .glass-panel input,
html.dark #valuation .glass-panel textarea,
html.dark #valuation .glass-panel button.bg-transparent,
html.dark #valuation .glass-panel [role="combobox"].bg-transparent{
  background-color: rgba(var(--card), 0.96) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* Placeholder contrast: slightly dimmer so it doesn't look like a filled value */
#valuation .glass-panel input::placeholder,
#valuation .glass-panel textarea::placeholder{
  color: rgba(15, 23, 42, 0.40);
}
html.dark #valuation .glass-panel input::placeholder,
html.dark #valuation .glass-panel textarea::placeholder{
  color: rgba(255,255,255,0.45);
}

/* === Allow page scroll when Radix Select dropdown is open ===
   Radix (react-remove-scroll) locks scrolling by setting data-scroll-locked and overflow:hidden.
   For our use-case (brand select on small screens) we explicitly keep page scrolling enabled.
*/
html[data-scroll-locked],
body[data-scroll-locked]{
  overflow: auto !important;
  overscroll-behavior: auto !important;
  touch-action: auto !important;
}

/* === Cards: pure white inside (light mode) === */
html:not(.dark) #why-us .glass-panel,
html:not(.dark) #testimonials .glass-panel,
html:not(.dark) #faq .glass-panel{
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* === Mobile CTA bar: 3 buttons (main + 2 icon buttons) === */
.mobile-cta-bar .cta-icon-btn{
  flex: 0 0 56px !important;
  min-width: 56px !important;
  height: 48px !important;
  padding: 0 !important;
}

.mobile-cta-bar .cta-icon-btn svg{
  width: 22px !important;
  height: 22px !important;
}

/* === Form submit UX: show clear "sending" animation while the request is in-flight ===
   Best practice: immediate feedback (spinner + indeterminate progress bar),
   reduced-motion aware, and works across major browsers.
*/

/* Indeterminate top progress bar (toggled by overrides.js when /api/lead is sent) */
.lead-progress{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
}
.lead-progress.is-active{
  opacity: 1;
  transform: translateY(0);
}
.lead-progress::before{
  content: "";
  position: absolute;
  top: 0;
  left: -35%;
  height: 100%;
  width: 35%;
  background: rgba(16,185,129,1);
  border-radius: 999px;
  animation: lead-indeterminate 1.1s ease-in-out infinite;
}
@keyframes lead-indeterminate{
  0%{ left: -35%; width: 35%; }
  50%{ left: 35%; width: 45%; }
  100%{ left: 100%; width: 35%; }
}

/* Submit button spinner when disabled (the app sets disabled during sending). */
#valuation button[type="submit"][disabled]{
  cursor: progress;
  position: relative;
  padding-right: 3.0rem; /* room for spinner */
}

#valuation button[type="submit"][disabled]::after{
  content: "";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: -0.525rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: lead-spin .75s linear infinite;
  opacity: .95;
}

@keyframes lead-spin{
  to{ transform: rotate(360deg); }
}

/* Prevent double-submission feel: gently dim the form while sending (no layout change). */
html.lead-sending #valuation .glass-panel{
  transition: opacity .18s ease;
  opacity: .95;
}

/* Reduced motion: keep indicators static */
@media (prefers-reduced-motion: reduce){
  .lead-progress::before{ animation: none !important; left: 0; width: 100%; }
  #valuation button[type="submit"][disabled]::after{ animation: none !important; border-right-color: currentColor; opacity: .65; }
}

/* Telegram username: left prefix "@" (symmetrical to the price suffix "₽") */
.tg-input-wrap{ position: relative; display: block; }
.tg-input-prefix{
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: .7;
  pointer-events: none;
  line-height: 1;
  z-index: 2;
  display: block;
}
/* Ensure enough room for the prefix. Works for both light/dark themes. */
input.tg-input-decorated{ padding-left: 2.5rem !important; }