/* ===== DIM STUDIO — общий стиль под bases.dim-studio.ru ===== */

/* --- Переменные темы --- */
:root{
  --ds-bg: #1a1c20;          /* фон страницы */
  --ds-surface: #1e1f23;     /* панели/карточки */
  --ds-surface-2: #22262c;   /* поля ввода/hover */
  --ds-border: #333;
  --ds-text: #ccc;
  --ds-text-muted: #888;
  --ds-text-strong: #fff;
  --ds-accent: #0d6efd;      /* синий акцент */
  --ds-radius: 12px;
  --ds-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* --- Bootstrap overrides (тёмная палитра) --- */
*{
  --bs-body-bg: var(--ds-bg);
  --bs-body-color: var(--ds-text);
  --bs-border-color: var(--ds-border);

  --bs-card-bg: var(--ds-surface);
  --bs-card-border-color: var(--ds-border);

  --bs-list-group-bg: var(--ds-surface);
  --bs-list-group-color: var(--ds-text);
  --bs-list-group-border-color: var(--ds-border);
  --bs-list-group-action-hover-bg: var(--ds-surface-2);

  --bs-accordion-bg: var(--ds-surface);
  --bs-accordion-color: var(--ds-text);
  --bs-accordion-border-color: var(--ds-border);
  --bs-accordion-btn-bg: var(--ds-surface);
  --bs-accordion-btn-color: var(--ds-text);
  --bs-accordion-active-bg: rgba(45,109,246,.25);
  --bs-accordion-active-color: #fff;
  --bs-accordion-btn-focus-box-shadow: none;
}

/* --- Глобально тёмные поверхности --- */
.bg-white, .bg-light, .bg-body, .bg-body-tertiary,
.card, .section-box, .dropdown-menu, .modal-content,
.offcanvas, .toast, .table, .list-group-item, .accordion-item, .accordion-body {
  background: var(--ds-surface) !important;
  color: var(--ds-text) !important;
  border-color: var(--ds-border) !important;
}
.form-control, .form-select, .input-group-text{
  background: var(--ds-surface-2) !important;
  color:#fff !important;
  border-color: var(--ds-border) !important;
}
.form-control::placeholder{ color: rgba(255,255,255,.55) !important; }

h1, h2, h3, h4, h5 { color: var(--ds-text-strong) !important; }
p, li, .text-muted, .lead { color: var(--ds-text-muted) !important; }

a{ color: var(--ds-accent); }
a:hover{ color: #9bc2ff; }

/* --- Шапка и футер (как на bases) --- */
.navbar, header{
  background: #000 !important;        /* максимально тёмный фон */
  color: var(--ds-text) !important;
  border-bottom: 1px solid #222 !important;
  box-shadow: none !important;
}

.navbar .nav-link{ color:#fff !important; font-weight:500; }
.navbar .nav-link:hover{ color: var(--ds-accent) !important; }

footer{
  background:#111 !important;
  color:#888 !important;
  border-top:1px solid #222 !important;
}
footer a{ color: var(--ds-accent); }
footer a:hover{ text-decoration: underline; }

/* Toast */
#liveToast{ background:#198754 !important; color:#fff !important; }

/* --- HERO (полосы ЧЕРЕЗ CSS, без картинок) --- */
/* Визуально как на bases: диагональные полосы поверх тёмного фона. */
:root{
  --stripe-a: rgba(255,255,255,.05);
  --stripe-b: rgba(255,255,255,.02);

  /* высота фикс-шапки для корректной прокрутки к якорям */
  --sticky-h: 96px;
}
.ds-hero{
  min-height: 70vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;

  /* Слои: сначала полосы (градиент), затем сплошной цвет. */
  background:
    repeating-linear-gradient(
      -45deg,
      var(--stripe-a) 0,
      var(--stripe-a) 14px,
      var(--stripe-b) 14px,
      var(--stripe-b) 28px
    ),
    var(--ds-bg) !important;

  /* плавный переход вместо жёсткой линии */
  position: relative;
  border-bottom: 0;
}
.ds-hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:80px;                      /* увеличить до 100-120px, если нужно мягче */
  pointer-events:none;
  background: linear-gradient(to bottom,
    rgba(26,28,32,0) 0%,
    rgba(26,28,32,1) 100%);
}

.ds-hero .container{ padding-top:120px; padding-bottom:120px; }
.ds-hero__logo{ max-width:170px; height:auto; opacity:.95; }
.ds-hero__title{
  font-weight:700;
  font-size: clamp(32px, 5vw, 56px);
  margin:0 0 12px;
  color: var(--ds-text-strong);
}
.ds-hero__lead{
  max-width:700px; margin:15px auto;
  color: var(--ds-text-muted);
  font-size: clamp(16px, 2.2vw, 20px);
  line-height:1.6;
}
.accent{ color: var(--ds-text-strong); text-shadow:0 1px 2px rgba(0,0,0,.35); }

/* Подзаголовок под героем */
.ds-subtitle{
  font-size:clamp(28px, 4vw, 40px);
  font-weight:700;
  margin:40px 0 10px;
  color: var(--ds-text-strong);
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  text-align:center;
}

/* --- Карточки/списки/аккордеон --- */
.ds-panel{
  background: var(--ds-surface);
  border:1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding:25px;
  color: var(--ds-text-strong);
  transition: transform .2s ease;
}
.ds-panel:hover{ transform: translateY(-5px); }
.ds-panel h5{ color: var(--ds-accent); font-weight:600; }

.ds-list .list-group-item{
  background: var(--ds-surface);
  border-color: var(--ds-border);
  color: var(--ds-text);
}

.ds-acc .accordion-item{
  background: var(--ds-surface);
  border:1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  overflow:hidden;
}
.ds-acc .accordion-button{
  background: var(--ds-surface);
  color: var(--ds-text);
}
.ds-acc .accordion-button:not(.collapsed){
  background: rgba(45,109,246,.25);
  color: var(--ds-text-strong);
}
.ds-acc .accordion-button::after{ filter: invert(1) opacity(.85); }

/* --- Кнопки --- */
.btn-primary{
  background: var(--ds-accent); border-color: var(--ds-accent);
  border-radius: 10px; font-weight:600;
}
.btn-primary:hover{ filter:brightness(1.08); }

/* --- Разное --- */
.section{ margin:40px 0; }
.card-plan{ transition: transform .2s, box-shadow .2s; }
.card-plan:hover{ transform: translateY(-2px); box-shadow: var(--ds-shadow); }
.ri-check-line, .ri-meteor-fill, .ri-typhoon-fill{ color: var(--ds-accent); }
.accordion-button{ box-shadow:none !important; }
.accordion-button::after{ filter: invert(1) opacity(.85); }
.bg-transparent{ background:transparent !important; }

/* Корректная прокрутка к секциям под фикс-шапкой */
#program, #plans { scroll-margin-top: var(--sticky-h); }

/* --- Адаптив (в духе bases responsive.css) --- */
@media (max-width: 991px){
  .ds-hero .container{ padding-top:80px; padding-bottom:80px; }
  .ds-panel{ margin-bottom:30px; }
}
@media (max-width: 767px){
  .ds-hero .container{ padding-top:60px; padding-bottom:60px; }
  .ds-hero__title{ font-size: clamp(26px, 7vw, 36px); }
  .ds-hero__lead{ font-size: 1rem; }
}
@media (max-width: 480px){
  .btn-lg{ font-size:1rem; padding:10px 20px; }
}

/* Полосатый фон для секции тарифов — ТОЧНО как у hero */
.ds-stripes {
  background:
    repeating-linear-gradient(
      -45deg,
      var(--stripe-a) 0,
      var(--stripe-a) 14px,
      var(--stripe-b) 14px,
      var(--stripe-b) 28px
    ),
    var(--ds-bg) !important;
  color: #fff;
}

.ds-stripes .ds-subtitle {
  color: #fff;
}

/* Немного приподнимем карточки для контраста */
.ds-stripes .card-plan.ds-panel {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

/* Текст в карточке */
.ds-stripes .card-plan .card-title,
.ds-stripes .card-plan h4,
.ds-stripes .card-plan li {
  color: #fff;
}

.ds-stripes .form-check-label {
  color: #e9ecef;
}

/* Гладкая прокрутка */
html { scroll-behavior: smooth; }
/* ==== Карточки в стиле первого скрина ==== */
.ds-feature {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding: 24px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ds-feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--ds-shadow);
}
.ds-feature__icon {
  width: 64px; height: 64px;
  border-radius: 12px;
  background: var(--ds-surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; line-height: 1;
  flex: 0 0 64px;
}
.ds-feature__title {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--ds-text-strong);
}
.ds-feature__text {
  margin: 0;
  color: var(--ds-text);
}
@media (max-width: 575px){
  .ds-feature { padding: 18px; gap: 14px; }
  .ds-feature__icon { width: 52px; height: 52px; font-size: 24px; border-radius: 10px; }
}
/* Синий кант по краю при наведении */
.ds-feature{
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ds-feature:hover{
  border-color: var(--ds-accent);                   /* подкрашиваем рамку */
  box-shadow:
    0 0 0 2px rgba(13,110,253,.55),                 /* синий кант вокруг */
    var(--ds-shadow);                               /* твоя тень */
}
.ds-feature:focus-within{ 
  border-color: var(--ds-accent);
  box-shadow: 0 0 0 2px rgba(13,110,253,.55), var(--ds-shadow);
}

/* Звёзды в отзывах */
.text-warning i {
  font-size: 1.2rem;
  margin: 0 1px;
}
/* Отзывы */
.review-card {
  height: 220px; /* фиксированная высота (подгони под контент) */
  display: flex;
}

.review-stars {
  font-size: 1.2rem;
  color: gold;           /* жёлтые звёзды */
  margin-bottom: 10px;
  letter-spacing: 2px;   /* расстояние между ★ */
}

.review-text {
  font-size: 0.95rem;
  margin-bottom: 10px;
}