/* ─────────────────────────────────────────────────────────────────────────
   subscription.css  —  User-facing subscription styles
   Covers: subscriptions/history.blade.php + discount pricing on coins page
   ───────────────────────────────────────────────────────────────────────── */

/* ── History page subtitle ──────────────────────────────────────────────── */
.sh-subtitle {
    text-align: center;
    color: rgba(255,255,255,0.5);
    font-size: 1.4rem;
    margin-top: -20px;
    margin-bottom: 30px;
}

/* ── Status banners ─────────────────────────────────────────────────────── */
.sh-status-banner {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    border-radius: 16px;
}
.sh-banner-active  { background: rgba(16,185,129,0.1);  border: 1px solid rgba(16,185,129,0.3); }
.sh-banner-pending { background: rgba(245,158,11,0.1);  border: 1px solid rgba(245,158,11,0.3); }
.sh-banner-none    { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); }

.sh-banner-icon { font-size: 2.8rem; flex-shrink: 0; }
.sh-banner-active  .sh-banner-icon { color: #f59e0b; }
.sh-banner-pending .sh-banner-icon { color: #f59e0b; }
.sh-banner-none    .sh-banner-icon { color: rgba(255,255,255,0.35); }

.sh-banner-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.sh-banner-body strong { display: block; font-size: 1.5rem; }
.sh-banner-active  .sh-banner-body strong { color: #10b981; }
.sh-banner-pending .sh-banner-body strong { color: #f59e0b; }
.sh-banner-none    .sh-banner-body strong { color: rgba(255,255,255,0.75); }
.sh-banner-body span  { font-size: 1.3rem; color: rgba(255,255,255,0.6); }
.sh-days-left { font-size: 1.1rem !important; color: rgba(16,185,129,0.85) !important; font-weight: 700; }

.sh-renew-btn {
    padding: 10px 22px;
    border-radius: 10px;
    background: var(--primarycolor);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s;
    flex-shrink: 0;
}
.sh-renew-btn:hover { opacity: 0.85; color: #fff; }

/* ── Empty state ────────────────────────────────────────────────────────── */
.sh-empty {
    text-align: center;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.sh-empty-icon { font-size: 4rem; color: rgba(255,255,255,0.15); }
.sh-empty p    { font-size: 1.5rem; color: rgba(255,255,255,0.45); margin: 0; }

/* ── Record cards ───────────────────────────────────────────────────────── */
.sh-card-list { display: flex; flex-direction: column; gap: 16px; }
.sh-record-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 20px 24px;
    transition: box-shadow 0.2s;
}
.sh-record-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.25); }

.sh-record-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}
.sh-record-plan  { display: flex; align-items: center; gap: 12px; }
.sh-plan-icon    { font-size: 2rem; color: var(--primarycolor); }
.sh-plan-name    { display: block; font-size: 1.6rem; font-weight: 800; color: #fff; }
.sh-plan-days    { display: block; font-size: 1.2rem; color: rgba(255,255,255,0.5); }

/* ── Status badges ──────────────────────────────────────────────────────── */
.sh-badge { padding: 5px 14px; border-radius: 20px; font-size: 1.2rem; font-weight: 700; }
.sh-badge-active  { background: rgba(16,185,129,0.15);  color: #10b981; border: 1px solid rgba(16,185,129,0.3); }
.sh-badge-pending { background: rgba(245,158,11,0.15);  color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); }
.sh-badge-expired { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.45); border: 1px solid rgba(255,255,255,0.1); }
.sh-badge-revoked { background: rgba(239,68,68,0.12);   color: #ef4444; border: 1px solid rgba(239,68,68,0.25); }

/* ── Meta grid ──────────────────────────────────────────────────────────── */
.sh-record-meta { display: flex; flex-wrap: wrap; gap: 16px; }
.sh-meta-item   { display: flex; flex-direction: column; gap: 2px; min-width: 100px; }
.sh-meta-label  { font-size: 1.1rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; }
.sh-meta-value  { font-size: 1.3rem; color: rgba(255,255,255,0.85); font-weight: 600; }
.sh-method-kpay { color: #60a5fa; }
.sh-method-wave { color: #a78bfa; }
.sh-proof-link  { font-size: 1.3rem; color: var(--primarycolor); text-decoration: none; font-weight: 600; }
.sh-proof-link:hover { text-decoration: underline; }

/* ── Progress bar ───────────────────────────────────────────────────────── */
.sh-progress-wrap  { margin-top: 14px; display: flex; align-items: center; gap: 12px; }
.sh-progress-bar   { flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.sh-progress-fill  { height: 100%; background: linear-gradient(90deg, #10b981, #34d399); border-radius: 3px; transition: width 0.5s; }
.sh-progress-label { font-size: 1.2rem; color: rgba(255,255,255,0.55); white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════════════════
   Discount pricing — coins page plan cards
   Applied when a plan has discount_price set and lower than regular price
   ════════════════════════════════════════════════════════════════════════════ */

/* Wrapper replaces .sub-plan-price when discount is active */
.sub-plan-price-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 16px 0 8px;
}

/* Struck-through original price — intentionally muted */
.sub-plan-price-original {
    display: flex;
    align-items: baseline;
    gap: 4px;
    text-decoration: line-through;
    color: rgba(255,255,255,0.35);
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.2px;
}

/* Discount price — large and prominent */
.sub-plan-price-discount {
    display: flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
}
.sub-plan-price-discount .sub-plan-currency { font-size: 1.4rem; }
.sub-plan-price-discount .sub-plan-amount   { font-size: 3.6rem; font-weight: 900; color: #fff; }

/* "SAVE X%" pill — high-contrast alert colour */
.sub-plan-save-pill {
    display: inline-block;
    background: #e53e3e;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 3px 10px;
    border-radius: 20px;
    margin-top: 2px;
    text-transform: uppercase;
}

/* Subtle red glow on featured (badge_label) cards that also have a discount */
.sub-plan-featured .sub-plan-save-pill {
    background: linear-gradient(135deg, #e53e3e, #f56565);
    box-shadow: 0 2px 10px rgba(229,62,62,0.45);
}