/* ============================================================
   plan-cards.css — карточка тарифа (.kpc). Общая для /pricing, кабинета
   (вкладка «Подписка») и окна пейволла (KawnAccess.planCard).

   Два слоя. Нижний — рамка (--kpc-frame) своего цвета; сверху, чуть меньше, —
   сама карточка (::before — светлая, ::after — тёмная, проявляется при
   наведении; градиент нельзя анимировать, поэтому тёмный слой — отдельный
   с opacity). Оба слоя — отдельные скруглённые элементы, а не границы фона:
   так на углах нет швов. «Язычок» в верхнем углу — продолжение нижнего слоя,
   врезанное в верхний; у его края верхний слой плавно скруглён (::before
   язычка заливает угол цветом рамки по дуге).

   Цвета — токены палитры (variables.css); тёмная заливка при наведении
   фиксированная глубокая изумрудная — одинаково читается во всех 6 темах.
   Язычок и изгиб зеркалятся в RTL (ar/ur) логическими свойствами и :dir(rtl).
   ============================================================ */

/* Цветовые переменные карточки зарегистрированы как <color>: браузер плавно интерполирует их при наведении
   (обычные переменные меняются рывком, и текст/рамка «щёлкали» без перелива). inherits: дети читают
   анимируемое значение каждый кадр. */
@property --kpc-frame       { syntax: '<color>'; inherits: true; initial-value: #d9f0e8; }
@property --kpc-frame-solid { syntax: '<color>'; inherits: true; initial-value: #d9f0e8; }
@property --kpc-fg          { syntax: '<color>'; inherits: true; initial-value: #1f2937; }
@property --kpc-fg2         { syntax: '<color>'; inherits: true; initial-value: #4b5563; }
@property --kpc-fg3         { syntax: '<color>'; inherits: true; initial-value: #6b7280; }
@property --kpc-check       { syntax: '<color>'; inherits: true; initial-value: #059669; }
@property --kpc-tab-fg      { syntax: '<color>'; inherits: true; initial-value: #047857; }

.kpc {
    --kpc-r: 22px;     /* радиус внешнего края */
    --kpc-bw: 5px;     /* ширина нижнего слоя (рамки) */
    --kpc-ri: calc(var(--kpc-r) - var(--kpc-bw));   /* радиус верхнего слоя */
    --kpc-tab-h: 36px;                              /* высота язычка (от внешнего края) */
    --kpc-frame: color-mix(in srgb, var(--emerald, #059669) 14%, var(--white, #fff));
    --kpc-frame-solid: var(--kpc-frame);            /* сплошной цвет рамки (для изгиба у язычка) */
    --kpc-fg: var(--text-1, #1f2937);
    --kpc-fg2: var(--text-2, #4b5563);
    --kpc-fg3: var(--text-3, #6b7280);
    --kpc-check: var(--emerald, #059669);
    --kpc-accent: var(--gold, #c5a059);   /* акцент наведения и «рекомендуемой» — свой у каждой палитры (ниже) */
    --kpc-tab-fg: color-mix(in srgb, var(--emerald-dark, #047857) 85%, var(--dark-gray, #1f2937));

    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    padding: calc(var(--kpc-bw) + 38px) calc(var(--kpc-bw) + 14px) calc(var(--kpc-bw) + 14px);
    border-radius: var(--kpc-r);
    background: var(--kpc-frame-img, none), var(--kpc-frame);
    color: var(--kpc-fg);
    text-align: start;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease,
        --kpc-frame .45s ease, --kpc-frame-solid .45s ease, --kpc-fg .45s ease, --kpc-fg2 .45s ease,
        --kpc-fg3 .45s ease, --kpc-check .45s ease, --kpc-tab-fg .45s ease;
}

/* Верхний слой: светлая карточка */
.kpc::before {
    content: '';
    position: absolute;
    inset: var(--kpc-bw);
    z-index: -2;
    border-radius: var(--kpc-ri);
    background: linear-gradient(165deg,
        color-mix(in srgb, var(--white, #fff) 90%, var(--kpc-accent)) 0%,
        var(--white, #fff) 52%,
        color-mix(in srgb, var(--white, #fff) 93%, var(--emerald, #059669)) 100%);
}
/* Тёмный слой того же размера, проявляется при наведении */
.kpc::after {
    content: '';
    position: absolute;
    inset: var(--kpc-bw);
    z-index: -1;
    border-radius: var(--kpc-ri);
    /* тёмная заливка при наведении — из основного цвета палитры, затемнённого */
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--emerald-dark, #047857) 48%, #000) 0%,
        color-mix(in srgb, var(--emerald-dark, #047857) 32%, #000) 60%,
        color-mix(in srgb, var(--emerald-dark, #047857) 22%, #000) 100%);
    opacity: 0;
    transition: opacity .45s ease;
}

/* Акцент по палитрам (ключ темы — data-kawn-theme на <html>, см. theme-boot.js):
   изумруд — золото, остальные — свой оттенок, чтобы наведение не было «одним и тем же» везде */
html[data-kawn-theme="midnight"] .kpc { --kpc-accent: #7db4ff; }
html[data-kawn-theme="desert"]   .kpc { --kpc-accent: #dcae72; }
html[data-kawn-theme="ocean"]    .kpc { --kpc-accent: #8bbcff; }
html[data-kawn-theme="dawn"]     .kpc { --kpc-accent: #eaa3b0; }
html[data-kawn-theme="ink"]      .kpc { --kpc-accent: #d4d4d4; }

/* Рекомендуемая карточка: нижний слой — золото в косую штриховку */
.kpc-hl {
    --kpc-frame: color-mix(in srgb, var(--kpc-accent) 43%, var(--white, #fff));
    --kpc-frame-img: repeating-linear-gradient(135deg,
        color-mix(in srgb, var(--kpc-accent) 55%, var(--white, #fff)) 0 6px,
        color-mix(in srgb, var(--kpc-accent) 32%, var(--white, #fff)) 6px 12px);
    --kpc-frame-solid: color-mix(in srgb, var(--kpc-accent) 43%, var(--white, #fff));
    --kpc-tab-fg: color-mix(in srgb, var(--kpc-accent) 45%, #000);
}
/* Ваш тариф: нижний слой плотнее, изумрудный */
.kpc-current {
    --kpc-frame: color-mix(in srgb, var(--emerald, #059669) 30%, var(--white, #fff));
    --kpc-frame-solid: color-mix(in srgb, var(--emerald, #059669) 30%, var(--white, #fff));
}

/* Язычок в верхнем углу (по смыслу — «для кого этот тариф» или «ваш тариф») */
.kpc-tab {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-sizing: border-box;
    height: var(--kpc-tab-h);
    padding: var(--kpc-bw) calc(var(--kpc-bw) + 10px) 0 18px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    background: var(--kpc-frame-img, none), var(--kpc-frame);
    color: var(--kpc-tab-fg);
    border-start-end-radius: var(--kpc-r);
    border-end-start-radius: 16px;
    transition: none;   /* цвета язычка берутся из анимируемых переменных карточки */
}
.kpc-tab:dir(rtl) { padding: var(--kpc-bw) 18px 0 calc(var(--kpc-bw) + 10px); }
.kpc-tab::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .75;
}
/* Плавный изгиб верхнего слоя у края язычка: угол заливается цветом рамки по дуге */
.kpc-tab::before {
    content: '';
    position: absolute;
    inset-inline-end: calc(100% - 1px);
    inset-block-start: calc(var(--kpc-bw) - 1px);
    width: 17px;
    height: 17px;
    background: radial-gradient(circle at 0 17px, transparent 15.5px, var(--kpc-frame-solid) 16px);
    pointer-events: none;
}
.kpc-tab:dir(rtl)::before { background: radial-gradient(circle at 17px 17px, transparent 15.5px, var(--kpc-frame-solid) 16px); }

/* Скругление верхнего угла верхнего слоя под язычком (справа/слева у края карточки):
   угол заливается цветом рамки по дуге. Привязано к шапке, т.к. у язычка оба псевдоэлемента заняты */
.kpc-head::before {
    content: '';
    position: absolute;
    inset-inline-end: var(--kpc-bw);
    inset-block-start: calc(var(--kpc-tab-h) - 1px);
    width: 17px;
    height: 17px;
    background: radial-gradient(circle at 1px 17px, transparent 15.5px, var(--kpc-frame-solid) 16px);
    pointer-events: none;
}
.kpc-head:dir(rtl)::before { background: radial-gradient(circle at 16px 17px, transparent 15.5px, var(--kpc-frame-solid) 16px); }

/* Шапка: название, цена, цена в месяц — и пунктир под ней */
.kpc-head {
    margin-bottom: 18px;
    padding-bottom: 18px;
    text-align: center;
    border-bottom: 1.5px dotted color-mix(in srgb, var(--kpc-fg3) 55%, transparent);
}
.kpc-name { margin: 0; font-size: 18px; font-weight: 600; color: var(--kpc-fg); }
.kpc-price {
    margin: 8px 0 2px;
    font-size: 38px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.01em;
    white-space: nowrap;
    color: var(--kpc-fg);
}
.kpc-price small { margin-inline-start: 4px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--kpc-fg3); }
.kpc-sub { font-size: 12.5px; color: var(--kpc-fg3); }

/* Список возможностей: галочка в кружке */
.kpc-list {
    flex: 1;
    display: grid;
    align-content: start;
    gap: 12px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--kpc-fg2);
}
.kpc-list li { position: relative; margin: 0; padding-inline-start: 30px; }
.kpc-list li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: -1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--kpc-check) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* Кнопка внутри карточки (кабинет, пейволл): «таблетка», при наведении карточки — светлая */
.kpc .kpw-btn {
    margin-top: auto;
    border-radius: 999px;
    border-color: color-mix(in srgb, var(--emerald, #059669) 38%, transparent);
    background: color-mix(in srgb, var(--white, #fff) 70%, transparent);
    transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.kpc .kpw-btn-primary { background: var(--emerald, #059669); border-color: var(--emerald, #059669); color: var(--on-primary, #fff); }

/* Цвет текста задаём явно: стили страниц (doc-page.css) красят li сами и не меняются при наведении */
.kpc .kpc-list li { color: var(--kpc-fg2); }
.kpc .kpc-name, .kpc .kpc-price { color: var(--kpc-fg); }
.kpc .kpc-price small, .kpc .kpc-sub { color: var(--kpc-fg3); }

/* Наведение: верхний слой темнеет, нижний становится золотым, текст светлеет */
@media (hover: hover) {
    .kpc:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(8, 36, 26, .28); }
}
.kpc:hover, .kpc:focus-within {
    --kpc-frame: color-mix(in srgb, var(--kpc-accent) 88%, var(--white, #fff));
    --kpc-frame-solid: color-mix(in srgb, var(--kpc-accent) 88%, var(--white, #fff));
    --kpc-frame-img: none;
    --kpc-fg: #f4f7f5;
    --kpc-fg2: rgba(244, 247, 245, .82);
    --kpc-fg3: rgba(244, 247, 245, .62);
    --kpc-check: var(--kpc-accent);
    --kpc-tab-fg: #15110a;
}
.kpc:hover::after, .kpc:focus-within::after { opacity: 1; }
.kpc:hover .kpw-btn, .kpc:focus-within .kpw-btn {
    background: #f4f7f5;
    color: color-mix(in srgb, var(--emerald-dark, #047857) 30%, #000);
    border-color: #f4f7f5;
}
.kpc:hover .kpw-btn-primary, .kpc:focus-within .kpw-btn-primary {
    background: var(--kpc-accent);
    border-color: var(--kpc-accent);
    color: #15110a;
}

/* Сетка карточек */
.kpc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }

@media (prefers-reduced-motion: reduce) {
    .kpc, .kpc::after, .kpc .kpw-btn { transition: none; }
    .kpc:hover { transform: none; }
}