/* =========================================================
   LOCO Pricing Page — v1.9.1
   ========================================================= */

:root{
    --ltk-blue-500: #1F65E9;
    --ltk-blue-600: #1E56C3;
    --ltk-blue-300: #6683B6;
    --ltk-blue-100: #AFC5EB;
    --ltk-bg-alt: #F5F9FE;
    --ltk-neutral-200: #DCE7F8;
    --ltk-neutral-600: #415170;
    --ltk-neutral-900: #1E1E1E;
    --ltk-white: #FFFFFF;
    --ltk-font: "Gilroy","Inter",system-ui,-apple-system,sans-serif;
}

.loco-pricing-page.loco-pricing-page,
.loco-pricing-page.loco-pricing-page *,
.loco-pricing-page.loco-pricing-page *::before,
.loco-pricing-page.loco-pricing-page *::after { box-sizing: border-box; }

/* =========================================================
   ГРІД
   ========================================================= */
.loco-pricing-page.loco-pricing-page {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 16px;
    font-family: var(--ltk-font) !important;
    color: var(--ltk-neutral-900) !important;
    display: grid;
    grid-template-columns: 376px 1fr;
    gap: 32px;
    align-items: start;
    position: relative;
}

/* ЛІВА КОЛОНКА — sticky на десктопі */
.loco-pricing-page.loco-pricing-page .loco-pricing-page__aside {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-self: start;
}

/* ========================================================
   САЙДБАР НАВІГАЦІЇ
   ========================================================= */
.loco-pricing-nav.loco-pricing-nav {
    width: 100%;
    max-width: 376px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.loco-pricing-nav.loco-pricing-nav .loco-pricing-nav__title {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ltk-blue-500) !important;
    font-family: var(--ltk-font) !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.loco-pricing-nav.loco-pricing-nav .loco-pricing-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.loco-pricing-nav.loco-pricing-nav .loco-pricing-nav__item {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none !important;
}
.loco-pricing-nav.loco-pricing-nav .loco-pricing-nav__item::before,
.loco-pricing-nav.loco-pricing-nav .loco-pricing-nav__item::marker {
    content: none !important;
    display: none !important;
}

.loco-pricing-nav.loco-pricing-nav .loco-pricing-nav__link {
    color: #6687BE !important;
    font-family: var(--ltk-font) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
    text-align: left;
    transition: color .18s ease, font-weight .18s ease;
}
.loco-pricing-nav.loco-pricing-nav .loco-pricing-nav__link:hover {
    color: var(--ltk-blue-600) !important;
}

/* Bullet — 6x6 круг, схований за замовч. */
.loco-pricing-nav.loco-pricing-nav .loco-pricing-nav__bullet {
    width: 6px;
    height: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 6px;
    opacity: 0;
    transition: opacity .18s ease;
    color: var(--ltk-blue-600);
}
.loco-pricing-nav.loco-pricing-nav .loco-pricing-nav__bullet svg {
    width: 6px !important;
    height: 6px !important;
    display: block;
}

/* Активний пункт */
.loco-pricing-nav.loco-pricing-nav .loco-pricing-nav__item.is-active .loco-pricing-nav__bullet {
    opacity: 1;
}
.loco-pricing-nav.loco-pricing-nav .loco-pricing-nav__item.is-active .loco-pricing-nav__link {
    color: var(--ltk-blue-600) !important;
    font-weight: 700 !important;
}

/* Шапка сайдбара (тільки на планшет/моб) */
.loco-pricing-nav.loco-pricing-nav .loco-pricing-nav__head {
    display: none;
}

/* =========================================================
   БАНЕР ГАРАНТІЇ
   ========================================================= */
.loco-pricing-guarantee.loco-pricing-guarantee {
    width: 100%;
    max-width: 376px;
    padding: 24px;
    background: linear-gradient(90deg, #034DCF 0%, #3074F9 100%);
    border-radius: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    overflow: hidden;
    transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .28s ease;
}

.loco-pricing-guarantee.loco-pricing-guarantee .loco-pricing-guarantee__body {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.loco-pricing-guarantee.loco-pricing-guarantee .loco-pricing-guarantee__title {
    margin: 0 !important;
    padding: 0 !important;
    color: #FFFFFF !important;
    font-family: var(--ltk-font) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
}

.loco-pricing-guarantee.loco-pricing-guarantee .loco-pricing-guarantee__text {
    margin: 0 !important;
    padding: 0 !important;
    color: #FFFFFF !important;
    font-family: var(--ltk-font) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}
/* Два варіанти тексту: full для desktop/planshet, short для mobile */
.loco-pricing-guarantee.loco-pricing-guarantee .loco-pricing-guarantee__text--short { display: none; }
.loco-pricing-guarantee.loco-pricing-guarantee .loco-pricing-guarantee__text--full  { display: block; }

.loco-pricing-guarantee.loco-pricing-guarantee .loco-pricing-guarantee__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 56px;
    padding: 12px 24px;
    background: var(--ltk-neutral-900) !important;
    color: #FFFFFF !important;
    font-family: var(--ltk-font) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    border: 0;
    border-radius: 16px;
    cursor: pointer;
    transition: background .18s ease;
}
.loco-pricing-guarantee.loco-pricing-guarantee .loco-pricing-guarantee__cta:hover {
    background: #000 !important;
}
.loco-pricing-guarantee.loco-pricing-guarantee .loco-pricing-guarantee__cta-icon {
    display: none;
}
.loco-pricing-guarantee.loco-pricing-guarantee .loco-pricing-guarantee__cta-icon svg {
    width: 24px;
    height: 24px;
    color: #FFFFFF;
}

/* =========================================================
   ГОЛОВНА КОЛОНКА
   ========================================================= */
.loco-pricing-page.loco-pricing-page .loco-pricing-page__main {
    display: flex;
    flex-direction: column;
    gap: 60px;
    min-width: 0;
}

.loco-pricing-block.loco-pricing-block {
    width: 100%;
    padding: 40px 97px;
    background: radial-gradient(ellipse 136.09% 115.59% at 5.16% 2.40%, #E8F2FD 0%, #FEFDFF 100%);
    border-radius: 32px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    scroll-margin-top: 120px;
}

.loco-pricing-block.loco-pricing-block .loco-pricing-block__title {
    margin: 0 !important;
    padding: 0 !important;
    align-self: stretch;
    text-align: center;
    color: var(--ltk-blue-500) !important;
    font-family: var(--ltk-font) !important;
    font-size: 56px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
}

/* =========================================================
   ТАБЛИЦЯ ЦІН
   ========================================================= */
.loco-pricing-block .loco-pricing-table {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.loco-pricing-block .loco-pricing-table__title {
    margin: 0 !important;
    padding: 0 !important;
    align-self: stretch;
    text-align: center;
    color: var(--ltk-blue-500) !important;
    font-family: var(--ltk-font) !important;
    font-size: 40px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
}

.loco-pricing-block .loco-pricing-table__tabs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style: none;
    align-self: center;
}

.loco-pricing-block .loco-pricing-table__tab {
    padding: 16px 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 16px;
    outline: 1px solid var(--ltk-blue-100);
    outline-offset: -1px;
    color: var(--ltk-neutral-900) !important;
    font-family: var(--ltk-font) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    cursor: pointer;
    border: 0;
    transition: background .18s ease;
    white-space: nowrap;
    text-align: center;
}
.loco-pricing-block .loco-pricing-table__tab:hover {
    background: rgba(175, 197, 235, 0.35);
}
.loco-pricing-block .loco-pricing-table__tab.is-active {
    background: var(--ltk-blue-100) !important;
}

.loco-pricing-block .loco-pricing-table__wrap { width: 100%; }
.loco-pricing-block .loco-pricing-table__panel { display: none; }
.loco-pricing-block .loco-pricing-table__panel.is-active { display: block; }

.loco-pricing-block .loco-pricing-table__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}
.loco-pricing-block .loco-pricing-table__table th,
.loco-pricing-block .loco-pricing-table__table td {
    padding: 16px 8px;
    border: 1px solid var(--ltk-neutral-200);
    color: var(--ltk-neutral-600) !important;
    font-family: var(--ltk-font) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    text-align: left;
    vertical-align: middle;
    background: transparent;
}
.loco-pricing-block .loco-pricing-table__table th             { font-weight: 700 !important; }
.loco-pricing-block .loco-pricing-table__table th:first-child { font-weight: 400 !important; }
.loco-pricing-block .loco-pricing-table__table td:first-child { font-weight: 700 !important; }
.loco-pricing-block .loco-pricing-table__table thead tr th:first-child { border-top-left-radius: 16px; }
.loco-pricing-block .loco-pricing-table__table thead tr th:last-child  { border-top-right-radius: 16px; }
.loco-pricing-block .loco-pricing-table__table tbody tr:last-child td:first-child { border-bottom-left-radius: 16px; }
.loco-pricing-block .loco-pricing-table__table tbody tr:last-child td:last-child  { border-bottom-right-radius: 16px; }

/* =========================================================
   ПЛАНШЕТ (601-1024)
   ========================================================= */
@media (max-width: 1024px){
    /* Прибираємо горизонтальні відступи повністю */
    .loco-pricing-page.loco-pricing-page {
        display: block;
        padding: 0;
    }

    /* Aside: display:contents — щоб nav і guarantee стали прямими дітьми .loco-pricing-page.
       Тоді sticky-контекст для .loco-pricing-nav = .loco-pricing-page (велика висота всієї сторінки),
       і sticky реально працює. Fixed guarantee — не залежить від sticky-контексту. */
    .loco-pricing-page.loco-pricing-page .loco-pricing-page__aside {
        display: contents;
    }

    /* ---- Sticky sidebar внутри .loco-pricing-page (не fixed!) ---- */
    /* За замовч. — рендериться на своєму місці (перед main). */
    /* Коли скроле "прилипає" в межах контейнера і показує анімовану плашку. */
    .loco-pricing-nav.loco-pricing-nav {
        position: sticky;
        top: calc(var(--loco-header-h, 88px) + 12px);
        z-index: 40;
        margin: 0 20px 20px;
        max-width: none;
        width: auto;
        background: var(--ltk-white);
        border-radius: 24px;
        outline: 1px solid var(--ltk-blue-100);
        outline-offset: -1px;
        padding: 16px 24px;
        gap: 16px;
        box-shadow: 0 8px 20px rgba(3, 42, 120, .12);
        transform: translateY(0);
        transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .28s ease;
    }
    .loco-pricing-nav.loco-pricing-nav.is-hidden {
        transform: translateY(calc(-100% - var(--loco-header-h, 88px) - 40px));
    }

    /* Голова */
    .loco-pricing-nav.loco-pricing-nav .loco-pricing-nav__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        align-self: stretch;
        cursor: pointer;
        background: transparent;
        border: 0;
        padding: 0;
        color: inherit;
        font: inherit;
    }
    .loco-pricing-nav.loco-pricing-nav .loco-pricing-nav__head-title {
        color: var(--ltk-blue-500) !important;
        font-family: var(--ltk-font) !important;
        font-size: 24px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        text-transform: uppercase !important;
    }
    .loco-pricing-nav.loco-pricing-nav .loco-pricing-nav__chev {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--ltk-blue-500);
        transition: transform .28s cubic-bezier(.4,0,.2,1);
    }
    .loco-pricing-nav.loco-pricing-nav .loco-pricing-nav__chev svg {
        width: 14px;
        height: 8px;
        display: block;
    }
    .loco-pricing-nav.loco-pricing-nav.is-open .loco-pricing-nav__chev {
        transform: rotate(180deg);
    }

    /* Ховаємо десктоп-заголовок */
    .loco-pricing-nav.loco-pricing-nav .loco-pricing-nav__title {
        display: none;
    }

    /* Список */
    .loco-pricing-nav.loco-pricing-nav .loco-pricing-nav__list {
        display: none;
        align-self: stretch;
        justify-content: space-between;
        align-items: flex-start;
        gap: 24px;
    }
    .loco-pricing-nav.loco-pricing-nav.is-open .loco-pricing-nav__list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* ---- Гарантія — fixed bottom ---- */
    .loco-pricing-guarantee.loco-pricing-guarantee {
        position: fixed;
        left: 20px;
        right: 20px;
        bottom: 20px;
        max-width: none;
        width: auto;
        z-index: 39;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding: 24px;
    }
    .loco-pricing-guarantee.loco-pricing-guarantee.is-hidden {
        transform: translateY(calc(100% + 40px));
        opacity: 0;
        pointer-events: none;
    }
    .loco-pricing-guarantee.loco-pricing-guarantee .loco-pricing-guarantee__body {
        flex: 1 1 0;
    }

    /* Main padding */
    .loco-pricing-page.loco-pricing-page .loco-pricing-page__main {
        padding: 0 20px 148px;
        gap: 40px;
    }

    .loco-pricing-block.loco-pricing-block {
        padding: 40px 24px;
        gap: 40px;
    }
    .loco-pricing-block.loco-pricing-block .loco-pricing-block__title {
        font-size: 44px !important;
    }
    .loco-pricing-block .loco-pricing-table__title {
        font-size: 32px !important;
    }
}

/* =========================================================
   МОБІЛКА (≤600)
   ========================================================= */
@media (max-width: 600px){
    .loco-pricing-page.loco-pricing-page {
        padding: 0;
    }
    .loco-pricing-nav.loco-pricing-nav {
        margin: 0 20px 16px;
        padding: 16px 20px;
    }
    .loco-pricing-nav.loco-pricing-nav .loco-pricing-nav__head-title {
        font-size: 20px !important;
    }
    .loco-pricing-nav.loco-pricing-nav .loco-pricing-nav__list {
        gap: 20px;
    }
    .loco-pricing-nav.loco-pricing-nav .loco-pricing-nav__link {
        font-size: 15px !important;
    }

    /* Гарантія на моб */
    .loco-pricing-guarantee.loco-pricing-guarantee {
        left: 20px;
        right: 20px;
        bottom: 20px;
        align-items: flex-end;
        padding: 20px 24px;
    }
    .loco-pricing-guarantee.loco-pricing-guarantee .loco-pricing-guarantee__title {
        font-size: 18px !important;
    }
    .loco-pricing-guarantee.loco-pricing-guarantee .loco-pricing-guarantee__text {
        font-size: 14px !important;
    }
    /* На мобілці — короткий текст, повний ховаємо */
    .loco-pricing-guarantee.loco-pricing-guarantee .loco-pricing-guarantee__text--full  { display: none; }
    .loco-pricing-guarantee.loco-pricing-guarantee .loco-pricing-guarantee__text--short { display: block; }
    .loco-pricing-guarantee.loco-pricing-guarantee .loco-pricing-guarantee__cta {
        width: 56px;
        min-width: 56px;
        height: 56px;
        padding: 12px;
        flex-shrink: 0;
    }
    .loco-pricing-guarantee.loco-pricing-guarantee .loco-pricing-guarantee__cta-text {
        display: none;
    }
    .loco-pricing-guarantee.loco-pricing-guarantee .loco-pricing-guarantee__cta-icon {
        display: inline-flex;
    }

    .loco-pricing-page.loco-pricing-page .loco-pricing-page__main {
        padding: 0 20px 140px;
        gap: 32px;
    }

    .loco-pricing-block.loco-pricing-block {
        padding: 32px 16px;
        gap: 32px;
        border-radius: 24px;
    }
    .loco-pricing-block.loco-pricing-block .loco-pricing-block__title {
        font-size: 36px !important;
    }
    .loco-pricing-block .loco-pricing-table__title {
        font-size: 26px !important;
    }

    /* --- Таби на моб: 2 таби у ряд flex:1 (без скролу) --- */
    .loco-pricing-block .loco-pricing-table__tabs {
        align-self: stretch;
        display: flex;
        gap: 8px;
        width: 100%;
        justify-content: stretch;
        flex-wrap: nowrap;
        overflow: visible;
        padding: 0;
    }
    .loco-pricing-block .loco-pricing-table__tab {
        flex: 1 1 0;
        min-width: 0;
        padding: 14px 12px;
        white-space: normal;
        text-align: center;
    }

    /* Таблиця → картки */
    .loco-pricing-block .loco-pricing-table__table,
    .loco-pricing-block .loco-pricing-table__table thead,
    .loco-pricing-block .loco-pricing-table__table tbody,
    .loco-pricing-block .loco-pricing-table__table tr,
    .loco-pricing-block .loco-pricing-table__table th,
    .loco-pricing-block .loco-pricing-table__table td {
        display: block;
        width: 100%;
    }
    .loco-pricing-block .loco-pricing-table__table {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .loco-pricing-block .loco-pricing-table__table thead { display: none; }
    .loco-pricing-block .loco-pricing-table__table tr {
        border: 1px solid var(--ltk-neutral-200);
        border-radius: 16px;
        overflow: hidden;
    }
    .loco-pricing-block .loco-pricing-table__table td {
        border: 0;
        border-bottom: 1px solid var(--ltk-neutral-200);
        border-radius: 0 !important;
        padding: 14px 16px;
    }
    .loco-pricing-block .loco-pricing-table__table td:last-child { border-bottom: 0; }
    .loco-pricing-block .loco-pricing-table__table td:first-child {
        background: #EAF3FF;
        color: var(--ltk-neutral-900) !important;
        font-weight: 700 !important;
    }
    .loco-pricing-block .loco-pricing-table__table td[data-label]:not(:first-child)::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: #6C7484 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        line-height: 1.2;
    }
}