/* Clarox design system for vfs.center — глобальный оверрайд поверх tailwind.css. 2026-07-31 */
:root{
  --cx-bg:#FBFBFD; --cx-bg2:#F5F6FA; --cx-ink:#16183C; --cx-muted:#5A6079; --cx-soft:#9AA0B8;
  --cx-accent:#2E2EA8; --cx-accent-h:#232387; --cx-g1:#4F46E5; --cx-g2:#8B5CF6;
  --cx-dark:#0D0F2E; --cx-line:#E7E9F2;
}
html{scroll-behavior:smooth}
body{background:var(--cx-bg)!important;color:var(--cx-ink)!important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important}
h1,h2,h3,h4{letter-spacing:-.02em;color:var(--cx-ink)}
h1{font-weight:800!important}
h2{font-weight:800!important}

/* Перекраска фирменных утилит старой темы */
.bg-brand-dark{background-color:var(--cx-dark)!important}
.bg-brand-blue{background-color:var(--cx-accent)!important}
.bg-brand-orange{background-color:var(--cx-accent)!important}
.bg-brand-orange\/90{background-color:var(--cx-accent)!important}
.text-brand-blue{color:var(--cx-accent)!important}
.text-brand-orange{color:var(--cx-g1)!important}
.text-brand-dark{color:var(--cx-ink)!important}
.border-brand-blue{border-color:var(--cx-accent)!important}
.bg-brand-gray,.bg-gray-50{background-color:var(--cx-bg2)!important}
.bg-blue-50,.bg-blue-50\/60{background-color:#EEF0FB!important}
.text-gray-600,.text-gray-700{color:var(--cx-muted)!important}
.hover\:bg-orange-600:hover,.hover\:bg-blue-700:hover{background-color:var(--cx-accent-h)!important}
.hover\:text-brand-orange:hover{color:var(--cx-g1)!important}

/* Геометрия и тени в духе Clarox */
.rounded-xl{border-radius:14px!important}
.rounded-2xl{border-radius:20px!important}
.shadow-2xl{box-shadow:0 40px 90px rgba(13,15,46,.16)!important}
.shadow-lg{box-shadow:0 18px 44px rgba(13,15,46,.10)!important}
.shadow-md,.shadow-sm{box-shadow:0 8px 24px rgba(13,15,46,.07)!important}
.pulse-anim{animation:none!important}

/* Компоненты Clarox */
.cx-grad{background:linear-gradient(92deg,var(--cx-g1),var(--cx-g2));-webkit-background-clip:text;background-clip:text;color:transparent}
.cx-badge{display:inline-flex;align-items:center;gap:8px;background:#EEF0FB;color:var(--cx-accent);
  border:1px solid #DDE1F5;border-radius:999px;padding:6px 14px;font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase}
.cx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--cx-accent);
  color:#fff!important;border-radius:999px;padding:13px 28px;font-weight:600;font-size:15px;
  transition:background .2s,transform .15s;box-shadow:0 10px 26px rgba(46,46,168,.28);border:none;cursor:pointer}
.cx-btn:hover{background:var(--cx-accent-h)}
.cx-btn:active{transform:translateY(1px)}
.cx-btn-light{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--cx-ink)!important;
  border-radius:999px;padding:13px 28px;font-weight:700;font-size:15px;transition:.2s;border:none;cursor:pointer}
.cx-btn-light:hover{background:#EDEFF8}
.cx-link{color:var(--cx-accent);font-weight:600;text-decoration:none}
.cx-link:hover{color:var(--cx-accent-h)}
.cx-card{background:#fff;border:1px solid var(--cx-line);border-radius:20px;box-shadow:0 18px 44px rgba(13,15,46,.07)}

/* Читаемость на тёмных секциях (индиго) */
.bg-brand-dark h2,.bg-brand-dark h3,.bg-brand-blue h2{color:#fff}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* Bitrix24-форма под тему Clarox */
.b24-form .b24-form-btn,.b24-form button[type=submit]{background:var(--cx-accent)!important;border-color:var(--cx-accent)!important;border-radius:999px!important}
.b24-form .b24-form-btn:hover{background:var(--cx-accent-h)!important}
.b24-form .b24-form-header-title{color:var(--cx-ink)!important}

/* Выпадающее меню стран (Clarox-стиль) */
.cx-dd{position:relative}
.cx-dd-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;font:inherit;color:var(--cx-muted);padding:0}
.cx-dd-btn:hover{color:var(--cx-ink)}
.cx-dd-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:12px;display:none;z-index:60}
.cx-dd:hover .cx-dd-menu,.cx-dd:focus-within .cx-dd-menu{display:block}
.cx-dd-card{background:#fff;border:1px solid var(--cx-line);border-radius:16px;box-shadow:0 24px 60px rgba(13,15,46,.14);padding:12px;display:grid;grid-template-columns:repeat(2,minmax(160px,1fr));gap:2px 12px;max-height:62vh;overflow:auto;min-width:360px}
.cx-dd-card a{display:block;padding:7px 10px;border-radius:8px;font-size:13.5px;color:var(--cx-muted);white-space:nowrap;text-decoration:none}
.cx-dd-card a:hover{background:var(--cx-bg2);color:var(--cx-ink)}
.cx-dd-all{grid-column:1/-1;border-top:1px solid var(--cx-line);margin-top:6px;padding-top:8px!important;color:var(--cx-accent)!important;font-weight:600}

/* Hero старых шаблонов (страны): белый текст рассчитан на тёмное фото — на светлом фоне делаем чернильным */
.hero-bg .text-white{color:var(--cx-ink)!important}
.hero-bg .text-gray-200,.hero-bg .text-gray-300,.hero-bg .text-blue-100{color:var(--cx-muted)!important}
.hero-bg .text-white h1,.hero-bg .text-white h2,.hero-bg .text-white p,.hero-bg .text-white li,.hero-bg .text-white span{color:inherit}
/* но на цветных плашках внутри hero текст остаётся белым */
.hero-bg [class*="bg-brand"],.hero-bg [class*="bg-blue-"],.hero-bg [class*="bg-indigo"]{color:#fff!important}
.hero-bg [class*="bg-brand"] *{color:#fff!important}
.hero-bg .fa-check,.hero-bg .fa-circle-check{color:var(--cx-g1)!important}

/* Тёмные плашки в hero (бейдж «официальное оформление») — текст белым */
.hero-bg [class*="bg-gray-6"],.hero-bg [class*="bg-gray-7"],.hero-bg [class*="bg-gray-8"],.hero-bg [class*="bg-gray-9"],
.hero-bg [class*="bg-slate-6"],.hero-bg [class*="bg-slate-7"],.hero-bg [class*="bg-slate-8"],.hero-bg [class*="bg-slate-9"],
.hero-bg [class*="bg-zinc-7"],.hero-bg [class*="bg-neutral-7"],.hero-bg [class*="bg-brand-dark"]{color:#fff!important}
.hero-bg [class*="bg-gray-8"] *,.hero-bg [class*="bg-slate-8"] *,.hero-bg [class*="bg-brand-dark"] *{color:#fff!important}