/* ============================================================
   App-shell styles layered on top of main.css (the original
   Grade 12 English design system). Covers: navbar, auth forms,
   alerts, pricing/upgrade card, loaders, and small utility classes
   needed for the multi-page membership site (login/register/
   dashboard/profile/payment flows) that main.css does not define.
   Colors reuse the original palette: #1a6bc4 blue, #8e44ad purple,
   #27ae60 green, background #eef3f9.
   ============================================================ */

:root {
  --g12-blue: #1a6bc4;
  --g12-purple: #8e44ad;
  --g12-green: #27ae60;
  --g12-bg: #eef3f9;
  --g12-text: #1e2a3a;
  --g12-muted: #5d7a9a;
  --g12-red: #e74c3c;
  --g12-orange: #e67e22;
}

/* main.css (the original single-page-app design) sets `body` to a
   centering flexbox with fixed padding, which is meant for a single
   card-in-viewport layout. Our multi-page app-shell pages (dashboard,
   semester, profile, module, auth pages) all need normal block-level
   document flow with full-width children instead. Since app.css is
   always loaded after main.css, this override wins the cascade and
   applies to every app-shell page in one place. */
body {
  display: block !important;
  padding: 0 !important;
  min-height: auto !important;
}

/* ----- Top navigation bar ----- */
.g12-navbar {
  position: sticky;
  top: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 20, 40, 0.08);
  padding: 14px 28px;
  flex-wrap: wrap;
}

.g12-navbar .g12-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 19px;
  color: var(--g12-blue);
  text-decoration: none;
}

.g12-navbar .g12-brand i {
  background: linear-gradient(145deg, #1a6bc4, #164f8f);
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.g12-navbar .g12-brand .ar-sub {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--g12-muted);
}

.g12-navlinks {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.g12-navlinks a,
.g12-navlinks button {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--g12-text);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 9px 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all 0.2s ease;
}

.g12-navlinks a:hover,
.g12-navlinks button:hover {
  background: #eaf2fc;
  color: var(--g12-blue);
}

.g12-navlinks .g12-nav-cta {
  background: linear-gradient(145deg, #1a6bc4, #164f8f);
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(26, 107, 196, 0.28);
}

.g12-navlinks .g12-nav-cta:hover {
  background: linear-gradient(145deg, #1c78dc, #175aa1);
  color: #fff !important;
}

.g12-navlinks .g12-plan-pill {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  padding: 6px 12px;
  border-radius: 999px;
  text-transform: uppercase;
}
.g12-plan-pill.free { background: #eef3f9; color: var(--g12-muted); }
.g12-plan-pill.premium { background: linear-gradient(145deg,#fff6d9,#ffedb0); color: #8a6300; }

/* ----- Page shell / wrapper ----- */
.g12-page {
  min-height: 100vh;
  background: var(--g12-bg);
}

.g12-page-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 20px 70px;
}

/* ----- Auth (login/register/forgot/reset) cards ----- */
.g12-auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(160deg, #eef3f9 0%, #e3edfb 100%);
}

.g12-auth-card {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(0, 20, 40, 0.14);
  padding: 40px 36px 34px;
}

.g12-auth-card .g12-auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 6px;
}

.g12-auth-card .g12-auth-logo i {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(145deg, #1a6bc4, #164f8f);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 10px 24px rgba(26, 107, 196, 0.3);
}

.g12-auth-card h1 {
  text-align: center;
  font-size: 24px;
  color: var(--g12-text);
  margin: 14px 0 4px;
}

.g12-auth-card .ar-title {
  display: block;
  font-size: 15px;
  color: var(--g12-muted);
  font-weight: 600;
  margin-bottom: 22px;
  text-align: center;
}

.g12-field {
  margin-bottom: 16px;
}

.g12-field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--g12-text);
  margin-bottom: 6px;
}

.g12-field label .ar {
  color: var(--g12-muted);
  font-weight: 600;
  font-size: 12px;
}

.g12-field input,
.g12-field select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid #e1e9f2;
  background: #f8fafd;
  font-size: 15px;
  font-family: inherit;
  color: var(--g12-text);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.g12-field input:focus,
.g12-field select:focus {
  outline: none;
  border-color: var(--g12-blue);
  background: #fff;
}

.g12-field-hint {
  font-size: 12px;
  color: var(--g12-muted);
  margin-top: 5px;
}

.g12-checkbox-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 13px;
}

.g12-checkbox-row label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--g12-muted);
  cursor: pointer;
}

.g12-checkbox-row a {
  color: var(--g12-blue);
  font-weight: 700;
  text-decoration: none;
}

.g12-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 14px 20px;
  border-radius: 14px;
  border: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s;
  text-decoration: none;
}

.g12-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.g12-btn:not(:disabled):hover {
  transform: translateY(-2px);
}

.g12-btn-primary {
  background: linear-gradient(145deg, #1a6bc4, #164f8f);
  color: #fff;
  box-shadow: 0 10px 26px rgba(26, 107, 196, 0.32);
}

.g12-btn-success {
  background: linear-gradient(145deg, #27ae60, #219653);
  color: #fff;
  box-shadow: 0 10px 26px rgba(39, 174, 96, 0.3);
}

.g12-btn-outline {
  background: #fff;
  color: var(--g12-blue);
  border: 2px solid #d5e4f7;
}

.g12-btn-danger {
  background: linear-gradient(145deg, #e74c3c, #c0392b);
  color: #fff;
  box-shadow: 0 10px 26px rgba(231, 76, 60, 0.28);
}

.g12-btn-sm {
  width: auto;
  padding: 9px 18px;
  font-size: 13px;
  border-radius: 999px;
}

.g12-auth-footer {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: var(--g12-muted);
}

.g12-auth-footer a {
  color: var(--g12-blue);
  font-weight: 700;
  text-decoration: none;
}

/* ----- Alerts ----- */
.g12-alert {
  border-radius: 14px;
  padding: 13px 16px;
  font-size: 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.6;
}

.g12-alert-error { background: #fdecea; color: #b3271e; border: 1px solid #f6c6c1; }
.g12-alert-success { background: #e9f9ef; color: #1c7a3f; border: 1px solid #bfe9cf; }
.g12-alert-info { background: #eaf3fd; color: #164f8f; border: 1px solid #bfdcf7; }
.g12-alert-warning { background: #fff6e6; color: #915600; border: 1px solid #fadfa0; }

/* ----- Page headers ----- */
.g12-page-header {
  text-align: center;
  margin-bottom: 30px;
}

.g12-page-header h1 {
  font-size: 30px;
  color: var(--g12-text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.g12-page-header .ar-title {
  display: block;
  color: var(--g12-muted);
  font-size: 17px;
  font-weight: 700;
  margin-top: 6px;
}

.g12-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 14px;
}

.g12-breadcrumb a {
  color: var(--g12-blue);
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ----- Cards grid for dashboard / semester picker ----- */
.g12-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.g12-card {
  background: #fff;
  border-radius: 22px;
  padding: 26px 22px;
  box-shadow: 0 10px 30px rgba(0, 20, 40, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.g12-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 20, 40, 0.13);
}

.g12-card.locked {
  opacity: 0.72;
}

.g12-card .g12-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 14px;
  color: #fff;
}

.g12-card .g12-card-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.g12-badge-free { background: #e8f5e9; color: #2e7d32; }
.g12-badge-premium { background: linear-gradient(145deg,#fff6d9,#ffedb0); color: #8a6300; }
.g12-badge-locked { background: #f1f1f1; color: #777; }

/* ----- Pricing / upgrade card ----- */
.g12-pricing-card {
  background: linear-gradient(155deg, #ffffff, #f4f8ff);
  border: 2px solid #d9e8fb;
  border-radius: 28px;
  padding: 34px 30px;
  text-align: center;
  max-width: 460px;
  margin: 0 auto;
  box-shadow: 0 20px 50px rgba(26, 107, 196, 0.12);
}

.g12-pricing-card .g12-price {
  font-size: 52px;
  font-weight: 900;
  color: var(--g12-blue);
  margin: 10px 0 0;
}

.g12-pricing-card .g12-price sup {
  font-size: 22px;
  vertical-align: super;
}

.g12-pricing-card .g12-price-note {
  color: var(--g12-muted);
  font-size: 14px;
  margin-bottom: 22px;
}

.g12-pricing-card ul {
  list-style: none;
  text-align: left;
  margin: 22px 0;
  display: inline-block;
}

.g12-pricing-card ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--g12-text);
  font-size: 14.5px;
  line-height: 1.6;
}

.g12-pricing-card ul li i {
  color: var(--g12-green);
  margin-top: 3px;
}

#paypal-button-container {
  margin-top: 18px;
  min-height: 45px;
}

/* ----- Loader ----- */
.g12-loader-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: var(--g12-muted);
  gap: 14px;
}

.g12-spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 4px solid #dbe7f7;
  border-top-color: var(--g12-blue);
  animation: g12spin 0.8s linear infinite;
}

@keyframes g12spin {
  to { transform: rotate(360deg); }
}

/* ----- Progress bar (profile page) ----- */
.g12-progress-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: #e6edf6;
  overflow: hidden;
}

.g12-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #1a6bc4, #27ae60);
  transition: width 0.4s ease;
}

/* ----- Misc utility ----- */
.g12-mt-24 { margin-top: 24px; }
.g12-mb-24 { margin-bottom: 24px; }
.g12-text-center { text-align: center; }
.g12-muted { color: var(--g12-muted); }
.g12-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.g12-hidden { display: none !important; }

.g12-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--g12-muted);
}
.g12-empty-state i { font-size: 40px; margin-bottom: 14px; opacity: 0.5; }

/* ----- Lock overlay used on locked module cards ----- */
.g12-lock-overlay {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--g12-muted);
  margin-top: 10px;
  background: #f5f7fb;
  padding: 8px 12px;
  border-radius: 10px;
}

@media (max-width: 640px) {
  .g12-navbar { padding: 12px 16px; }
  .g12-navlinks a span.txt, .g12-navlinks button span.txt { display: none; }
  .g12-auth-card { padding: 30px 22px 26px; }
  .g12-page-header h1 { font-size: 24px; }
}