/* ============================================================
   LevelUp Learning — Main Stylesheet
   assets/css/main.css
   ============================================================ */

/* ── Fonts & Root ─────────────────────────────────────────── */
:root {
  --lul-blue:      #1E3A8A;
  --lul-blue-mid:  #2563EB;
  --lul-purple:    #7C3AED;
  --lul-teal:      #0D9488;
  --lul-orange:    #EA580C;
  --lul-yellow:    #F59E0B;
  --lul-green:     #059669;
  --lul-red:       #DC2626;
  --lul-dark:      #0F172A;
  --lul-body:      #F1F5F9;
  --lul-card:      #FFFFFF;
  --lul-border:    #E2E8F0;
  --lul-muted:     #64748B;
  --lul-radius:    14px;
  --lul-radius-sm: 8px;
  --lul-shadow:    0 4px 24px rgba(30,58,138,.10);
  --lul-shadow-lg: 0 8px 40px rgba(30,58,138,.16);
}

* { box-sizing: border-box; }

body {
  font-family: 'Nunito', system-ui, sans-serif;
  background: var(--lul-body);
  color: var(--lul-dark);
  min-height: 100vh;
}

/* ── Font weights ─────────────────────────────────────────── */
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }
.fw-900 { font-weight: 900 !important; }

/* ── Navbar ───────────────────────────────────────────────── */
.lul-navbar {
  background: linear-gradient(135deg, var(--lul-blue) 0%, var(--lul-purple) 100%);
  box-shadow: 0 2px 20px rgba(30,58,138,.30);
  padding: .6rem 0;
}

.lul-logo-icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}

.lul-xp-badge {
  background: linear-gradient(135deg, #7C3AED, #A78BFA);
  color: white;
  border-radius: 20px;
  font-weight: 700;
}

.lul-coin-badge {
  background: linear-gradient(135deg, #D97706, #FCD34D);
  color: #1a1a1a;
  border-radius: 20px;
  font-weight: 700;
}

.lul-streak-badge {
  background: linear-gradient(135deg, #DC2626, #F97316);
  color: white;
  border-radius: 20px;
  font-weight: 700;
}

.lul-avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lul-yellow), var(--lul-orange));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .85rem;
}

/* ── Cards ────────────────────────────────────────────────── */
.lul-card {
  background: var(--lul-card);
  border-radius: var(--lul-radius);
  border: 1px solid var(--lul-border);
  box-shadow: var(--lul-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
}

.lul-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--lul-shadow-lg);
}

.lul-card-header {
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--lul-border);
  background: linear-gradient(135deg, #F8FAFF 0%, #EFF6FF 100%);
}

/* ── Hero / Banner ────────────────────────────────────────── */
.lul-hero {
  background: linear-gradient(135deg, var(--lul-blue) 0%, var(--lul-purple) 60%, #6D28D9 100%);
  color: white;
  padding: 5rem 0 6rem;
  position: relative;
  overflow: hidden;
}

.lul-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.lul-hero-title {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0,0,0,.2);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-lul-primary {
  background: linear-gradient(135deg, var(--lul-blue-mid), var(--lul-purple));
  color: white;
  border: none;
  border-radius: 30px;
  font-weight: 700;
  padding: .6rem 1.8rem;
  transition: all .2s;
  box-shadow: 0 4px 12px rgba(124,58,237,.3);
}
.btn-lul-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(124,58,237,.4);
  color: white;
}

.btn-lul-warning {
  background: linear-gradient(135deg, var(--lul-yellow), var(--lul-orange));
  color: white;
  border: none;
  border-radius: 30px;
  font-weight: 700;
  padding: .6rem 1.8rem;
  box-shadow: 0 4px 12px rgba(234,88,12,.25);
  transition: all .2s;
}
.btn-lul-warning:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(234,88,12,.35);
  color: white;
}

.btn-lul-success {
  background: linear-gradient(135deg, var(--lul-teal), var(--lul-green));
  color: white;
  border: none;
  border-radius: 30px;
  font-weight: 700;
  padding: .6rem 1.8rem;
  transition: all .2s;
}
.btn-lul-success:hover {
  transform: translateY(-2px);
  color: white;
}

/* ── Quiz Cards ───────────────────────────────────────────── */
.quiz-card {
  background: white;
  border-radius: var(--lul-radius);
  border: 2px solid var(--lul-border);
  overflow: hidden;
  transition: all .25s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.quiz-card:hover {
  border-color: var(--lul-purple);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(124,58,237,.15);
}

.quiz-card-icon {
  font-size: 2.5rem;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.quiz-card-footer {
  padding: .75rem 1.25rem;
  background: #F8FAFC;
  border-top: 1px solid var(--lul-border);
  margin-top: auto;
}

/* ── Category Pills ───────────────────────────────────────── */
.category-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .9rem;
  border-radius: 20px;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .2s;
  text-decoration: none;
  color: white;
}
.category-pill:hover, .category-pill.active {
  transform: scale(1.05);
  filter: brightness(1.1);
  color: white;
}

/* ── XP Progress Bar ──────────────────────────────────────── */
.lul-xp-bar .progress {
  height: 12px;
  border-radius: 10px;
  background: #E2E8F0;
}

.lul-xp-bar .progress-bar {
  background: linear-gradient(90deg, var(--lul-purple), var(--lul-yellow));
  border-radius: 10px;
  position: relative;
}

/* ── Stats boxes ──────────────────────────────────────────── */
.stat-box {
  background: white;
  border-radius: var(--lul-radius);
  padding: 1.5rem;
  text-align: center;
  border: 1px solid var(--lul-border);
  box-shadow: var(--lul-shadow);
}

.stat-box .stat-number {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}

.stat-box .stat-label {
  font-size: .8rem;
  color: var(--lul-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: .25rem;
}

/* ── Badges ───────────────────────────────────────────────── */
.badge-card {
  background: white;
  border-radius: var(--lul-radius);
  padding: 1.5rem;
  text-align: center;
  border: 2px solid var(--lul-border);
  transition: all .2s;
}
.badge-card.earned {
  border-color: var(--lul-yellow);
  background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
}
.badge-card .badge-icon {
  font-size: 2.8rem;
  display: block;
  margin-bottom: .5rem;
}
.badge-card.locked {
  opacity: .4;
  filter: grayscale(1);
}

/* ── Quiz Attempt interface ───────────────────────────────── */
.quiz-question-card {
  background: white;
  border-radius: var(--lul-radius);
  padding: 2rem;
  box-shadow: var(--lul-shadow-lg);
  border: 2px solid var(--lul-border);
}

.answer-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 1rem 1.5rem;
  border-radius: var(--lul-radius-sm);
  border: 2px solid var(--lul-border);
  background: white;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
  margin-bottom: .6rem;
}
.answer-option:hover {
  border-color: var(--lul-purple);
  background: #FAF5FF;
  transform: translateX(4px);
}
.answer-option.selected {
  border-color: var(--lul-blue-mid);
  background: #EFF6FF;
}
.answer-option.correct {
  border-color: var(--lul-green);
  background: #D1FAE5;
  color: var(--lul-green);
}
.answer-option.wrong {
  border-color: var(--lul-red);
  background: #FEE2E2;
  color: var(--lul-red);
}

.quiz-timer {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--lul-blue);
}
.quiz-timer.danger {
  color: var(--lul-red);
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}

/* ── Explanation panel ────────────────────────────────────── */
.explanation-panel {
  border-radius: var(--lul-radius-sm);
  padding: 1.25rem;
  margin-top: 1rem;
  border-left: 4px solid var(--lul-teal);
  background: linear-gradient(135deg, #F0FDFA, #CCFBF1);
  display: none;
}
.explanation-panel.show { display: block; }

/* ── Admin sidebar ────────────────────────────────────────── */
.admin-sidebar {
  min-height: calc(100vh - 60px);
  background: var(--lul-dark);
  width: 260px;
  position: fixed;
  top: 60px;
  left: 0;
  z-index: 100;
  overflow-y: auto;
  padding: 1rem 0;
}

.admin-sidebar .nav-link {
  color: #94A3B8;
  padding: .65rem 1.5rem;
  font-weight: 600;
  border-radius: 0;
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
  color: white;
  background: rgba(255,255,255,.07);
  border-left: 3px solid var(--lul-yellow);
  padding-left: calc(1.5rem - 3px);
}

.admin-main {
  margin-left: 260px;
  padding: 2rem;
  min-height: calc(100vh - 60px);
}

/* ── Tables ───────────────────────────────────────────────── */
.lul-table thead th {
  background: var(--lul-blue);
  color: white;
  font-weight: 700;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.lul-table tbody tr:hover {
  background: #F0F4FF;
}

/* ── Forms ────────────────────────────────────────────────── */
.lul-form-control {
  border-radius: var(--lul-radius-sm);
  border: 2px solid var(--lul-border);
  padding: .7rem 1rem;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  transition: border-color .15s;
}
.lul-form-control:focus {
  border-color: var(--lul-purple);
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
  outline: none;
}

/* ── Auth pages ───────────────────────────────────────────── */
.auth-wrapper {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--lul-blue) 0%, var(--lul-purple) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.auth-card {
  background: white;
  border-radius: 20px;
  padding: 2.5rem;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}

/* ── Leaderboard ──────────────────────────────────────────── */
.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  border-radius: var(--lul-radius-sm);
  margin-bottom: .5rem;
  background: white;
  border: 1px solid var(--lul-border);
  transition: background .15s;
}
.leaderboard-row:hover { background: #F0F4FF; }
.leaderboard-row.rank-1 { border-color: #FFD700; background: #FFFBEB; }
.leaderboard-row.rank-2 { border-color: #C0C0C0; background: #F8FAFC; }
.leaderboard-row.rank-3 { border-color: #CD7F32; background: #FFF7ED; }

.rank-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: .9rem;
  flex-shrink: 0;
}

/* ── Guest registration modal ─────────────────────────────── */
.guest-prompt-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  padding: 1rem;
}

.guest-prompt-card {
  background: white;
  border-radius: 24px;
  padding: 2.5rem;
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
  animation: slideUp .35s ease;
}

@keyframes slideUp {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Result / Score screen ────────────────────────────────── */
.score-circle {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lul-purple), var(--lul-blue));
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-weight: 900;
  box-shadow: 0 8px 30px rgba(124,58,237,.4);
}
.score-circle .score-num {
  font-size: 2.2rem;
  line-height: 1;
}
.score-circle .score-denom {
  font-size: .9rem;
  opacity: .8;
}

/* ── Footer ───────────────────────────────────────────────── */
.lul-footer {
  background: var(--lul-dark);
  color: #94A3B8;
}
.lul-footer-link {
  color: #64748B;
  text-decoration: none;
  transition: color .15s;
  display: block;
  margin-bottom: .4rem;
}
.lul-footer-link:hover { color: var(--lul-yellow); }

/* ── Utility ──────────────────────────────────────────────── */
.text-lul-blue   { color: var(--lul-blue)   !important; }
.text-lul-purple { color: var(--lul-purple) !important; }
.text-lul-teal   { color: var(--lul-teal)   !important; }
.text-lul-orange { color: var(--lul-orange) !important; }

.bg-lul-blue   { background: var(--lul-blue)   !important; }
.bg-lul-purple { background: var(--lul-purple) !important; }
.bg-lul-teal   { background: var(--lul-teal)   !important; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .admin-sidebar { display: none; }
  .admin-main    { margin-left: 0; padding: 1rem; }
  .lul-hero      { padding: 3rem 0 4rem; }
  .auth-card     { padding: 1.75rem 1.25rem; }
}

/* ─── Phase 3: Battle, Shop, Dashboard additions ──────────── */

/* Clickable stat box */
.stat-box-link .stat-box {
  transition: transform .2s, box-shadow .2s, border-color .2s;
  border-color: transparent;
}
.stat-box-link:hover .stat-box {
  transform: translateY(-3px);
  box-shadow: var(--lul-shadow-lg);
  border-color: var(--lul-purple);
}

/* Battle arena health bars */
.battle-hp-bar {
  height: 12px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,.2);
}

/* Battle answer options — tighter version for arena */
.answer-option.battle-opt {
  padding: .75rem 1.25rem;
  font-size: .95rem;
}

/* Story chapter narrative block */
.story-narrative {
  background: linear-gradient(135deg,#F0F4FF,#EEF2FF);
  border-left: 4px solid var(--lul-purple);
  border-radius: var(--lul-radius-sm);
  padding: 1rem 1.25rem;
  font-style: italic;
  color: var(--lul-blue);
  font-weight: 600;
}

/* Coin balance badge */
.lul-coin-large {
  background: linear-gradient(135deg, #D97706, #B45309);
  color: white;
  font-weight: 900;
  padding: .75rem 2rem;
  border-radius: 50px;
  font-size: 1.5rem;
  display: inline-block;
}

/* Shop item card hover */
.shop-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--lul-shadow-lg);
}
.shop-item { transition: transform .2s, box-shadow .2s; }

/* XP history log row */
.xp-log-row {
  transition: background .15s;
}
.xp-log-row:hover {
  background: #F8FAFC;
}

/* Battle waiting room pulse ring */
.battle-pulse {
  animation: battlePulse 2s ease-in-out infinite;
}
@keyframes battlePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.08); opacity: .85; }
}

/* Invite code display */
.invite-code-display {
  font-family: 'Courier New', monospace;
  letter-spacing: .35em;
  font-size: 2.5rem;
  font-weight: 900;
}

/* Battle result hero gradient overlays */
.battle-win-bg  { background: linear-gradient(135deg,#065F46,#059669) !important; }
.battle-loss-bg { background: linear-gradient(135deg,#7F1D1D,#DC2626) !important; }
.battle-draw-bg { background: linear-gradient(135deg,#374151,#6B7280) !important; }

/* Leaderboard battle kings tab */
.battle-king-row .rank-icon {
  font-size: 1.3rem;
}

/* Weekly chart container */
.weekly-chart-wrap {
  position: relative;
  height: 130px;
}

/* Hint button integration */
.hint-btn:disabled,
.hint-btn.used {
  opacity: .5;
  pointer-events: none;
}

/* Power-up active banner */
.powerup-banner {
  background: linear-gradient(135deg,#FFFBEB,#FEF3C7);
  border: 2px solid #FCD34D;
  border-radius: var(--lul-radius);
}

/* ─── Responsive tweaks for Phase 3 ─────────────────────────── */
@media (max-width: 768px) {
  .invite-code-display { font-size: 1.8rem; }
  .battle-hp-bar { height: 8px; }
  .lul-coin-large { font-size: 1.2rem; padding: .5rem 1.5rem; }
}

/* ─── Phase 4: Classes & Teacher styles ──────────────────────── */

/* Teacher class card */
.teacher-class-card {
  cursor: pointer;
  border-radius: var(--lul-radius);
  transition: transform .2s, box-shadow .2s;
  border: 1px solid var(--lul-border);
  background: white;
}
.teacher-class-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lul-shadow-lg);
}

/* Assignment card in student view */
.assignment-card {
  border-radius: var(--lul-radius);
  border: 1px solid var(--lul-border);
  transition: box-shadow .2s;
}
.assignment-card:hover { box-shadow: var(--lul-shadow-lg); }

/* Class announcement */
.announcement-card {
  border-radius: var(--lul-radius);
  background: white;
}

/* Grade book table */
.gradebook-table .pass    { background: #F0FDF4; }
.gradebook-table .fail    { background: #FFF5F5; }
.gradebook-table .missing { background: #F8FAFC; }

/* Teacher dashboard stat cards */
.teacher-stat {
  background: white;
  border-radius: var(--lul-radius);
  padding: 1.5rem;
  border: 1px solid var(--lul-border);
  box-shadow: var(--lul-shadow);
  text-align: center;
  transition: transform .2s;
}
.teacher-stat:hover { transform: translateY(-2px); }

/* Class header color strip */
.class-strip {
  width: 100%;
  height: 6px;
  border-radius: 4px 4px 0 0;
}

/* Podium leaderboard */
.podium-bar {
  border-radius: 8px 8px 0 0;
  margin: 6px auto 0;
}

/* At-risk student highlight */
.at-risk-row { background: #FFF5F5; }

/* Student comment bubble */
.comment-bubble {
  background: #F1F5F9;
  border-radius: 12px;
  padding: .5rem .75rem;
}

/* Assignment attempt counter badge */
.attempt-counter {
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  color: #475569;
  padding: .2rem .6rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
}

/* Teacher nav highlight */
.lul-navbar .nav-link.text-warning:hover {
  color: #FCD34D !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .teacher-class-card { margin-bottom: .5rem; }
  .podium-bar { width: 52px !important; }
}

/* ─── Phase 5: Subscription & Payment styles ─────────────────── */

/* Pricing page plan cards */
.pricing-card-popular {
  border: 3px solid #FCD34D !important;
  position: relative;
}
.plan-badge-popular {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: #FCD34D; color: #78350F;
  padding: .25rem 1rem; border-radius: 20px;
  font-weight: 800; font-size: .78rem; white-space: nowrap;
}

/* Checkout plan options */
.plan-option, .payment-method-option {
  display: block;
  padding: 1rem 1.25rem;
  border: 2px solid var(--lul-border);
  border-radius: var(--lul-radius);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  user-select: none;
}
.plan-option:hover, .payment-method-option:hover {
  border-color: var(--lul-purple);
  background: #F8F5FF;
}
.plan-option.selected, .payment-method-option.selected {
  border-color: var(--lul-purple);
  background: #F3F0FF;
}

/* Payment method icons */
.payment-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
}

/* Step circles for manual payment */
.step-circle {
  width: 32px; height: 32px; border-radius: 50%;
  background: #E2E8F0; color: #94A3B8;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem; flex-shrink: 0;
}
.step-circle.active { background: #1E3A8A; color: white; }
.step-circle.done   { background: #059669; color: white; }

/* Receipt upload zone */
.upload-drop-zone {
  border: 2px dashed #CBD5E1;
  border-radius: 12px; padding: 2rem;
  text-align: center; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.upload-drop-zone:hover, .upload-drop-zone.dragover {
  border-color: var(--lul-purple);
  background: #F5F3FF;
}

/* Pending animation */
@keyframes pendingPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: .85; }
}
#pendingAnimation > div { animation: pendingPulse 2.2s ease-in-out infinite; }

/* Pro member banner */
.pro-hero-banner {
  background: linear-gradient(135deg, #0F172A, #1E3A8A);
  border-radius: var(--lul-radius);
  color: white;
}

/* Admin payment status badges */
.payment-pending  { background: #FEF3C7; color: #92400E; }
.payment-approved { background: #D1FAE5; color: #064E3B; }
.payment-rejected { background: #FEE2E2; color: #7F1D1D; }

/* Go Pro nav link pulse */
@keyframes goPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .7; }
}
.lul-navbar .go-pro-link { animation: goPulse 3s ease-in-out infinite; }

/* JazzCash branded button */
.btn-jazzcash  { background: #CC0000; color: white; border: none; }
.btn-jazzcash:hover { background: #AA0000; color: white; }
.btn-easypaisa { background: #00A651; color: white; border: none; }
.btn-easypaisa:hover { background: #008040; color: white; }

/* Trust bar */
.trust-bar { background: #1E3A8A; }

/* ─── Phase 5 (final): Pro status card, pricing polish ──────── */

/* Pro status card in dashboard sidebar */
.pro-status-card {
  background: linear-gradient(135deg, #0F172A, #1E3A8A);
  color: white;
  border-radius: var(--lul-radius);
  padding: 1.25rem;
  border: none;
}

/* Pricing plan cards */
.pricing-plan-card {
  border-radius: var(--lul-radius);
  transition: transform .2s, box-shadow .2s;
}
.pricing-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lul-shadow-lg);
}
.pricing-plan-card.popular {
  border: 3px solid #FCD34D !important;
}

/* Checkout summary sidebar */
.checkout-summary {
  position: sticky;
  top: 80px;
  background: white;
  border-radius: var(--lul-radius);
  border: 1px solid var(--lul-border);
}

/* Feature lock overlay for free users */
.pro-locked {
  position: relative;
  overflow: hidden;
}
.pro-locked::after {
  content: '👑 Pro Only';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(0,0,0,.7);
  color: #FCD34D;
  font-weight: 800;
  padding: .5rem 1.2rem;
  border-radius: 20px;
  font-size: .9rem;
  pointer-events: none;
  white-space: nowrap;
}

/* Manual payment account box */
.payment-account-box {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: var(--lul-radius);
  padding: 1rem;
}

/* Receipt upload zone drag states */
.upload-drop-zone.dragover {
  border-color: var(--lul-purple);
  background: #F5F3FF;
  transform: scale(1.01);
}

/* Payment method pill labels */
.method-label-jc  { background: #FEE2E2; color: #991B1B; padding: .15rem .6rem; border-radius: 20px; font-size: .72rem; font-weight: 700; }
.method-label-ep  { background: #DCFCE7; color: #14532D; padding: .15rem .6rem; border-radius: 20px; font-size: .72rem; font-weight: 700; }
.method-label-man { background: #FEF3C7; color: #92400E; padding: .15rem .6rem; border-radius: 20px; font-size: .72rem; font-weight: 700; }

/* Pro upsell section on homepage */
.pro-upsell-section {
  background: linear-gradient(135deg, #0F172A, #1E3A8A, #7C3AED);
}
.pro-upsell-icon {
  filter: drop-shadow(0 0 30px rgba(251,191,36,.4));
  animation: floatIcon 4s ease-in-out infinite;
}
@keyframes floatIcon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Subscription history table status */
.sub-status-active    { background: #D1FAE5; color: #065F46; padding: .2rem .6rem; border-radius: 20px; font-size: .75rem; font-weight: 700; }
.sub-status-expired   { background: #F1F5F9; color: #64748B; padding: .2rem .6rem; border-radius: 20px; font-size: .75rem; font-weight: 700; }
.sub-status-cancelled { background: #FEE2E2; color: #991B1B; padding: .2rem .6rem; border-radius: 20px; font-size: .75rem; font-weight: 700; }

/* Admin approve/reject quick buttons */
.btn-approve { background: #059669; color: white; border: none; }
.btn-approve:hover { background: #047857; color: white; }
.btn-reject  { background: #DC2626; color: white; border: none; }
.btn-reject:hover  { background: #B91C1C; color: white; }

/* JazzCash simulation screen */
.jc-sim-header {
  background: linear-gradient(135deg, #CC0000, #FF4B4B);
  color: white;
}
.ep-sim-header {
  background: linear-gradient(135deg, #00A651, #00CC65);
  color: white;
}

/* ─── Phase 6: Analytics & Reports ──────────────────────────── */

/* Stat box — base already exists, just adding report-specific */
.report-kpi-card {
  background: white;
  border-radius: var(--lul-radius);
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--lul-border);
  transition: box-shadow .2s;
}
.report-kpi-card:hover { box-shadow: var(--lul-shadow); }

/* Topic mastery chips */
.topic-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: .3rem .75rem; border-radius: 20px; font-size: .78rem;
  cursor: default; transition: transform .1s;
}
.topic-chip:hover { transform: scale(1.05); }
.topic-chip-name { font-weight: 600; }
.topic-chip-pct  { font-weight: 800; font-size: .7rem; }

/* Activity calendar */
.calendar-day {
  width: 28px; height: 28px; border-radius: 4px;
  background: #F1F5F9; color: #94A3B8;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 700; cursor: default;
  transition: transform .1s;
}
.calendar-day:hover { transform: scale(1.15); }
.calendar-day.active { background: #1E3A8A; color: white; }
.calendar-day.today  { outline: 2px solid #D97706; }

/* Chart containers */
.chart-card { position: relative; min-height: 200px; }

/* Retention table */
.retention-bar { height: 8px; border-radius: 4px; }

/* Grade matrix table */
.grade-matrix th { font-size: .75rem; }
.grade-matrix td { font-size: .8rem; }

/* At-risk panel */
.at-risk-card {
  border: 2px solid #FCA5A5;
  border-radius: var(--lul-radius);
}
.at-risk-card .card-header-danger {
  background: #FEF2F2;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #FCA5A5;
}

/* Export button */
.btn-export {
  background: white;
  border: 1px solid #059669;
  color: #059669;
  font-weight: 700;
}
.btn-export:hover { background: #059669; color: white; }

/* Period selector active */
.period-btn.active { background: #1E3A8A; color: white; border-color: #1E3A8A; }

/* Admin reports tab line */
.report-tab-active {
  border-bottom: 3px solid #1E3A8A;
  color: #1E3A8A;
  font-weight: 800;
}

/* ─── Phase 7: Notifications & Messaging ─────────────────────── */

/* Notification bell button */
.lul-notif-btn { border-radius: 50% !important; }

/* Notification item hover */
.notif-item:hover { background: #F8FAFC !important; }

/* Message thread bubble */
.msg-bubble {
  border-radius: 18px;
  padding: .65rem 1rem;
  max-width: 78%;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
}
.msg-bubble.mine    { background:#DBEAFE; border:1px solid #93C5FD; border-bottom-right-radius:4px; }
.msg-bubble.theirs  { background:#F1F5F9; border:1px solid #E2E8F0; border-bottom-left-radius:4px; }

/* Thread list item */
.thread-item {
  transition: background .12s;
  cursor: pointer;
}
.thread-item:hover { background: #F8FAFC !important; }
.thread-item.unread { background: #EFF6FF; }

/* Notification centre filter chips */
.notif-filter-btn { border-radius: 20px !important; }

/* Unread dot */
.unread-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #3B82F6; flex-shrink: 0;
  display: inline-block;
}