/* ═══════════════════════════════════════════════════════════
   Glass + surface system 2026 (brand tokens only)
═══════════════════════════════════════════════════════════ */

html {
  overflow-x: clip;
  max-width: 100%;
}

body {
  background: var(--page-bg) !important;
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
  color: var(--text-primary);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Soft page atmosphere */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 10% -10%, color-mix(in srgb, var(--color-brand-green) 8%, transparent), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 20%, color-mix(in srgb, var(--color-brand-green) 5%, transparent), transparent 50%),
    linear-gradient(180deg, var(--color-brand-white) 0%, var(--color-brand-light) 45%, var(--color-brand-light) 100%);
  opacity: 1;
}

body > * {
  position: relative;
  z-index: 1;
}

/* Subtle film grain (CSS-only, light) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.03;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
}

@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
}

/* ── Glass surfaces ── */
.glass-surface,
.truck-card,
.fleet-card,
.b2b-tile,
.waste-product-card,
.price-card-mobile,
.price-section-wrap,
.hero-badge,
.map-static-card,
.stage-panel,
.desktop-waste-stage__menu,
.desktop-waste-stage__info,
#about .bg-white.rounded-3xl,
#eco .bg-white.rounded-3xl,
.about-stat-item {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border-dark) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-radius: var(--radius-card) !important;
}

/* График: glass задаёт hero-fix-2026 (не --glass-bg — иначе «белая карточка») */
.hero-section .hero-schedule {
  /* visual from hero-fix-2026.css */
}

/* Sticky header glass */
header.site-header,
header.border-b,
#site-header {
  background: color-mix(in srgb, var(--color-brand-white) 78%, transparent) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
}

/* Modals / drawer */
#orderModal > div,
#cooperationModal > div,
#howto-modal > div,
[id$="-modal"] > div.bg-white,
[id$="-modal"] > div[class*="bg-white"],
.mobile-drawer-panel,
.bottom-sheet,
.modal-sheet {
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border-dark) !important;
  box-shadow: var(--shadow-lg) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
}

.mobile-bottom-bar,
.md\:hidden.fixed.bottom-0 {
  background: color-mix(in srgb, var(--color-brand-white) 86%, transparent) !important;
  border-top: 1px solid var(--border-subtle) !important;
  box-shadow: 0 -8px 28px color-mix(in srgb, var(--color-brand-black) 8%, transparent) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
}

/* Legacy slate/emerald utility overrides → brand */
[class*="bg-slate-50"],
[class*="bg-slate-100"],
.bg-gray-50 {
  background: var(--color-brand-light) !important;
  border-color: var(--border-subtle) !important;
}

.bg-emerald-50,
[class*="bg-[#EBFCEE]"] {
  background: var(--color-primary-soft) !important;
  border-color: color-mix(in srgb, var(--color-brand-green) 20%, transparent) !important;
}

/* Primary buttons glass-green */
button[class*="bg-[#00A651]"],
a[class*="bg-[#00A651]"],
a[class*="bg-[#16a34a]"],
button[class*="bg-[#16a34a]"],
[class*="bg-\[#00A651\]"],
[class*="bg-\[#16a34a\]"],
.desktop-waste-cta--order,
.btn-strip__item[class*="bg-[#00A651]"],
.btn-strip__item[class*="bg-[#16a34a]"],
.btn-strip__item[class*="bg-emerald"],
button[class*="bg-emerald-600"],
button[class*="bg-emerald-700"] {
  background: color-mix(in srgb, var(--color-brand-green) 90%, transparent) !important;
  color: var(--color-brand-white) !important;
  border: 1px solid color-mix(in srgb, var(--color-brand-white) 28%, transparent) !important;
  box-shadow: var(--shadow-btn) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
}

button[class*="bg-[#00A651]"]:hover,
a[class*="bg-[#00A651]"]:hover,
.desktop-waste-cta--order:hover {
  background: var(--color-primary-dark) !important;
  box-shadow: var(--shadow-btn-hover) !important;
}

/* Light / secondary glass buttons */
button[class*="bg-white"],
button[class*="bg-slate-100"],
.desktop-waste-cta--self,
.waste-tab,
.waste-subchip,
.hero-badge,
.icon-btn,
.desktop-waste-stage__nav,
.address-stage__nav-btn {
  background: var(--glass-bg-soft) !important;
  color: var(--color-brand-black) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
}

.waste-tab--active,
.waste-subchip--active {
  color: #141414 !important;
  -webkit-text-fill-color: #141414 !important;
  font-weight: 800 !important;
  border-color: color-mix(in srgb, var(--color-brand-green) 30%, transparent) !important;
  background-color: color-mix(in srgb, var(--color-brand-green) 14%, transparent) !important;
  box-shadow: var(--shadow-sm) !important;
}

.waste-tab:hover:not(.waste-tab--active),
.waste-subchip:hover:not(.waste-subchip--active) {
  color: #141414 !important;
  -webkit-text-fill-color: #141414 !important;
  font-weight: 800 !important;
  background-color: color-mix(in srgb, var(--color-brand-green) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--color-brand-green) 22%, transparent) !important;
}

/* Text color utility remaps */
[class*="text-[#00A651]"],
[class*="text-emerald"],
.text-emerald-600,
.text-emerald-500,
.text-green-600 {
  color: var(--color-brand-green) !important;
}

[class*="text-[#E31E23]"],
.text-red-600 {
  color: var(--color-brand-red) !important;
}

[class*="text-slate-"],
.text-gray-600,
.text-gray-500 {
  color: var(--text-secondary) !important;
}

footer.bg-slate-900 {
  background: var(--color-brand-black) !important;
}

/* Inputs */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  background: var(--color-brand-white) !important;
  border: 1px solid var(--border-soft) !important;
  box-shadow: none !important;
  color: var(--color-brand-black) !important;
  font-family: var(--font-sans) !important;
}

input:focus,
textarea:focus {
  border-color: var(--color-brand-green) !important;
  box-shadow: var(--focus-ring) !important;
  outline: none !important;
}

/* Cards hover lift */
.truck-card:hover,
.fleet-card:hover,
.b2b-tile:hover,
.price-card-mobile:hover,
.glass-surface:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover) !important;
}

/* Strip buttons */
.btn-strip {
  border-radius: var(--radius-btn);
  overflow: hidden;
}

.btn-strip__item {
  border-radius: 0 !important;
}

/* Cookie */
.cookie-consent {
  background: var(--glass-bg-strong) !important;
  border-top: 1px solid var(--border-subtle) !important;
  box-shadow: 0 -8px 32px color-mix(in srgb, var(--color-brand-black) 8%, transparent) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
}

.cookie-consent__btn--accept {
  background: var(--color-brand-green) !important;
  color: var(--color-brand-white) !important;
  box-shadow: var(--shadow-btn) !important;
}

.cookie-consent__btn--necessary {
  background: var(--color-brand-light) !important;
  color: var(--color-brand-black) !important;
}

/* Waste product / tabs mobile */
.waste-types-mobile {
  width: 100%;
  max-width: 100%;
}

.waste-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
}

.waste-tab,
.waste-subchip {
  min-height: var(--touch-min);
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
}

.waste-subchips-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
}

.section-main-title {
  font-family: var(--font-sans) !important;
  font-size: var(--heading-size) !important;
  font-weight: 600 !important;
  color: var(--color-brand-black) !important;
  -webkit-text-fill-color: var(--color-brand-black) !important;
  line-height: var(--heading-line) !important;
  letter-spacing: -0.02em !important;
}

h2.section-title,
.section-title {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  color: var(--color-brand-black) !important;
}

.section-title--light {
  color: var(--color-brand-white) !important;
  -webkit-text-fill-color: var(--color-brand-white) !important;
}