/*
 * УГ — Прейскурант платных услуг.
 *
 * Оформление повторяет сайт ugmus.kz: фирменный синий #014A99, золотой акцент
 * #B7943C, светлые карточки #F2F6F7 и шрифт Montserrat (его уже подключает
 * Elementor). Цвета темы Kadence берутся из --global-palette* с запасными
 * значениями, как в плагине ug-docs.
 *
 * Страница может стоять на полноширинном шаблоне Elementor без контейнера,
 * поэтому центрирующий контейнер и отступы задаём сами.
 */

.ugprice {
    --ug-deep: #014a99;
    --ug-deep-2: #0a3d75;
    --ug-brand: var(--global-palette1, #2b6cb0);
    --ug-gold: #b7943c;
    --ug-gold-soft: #f6efdd;
    --ug-sky: #e5f5fe;

    --ug-ink-strong: var(--global-palette3, #1a202c);
    --ug-ink: var(--global-palette4, #2d3748);
    --ug-muted: var(--global-palette6, #718096);
    --ug-card: #f2f6f7;
    --ug-bg: var(--global-palette9, #ffffff);
    --ug-line: #dadada;
    --ug-line-soft: #e8edf0;

    --ug-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ug-radius-lg: 20px;
    --ug-radius: 13px;
    --ug-pill: 50px;
    --ug-shadow: 0 1px 2px rgba(1, 43, 92, .06), 0 6px 20px rgba(1, 43, 92, .06);

    /* Отступ липких элементов от верха окна (учитываем панель WordPress). */
    --ug-stick: calc(var(--wp-admin--admin-bar--height, 0px) + 12px);

    /* Ширина как у контента остальных страниц сайта (контейнер Elementor 1400px). */
    max-width: 1424px;
    margin-inline: auto;
    padding: 40px 12px 72px;
    color: var(--ug-ink);
    font-family: var(--ug-display);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.ugprice *,
.ugprice *::before,
.ugprice *::after { box-sizing: border-box; }

.ugprice svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

/*
 * Страница на обычном шаблоне сайта (Elementor, шаблон страницы 262): шапку
 * с заголовком и крошками даёт шаблон, а контент там — карточка 77% ширины
 * и навигация справа. Прейскуранту нужна вся ширина: колонку навигации
 * прячем, карточку контента делаем прозрачной.
 */
.ugprice-page .elementor-262 .elementor-element-dd67314 { display: none !important; }
.ugprice-page .elementor-262 .elementor-element-a52cee2 { width: 100% !important; }

.ugprice-page .elementor-262 .elementor-element-793a2bf {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: inherit !important;
    font-size: 16px !important;
}

.ugprice-page .elementor-262 .ugprice {
    max-width: none;
    padding: 10px 0 40px;
}

/* Элементы, которые имеют смысл только со скриптом. */
.ugprice:not(.is-ready) .ugprice-js { display: none !important; }

.ugprice .screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- ссылки-кнопки ---------- */

.ugprice .ugprice-link {
    padding: 4px 2px;
    border: 0;
    background: none;
    color: var(--ug-deep);
    font: 500 14px/1.2 var(--ug-display);
    text-decoration: underline;
    text-decoration-color: rgba(1, 74, 153, .3);
    text-underline-offset: 3px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: none;
}

.ugprice .ugprice-link:hover { color: var(--ug-deep-2); background: none; text-decoration-color: currentColor; }

.ugprice button:focus-visible,
.ugprice a:focus-visible,
.ugprice summary:focus-visible {
    outline: 3px solid rgba(183, 148, 60, .55);
    outline-offset: 2px;
}

/* ---------- поиск ---------- */

.ugprice-bar {
    position: sticky;
    top: var(--ug-stick);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px 18px;
    flex-wrap: wrap;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid var(--ug-line-soft);
    border-radius: var(--ug-pill);
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: var(--ug-shadow);
}

.ugprice-search {
    position: relative;
    flex: 1 1 320px;
    display: flex;
    align-items: center;
    margin: 0;
}

.ugprice-search > svg {
    position: absolute;
    left: 18px;
    color: var(--ug-deep);
    pointer-events: none;
}

.ugprice .ugprice-search__input {
    width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 46px 0 50px !important;
    border: 1px solid var(--ug-line) !important;
    border-radius: var(--ug-pill) !important;
    background: var(--ug-card) !important;
    color: var(--ug-ink-strong) !important;
    font: 500 16px/1 var(--ug-display) !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}

.ugprice .ugprice-search__input::-webkit-search-cancel-button { display: none; }
.ugprice .ugprice-search__input::placeholder { color: var(--ug-muted); font-weight: 400; }

.ugprice .ugprice-search__input:focus {
    border-color: var(--ug-deep) !important;
    background: #fff !important;
    outline: 0;
    box-shadow: 0 0 0 4px rgba(1, 74, 153, .12) !important;
}

.ugprice .ugprice-search__clear {
    position: absolute;
    right: 8px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #e3e9ee;
    color: var(--ug-ink);
    font: 400 22px/32px var(--ug-display);
    cursor: pointer;
    box-shadow: none;
}

.ugprice .ugprice-search__clear:hover { background: #d3dbe2; color: var(--ug-ink-strong); }

.ugprice .ugprice-found {
    margin: 0;
    color: var(--ug-muted);
    font-size: 14px;
    white-space: nowrap;
}

.ugprice-found:empty { display: none; }
.ugprice-bar .ugprice-link { margin-right: 12px; }

/* ---------- раскладка ---------- */

.ugprice-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.ugprice--compact .ugprice-layout { grid-template-columns: minmax(0, 1fr); }

/* ---------- оглавление ---------- */

.ugprice-toc {
    position: sticky;
    top: calc(var(--ug-stick) + 92px);
    max-height: calc(100vh - var(--ug-stick) - 110px);
    overflow: auto;
    padding: 18px 10px 18px 18px;
    border: 1px solid var(--ug-line-soft);
    border-radius: var(--ug-radius-lg);
    background: var(--ug-card);
    scrollbar-width: thin;
}

.ugprice .ugprice-toc__title {
    margin: 0 0 8px 10px;
    color: var(--ug-deep);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ugprice .ugprice-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ugprice .ugprice-toc__list li { margin: 0; }

.ugprice .ugprice-toc a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 9px;
    color: var(--ug-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.ugprice .ugprice-toc a:hover { background: #fff; color: var(--ug-deep); }

.ugprice .ugprice-toc a.is-active {
    background: #fff;
    color: var(--ug-deep);
    box-shadow: inset 3px 0 0 var(--ug-gold);
}

.ugprice-toc__count {
    min-width: 30px;
    padding: 2px 7px;
    border-radius: var(--ug-pill);
    background: #fff;
    color: var(--ug-muted);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.ugprice-toc a.is-active .ugprice-toc__count { background: var(--ug-sky); color: var(--ug-deep); }
.ugprice-toc a.is-empty { opacity: .4; }
.ugprice-toc a.is-hit .ugprice-toc__count { background: var(--ug-gold); color: #fff; }

/* ---------- разделы ---------- */

.ugprice-sec {
    margin: 0 0 12px;
    border: 1px solid var(--ug-line-soft);
    border-radius: var(--ug-radius-lg);
    background: var(--ug-bg);
    box-shadow: 0 1px 2px rgba(1, 43, 92, .04);
    scroll-margin-top: calc(var(--ug-stick) + 92px);
    transition: box-shadow .2s, border-color .2s;
}

.ugprice-sec[open] { border-color: var(--ug-line); box-shadow: var(--ug-shadow); }
.ugprice-sec[hidden] { display: none; }

.ugprice-sec__head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;
    border-radius: var(--ug-radius-lg);
}

.ugprice-sec__head::-webkit-details-marker { display: none; }
.ugprice-sec__head:hover .ugprice-sec__title { color: var(--ug-deep); }

.ugprice-sec__titles {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ugprice-sec__title {
    color: var(--ug-ink-strong);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    transition: color .15s;
}

.ugprice-sec__full {
    color: var(--ug-muted);
    font-size: 13px;
    line-height: 1.35;
}

.ugprice-sec__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.ugprice-sec__count {
    color: var(--ug-muted);
    font-size: 13px;
    white-space: nowrap;
}

.ugprice-sec__chev {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ug-card);
    position: relative;
    transition: transform .2s, background-color .2s;
}

.ugprice-sec__chev::before {
    content: "";
    position: absolute;
    left: 50%; top: 45%;
    width: 8px; height: 8px;
    border-right: 2px solid var(--ug-deep);
    border-bottom: 2px solid var(--ug-deep);
    transform: translate(-50%, -50%) rotate(45deg);
}

.ugprice-sec[open] .ugprice-sec__chev { transform: rotate(180deg); background: var(--ug-sky); }

.ugprice-sec__body { padding: 0 22px 18px; }

.ugprice .ugprice-note {
    margin: 0 0 12px;
    padding: 12px 16px;
    border-left: 3px solid var(--ug-gold);
    border-radius: 0 10px 10px 0;
    background: var(--ug-gold-soft);
    color: var(--ug-ink);
    font-size: 14px;
}

.ugprice .ugprice-group__title {
    margin: 18px 0 4px;
    padding: 0;
    color: var(--ug-deep);
    font: 600 13px/1.3 var(--ug-display);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ugprice-group:first-child .ugprice-group__title { margin-top: 4px; }
.ugprice-group[hidden] { display: none; }

/* ---------- строки ---------- */

.ugprice .ugprice-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ugprice .ugprice-row {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0;
    padding: 11px 10px;
    border-bottom: 1px solid var(--ug-line-soft);
    border-radius: 8px;
    transition: background-color .12s;
}

.ugprice-row:last-child { border-bottom: 0; }
.ugprice-row[hidden] { display: none; }
.ugprice-row:hover { background: #f7fafb; }

.ugprice-row__name {
    color: var(--ug-ink-strong);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
}

.ugprice-row__note {
    display: block;
    color: var(--ug-muted);
    font-size: 13px;
}

.ugprice-row__dots {
    flex: 1;
    min-width: 16px;
    border-bottom: 1px dotted #c3ccd4;
    transform: translateY(-4px);
}

.ugprice-row__price {
    flex: none;
    color: var(--ug-deep);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ugprice-row--noprice .ugprice-row__price { color: var(--ug-muted); font-weight: 500; }

.ugprice mark {
    padding: 0 1px;
    border-radius: 3px;
    background: #fbe7b1;
    color: inherit;
}

/* ---------- пусто и подвал ---------- */

.ugprice-empty {
    padding: 40px 24px;
    border: 1px dashed var(--ug-line);
    border-radius: var(--ug-radius-lg);
    background: var(--ug-card);
    text-align: center;
    color: var(--ug-muted);
}

.ugprice .ugprice-empty p { margin: 0 auto; max-width: 520px; font-size: 15px; }
.ugprice .ugprice-empty .ugprice-empty__title { margin-bottom: 6px; color: var(--ug-ink-strong); font-size: 18px; font-weight: 600; }

.ugprice-foot {
    margin-top: 24px;
    padding: 18px 22px;
    border-radius: var(--ug-radius);
    background: var(--ug-card);
    color: var(--ug-muted);
    font-size: 13px;
}

.ugprice .ugprice-foot p { margin: 0; }
.ugprice .ugprice-foot p + p { margin-top: 6px; }

/* ---------- адаптив ---------- */

@media (max-width: 960px) {
    .ugprice-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }

    /* Оглавление превращается в горизонтальную ленту разделов. */
    .ugprice-toc {
        position: static;
        max-height: none;
        margin: -6px -12px 14px;
        padding: 0 12px 6px;
        border: 0;
        border-radius: 0;
        background: none;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ugprice-toc::-webkit-scrollbar { display: none; }
    .ugprice .ugprice-toc__title { display: none; }
    .ugprice .ugprice-toc__list { display: flex; gap: 8px; width: max-content; }

    .ugprice .ugprice-toc a {
        padding: 8px 8px 8px 14px;
        border: 1px solid var(--ug-line);
        border-radius: var(--ug-pill);
        background: #fff;
        white-space: nowrap;
    }

    .ugprice .ugprice-toc a.is-active { box-shadow: none; border-color: var(--ug-deep); }
    .ugprice-toc__count { background: var(--ug-card); }
}

@media (max-width: 640px) {
    .ugprice { font-size: 15px; }
    .ugprice { padding-top: 24px; }

    /* Панель поиска в одну строку: на телефоне каждый пиксель высоты дорог. */
    .ugprice-bar { gap: 4px 10px; padding: 6px; border-radius: 30px; }
    .ugprice-search { flex-basis: 100%; }
    .ugprice .ugprice-search__input { height: 46px !important; font-size: 16px !important; }
    .ugprice .ugprice-found { margin: 0 0 2px 16px; font-size: 13px; }
    .ugprice-bar .ugprice-link { display: none; }
    .ugprice-toc li:has(> a.is-empty) { display: none; }

    .ugprice-sec { border-radius: 16px; }
    .ugprice-sec__head { flex-wrap: wrap; gap: 8px 12px; padding: 16px; }
    .ugprice-sec__titles { flex-basis: calc(100% - 50px); }
    .ugprice-sec__title { font-size: 16px; }
    .ugprice-sec__full { display: none; }
    .ugprice-sec__meta { order: 3; flex-basis: 100%; }
    .ugprice-sec__chev { order: 2; width: 30px; height: 30px; }
    .ugprice-sec__body { padding: 0 10px 12px; }

    /* Строка: название сверху, цена под ним — без сжатия текста. */
    .ugprice .ugprice-row { flex-wrap: wrap; gap: 2px 10px; padding: 11px 8px; }
    .ugprice-row__name { flex-basis: 100%; font-size: 15px; }
    .ugprice-row__dots { display: none; }
    .ugprice-row__price { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .ugprice *, .ugprice *::before, .ugprice *::after { transition: none !important; animation: none !important; }
}