/* billing-only styles. Shared shell lives in app.css — don't redefine it here. */

.sidebar-brand-icon:hover{filter:drop-shadow(0 2px 8px rgba(198,93,107,0.4))}
.billing-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
.billing-card{background:rgba(255,255,255,0.85);
      border:1px solid rgba(200,148,149,0.12);border-radius:24px;padding:28px;transition:var(--transition);}
.billing-card:hover{border-color:rgba(200,148,149,0.25)}
.billing-card h2{font-size:0.82rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-light);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.billing-card h2 [data-lucide]{width:16px;height:16px}
.billing-card-full{grid-column:1/-1}
.plan-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;
      border-radius:var(--radius-full);font-weight:700;font-size:1rem;
      background:rgba(52,211,153,0.12);color:#059669;border:1px solid rgba(52,211,153,0.3);}
.plan-badge [data-lucide]{width:18px;height:18px}
.plan-detail{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.plan-detail-row{display:flex;justify-content:space-between;align-items:center;font-size:0.9rem;}
.plan-detail-row .label{color:var(--text-muted)}
.plan-detail-row .value{font-weight:700;color:var(--text)}
.trial-progress{margin-top:20px}
.trial-bar{height:8px;border-radius:100px;background:var(--rose-hover);overflow:hidden;margin-top:8px}
.trial-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--emerald),#6ee7b7);transition:width .8s var(--ease-out)}
.trial-label{display:flex;justify-content:space-between;font-size:0.82rem;color:var(--text-muted);margin-top:6px}
.card-display{display:flex;align-items:center;gap:16px;padding:16px 20px;
      background:var(--rose-hover);border-radius:16px;border:1px solid rgba(200,148,149,0.1);}
.card-icon{width:48px;height:32px;border-radius:8px;background:linear-gradient(135deg,#1A1219,#333);
      display:flex;align-items:center;justify-content:center;color:white;font-size:0.7rem;font-weight:700;flex-shrink:0;}
.card-info .card-number{font-size:0.95rem;font-weight:700;color:var(--text);letter-spacing:0.05em}
.card-info .card-expiry{font-size:0.82rem;color:var(--text-muted)}
.invoice-table{width:100%;border-collapse:collapse;margin-top:8px}
.invoice-table th{text-align:left;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-light);padding:10px 16px;border-bottom:1px solid rgba(200,148,149,0.15)}
.invoice-table td{padding:14px 16px;font-size:0.9rem;color:var(--text);border-bottom:1px solid rgba(200,148,149,0.06)}
.invoice-table tr:hover td{background:var(--rose-hover)}
.invoice-status{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--radius-full);font-size:0.72rem;font-weight:700}
.invoice-status.paid{background:rgba(52,211,153,0.12);color:#059669}
.invoice-status.pending{background:rgba(245,158,11,0.12);color:#b45309}
.invoice-download{color:var(--rose-deep);font-weight:600;font-size:0.85rem;display:inline-flex;align-items:center;gap:4px;transition:var(--transition)}
.invoice-download:hover{color:var(--violet)}
.invoice-download [data-lucide]{width:14px;height:14px}
.plan-badge.past-due{background:rgba(220,38,38,0.08);color:#dc2626;border:1px solid rgba(220,38,38,0.2);}
.plan-badge.cancelled{background:rgba(100,100,100,0.08);color:#555;border:1px solid rgba(100,100,100,0.15);}
.plan-badge.household{background:rgba(130,168,168,0.15);color:#3d7a7a;border:1px solid rgba(130,168,168,0.3);}
.alert-banner.past-due{background:rgba(220,38,38,0.06);border:1px solid rgba(220,38,38,0.2);color:#7f1d1d;}
.alert-banner.past-due h4{color:#dc2626;}
.alert-banner.past-due p{color:var(--text-muted);}
.alert-banner.household{background:rgba(130,168,168,0.08);border:1px solid rgba(130,168,168,0.2);color:#115e59;}
.alert-banner.household h4{color:#3d7a7a;}
.alert-banner.household p{color:var(--text-muted);}
.card-list{display:flex;flex-direction:column;gap:12px;}
.card-item{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--rose-hover);border-radius:16px;border:1px solid rgba(200,148,149,0.1);}
.card-item-info{flex:1;}
.card-item-info .card-number{font-size:0.95rem;font-weight:700;color:var(--text);letter-spacing:0.05em}
.card-item-info .card-expiry{font-size:0.82rem;color:var(--text-muted)}
.card-item-actions{display:flex;gap:8px;align-items:center;}
.default-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--radius-full);font-size:0.72rem;font-weight:700;background:rgba(52,211,153,0.12);color:#059669;}
.cancel-link{font-size:0.85rem;color:#dc2626;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin-top:16px;transition:var(--transition);}
.cancel-link:hover{color:#991b1b;}
.cancel-link [data-lucide]{width:14px;height:14px;}
@media(max-width:900px){
.billing-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
.billing-card{padding:20px}
.invoice-table{font-size:0.82rem}
.invoice-table th,.invoice-table td{padding:10px 8px}
}
@media(max-width:600px){
/* A 5-column invoice table cannot fit 380px. Let it scroll horizontally
     rather than stretching the whole page and creating body-level scroll. */
  .invoice-table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
}