/* ═══════════════════════════════════════════
   Content Pages — Shared Styles for Subtopic Pages
   ═══════════════════════════════════════════ */

.container{max-width:1200px;margin:0 auto;padding:24px;padding-top:0}

/* ── Page Title ── */
.page-title{font-family:var(--font-heading);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;color:var(--text-primary);margin-bottom:8px}
.page-subtitle{color:var(--text-muted);font-size:1.05rem;margin-bottom:32px}

/* ── Section Cards ── */
.section-card{background:#fff;border-radius:var(--radius-card);padding:32px;box-shadow:var(--shadow-card);margin-bottom:24px;transition:all var(--dur-med) var(--ease-smooth)}
.section-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
.section-card h2{font-size:1.4rem;margin-bottom:16px}
.section-card h2 .emoji{margin-right:8px}
.section-card h3{font-size:1.1rem;margin-bottom:10px}

/* ── Learning Outcomes ── */
.outcomes{background:rgba(124,58,237,0.04);border-left:4px solid var(--accent);border-radius:16px;padding:16px 20px;margin-bottom:20px}
.outcomes h4{font-family:var(--font-heading);font-size:14px;color:var(--accent);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.05em}
.outcomes ul{list-style:none;padding:0}
.outcomes li{font-size:14px;color:var(--text-muted);padding:4px 0;padding-left:20px;position:relative}
.outcomes li::before{content:"\2713";position:absolute;left:0;color:var(--accent-emerald);font-weight:700}

/* ── Formula Box ── */
.formula-box{background:linear-gradient(135deg,rgba(124,58,237,0.05),rgba(219,39,119,0.04));border-radius:20px;padding:20px 24px;margin-bottom:16px;text-align:center}
.formula-box p{font-size:1.3rem;font-weight:700;color:var(--text-primary);font-family:var(--font-heading)}
.formula-box .sub{font-size:0.85rem;color:var(--text-muted);font-weight:400;margin-top:4px}

/* ── Simulation Box ── */
.sim-box{background:linear-gradient(135deg,rgba(15,185,129,0.04),rgba(14,165,233,0.03));border-radius:24px;padding:24px;margin-bottom:20px;border:1px solid rgba(160,150,180,0.1)}
.sim-box h3{font-size:1.05rem;margin-bottom:14px}
.sim-box canvas{display:block;width:100%;max-width:700px;margin:0 auto;border-radius:16px;background:#f8f7fc}
.sim-box .controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;justify-content:center}

/* ── Controls ── */
.ctrl-group{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.7);border-radius:16px;padding:8px 14px;border:1px solid rgba(160,150,180,0.1)}
.ctrl-group label{font-size:13px;font-weight:600;color:var(--text-muted);white-space:nowrap}
.ctrl-group input[type=range]{accent-color:var(--accent);width:100px}
.display-val{font-family:var(--font-heading);font-size:14px;font-weight:700;color:var(--accent);padding:6px 14px;background:rgba(124,58,237,0.06);border-radius:12px}

/* ── Buttons inside content ── */
.sim-box button,.section-card button{padding:10px 20px;border:none;border-radius:var(--radius-btn);font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;transition:all var(--dur-fast);box-shadow:var(--shadow-btn)}
.sim-box button:hover,.section-card button:hover{transform:translateY(-1px);box-shadow:var(--shadow-btn-hover)}
.sim-box button:active,.section-card button:active{transform:scale(0.95)}
.btn-green{background:linear-gradient(135deg,#34D399,var(--accent-emerald));color:#fff}
.btn-orange{background:linear-gradient(135deg,#FBBF24,var(--accent-amber));color:#fff}
.btn-red{background:linear-gradient(135deg,#FB7185,var(--accent-rose));color:#fff}
.btn-sm{font-size:12px;padding:6px 14px;min-height:auto}

/* ── Example/Tip Boxes ── */
.example{background:rgba(14,165,233,0.04);border-left:4px solid var(--accent-blue);border-radius:16px;padding:14px 18px;margin:14px 0;font-size:14px;color:var(--text-muted)}
.tip{background:rgba(245,158,11,0.04);border-left:4px solid var(--accent-amber);border-radius:16px;padding:14px 18px;margin:14px 0;font-size:14px;color:var(--text-muted)}

/* ── Data Table ── */
.data-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:16px;overflow:hidden;margin:16px 0;font-size:14px}
.data-table th{background:rgba(124,58,237,0.06);color:var(--accent);font-weight:700;padding:10px 16px;text-align:left;font-family:var(--font-heading)}
.data-table td{padding:8px 16px;border-bottom:1px solid rgba(160,150,180,0.1);color:var(--text-muted)}
.data-table tr:last-child td{border-bottom:none}

/* ── Quiz ── */
.quiz-area{margin:20px 0}
.quiz-q{background:rgba(255,255,255,0.6);border-radius:20px;padding:20px;margin-bottom:16px;border:1px solid rgba(160,150,180,0.1)}
.quiz-q h4{font-family:var(--font-heading);font-size:15px;margin-bottom:12px;color:var(--text-primary)}
.quiz-q label{display:block;padding:8px 14px;margin:4px 0;border-radius:12px;font-size:14px;color:var(--text-muted);cursor:pointer;transition:background var(--dur-fast)}
.quiz-q label:hover{background:rgba(124,58,237,0.04)}
.quiz-q input[type=radio]{margin-right:10px;accent-color:var(--accent)}
.result-box{background:rgba(16,185,129,0.06);border:1px solid rgba(16,185,129,0.2);border-radius:20px;padding:16px 20px;margin-top:16px;text-align:center;font-weight:700;color:var(--accent-emerald)}

/* ── Content Sidebar Collapse ── */
.content-sidebar.collapsed {
  width: 56px !important;
  overflow: hidden;
  transition: width 0.35s var(--ease-smooth, cubic-bezier(0.16, 1, 0.3, 1));
}
.content-sidebar.collapsed .sidebar-label,
.content-sidebar.collapsed .content-sidebar-brand,
.content-sidebar.collapsed .sidebar-close,
.content-sidebar.collapsed .sidebar-num {
  display: none;
}
.content-sidebar.collapsed .content-sidebar-header {
  justify-content: center;
  padding: 8px 10px 16px;
  border-bottom: 1px solid rgba(160,150,180,0.08);
  margin-bottom: 12px;
}
.content-sidebar.collapsed .content-sidebar-links {
  padding: 0 6px;
}
.content-sidebar.collapsed .content-sidebar-link {
  justify-content: center;
  padding: 10px 4px;
}
.content-sidebar.collapsed .sidebar-toggle {
  left: 62px;
}
.content-sidebar.collapsed .sidebar-collapse-btn i {
  transform: scaleX(-1);
}

/* ── Auth UI ── */
.auth-ui {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.btn-buy-now {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--radius-btn);
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--dur-fast);
  white-space: nowrap;
}
.btn-buy-now:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(124,58,237,0.3);
  color: #fff;
}
.auth-form-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.6);
  border: 1.5px solid rgba(160,150,180,0.2);
  border-radius: var(--radius-btn);
  padding: 4px 4px 4px 12px;
  transition: all var(--dur-fast);
}
.auth-form-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}
.auth-email-input,
.auth-pw-input {
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  width: 110px;
  font-family: var(--font-body);
  outline: none;
}
.auth-pw-input { width: 90px; }
.auth-email-input::placeholder,
.auth-pw-input::placeholder { color: var(--text-muted); }
.auth-verify-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  transition: all var(--dur-fast);
  flex-shrink: 0;
}
.auth-verify-btn:hover { transform: scale(1.05); }
.auth-verify-btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.auth-email-display {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-btn);
  background: rgba(16,185,129,0.1);
  color: var(--accent-emerald);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
}
.auth-signout-btn,
.auth-changepw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 10px;
  background: rgba(160,150,180,0.1);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  transition: all var(--dur-fast);
}
.auth-signout-btn:hover { background: rgba(244,63,94,0.1); color: var(--accent-rose); }
.auth-changepw-btn:hover { background: rgba(245,158,11,0.1); color: var(--accent-amber); }
.auth-changepw-form {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid rgba(160,150,180,0.15);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--shadow-card);
  z-index: 9999;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
}
.auth-cp-input {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid rgba(160,150,180,0.2);
  border-radius: 12px;
  font-size: 13px;
  font-family: var(--font-body);
  outline: none;
  color: var(--text-primary);
  background: rgba(255,255,255,0.6);
}
.auth-cp-input:focus { border-color: var(--accent); }
.auth-cp-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-fast);
}
.auth-cp-btn:hover { transform: translateY(-1px); }
.auth-cp-cancel {
  padding: 8px 16px;
  border: none;
  border-radius: 12px;
  background: rgba(160,150,180,0.1);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
}
.auth-cp-cancel:hover { background: rgba(160,150,180,0.2); }
@media (max-width: 900px) {
  .btn-buy-now { font-size: 12px; padding: 6px 12px; }
  .auth-email-input { width: 80px; font-size: 12px; }
  .auth-pw-input { width: 70px; font-size: 12px; }
}

/* ── Content Gating ── */
body.no-access .card {
  opacity: 0.4;
  filter: blur(2px);
  pointer-events: none;
  user-select: none;
}
body.no-access .content-main {
  position: relative;
}
body.no-access .content-main::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(244,241,250,0.6);
  backdrop-filter: blur(8px);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.no-access .content-main::before {
  content: '🔒 Full Access Required';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 900;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.4;
  padding: 40px;
  background: rgba(255,255,255,0.95);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  max-width: 500px;
}
body.no-access .content-main::before {
  content: '🔒 Full Access Required\n\nGet the complete IGCSE Physics platform with all simulations, quizzes & past papers.\n\nClick "Get Full Access" above to purchase.';
  white-space: pre-wrap;
}
body.has-access .card {
  opacity: 1;
  filter: none;
  pointer-events: all;
  user-select: auto;
}

/* ── Sidebar Collapse Toggle Button ── */
.sidebar-collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(160,150,180,0.1);
  border-radius: 10px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  transition: all var(--dur-fast, 200ms);
  flex-shrink: 0;
}
.sidebar-collapse-btn:hover {
  background: rgba(124,58,237,0.12);
  color: var(--accent);
}

/* ── Content Main — adjust when sidebar is collapsed ── */
@media (min-width: 901px) {
  .content-sidebar.collapsed ~ .content-main,
  .content-sidebar.collapsed + .content-main {
    max-width: 1100px;
    padding-left: 80px;
  }
}

/* ── Hide collapse button on mobile (sidebar toggle already exists) ── */
@media (max-width: 900px) {
  .sidebar-collapse-btn {
    display: none;
  }
}

/* ── Responsive ── */
@media(max-width:768px){
  .container{padding:16px;padding-top:0}
  .section-card{padding:20px}
  .sim-box{padding:16px}
  .ctrl-group{flex-wrap:wrap}
  .ctrl-group input[type=range]{width:80px}
  .data-table{font-size:13px}
}