/* ============================================================
   ЧИСТЫЕ СЕЗОНЫ — Единая дизайн-система (design tokens + компоненты)
   Решения: синий #2563EB, зелёный CTA #16A34A, белый+голубые секции,
   фирменный градиент, шрифт Nunito, заголовки 700, радиус 12px, мягкие тени,
   сбалансированная плотность, кнопки с иконкой+тенью, чипы над заголовками.
   ============================================================ */
:root{
  /* цвета */
  --cs-blue:#2563EB; --cs-blue-dark:#1D4ED8; --cs-blue-600:#2563EB;
  --cs-blue-light:#DBEAFE; --cs-blue-50:#EFF6FF;
  --cs-green:#16A34A; --cs-green-dark:#15803D; --cs-green-light:#DCFCE7;
  --cs-bg:#FFFFFF; --cs-bg-soft:#F0F7FF;
  --cs-text:#1E293B; --cs-text-muted:#64748B; --cs-heading:#0F172A;
  --cs-border:#E2E8F0; --cs-border-soft:#EEF2F7;
  /* фирменный градиент */
  --cs-gradient:linear-gradient(135deg,#2563EB 0%,#1D4ED8 55%,#16A34A 140%);
  --cs-gradient-soft:linear-gradient(135deg,#EFF6FF 0%,#F0F7FF 45%,#ECFDF5 100%);
  /* форма */
  --cs-radius:12px; --cs-radius-lg:16px; --cs-radius-xl:20px; --cs-radius-pill:999px;
  /* тени */
  --cs-shadow-sm:0 2px 10px rgba(37,99,235,.08);
  --cs-shadow:0 6px 18px rgba(37,99,235,.10);
  --cs-shadow-hover:0 14px 36px rgba(37,99,235,.16);
  --cs-shadow-cta:0 6px 18px rgba(22,163,74,.28);
  /* шкала отступов */
  --cs-sp-1:6px; --cs-sp-2:12px; --cs-sp-3:20px; --cs-sp-4:32px; --cs-sp-5:56px; --cs-sp-6:80px;
  /* шрифт */
  --cs-font:'Nunito','Segoe UI',system-ui,-apple-system,sans-serif;
}

/* ---------- база ---------- */
body{font-family:var(--cs-font);color:var(--cs-text);}
h1,h2,h3,h4,h5,h6,.fw-bold{font-family:var(--cs-font);font-weight:700;color:var(--cs-heading);}
a{color:var(--cs-blue);}

/* ---------- чип над заголовком секции ---------- */
.cs-chip{display:inline-block;background:var(--cs-blue-light);color:var(--cs-blue);
  font-size:.8rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  border-radius:var(--cs-radius-pill);padding:5px 16px;margin-bottom:12px;}
.cs-chip--green{background:var(--cs-green-light);color:var(--cs-green-dark);}

/* ---------- кнопки ---------- */
.cs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--cs-font);font-weight:800;font-size:1rem;line-height:1.2;
  border:none;border-radius:var(--cs-radius);padding:13px 26px;cursor:pointer;
  text-decoration:none;transition:background .18s,transform .12s,box-shadow .18s;}
.cs-btn:hover{transform:translateY(-1px);}
.cs-btn--cta{background:var(--cs-green);color:#fff;box-shadow:var(--cs-shadow-cta);}
.cs-btn--cta:hover{background:var(--cs-green-dark);color:#fff;}
.cs-btn--blue{background:var(--cs-blue);color:#fff;box-shadow:var(--cs-shadow);}
.cs-btn--blue:hover{background:var(--cs-blue-dark);color:#fff;}
.cs-btn--ghost{background:#fff;color:var(--cs-blue);border:2px solid var(--cs-blue-light);}
.cs-btn--ghost:hover{border-color:var(--cs-blue);color:var(--cs-blue-dark);}
.cs-btn--lg{font-size:1.1rem;padding:16px 34px;}

/* ---------- карточки ---------- */
.cs-card{background:#fff;border:2px solid var(--cs-border-soft);border-radius:var(--cs-radius-xl);
  padding:var(--cs-sp-3);transition:transform .2s,box-shadow .2s,border-color .2s;}
.cs-card:hover{transform:translateY(-4px);box-shadow:var(--cs-shadow-hover);border-color:var(--cs-blue);}

/* ---------- секции ---------- */
.cs-section{padding:var(--cs-sp-6) 0;}
.cs-section--soft{background:var(--cs-bg-soft);}
.cs-section-head{text-align:center;margin-bottom:var(--cs-sp-4);}
.cs-section-head h2{font-size:1.9rem;font-weight:800;color:var(--cs-heading);margin:.25rem 0 .5rem;}
.cs-section-head p{color:var(--cs-text-muted);margin:0;}

/* ---------- утилиты ---------- */
.cs-gradient{background:var(--cs-gradient);}
.cs-gradient-soft{background:var(--cs-gradient-soft);}
.cs-shadow{box-shadow:var(--cs-shadow);}
.cs-rounded{border-radius:var(--cs-radius);}

/* ---------- выравнивание существующих классов под систему ---------- */
.cs-section-badge{border-radius:var(--cs-radius-pill);}
.cs-btn-cta{box-shadow:var(--cs-shadow-cta);}

/* ============================================================
   Выравнивание главной/лендинга под систему (scoped: только лендинг)
   ============================================================ */
/* единый радиус и фирменный синий для primary-кнопок */
.btn.btn-primary{background:var(--cs-blue);border-color:var(--cs-blue);border-radius:var(--cs-radius);font-weight:700;}
.btn.btn-primary:hover{background:var(--cs-blue-dark);border-color:var(--cs-blue-dark);}
.btn.btn-outline-primary{border-radius:var(--cs-radius);font-weight:700;}
/* секции «как работает»/«что входит» — единый мягкий фон токена */
.cs-how-section,.cs-checklist-section{background:var(--cs-bg-soft);}
/* единый вид чипа-бейджа секций */
.cs-section-badge{background:var(--cs-blue-light);color:var(--cs-blue);border-radius:var(--cs-radius-pill);font-weight:800;}
/* зелёные CTA — единая тень */
.cs-btn-cta,.cs-mobile-sticky-btn{box-shadow:var(--cs-shadow-cta);}

/* ---------- Страницы услуги/категории ---------- */
/* главный CTA заказа («Продолжить») — зелёный по системе */
.btn.continue-button{background:var(--cs-green);border-color:var(--cs-green);box-shadow:var(--cs-shadow-cta);}
.btn.continue-button:hover{background:var(--cs-green-dark);border-color:var(--cs-green-dark);}
/* SEO-текст категории — мягкий фон токена вместо серого */
.seo-text-block.bg-light{background:var(--cs-bg-soft)!important;border-radius:var(--cs-radius-lg)!important;}

/* ============================================================
   Словарь стиля КАБИНЕТА — закреплён как переиспользуемые токены
   (источник: my-profile.blade.php). Доступно на любой странице сайта.
   ============================================================ */

/* плитка быстрого действия + пастельная иконка-чип */
.cs-tile{display:block;background:#fff;border:2px solid var(--cs-border-soft);
  border-radius:var(--cs-radius-xl);padding:24px;height:100%;text-decoration:none;
  transition:transform .2s,box-shadow .2s,border-color .2s;}
.cs-tile:hover{transform:translateY(-4px);box-shadow:var(--cs-shadow-hover);border-color:var(--cs-blue);}
.cs-tile h5{font-weight:700;color:var(--cs-text);margin-bottom:4px;font-size:1.05rem;}
.cs-tile p{color:var(--cs-text-muted);font-size:.86rem;margin:0;}
.cs-icon-chip{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.cs-icon-chip.cs-ic-blue{background:var(--cs-blue-50);color:var(--cs-blue);}
.cs-icon-chip.cs-ic-green{background:#ECFDF5;color:var(--cs-green);}
.cs-icon-chip.cs-ic-amber{background:#FEF9E7;color:#D97706;}
.cs-icon-chip.cs-ic-indigo{background:#EEF2FF;color:#4F46E5;}

/* мягкая голубая карточка-блок */
.cs-card-soft{background:var(--cs-gradient-soft);border:2px solid var(--cs-blue-light);
  border-radius:var(--cs-radius-xl);padding:28px;}

/* тёмная карточка (завлечение в приложение) */
.cs-card-dark{background:linear-gradient(135deg,#0F172A 0%,#1E293B 100%);color:#fff;
  border-radius:var(--cs-radius-lg);padding:40px;overflow:hidden;position:relative;}
.cs-card-dark h2,.cs-card-dark h3,.cs-card-dark h4{color:#fff;font-weight:800;}
.cs-app-btn{display:inline-flex;align-items:center;gap:10px;background:var(--cs-green);color:#fff;
  font-weight:700;border-radius:var(--cs-radius-lg);padding:14px 30px;text-decoration:none;
  box-shadow:var(--cs-shadow-cta);transition:background .2s,transform .12s;}
.cs-app-btn:hover{background:var(--cs-green-dark);color:#fff;transform:translateY(-1px);}

/* поля форм в стиле кабинета */
.cs-field label{display:block;font-size:.85rem;color:#475569;font-weight:600;margin-bottom:6px;}
.cs-field input[type=text],.cs-field input[type=email],.cs-field input[type=tel],
.cs-field input[type=password],.cs-field input[type=number],.cs-field textarea,.cs-field select,
.cs-input{width:100%;border:2px solid var(--cs-border);border-radius:var(--cs-radius);
  padding:10px 14px;color:var(--cs-text);background:#fff;transition:border-color .2s;}
.cs-field input:focus,.cs-field textarea:focus,.cs-field select:focus,.cs-input:focus{outline:none;border-color:var(--cs-blue);}

/* hero-градиент кабинета (приветствие/шапки разделов) */
.cs-hero-gradient{background:var(--cs-gradient);color:#fff;padding:48px 0;}
.cs-hero-gradient h1,.cs-hero-gradient h2{color:#fff;font-weight:800;}

/* hover-«фишка» кабинета для JS-карточек услуг (.service-box-card)
   и категорий (.circle-clip-effect): подъём + синяя рамка + мягкая тень.
   Базовый вид: белая карточка с рамкой токена вместо плоского bg-light. */
.service-box-card,.circle-clip-effect{
  background:#fff !important;border:2px solid var(--cs-border-soft);
  border-radius:var(--cs-radius-xl) !important;
  transition:transform .2s,box-shadow .2s,border-color .2s;}
.service-box-card:hover,.circle-clip-effect:hover{
  transform:translateY(-4px);box-shadow:var(--cs-shadow-hover);border-color:var(--cs-blue);}