/* ════════════════════════════════════════════════════════════
   FESTEO — ТЕМА ФРОНТА · festeo-home.css
   Единый источник визуала. Подключён последним в styles.blade.php.
   ────────────────────────────────────────────────────────────
   ЭТАЛОН СТИЛЯ (к нему стремимся на ВСЕХ страницах):
   • Палитра: коралл #F2664A · золото #F8B62D · крем #FFF9F3 ·
     текст #2E2620 · приглушённый #8C7A6D · success #2E9E6B.
     БЕЗ синего / navy / фиолетового (отменены, D-037).
   • Шрифт Onest. Цена — тёмная, НЕ красная, НЕ «звоните».
   • Золото — ТОЛЬКО на конверсии (бронь / «Выбрать»). Коралл — акценты/ховеры.
   • Кнопки мягкие, скруглённые. Карточки — мягкая тень + ховер-подъём.
   • Тёплая доступность, НЕ премиум-холод (сегмент средний/низкий).
   ────────────────────────────────────────────────────────────
   ПРИНЦИП (D-036): рескин донорских классов; разметку, роуты,
   модалки (#makeBooking), @foreach — НЕ трогаем.
   Палитра в html:root ниже = одна крутилка перекраски всего сайта (D-035).
   ════════════════════════════════════════════════════════════ */

/* --- 1. ПАЛИТРА -------------------------------------------------
   html:root специфичнее инлайнового :root в layout (которое грузится
   позже) → побеждает по специфичности, навязывает тёплую тему.
   Донор всё считает от --color-primary/secondary → перекрашивается само. */
html:root{
  --color-primary:#F2664A;            /* тёплый коралл (было navy) */
  --color-secondary:#F8B62D;          /* солнечное золото */
  --color-primary-rgb:242,102,74;
  --color-secondary-rgb:248,182,45;   /* донор оставил тут розовый — чиним */
  --color-dark:#2E2620;               /* тёплый «почти чёрный» вместо холодного #121212 */
  --color-dark-rgb:46,38,32;
  --border-color:#F1E6DA;             /* тёплая граница */
  --radius-md:14px; --radius-lg:18px; /* мягче скругления */
}

/* тёплый кремовый фон страницы */
body{ background:#FFF9F3; }

/* --- 2. КНОПКИ: мягкие, скруглённые ---------------------------- */
.btn{ border-radius:11px; letter-spacing:0; }
.btn-lg{ border-radius:14px; }
.btn-md,.btn-sm{ border-radius:11px; }
.btn-primary{ box-shadow:0 8px 20px -8px rgba(242,102,74,.45); }
.btn-primary:hover{ box-shadow:0 12px 26px -8px rgba(242,102,74,.55); }

/* кнопка брони «Book Now» (.bookNowBtn) → золотая «собери», тёмный текст.
   Хук data-bs-target="#makeBooking" не трогаем — меняем только вид. */
.bookNowBtn.btn-outline-2{
  background:#F8B62D; color:#3E2B10; border-color:#F8B62D; font-weight:600;
  box-shadow:0 6px 16px -6px rgba(248,182,45,.5);
}
.bookNowBtn.btn-outline-2:hover{ background:#EFA313; color:#3E2B10; transform:translateY(-2px); }

/* --- 3. КАРТОЧКА УСЛУГИ (.product-default) — рескин на все копии -- */
.product-default{
  border-color:#F1E6DA !important; border-radius:16px;
  box-shadow:0 1px 3px rgba(120,70,40,.06); transition:transform .15s, box-shadow .15s;
}
.product-default:hover{ transform:translateY(-4px); box-shadow:0 14px 30px -10px rgba(120,70,40,.16); }
.product-default .tag{
  display:inline-block; background:#FFEDE5; color:#D8472F; font-weight:600;
  padding:3px 10px; border-radius:999px; line-height:1.6;
}
.product-default .product-price .new-price{ color:#2E2620; font-weight:700; }  /* цена тёмная, не красная */
.product-default .product-img,
.product-default .product-img a{ border-radius:14px; overflow:hidden; }
.product-default:hover .product-img img{ transform:scale(1.05); }              /* мягкий зум фото на ховере */

/* --- 4. КАТЕГОРИИ: мягкие плитки + пастель вместо «радуги» ------
   Цвет иконок донор задаёт инлайн-<style> из БД (background_color).
   Инлайн идёт позже → перебиваем точечно через !important.
   ЧИСТЫЙ путь на будущее (Фаза 2): поменять background_color 5 категорий
   в БД и снять эти !important. */
.category-area.category-1 .card{ border-radius:18px; box-shadow:0 1px 3px rgba(120,70,40,.06); transition:transform .15s, box-shadow .15s, border-color .15s; }
.category-area.category-1 .card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px -10px rgba(120,70,40,.16); border-color:#F2664A; }
.category-area.category-1 .card-icon{ border-radius:15px; }
.category-area.category-1 .swiper-slide .card-icon.icon-bg1{ background:#FFE8D8 !important; color:#E8643D !important; box-shadow:none !important; }
.category-area.category-1 .swiper-slide .card-icon.icon-bg2{ background:#DEF3E7 !important; color:#2E9E6B !important; box-shadow:none !important; }
.category-area.category-1 .swiper-slide .card-icon.icon-bg3{ background:#FCEEC8 !important; color:#D99812 !important; box-shadow:none !important; }
.category-area.category-1 .swiper-slide .card-icon.icon-bg4{ background:#FBE0E6 !important; color:#DC5A77 !important; box-shadow:none !important; }
.category-area.category-1 .swiper-slide .card-icon.icon-bg5{ background:#FFE2DA !important; color:#F2664A !important; box-shadow:none !important; }
.category-area.category-1 .swiper-slide .card:hover .card-title{ color:#F2664A !important; }

/* --- 5. HERO --------------------------------------------------- */
.hero-banner.hero-banner-1{ background:#FFF9F3; }
.hero-banner .banner-content .title{ color:#2E2620; letter-spacing:-.5px; }
.hero-banner .banner-content .text{ color:#8C7A6D; }
.hero-banner .form-wrapper{ border-radius:16px; box-shadow:0 12px 30px -12px rgba(120,70,40,.18); }

/* --- 6. «КАК РАБОТАЕТ» (works-area) — синяя → тёплая -----------
   Синий прячется в 3 местах:
   (а) фон секции — картинка через data-bg-image (инлайн от JS) → гасим !important;
   (б) карточки — инлайн-градиент из БД work_processes.background_color
       + ХАРДКОД второго стопа #021B79 в blade → перекрываем целиком !important;
   (в) заголовок секции color-white (под тёмный фон) → делаем тёмным.
   Текст ВНУТРИ карточек оставляем белым — карточки цветные, он читается. */
.works-area.works-1{ background-image:none !important; background-color:#FBF1E8 !important; }
.works-area .content-title .title{ color:#2E2620 !important; }
.works-area .content-title p{ color:#8C7A6D !important; }
.works-area.works-1 .swiper-slide .card[class*="card-bg"]{
  background-color:#F2664A !important;
  background-image:linear-gradient(-35deg,#F8B62D 0%,#F2664A 100%) !important;
}
.works-area.works-1 .card{ border-radius:18px; }

/* CTA-баннер (action-banner): тёмная фон-картинка → тёплый крем, текст тёмный */
.action-banner .wrapper{
  border-radius:20px; border:1px solid #F1E6DA;
  background-image:radial-gradient(120% 150% at 50% -20%, rgba(248,182,45,.20), transparent 55%) !important;
  background-color:#FBF1E8 !important;
}
.action-banner .content-title .title{ color:#2E2620 !important; }
.action-banner .content-title p{ color:#8C7A6D !important; }

/* --- 7. СЕКЦИИ / ЗАГОЛОВКИ ------------------------------------- */
.section-title .title span{ color:#F2664A; }

/* --- 8. ТЕСТИМОНИАЛЫ ------------------------------------------- */
/* звёзды отзывов — это PNG (rate-star.png), CSS-цветом не берутся;
   перекраска = замена картинки, отдельная мелочь. Красим карточку. */
.testimonial-area .slider-item{ border-radius:16px; }
.testimonial-area .slider-item .text{ border-inline-start:4px solid var(--color-primary); padding-inline-start:18px; }
/* скрыть донорскую СИНЮЮ картинку отзывов (против D-037), вернём тёплой через админку */
.testimonial-area .parallax-img{ display:none; }
.testimonial-area .fluid-left{ max-width:none; }   /* если ломается ширина — текст на всю */

/* --- 9. ФУТЕР -------------------------------------------------- */
/* footer = bg-primary-light = коралл 5% (тёплый, читаемый) — оставляем светлым.
   Espresso-вариант сделаем отдельным шагом, если решишь. */
.footer-area .info-list a:hover,
.footer-area .footer-links a:hover{ color:#F2664A; }

/* --- 10. МЕЛОЧИ ------------------------------------------------ */
::selection{ background:rgba(242,102,74,.18); }
a{ transition:color .15s; }

/* --- 11. СЕЛЕКТОР ГОРОДА В ШАПКЕ (мультигород D-040) ----------- */
.festeo-city-select{
  border:1px solid var(--festeo-border,#EFE6DB); border-radius:9px; background:#fff;
  font-family:inherit; font-size:14px; color:#2E2620; padding:7px 28px 7px 12px; cursor:pointer;
  max-width:170px; outline:none;
}
.festeo-city-select:hover{ border-color:#F2664A; }

/* --- 12. ПОЛОСА ДОВЕРИЯ ПОД ШАПКОЙ ---------------------------- */
.festeo-trust-bar{ background:#FFEDE5; border-top:1px solid #F1E6DA; }
.festeo-trust-bar .container{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 28px; padding:9px 16px; }
.festeo-trust-bar span{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:500; color:#3E2B10; }
.festeo-trust-bar i{ color:#F2664A; font-size:14px; }
@media(max-width:767px){ .festeo-trust-bar span{ font-size:12px; } .festeo-trust-bar .container{ gap:6px 16px; } }

/* --- 16. ФИКС НАЕЗДА: на ≤1199 донор зажимает .header-area{height:60px},
   полосы вытекают → JS getHeaderHeight даёт 60 → page-title наезжает.
   height:auto → box = реальная высота шапки → донорский JS-offset верный (D-046/breadcrumb) --- */
@media (max-width:1199px){
  .header-area{ height:auto !important; }
  .header-area.is-sticky{ height:auto !important; }
}

/* --- 15. РЯД ПОИСКА ПОД НАВБАРОМ (Sima/Flowwow, D-046) -------- */
.festeo-search-bar{ background:#fff; border-top:1px solid #F1E6DA; padding:12px 0; }
.festeo-search-bar .container{ display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; }
.festeo-search-form{ display:flex; align-items:center; width:100%; max-width:600px; flex:1 1 360px; border:2px solid #F2664A; border-radius:14px; overflow:hidden; background:#fff; }
/* город — лёгкий вид (пин + текст, без рамки/коробки, как Авито) */
.festeo-search-bar .festeo-city-form{ display:flex; align-items:center; gap:4px; }
.festeo-search-bar .festeo-city-ico{ color:#F2664A; font-size:15px; }
.festeo-search-bar .festeo-city-select{
  border:none !important; background:transparent !important; box-shadow:none !important;
  font:inherit; font-size:15px; font-weight:600; color:#2E2620;
  padding:6px 0; cursor:pointer; outline:none; width:auto; max-width:170px;
  field-sizing:content;   /* select подстраивается под ВЫБРАННЫЙ пункт (стрелка вплотную), а не под самый длинный; откат — ширина по длинному пункту */
}
.festeo-search-bar .festeo-city-select:hover{ color:#D8472F; }
@media(max-width:767px){
  .festeo-search-bar .container{ flex-direction:column; align-items:stretch; }
  .festeo-search-bar .festeo-city-select{ max-width:none; width:100%; }
  .festeo-search-form{ flex:0 0 auto; max-width:none; width:100%; }   /* в column flex-basis 360px стал бы высотой — сбрасываем */
  .festeo-search-bar .festeo-city-form{ order:-1; }                   /* город СВЕРХУ на мобиле (выбрать город → искать), хотя на десктопе он справа */
}

/* --- CTA «Собрать праздник» в навбаре (D-046 п.3; золото только на конверсии D-015; заглушка → /services по D-045) --- */
.festeo-cta{ display:inline-flex; align-items:center; background:#F8B62D; color:#3E2B10; font-weight:600; font-size:14px; padding:9px 18px; border-radius:11px; text-decoration:none; white-space:nowrap; transition:.13s; }
.festeo-cta:hover{ background:#EFA313; color:#3E2B10; }
/* крупная hero-версия золотой кнопки (на месте убранной формы поиска, D-049) */
.festeo-cta-hero{ display:inline-flex; align-items:center; background:#F8B62D; color:#3E2B10; font-weight:700; font-size:18px; padding:16px 34px; border-radius:14px; text-decoration:none; transition:.13s; }
.festeo-cta-hero:hover{ background:#EFA313; color:#3E2B10; }
/* в бургере (клон .more-option в .mobile-menu) три кнопки [CTA][Клиент][Артист] не влезают в ряд (nowrap+center) → перенос + влево, чтобы CTA не обрезался */
.mobile-menu .more-option{ flex-wrap:wrap !important; justify-content:flex-start !important; gap:8px; }
.festeo-search-form .festeo-search-ico{ display:flex; align-items:center; padding:0 6px 0 16px; color:#F2664A; }
.festeo-search-form input{ flex:1; border:none; outline:none; font:inherit; font-size:15px; padding:12px 12px; background:transparent; min-width:0; }
.festeo-search-form button{ border:none; background:#F2664A; color:#fff; font-weight:600; font-size:15px; padding:12px 26px; cursor:pointer; white-space:nowrap; }
.festeo-search-form button:hover{ background:#D8472F; }
@media(max-width:767px){
  .festeo-search-bar{ padding:9px 0; }
  .festeo-search-form{ max-width:none; }
  .festeo-search-form button{ padding:12px 18px; }
  .festeo-search-form input{ font-size:14px; }
}

/* --- 14. КОМПАКТНЫЙ ЛОГОТИП (D-046) — уменьшаем ОТОБРАЖЕНИЕ, файл не трогаем --- */
.header-area .navbar-brand img,
.header-area .main-responsive-nav .logo img { max-height: 36px; width: auto; }

/* --- 13. ПОЛОСА КАТЕГОРИЙ ПОД НАВБАРОМ (живая, D-046/D-048) ---- */
.festeo-cat-bar{ background:#fff; border-top:1px solid #F1E6DA; }
.festeo-cat-bar .container{ display:flex; gap:6px 22px; justify-content:center; flex-wrap:wrap; padding:10px 16px; }
.festeo-cat-link{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:#2E2620; text-decoration:none; padding:4px 6px; border-radius:8px; transition:.13s; white-space:nowrap; }
.festeo-cat-link i{ color:#F2664A; font-size:15px; }
.festeo-cat-link:hover{ color:#D8472F; }
.festeo-cat-link:hover i{ color:#D8472F; }
@media(max-width:767px){
  .festeo-cat-bar .container{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; gap:18px; -webkit-overflow-scrolling:touch; }
  .festeo-cat-link span{ font-size:13px; }
}