/* css/xplay-paywall.css
   Paywall overlay and account status widget.
   Loaded on every page where [video_paywall] or [subscription_status] may appear. */

/* ── Paywall block ─────────────────────────────────────────────────────────── */

.xplay-paywall { margin: 30px 0; font-family: inherit; }

.xplay-paywall__inner {
    background: linear-gradient(145deg, #111118 0%, #0a0a10 100%);
    border: 1px solid rgba(102,126,234,.2);
    border-radius: 20px;
    padding: 56px 40px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset;
}

/* Ambient glow */
.xplay-paywall__inner::before {
    content: '';
    position: absolute;
    top: -40%; left: 50%;
    transform: translateX(-50%);
    width: 60%; height: 60%;
    background: radial-gradient(ellipse, rgba(102,126,234,.12) 0%, transparent 70%);
    pointer-events: none;
}

/* Badge */
.xplay-paywall__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(102,126,234,.12);
    border: 1.5px solid rgba(102,126,234,.5);
    border-radius: 100px;
    padding: 8px 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #818cf8;
    margin-bottom: 28px;
    position: relative;
}

/* Title & description */
.xplay-paywall__title {
    font-size: clamp(24px, 4vw, 34px);
    font-weight: 800;
    margin: 0 0 16px;
    color: #fff;
    line-height: 1.2;
}

.xplay-paywall__desc {
    font-size: 16px;
    color: #9ca3af;
    line-height: 1.6;
    margin: 0 0 32px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* Mini plan cards */
.xplay-paywall__plans {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.xplay-paywall__plan {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 16px 24px;
    text-align: center;
    position: relative;
}

.xplay-paywall__plan--best {
    border-color: rgba(102,126,234,.4);
    background: rgba(102,126,234,.08);
}

.xplay-paywall__plan .plan-badge {
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    background: #667eea;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 100px;
    white-space: nowrap;
}

.xplay-paywall__plan .plan-label  { display: block; font-size: 12px; color: #9ca3af; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.xplay-paywall__plan .plan-price  { display: block; font-size: 22px; font-weight: 800; color: #fff; }
.xplay-paywall__plan .plan-period { display: block; font-size: 11px; color: #6b7280; }

/* CTA button */
.xplay-paywall__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    text-decoration: none;
    padding: 16px 44px;
    border-radius: 100px;
    font-size: 17px;
    font-weight: 700;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    box-shadow: 0 8px 32px rgba(102,126,234,.35);
}
.xplay-paywall__cta:hover,
.xplay-paywall__cta:focus {
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(102,126,234,.5);
    filter: brightness(1.08);
    color: #fff;
    text-decoration: none;
}

/* Login notice */
.xplay-paywall__login { margin-top: 24px; font-size: 14px; color: #6b7280; }
.xplay-paywall__login a { color: #818cf8; text-decoration: underline; }

/* ── [subscription_status] widget ──────────────────────────────────────────── */

.xplay-sub-status {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px 24px;
}
.xplay-sub-status.is-active { border-color: #a5f3c3; background: #f0fdf4; }

.xplay-sub-cancel-btn, .xplay-sub-upgrade-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
    border: none;
    text-decoration: none;
}
.xplay-sub-cancel-btn  { background: #fee2e2; color: #b91c1c; }
.xplay-sub-upgrade-btn { background: #667eea; color: #fff; }
.xplay-sub-cancel-btn:hover, .xplay-sub-upgrade-btn:hover { opacity: .85; }

/* ── Inline notices ─────────────────────────────────────────────────────────── */

.xplay-notice {
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    margin: 16px 0;
}
.xplay-notice--error   { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
.xplay-notice--success { background: #f0fdf4; color: #14532d; border: 1px solid #86efac; }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .xplay-paywall__inner  { padding: 40px 22px; }
    .xplay-paywall__plans  { flex-direction: column; align-items: center; }
    .xplay-paywall__cta    { padding: 14px 30px; font-size: 15px; }
}