/* ==========================================================
   BERS UI KIT — PRICING
   Version: 1.0.0
   Purpose: Responsive pricing tables for Tilda T123 blocks
   ========================================================== */


/* ==========================================================
   1. VARIABLES
   ========================================================== */

:root {
    --bers-ui-bg: #ffffff;
    --bers-ui-header-bg: #232323;
    --bers-ui-header-text: #ffffff;

    --bers-ui-text: #1f1f1f;
    --bers-ui-muted: #777777;
    --bers-ui-border: #e9e9e9;
    --bers-ui-hover: #f8f8f8;

    --bers-ui-success: #16a34a;
    --bers-ui-discount: #2563eb;
    --bers-ui-danger: #dc2626;

    --bers-ui-radius: 0.75rem;
    --bers-ui-mobile-radius: 0.75rem;

    --bers-ui-shadow: 0 0.375rem 1.5rem rgba(0, 0, 0, 0.08);

    --bers-ui-font-size: 1rem;
    --bers-ui-header-size: 1.125rem;
    --bers-ui-price-size: 1.25rem;
    --bers-ui-label-size: 0.8125rem;

    --bers-ui-padding-x: 1.375rem;
    --bers-ui-padding-y: 1.375rem;

    --bers-ui-transition: 180ms ease;

    --bers-ui-container-width: 1160px;
}


/* ==========================================================
   2. BASE / SCOPE
   ========================================================== */

/*
 * TYPOGRAPHY
 *
 * Шрифт не задаём вручную. Таблицы наследуют шрифт
 * от родительского элемента Tilda.
 *
 * Поэтому автоматически используется шрифт, который задан
 * в настройках сайта, секции или блока Tilda.
 * Не нужно прописывать здесь Inter, Manrope, Onest, Golos
 * или другой конкретный шрифт.
 */

.bers-ui-pricing,
.bers-ui-price-table,
.bers-ui-tariff-grid {
    box-sizing: border-box;
    width: 100%;

    /* Наследуем шрифт и стиль текста от Tilda */
    font-family: inherit;
    font-style: inherit;

    color: var(--bers-ui-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.bers-ui-pricing *,
.bers-ui-price-table *,
.bers-ui-tariff-grid *,
.bers-ui-pricing *::before,
.bers-ui-pricing *::after,
.bers-ui-price-table *::before,
.bers-ui-price-table *::after,
.bers-ui-tariff-grid *::before,
.bers-ui-tariff-grid *::after {
    box-sizing: border-box;
}


/* ==========================================================
   3. OPTIONAL OUTER CONTAINER
   ========================================================== */

.bers-ui-pricing {
    max-width: var(--bers-ui-container-width);
    margin-left: auto;
    margin-right: auto;
}

.bers-ui-pricing + .bers-ui-pricing {
    margin-top: 2rem;
}


/* ==========================================================
   4. STANDARD TWO-COLUMN TABLE
   Used for:
   Услуга | Стоимость
   Условие | Стоимость
   etc.
   ========================================================== */

.bers-ui-price-table {
    overflow: hidden;
    background: var(--bers-ui-bg);
    border: 1px solid var(--bers-ui-border);
    border-radius: var(--bers-ui-radius);
    box-shadow: var(--bers-ui-shadow);
}

.bers-ui-price-head,
.bers-ui-price-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(10rem, 1fr);
}

.bers-ui-price-head {
    background: var(--bers-ui-header-bg);
    color: var(--bers-ui-header-text);
    font-size: var(--bers-ui-header-size);
    font-weight: 600;
    line-height: 1.3;
}

.bers-ui-price-head > div,
.bers-ui-price-row > div {
    min-width: 0;
    padding: var(--bers-ui-padding-y) var(--bers-ui-padding-x);
}

.bers-ui-price-head > div + div,
.bers-ui-price-row > div + div {
    border-left: 1px solid var(--bers-ui-border);
}

.bers-ui-price-head > div:last-child {
    text-align: center;
}

.bers-ui-price-row {
    position: relative;
    background: var(--bers-ui-bg);
    font-size: var(--bers-ui-font-size);
    line-height: 1.45;
    transition: background-color var(--bers-ui-transition);
}

.bers-ui-price-row + .bers-ui-price-row {
    border-top: 1px solid var(--bers-ui-border);
}

.bers-ui-price-row:hover {
    background: var(--bers-ui-hover);
}

.bers-ui-price-row > div {
    display: flex;
    align-items: center;
}

.bers-ui-price-row > div:last-child {
    justify-content: center;
    text-align: center;
    font-size: var(--bers-ui-price-size);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}


/* ==========================================================
   5. MOBILE LABELS FOR STANDARD TABLE
   Define labels per table via data-label in HTML.
   Example:
   <div data-label="Услуга">Разовое занятие</div>
   ========================================================== */

.bers-ui-price-row > div[data-label]::before {
    display: none;
    content: attr(data-label);
}


/* ==========================================================
   6. TARIFF GRID
   Desktop:
   8 занятий | 12 занятий
   5500 ₽    | 6500 ₽

   HTML is grouped by tariff/card so mobile order stays correct.
   ========================================================== */

.bers-ui-tariff-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    background: var(--bers-ui-bg);
    border: 1px solid var(--bers-ui-border);
    border-radius: var(--bers-ui-radius);
    box-shadow: var(--bers-ui-shadow);
}

.bers-ui-tariff {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    background: var(--bers-ui-bg);
    transition: background-color var(--bers-ui-transition);
}

.bers-ui-tariff + .bers-ui-tariff {
    border-left: 1px solid var(--bers-ui-border);
}

.bers-ui-tariff:hover {
    background: var(--bers-ui-hover);
}

.bers-ui-tariff-title {
    padding: var(--bers-ui-padding-y) var(--bers-ui-padding-x);
    background: var(--bers-ui-header-bg);
    color: var(--bers-ui-header-text);
    text-align: center;
    font-size: var(--bers-ui-header-size);
    font-weight: 600;
    line-height: 1.3;
}

.bers-ui-tariff-value {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5rem;
    padding: var(--bers-ui-padding-y) var(--bers-ui-padding-x);
    text-align: center;
    font-size: var(--bers-ui-price-size);
    font-weight: 700;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}


/* ==========================================================
   7. THREE-COLUMN TABLE
   Format:
   Тренер | 1 занятие | 4 занятия (пакет)

   Desktop proportions:
   40% | 30% | 30%

   На мобильном таблица использует общую адаптивную
   механику BERS UI Pricing и выводит ячейки друг под другом.
   ========================================================== */

.bers-ui-price-table--3col .bers-ui-price-head,
.bers-ui-price-table--3col .bers-ui-price-row {
    grid-template-columns: minmax(0, 1.333fr) minmax(0, 1fr) minmax(0, 1fr);
}

/* Шапка: первая колонка слева, цены по центру */
.bers-ui-price-table--3col .bers-ui-price-head > div {
    text-align: center;
}

.bers-ui-price-table--3col .bers-ui-price-head > div:first-child {
    text-align: left;
}

/* Значения во второй и третьей колонках по центру */
.bers-ui-price-table--3col .bers-ui-price-row > div:nth-child(2),
.bers-ui-price-table--3col .bers-ui-price-row > div:nth-child(3) {
    justify-content: center;
    text-align: center;
}

/* Первая колонка — обычный текст слева */
.bers-ui-price-table--3col .bers-ui-price-row > div:first-child {
    justify-content: flex-start;
    text-align: left;
}


/* ==========================================================
   8. VALUE HELPERS
   ========================================================== */

.bers-ui-free,
.bers-ui-success {
    color: var(--bers-ui-success);
    font-weight: 700;
}

.bers-ui-discount {
    color: var(--bers-ui-discount);
    font-weight: 700;
}

.bers-ui-danger {
    color: var(--bers-ui-danger);
    font-weight: 700;
}

.bers-ui-muted {
    color: var(--bers-ui-muted);
}

.bers-ui-nowrap {
    white-space: nowrap;
}

.bers-ui-price-old {
    margin-right: 0.5rem;
    color: var(--bers-ui-muted);
    font-size: 0.9em;
    font-weight: 500;
    text-decoration: line-through;
}


/* ==========================================================
   9. OPTIONAL BADGE
   ========================================================== */

.bers-ui-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.75rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}


/* ==========================================================
   10. ACCESSIBILITY / KEYBOARD
   ========================================================== */

.bers-ui-price-table a:focus-visible,
.bers-ui-tariff-grid a:focus-visible,
.bers-ui-price-table button:focus-visible,
.bers-ui-tariff-grid button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


/* ==========================================================
   11. TABLET
   ========================================================== */

@media (max-width: 980px) {

    :root {
        --bers-ui-padding-x: 1.125rem;
        --bers-ui-padding-y: 1.125rem;
    }

    .bers-ui-pricing {
        max-width: calc(100% - 2.5rem);
    }
}


/* ==========================================================
   12. MOBILE — STANDARD TABLE -> CARDS
   ========================================================== */

@media (max-width: 640px) {

    :root {
        --bers-ui-font-size: 0.9375rem;
        --bers-ui-header-size: 1rem;
        --bers-ui-price-size: 1.125rem;
        --bers-ui-padding-x: 1rem;
        --bers-ui-padding-y: 1rem;
    }

    .bers-ui-pricing {
        max-width: calc(100% - 2rem);
    }

    .bers-ui-price-table {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .bers-ui-price-head {
        display: none;
    }

    .bers-ui-price-row,
    .bers-ui-price-table--3col .bers-ui-price-row {
        display: grid;
        grid-template-columns: 1fr;
        overflow: hidden;
        border: 1px solid var(--bers-ui-border);
        border-radius: var(--bers-ui-mobile-radius);
        background: var(--bers-ui-bg);
        box-shadow: var(--bers-ui-shadow);
    }

    .bers-ui-price-row + .bers-ui-price-row {
        margin-top: 0.875rem;
        border-top: 1px solid var(--bers-ui-border);
    }

    .bers-ui-price-row > div,
    .bers-ui-price-table--3col .bers-ui-price-row > div {
        display: block;
        padding: 0.875rem 1rem;
        text-align: left;
    }

    .bers-ui-price-row > div + div,
    .bers-ui-price-table--3col .bers-ui-price-row > div + div {
        border-top: 1px solid var(--bers-ui-border);
        border-left: 0;
    }

    .bers-ui-price-row > div:last-child,
    .bers-ui-price-table--3col .bers-ui-price-row > div:last-child {
        text-align: left;
        font-size: var(--bers-ui-price-size);
    }

    .bers-ui-price-row > div[data-label]::before {
        display: block;
        margin-bottom: 0.35rem;
        color: var(--bers-ui-muted);
        font-size: var(--bers-ui-label-size);
        font-weight: 500;
        line-height: 1.25;
    }


    /* ======================================================
       MOBILE — TARIFF GRID -> STACKED CARDS
       ====================================================== */

    .bers-ui-tariff-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.875rem;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .bers-ui-tariff {
        overflow: hidden;
        border: 1px solid var(--bers-ui-border);
        border-radius: var(--bers-ui-mobile-radius);
        background: var(--bers-ui-bg);
        box-shadow: var(--bers-ui-shadow);
    }

    .bers-ui-tariff + .bers-ui-tariff {
        border-left: 1px solid var(--bers-ui-border);
    }

    .bers-ui-tariff-title {
        padding: 0.875rem 1rem;
    }

    .bers-ui-tariff-value {
        min-height: 0;
        padding: 1.125rem 1rem;
    }
}


/* ==========================================================
   12.1. MOBILE — THREE-COLUMN TABLE
   ========================================================== */

@media (max-width: 640px) {

    /*
     * На мобильном каждая строка остаётся отдельной карточкой,
     * а три колонки идут вертикально:
     *
     * Тренер
     * 1 занятие
     * 4 занятия (пакет)
     */

    .bers-ui-price-table--3col .bers-ui-price-row > div:nth-child(2),
    .bers-ui-price-table--3col .bers-ui-price-row > div:nth-child(3) {
        justify-content: flex-start;
        text-align: left;
    }

    .bers-ui-price-table--3col .bers-ui-price-row > div[data-label]::before {
        display: block;
        margin-bottom: 0.35rem;
        color: var(--bers-ui-muted);
        font-size: var(--bers-ui-label-size);
        font-weight: 500;
        line-height: 1.25;
        content: attr(data-label);
    }
}


/* ==========================================================
   13. SMALL MOBILE
   ========================================================== */


   ========================================================== */

@media (max-width: 380px) {

    .bers-ui-pricing {
        max-width: calc(100% - 1.25rem);
    }

    .bers-ui-price-row > div,
    .bers-ui-tariff-title,
    .bers-ui-tariff-value {
        padding-left: 0.875rem;
        padding-right: 0.875rem;
    }
}


/* ==========================================================
   14. TOUCH DEVICES
   Avoid hover effects sticking after tap.
   ========================================================== */

@media (hover: none) {

    .bers-ui-price-row:hover,
    .bers-ui-tariff:hover {
        background: var(--bers-ui-bg);
    }
}


/* ==========================================================
   15. REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .bers-ui-price-row,
    .bers-ui-tariff {
        transition: none;
    }
}


/* ==========================================================
   END — BERS UI KIT PRICING v1.0.0
   ========================================================== */