/**
 * CourseGlade Base Styles
 * Design tokens, buttons, spinner, and badges shared across all frontend pages.
 */

/* ==========================================================================
   Design Tokens
   ========================================================================== */
:root {
  /* Brand */
  --courseglade-primary:          #004bca;
  --courseglade-primary-dark:     #003ea8;
  --courseglade-primary-light:    #0061ff;
  /* The deep navy the draft pairs with primary for its feature gradients. */
  --courseglade-primary-deep:     #0f1f4b;
  /* Text and icons sitting on the brand colour. */
  --courseglade-on-primary:       #ffffff;
  --courseglade-primary-gradient: linear-gradient(135deg, #004bca 0%, #0061ff 100%);
  --courseglade-primary-bg:       rgba(0, 75, 202, 0.06);

  /* Semantic */
  --courseglade-success:          #16a34a;
  --courseglade-success-bg:       #d3f9d8;
  --courseglade-success-border:   #b2f2bb;
  --courseglade-success-surface:  #f6fef8;
  --courseglade-success-text:     #1a7431;
  --courseglade-success-gradient: linear-gradient(135deg, #d3f9d8, #8ce99a);

  --courseglade-danger:           #dc2626;
  --courseglade-danger-bg:        #ffe3e3;
  --courseglade-danger-border:    #ffc9c9;
  --courseglade-danger-surface:   #fff5f5;
  --courseglade-danger-text:      #c92a2a;
  --courseglade-danger-hover:     #e03131;
  --courseglade-danger-dark:      #a61e1e;
  --courseglade-danger-gradient:  linear-gradient(135deg, #ffe3e3, #ffa8a8);

  --courseglade-success-dark:     #2f9e44;

  --courseglade-warning:          #d97706;
  --courseglade-warning-bg:       #fff3bf;
  --courseglade-warning-border:   #fde68a;
  --courseglade-warning-surface:  #fffdf5;
  --courseglade-warning-light:    #fff9db;
  --courseglade-warning-text:     #b45309;
  --courseglade-warning-accent:   #e67700;
  --courseglade-amber:            #f59e0b;
  --courseglade-amber-on:         #3b2400;
  --courseglade-warning-gradient: linear-gradient(135deg, #fff3bf, #ffe066);
  --courseglade-lock-text:        #c2410c;
  --courseglade-lock-bg:          rgba(234, 88, 12, 0.08);
  --courseglade-lock-bg-strong:   rgba(234, 88, 12, 0.1);

  --courseglade-info:             #1971c2;
  --courseglade-info-bg:          #e7f5ff;
  --courseglade-info-text:        #1971c2;
  --courseglade-info-light:       #339af0;
  --courseglade-info-surface:     #f5faff;
  --courseglade-info-gradient:    linear-gradient(135deg, #d0ebff, #74c0fc);

  --courseglade-neutral-gradient: linear-gradient(135deg, #e9ecef, #ced4da);

  /* Surfaces */
  --courseglade-surface:          #f9fafb;
  --courseglade-surface-low:      #f3f4f6;
  --courseglade-surface-lowest:   #ffffff;
  --courseglade-surface-high:     #e5e7eb;

  /* Text */
  --courseglade-on-surface:       #111827;
  --courseglade-on-surface-muted: #6b7280;
  --courseglade-on-surface-secondary: #374151;

  /* Borders */
  --courseglade-border:           #e5e7eb;
  --courseglade-border-light:     rgba(194, 198, 217, 0.15);

  /* Shadows */
  --courseglade-shadow-sm:        0 1px 2px rgba(17, 24, 39, 0.05);
  --courseglade-shadow:           0 4px 12px rgba(17, 24, 39, 0.10);
  --courseglade-shadow-lg:        0 20px 40px rgba(17, 24, 39, 0.18);
  /* Darkening laid over media so white controls stay readable on a pale frame. */
  --courseglade-scrim:            rgba(17, 24, 39, 0.55);

  /* Radii */
  --courseglade-radius-sm:        6px;
  --courseglade-radius:           8px;
  --courseglade-radius-md:        12px;
  --courseglade-radius-lg:        16px;
  --courseglade-radius-xl:        24px;
  --courseglade-radius-pill:      999px;

  /* Grays */
  --courseglade-gray-50:          #f8f9fa;
  --courseglade-gray-100:         #f1f3f5;
  --courseglade-gray-200:         #e9ecef;
  --courseglade-gray-300:         #dee2e6;
  --courseglade-gray-400:         #9ca3af;
  --courseglade-gray-500:         #adb5bd;
  --courseglade-gray-600:         #868e96;
  --courseglade-gray-700:         #495057;
  --courseglade-gray-900:         #212529;

  /* Transitions */
  --courseglade-transition:       0.2s ease;

  /* Typography intentionally has no tokens — the plugin does not set
     font-family on the frontend, so the active theme's fonts apply. Only
     form controls and buttons declare `font-family: inherit`, because those
     elements do not inherit it from their ancestors by default. */

  /* Password strength meter */
  --courseglade-strength-weak:    #ef4444;
  --courseglade-strength-fair:    #f97316;
  --courseglade-strength-good:    #eab308;

  /* Activity/stat icon accent colors */
  --courseglade-accent-purple:    #7950f2;
  --courseglade-accent-purple-bg: #f0ebfe;
  --courseglade-accent-teal:      #0ca678;
  --courseglade-accent-coral:     #f0645a;
  --courseglade-accent-orange:    #ff922b;

  /* Quiz review state colors */
  --courseglade-quiz-correct-bg:      #dcfce7;
  --courseglade-quiz-correct-text:    #16a34a;
  --courseglade-quiz-correct-dark:    #166534;
  --courseglade-quiz-incorrect-bg:    #fee2e2;
  --courseglade-quiz-incorrect-text:  #dc2626;
  --courseglade-quiz-incorrect-dark:  #991b1b;
  --courseglade-quiz-pending-bg:      #fef9c3;
  --courseglade-quiz-pending-text:    #854d0e;
  --courseglade-quiz-progress-bg:     #fff7ed;
  --courseglade-quiz-progress-text:   #9a3412;

  /* Primary / indigo surface (instructor section, login prompt icon) */
  --courseglade-primary-surface:       #edf2ff;
  --courseglade-primary-border-light:  #c5d2f6;
  --courseglade-primary-dark-text:     #364fc7;

  /* Order status badge colors */
  --courseglade-status-warning-bg:   #fff8e1;
  --courseglade-status-info-bg:      #eff6ff;
  --courseglade-status-info-text:    #1d4ed8;
  --courseglade-status-success-bg:   #f0fdf4;
  --courseglade-status-success-text: #15803d;
  --courseglade-status-danger-bg:    #fef2f2;
  --courseglade-status-danger-text:  #b91c1c;
}

/* ==========================================================================
   Box sizing
   ========================================================================== */
[class*="courseglade-"] {
  box-sizing: border-box;
}

[class*="courseglade-"] *,
[class*="courseglade-"] *::before,
[class*="courseglade-"] *::after {
  box-sizing: inherit;
}

/* Keyboard focus.
   These selectors used to be `outline: none` with nothing put back, which
   removed the only focus indicator a keyboard user had on links and buttons.
   The ring below is a double box-shadow rather than an outline: the white
   inner ring keeps it visible on a coloured button, and the outer ring keeps
   it visible on a white page. :focus-visible rather than :focus, so a mouse
   click does not leave a ring behind.

   Text fields are handled in the Form section below: they have a border of
   their own, and this ring outside it makes three concentric lines. */
[class*="courseglade-"] :is(a, button, [tabindex]):focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--courseglade-surface-lowest),
    0 0 0 4px var(--courseglade-primary);
}

[class*="courseglade-"] a:focus:not(:focus-visible) {
  outline: none;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.courseglade-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--courseglade-radius);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.5;
  cursor: pointer;
  text-decoration: none !important;
  /* Themes put a shadow on bare buttons — Astra's customizer emits
     `button { box-shadow: 0 1px 2px rgba(0,0,0,.05) }` inline. Declaring none
     here is what stops it: the class outranks the element selector, but only
     for properties it actually sets. Focus rings are painted by later,
     more specific rules and are unaffected. */
  box-shadow: none;
  transition: background var(--courseglade-transition), color var(--courseglade-transition), transform var(--courseglade-transition), box-shadow var(--courseglade-transition);
  white-space: nowrap;
  box-sizing: border-box;
}

/* Mouse clicks only — the keyboard ring is defined once, above. */
.courseglade-btn:focus:not(:focus-visible) {
  outline: none;
}

/* The resting border is transparent, but themes colour a button's border on
   hover — Astra does — and `button:hover` outranks a bare class, so the
   colour came through on every variant that does not draw a border. Declared
   here, before the variants, so the ones that do draw a border still win. */
.courseglade-btn:hover:not(:disabled),
.courseglade-btn:focus:not(:disabled),
.courseglade-btn:active:not(:disabled) {
  border-color: transparent;
}

.courseglade-btn:disabled,
.courseglade-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary */
.courseglade-btn-primary {
  background: var(--courseglade-primary);
  color: var(--courseglade-on-primary);
}
.courseglade-btn-primary:hover:not(:disabled) {
  /* Hover has to say something now that the shadow is gone, and the draft
     says it by darkening. */
  background: var(--courseglade-primary-dark);
  color: var(--courseglade-on-primary);
  text-decoration: none;
}

/* Secondary */
.courseglade-btn-secondary {
  background: var(--courseglade-surface-low);
  color: var(--courseglade-on-surface);
}
.courseglade-btn-secondary:hover:not(:disabled) {
  background: var(--courseglade-primary);
  color: var(--courseglade-on-primary);
  text-decoration: none;
}

/* Outline, neutral — a bordered white control that is not asking to be
   pressed first. Distinct from btn-outline, which is the primary colour and
   does read as the main action. */
.courseglade-btn-outline-muted {
  background: var(--courseglade-surface-lowest);
  color: var(--courseglade-on-surface);
  border: 1px solid var(--courseglade-border);
}
.courseglade-btn-outline-muted:hover:not(:disabled),
.courseglade-btn-outline-muted:focus:not(:disabled) {
  background: var(--courseglade-surface-lowest);
  border-color: var(--courseglade-primary);
  /* Restated, not inherited: `button:hover` outranks a bare class, so a theme
     that recolours a hovered button wins over the resting rule above. */
  color: var(--courseglade-primary);
  text-decoration: none;
}

/* Quiet — no surface at all until it is pointed at. For the second action in
   a pair, where ghost's grey pill still reads as a button competing with the
   first one. */
.courseglade-btn-quiet {
  background: transparent;
  color: var(--courseglade-on-surface-muted);
}
.courseglade-btn-quiet:hover:not(:disabled),
.courseglade-btn-quiet:focus:not(:disabled) {
  background: var(--courseglade-surface-low);
  color: var(--courseglade-on-surface);
  text-decoration: none;
}

/* The destructive one only shows its colour on hover: a red control sitting
   in a list of rows is a standing warning about something nobody asked to
   do yet. */
.courseglade-btn-quiet--danger:hover:not(:disabled),
.courseglade-btn-quiet--danger:focus:not(:disabled) {
  background: var(--courseglade-danger-bg);
  color: var(--courseglade-danger-text);
}

/* Ghost */
.courseglade-btn-ghost {
  background: var(--courseglade-surface-low);
  color: var(--courseglade-on-surface-muted);
}
.courseglade-btn-ghost:hover:not(:disabled) {
  background: var(--courseglade-surface-high);
  border-color: var(--courseglade-surface-high);
  color: var(--courseglade-on-surface);
  text-decoration: none;
}

/* Success */
.courseglade-btn-success {
  background: var(--courseglade-success);
  color: #fff;
}
.courseglade-btn-success:hover:not(:disabled) {
  background: var(--courseglade-success-dark);
  color: var(--courseglade-on-primary);
  text-decoration: none;
}

/* Outline */
.courseglade-btn-outline {
  background: transparent;
  color: var(--courseglade-primary);
  border: 1px solid var(--courseglade-primary);
}
.courseglade-btn-outline:hover:not(:disabled),
.courseglade-btn-outline:focus:not(:disabled) {
  background: var(--courseglade-primary);
  color: #fff;
  text-decoration: none;
}

/* Danger */
.courseglade-btn-danger {
  background: var(--courseglade-danger);
  color: #fff;
}
.courseglade-btn-danger:hover:not(:disabled) {
  background: #b02020;
  color: #fff;
  text-decoration: none;
  border-color: #b02020;
}

/* Sizes */
/* ---- Focus and active ----
   Every variant above paints a resting state and a hover, and says nothing
   about focus or active. A theme that styles `button:focus` or `button:active`
   — most do — then owns the button for as long as it holds focus, which after
   a click is until the reader clicks something else. The symptom has been a
   different button each time: a label going white on white, a curriculum
   header filling solid, a primary CTA turning navy over its own gradient.

   Each variant restates its resting fill here. Hover keeps the lift; focus is
   the resting look plus whatever ring `:focus-visible` draws. */
.courseglade-btn-primary:focus:not(:disabled),
.courseglade-btn-primary:active:not(:disabled) {
  background: var(--courseglade-primary);
  color: var(--courseglade-on-primary);
}

.courseglade-btn-secondary:focus:not(:disabled),
.courseglade-btn-secondary:active:not(:disabled) {
  background: var(--courseglade-surface-low);
  color: var(--courseglade-on-surface);
}

.courseglade-btn-ghost:focus:not(:disabled),
.courseglade-btn-ghost:active:not(:disabled) {
  background: var(--courseglade-surface-low);
  color: var(--courseglade-on-surface-muted);
}

.courseglade-btn-success:focus:not(:disabled),
.courseglade-btn-success:active:not(:disabled) {
  background: var(--courseglade-success);
  color: #fff;
}

.courseglade-btn-danger:focus:not(:disabled),
.courseglade-btn-danger:active:not(:disabled) {
  background: var(--courseglade-danger);
  color: #fff;
}

/* Outline already answers `:focus` with its hover fill, which is deliberate —
   it is the one variant whose resting state is transparent, so a theme's own
   focus background would show through anything less. */

/* The draft's two working sizes, chosen by context rather than importance. */
.courseglade-btn-sm {
  min-height: 36px;
  padding: 0 14px;
  font-size: 0.875rem;
}

/* The draft defines a large size but never uses one; four of our screens do,
   so it stays — at the draft's metrics. */
.courseglade-btn-lg {
  min-height: 52px;
  padding: 0 28px;
  font-size: 1rem;
}

/* The other half of the problem above: plenty of our controls are bare
   <button> elements with a component class instead of .courseglade-btn — the
   lesson tabs, a thread's "Reply", the drawer's section headers. The theme's
   shadow lands on all of them, and each one was being found by eye. This
   catches them by shape.
   Deliberately kept at (0,1,1) — no :not() — so a component that wants a
   shadow takes it back with a tag-qualified rule of its own. A higher
   specificity here would win against those too. */
[class*="courseglade-"] button {
  box-shadow: none;
}

/* Full width */
.courseglade-btn-block {
  width: 100%;
}

/* Circle / icon-only */
.courseglade-btn-circle {
  border-radius: var(--courseglade-radius-pill);
}
/* ==========================================================================
   Spinner
   ========================================================================== */
@keyframes courseglade-spin {
  to { transform: rotate(360deg); }
}

.courseglade-spinner {
  display: inline-block;
  width: 36px;
  height: 36px;
  border: 3px solid var(--courseglade-border);
  border-top-color: var(--courseglade-primary);
  border-radius: 50%;
  animation: courseglade-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.courseglade-spinner-sm {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

/* White variant — for use inside dark/primary buttons */
.courseglade-spinner-white {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
}

/* Legacy alias used in enroll-button.css and checkout.css */
.courseglade-spinner-small {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: courseglade-spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ==========================================================================
   Badges / Pills
   ========================================================================== */
.courseglade-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--courseglade-radius-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.5;
  white-space: nowrap;
}

.courseglade-badge-success  { background: var(--courseglade-success-bg);  color: var(--courseglade-success-text); }
.courseglade-badge-danger   { background: var(--courseglade-danger-bg);   color: var(--courseglade-danger-text);  }
.courseglade-badge-warning  { background: var(--courseglade-warning-bg);  color: var(--courseglade-warning-text); }
.courseglade-badge-info     { background: var(--courseglade-info-bg);     color: var(--courseglade-info-text);    }
.courseglade-badge-neutral  { background: var(--courseglade-surface-low); color: var(--courseglade-on-surface-muted); }
.courseglade-badge-primary  { background: var(--courseglade-primary-bg);  color: var(--courseglade-primary);      }

/* ==========================================================================
   Card
   ========================================================================== */
.courseglade-card {
  background: var(--courseglade-surface-lowest);
  border: 1px solid var(--courseglade-border);
  border-radius: var(--courseglade-radius-md);
  box-shadow: var(--courseglade-shadow-sm);
}

.courseglade-card--sm {
  border-radius: var(--courseglade-radius);
}

/* ==========================================================================
   Empty State
   ========================================================================== */
.courseglade-empty-state {
  /* Spans the row when it lands inside a grid, so a catalog with no results
     centres its message rather than sitting in the first column. */
  grid-column: 1 / -1;
  width: 100%;
  margin-inline: auto;
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--courseglade-surface-lowest);
  border: 1px solid var(--courseglade-border);
  border-radius: var(--courseglade-radius-lg);
  box-shadow: var(--courseglade-shadow-sm);
}

/* Standing alone as the whole page, rather than filling a slot that already
   has a size. Nothing else has set a width there, so 100% means the full
   container and two lines of text end up inside a 1200px box. */
.courseglade-empty-state--page {
  max-width: 520px;
}

/* Three tints, and which one is not a matter of taste.

   Grey is the resting state: nothing here yet, and it will fill on its own.
   Primary is for a state that invites you to start something — the icon then
   agrees with the button under it. Amber is for a state where something is
   in the way that will clear: a balance below the payout minimum, a lesson
   that has not been released, a payment that needs settling. Amber is not an
   error; it is a wait with a reason. */
.courseglade-empty-state--action .courseglade-empty-icon {
  background: var(--courseglade-primary-surface);
  color: var(--courseglade-primary);
}

.courseglade-empty-state--locked .courseglade-empty-icon {
  background: var(--courseglade-warning-light);
  color: var(--courseglade-warning-text);
}

.courseglade-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--courseglade-radius-pill);
  background: var(--courseglade-surface-low);
  color: var(--courseglade-on-surface-muted);
  margin: 0 auto 1.25rem;
}

.courseglade-empty-state h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--courseglade-on-surface);
  margin: 0 0 0.375rem;
}

.courseglade-empty-state p {
  color: var(--courseglade-on-surface-muted);
  font-size: 0.875rem;
  margin: 0 0 1.25rem;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* The line under the action that answers the question the action raises —
   who will see this, what happens next. Quieter than the copy above it. */
.courseglade-empty-hint {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--courseglade-gray-400);
}

/* Nothing follows the last thing in the card. */
.courseglade-empty-state > :last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Alert
   ==========================================================================
   The other half of the draft's pair. An empty state says a place is empty;
   an alert says something about *you* — you are not signed in, your
   application is in, your card did not go through. So it reads as a line
   addressed to the reader rather than a centred notice, and it keeps the
   icon beside the words instead of above them. */
.courseglade-alert {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  max-width: 620px;
  margin-inline: auto;
  padding: 1.25rem;
  background: var(--courseglade-surface-lowest);
  border: 1px solid var(--courseglade-border);
  border-left: 3px solid var(--courseglade-gray-400);
  border-radius: var(--courseglade-radius-lg);
}

.courseglade-alert__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--courseglade-radius-md);
  background: var(--courseglade-surface-low);
  color: var(--courseglade-on-surface-muted);
}

.courseglade-alert__body {
  flex: 1;
  min-width: 0;
}

.courseglade-alert h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--courseglade-on-surface);
}

.courseglade-alert p {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--courseglade-on-surface-muted);
}

.courseglade-alert ul {
  margin: 0 0 0.875rem;
  padding-left: 1.125rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--courseglade-on-surface-secondary);
}

.courseglade-alert > :last-child,
.courseglade-alert__body > :last-child {
  margin-bottom: 0;
}

/* What a reviewer wrote back, quoted rather than paraphrased into the copy. */
.courseglade-alert__note {
  display: block;
  padding: 0.625rem 0.75rem;
  margin-bottom: 0.875rem;
  border-radius: var(--courseglade-radius-sm);
  background: var(--courseglade-surface-low);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--courseglade-on-surface-secondary);
}

.courseglade-alert__note strong {
  display: block;
  margin-bottom: 0.125rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--courseglade-on-surface-muted);
}

/* The accent says which kind of news this is before the words do. */
.courseglade-alert--info {
  border-left-color: var(--courseglade-primary);
}

.courseglade-alert--info .courseglade-alert__icon {
  background: var(--courseglade-primary-surface);
  color: var(--courseglade-primary);
}

.courseglade-alert--success {
  border-left-color: var(--courseglade-success);
}

.courseglade-alert--success .courseglade-alert__icon {
  background: var(--courseglade-success-bg);
  color: var(--courseglade-success-text);
}

.courseglade-alert--warning {
  border-left-color: var(--courseglade-warning);
}

.courseglade-alert--warning .courseglade-alert__icon {
  background: var(--courseglade-warning-light);
  color: var(--courseglade-warning-text);
}

.courseglade-alert--danger {
  border-left-color: var(--courseglade-danger);
}

.courseglade-alert--danger .courseglade-alert__icon {
  background: var(--courseglade-danger-bg);
  color: var(--courseglade-danger-text);
}

/* An addon's slot, standing empty. Only an administrator sees it, so it sits
   where the missing section would have been rather than at the top of the
   page — the gap is the point. */
.courseglade-absent-addon {
  margin-block: 1.5rem;
}

.courseglade-absent-addon__hint {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--courseglade-gray-400);
}

@media (max-width: 480px) {
  .courseglade-alert {
    flex-direction: column;
  }
}

/* ==========================================================================
   Form
   ========================================================================== */
.courseglade-form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--courseglade-on-surface);
  margin-bottom: 0.375rem;
}

.courseglade-form-label__optional {
  font-weight: 400;
  color: var(--courseglade-gray-500);
  font-size: 0.8125rem;
}

input.courseglade-form-input,
textarea.courseglade-form-input,
select.courseglade-form-input {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--courseglade-border);
  border-radius: var(--courseglade-radius);
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--courseglade-on-surface);
  background-color: var(--courseglade-surface-lowest);
  box-sizing: border-box;
  height: auto;
  line-height: 1.25;
  transition: border-color var(--courseglade-transition), box-shadow var(--courseglade-transition);
  display: block;
  /* Themes put an inset shadow on form controls — Astra's customizer emits one
     on every input. Declared here so the field is flat until it is focused,
     where a later rule draws the ring. */
  box-shadow: none;
}

input.courseglade-form-input:focus,
textarea.courseglade-form-input:focus,
select.courseglade-form-input:focus {
  outline: none !important;
  border-color: var(--courseglade-primary) !important;
  border-style: solid !important;
}

/* Mouse focus: the tinted border alone. */
input.courseglade-form-input:focus:not(:focus-visible),
textarea.courseglade-form-input:focus:not(:focus-visible),
select.courseglade-form-input:focus:not(:focus-visible) {
  box-shadow: none !important;
}

/* Keyboard focus: the same border plus a halo, replacing the shared two-ring
   shadow. It hugs the field's own edge, so a rounded input, a select and a
   resizable textarea all read the same way — and there is no white ring
   pretending to be a border. */
input.courseglade-form-input:focus-visible,
textarea.courseglade-form-input:focus-visible,
select.courseglade-form-input:focus-visible,
[class*="courseglade-"] :is(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--courseglade-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--courseglade-primary) 22%, transparent);
}

/* Checkboxes and radios have no border to tint and are too small to halo.
   They keep the shared ring, which is what it was designed for. */
[class*="courseglade-"] :is(input[type="checkbox"], input[type="radio"]):focus-visible {
  border-color: initial;
  box-shadow:
    0 0 0 2px var(--courseglade-surface-lowest),
    0 0 0 4px var(--courseglade-primary);
}

input.courseglade-form-input:disabled,
textarea.courseglade-form-input:disabled,
select.courseglade-form-input:disabled {
  background: var(--courseglade-surface-low);
  color: var(--courseglade-on-surface-muted);
  cursor: not-allowed;
}

textarea.courseglade-form-input {
  resize: vertical;
  min-height: 100px;
}

select.courseglade-form-input {
  padding-right: 32px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23868e96' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  /* Without this a theme that sets background-size — Astra does, on form
     controls — stretches the chevron to fill the field. */
  background-size: 16px;
}

/* =========================================================
   Container
   — :root prefix (specificity 0,2,0) beats WP's global-styles
     rule :root :where(.is-layout-constrained) > * (0,1,0).
   ========================================================= */
:root .courseglade-container {
  width: 100%;
  padding-right: var(--courseglade-gutter-x, 0.938rem);
  padding-left: var(--courseglade-gutter-x, 0.938rem);
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 576px) {
  :root .courseglade-container { max-width: 540px; }
}

@media (min-width: 768px) {
  :root .courseglade-container { max-width: 720px; }
}

@media (min-width: 992px) {
  :root .courseglade-container { max-width: 960px; }
}

@media (min-width: 1200px) {
  :root .courseglade-container { max-width: 1140px; }
}

@media (min-width: 1400px) {
  :root .courseglade-container { max-width: 1320px; }
}

/* ---- Full-bleed page wrapper ----
   A page of ours is wrapped in .courseglade-page-bleed, which escapes the
   theme's content column and becomes the width of the window.

   The margin only — no padding putting the contents back. Restoring the column
   here would make every band inside 100% of the column rather than the window,
   which is the thing this exists to avoid; the reading column is
   .courseglade-container's job, and it centres inside this as it does anywhere
   else. A section that wants to be a band simply fills its parent.

   The width is stated rather than left to `auto`, because a theme that lays its
   content area out with flex — Astra does — makes this a flex item, and a flex
   item is sized by its contents. The negative margin then moves it without
   widening it, and the band stops short of the far edge.

   Two things defeat this, both in the theme: `overflow: hidden` or a `transform`
   on an ancestor establishes a containing block the margin cannot escape. */
body.courseglade-page .courseglade-page-bleed {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* ==========================================================================
   Toast Notification Component
   ========================================================================== */
.courseglade-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--courseglade-gray-200);
  border-left: 4px solid var(--courseglade-gray-300);
  border-radius: var(--courseglade-radius);
  box-shadow: var(--courseglade-shadow);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--courseglade-gray-900);
  z-index: 99999;
  max-width: 340px;
  animation: courseglade-toast-in 0.25s ease forwards;
}

.courseglade-toast.is-hiding {
  animation: courseglade-toast-out 0.25s ease forwards;
}

.courseglade-toast--success { border-left-color: var(--courseglade-success); }
.courseglade-toast--error   { border-left-color: var(--courseglade-danger); }
.courseglade-toast--info    { border-left-color: var(--courseglade-primary); }
.courseglade-toast--warning { border-left-color: var(--courseglade-warning); }

/* Text for screen readers only. `.screen-reader-text` is a theme convention,
   not a WordPress guarantee, so the plugin ships its own rather than trusting
   the active theme to have defined one. */
.courseglade-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.courseglade-toast__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.courseglade-toast--success .courseglade-toast__icon { background: #d3f9d8; color: #2f9e44; }
.courseglade-toast--error   .courseglade-toast__icon { background: #ffe3e3; color: #e03131; }
.courseglade-toast--info    .courseglade-toast__icon { background: var(--courseglade-primary-bg); color: var(--courseglade-primary); }
.courseglade-toast--warning .courseglade-toast__icon { background: #fff3bf; color: #f08c00; }

.courseglade-toast__message {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.courseglade-toast__title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--courseglade-gray-900);
}

.courseglade-toast__sub {
  font-size: 0.8125rem;
  color: var(--courseglade-gray-600);
}

.courseglade-toast__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--courseglade-gray-500);
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
}

.courseglade-toast__close:hover {
  color: var(--courseglade-gray-900);
  background: var(--courseglade-gray-100);
}

@keyframes courseglade-toast-in {
  from { transform: translateX(calc(100% + 24px)); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes courseglade-toast-out {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(calc(100% + 24px)); opacity: 0; }
}

/* ============================================================
   Auth Modal (login / register)
   ============================================================ */

.courseglade-auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: courseglade-overlay-in 0.18s ease;
}

.courseglade-auth-overlay.is-closing {
  animation: courseglade-overlay-out 0.18s ease forwards;
}

.courseglade-auth-modal {
  background: #fff;
  border-radius: var(--courseglade-radius-lg, 1rem);
  box-shadow: 0 25px 60px rgba(0,0,0,.18);
  width: 100%;
  max-width: 420px;
  padding: 2rem;
  position: relative;
  animation: courseglade-modal-in 0.2s ease;
}

.courseglade-auth-overlay.is-closing .courseglade-auth-modal {
  animation: courseglade-modal-out 0.18s ease forwards;
}

.courseglade-auth-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--courseglade-gray-100, #f1f5f9);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--courseglade-gray-500, #64748b);
  transition: background 0.15s, color 0.15s;
  padding: 0;
}

.courseglade-auth-modal__close:hover {
  background: var(--courseglade-gray-200, #e2e8f0);
  color: var(--courseglade-gray-900, #0f172a);
}

.courseglade-auth-modal__logo {
  text-align: center;
  margin-bottom: 1.25rem;
}

.courseglade-auth-modal__logo img {
  max-height: 40px;
  max-width: 140px;
  object-fit: contain;
}

.courseglade-auth-modal__logo-text {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--courseglade-primary, #004bca);
}

.courseglade-auth-tabs {
  display: flex;
  border-bottom: 2px solid var(--courseglade-gray-100, #f1f5f9);
  margin-bottom: 1.5rem;
  gap: 0;
}

.courseglade-auth-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 0.625rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--courseglade-gray-400);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.courseglade-auth-tab.is-active {
  color: var(--courseglade-primary, #004bca);
  border-bottom-color: var(--courseglade-primary, #004bca);
}

.courseglade-auth-panel {
  display: none;
}

.courseglade-auth-panel.is-active {
  display: block;
}

.courseglade-auth-form .courseglade-form-row {
  margin-bottom: 1rem;
}

.courseglade-auth-form .courseglade-form-row--half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.courseglade-required {
  color: var(--courseglade-danger, #dc2626);
  font-weight: 600;
}

.courseglade-auth-form label.courseglade-form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--courseglade-gray-700, #334155);
  margin-bottom: 0.375rem;
}

.courseglade-auth-form .courseglade-form-error {
  font-size: 0.8125rem;
  color: var(--courseglade-danger, #dc2626);
  margin-top: 0.875rem;
  padding: 0.625rem 0.875rem;
  background: rgba(220,38,38,.06);
  border-radius: var(--courseglade-radius);
  display: none;
}

.courseglade-auth-form .courseglade-form-error.is-visible {
  display: block;
}

.courseglade-auth-form .courseglade-btn {
  width: 100%;
  justify-content: center;
  margin-top: 1.25rem;
}

.courseglade-btn-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: 0.5rem;
}

/* Password field with toggle */
.courseglade-password-wrap {
  position: relative;
}

.courseglade-password-wrap input.courseglade-form-input {
  padding-right: 2.75rem;
}

.courseglade-password-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--courseglade-gray-400);
  display: flex;
  align-items: center;
  line-height: 1;
  transition: color 0.15s;
}

/* Themes style bare <button>, and this one sits inside a text field where a
   filled background reads as a second control. Specific enough to win, and
   restated on every state so a theme cannot paint one of them back in. */
button.courseglade-password-toggle,
button.courseglade-password-toggle:hover,
button.courseglade-password-toggle:focus,
button.courseglade-password-toggle:focus-visible,
button.courseglade-password-toggle:active {
  background: none;
  border: none;
  box-shadow: none;
}

/* The colour has to carry the same weight as the background above. Astra sets
   both on <button>; killing only the background leaves a white icon on a white
   field, which is an icon you cannot see. */
button.courseglade-password-toggle {
  color: var(--courseglade-gray-400);
}

button.courseglade-password-toggle:hover {
  color: var(--courseglade-gray-600, #475569);
}

/* The shared focus ring is two rings 4px out, which on an 18px icon inside a
   field swallows the icon. A tight outline says the same thing at this size. */
button.courseglade-password-toggle:focus-visible {
  outline: 2px solid var(--courseglade-primary);
  outline-offset: 2px;
  border-radius: var(--courseglade-radius-sm);
  color: var(--courseglade-primary);
}

/* Password strength bar */
.courseglade-strength-bar {
  display: flex;
  gap: 4px;
  margin-top: 0.5rem;
}

.courseglade-strength-bar__segment {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--courseglade-gray-100, #f1f5f9);
  transition: background 0.25s;
}

.courseglade-strength-bar[data-strength="1"] .courseglade-strength-bar__segment:nth-child(1) { background: #ef4444; }
.courseglade-strength-bar[data-strength="2"] .courseglade-strength-bar__segment:nth-child(1),
.courseglade-strength-bar[data-strength="2"] .courseglade-strength-bar__segment:nth-child(2) { background: #f97316; }
.courseglade-strength-bar[data-strength="3"] .courseglade-strength-bar__segment:nth-child(1),
.courseglade-strength-bar[data-strength="3"] .courseglade-strength-bar__segment:nth-child(2),
.courseglade-strength-bar[data-strength="3"] .courseglade-strength-bar__segment:nth-child(3) { background: #eab308; }
.courseglade-strength-bar[data-strength="4"] .courseglade-strength-bar__segment { background: #22c55e; }

.courseglade-strength-label {
  font-size: 0.75rem;
  margin-top: 0.25rem;
  color: var(--courseglade-gray-400);
  min-height: 1em;
}

/* Empty until the first keystroke, and min-height above reserves a line for
   text that is not there yet — which reads as a gap under the field rather
   than as space being held. Collapse it instead: the meter and its label
   appear together when there is something to say, and the one-line shift
   happens below the field being typed into. */
.courseglade-strength-label:empty {
  display: none;
}

.courseglade-auth-alt {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--courseglade-gray-400);
  margin-top: 1.25rem;
}

.courseglade-auth-alt button {
  background: none;
  border: none;
  color: var(--courseglade-primary, #004bca);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-size: inherit;
}

.courseglade-auth-alt button:hover {
  text-decoration: underline;
}

/* ── Email verification pending state ───────────────────────────────────── */

.courseglade-auth-pending {
  padding: 8px 0 4px;
  text-align: center;
}

.courseglade-auth-pending__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: var(--courseglade-primary-50, #eff6ff);
  border-radius: 50%;
  color: var(--courseglade-primary);
}

.courseglade-auth-pending__title {
  margin: 0 0 10px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--courseglade-on-surface);
  letter-spacing: -.2px;
}

.courseglade-auth-pending__desc {
  margin: 0 0 20px;
  font-size: .9375rem;
  color: var(--courseglade-on-surface-secondary);
  line-height: 1.6;
}

.courseglade-auth-pending__sub {
  margin: 0;
  font-size: .875rem;
  color: var(--courseglade-on-surface-muted);
}

.courseglade-auth-pending__resend,
.courseglade-auth-inline-resend {
  background: none;
  border: none;
  padding: 0;
  color: var(--courseglade-primary);
  font-size: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.courseglade-auth-pending__resend:hover,
.courseglade-auth-inline-resend:hover {
  color: var(--courseglade-primary-dark, #003aa0);
}

.courseglade-auth-pending__resend:disabled {
  color: var(--courseglade-on-surface-muted);
  cursor: default;
  text-decoration: none;
}

/* ── Verify notices (page-level) ─────────────────────────────────────────── */

.courseglade-auth-notice {
  padding: 12px 16px;
  border-radius: var(--courseglade-radius);
  font-size: .9rem;
  margin-bottom: 16px;
  font-weight: 500;
}

.courseglade-auth-notice--success {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.courseglade-auth-notice--error {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

@keyframes courseglade-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes courseglade-overlay-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes courseglade-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes courseglade-modal-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(8px) scale(0.97); }
}