/* =========================================================
   SOS portals — additions (Oct 2026)
   Payments window, notes, quizzes, certificates, logo.
   Loaded after style.css on every admin / teacher / student page.
   Uses the same tokens as style.css so nothing looks out of place.
   ========================================================= */

:root{
  --navy-brand: #1B2A55;
  --gold-brand: #C6952C;
}

/* ---------- sidebar logo ---------- */
.sidebar .brand{ gap:10px; }
.brand-emblem{
  width:40px; height:40px; flex-shrink:0; border-radius:50%;
  background:#FAF6EC; padding:4px; box-shadow:0 0 0 1px rgba(201,162,75,.45);
}

/* ---------- gold call-to-action button ---------- */
.btn-gold-portal{
  background:linear-gradient(155deg,#E4C77A,var(--gold) 70%);
  color:#12161D; border:none; font-weight:bold;
  box-shadow:0 8px 20px -10px rgba(201,162,75,.8);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:999px; text-decoration:none; white-space:nowrap;
}
.btn-gold-portal:hover{ filter:brightness(1.05); transform:translateY(-1px); }

/* ---------- pay panel on the course page ---------- */
.pay-panel{ border:1px solid rgba(201,162,75,.45); background:linear-gradient(180deg,#FFFDF7,#fff); }
.pay-panel-row{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.pay-eyebrow{ font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--amber); }
.pay-amount{ font-size:var(--fs-xxl); color:var(--ink-2); line-height:1.2; }
.pay-state{
  margin-top:16px; padding:12px 14px; border-radius:10px; font-size:var(--fs-sm);
  display:flex; flex-direction:column; gap:3px;
}
.pay-state code{ background:rgba(0,0,0,.05); padding:1px 6px; border-radius:4px; }
.pay-state-pending{ background:var(--amber-bg); color:#7A5A12; border:1px solid rgba(180,132,31,.3); }
.pay-state-rejected{ background:var(--red-bg); color:var(--red); border:1px solid rgba(181,83,60,.3); }

/* ---------- pay modal ---------- */
.modal.pay-modal, .modal.quiz-modal{ width:min(560px, 94vw); }
.pay-modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.pay-x{
  border:none; background:#F1EEE6; width:34px; height:34px; border-radius:50%;
  font-size:20px; line-height:1; color:var(--ink-2); flex-shrink:0;
}
.pay-x:hover{ background:#E7E2D6; }
.pay-steps{ display:flex; gap:8px; margin:0 0 16px; }
.pay-step{
  flex:1; text-align:center; font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase;
  padding:7px 8px; border-radius:999px; background:#F3F0E8; color:var(--muted);
}
.pay-step.is-current{ background:var(--ink); color:#fff; }
.pay-step.is-done{ background:var(--green-bg); color:var(--green); }
.pay-tabs{ display:flex; gap:6px; background:#F3F0E8; padding:4px; border-radius:12px; margin-bottom:14px; }
.pay-tab{
  flex:1; border:none; background:transparent; padding:10px; border-radius:9px;
  font-size:var(--fs-sm); color:var(--muted);
}
.pay-tab.is-active{ background:#fff; color:var(--ink-2); box-shadow:var(--shadow-sm); font-weight:bold; }
.pay-howto{ margin:0 0 12px; padding-left:22px; font-size:var(--fs-sm); line-height:2; }
.pay-howto li::marker{ color:var(--gold); font-weight:bold; }
.pay-dl{ display:grid; grid-template-columns:auto 1fr; gap:8px 14px; margin:0 0 12px; font-size:var(--fs-sm); align-items:center; }
.pay-dl dt{ color:var(--muted); }
.pay-dl dd{ margin:0; color:var(--ink-2); }
.pay-note{ font-size:var(--fs-xs); color:var(--muted); background:var(--bg); border:1px dashed var(--line); padding:10px 12px; border-radius:8px; margin:0; }
.copy-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--fs-sm); font-weight:bold;
  color:var(--ink-2); background:#FFF8E6; border:1px solid rgba(201,162,75,.55);
  padding:3px 10px; border-radius:7px; cursor:pointer; transition:background .2s ease;
}
.copy-btn:hover{ background:#FFEFC7; }
.copy-ico{ font-family:inherit; opacity:.55; font-weight:normal; }
.copy-btn.is-copied{ background:var(--green-bg); border-color:rgba(63,143,95,.5); color:var(--green); }
.copy-btn.is-copied .copy-ico::after{ content:' copied'; font-size:11px; }

/* ---------- notes ---------- */
.note-area{
  width:100%; min-height:110px; resize:vertical;
  font-family:inherit; font-size:var(--fs-sm); line-height:1.6;
  padding:12px 14px; border-radius:10px; border:1px solid var(--line);
  background:
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(201,162,75,.12) 25px 26px) #FFFEF9;
  background-attachment:local;
}
.note-area:focus{ outline:2px solid var(--gold); border-color:var(--gold); }
.note-status{ font-size:var(--fs-xs); color:var(--muted); min-height:18px; margin-top:4px; }
.note-status.ok{ color:var(--green); }
.note-status.err{ color:var(--red); }
.session-notes{ margin-top:16px; padding-top:14px; border-top:1px dashed var(--line); }
.session-notes-label{ display:block; font-size:var(--fs-sm); color:var(--ink-2); margin-bottom:6px; }

.notes-toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }
.notes-toolbar input{ flex:1; min-width:200px; padding:10px 13px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:var(--fs-sm); }
.note-card{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:12px; }
.note-card h3{ font-size:var(--fs-base); font-weight:normal; margin:0 0 4px; color:var(--ink-2); }
.note-card .note-meta{ font-size:var(--fs-xs); color:var(--muted); margin-bottom:10px; }
.note-card .note-body{ white-space:pre-wrap; font-size:var(--fs-sm); line-height:1.65; }
.note-course-title{ font-size:var(--fs-lg); color:var(--ink-2); margin:26px 0 10px; }

/* ---------- quizzes ---------- */
.quiz-intro{ background:var(--bg); border-left:3px solid var(--gold); padding:10px 14px; border-radius:6px; font-size:var(--fs-sm); margin-bottom:14px; white-space:pre-wrap; }
.quiz-q{ border:1px solid var(--line); border-radius:12px; padding:14px 16px 10px; margin:0 0 14px; }
.quiz-q legend{ padding:0 6px; font-size:var(--fs-base); color:var(--ink-2); display:flex; gap:8px; align-items:baseline; }
.quiz-num{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:24px; height:24px; border-radius:50%; background:var(--ink); color:#fff; font-size:12px;
}
.quiz-opt{
  display:flex; align-items:flex-start; gap:10px; padding:9px 10px; border-radius:8px; cursor:pointer;
  font-size:var(--fs-sm); border:1px solid transparent; margin-bottom:4px;
}
.quiz-opt:hover{ background:#FAF7EF; }
.quiz-opt input{ margin-top:3px; accent-color:var(--ink); }
.quiz-opt:has(input:checked){ background:#FFF8E6; border-color:rgba(201,162,75,.55); }
.quiz-q.is-missing{ border-color:var(--red); box-shadow:0 0 0 3px var(--red-bg); }
.quiz-q.is-right{ border-color:rgba(63,143,95,.5); }
.quiz-q.is-wrong{ border-color:rgba(181,83,60,.5); }
.quiz-q .quiz-opt.opt-correct{ background:var(--green-bg); border-color:rgba(63,143,95,.5); }
.quiz-q .quiz-opt.opt-correct span::after{ content:'  ✓ correct answer'; color:var(--green); font-size:12px; }
.quiz-q .quiz-opt.opt-wrong{ background:var(--red-bg); border-color:rgba(181,83,60,.45); }
.quiz-q .quiz-opt.opt-wrong span::after{ content:'  ✗ your answer'; color:var(--red); font-size:12px; }
.quiz-q.is-right .quiz-opt.opt-correct span::after{ content:'  ✓ your answer — correct'; }
.quiz-explain{ font-size:var(--fs-xs); color:var(--muted); background:var(--bg); padding:8px 10px; border-radius:6px; margin:4px 0 4px; }
.quiz-score{ display:flex; align-items:center; gap:16px; padding:14px 16px; border-radius:12px; margin-bottom:16px; }
.quiz-score > div:last-child{ display:flex; flex-direction:column; gap:2px; font-size:var(--fs-sm); }
.quiz-score strong{ font-size:var(--fs-lg); font-weight:normal; color:var(--ink-2); }
.quiz-score.is-pass{ background:var(--green-bg); }
.quiz-score.is-fail{ background:var(--amber-bg); }
.quiz-score-ring{
  --pct:0; width:72px; height:72px; border-radius:50%; flex-shrink:0;
  background:conic-gradient(var(--gold) calc(var(--pct) * 1%), rgba(0,0,0,.08) 0);
  display:flex; align-items:center; justify-content:center;
}
.quiz-score-ring span{ width:56px; height:56px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-weight:bold; color:var(--ink-2); }

/* quiz builder (teacher/admin) */
.qb-settings{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.qb-settings .field{ margin-bottom:10px; }
.qb-list{ display:flex; flex-direction:column; gap:12px; margin:6px 0 10px; }
.qb-q{ border:1px solid var(--line); border-radius:12px; padding:12px 12px 6px; background:#FCFBF8; }
.qb-q-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; font-size:var(--fs-sm); color:var(--muted); }
.qb-q textarea{ min-height:56px !important; }
.qb-opt{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.qb-opt input[type=text]{ flex:1; padding:8px 10px; border:1px solid var(--line); border-radius:7px; font-family:inherit; font-size:var(--fs-sm); background:#fff; }
.qb-opt input[type=radio]{ accent-color:var(--green); width:18px; height:18px; }
.qb-opt.is-answer input[type=text]{ border-color:rgba(63,143,95,.6); background:var(--green-bg); }
.qb-mini{ border:none; background:none; color:var(--muted); font-size:var(--fs-sm); padding:4px 6px; border-radius:6px; }
.qb-mini:hover{ background:#EFEDE6; color:var(--ink-2); }
.qb-hint{ font-size:var(--fs-xs); color:var(--muted); margin:0 0 8px; }

/* ---------- certificates ---------- */
.cert-banner{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:16px; padding:16px 18px; border-radius:14px;
  background:linear-gradient(120deg,#1B2A55,#2C3D72); color:#FAF6EC;
  box-shadow:0 14px 30px -18px rgba(15,24,48,.7);
}
.cert-banner > div:nth-child(2){ flex:1; min-width:200px; display:flex; flex-direction:column; gap:2px; font-size:var(--fs-sm); }
.cert-banner strong{ font-size:var(--fs-base); color:#fff; font-weight:normal; }
.cert-banner code{ color:#E4C77A; }
.cert-banner-seal{ font-size:30px; width:52px; height:52px; border-radius:50%; background:rgba(228,199,122,.16); display:flex; align-items:center; justify-content:center; }

.progress-mini{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.roster-actions{ display:flex; gap:6px; flex-wrap:wrap; }

/* ---------- small screens ---------- */
@media (max-width:640px){
  .qb-settings{ grid-template-columns:1fr 1fr; }
  .pay-dl{ grid-template-columns:1fr; gap:2px; }
  .pay-dl dd{ margin-bottom:8px; }
  .pay-panel-row .btn-gold-portal{ width:100%; }
}

/* ---------- email preferences ---------- */
.pref-list{ border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.pref-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 16px; border-bottom:1px solid var(--line); cursor:pointer; background:#fff; }
.pref-row:last-child{ border-bottom:none; }
.pref-row:hover{ background:#FCFBF8; }
.pref-row.is-locked{ cursor:default; background:#FAF8F4; }
.pref-text{ display:flex; flex-direction:column; gap:2px; }
.pref-label{ font-size:var(--fs-sm); color:var(--ink-2); }
.pref-help{ font-size:var(--fs-xs); color:var(--muted); }
.switch{ position:relative; flex-shrink:0; width:46px; height:26px; }
.switch input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:1; }
.switch input:disabled{ cursor:not-allowed; }
.switch-ui{ position:absolute; inset:0; border-radius:999px; background:#D9D4C7; transition:background .2s ease; }
.switch-ui::after{ content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s ease; }
.switch input:checked + .switch-ui{ background:var(--green); }
.switch input:checked + .switch-ui::after{ transform:translateX(20px); }
.switch input:disabled + .switch-ui{ opacity:.6; }
.switch input:focus-visible + .switch-ui{ outline:2px solid var(--gold); outline-offset:2px; }

.email-stat{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.mail-status{ display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:10px; font-size:var(--fs-sm); margin-bottom:14px; }
.mail-status.ok{ background:var(--green-bg); color:#25603D; }
.mail-status.warn{ background:var(--amber-bg); color:#7A5A12; }
.mail-status code{ background:rgba(0,0,0,.06); padding:1px 5px; border-radius:4px; }