/* ===================== GLOBAL ===================== */
* { box-sizing:border-box; margin:0; padding:0; }
body{
  font-family:'Inter',sans-serif;
  background:#fff; color:#222; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.container{ width:90%; max-width:1100px; margin:0 auto; }

/* переменная «крови» вправо для изображений во всю ширину */
:root{ --bleed: calc((100vw - min(1100px, 90vw)) / 2); }

/* ===================== HEADER ===================== */
.header{ margin-top:0; }
.header-bar{ display:flex; align-items:center; gap:28px; padding:8px 0; }
.site-logo{ height:140px; width:auto; margin-left:-12px; }
.top-nav{ margin-left:auto; display:flex; gap:16px; align-items:center; }

/* Кнопки в шапке */
.button{
  background:#3B82F6; color:#fff; text-decoration:none; font-weight:700;
  padding:14px 22px; border-radius:16px; display:inline-block;
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover{ background:#2563EB; box-shadow:0 8px 22px rgba(37,99,235,.25); }
.button:active{ transform:translateY(1px); }
.nav-btn{ font-size:1rem; padding:8px 14px; border-radius:12px; }
.button-large{ padding:16px 24px; border-radius:16px; }

/* Хедер: заголовок слева, кнопка справа (на внутренних страницах) */
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:nowrap;
}
.header-inner h1{ margin:0; }
/* buttons group in header (used on Pricing page) */
.header-buttons{
  margin-left:auto;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* ===================== CONTENT BASE ===================== */
.section{ margin-top:28px; opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.section.show{ opacity:1; transform:translateY(0); }
h2{ font-size:1.6rem; font-weight:700; margin-bottom:10px; }

/* Универсальный список с точками */
.list{ list-style:none; margin-top:10px; }
.list li{ padding-left:18px; position:relative; margin:8px 0; }
.list li::before{ content:"•"; position:absolute; left:0; top:0; color:#3B82F6; font-weight:700; }

.muted{ color:#667085; margin-top:10px; }

/* NOTICE — спокойный стиль на всех страницах */
.notice{
  background:#fff;             /* белый фон, без синего */
  color:#111827;               /* обычный тёмный текст */
  border:1px solid #e5e7eb;    /* тонкая серая рамка */
  border-radius:10px;
  padding:12px 14px;
  margin:12px 0 6px;
}

/* внутри notice подписи тоже обычные, не синие */
.notice label,
.notice span{
  color:#111827;
  font-weight:600;
}


/* FOOTER CONTACTS */
.footer-contacts{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:20px; margin-top:36px; }
.footer-left,.footer-right{ flex:1; min-width:250px; }
.footer-left p,.footer-right p{ margin:5px 0; }
.contact-link{ color:#3B82F6; text-decoration:none; }
.contact-link:hover{ text-decoration:underline; }


/* OUR WORK links (YouTube / Facebook) */
.our-work-links{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  align-items:center;
  margin-top:10px;
}
.our-work-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-weight:600;
  font-size:1.05rem;
  color:#111827;
}
.our-work-link:hover{ text-decoration:none; }
.our-work-icon{
  width:36px;
  height:36px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:700;
  color:#fff;
}
.our-work-icon--yt{ background:#ef4444; }
.our-work-icon--fb{ background:#2563eb; }
.our-work-link .our-work-text{
  border-bottom:1px solid transparent;
}
.our-work-link:hover .our-work-text{
  border-bottom-color:currentColor;
}

/* Универсальная карточка */
.card{
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  padding:14px 16px; box-shadow:0 2px 6px rgba(0,0,0,.06);
}

/* ===================== HERO ===================== */
.hero{ border-radius:24px; overflow:hidden; aspect-ratio:16/9; max-height:72vh; }
.hero picture,.hero img{ display:block; width:100%; height:100%; }
.hero img{ object-fit:cover; }

.hero--split{
  display:grid; grid-template-columns:3fr 2fr; align-items:center;
  min-height:420px; max-height:72vh; background:#fff;
}
.hero__text{ padding:clamp(16px,4vw,48px); }
.hero__title{ font-size:clamp(26px,4.2vw,42px); line-height:1.15; margin-bottom:8px; }
.hero__subtitle{ font-size:clamp(14px,2.2vw,18px); color:#334155; margin-bottom:14px; max-width:60ch; }
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.button--ghost{ background:#fff; color:#111; border:1px solid #e5e7eb; }
.hero__meta{ font-size:14px; color:#667085; }
.hero__media{ position:relative; height:100%; }
.hero__media picture, .hero__media img{ display:block; width:100%; height:100%; object-fit:cover; }
.hero__fade{ position:absolute; inset:0 auto 0 0; width:64px; pointer-events:none; background:linear-gradient(90deg,rgba(0,0,0,.10),rgba(0,0,0,0)); }

/* ===================== ABOUT ===================== */
.about-split{ display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:24px; }
.about-text{ padding-right:8px; align-self:start; }
.about-media{
  aspect-ratio:16/9;
  width:100%;
  align-self:start;
  position:relative;
  margin-top:40px;
}
.about-media picture,.about-media img{ display:block; width:100%; height:100%; object-fit:cover; object-position:right top; border-radius:24px; }

/* ===================== SERVICES ===================== */
.services-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:flex-start;
  gap:32px;
}
.services-text{ align-self:flex-start; }
.services-car{ align-self:flex-start; }

/* Slider */
.services-slider{
  position:relative; aspect-ratio:4/3;
  width:calc(100% + var(--bleed)); margin-right:calc(-1 * var(--bleed));
  border-radius:24px; overflow:hidden; justify-self:end; align-self:start; background:#fff;
}
.services-slider .slide{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; visibility:hidden; transition:opacity .7s ease, visibility .7s ease; pointer-events:none;
}
.services-slider .slide.active{ opacity:1; visibility:visible; }

/* БЕЗ обрезки: картинка целиком в рамке 4:3 */
.services-slider .slide img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  object-position:center;
}

/* убираем доп. зум и сдвиги */
.services-slider .slide--tech img,
.services-slider .slide--sofa img,
.services-slider .slide--dog  img{
  object-position:center;
  transform:none;
}

/* Uncropped modifier (optional) */
.services-slider--uncropped{ aspect-ratio:auto; height:auto; background:transparent; }
.services-slider--uncropped .slide{ position:static; display:none; }
.services-slider--uncropped .slide.active{ display:block; }
.services-slider--uncropped .slide img{ width:100%; height:auto; display:block; }

/* ===================== BOOKING (форма) ===================== */

#bookingForm{
  max-width:1100px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  column-gap:16px;
  row-gap:10px;
}

/* Подписи блоков и крупные элементы – на всю ширину */
#bookingForm h2,
#bookingForm h3,
#bookingForm p,
#bookingForm textarea,
#bookingForm #photo-upload-section{
  grid-column:1 / -1;
}

#bookingForm label{
  display:block;
  font-weight:600;
  margin:0 0 2px;
  line-height:1.3;
}

#bookingForm input[type="text"],
#bookingForm input[type="email"],
#bookingForm input[type="tel"],
#bookingForm input[type="file"],
#bookingForm select,
#bookingForm textarea{
  display:block;
  width:100%;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
}

#photo-upload-section{
  margin:6px 0 10px;
}
#photo-upload-section #preview{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  border:1px solid #e5e7eb;
  padding:10px;
  border-radius:8px;
  background:#fafafa;
  min-height:80px;
}

#bookingForm .button{
  width:auto;
  align-self:start;
  grid-column:1 / -1; /* кнопка бронирования во всю ширину строки */
}




/* BOOKING: крупные карточки-пакеты с иконками */

.page-booking .notice{
  position: relative;
  padding: 16px;
  margin: 12px 0;
  border-radius: 16px;
  background: #F9FAFB;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    transform .08s ease;
}

/* строка с чекбоксом, иконкой и текстом в одну линию */
.page-booking .notice > label{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.35;
}

/* сам чекбокс делаем чуть крупнее */
.page-booking .notice > label input[type="checkbox"]{
  width: 18px;
  height: 18px;
}

/* убираем старую иконку на самом блоке */
.page-book content: "👶"; }
/* строка с чекбоксом и текстом */
.page-booking .notice > label{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.35;
}

/* сам чекбокс делаем чуть крупнее */
.page-booking .notice > label input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

/* круглая иконка слева */
.page-booking .notice::before{
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #e0edff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* разные эмодзи для первых трёх пакетов */
.page-booking .notice:nth-of-type(1)::before{ content: "🏠"; }
.page-booking .notice:nth-of-type(2)::before{ content: "🚗"; }
.page-booking .notice:nth-of-type(3)::before{ content: "👶"; }

/* подсветка выбранной карточки */
.page-booking .notice:has(input[type="checkbox"]:checked){
  background: #eef2ff;
  border-color: #3B82F6;
  box-shadow: 0 10px 24px rgba(37,99,235,.18);
  transform: translateY(-1px);
}

/* Booking: Items to clean + Address на отдельной строке, во всю ширину */
#bookingForm label[for="items"],
#bookingForm label[for="itemsToClean"],
#bookingForm label[for="ItemsToClean"],
#bookingForm label[for="address"],
#bookingForm label[for="Address"],
#bookingForm input#address,
#bookingForm input[name="address"]{
  grid-column:1 / -1;
}
/* ===================== ADD-ONS (общие стили) ===================== */
.addons-block{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  padding:16px 18px; margin:24px 0 16px;
}
.addons-block h3{ margin:0 0 8px; }
.addons-caption{ margin:8px 0 6px; color:#333; font-weight:600; }
.addons-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.addons-grid ul{ margin:0; padding-left:0; list-style:disc; list-style-position:inside; }
.addons-grid li{ margin:4px 0; line-height:1.35; }
.addons-block strong{ font-weight:inherit; }

/* ===================== PRICING (страница) ===================== */
#pricing.container{ max-width:1320px; padding-top:16px; }

/* верхняя плашка акции + подпись в одну линию */
#pricing .deal-badge{
  display:inline-block; background:#111; color:#fff; border-radius:12px;
  padding:8px 12px; font-weight:600; margin-right:10px; vertical-align:middle;
}
#pricing .lead{ display:inline; margin:0; color:#333; vertical-align:middle; }
@media (max-width:640px){ #pricing .lead{ display:block; margin-top:6px; } }

/* выбор размера: текст + кнопки слева */
#pricing .size-row{
  display:flex; align-items:center; justify-content:flex-start; gap:12px;
  margin:10px 0 12px; flex-wrap:nowrap;
}
#pricing .size-label{ white-space:nowrap; line-height:1.2; }
#pricing .pricing-toggle{
  display:inline-flex; gap:8px; margin:0; padding:6px;
  border-radius:10px; background:#eef2ff;
}
#pricing .pricing-toggle .tg{
  border:0; background:transparent; cursor:pointer;
  padding:6px 12px; border-radius:8px; font-weight:600;
}
#pricing .pricing-toggle .tg.active{ background:#3B82F6; color:#fff; }

/* сетка карточек */
#pricing .pricing-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(320px,1fr));
  gap:26px;
  margin-top:10px;
  margin-bottom:16px;
}

/* Car Interior cards: Standard + Pet-Home side by side */
#pricing .car-plans{
  display:grid;
  grid-template-columns:repeat(2,minmax(320px,1fr));
  gap:26px;
  margin-top:10px;
  margin-bottom:16px;
}

@media (max-width:1100px){
  #pricing .pricing-grid,
  #pricing .car-plans{
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  }
}

/* карточка */
#pricing .plan{
  background:#fff; border-radius:14px; box-shadow:0 2px 8px rgba(0,0,0,.08);
  padding:20px; position:relative; line-height:1.4;
  --plan-title-size: 18px;
}
#pricing .plan .badge{
  position:absolute; top:12px; right:12px; background:#10b981; color:#fff;
  font-size:12px; padding:4px 8px; border-radius:999px;
}
#pricing .plan h3{ margin:4px 0 0; font-size: var(--plan-title-size); }
#pricing .plan .sub{ color:#555; font-size:13px; margin:6px 0 8px; }
#pricing .plan .sub:empty{ display:none; }

/* цена: акцент на online, обычная — вторично */
#pricing .price{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin:6px 0 8px; line-height:1.2;
}
#pricing .price .online{
  order:0; font-size: var(--plan-title-size) !important; font-weight:800;
  background:#dcfce7; color:#065f46;
  border-radius:8px; padding:3px 8px;
}
#pricing .price .main{
  order:1; font-size:12px; font-weight:600; color:#64748b;
}

/* список фич */
#pricing .feat{ margin:8px 0 12px; padding-left:0; list-style:disc; list-style-position:inside; }
#pricing .feat li{ margin:4px 0; line-height:1.28; }
#pricing .feat li.head{ list-style:none; padding-left:0; margin-left:0; font-weight:700; }

/* кнопка */
#pricing .btn{
  display:inline-block; background:#3B82F6; color:#fff; text-decoration:none;
  padding:10px 14px; border-radius:10px; font-weight:600;
}
#pricing .btn:hover{ background:#2563EB; }

/* FAQ */
#pricing .faq details{
  border:1px solid #eee; border-radius:10px; padding:.6rem .8rem; margin:.5rem 0; background:#fff;
}
#pricing .faq summary{ cursor:pointer; font-weight:600; }
#pricing .muted{ color:#333; font-size:.95rem; margin:.6rem 0; }

/* ===================== PAGE-SPECIFIC TOP SPACING ===================== */
.page-booking .header,
.page-pricing .header,
.page-commercial .header{ margin-top:16px; }
.page-booking .header-inner,
.page-pricing .header-inner,
.page-commercial .header-inner{ padding:10px 0; }
@media (min-width:900px){
  .page-booking .header,
  .page-pricing .header,
  .page-commercial .header{ margin-top:22px; }
}
.page-booking main.container{ padding-top:6px; }

/* show sections on pricing page without scroll animation */
.page-pricing .section{
  opacity:1;
  transform:none;
}
.page-booking .section{
  opacity:1;
  transform:none;
}



/* ===================== RESPONSIVE ===================== */
@media (max-width:900px){
  .site-logo{ height:120px; }
  .hero--split{ grid-template-columns:1fr; max-height:70vh; }
  .hero__media{ order:-1; }
  .about-split{ grid-template-columns:1fr; }
  .about-media{ aspect-ratio:4/3; transform:none; width:100%; order:-1; }
}
@media (max-width:640px){
  .header-bar{ flex-direction:column; align-items:flex-start; gap:14px; }
  .top-nav{ margin-left:0; }
  .nav-btn{ width:100%; text-align:center; }
  .site-logo{ margin-left:0; }
  .hero{ aspect-ratio:4/5; max-height:70vh; }
}
@media (max-width:480px){
  #pricing .plan{ --plan-title-size:16px; }
  #pricing .price .main{ font-size:10px; }
}

/* ===================== POPUP (Booking) ===================== */
.popup{
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,.65);
  justify-content:center; align-items:center;
  padding:20px; z-index:9999;
}
.popup-content{
  background:#fff; width:min(560px,90vw);
  border-radius:12px; padding:16px 18px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.popup-content h3{ margin:0 0 6px; font-size:1.1rem; font-weight:700; }
.popup-content p{ margin:0 0 12px; color:#334155; line-height:1.45; }

#popupOkBtn{
  display:inline-block; cursor:pointer; border:0;
  background:#3B82F6; color:#fff;
  padding:8px 12px; border-radius:10px; font-weight:600;
}
.popup-content.info{   border-left:4px solid #3B82F6; }
.popup-content.success{border-left:4px solid #10b981; }
.popup-content.error{  border-left:4px solid #ef4444; }

/* ===================== WORKS ===================== */
.work-header-flex{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-top:32px;              /* отступ сверху */
}
.work-title{
  font-size:2.2rem;
  font-weight:700;
}
.back-button{
  padding:10px 25px;
  background:#2d7ff9;
  color:white;
  border-radius:12px;
  font-weight:600;
  text-decoration:none;
  font-size:18px;
  margin-top:6px;               /* отступ сверху для кнопки */
}
.work-gallery{
  margin-top:40px;
}
.work-item{
  display:flex;
  justify-content:space-between;
  gap:30px;
  margin-bottom:60px;
}
.work-item > div{
  flex:1;
}
.work-item img{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}
@media (max-width: 768px){
  .work-item{
    flex-direction:column;   /* Before над After */
    gap:16px;
  }
  .work-item h3{
    margin-bottom:6px;
  }
}
/* Мобильная раскладка для четырех кнопок в хедере */
@media (max-width: 768px){
  .header-bar{
    flex-direction:column;
    align-items:center;
    gap:16px;
  }

  .top-nav{
    margin-left:0;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
  }

  .nav-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-width:46%;        /* 2 кнопки в ряд */
    padding:12px 10px;
    line-height:1.1;
  }
}
/* MOBILE: в Services показываем все фото столбиком вместо слайдера */
@media (max-width: 900px){
  .services-slider{
    position:static;
    aspect-ratio:auto;
    height:auto;
    display:flex;
    flex-direction:column;
    gap:12px;
    width:100%;
    margin-right:0;
  }

  .services-slider .slide{
    position:static;
    width:100%;
    height:auto;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto;
  }

  .services-slider .slide img{
    width:100%;
    height:auto;
    object-fit:contain; /* картинка целиком, как и сейчас */
    display:block;
  }
}
/* BOOKING: убираем белую рамку-карточку вокруг формы,
   чтобы заголовок и Back to Home не "торчали" над ней */
.page-booking .card{
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}
/* BOOKING: убираем белую рамку-карточку вокруг формы,
   чтобы заголовок и Back to Home не "торчали" над ней */
.page-booking .card{
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}
/* BOOKING: сделать блоки пакетов компактнее */
.page-booking .notice{
  padding: 10px 12px;          /* было толще, делаем чуть меньше */
  margin: 10px 0;              /* меньше расстояние между блоками */
  border-radius: 10px;
}

/* заголовок внутри notice (первая строка с чекбоксом) */
.page-booking .notice > label{
  font-size: 0.95rem;
  margin-bottom: 6px;
}

/* две колонки (Размер квартиры / Пакет, Тип авто / Пакет)
   делаем чуть плотнее по вертикали */
.page-booking .notice div{
  margin-top: 4px;
}

/* подписи над селектами внутри этих блоков */
.page-booking .notice label{
  font-size: 0.9rem;
  margin-bottom: 2px;
}

/* сами селекты внутри блоков – по высоте поменьше */
.page-booking .notice select{
  padding-top: 6px;
  padding-bottom: 6px;
}

/* немного уменьшим вертикальные отступы у заголовка «Что ты хочешь почистить?» */
.page-booking h3{
  margin-top: 14px;
  margin-bottom: 8px;
}

/* на мобильном всё остаётся в одну колонку, но с меньшими отступами */
@media (max-width: 640px){
  .page-booking .notice{
    padding: 8px 10px;
    margin: 8px 0;
  }
}
/* BOOKING: компактные строки выбора пакетов */
.page-booking .notice{
  background:#fff;            /* белый фон */
  color:#111827;
  border:1px solid #e5e7eb;

  padding:6px 10px;           /* меньше высота блока */
  margin:4px 0;               /* меньше расстояние между строками */
  border-radius:10px;
}

/* строка с чекбоксом и текстом – по центру, без лишнего воздуха */
.page-booking .notice > label{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:0.95rem;
  line-height:1.2;
}

/* чекбокс чуть компактнее */
.page-booking .notice > label input[type="checkbox"]{
  width:16px;
  height:16px;
}


/* ===================== BOOKING: PACKAGE CARDS LAYOUT FIX ===================== */

/* отключаем старую иконку на всём блоке */
.page-booking .notice::before{
  content: none !important;
}

/* делаем заголовок-пакет одной строкой: чекбокс + иконка + текст */
.page-booking .notice > label{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.35;
}

/* чуть крупнее чекбокс */
.page-booking .notice > label input[type="checkbox"]{
  width: 18px;
  height: 18px;
}

/* круглая иконка слева от текста */
.page-booking .notice > label::before{
  content: "";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #e0edff;
  font-size: 18px;
}

/* разные эмодзи для первых трёх пакетов: квартира, салон, детское кресло */
.page-booking .notice:nth-of-type(1) > label::before{ content: "🏠"; }
.page-booking .notice:nth-of-type(2) > label::before{ content: "🚗"; }
.page-booking .notice:nth-of-type(3) > label::before{ content: "👶"; }

/* сами карточки делаем чуть просторнее — без большого отступа слева */
.page-booking .notice{
  padding: 16px;
  margin: 12px 0;
  border-radius: 16px;
  background: #F9FAFB;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    transform .08s ease;
}

/* ===================== BOOKING: WIDER LAYOUT FOR PACKAGE CARDS ===================== */
/* На странице букинга контейнер делаем чуть шире, чтобы три карточки занимали почти всю ширину окна */
.page-booking .container{
  max-width: 1240px;
  width: 95%;
}

/* ===================== BOOKING: MAKE FORM FULL-WIDTH INSIDE PAGE CONTAINER ===================== */
.page-booking #bookingForm{
  max-width: none;
  width: 100%;
}

/* ===================== BOOKING: KEEP PACKAGE TITLES ON A SINGLE LINE (DESKTOP) ===================== */
@media (min-width: 900px){
  .page-booking .notice > label{
    white-space: nowrap;
  }
}



/* Commercial page */
.page-commercial main.commercial-main {
  padding-top: 48px;
  padding-bottom: 64px;
}

.commercial-section {
  margin-bottom: 40px;
}

.commercial-section h2,
.commercial-section h3 {
  margin-bottom: 0.75rem;
}

.commercial-lead {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #4b5563;
  max-width: 720px;
}

.commercial-list {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
  line-height: 1.6;
}

.commercial-list.ordered {
  list-style-type: decimal;
}

.commercial-note {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  color: #6b7280;
}

.commercial-section-accent {
  padding: 24px 20px;
  border-radius: 20px;
  background: #f3f4ff;
}

@media (max-width: 768px) {
  .page-commercial main.commercial-main {
    padding-top: 32px;
    padding-bottom: 40px;
  }

  .commercial-section {
    margin-bottom: 32px;
  }
}
/* ===== Мобильная адаптация для переключателей на странице Pricing ===== */
@media (max-width: 768px) {
  /* общий контейнер с кнопками (машины, апартаменты, дома, коммерция) */
  .pricing-toggle {
    display: flex;
    flex-wrap: wrap;   /* разрешаем перенос строк */
    gap: 8px;
  }

  /* сами кнопки-переключатели */
  .pricing-toggle .tg {
    flex: 1 1 100%;    /* каждая кнопка на всю ширину строки */
    white-space: normal;
  }

  /* строка "Select ... type" + переключатели – в колонку */
  .size-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .size-row .size-label {
    margin-bottom: 0;
  }
}