/*
 * Блок скидок «10-15-20».
 *
 * Оформление переключается настройкой модуля «Оформление блока»: она добавляет
 * блоку класс prfh-discount-ladder--<тема>. Базовые правила общие для всех тем,
 * ниже — четыре темы.
 *
 * ВАЖНО про специфичность: правила ступеней в темах обязаны нести
 * `:not(.prfh-discount-ladder__row--master)`. Селектор темы весит больше
 * базового `.prfh-discount-ladder__row--master`, и без этого исключения
 * мастерская строка теряет свой тёмный фон и белый текст.
 */

/* ======================= База ======================= */

.prfh-discount-ladder {
    --prfh-ladder-radius: 10px;

    display: flex;
    flex-direction: column;
    margin: 16px 0;
    padding: 0;
    border-radius: var(--prfh-ladder-radius);
    font-size: 13px;
    line-height: 1.35;
    list-style: none;
}

/*
 * Углы скругляются у крайних строк, а не через overflow: hidden у контейнера —
 * иначе он обрезал бы подсказку, которая раскрывается над блоком.
 */
.prfh-discount-ladder__row:first-child {
    border-top-left-radius: var(--prfh-ladder-radius);
    border-top-right-radius: var(--prfh-ladder-radius);
}

.prfh-discount-ladder__row:last-child {
    border-bottom-left-radius: var(--prfh-ladder-radius);
    border-bottom-right-radius: var(--prfh-ladder-radius);
}

.prfh-discount-ladder__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 13px;
}

.prfh-discount-ladder__label {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    color: inherit;
}

.prfh-discount-ladder__sum {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Бейдж с процентом — виден только в темах «бейджи». */
.prfh-discount-ladder__chip {
    display: none;
    padding: 2px 9px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Подпись «Цена по акции» — парная бейджу, тоже только в темах «бейджи». */
.prfh-discount-ladder__label-alt { display: none; }

/*
 * Подсказка (i): текст лежит в разметке, а не в ::after с content — так его
 * читают скринридеры и он нормально переносится. Показывается по наведению
 * и по фокусу с клавиатуры.
 */
.prfh-discount-ladder__hint {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* Строка выровнена по базовой линии, иконке нужен центр высоты текста. */
    align-self: center;
    flex-shrink: 0;
    cursor: help;
    opacity: 0.65;
    transition: opacity 0.15s ease;
}

.prfh-discount-ladder__hint:hover,
.prfh-discount-ladder__hint:focus-visible {
    opacity: 1;
}

.prfh-discount-ladder__hint:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 50%;
}

.prfh-discount-ladder__hint-icon {
    display: block;
    color: currentColor;
}

.prfh-discount-ladder__hint-text {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    z-index: 20;
    width: max-content;
    max-width: 260px;
    padding: 9px 11px;
    transform: translateX(-50%);
    border-radius: 8px;
    background-color: #16181a;
    color: rgba(255, 255, 255, 0.92);
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    box-shadow: 0 6px 18px rgba(16, 20, 30, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
}

/* Хвостик подсказки. */
.prfh-discount-ladder__hint-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: #16181a;
}

.prfh-discount-ladder__hint:hover .prfh-discount-ladder__hint-text,
.prfh-discount-ladder__hint:focus-visible .prfh-discount-ladder__hint-text {
    opacity: 1;
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    .prfh-discount-ladder__hint,
    .prfh-discount-ladder__hint-text { transition: none; }
}

/* Строка мастера */
.prfh-discount-ladder__row--master {
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    padding: 13px;
    background-color: #16181a;
    color: #fff;
    box-shadow: none;
}

.prfh-discount-ladder__master-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

/*
 * На тёмной строке чистый белый выжигает глаз, а цена должна оставаться
 * главной — поэтому цена почти непрозрачная, подпись и примечание бледнее.
 */
.prfh-discount-ladder__row--master .prfh-discount-ladder__sum {
    color: rgba(255, 255, 255, 0.9);
}

.prfh-discount-ladder__row--master .prfh-discount-ladder__label {
    color: rgba(255, 255, 255, 0.72);
}

.prfh-discount-ladder__note {
    font-size: 11.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.6);
}

.prfh-discount-ladder__btn {
    align-self: stretch;
    padding: 10px 14px;
    border: 0;
    border-radius: 7px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.prfh-discount-ladder__btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .prfh-discount-ladder__btn { transition: none; }
}

/* ================= Тема: светлая зелёная шкала ================= */

.prfh-discount-ladder--green .prfh-discount-ladder__row:not(.prfh-discount-ladder__row--master) {
    background-color: #eef7dd;
    color: #33471a;
}

.prfh-discount-ladder--green .prfh-discount-ladder__row:not(.prfh-discount-ladder__row--master):nth-child(2) { background-color: #e2f1c7; }
.prfh-discount-ladder--green .prfh-discount-ladder__row:not(.prfh-discount-ladder__row--master):nth-child(3) { background-color: #d5eab1; }
.prfh-discount-ladder--green .prfh-discount-ladder__row:not(.prfh-discount-ladder__row--master):nth-child(4) { background-color: #c8e39b; }
.prfh-discount-ladder--green .prfh-discount-ladder__row:not(.prfh-discount-ladder__row--master):nth-child(5) { background-color: #bcdc86; }

.prfh-discount-ladder--green .prfh-discount-ladder__row:not(.prfh-discount-ladder__row--master) + .prfh-discount-ladder__row:not(.prfh-discount-ladder__row--master) {
    box-shadow: inset 0 1px 0 rgba(51, 71, 26, 0.09);
}

.prfh-discount-ladder--green .prfh-discount-ladder__row:not(.prfh-discount-ladder__row--master) .prfh-discount-ladder__sum {
    color: #33471a;
}

.prfh-discount-ladder--green .prfh-discount-ladder__btn {
    background-color: #a3d13f;
    color: #23300f;
}

.prfh-discount-ladder--green .prfh-discount-ladder__btn:hover,
.prfh-discount-ladder--green .prfh-discount-ladder__btn:focus-visible {
    background-color: #b6de5c;
}

/* ================= Тема: индиго-шкала (цвета витрины) ================= */

.prfh-discount-ladder--indigo .prfh-discount-ladder__row:not(.prfh-discount-ladder__row--master) {
    background-color: #eef1ff;
    color: #26315e;
}

.prfh-discount-ladder--indigo .prfh-discount-ladder__row:not(.prfh-discount-ladder__row--master):nth-child(2) { background-color: #e0e6ff; }
.prfh-discount-ladder--indigo .prfh-discount-ladder__row:not(.prfh-discount-ladder__row--master):nth-child(3) { background-color: #d0d9ff; }
.prfh-discount-ladder--indigo .prfh-discount-ladder__row:not(.prfh-discount-ladder__row--master):nth-child(4) { background-color: #bfcbff; }
.prfh-discount-ladder--indigo .prfh-discount-ladder__row:not(.prfh-discount-ladder__row--master):nth-child(5) { background-color: #aebeff; }

.prfh-discount-ladder--indigo .prfh-discount-ladder__row:not(.prfh-discount-ladder__row--master) + .prfh-discount-ladder__row:not(.prfh-discount-ladder__row--master) {
    box-shadow: inset 0 1px 0 rgba(38, 49, 94, 0.1);
}

.prfh-discount-ladder--indigo .prfh-discount-ladder__row:not(.prfh-discount-ladder__row--master) .prfh-discount-ladder__sum {
    color: #26315e;
}

/* Мастерская строка в глубоком индиго — блок остаётся в одной гамме. */
.prfh-discount-ladder--indigo .prfh-discount-ladder__row--master {
    background-color: #1b2559;
}

.prfh-discount-ladder--indigo .prfh-discount-ladder__btn {
    background-color: #fff;
    color: #1b2559;
}

.prfh-discount-ladder--indigo .prfh-discount-ladder__btn:hover,
.prfh-discount-ladder--indigo .prfh-discount-ladder__btn:focus-visible {
    background-color: #e5e9ff;
}

/* ================= Темы «бейджи»: общая часть ================= */

.prfh-discount-ladder--badges-indigo,
.prfh-discount-ladder--badges-green {
    border: 1px solid #ececf0;
}

.prfh-discount-ladder--badges-indigo .prfh-discount-ladder__row:not(.prfh-discount-ladder__row--master),
.prfh-discount-ladder--badges-green .prfh-discount-ladder__row:not(.prfh-discount-ladder__row--master) {
    align-items: center;
    background-color: #fff;
    color: #4b5163;
}

.prfh-discount-ladder--badges-indigo .prfh-discount-ladder__row:not(.prfh-discount-ladder__row--master) + .prfh-discount-ladder__row:not(.prfh-discount-ladder__row--master),
.prfh-discount-ladder--badges-green .prfh-discount-ladder__row:not(.prfh-discount-ladder__row--master) + .prfh-discount-ladder__row:not(.prfh-discount-ladder__row--master) {
    border-top: 1px solid #ececf0;
}

.prfh-discount-ladder--badges-indigo .prfh-discount-ladder__chip,
.prfh-discount-ladder--badges-green .prfh-discount-ladder__chip {
    display: inline-block;
}

.prfh-discount-ladder--badges-indigo .prfh-discount-ladder__label-text,
.prfh-discount-ladder--badges-green .prfh-discount-ladder__label-text {
    display: none;
}

.prfh-discount-ladder--badges-indigo .prfh-discount-ladder__label-alt,
.prfh-discount-ladder--badges-green .prfh-discount-ladder__label-alt {
    display: inline;
}

/* ================= Тема: бейджи в цветах витрины ================= */

.prfh-discount-ladder--badges-indigo .prfh-discount-ladder__chip {
    background-color: #e0e6ff;
    color: #26315e;
}

.prfh-discount-ladder--badges-indigo .prfh-discount-ladder__row:nth-child(2) .prfh-discount-ladder__chip { background-color: #d0d9ff; }
.prfh-discount-ladder--badges-indigo .prfh-discount-ladder__row:nth-child(3) .prfh-discount-ladder__chip { background-color: #5b7fff; color: #fff; }
.prfh-discount-ladder--badges-indigo .prfh-discount-ladder__row:nth-child(4) .prfh-discount-ladder__chip { background-color: #5b7fff; color: #fff; }

.prfh-discount-ladder--badges-indigo .prfh-discount-ladder__row:not(.prfh-discount-ladder__row--master) .prfh-discount-ladder__sum {
    color: #26315e;
}

.prfh-discount-ladder--badges-indigo .prfh-discount-ladder__row--master .prfh-discount-ladder__chip {
    background-color: #5b7fff;
    color: #fff;
}

.prfh-discount-ladder--badges-indigo .prfh-discount-ladder__btn {
    background-color: #5b7fff;
    color: #fff;
}

.prfh-discount-ladder--badges-indigo .prfh-discount-ladder__btn:hover,
.prfh-discount-ladder--badges-indigo .prfh-discount-ladder__btn:focus-visible {
    background-color: #4a6ff0;
}

/* ================= Тема: бейджи зелёные ================= */

.prfh-discount-ladder--badges-green .prfh-discount-ladder__chip {
    background-color: #e2f1c7;
    color: #33471a;
}

.prfh-discount-ladder--badges-green .prfh-discount-ladder__row:nth-child(2) .prfh-discount-ladder__chip { background-color: #d5eab1; }
.prfh-discount-ladder--badges-green .prfh-discount-ladder__row:nth-child(3) .prfh-discount-ladder__chip { background-color: #a3d13f; color: #23300f; }
.prfh-discount-ladder--badges-green .prfh-discount-ladder__row:nth-child(4) .prfh-discount-ladder__chip { background-color: #a3d13f; color: #23300f; }

.prfh-discount-ladder--badges-green .prfh-discount-ladder__row:not(.prfh-discount-ladder__row--master) .prfh-discount-ladder__sum {
    color: #33471a;
}

.prfh-discount-ladder--badges-green .prfh-discount-ladder__row--master .prfh-discount-ladder__chip {
    background-color: #a3d13f;
    color: #23300f;
}

.prfh-discount-ladder--badges-green .prfh-discount-ladder__btn {
    background-color: #a3d13f;
    color: #23300f;
}

.prfh-discount-ladder--badges-green .prfh-discount-ladder__btn:hover,
.prfh-discount-ladder--badges-green .prfh-discount-ladder__btn:focus-visible {
    background-color: #b6de5c;
}

/* ================= Форма заявки в попапе ================= */

.prfh-master-request .form-group.has-error .form-control {
    border-color: #d9534f;
}

.prfh-master-request .form-group .mess:not(:empty) {
    margin-top: 4px;
    color: #d9534f;
    font-size: 12px;
}