/* Start:/franchise/franchise.css?17865222909399*/
/* ============================================================================
   franchise.css — стили страницы /franchise/ (Франшиза «ИЗОЛЯЦИЯ»)
   ----------------------------------------------------------------------------
   ВСЁ скоуплено под .article.fr — на остальной сайт не влияет.
   Двойной класс (.article.fr) нужен, чтобы перебить .item__content шаблона
   (см. рецепт «шаблон перебивает .article h2»).
   Переменные из furniture_dark-blue/styles.css: --brand-accent и т.д.
   Подключается из /franchise/index.php через SetAdditionalCSS().
   ============================================================================ */

/* --- Кнопка-CTA ----------------------------------------------------------- */
.article.fr .fr-cta {
    margin: 24px 0 32px;
}

.article.fr .fr-btn {
    display: inline-block;
    padding: 15px 34px;
    background: var(--brand-accent, #F6C849);
    color: #191919;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.2;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}

.article.fr .fr-btn:hover,
.article.fr .fr-btn:focus-visible {
    background: #FFD966;
    color: #191919;
    text-decoration: none;
    transform: translateY(-1px);
}

/* --- Карточки «что входит» ------------------------------------------------ */
.article.fr .fr-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 24px 0 36px;
}

.article.fr .fr-card {
    background: #FFFFFF;
    border: 1px solid var(--color-rule, #E1E1E4);
    border-top: 3px solid var(--brand-accent, #F6C849);
    border-radius: 4px;
    padding: 20px 20px 18px;
}

.article.fr .fr-card h4 {
    margin: 0 0 8px;
    font-size: 17px;
    line-height: 1.3;
}

.article.fr .fr-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-text-muted, #6B6E78);
}

/* --- Карточки условий ----------------------------------------------------- */
/* три в ряд в колонке 720px; на планшете auto-fit сам перестроит в 2, на телефоне — в 1 */
.article.fr .fr-terms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin: 24px 0 36px;
}

.article.fr .fr-term {
    background: #191919;
    color: #FFFFFF;
    border-radius: 4px;
    padding: 22px 18px;
}

.article.fr .fr-term__value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--brand-accent, #F6C849);
    margin-bottom: 6px;
}

.article.fr .fr-term__label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-bottom: 12px;
}

.article.fr .fr-term p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #C9CACE;
}

/* --- Этапы ---------------------------------------------------------------- */
.article.fr ol.fr-steps {
    list-style: none;
    counter-reset: fr-step;
    padding-left: 0;
    margin: 24px 0 36px;
}

/* Кружок центрируется по высоте ТЕКСТА пункта: top 50% + сдвиг на свою половину.
   Флексом li делать нельзя — тогда каждый вложенный тег (<strong>, <a>) станет
   отдельным flex-элементом и строка разъедется. И без min-height: высоту пункта
   задаёт текст, иначе у однострочных центр уезжает вниз. */
.article.fr ol.fr-steps li {
    counter-increment: fr-step;
    position: relative;
    padding: 0 0 0 52px;
    /* 26px, а не 18: без min-height высоту пункта задаёт текст (~19px),
       и при прежнем отступе кружки соседних пунктов почти касались. */
    margin-bottom: 26px;
}

.article.fr ol.fr-steps li::before {
    content: counter(fr-step);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-accent, #F6C849);
    color: #191919;
    font-weight: 700;
    font-size: 17px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.article.fr ol.fr-steps li::marker { content: none; }

/* --- FAQ ------------------------------------------------------------------ */
.article.fr .fr-faq {
    margin: 24px 0 36px;
    border-top: 1px solid var(--color-rule, #E1E1E4);
}

.article.fr .fr-faq details {
    border-bottom: 1px solid var(--color-rule, #E1E1E4);
}

.article.fr .fr-faq summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 44px 18px 0;
    position: relative;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.4;
}

.article.fr .fr-faq summary::-webkit-details-marker { display: none; }

.article.fr .fr-faq summary::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -7px;
    border-right: 2px solid var(--brand-accent, #F6C849);
    border-bottom: 2px solid var(--brand-accent, #F6C849);
    transform: rotate(45deg);
    transition: transform .18s ease;
}

.article.fr .fr-faq details[open] summary::after {
    transform: rotate(-135deg);
    margin-top: -3px;
}

.article.fr .fr-faq summary:hover { color: #8A6A0A; }

.article.fr .fr-faq details p {
    margin: 0 0 18px;
    color: var(--color-text-muted, #6B6E78);
}

/* --- Форма заявки --------------------------------------------------------- */
.article.fr .fr-form {
    background: #FFFFFF;
    border: 1px solid var(--color-rule, #E1E1E4);
    border-radius: 4px;
    padding: 28px 24px 24px;
    margin: 24px 0 36px;
}

.article.fr .fr-field {
    margin-bottom: 18px;
}

.article.fr .fr-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 600;
}

.article.fr .fr-field label span { color: #D8534E; }

.article.fr .fr-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 16px;          /* < 16px даёт зум на iOS при фокусе */
    line-height: 1.3;
    color: var(--color-text, #2F323F);
    background: #FFFFFF;
    border: 1px solid #CFD0D4;
    border-radius: 4px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.article.fr .fr-field input:focus {
    outline: none;
    border-color: var(--brand-accent, #F6C849);
    box-shadow: 0 0 0 3px rgba(246, 200, 73, .25);
}

.article.fr .fr-field input.is-invalid {
    border-color: #D8534E;
}

.article.fr .fr-err {
    display: none;
    margin-top: 6px;
    font-size: 14px;
    color: #D8534E;
}

.article.fr .fr-err.is-shown { display: block; }

/* honeypot — скрыт от людей, но не display:none (так его чаще заполняют боты) */
.article.fr .fr-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Чекбокс согласия ----------------------------------------------------- */
.article.fr .fr-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 22px 0 20px;
}

/* ВАЖНО: глобальный main.css сайта в @media (max-width:767px) ставит
   input,textarea,select { appearance: none } — нативный чекбокс на телефоне
   превращается в белый квадрат без рамки, то есть в НЕВИДИМЫЙ элемент.
   Возвращаем вид принудительно, иначе обязательная галочка 152-ФЗ не видна. */
.article.fr .fr-consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: auto;
    border: 0;
    accent-color: var(--brand-accent, #F6C849);
    cursor: pointer;
}

.article.fr .fr-consent label {
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-text-muted, #6B6E78);
    cursor: pointer;
}

/* --- Кнопка отправки ------------------------------------------------------ */
.article.fr .fr-submit {
    width: 100%;
}

.article.fr .fr-submit:disabled {
    background: #E4E4E7;
    color: #9A9CA3;
    cursor: not-allowed;
    transform: none;
}

.article.fr .fr-status {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.5;
    min-height: 1em;
}

.article.fr .fr-status.is-ok    { color: #2E7D32; font-weight: 600; }
.article.fr .fr-status.is-error { color: #D8534E; font-weight: 600; }

/* --- Мобильные ------------------------------------------------------------ */
@media (max-width: 600px) {
    .article.fr .fr-cards,
    .article.fr .fr-terms { grid-template-columns: 1fr; }

    .article.fr .fr-form { padding: 22px 16px 20px; }

    .article.fr .fr-term__value { font-size: 26px; }

    .article.fr .fr-btn { width: 100%; text-align: center; }
}

/* End */
/* /franchise/franchise.css?17865222909399 */