/* ============================================================
   Wethic Subscription — Account panel (shortcode [wssp_account])
   Identidad Wethic: dark tech, indigo/cyan, JetBrains Mono + Outfit.
   ============================================================ */

.wssp-account {
    --wa-bg:           #070b16;
    --wa-panel:        rgba(13, 21, 38, 0.78);
    --wa-border:       rgba(148, 163, 184, 0.12);
    --wa-border-hi:    rgba(99, 102, 241, 0.38);
    --wa-border-cyan:  rgba(34, 211, 238, 0.32);
    --wa-accent:       #6366f1;
    --wa-cyan:         #22d3ee;
    --wa-ok:           #34d399;
    --wa-warn:         #fbbf24;
    --wa-danger:       #f87171;
    --wa-text:         #e2e8f0;
    --wa-muted:        #7c88a3;
    --wa-dim:          #4a5568;
    --wa-mono:         'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
    --wa-sans:         'Outfit', 'Segoe UI', system-ui, sans-serif;
    --wa-radius:       14px;
    --wa-radius-sm:    10px;
    --wa-shadow:       0 8px 32px rgba(3, 7, 18, 0.6);
    --wa-glow-accent:  0 0 22px rgba(99, 102, 241, 0.35);
    --wa-glow-cyan:    0 0 22px rgba(34, 211, 238, 0.35);
    --wa-glow-ok:      0 0 14px rgba(52, 211, 153, 0.4);
    max-width: 860px;
    margin: 0 auto;
    font-family: var(--wa-sans);
    color: var(--wa-text);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wssp-account ::selection { background: rgba(99,102,241,.4); color:#fff; }

/* ── Labels & Badges ─────────────────────────────────── */

.wa-label {
    font-family: var(--wa-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--wa-muted);
}

.wa-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px;
    border-radius: 999px;
    font-family: var(--wa-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border: 1px solid;
}
.wa-badge-ok     { color: #4ade80;  background: rgba(52,211,153,.1);   border-color: rgba(52,211,153,.3); }
.wa-badge-cyan   { color: #22d3ee;  background: rgba(34,211,238,.1);   border-color: rgba(34,211,238,.3); }
.wa-badge-warn   { color: #fbbf24;  background: rgba(251,191,36,.1);   border-color: rgba(251,191,36,.3); }
.wa-badge-danger { color: #f87171;  background: rgba(248,113,113,.1);  border-color: rgba(248,113,113,.3); }
.wa-badge-dim    { color: #7c88a3;  background: rgba(100,116,139,.1);  border-color: rgba(100,116,139,.3); }

.wa-led {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.wa-led-ok   { background: #34d399; box-shadow: 0 0 10px rgba(52,211,153,.5); animation: wa-pulse 2.4s ease-in-out infinite; }
.wa-led-warn { background: #fbbf24; animation: wa-pulse 1.4s ease-in-out infinite; }

@keyframes wa-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Card base ───────────────────────────────────────── */

.wa-card {
    background: var(--wa-panel);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--wa-border-hi);
    border-radius: var(--wa-radius);
    box-shadow: var(--wa-shadow), 0 0 0 1px rgba(255,255,255,.03) inset;
    overflow: hidden;
    position: relative;
}

.wa-card-bar {
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #22d3ee);
}
.wa-card-bar-ok   { background: linear-gradient(90deg, #22c55e, #34d399); }
.wa-card-bar-warn { background: linear-gradient(90deg, #fbbf24, #f97316); }

.wa-card-inner { padding: 22px 26px 24px; }

.wa-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

/* ── Status card ─────────────────────────────────────── */

.wa-status-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.wa-meta-item {
    background: rgba(7,11,22,.55);
    border: 1px solid rgba(148,163,184,.1);
    border-radius: var(--wa-radius-sm);
    padding: 12px 14px;
}

.wa-meta-item .wa-label { margin-bottom: 5px; display: block; }

.wa-meta-value {
    font-family: var(--wa-mono);
    font-size: 15px;
    font-weight: 700;
    color: #f4f7ff;
}

.wa-meta-note { font-size: 11px; color: var(--wa-dim); margin-top: 2px; }

.wa-status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ── Pricing section ─────────────────────────────────── */

.wa-pricing-title {
    font-family: var(--wa-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--wa-muted);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.wa-pricing-title::before {
    content: '';
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, #6366f1, #22d3ee);
    border-radius: 999px;
}

.wa-pricing-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 20px;
}

.wa-price-card {
    background: rgba(7,11,22,.7);
    border: 1px solid rgba(148,163,184,.1);
    border-radius: var(--wa-radius-sm);
    padding: 18px 16px 16px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.wa-price-card:hover {
    border-color: rgba(99,102,241,.38);
    box-shadow: 0 0 22px rgba(99,102,241,.18);
}

.wa-price-bar {
    height: 2px;
    margin: -18px -16px 16px;
}
.wa-price-bar-trial   { background: linear-gradient(90deg, #6366f1, #818cf8); }
.wa-price-bar-monthly { background: linear-gradient(90deg, #22d3ee, #34d399); }

.wa-price-label {
    font-family: var(--wa-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--wa-muted);
    margin-bottom: 10px;
    display: block;
}

.wa-price-amount {
    font-size: 27px;
    font-weight: 800;
    color: #f4f7ff;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 3px;
    font-family: var(--wa-sans);
}

.wa-price-period { font-size: 11px; color: var(--wa-dim); font-family: var(--wa-mono); }

.wa-price-note {
    margin-top: 10px;
    font-size: 11px;
    color: var(--wa-muted);
    line-height: 1.5;
}

.wa-pricing-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--wa-accent);
    opacity: 0.6;
    flex-shrink: 0;
    padding: 0 2px;
}

/* ── Buttons ─────────────────────────────────────────── */

.wa-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--wa-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none !important;
    color: #fff !important;
    background: linear-gradient(115deg, #6366f1 0%, #4f46e5 45%, #0891b2 100%);
    border: none;
    border-radius: var(--wa-radius-sm);
    padding: 14px 22px;
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.15s, filter 0.2s;
    box-shadow: 0 8px 28px rgba(79,70,229,.38);
    width: 100%;
}
.wa-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.2) 50%, transparent 75%);
    transform: translateX(-130%);
    transition: transform 0.55s ease;
}
.wa-btn:hover::before { transform: translateX(130%); }
.wa-btn:hover { box-shadow: 0 10px 36px rgba(34,211,238,.42); transform: translateY(-1px); filter: brightness(1.08); }
.wa-btn:active { transform: translateY(0); }

.wa-btn-ghost {
    background: rgba(13,21,38,.9) !important;
    color: #a5b4fc !important;
    border: 1px solid rgba(99,102,241,.3) !important;
    box-shadow: none;
    filter: none !important;
}
.wa-btn-ghost:hover {
    border-color: #6366f1 !important;
    color: #f4f7ff !important;
    box-shadow: 0 0 22px rgba(99,102,241,.25) !important;
    transform: translateY(-1px);
}

.wa-btn-danger {
    background: rgba(248,113,113,.08) !important;
    color: #f87171 !important;
    border: 1px solid rgba(248,113,113,.28) !important;
    box-shadow: none;
    filter: none !important;
}
.wa-btn-danger:hover {
    background: rgba(248,113,113,.16) !important;
    border-color: rgba(248,113,113,.55) !important;
}

.wa-btn-sm { padding: 9px 16px; font-size: 11px; width: auto; }

/* ── Payments ────────────────────────────────────────── */

.wa-payments-title {
    font-family: var(--wa-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--wa-muted);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.wa-payments-title::after { content:''; flex:1; height:1px; background: var(--wa-border); }

.wa-table { width:100%; border-collapse:collapse; font-size:13px; }

.wa-table thead th {
    font-family: var(--wa-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wa-muted);
    padding: 0 0 10px;
    text-align: left;
    border-bottom: 1px solid var(--wa-border);
}

.wa-table tbody td {
    padding: 12px 0;
    border-bottom: 1px solid rgba(24,38,67,.5);
    vertical-align: middle;
    color: #c7d2e8;
    transition: padding-left 0.12s ease;
}
.wa-table tbody tr:last-child td { border-bottom:0; }
.wa-table tbody tr:hover td { background: rgba(99,102,241,.04); }

.wa-col-amount { font-family: var(--wa-mono); font-weight:600; color:#f4f7ff; }
.wa-col-dash   { color: var(--wa-dim); font-family: var(--wa-mono); }

.wa-table a { color: var(--wa-cyan); text-decoration:none; font-family: var(--wa-mono); font-size:11px; letter-spacing:.1em; transition: text-shadow 0.15s; }
.wa-table a:hover { text-shadow: 0 0 22px rgba(34,211,238,.5); }

/* ── Notices ─────────────────────────────────────────── */

.wa-login-notice { font-size:13px; color: var(--wa-muted); }
.wa-login-notice a { color: var(--wa-cyan); text-decoration:none; }
.wa-login-notice a:hover { text-shadow: 0 0 16px rgba(34,211,238,.4); }

.wa-error {
    background: rgba(248,113,113,.08);
    border: 1px solid rgba(248,113,113,.25);
    border-radius: var(--wa-radius-sm);
    padding: 12px 16px;
    color: #f87171;
    font-size: 13px;
}

/* ── Responsive ──────────────────────────────────────── */

@media (max-width: 600px) {
    .wa-pricing-grid { grid-template-columns: 1fr; }
    .wa-pricing-arrow { transform: rotate(90deg); padding: 4px 0; }
    .wa-status-meta { grid-template-columns: 1fr 1fr; }
    .wa-card-inner { padding: 18px 18px 20px; }
    .wa-status-actions { flex-direction: column; }
    .wa-btn-sm { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .wa-led { animation: none !important; }
    .wa-btn, .wa-price-card { transition: none !important; }
    .wa-btn::before { display: none; }
}