/*-----------------------------------*\
  #TERMS
\*-----------------------------------*/


/* ---------------------------------------------------------------------------
   ЗАГЛАВИЕТО Е НАД ТЕКСТА, А НЕ ДО НЕГО — 14.08.2026
   ---------------------------------------------------------------------------
   ⚠️ ТУК ЛИПСВАШЕ `flex-direction`, ТОЕСТ БЕШЕ `row`. Заглавието `<h1>` и
   блокът с текста стояха един ДО друг като две колони. Последиците, измерени
   в браузър:

   · policy.php на 390px — съдържанието е 418px, тоест страницата се плъзга
     настрани. `<h1>` е изцяло извън екрана вляво (от -28 до 182), а текстът
     е избутан надясно и се реже по десния ръб. Мерено, не на око.
   · На 1280px `<h1>` пада на 864-ия пиксел надолу, защото `align-items:
     center` го центрира спрямо цялата височина на текста. Заглавието на
     страницата виси по средата на стената от текст.

   terms.php оцеляваше случайно: „Общи условия" е с 8 знака по-късо от
   „Политика за поверителност" и се събираше. Тоест не беше поправено — просто
   не си личеше.

   ⚠️ ЗНАЧЕНИЕТО Е ПО-ГОЛЯМО ОТ ЕДНА КРИВА СТРАНИЦА. Това е политиката за
   поверителност — страницата, която Google Ads иска да е достъпна и четима,
   когато формите събират име и телефон.

   `align-items: center` вече центрира ХОРИЗОНТАЛНО (в колона осите се
   разменят) — точно каквото трябва за блок с максимум 1000px.
   --------------------------------------------------------------------------- */

.terms-section {
    width: 100%;
    height: auto;

    padding: 164px 32px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 32px;
    background-color: var(--background-beige-01);
}

/*
 * Заглавието взима ширината на текста отдолу, за да започват от една и съща
 * лява линия. Без това `align-items: center` би го центрирало само по себе си
 * и то щеше да стои над ляво подравнен текст.
 */
.terms-section > .terms-title {
    width: 100%;
    max-width: 1000px;
}

.terms-container {
    width: 100%;
    max-width: 1000px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 32px;
}


.terms-title {
    font-size: 32px;
    line-height: 48px;
    font-weight: var(--bold);
}


.terms-text {
    text-align: start;
    text-align: left;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    line-height: 24px;
    font-weight: var(--medium);
}


@media (width < 700px) {
    .terms-section {
        width: 100%;
        height: auto;

        padding: 80px 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .terms-title {
        font-size: 24px;
        line-height: 32px;
        font-weight: var(--bold);
    }

    .courts-title {
        font-size: 32px;
        line-height: 40px;
        font-weight: var(--bold);
        letter-spacing: 0.5px;
        color: var(--white);
        text-align: center;
    }
}

/* ---------------------------------------------------------------------------
   КОТВАТА /terms#otkaz — 20.08.2026
   ---------------------------------------------------------------------------
   Разделът за отказ от резервация се сочи с връзка от честите въпроси в
   „Пакети и цени". Понеже целият документ е един <p>, котвата стои върху
   <span> ВЪТРЕ в текста — браузърът го изравнява със самия горен ръб на
   екрана и заглавието на раздела остава скрито под лентата отгоре.

   Отстъпът го смъква под нея, за да се вижда от кой ред започва разделът.
   --------------------------------------------------------------------------- */

#otkaz {
    scroll-margin-top: 120px;
}


/* ---------------------------------------------------------------------------
   РАЗДЕЛИ И ТОЧКИ — 20.08.2026
   ---------------------------------------------------------------------------
   Общите условия станаха адвокатският документ: шест раздела и двайсет
   и шест номерирани точки. Старият начин — всичко в един <p>, разделено
   с <br><br> — не го носи: без заглавия екранен четец няма как да прескача
   между разделите, а окото вижда стена.

   .terms-container е флекс колона с gap: 32px — тоест толкова остава
   МЕЖДУ разделите, без да се пипа. Тук се задава само по-тясното
   разстояние между точките вътре в раздела.
   --------------------------------------------------------------------------- */

.terms-razdel {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.terms-razdel-ime {
    font-size: 20px;
    line-height: 28px;
    font-weight: var(--bold);
    margin-bottom: 2px;
}

.terms-tochka {
    text-align: left;
    font-size: 16px;
    line-height: 24px;
    font-weight: var(--medium);
}

/*
 * Номерът на точката. Отделя се от текста, за да се хваща от окото
 * при прелистване — в правен текст се цитира по номер.
 */
.terms-tochka > strong {
    font-weight: var(--bold);
    margin-right: 4px;
}

@media (width < 700px) {
    .terms-razdel-ime {
        font-size: 18px;
        line-height: 26px;
    }
}