body {
  margin: 0;
    padding: 0;
}

html {
  font-size: clamp(11px, 1.5vw + 8px, 18px);
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  
}

*,
*::before,
*::after {
  box-sizing: border-box;
}



/* Переменные */
:root {
    /* Цвета */
    --blue: #0C87D4;
    --dark__blue: #142841;
    --green: #C1EFA4;
    --dark__green: #428915;
    --red: #C40017;
    --white: #FFFFFF;
    --black: #000000;

    /* Жирность */
    --bd: 700;
    --md: 600;
    --rg: 400;

    /* Границы и переходы */
    --animate: all 0.3s ease;
    --opacity__25: opacity(0.25);
    --opacity__50: opacity(0.5);
    --opacity__75: opacity(0.75);
    --opacity__100: opacity(1);
    --blur: blur(7.5px);


    /* Шрифты */
    --primary-font: 'Unbounded', sans-serif;
    --secondary-font: 'Inter', sans-serif;

    --zr: 0.25rem; 
    --xs: 0.5rem;  
    --sm: 0.85rem; 
    --md: 1.0rem;    
    --lg: 1.25rem;  
    --xl: 1.50rem;    
    --xxl: 2rem; 
    --hg: 3rem; 
}

/* Мобильные (до 576px) */

@media (min-width: 300px) and (max-width: 576px) {


  :root {
    --zr: 0.25rem; 
    --xs: 0.60rem;  
    --sm: 0.80rem; 
    --md: 0.90rem;    
    --lg: 1rem;  
    --xl: 1rem;    
    --xxl: 1.2rem; 
    --hg: 1.3rem; 
  }

  .container--hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .container--invert {
    display: flex;
    flex-direction: column;
            
  }

    .container--calc {
    display: flex;
    flex-direction: column;
                gap: 2rem;
        padding: 1rem;

    
  }

  .grid--calc {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;                 
  gap: var(--xs);                             
}

  .asked__right .icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--Black-5, rgba(0, 0, 0, 0.05));
    border: 0.0625rem solid var(--Black-10, rgba(0, 0, 0, 0.1));
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
  }

  .container--faq {
        display: flex
;
        flex-direction: column;
        border-radius: var(--hg);
        gap: var(--hg);
        padding: var(--hg);
}

.container--confirm {
          flex-direction: column;
        border-radius: var(--hg);
        gap: var(--hg);
        padding: var(--hg);
}

.container--footer {
    display: flex;
    flex-direction: column;
        text-align: center;

}


.logo--footer {
    background-image: url(../img/logo_footer.svg);
    width: auto;
    height: 6rem;
    background-size: contain;
    background-repeat: no-repeat;
    /* display: flex
; */
    justify-content: center;
    background-position: center;
}

  .aside,
  .bside {
    flex: 1 1 100%;
    min-width: 0;
  }

  .card {
    flex-direction: column;

  }

  main {

    width: 100%;
    margin: 0 auto;
            padding-left: var(--xs);
        padding-right: var(--xs);
  }


  .web {
    display: none !important;
  }


  .mobile {
    display: flex;
  }
}

/* Планшеты (577px–768px) */

@media (min-width: 577px) and (max-width: 768px) {

  :root {
    --zr: 0.25rem; 
    --xs: 0.5rem;  
    --sm: 0.85rem; 
    --md: 1.0rem;    
    --lg: 1.25rem;  
    --xl: 1.50rem;    
    --xxl: 2rem; 
    --hg: 2rem; 
  }
  .container--invert {
    display: flex;
    flex-direction: column;
  }

  .aside,
  .bside {
    flex: 1 1 100%;
    min-width: 0;
  }

  .card {
    flex-direction: column;
  }

      .container--calc {
    display: flex;

    flex-direction: column;
   
  }

    .grid--calc {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;                 
  gap: var(--xs);                             
}

  main {

    width: 100%;
    margin: 0 auto;
            padding-left: var(--xs);
        padding-right: var(--xs);
  }

    .web {
    display: none !important;
  }


  .mobile {
    display: flex;
  }

.container--footer {
    display: flex;
    flex-direction: column;


}

.container--faq {
    display: flex
;
    flex-direction: column;
    border-radius: var(--hg);
    gap: 8rem;
    padding: 8rem;
    padding: var(--hg);
}
}

/* Маленькие десктопы (769px–1024px) */

@media (min-width: 769px) and (max-width: 1024px) {


    :root {
    --zr: 0.25rem; 
    --xs: 0.5rem;  
    --sm: 0.85rem; 
    --md: 1.0rem;    
    --lg: 1.25rem;  
    --xl: 1.50rem;    
    --xxl: 2rem; 
    --hg: 2rem; 
  }


  .container--invert {
    display: flex;
    flex-direction: column;
  }

  .aside,
  .bside {
    flex: 1 1 100%;
    min-width: 0;
  }
    .card {
    flex-direction: row;
  }

      .container--calc {
    display: flex;

        flex-direction: column;
   
  }

  main {

    width: 100%;
    margin: 0 auto;
            padding-left: var(--xs);
        padding-right: var(--xs);
  }

    .web {
    display: none !important;
  }


  .mobile {
    display: flex;
  }

.container--footer {
    display: flex;
    flex-direction: column;

}

.container--faq {
    display: flex
;
    flex-direction: column;

}
}

/* Средние десктопы (1025px–1336px) */

@media (min-width: 1025px) {

    :root {
    --zr: 0.25rem; 
    --xs: 0.5rem;  
    --sm: 0.85rem; 
    --md: 1.0rem;    
    --lg: 1.25rem;  
    --xl: 1.50rem;    
    --xxl: 2rem; 
    --hg: 3rem; 
  }


  .container--invert {
    display: flex;
    flex-direction: row;

  }

  .aside,
  .bside {
    flex: 1 1 0%;
    min-width: 0;
  }
    .card {
    flex-direction: row;
  }


      .container--calc {
    display: flex;

        flex-direction: row;
  
  }

  main {
    width: 90%;
    margin: 0 auto;
  }

      .web {
    display: flex;
    align-items: center;
  }


  .mobile {
    display: none !important;
  }

  .container--footer {
    display: flex;
    flex-direction: row;

}


}

/* Большие десктопы (1400px+) */

@media (min-width: 1600px) {
  .container--invert {
    display: flex;
    flex-direction: row;

  }

  .aside,
  .bside {
    flex: 1 1 0%;
    min-width: 0;
  }
    .card {
    flex-direction: row;
  }

      .container--calc {
    display: flex;
  
        flex-direction: row;
    
  }

      main {

    width: 90%;
    margin: 0 auto;
  }

      .web {
    display: flex;
    align-items: center;
  }


  .mobile {
    display: none !important;
  }

    .container--footer {
    display: flex;
    flex-direction: row;

    

}

/* Height handled responsively in style.css now */
}


/* Основные теги */

a {
    text-decoration: none;
}

p, h1, h2, h3, h4, h5, h6 {
    margin: 0;
}


/* Изображения */


.img {

}

.img--static {
    width: 100%;
    height: auto;
    object-fit: cover;
    overflow: hidden;
    display: block;
}

.img--calc {
    width: 100%;

    object-fit: cover;

    display: block;
    position: relative;

}







/* Эффекты */

.opc__25 {
    filter: var(--opacity__25);
}

.opc__50 {
    filter: var(--opacity__50);
}

.opc__75 {
    filter: var(--opacity__75);
}


/* Сетка */




.row {
  display: flex;
  flex-direction: row;
  min-width: 0;

}

.col {
  flex-direction: column;
  display: flex;
  min-width: 0;
}

.wrp {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}

.vrt {
display: flex;
  align-items: center;
}

.hrt {
display: flex;
  justify-content: center;
}

.spc {
display: flex;
  justify-content: space-between;
}

.ctr {
  display: flex;
    justify-content: center;
}


.container {

}

.container--invert {


}



/* Размеры шрифтов */

.fs__xs {
  font-size: var(--xs);
  line-height: var(--xs);
}

.fs__sm {
  font-size: var(--sm);
  line-height: var(--sm);
}

.fs__md {
  font-size: var(--md);
  line-height: var(--md);
}

.fs__lg {
  font-size: var(--lg);
  line-height: var(--lg);
}

.fs__xl {
  font-size: var(--xl);
  line-height: var(--xl);
}

.fs__xxl {
  font-size: var(--xxl);
  line-height: var(--xxl);
}

.fs__hg {
  font-size: var(--hg);
  line-height: var(--hg);
}

/* Жирность шрифтов */

.fw__rg {
  font-weight: var(--rg);
}

.fw__md {
  font-weight: var(--md);
}

.fw__bd {
  font-weight: var(--bd);
}

/* Отступы внутренние */

.pd__xs {
  padding: var(--xs);
}

.pd__sm {
  padding: var(--sm);
}

.pd__md {
  padding: var(--md);
}

.pd__lg {
  padding: var(--lg);
}

.pd__xl {
  padding: var(--xl);
}

.pd__hg {
  padding: var(--hg);
}

.pd__hg--4 {
    padding: calc(var(--hg) * 2);
}

.pd__xxl {
  padding: var(--xxl);
}

.pd__xs--rgt {
  padding-right: var(--xs);
}

.pd__sm--rgt {
  padding-right: var(--sm);
}

.pd__md--rgt {
  padding-right: var(--md);
}

.pd__lg--rgt {
  padding-right: var(--lg);
}

.pd__xl--rgt {
  padding-right: var(--xl);
}

.pd__xxl--rgt {
  padding-right: var(--xxl);
}

.pd__hg--rgt {
  padding-right: var(--hg);
}


.pd__xs--lft {
  padding-left: var(--xs);
}

.pd__sm--lft {
  padding-left: var(--sm);
}

.pd__md--lft {
  padding-left: var(--md);
}

.pd__lg--lft {
  padding-left: var(--lg);
}

.pd__xl--lft {
  padding-left: var(--xl);
}

.pd__xxl--lft {
  padding-left: var(--xxl);
}

.pd__hg--lft {
  padding-left: var(--hg);
}

.pd__xs--top {
  padding-top: var(--xs);
}

.pd__sm--top {
  padding-top: var(--sm);
}

.pd__md--top {
  padding-top: var(--md);
}

.pd__lg--top {
  padding-top: var(--lg);
}

.pd__xl--top {
  padding-top: var(--xl);
}

.pd__xxl--top {
  padding-top: var(--xxl);
}

.pd__hg--top {
  padding-top: var(--hg);
}


.pd__xs--btm {
  padding-bottom: var(--xs);
}

.pd__sm--btm {
  padding-bottom: var(--sm);
}

.pd__md--btm {
  padding-bottom: var(--md);
}

.pd__lg--btm {
  padding-bottom: var(--lg);
}

.pd__xl--btm {
  padding-bottom: var(--xl);
}

.pd__xxl--btm {
  padding-bottom: var(--xxl);
}

.pd__hg--btm {
  padding-bottom: var(--hg);
}

/* Отступы внешние */
.mg__xs {
  margin: var(--xs);
}

.mg__sm {
  margin: var(--sm);
}

.mg__md {
  margin: var(--md);
}

.mg__lg {
  margin: var(--lg);
}

.mg__xl {
  margin: var(--xl);
}

.mg__xxl {
  margin: var(--xxl);
}

.mg__hg {
  margin: var(--hg);
}

.mg__xs--rgt {
  margin-right: var(--xs);
}

.mg__sm--rgt {
  margin-right: var(--sm);
}

.mg__md--rgt {
  margin-right: var(--md);
}

.mg__lg--rgt {
  margin-right: var(--lg);
}

.mg__xl--rgt {
  margin-right: var(--xl);
}

.mg__xxl--rgt {
  margin-right: var(--xxl);
}

.mg__hg--rgt {
  margin-right: var(--hg);
}

.mg__xs--lft {
  margin-left: var(--xs);
}

.mg__sm--lft {
  margin-left: var(--sm);
}

.mg__md--lft {
  margin-left: var(--md);
}

.mg__lg--lft {
  margin-left: var(--lg);
}

.mg__xl--lft {
  margin-left: var(--xl);
}

.mg__xxl--lft {
  margin-left: var(--xxl);
}

.mg__xxl--lft {
  margin-left: var(--hg);
}

.mg__xs--top {
  margin-top: var(--xs);
}

.mg__sm--top {
  margin-top: var(--sm);
}

.mg__md--top {
  margin-top: var(--md);
}

.mg__lg--top {
  margin-top: var(--lg);
}

.mg__xl--top {
  margin-top: var(--xl);
}

.mg__xxl--top {
  margin-top: var(--xxl);
}

.mg__xxl--top {
  margin-top: var(--hg);
}

.mg__xs--btm {
  margin-bottom: var(--xs);
}

.mg__sm--btm {
  margin-bottom: var(--sm);
}

.mg__md--btm {
  margin-bottom: var(--md);
}

.mg__lg--btm {
  margin-bottom: var(--lg);
}

.mg__xl--btm {
  margin-bottom: var(--xl);
}

.mg__xxl--btm {
  margin-bottom: var(--xxl);
}

.mg__hg--btm {
  margin-bottom: var(--hg);
}

/* Сетка */
.gp {

}

.gp__zr {
  gap: var(--zr);
}

.gp__xs {
  gap: var(--xs);
}

.gp__sm {
  gap: var(--sm);
}

.gp__md {
  gap: var(--md);
}

.gp__lg {
  gap: var(--lg);
}

.gp__xl {
  gap: var(--xl);
}

.gp__xxl {
  gap: var(--xxl);
}

.gp__hg {
  gap: var(--hg);
}

/* Utility classes */
.hidden {
  display: none !important;
}

/* Addon block styling */
.addon-wrapper {
  position: relative;
}

/* Hide the entire addon block by default when no tariff is selected */
.addon-block,
[id^="addon-block-cat-"] {
  display: none;
}

/* Show the addon block when a tariff is selected */
.addon-block.show-addons,
[id^="addon-block-cat-"].show-addons {
  display: block;
}

/* Hide the tariff options section (bedroom/bathroom config) by default when no tariff is selected */
[class*="all-tariff-options-container-for-category-"] {
  display: none;
}

/* Show the tariff options section when a tariff is selected */
[class*="all-tariff-options-container-for-category-"].show-options {
  display: block;
}

/* Hide the entire options column/container (including header) when no tariff is selected */
.options-section {
  display: none;
}

.options-section.show-options {
  display: block;
}

/* Legacy overlay styling (keeping for backward compatibility) */
.addon-blocker-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  z-index: 10;
  pointer-events: all;
  display: block;
}

.addon-blocker-overlay.hidden {
  display: none;
}