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

/* ==========================================================================
   Design Tokens
   ========================================================================== */
:root {
  /* Brand */
  --unifylms-primary:          #004bca;
  --unifylms-primary-dark:     #003ea8;
  --unifylms-primary-light:    #0061ff;
  --unifylms-primary-gradient: linear-gradient(135deg, #004bca 0%, #0061ff 100%);
  --unifylms-primary-bg:       rgba(0, 75, 202, 0.06);

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

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

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

  --unifylms-warning:          #fab005;
  --unifylms-warning-bg:       #fff3bf;
  --unifylms-warning-border:   #fde68a;
  --unifylms-warning-surface:  #fffdf5;
  --unifylms-warning-light:    #fff9db;
  --unifylms-warning-text:     #b45309;
  --unifylms-warning-accent:   #e67700;
  --unifylms-warning-gradient: linear-gradient(135deg, #fff3bf, #ffe066);

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

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

  /* Surfaces */
  --unifylms-surface:          #f9f9fc;
  --unifylms-surface-low:      #f3f3f6;
  --unifylms-surface-lowest:   #ffffff;
  --unifylms-surface-high:     #e8e8ea;

  /* Text */
  --unifylms-on-surface:       #1a1c1e;
  --unifylms-on-surface-muted: #5a5e66;

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

  /* Shadows */
  --unifylms-shadow-sm:        0 4px 12px rgba(26, 28, 30, 0.06);
  --unifylms-shadow:           0 12px 28px rgba(26, 28, 30, 0.08);
  --unifylms-shadow-lg:        0 20px 40px rgba(26, 28, 30, 0.06);

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

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

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

  /* Typography */
  --unifylms-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --unifylms-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

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

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

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

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

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

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

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

[class*="unifylms-"] a:focus {
  outline: none;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.unifylms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--unifylms-radius);
  border: 1px solid transparent;
  font-family: var(--unifylms-font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.5;
  cursor: pointer;
  text-decoration: none !important;
  transition: background var(--unifylms-transition), color var(--unifylms-transition), transform var(--unifylms-transition), box-shadow var(--unifylms-transition);
  white-space: nowrap;
  box-sizing: border-box;
}

.unifylms-btn:focus {
  outline: none;
}

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

/* Primary */
.unifylms-btn-primary {
  background: var(--unifylms-primary-gradient);
  color: #fff;
}
.unifylms-btn-primary:hover:not(:disabled) {

  box-shadow: var(--unifylms-shadow-lg);
  color: #fff;
  text-decoration: none;
}

/* Secondary */
.unifylms-btn-secondary {
  background: var(--unifylms-surface-low);
  color: var(--unifylms-on-surface);
}
.unifylms-btn-secondary:hover:not(:disabled) {
  background: var(--unifylms-primary);
  color: #fff;

  box-shadow: var(--unifylms-shadow-lg);
  text-decoration: none;
}

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

/* Success */
.unifylms-btn-success {
  background: var(--unifylms-success);
  color: #fff;
}
.unifylms-btn-success:hover:not(:disabled) {
  background: #27883a;
  color: #fff;

  box-shadow: var(--unifylms-shadow-lg);
  text-decoration: none;
}

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

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

/* Sizes */
.unifylms-btn-sm {
  padding: 6px 14px;
  font-size: 0.8125rem;
}

.unifylms-btn-lg {
  padding: 14px 32px;
  font-size: 1rem;
}

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

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

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

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

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

/* Legacy alias used in enroll-button.css and checkout.css */
.unifylms-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: unifylms-spin 0.7s linear infinite;
  flex-shrink: 0;
}

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

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

/* ==========================================================================
   Card
   ========================================================================== */
.unifylms-card {
  background: var(--unifylms-surface-lowest);
  border: 1px solid var(--unifylms-border);
  border-radius: var(--unifylms-radius-lg);
}

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

/* ==========================================================================
   Empty State
   ========================================================================== */
.unifylms-empty-state {
  text-align: center;
  padding: 3rem 2rem;
  background: var(--unifylms-surface);
  border: 1px solid var(--unifylms-border);
  border-radius: var(--unifylms-radius-lg);
}

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

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

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

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

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

input.unifylms-form-input,
textarea.unifylms-form-input,
select.unifylms-form-input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--unifylms-border);
  border-radius: var(--unifylms-radius);
  font-size: 0.9375rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--unifylms-on-surface);
  background-color: var(--unifylms-surface-lowest);
  box-sizing: border-box;
  transition: border-color var(--unifylms-transition), box-shadow var(--unifylms-transition);
  display: block;
}

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

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

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

select.unifylms-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.unifylms-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: unifylms-overlay-in 0.18s ease;
}

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

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

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

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

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

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

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

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

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

.unifylms-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(--unifylms-gray-400, #94a3b8);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.unifylms-auth-divider {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--unifylms-gray-400, #94a3b8);
  margin-top: 1.25rem;
}

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

.unifylms-auth-divider button:hover {
  text-decoration: underline;
}

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

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

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

.unifylms-auth-pending__title {
  margin: 0 0 10px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--unifylms-text-primary);
  letter-spacing: -.2px;
}

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

.unifylms-auth-pending__sub {
  margin: 0;
  font-size: .875rem;
  color: var(--unifylms-text-muted, #94a3b8);
}

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

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

.unifylms-auth-pending__resend:disabled {
  color: var(--unifylms-text-muted, #94a3b8);
  cursor: default;
  text-decoration: none;
}

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

.unifylms-auth-notice {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: .9rem;
  margin-bottom: 16px;
  font-weight: 500;
}

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

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

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

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

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

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