/* Напрям «Бронювання вікон та вітрин» на всьому сайті: меню «Послуги» (sections/header.blade.php)
   і блоки-анонси на головній (#second_service) та в «Послугах» (#second-block). Підключено в app.blade.php після style.css. */

/* ---------- меню «Послуги»: випадний список ---------- */
.menu-services__sub{display:flex;flex-direction:column}
.top__menu .menu-services{position:relative}
/* «Послуги» — не посилання: кнопка на десктопі, підпис у мобільному меню; вигляд — як у сусідніх пунктів */
.menu-services__label{display:inline;padding:0;border:0;background:none;color:#fff;font:inherit;text-transform:inherit;letter-spacing:inherit;cursor:default}
.top__menu .menu-services:hover .menu-services__label,.top__menu .menu-services:focus-within .menu-services__label{color:var(--yellow-color,#ffc600);transition:.3s}
.top__menu .menu-services>.menu-services__label::after{content:"";display:inline-block;width:6px;height:6px;margin:0 0 4px 9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
/* прозорі 17px зверху — місток до списку, щоб він не зникав, поки курсор іде з пункту вниз */
.top__menu .menu-services__sub{position:absolute;left:-20px;top:100%;min-width:300px;padding:17px 0 10px;background:linear-gradient(transparent 17px,rgba(0,0,0,.85) 17px);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s}
.top__menu .menu-services:hover .menu-services__sub,.top__menu .menu-services:focus-within .menu-services__sub{opacity:1;visibility:visible;transform:none}
.top__menu .menu-services__sub a{padding:9px 20px;font-size:16px;line-height:22px;text-transform:none;white-space:nowrap}
.top__mobile .menu-services__sub{align-items:center;gap:12px;margin-top:14px}
.top__mobile .menu-services__sub a{font-size:18px;line-height:24px;text-transform:none;opacity:.85}

/* ---------- блок-анонс на головній ---------- */
#second_service .text-btn_block .desc{margin:20px 0 40px}
@media (max-width:992px){#second_service .text-btn_block .desc{margin:12px 0 24px}}

/* ---------- «Послуги»: слайдер першого екрана (frontend/commercial-transport.blade.php, www/js/frontend/services.js) ---------- */
/* слайди лежать в одній клітинці сітки й перемикаються прозорістю; #video_bg першого слайда — z-index:1 */
.sv-stack{position:relative;z-index:3;display:grid;align-items:center;width:100%}
.sv-stack>.sv-slide{grid-area:1/1;transition:opacity .8s,visibility .8s}
.sv-stack>.sv-slide:not(.is-active){opacity:0;visibility:hidden}
.sv-hero .header_block__desc{max-width:1024px}
/* у самому відеоролику внизу по центру мигає стрілка «вниз» і перетинається з перемикачами слайдера;
   збільшуємо відео від верхнього краю, щоб низ кадру зі стрілкою вийшов за межі екрана.
   Якщо ролик замінять на версію без стрілки — правило можна прибрати */
.sv-hero #video_bg>video{transform:scale(1.15);transform-origin:center top}
/* фото вертикальне (1016×1184): праворуч на всю висоту без розтягування, ліворуч — темне тло під текст */
.sv-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background:#0d1114 right center/auto 100% no-repeat;opacity:0;visibility:hidden;transition:opacity .8s,visibility .8s}
.sv-hero.is-alt .sv-bg{opacity:1;visibility:visible}
.sv-bg__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,#0d1114 35%,rgba(13,17,20,.6) 60%,rgba(13,17,20,0) 85%)}
.sv-dots{position:absolute;left:50%;bottom:40px;z-index:4;display:flex;gap:14px;transform:translateX(-50%)}
.sv-dots button{position:relative;width:44px;height:4px;padding:0;border:0;background:rgba(255,255,255,.45);cursor:pointer;transition:background .3s}
.sv-dots button::before{content:"";position:absolute;left:0;right:0;top:-14px;bottom:-14px}
.sv-dots button:hover{background:rgba(255,255,255,.8)}
.sv-dots button.is-active{background:#ffc600}
/* стрілки — ті самі білі іконки, що в галереї сайту; на десктопі по боках, на телефоні — внизу обабіч смужок */
.sv-arrow{position:absolute;top:50%;z-index:4;width:48px;height:48px;margin-top:-24px;padding:0;border:0;background:rgba(0,0,0,.5) center/auto 45% no-repeat;cursor:pointer;transition:background-color .3s}
.sv-arrow:hover,.sv-arrow:focus-visible{background-color:rgba(255,198,0,.9)}
.sv-arrow--prev{left:30px;background-image:url(../../images/frontend/arrow_left_white.svg)}
.sv-arrow--next{right:30px;background-image:url(../../images/frontend/arrow_right_white.svg)}
@media (max-width:992px){
  .sv-bg{background-size:cover;background-position:65% center}
  .sv-bg__overlay{background:rgba(13,17,20,.6)}
  .sv-dots{bottom:26px}
  .sv-arrow{top:auto;bottom:8px;margin-top:0;width:40px;height:40px}
  .sv-arrow--prev{left:calc(50% - 115px)}
  .sv-arrow--next{right:calc(50% - 115px)}
}
@media (prefers-reduced-motion:reduce){.sv-stack>.sv-slide,.sv-bg{transition:none}}