/* ============================================================
   TZ Benefits Cards Redesign — 18.07.2026
   Редизайн карточек преимуществ (section.features-2) по всему сайту.
   Селекторы с html body — чтобы перебить существующие !important-стили.
   Подключение: <link rel="stylesheet" href="/css/fcc-benefits.css?v=1">

   ПОПРАВКА К ТЗ (согласована с заказчиком):
   Разметка cars (car.blade.php) нормализована до <p class="title">…</p><p>…</p>,
   как и hotels/concierge/meet-and-assist. Поэтому отдельные доп. селекторы
   типографики для cars/meet-and-assist НЕ понадобились: класс .title теперь
   покрывает все варианты разметки единообразно.
   ============================================================ */

html body section.features-2 .box {
  background: #faf8f4 !important;
  border: 1px solid #e4dfd3 !important;
  border-radius: 12px !important;
  padding: 34px 26px !important;
  text-align: center !important;
  box-shadow: none !important;
  margin-bottom: 20px !important;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease !important;
}
html body section.features-2 .box:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(26, 26, 26, .10) !important;
  border-color: #d9cdb2 !important;
}

/* Убираем серые/белые вложенные подложки — карточка одна */
html body section.features-2 .box .icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: block !important;
}
html body section.features-2 .box .icon .info {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  text-align: center !important;
}

/* Иконка в тонком золотом кольце; при наведении не меняется */
html body section.features-2 .box .icon .image {
  width: 64px !important;
  height: 64px !important;
  border: 1px solid #a8863f !important;
  border-radius: 50% !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 18px !important;
  overflow: hidden;
}
html body section.features-2 .box .icon .image img {
  max-width: 30px !important;
  width: 30px !important;
  height: auto !important;
}
html body section.features-2 .box:hover .icon .image {
  background: transparent !important;
  border-color: #a8863f !important;
}

/* Типографика */
html body section.features-2 .box .info .title {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  color: #1a1a1a !important;
  text-transform: none !important;
  margin: 0 0 10px !important;
}
html body section.features-2 .box .info p:not(.title) {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: #6b6b6b !important;
  margin: 0 !important;
}

/* Золотая линия; растягивается при наведении на карточку */
html body section.features-2 .box .info::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  background: #a8863f;
  margin: 16px auto 0;
  transition: width .4s ease;
}
html body section.features-2 .box:hover .info::after { width: 64px; }

html body section.features-2 .box .space { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html body section.features-2 .box,
  html body section.features-2 .box .info::after { transition: none !important; }
}

/* ============================================================
   Главная страница: те же карточки преимуществ вне section.features-2
   (обёртка .w-page-content). Селектор :has ограничивает правило
   только карточками с иконкой — остальные .box не затрагиваются.
   ============================================================ */
html body .w-page-content .box:has(> .icon) {
  background: #faf8f4 !important;
  border: 1px solid #e4dfd3 !important;
  border-radius: 12px !important;
  padding: 34px 26px !important;
  text-align: center !important;
  box-shadow: none !important;
  margin-bottom: 20px !important;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease !important;
}
html body .w-page-content .box:has(> .icon):hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(26, 26, 26, .10) !important;
  border-color: #d9cdb2 !important;
}
html body .w-page-content .box:has(> .icon) .icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: block !important;
}
html body .w-page-content .box:has(> .icon) .icon .info {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  text-align: center !important;
}
html body .w-page-content .box:has(> .icon) .icon .image {
  width: 64px !important;
  height: 64px !important;
  border: 1px solid #a8863f !important;
  border-radius: 50% !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 18px !important;
  overflow: hidden;
}
html body .w-page-content .box:has(> .icon) .icon .image img {
  max-width: 30px !important;
  width: 30px !important;
  height: auto !important;
}
html body .w-page-content .box:has(> .icon):hover .icon .image {
  background: transparent !important;
  border-color: #a8863f !important;
}
html body .w-page-content .box:has(> .icon) .info .title {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  color: #1a1a1a !important;
  text-transform: none !important;
  margin: 0 0 10px !important;
}
html body .w-page-content .box:has(> .icon) .info p:not(.title) {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: #6b6b6b !important;
  margin: 0 !important;
}
html body .w-page-content .box:has(> .icon) .info::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  background: #a8863f;
  margin: 16px auto 0;
  transition: width .4s ease;
}
html body .w-page-content .box:has(> .icon):hover .info::after { width: 64px; }
html body .w-page-content .box:has(> .icon) .space { display: none !important; }