/* =============================================================
   Przegląd Bałtycki – Paywall Styles v2.2
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&display=swap');

/* ── Zmienne globalne ───────────────────────────────────────── */
:root {
    --pb-red:      #dc1a21;
    --pb-red-h:    #b8151b;
    --pb-blue:     #4db2ec;
    --pb-blue-h:   #2e9fd9;
    --pb-black:    #000000;
    --pb-bg:       #fafafa;
    --pb-border:   #c8c8c8;
    --pb-text:     #1a1a1a;
    --pb-muted:    #555555;
    --pb-white:    #ffffff;
}

/* ── Podgląd treści ─────────────────────────────────────────── */
.pb-preview { position: relative; overflow: hidden; }
.pb-preview__fade {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 120px;
    background: linear-gradient(to bottom, transparent, #fff);
    pointer-events: none;
}
.pb-preview__indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.8rem;
    color: var(--pb-muted);
    border-top: 1px solid var(--pb-border);
    padding: 10px 0 14px;
}
.pb-preview__lock { font-size: 1rem; }

/* ── Login hint (nad paywallem) ─────────────────────────────── */
.pb-login-hint {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.82rem;
    color: var(--pb-muted);
    text-align: right;
    padding: 0;
    margin-bottom: 0;
}
.pb-login-hint a {
    color: var(--pb-blue);
    font-weight: 700;
    text-decoration: underline;
}

/* ── Główny kontener ────────────────────────────────────────── */
.pb-wall {
    font-family: Verdana, Geneva, sans-serif;
    color: var(--pb-text);
    background: var(--pb-bg);
    border: 1px solid var(--pb-border);
    border-top: 4px solid var(--pb-blue);
    border-radius: 3px;
    padding: 2rem 2rem 1.75rem;
    margin: 0 0 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* ── Nagłówek ───────────────────────────────────────────────── */
.pb-wall__header {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--pb-border);
}
.pb-wall__header--suspended { border-top: 4px solid var(--pb-red); }
.pb-wall__icon { font-size: 2rem; display: block; margin-bottom: 0.5rem; line-height: 1; }
.pb-wall__header h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--pb-black);
    margin: 0 0 0.5rem;
    line-height: 1.3;
}
.pb-wall__subtitle {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.88rem;
    color: var(--pb-muted);
    margin: 0 auto;
    max-width: 520px;
    line-height: 1.6;
}
.pb-wall__desc {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.83rem;
    color: var(--pb-muted);
    margin: 0.5rem auto 0;
    max-width: 520px;
    line-height: 1.55;
}

/* ── Promo box ──────────────────────────────────────────────── */
.pb-promo {
    background-image: linear-gradient(-225deg, #2CD8D5 0%, #6B8DD6 48%, #8E37D7 100%);
    color: #fff;
    border: 1.5px solid #6b8dd6;
    border-radius: 3px;
    padding: 1rem 1.4rem;
    margin-bottom: 1.75rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.pb-promo__tagline {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
}
.pb-promo__body { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pb-promo__label {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.72rem;
    opacity: .8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.pb-promo__code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.15rem;
    font-weight: 700;
    background: rgba(255,255,255,.15);
    border: 1.5px dashed rgba(255,255,255,.5);
    border-radius: 3px;
    padding: 2px 12px;
    letter-spacing: 0.12em;
    user-select: all;
}
.pb-promo__offer {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.78rem;
    opacity: .85;
    margin-top: 0.5rem;
}

/* ── Opcje ──────────────────────────────────────────────────── */
.pb-wall__options {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}
.pb-wall__option {
    flex: 1 1 220px;
    max-width: 280px;
    background: var(--pb-white);
    border: 1px solid var(--pb-border);
    border-radius: 3px;
    padding: 1.4rem 1.25rem 1.2rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.pb-wall__option--featured {
    border-color: var(--pb-blue);
    border-top: 3px solid var(--pb-blue);
}
.pb-wall__option--coins.pb-wall__option--featured {
    border-top-color: var(--pb-blue);
}
.pb-wall__badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--pb-blue);
    color: #fff;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 12px;
    border-radius: 20px;
    white-space: nowrap;
}
.pb-wall__option-icon { font-size: 1.6rem; line-height: 1; margin-bottom: 2px; }
.pb-wall__option-label {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--pb-black);
}
.pb-wall__option-desc {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.8rem;
    color: var(--pb-muted);
    line-height: 1.55;
    flex-grow: 1;
}
.pb-wall__option-desc a { color: var(--pb-blue); text-decoration: underline; }

/* Cena Monet */
.pb-wall__price { display: flex; align-items: baseline; gap: 5px; margin: 4px 0 2px; }
.pb-wall__price-amount {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--pb-blue);
    line-height: 1;
}
.pb-wall__price-unit { font-family: Verdana, Geneva, sans-serif; font-size: 0.8rem; color: var(--pb-muted); }
.pb-wall__balance    { font-family: Verdana, Geneva, sans-serif; font-size: 0.78rem; color: #1a7f3c; font-weight: 700; }
.pb-wall__insufficient {
    display: block !important;
    font-family: Verdana, Geneva, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: var(--pb-red) !important;
    text-align: center !important;
    border: 1.5px solid var(--pb-red) !important;
    border-radius: 3px !important;
    padding: 6px 10px !important;
    margin-bottom: 10px !important;
    margin-top: 0 !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}

/* ── Przyciski ──────────────────────────────────────────────── */
.pb-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 1rem;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.16s, opacity 0.16s, transform 0.1s;
    margin-top: 4px;
}
.pb-btn:hover    { opacity: .88; transform: translateY(-1px); text-decoration: none; }
.pb-btn:active   { transform: translateY(0); }
.pb-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.pb-btn--buy        { background: var(--pb-red);    color: #fff; }
.pb-btn--buy:hover  { background: var(--pb-red-h);  opacity: 1; }

.pb-btn--primary       { background: var(--pb-blue);   color: #fff; }
.pb-btn--primary:hover { background: var(--pb-blue-h); opacity: 1; }

.pb-btn--coins       { background: var(--pb-black); color: #fff; }
.pb-btn--coins:hover { background: #222; opacity: 1; }

.pb-btn--secondary       { background: #e8e8e8; color: var(--pb-black); }
.pb-btn--secondary:hover { background: #d5d5d5; opacity: 1; }

/* ── Komunikat po zakupie ───────────────────────────────────── */
.pb-wall__msg {
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    border-radius: 3px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
}
.pb-wall__msg.is-success { background: #e6f4ea; color: #1a7f3c; border-left: 3px solid #1a7f3c; }
.pb-wall__msg.is-error   { background: #fdecea; color: var(--pb-red); border-left: 3px solid var(--pb-red); }

/* ── Biblioteka zakupów [pb_purchased_articles] ─────────────── */
.pb-library {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.88rem;
    color: #1a1a1a;
    margin: 1.5rem 0;
}
.pb-library__empty {
    padding: 1.5rem;
    text-align: center;
    color: #777;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
}
.pb-library table { width: 100%; border-collapse: collapse; }
.pb-library th {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.88rem;
    color: #000;
    background: #f0f0f0;
    border-bottom: 2px solid #4db2ec;
    padding: 10px 12px;
    text-align: left;
}
.pb-library td {
    padding: 9px 12px;
    border-bottom: 1px solid #e8e8e8;
    vertical-align: top;
}
.pb-library tr:hover td { background: #f5fbff; }
.pb-library td.pb-library__title a {
    color: #4db2ec;
    text-decoration: none;
    font-weight: 700;
}
.pb-library td.pb-library__title a:hover { text-decoration: underline; }
.pb-library td.pb-library__date  { color: #555; font-size: 0.82rem; white-space: nowrap; }
.pb-library td.pb-library__price { color: #1a1a1a; white-space: nowrap; }
.pb-library__pagination {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.pb-library__pagination a,
.pb-library__pagination span {
    display: inline-block;
    padding: 5px 11px;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.78rem;
    text-decoration: none;
    color: #000;
    background: #fff;
}
.pb-library__pagination a:hover  { background: #f0f0f0; }
.pb-library__pagination .current { background: #4db2ec; color: #fff; border-color: #4db2ec; font-weight: 700; }

/* ── Responsywność ──────────────────────────────────────────── */
@media (max-width: 640px) {
    .pb-wall { padding: 1.5rem 1rem 1.25rem; }
    .pb-wall__options { flex-direction: column; align-items: stretch; }
    .pb-wall__option  { max-width: 100%; }
    .pb-library th, .pb-library td { padding: 7px 8px; font-size: 0.8rem; }
}

/* ── Dodatkowa specyficzność dla insufficient (override motywu) ── */
.pb-wall .pb-wall__option .pb-wall__insufficient,
.pb-wall .pb-wall__insufficient {
    font-family: Verdana, Geneva, sans-serif !important;
    font-size: 0.82rem !important;
    margin-bottom: 10px !important;
}

/* ── Akordeon – elementy wspólne ────────────────────────────── */
.pb-accordion-trigger__arrow {
    display: none;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--pb-blue);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.pb-radio-price {
    margin-left: auto;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--pb-blue);
    white-space: nowrap;
}
.pb-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0;
}
.pb-radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.85rem;
    color: var(--pb-text);
    cursor: pointer;
    padding: 7px 10px;
    border: 1px solid var(--pb-border);
    border-radius: 3px;
    background: var(--pb-white);
    transition: border-color 0.15s, background 0.15s;
}
.pb-radio-label:hover { border-color: var(--pb-blue); background: #f0f8ff; }

/* Fake-radio indicator */
.pb-radio-indicator {
    display: inline-block;
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-radius: 50%;
    border: 2px solid var(--pb-border);
    background: #fff;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}
.pb-radio-label.pb-radio-selected .pb-radio-indicator {
    border-color: var(--pb-blue);
    background: var(--pb-blue);
}
.pb-radio-label.pb-radio-selected .pb-radio-indicator::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fff;
}
.pb-wall .pb-radio-label.pb-radio-selected,
.pb-wall .pb-radio-label:has(input[type="radio"]:checked) {
    border-color: var(--pb-blue) !important;
    background: #f0f8ff !important;
    font-weight: 700 !important;
}
.pb-compare-link {
    display: block;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.75rem;
    color: var(--pb-muted);
    text-decoration: underline;
    text-align: center;
    margin-top: 10px;
}
.pb-compare-link:hover { color: var(--pb-blue); }
.pb-accordion-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: default;
    padding: 0;
    background: none;
    border: none;
    text-align: left;
    width: 100%;
}
.pb-accordion-body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

/* DESKTOP: radiobutton i link porównania ukryte */
@media (min-width: 641px) {
    .pb-radio-group  { display: none; }
    .pb-compare-link { display: none; }
}

/* ── Mobile-only: akordeon (≤ 640px) ───────────────────────── */
@media (max-width: 640px) {
    .pb-wall__subtitle { display: none; }
    .pb-wall__header .pb-wall__icon { display: none; }

    .pb-wall__options {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .pb-accordion-item {
        max-width: 100%;
        flex: none;
        border-radius: 8px;
        border: 2px solid var(--pb-border);
        padding: 0;
        overflow: hidden;
    }
    .pb-accordion-item.pb-wall__option--featured {
        border-color: var(--pb-red);
    }
    .pb-accordion-trigger {
        cursor: pointer;
        padding: 14px 16px;
        width: 100%;
    }
    .pb-accordion-trigger__arrow { display: inline-block; margin-left: auto; }
    .pb-accordion-item:not(.pb-accordion-item--closed) .pb-accordion-trigger__arrow {
        transform: rotate(180deg);
    }
    .pb-wall__badge { display: none !important; }

    .pb-accordion-item--closed .pb-accordion-body {
        max-height: 0;
        overflow: hidden;
        padding: 0 16px;
        transition: max-height 0.3s ease, padding 0.3s ease;
    }
    .pb-accordion-item:not(.pb-accordion-item--closed) .pb-accordion-body {
        max-height: 600px;
        padding: 0 16px 16px;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease;
    }
    .pb-accordion-body .pb-wall__option-icon { display: none; }
    .pb-radio-label { padding: 10px 12px; font-size: 0.88rem; }

    .pb-accordion-item:not(.pb-wall__option--featured):not(.pb-accordion-item--closed) .pb-btn--secondary {
        background: var(--pb-blue) !important;
        color: #fff !important;
    }
    .pb-accordion-item:not(.pb-wall__option--featured):not(.pb-accordion-item--closed) .pb-btn--secondary:hover {
        background: var(--pb-blue-h) !important;
        opacity: 1;
    }
}