/**
 * ============================================
 *  ОБЩИЕ СТИЛИ КАЛЬКУЛЯТОРОВ (common.css)
 * ============================================
 *  Единая дизайн-система для всех калькуляторов:
 *  штукатурка, шпаклёвка, ремонт.
 *
 *  Все селекторы привязаны к ID-обёрткам (#calc-*-wrap)
 *  чтобы побеждать UIkit по специфичности.
 *
 *  Шпаргалка: см. STYLE_GUIDE.md
 * ============================================
 */

/* -----------------------------------------------
   7. Цветовые токены (CSS-переменные)
   ----------------------------------------------- */

:root {
    --krasny: #d32f2f;
    --krasny-dark: #b71c1c;
    --krasny-light: #ffebee;
    --krasny-bg: #fff5f5;
    --krasny-shadow: rgba(211, 47, 47, 0.15);
    --krasny-badge: rgba(211, 47, 47, 0.1);

    --sery: #e0e0e0;
    --sery-bg: #f0f0f0;
    --sery-fon: #fafafa;
    --sery-text: #424242;
    --sery-sub: #757575;
    --sery-light: #718096;

    --header-sery: linear-gradient(135deg, #bcc5cb 0%, #a0adb5 100%);
    --header-hover: linear-gradient(135deg, #78909c 0%, #546e7a 100%);
    --header-krasny: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
    --header-economy: linear-gradient(135deg, #9e9e9e 0%, #757575 100%);
    --header-secondary: linear-gradient(135deg, #5c6bc0 0%, #3f51b5 100%);

    --radius-card: 12px;
    --radius-btn: 8px;
    --radius-badge: 12px;
}

/* -----------------------------------------------
   SCOPE: привязка к обёрткам калькуляторов
   Все стили работают внутри #calc-repair-wrap,
   #calc-putty-wrap, #calc-plaster-wrap
   ----------------------------------------------- */

/* -----------------------------------------------
   1. KARTOCHKA — Карточка с заголовком
   ----------------------------------------------- */

#calc-repair-wrap .kartochka,
#calc-putty-wrap .kartochka,
#calc-plaster-wrap .kartochka {
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f0f0f0;
    transform: scale(0.97);
}

/* Hover только для мыши (не тач) */
@media (pointer: fine) {

    #calc-repair-wrap .kartochka:hover,
    #calc-putty-wrap .kartochka:hover,
    #calc-plaster-wrap .kartochka:hover {
        transform: translateY(-3px) scale(0.99);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        border-color: #d32f2f;
        background: #fafafa;
    }

    #calc-repair-wrap .kartochka.selected:hover,
    #calc-putty-wrap .kartochka.selected:hover,
    #calc-plaster-wrap .kartochka.selected:hover {
        transform: translateY(-3px) scale(1.01);
    }
}

#calc-repair-wrap .kartochka.selected,
#calc-putty-wrap .kartochka.selected,
#calc-plaster-wrap .kartochka.selected {
    border-color: #d32f2f;
    box-shadow: 0 8px 20px rgba(211, 47, 47, 0.15);
    background: #fff5f5;
    transform: scale(1);
}

#calc-repair-wrap .kartochka input[type="radio"],
#calc-repair-wrap .kartochka input[type="checkbox"],
#calc-putty-wrap .kartochka input[type="radio"],
#calc-putty-wrap .kartochka input[type="checkbox"],
#calc-plaster-wrap .kartochka input[type="radio"],
#calc-plaster-wrap .kartochka input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Заголовок карточки */
#calc-repair-wrap .kartochka-header,
#calc-putty-wrap .kartochka-header,
#calc-plaster-wrap .kartochka-header {
    padding: 16px 15px;
    border-bottom: 1px solid #eee;
    background: linear-gradient(135deg, #bcc5cb 0%, #a0adb5 100%);
    color: #fff;
    text-align: center;
    transition: all 0.3s ease;
}

@media (pointer: fine) {

    #calc-repair-wrap .kartochka:hover .kartochka-header,
    #calc-putty-wrap .kartochka:hover .kartochka-header,
    #calc-plaster-wrap .kartochka:hover .kartochka-header {
        background: linear-gradient(135deg, #78909c 0%, #546e7a 100%);
        color: white;
    }
}

#calc-repair-wrap .kartochka.selected .kartochka-header,
#calc-putty-wrap .kartochka.selected .kartochka-header,
#calc-plaster-wrap .kartochka.selected .kartochka-header {
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
    color: white;
}

/* Цветовые варианты заголовка */
#calc-repair-wrap .kartochka-header.economy,
#calc-putty-wrap .kartochka-header.economy,
#calc-plaster-wrap .kartochka-header.economy {
    background: linear-gradient(135deg, #9e9e9e 0%, #757575 100%);
    color: white;
}

#calc-repair-wrap .kartochka-header.primary,
#calc-putty-wrap .kartochka-header.primary,
#calc-plaster-wrap .kartochka-header.primary {
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
    color: white;
}

#calc-repair-wrap .kartochka-header.secondary,
#calc-putty-wrap .kartochka-header.secondary,
#calc-plaster-wrap .kartochka-header.secondary {
    background: linear-gradient(135deg, #5c6bc0 0%, #3f51b5 100%);
    color: white;
}

/* Заголовок — название */
#calc-repair-wrap .kartochka-title,
#calc-putty-wrap .kartochka-title,
#calc-plaster-wrap .kartochka-title {
    font-size: 1rem;
    font-weight: 700;
}

/* Заголовок — цена */
#calc-repair-wrap .kartochka-hprice,
#calc-putty-wrap .kartochka-hprice,
#calc-plaster-wrap .kartochka-hprice {
    font-size: 1.1rem;
    font-weight: 700;
}

/* Заголовок — flex для названия и цены в строку */
#calc-repair-wrap .kartochka-header.flex-row,
#calc-putty-wrap .kartochka-header.flex-row,
#calc-plaster-wrap .kartochka-header.flex-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
}

/* Тело карточки */
#calc-repair-wrap .kartochka-body,
#calc-putty-wrap .kartochka-body,
#calc-plaster-wrap .kartochka-body {
    padding: 15px;
    flex: 1;
}

/* -----------------------------------------------
   2. PLITKA — Плоская плитка (без заголовка)
   ----------------------------------------------- */

#calc-repair-wrap .plitka,
#calc-putty-wrap .plitka,
#calc-plaster-wrap .plitka {
    display: block;
    padding: 18px;
    background: #fafafa;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

@media (pointer: fine) {

    #calc-repair-wrap .plitka:hover,
    #calc-putty-wrap .plitka:hover,
    #calc-plaster-wrap .plitka:hover {
        border-color: #d32f2f;
        background: #fff;
        box-shadow: 0 4px 12px rgba(211, 47, 47, 0.08);
    }
}

#calc-repair-wrap .plitka:has(input:checked),
#calc-repair-wrap .plitka.active,
#calc-putty-wrap .plitka:has(input:checked),
#calc-putty-wrap .plitka.active,
#calc-plaster-wrap .plitka:has(input:checked),
#calc-plaster-wrap .plitka.active {
    border-color: #d32f2f;
    background: #ffebee;
}

#calc-repair-wrap .plitka input[type="radio"],
#calc-repair-wrap .plitka input[type="checkbox"],
#calc-putty-wrap .plitka input[type="radio"],
#calc-putty-wrap .plitka input[type="checkbox"],
#calc-plaster-wrap .plitka input[type="radio"],
#calc-plaster-wrap .plitka input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

#calc-repair-wrap .plitka-badge,
#calc-putty-wrap .plitka-badge,
#calc-plaster-wrap .plitka-badge {
    display: block;
    font-weight: 600;
    color: #424242;
    margin-bottom: 6px;
    font-size: 15px;
    transition: all 0.2s;
}

#calc-repair-wrap .plitka.active .plitka-badge,
#calc-repair-wrap .plitka:has(input:checked) .plitka-badge,
#calc-putty-wrap .plitka.active .plitka-badge,
#calc-putty-wrap .plitka:has(input:checked) .plitka-badge,
#calc-plaster-wrap .plitka.active .plitka-badge,
#calc-plaster-wrap .plitka:has(input:checked) .plitka-badge {
    color: #d32f2f;
    font-weight: 700;
}

#calc-repair-wrap .plitka-desc,
#calc-putty-wrap .plitka-desc,
#calc-plaster-wrap .plitka-desc {
    display: block;
    font-size: 13px;
    color: #757575;
    margin-bottom: 8px;
}

#calc-repair-wrap .plitka-price,
#calc-putty-wrap .plitka-price,
#calc-plaster-wrap .plitka-price {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #d32f2f;
}

/* -----------------------------------------------
   3. GALOCHKA — Чекбокс-элемент со галочкой
   ----------------------------------------------- */

#calc-repair-wrap .galochka,
#calc-putty-wrap .galochka,
#calc-plaster-wrap .galochka {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fafafa;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    min-height: 56px;
}

@media (pointer: fine) {

    #calc-repair-wrap .galochka:hover,
    #calc-putty-wrap .galochka:hover,
    #calc-plaster-wrap .galochka:hover {
        border-color: #d32f2f;
        background: #fff;
        box-shadow: 0 4px 12px rgba(211, 47, 47, 0.08);
    }
}

#calc-repair-wrap .galochka input[type="checkbox"],
#calc-putty-wrap .galochka input[type="checkbox"],
#calc-plaster-wrap .galochka input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

#calc-repair-wrap .galochka:has(input:checked),
#calc-putty-wrap .galochka:has(input:checked),
#calc-plaster-wrap .galochka:has(input:checked) {
    border-color: #d32f2f;
    background: #ffebee;
}

/* Галочка-квадрат */
#calc-repair-wrap .galochka-mark,
#calc-putty-wrap .galochka-mark,
#calc-plaster-wrap .galochka-mark {
    width: 22px;
    height: 22px;
    border: 2px solid #bdbdbd;
    border-radius: 6px;
    flex-shrink: 0;
    transition: all 0.25s ease;
    position: relative;
    background: #fff;
}

#calc-repair-wrap .galochka input:checked~.galochka-mark,
#calc-putty-wrap .galochka input:checked~.galochka-mark,
#calc-plaster-wrap .galochka input:checked~.galochka-mark {
    background: #d32f2f;
    border-color: #d32f2f;
}

#calc-repair-wrap .galochka input:checked~.galochka-mark::after,
#calc-putty-wrap .galochka input:checked~.galochka-mark::after,
#calc-plaster-wrap .galochka input:checked~.galochka-mark::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

/* Текст */
#calc-repair-wrap .galochka-text,
#calc-putty-wrap .galochka-text,
#calc-plaster-wrap .galochka-text {
    flex: 1;
    font-size: 14px;
    color: #424242;
    font-weight: 500;
    transition: all 0.2s;
}

#calc-repair-wrap .galochka input:checked~.galochka-text,
#calc-putty-wrap .galochka input:checked~.galochka-text,
#calc-plaster-wrap .galochka input:checked~.galochka-text {
    color: #d32f2f;
    font-weight: 600;
}

/* Цена-бейдж */
#calc-repair-wrap .galochka-tsena,
#calc-putty-wrap .galochka-tsena,
#calc-plaster-wrap .galochka-tsena {
    font-size: 12px;
    font-weight: 700;
    color: #d32f2f;
    background: rgba(211, 47, 47, 0.1);
    padding: 3px 10px;
    border-radius: 12px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* -----------------------------------------------
   4. KNOPKA-BEJDZH — Строчная кнопка-бейдж
   ----------------------------------------------- */

#calc-repair-wrap .knopka-bejdzh,
#calc-putty-wrap .knopka-bejdzh,
#calc-plaster-wrap .knopka-bejdzh {
    display: block;
    padding: 11px 14px;
    text-align: center;
    background: #fafafa;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-weight: 500;
    color: #424242;
    transition: all 0.25s ease;
    font-size: 14px;
    cursor: pointer;
}

@media (pointer: fine) {

    #calc-repair-wrap .knopka-bejdzh:hover,
    #calc-putty-wrap .knopka-bejdzh:hover,
    #calc-plaster-wrap .knopka-bejdzh:hover {
        border-color: #d32f2f;
        background: #fff;
    }
}

#calc-repair-wrap .knopka-bejdzh.active,
#calc-putty-wrap .knopka-bejdzh.active,
#calc-plaster-wrap .knopka-bejdzh.active {
    border-color: #d32f2f;
    background: #ffebee;
    color: #d32f2f;
}

#calc-repair-wrap .knopka-bejdzh input[type="radio"],
#calc-putty-wrap .knopka-bejdzh input[type="radio"],
#calc-plaster-wrap .knopka-bejdzh input[type="radio"] {
    display: none;
}

/* -----------------------------------------------
   5. PODSKAZKA — Тултип «подробнее»
   ----------------------------------------------- */

#calc-repair-wrap .podskazka-wrap,
#calc-putty-wrap .podskazka-wrap,
#calc-plaster-wrap .podskazka-wrap {
    position: relative;
    display: inline-block;
    text-align: right;
    margin-top: 4px;
}

#calc-repair-wrap .podskazka-btn,
#calc-putty-wrap .podskazka-btn,
#calc-plaster-wrap .podskazka-btn {
    display: inline-block;
    font-size: .8rem;
    color: #999;
    cursor: pointer;
    font-weight: 400;
    opacity: 1;
    transition: color 0.2s ease, opacity 0.2s ease;
    background: none;
    border: none;
    padding: 0;
}

#calc-repair-wrap .podskazka-btn:hover,
#calc-putty-wrap .podskazka-btn:hover,
#calc-plaster-wrap .podskazka-btn:hover {
    opacity: 1;
    color: #d32f2f;
}

#calc-repair-wrap .podskazka-text,
#calc-putty-wrap .podskazka-text,
#calc-plaster-wrap .podskazka-text {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: rgba(97, 97, 97, .95);
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: .8rem;
    line-height: 1.4;
    white-space: normal;
    max-width: 320px;
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
    pointer-events: none;
}

#calc-repair-wrap .podskazka-text a,
#calc-putty-wrap .podskazka-text a,
#calc-plaster-wrap .podskazka-text a {
    color: #90caf9;
    text-decoration: underline;
}

#calc-repair-wrap .podskazka-text a:hover,
#calc-putty-wrap .podskazka-text a:hover,
#calc-plaster-wrap .podskazka-text a:hover {
    color: #fff;
}

#calc-repair-wrap .podskazka-text::after,
#calc-putty-wrap .podskazka-text::after,
#calc-plaster-wrap .podskazka-text::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 16px;
    border: 6px solid transparent;
    border-top-color: rgba(97, 97, 97, .95);
}

/* Показ тултипа ТОЛЬКО через JS-класс .otkryt (hover+tap) */
#calc-repair-wrap .podskazka-wrap.otkryt .podskazka-text,
#calc-putty-wrap .podskazka-wrap.otkryt .podskazka-text,
#calc-plaster-wrap .podskazka-wrap.otkryt .podskazka-text {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* -----------------------------------------------
   6. SETKA — Грид-сетки для карточек
   ----------------------------------------------- */

#calc-repair-wrap .setka-2,
#calc-putty-wrap .setka-2,
#calc-plaster-wrap .setka-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

#calc-repair-wrap .setka-3,
#calc-putty-wrap .setka-3,
#calc-plaster-wrap .setka-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

#calc-repair-wrap .setka-4,
#calc-putty-wrap .setka-4,
#calc-plaster-wrap .setka-4 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

/* 1 колонка на мобильном, 3 на десктопе */
#calc-repair-wrap .setka-raboty,
#calc-putty-wrap .setka-raboty,
#calc-plaster-wrap .setka-raboty {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {

    #calc-repair-wrap .setka-raboty,
    #calc-putty-wrap .setka-raboty,
    #calc-plaster-wrap .setka-raboty {
        grid-template-columns: repeat(3, 1fr);
    }
}