/* ========= Paywall (no Bootstrap) ========= */
.paywall {
    padding: 14px 0 24px;
}

/* Заглавие */
.pw-hero {
    margin-bottom: 14px;
    text-align: center;
}

.pw-title {
    margin: 0 0 6px 0;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: 800;
    color: var(--txt);
}

.pw-sub {
    margin: 0;
    color: var(--txt-dim);
    font-size: .98rem;
}

/* Ползи (иконки + текст) */
.pw-benefits {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    margin: 12px 0 16px;
}

@media (max-width: 800px) {
    .pw-benefits {
        grid-template-columns: 1fr;
    }
}

.pw-benefit {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 10px;
}

.pw-benefit .i {
    font-size: 1.4rem;
    line-height: 40px;
    text-align: center;
}

.pw-benefit h3 {
    margin: 0 0 4px 0;
    font-size: 1.05rem;
}

.pw-benefit p {
    margin: 0;
    color: var(--txt-dim);
}

/* Карти с планове */
.pw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

@media (max-width: 980px) {
    .pw-grid {
        grid-template-columns: 1fr;
    }
}

.pw-card {
    display: grid;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px;
}

.pw-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.pw-name {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--txt-dim);
}

.pw-price {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--txt-dim);
}

.pw-price span {
    color: var(--txt-dim);
    font-weight: 600;
    font-size: .95rem;
    margin-left: 4px;
}

/* Features */
.pw-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px;
}

.pw-features li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pw-features li::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--border);
    font-size: .8rem;
    background: #fff;
}

/* Точки */
.pw-points label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--txt-dim);
}

.pw-points-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--txt-dim);
}

.pw-input {
    width: 120px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0 8px;
    font: inherit;
    color: var(--txt-dim);
    background: #fff;
}

.pw-input:focus {
    outline: none;
    border-color: hsl(var(--p-h) 60% 55%);
    box-shadow: 0 0 0 3px hsl(var(--p-h) 90% 85% / .7);
}

.pw-save {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    height: 40px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: #fafafa;
}

.pw-save-label {
    color: var(--txt-dim);
    font-size: .9rem;
}

.pw-save-amount {
    font-weight: 800;
}

/* Бутон */
.pw-btn {
    height: 42px;
    border: 1px solid var(--border);
    padding: 10px;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    font-size: .98rem;
    text-align: center;
    cursor: pointer;
    transition: transform .06s ease, box-shadow .15s ease, background-color .15s ease;
}

.pw-btn:hover {
    background: hsl(var(--p-h) max(calc(var(--p-s) - 10%), 40%) max(calc(var(--p-l) - 5%), 35%));
    box-shadow: 0 6px 16px hsl(var(--p-h) var(--p-s) 25% / .25);
}

.pw-btn:active {
    transform: translateY(1px);
}

.pw-hint {
    color: var(--txt-dim);
    font-size: .88rem;
}

/* FAQ */
.pw-faq {
    margin-top: 12px;
    display: grid;
    gap: 8px;
    color: var(--txt-dim);
}

.pw-faq details {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 10px 12px;
    color: var(--txt-dim);
}

.pw-faq summary {
    cursor: pointer;
    font-weight: 700;
}

.pw-faq p {
    margin: 8px 0 0 0;
    color: var(--txt-dim);
}

/* Discount code */
.pw-discount {
    display: grid;
    gap: 6px;
}

.pw-discount label {
    display: block;
    font-weight: 700;
    margin-bottom: 0;
    color: var(--txt-dim);
}

.pw-input[disabled] {
    background: #f4f4f4;
    color: #8a8a8a;
    cursor: not-allowed;
}

.pw-points-row .pw-input[disabled] {
    border-style: dashed;
}

/* ====== Paywall benefit screenshots (thumbnail + zoom) ====== */

/* Контрол на мащаба:
   - thumb ~90px ширина
   - в лайтбокса показваме ~3 пъти по-голямо (270px)
*/
:root {
    --pw-thumb-w: 150px;
    --pw-zoom-scale: 5;
}

/* Тялото на една полза */
.pw-benefit-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Заглавието на ползата (ред 1, заедно с емоджито вляво) */
.pw-benefit-title {
    margin: 0;
    font-weight: 700;
    color: var(--txt);
    font-size: 1.05rem;
    line-height: 1.3;
}

/* Ред 2: описание (ляво) + мини-снимка (дясно) */
.pw-benefit-row {
    display: grid;
    grid-template-columns: 1fr max-content; /* текстът взима каквото има, снимката си запазва мястото */
    align-items: flex-start;
    column-gap: 10px;
    row-gap: 10px;
}

/* Описанието */
.pw-benefit-desc {
    margin: 0;
    color: var(--txt-dim);
    font-size: .95rem;
    line-height: 1.4;
    flex: 1 1 auto;
    min-width: 200px; /* да не стане прекалено тясно до степен да изглежда грозно */
}


/* ====== Голямата карта за paywall-а ====== */

.pw-wrapper-card {
    /* самата "бяла картичка" */
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);

    /* позициониране/центриране в страница */
    max-width: min(1200px, 100% - 24px);
    margin: 14px auto 24px auto;

    /* това създава разстояние между външния ръб и цветната рамка */
    padding: 10px;

    position: relative;
}

/* вътрешната рамка в основния цвят */
.pw-wrapper-inner {
    border: 1px solid var(--primary);
    border-radius: var(--radius);

    /* лек вътрешен падинг, за да не лепи съдържанието в рамката */
    padding: 12px;
}


/* Thumb-а (микро-снимката) ще си остане същия, само му казваме да не се разтяга */
.pw-thumb {
    flex: 0 0 auto;
    margin-top: 0; /* вече не ни трябва отстояние отгоре */
    border: 0;
    padding: 0;
    background: transparent;
    cursor: zoom-in;
    max-width: var(--pw-thumb-w);
    border-radius: var(--radius-sm);
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 2px 6px rgb(0 0 0 / .12);
    border: 1px solid var(--border);
}

.pw-thumb img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Lightbox слой */
.pw-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .6);
}

.pw-lightbox[hidden] {
    display: none;
}

/* клик-зона зад снимката */
.pw-lightbox-backdrop {
    position: absolute;
    inset: 0;
    cursor: zoom-out;
}

/* кутията за голямото изображение */
.pw-lightbox-inner {
    position: relative;
    z-index: 1001;
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgb(0 0 0 / .6);
    padding: 8px;
    max-width: calc(var(--pw-thumb-w) * var(--pw-zoom-scale)); /* ~270px */
    max-height: 90vh;
    cursor: zoom-out;
}

/* самото голямо изображение */
.pw-lightbox-img {
    max-width: 100%;
    max-height: 80vh;
    display: block;
    height: auto;
}

/* responsive поведение: на малък екран ползата стои добре */
@media (max-width: 480px) {
    .pw-benefit {
        grid-template-columns: 32px 1fr;
    }

    .pw-benefit .i {
        font-size: 1.2rem;
        line-height: 32px;
    }
}

/* дребно козметично подобрение на заглавията */
.pw-benefit h3 {
    font-weight: 700;
    color: var(--txt);
    display: flex;
    align-items: baseline;
    gap: .4em;
    font-size: 1.05rem;
}

.pw-benefit p {
    font-size: .95rem;
    line-height: 1.4;
}


/* ===== Подаръци (gift) ===== */

/* grid за gifting секцията – две колони на десктоп, една на мобилно */
.pw-grid-gift {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 18px;
}

@media (max-width: 800px) {
    .pw-grid-gift {
        grid-template-columns: 1fr;
    }
}

/* single grid за страницата gift_redeem */
.pw-grid-gift-single {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 18px;
}

/* поле във формата за подарък */
.pw-field {
    display: grid;
    gap: 6px;
    margin-bottom: 10px;
}

.pw-field label {
    font-weight: 700;
    font-size: .9rem;
    color: var(--txt-dim);
}

/* правим input/textarea да са 100% ширина в картата */
.pw-input-full {
    width: 100%;
}

/* текстово поле за послание към получателя */
.pw-textarea {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px;
    font: inherit;
    color: var(--txt-dim);
    background: #fff;
    min-height: 70px;
    resize: vertical;
}

.pw-textarea:focus {
    outline: none;
    border-color: hsl(var(--p-h) 60% 55%);
    box-shadow: 0 0 0 3px hsl(var(--p-h) 90% 85% / .7);
}

/* леко по-малко span в .pw-price за подаръчната карта */
.pw-price span {
    display: inline-block;
    color: var(--txt-dim);
    font-weight: 600;
    font-size: .8rem;
    margin-left: 4px;
}


/* ===== Подарък (gift) вътре в <details> ===== */

/* формата в accordion-а */
.pw-gift-form {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

/* блок с инфо за вече имаш код */
.pw-gift-existing {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

/* полета вътре в gift формата (ползваме ги и по-горе) */
.pw-field {
    display: grid;
    gap: 6px;
}

.pw-field label {
    font-weight: 700;
    font-size: .9rem;
    color: var(--txt-dim);
}

/* 100% ширина за input/select/textarea */
.pw-input-full {
    width: 100%;
}

/* textarea формат */
.pw-textarea {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px;
    font: inherit;
    color: var(--txt-dim);
    background: #fff;
    min-height: 70px;
    resize: vertical;
}

.pw-textarea:focus {
    outline: none;
    border-color: hsl(var(--p-h) 60% 55%);
    box-shadow: 0 0 0 3px hsl(var(--p-h) 90% 85% / .7);
}

/* .pw-faq вече съществува и дава картонче/рамка/иконка за <details>,
   така че gift accordion наследява същия стил */


/* ==== FIX: Paywall benefits — без хор. скрол и преливане ==== */

/* 1) Позволи на грид елементите да се свиват */
.pw-benefit,
.pw-benefit-body,
.pw-benefit-row {
    min-width: 0;
}

/* 2) Описанието да може да пренася всичко (линкове/дълги думи) */
.pw-benefit-desc {
    min-width: 0;
    overflow-wrap: anywhere; /* modern */
    word-break: break-word; /* safety за старите */
}

/* 3) Вместо max-content — колона, която може да се свива до 0,
      но да не надхвърля ширината на thumbnail-а */
.pw-benefit-row {
    grid-template-columns: 1fr minmax(0, var(--pw-thumb-w));
    column-gap: 10px; /* запазваме визуалната дистанция */
}

/* 4) Самият thumb да може да се смалява плавно,
      но да не надскача зададената целева ширина */
.pw-thumb {
    width: 100%;
    max-width: var(--pw-thumb-w);
    box-sizing: border-box;
}

/* 5) На малки екрани стекваме: снимката пада под текста
      и става по-компактна, за да няма хоризонтален скрол */
@media (max-width: 560px) {
    .pw-benefit-row {
        grid-template-columns: 1fr; /* една колона: текст над thumb */
        row-gap: 10px;
    }

    .pw-thumb {
        justify-self: start;
        width: clamp(96px, 42vw, 140px); /* адаптивно, но не огромно */
        max-width: 100%;
        margin-top: 2px;
    }
}

/* ===== Success page ===== */
.pw-success-shell {
    max-width: 600px;
    margin: 2rem auto;
    font-size: 1rem;
    line-height: 1.5;
}

.pw-success-actions {
    margin-top: 1.5rem;
}

.pw-success-error {
    white-space: pre-wrap;
    font-size: 0.9rem;
    color: #666;
}