/* ============================================================================
   sprafo-components.css — Reusable UI component layer
   Depends on: sprafo-design-system.css (--sf-* tokens)
   No Bootstrap overrides — additive only.
   Light and Dark Mode both handled here (Dark via html[data-theme="dark"]).
   RTL-safe using logical properties (padding-inline, margin-inline, etc.).
   Reduced-motion: animations disabled via @media (prefers-reduced-motion).
   ============================================================================ */

/* ============================================================================
   1. PREMIUM FORM CONTROLS
   ============================================================================ */

.sf-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
}

.sf-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sf-text);
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.sf-label-required::after {
  content: '*';
  color: var(--sf-error);
  margin-inline-start: 0.125rem;
}

.sf-hint {
  font-size: 0.8125rem;
  color: var(--sf-text-subtle);
  line-height: 1.45;
  margin-top: 0.25rem;
}
.sf-hint--error {
  color: var(--sf-error-text);
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
}
.sf-hint--success { color: var(--sf-success-text); }

/* ---- Text inputs ---- */
.sf-input,
.sf-control {
  display: block;
  width: 100%;
  min-height: var(--sf-control-h, 44px);
  padding: var(--sf-control-pad-y, 0.625rem) var(--sf-control-pad-x, 0.875rem);
  font-size: 1rem;
  font-family: var(--sf-font-sans);
  color: var(--sf-text);
  background-color: var(--sf-input-bg, #ffffff);
  border: 1.5px solid var(--sf-input-border, #cbd5e1);
  border-radius: var(--sf-radius-sm);
  transition: border-color var(--sf-duration-fast) var(--sf-ease-standard),
              box-shadow   var(--sf-duration-fast) var(--sf-ease-standard),
              background-color var(--sf-duration-fast) var(--sf-ease-standard);
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.5;
  box-sizing: border-box;
}

.sf-input::placeholder,
.sf-control::placeholder {
  color: var(--sf-input-placeholder, #94a3b8);
  opacity: 1;
}

.sf-input:hover,
.sf-control:hover { border-color: var(--sf-input-border-hover, #94a3b8); }

.sf-input:focus,
.sf-control:focus {
  outline: none;
  border-color: var(--sf-input-border-focus, #1d4ed8);
  box-shadow: var(--sf-focus-shadow, 0 0 0 3px rgba(29,78,216,.25));
  background-color: var(--sf-surface);
}

.sf-input:-webkit-autofill,
.sf-control:-webkit-autofill {
  -webkit-text-fill-color: var(--sf-text);
  box-shadow: 0 0 0 1000px var(--sf-input-bg, #fff) inset,
              var(--sf-focus-shadow, 0 0 0 3px rgba(29,78,216,.25));
  transition: background-color 9999s ease;
}

.sf-input:disabled,
.sf-control:disabled {
  background-color: var(--sf-input-disabled-bg, #f1f5f9);
  border-color: var(--sf-border);
  color: var(--sf-text-subtle);
  cursor: not-allowed;
  opacity: 0.75;
}

.sf-input[readonly],
.sf-control[readonly] {
  background-color: var(--sf-input-readonly-bg, #f8fafc);
  border-color: var(--sf-border);
  cursor: default;
}

.sf-field--error .sf-input,
.sf-field--error .sf-control,
.sf-field--error .sf-select {
  border-color: var(--sf-error);
  box-shadow: var(--sf-focus-shadow-danger, 0 0 0 3px rgba(220,38,38,.25));
}

.sf-field--success .sf-input,
.sf-field--success .sf-control {
  border-color: var(--sf-success);
  box-shadow: 0 0 0 3px rgba(22,163,74,.20);
}

.sf-textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.sf-textarea.sf-input { min-height: 96px; }

/* ---- Select ---- */
.sf-select {
  display: block;
  width: 100%;
  min-height: var(--sf-control-h, 44px);
  padding: var(--sf-control-pad-y, 0.625rem) calc(var(--sf-control-pad-x, 0.875rem) + 1.5rem) var(--sf-control-pad-y, 0.625rem) var(--sf-control-pad-x, 0.875rem);
  font-size: 1rem;
  color: var(--sf-text);
  background-color: var(--sf-input-bg, #ffffff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23475569' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sf-control-pad-x, 0.875rem) center;
  background-size: 14px;
  border: 1.5px solid var(--sf-input-border, #cbd5e1);
  border-radius: var(--sf-radius-sm);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--sf-duration-fast) var(--sf-ease-standard),
              box-shadow   var(--sf-duration-fast) var(--sf-ease-standard);
  line-height: 1.5;
  box-sizing: border-box;
}
[dir="rtl"] .sf-select {
  padding-inline-end: var(--sf-control-pad-x, 0.875rem);
  padding-inline-start: calc(var(--sf-control-pad-x, 0.875rem) + 1.5rem);
  background-position: left var(--sf-control-pad-x, 0.875rem) center;
}
.sf-select:hover { border-color: var(--sf-input-border-hover, #94a3b8); }
.sf-select:focus {
  outline: none;
  border-color: var(--sf-input-border-focus, #1d4ed8);
  box-shadow: var(--sf-focus-shadow, 0 0 0 3px rgba(29,78,216,.25));
}
.sf-select:disabled {
  background-color: var(--sf-input-disabled-bg, #f1f5f9);
  border-color: var(--sf-border);
  color: var(--sf-text-subtle);
  cursor: not-allowed;
  opacity: 0.75;
}
.sf-select option { background-color: var(--sf-surface); color: var(--sf-text); }

/* ============================================================================
   2. PREMIUM CHECKBOX & RADIO SYSTEM
   .sf-check-wrapper > input[type=checkbox/.sf-check-input] + .sf-check-label
   ============================================================================ */

.sf-check-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  min-height: 44px;
  cursor: pointer;
  position: relative;
  user-select: none;
}
.sf-check-wrapper.sf-check-inline { display: inline-flex; }

.sf-check-input {
  flex-shrink: 0;
  width: var(--sf-check-size, 20px);
  height: var(--sf-check-size, 20px);
  margin-top: 0.125rem;
  cursor: pointer;
  border-radius: var(--sf-check-radius, 5px);
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--sf-input-bg, #fff);
  border: 2px solid var(--sf-input-border, #cbd5e1);
  transition: background-color var(--sf-duration-fast),
              border-color     var(--sf-duration-fast),
              box-shadow       var(--sf-duration-fast);
  position: relative;
  display: grid;
  place-content: center;
}
input[type="radio"].sf-check-input { border-radius: 999px; }

.sf-check-input:hover {
  border-color: var(--sf-check-color, #1d4ed8);
  background-color: var(--sf-primary-soft);
}
.sf-check-input:checked {
  background-color: var(--sf-check-color, #1d4ed8);
  border-color: var(--sf-check-color, #1d4ed8);
}
.sf-check-input:checked::before { content: ''; display: block; }
input[type="checkbox"].sf-check-input:checked::before {
  width: 11px; height: 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8'%3E%3Cpath d='M1 4L4 7L10 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
input[type="radio"].sf-check-input:checked::before {
  width: 8px; height: 8px; border-radius: 999px; background-color: #ffffff;
}
.sf-check-input:focus-visible {
  outline: none;
  box-shadow: var(--sf-focus-shadow, 0 0 0 3px rgba(29,78,216,.25));
  border-color: var(--sf-check-color, #1d4ed8);
}
.sf-check-input:disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--sf-input-disabled-bg, #f1f5f9); }
.sf-check-input:disabled ~ .sf-check-label { color: var(--sf-text-subtle); cursor: not-allowed; }

.sf-check-label {
  font-size: 0.9375rem;
  color: var(--sf-text);
  line-height: 1.5;
  cursor: pointer;
  padding-block: 0.125rem;
}
.sf-check-label a { color: var(--sf-primary); text-decoration: underline; text-underline-offset: 2px; }
.sf-check-label a:hover { color: var(--sf-primary-strong); }

.sf-check-group { display: flex; flex-direction: column; gap: 0.375rem; }
.sf-check-group--horizontal { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1.25rem; }

/* ============================================================================
   3. BUTTON SYSTEM
   ============================================================================ */

.sf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  min-height: 40px;
  padding: 0.5rem 1.125rem;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: var(--sf-font-sans);
  line-height: 1.4;
  border: 1.5px solid transparent;
  border-radius: var(--sf-radius-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--sf-duration-fast) var(--sf-ease-standard),
              border-color     var(--sf-duration-fast) var(--sf-ease-standard),
              color            var(--sf-duration-fast) var(--sf-ease-standard),
              box-shadow       var(--sf-duration-fast) var(--sf-ease-standard);
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
}
.sf-btn:focus-visible { outline: none; box-shadow: var(--sf-focus-shadow, 0 0 0 3px rgba(29,78,216,.25)); }
.sf-btn:disabled, .sf-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

.sf-btn--loading::before {
  content: '';
  display: inline-block;
  width: 0.9rem; height: 0.9rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: sf-spin 0.65s linear infinite;
  flex-shrink: 0;
}
@keyframes sf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .sf-btn--loading::before { animation: none; border: 2px solid currentColor; }
  .sf-avatar-ring { animation: none !important; }
}

.sf-btn--sm { min-height: 32px; padding: 0.3125rem 0.75rem; font-size: 0.8125rem; gap: 0.3rem; }
.sf-btn--lg { min-height: 48px; padding: 0.75rem 1.5rem; font-size: 1.0625rem; gap: 0.5rem; }
.sf-btn--full { width: 100%; }

.sf-btn--primary { background-color: var(--sf-primary); border-color: var(--sf-primary); color: var(--sf-primary-contrast); }
.sf-btn--primary:hover, .sf-btn--primary:focus-visible { background-color: var(--sf-primary-strong); border-color: var(--sf-primary-strong); color: var(--sf-primary-contrast); }
.sf-btn--primary:active { background-color: var(--sf-primary-strong); opacity: 0.88; }

.sf-btn--secondary { background-color: var(--sf-bg-subtle); border-color: var(--sf-border-strong); color: var(--sf-text); }
.sf-btn--secondary:hover { background-color: var(--sf-border); border-color: var(--sf-border-strong); }

.sf-btn--outline { background-color: transparent; border-color: var(--sf-primary); color: var(--sf-primary); }
.sf-btn--outline:hover, .sf-btn--outline:focus-visible { background-color: var(--sf-primary-soft); color: var(--sf-primary-strong); }

.sf-btn--success { background-color: var(--sf-success); border-color: var(--sf-success); color: #fff; }
.sf-btn--success:hover { background-color: var(--sf-success-strong); border-color: var(--sf-success-strong); }

.sf-btn--warning { background-color: var(--sf-warning); border-color: var(--sf-warning); color: #fff; }
.sf-btn--warning:hover { filter: brightness(0.92); }

.sf-btn--danger { background-color: var(--sf-error); border-color: var(--sf-error); color: #fff; }
.sf-btn--danger:hover { background-color: var(--sf-error-strong); border-color: var(--sf-error-strong); }

.sf-btn--ghost { background-color: transparent; border-color: transparent; color: var(--sf-primary); }
.sf-btn--ghost:hover { background-color: var(--sf-primary-tint); }

.sf-btn--link { background-color: transparent; border-color: transparent; color: var(--sf-primary); text-decoration: underline; text-underline-offset: 2px; padding-inline: 0; min-height: auto; }
.sf-btn--link:hover { color: var(--sf-primary-strong); }

.sf-btn--gold {
  background: linear-gradient(135deg, var(--sf-gold, #d97706) 0%, #b45309 100%);
  border-color: var(--sf-gold-strong, #b45309);
  color: #fff;
  box-shadow: 0 2px 8px rgba(180,83,9,.28);
}
.sf-btn--gold:hover, .sf-btn--gold:focus-visible {
  background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
  box-shadow: 0 4px 16px rgba(180,83,9,.38);
  color: #fff;
}

/* ============================================================================
   4. CARD SYSTEM
   ============================================================================ */

.sf-card { background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); box-shadow: var(--sf-shadow-sm); overflow: hidden; }
.sf-card--elevated { box-shadow: var(--sf-shadow-md); }
.sf-card--flat     { box-shadow: none; }
.sf-card--outline  { box-shadow: none; border-width: 2px; }

.sf-card-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--sf-border); background: var(--sf-surface); }
.sf-card-header--muted { background: var(--sf-surface-muted); }
.sf-card-body   { padding: 1.5rem; }
.sf-card-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--sf-border); background: var(--sf-surface-muted); }

.sf-section-card { margin-bottom: 1.5rem; }
.sf-section-title { font-size: 1.05rem; font-weight: 700; color: var(--sf-text); display: flex; align-items: center; gap: 0.5rem; margin: 0; line-height: 1.3; }
.sf-section-title-icon { width: 2rem; height: 2rem; border-radius: var(--sf-radius-sm); background: var(--sf-primary-soft); color: var(--sf-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.9rem; }
.sf-section-sub { font-size: 0.8125rem; color: var(--sf-text-subtle); margin: 0.25rem 0 0; }

/* ============================================================================
   5. SUBSCRIBER AVATAR RING + IDENTITY
   ============================================================================ */

.sf-avatar-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(
    var(--sf-avatar-ring-start, #7c3aed),
    var(--sf-avatar-ring-mid,   #1d4ed8),
    var(--sf-avatar-ring-end,   #0ea5e9),
    var(--sf-avatar-ring-start, #7c3aed)
  );
  animation: sf-ring-spin 4s linear infinite;
  box-shadow: 0 0 0 2px var(--sf-surface, #fff);
  flex-shrink: 0;
}
@keyframes sf-ring-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.sf-avatar-inner {
  border-radius: 50%;
  overflow: hidden;
  background: var(--sf-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.sf-avatar-initials {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--sf-primary-soft);
  color: var(--sf-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.sf-avatar-initials--sm { width: 36px; height: 36px; font-size: 0.875rem; }
.sf-avatar-initials--lg { width: 56px; height: 56px; font-size: 1.25rem; }
.sf-avatar-initials--xl { width: 72px; height: 72px; font-size: 1.5rem; }
.sf-avatar-initials--subscriber {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: var(--sf-gold-strong, #b45309);
}

/* ============================================================================
   6. PLAN BADGE SYSTEM
   ============================================================================ */

.sf-plan-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.625rem;
  border-radius: var(--sf-radius-pill, 999px);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  line-height: 1; white-space: nowrap;
}
.sf-plan-badge--gold    { background: var(--sf-gold-soft, #fef3c7); color: var(--sf-gold-strong, #b45309); border: 1px solid var(--sf-gold-border, #fcd34d); }
.sf-plan-badge--purple  { background: #ede9fe; color: #5b21b6; border: 1px solid #c4b5fd; }
.sf-plan-badge--blue    { background: var(--sf-primary-soft); color: var(--sf-primary-strong); border: 1px solid #93c5fd; }
.sf-plan-badge--emerald { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.sf-plan-badge--rose    { background: #ffe4e6; color: #9f1239; border: 1px solid #fda4af; }
.sf-plan-badge--amber   { background: var(--sf-gold-soft, #fef3c7); color: #92400e; border: 1px solid var(--sf-gold-border, #fcd34d); }
.sf-plan-badge--default { background: var(--sf-bg-subtle); color: var(--sf-text-muted); border: 1px solid var(--sf-border); }

/* ============================================================================
   6a. PLAN CARD ACCENT SYSTEM
   Centralized top-border accent replacing all inline border-top / border_style.
   Apply class returned by plan_visual_meta()['plan_card_class'].
   !important is required to override Bootstrap's border-0 utility on non-featured cards.
   ============================================================================ */

.sf-plan-card--gold    { border-top: 3px solid #f59e0b !important; }
.sf-plan-card--purple  { border-top: 3px solid #7c3aed !important; }
.sf-plan-card--blue    { border-top: 3px solid #3b82f6 !important; }
.sf-plan-card--default { border-top: 3px solid #6b7280 !important; }

/* Small variant badge (replaces inline font-size on sf-plan-badge) */
.sf-plan-badge--sm   { font-size: 0.7rem; }
/* Extra-small variant for compact star chips (replaces inline font-size on .badge) */
.sf-badge--xs { font-size: 0.6rem !important; }

.sf-subscriber-status {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--sf-radius-pill, 999px);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em;
}
.sf-subscriber-status--active   { background: linear-gradient(135deg,#fef3c7,#fde68a); color: var(--sf-gold-strong, #b45309); border: 1px solid var(--sf-gold-border, #fcd34d); }
.sf-subscriber-status--expired  { background: var(--sf-bg-subtle); color: var(--sf-text-muted); border: 1px solid var(--sf-border); }
.sf-subscriber-status--expiring { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

/* ============================================================================
   7. STATUS BADGE SYSTEM
   ============================================================================ */

.sf-status {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--sf-radius-pill, 999px);
  font-size: 0.75rem; font-weight: 600; line-height: 1; white-space: nowrap;
}
.sf-status--success  { background: var(--sf-success-soft);  color: var(--sf-success-text); }
.sf-status--error    { background: var(--sf-error-soft);    color: var(--sf-error-text); }
.sf-status--warning  { background: var(--sf-warning-soft);  color: var(--sf-warning-text); }
.sf-status--info     { background: var(--sf-info-soft);     color: var(--sf-info-text); }
.sf-status--neutral  { background: var(--sf-bg-subtle);     color: var(--sf-text-muted); border: 1px solid var(--sf-border); }
.sf-status--gold     { background: var(--sf-gold-soft, #fef3c7); color: var(--sf-gold-strong, #b45309); border: 1px solid var(--sf-gold-border, #fcd34d); }

.sf-status::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: currentColor; flex-shrink: 0; }
.sf-status--no-dot::before { display: none; }

/* ============================================================================
   8. BOOTSTRAP form-check UPGRADE (site-wide — larger, accessible)
   ============================================================================ */

.form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  cursor: pointer;
  border: 2px solid var(--sf-input-border, #cbd5e1);
  transition: border-color 120ms, box-shadow 120ms, background-color 120ms;
  flex-shrink: 0;
}
.form-check-input:hover { border-color: var(--sf-primary, #1d4ed8); }
.form-check-input:checked {
  background-color: var(--sf-primary, #1d4ed8);
  border-color: var(--sf-primary, #1d4ed8);
}
.form-check-input:focus {
  box-shadow: var(--sf-focus-shadow, 0 0 0 3px rgba(29,78,216,.25));
  border-color: var(--sf-primary, #1d4ed8);
}
.form-check-input[type="radio"] { border-radius: 50%; }

.form-check {
  min-height: 44px;
  padding-inline-start: 1.875rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.form-check .form-check-input {
  margin-inline-start: -1.875rem;
  margin-top: 0.15rem;
}
.form-check-label {
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--sf-text, #0f172a);
  line-height: 1.5;
}
.form-check-input:indeterminate {
  background-color: var(--sf-primary, #1d4ed8);
  border-color: var(--sf-primary, #1d4ed8);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

/* ============================================================================
   9. GLOBAL Bootstrap .form-control / .form-select UPGRADE
   ============================================================================ */

.form-control,
.form-select {
  min-height: var(--sf-control-h, 44px);
  border-radius: var(--sf-radius-sm, 0.375rem);
  border: 1.5px solid var(--sf-input-border, #cbd5e1);
  font-size: 1rem;
  transition: border-color 120ms, box-shadow 120ms;
  color: var(--sf-text, #0f172a);
}
.form-control::placeholder { color: var(--sf-input-placeholder, #94a3b8); opacity: 1; }
.form-control:focus,
.form-select:focus {
  border-color: var(--sf-primary, #1d4ed8);
  box-shadow: var(--sf-focus-shadow, 0 0 0 3px rgba(29,78,216,.25));
}
.form-control:hover,
.form-select:hover { border-color: var(--sf-input-border-hover, #94a3b8); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--sf-error, #dc2626); }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: var(--sf-focus-shadow-danger, 0 0 0 3px rgba(220,38,38,.25)); }
.form-control.is-valid:focus, .form-select.is-valid:focus { box-shadow: 0 0 0 3px rgba(22,163,74,.20); }
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px #fff inset, var(--sf-focus-shadow, 0 0 0 3px rgba(29,78,216,.25));
  -webkit-text-fill-color: var(--sf-text, #0f172a);
  transition: background-color 9999s;
}

/* ============================================================================
   10. ADMIN TABLE IMPROVEMENTS
   ============================================================================ */

.sf-table-info { font-size: 0.875rem; color: var(--sf-text-muted); }

.sf-table-wrapper {
  width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--sf-radius-lg); border: 1px solid var(--sf-border);
}
.sf-table-wrapper table { min-width: 640px; }

.sf-empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--sf-text-muted); }
.sf-empty-state-icon { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.4; color: var(--sf-text-subtle); }
.sf-empty-state-title { font-size: 1rem; font-weight: 600; color: var(--sf-text); margin-bottom: 0.25rem; }
.sf-empty-state-sub { font-size: 0.875rem; color: var(--sf-text-muted); }

/* ============================================================================
   11. TERMS ACCEPTANCE COMPONENT
   ============================================================================ */

.sf-terms-checkbox-wrapper {
  padding: 1rem;
  background: var(--sf-bg-subtle);
  border: 1.5px solid var(--sf-border);
  border-radius: var(--sf-radius-md);
  margin-bottom: 1rem;
  transition: border-color var(--sf-duration-fast);
}
.sf-terms-checkbox-wrapper:has(.form-check-input:checked) {
  border-color: var(--sf-success, #16a34a);
  background: var(--sf-success-soft);
}
.sf-terms-checkbox-wrapper.sf-terms--error {
  border-color: var(--sf-error, #dc2626);
  background: var(--sf-error-soft);
}
.sf-terms-error-msg {
  color: var(--sf-error-text);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-top: 0.375rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* ============================================================================
   12. DARK MODE — all new components
   ============================================================================ */

html[data-theme="dark"] .sf-input,
html[data-theme="dark"] .sf-control,
html[data-theme="dark"] .sf-select {
  background-color: var(--sf-surface);
  border-color: var(--sf-border-strong);
  color: var(--sf-text);
}
html[data-theme="dark"] .sf-input::placeholder,
html[data-theme="dark"] .sf-control::placeholder { color: var(--sf-text-subtle); }
html[data-theme="dark"] .sf-input:hover,
html[data-theme="dark"] .sf-control:hover { border-color: var(--sf-border-strong); }
html[data-theme="dark"] .sf-input:focus,
html[data-theme="dark"] .sf-control:focus,
html[data-theme="dark"] .sf-select:focus {
  background-color: var(--sf-surface);
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96,165,250,.25);
}
html[data-theme="dark"] .sf-input:-webkit-autofill,
html[data-theme="dark"] .sf-control:-webkit-autofill {
  -webkit-text-fill-color: var(--sf-text);
  box-shadow: 0 0 0 1000px var(--sf-surface) inset, 0 0 0 3px rgba(96,165,250,.25);
}
html[data-theme="dark"] .sf-input:disabled,
html[data-theme="dark"] .sf-control:disabled,
html[data-theme="dark"] .sf-select:disabled { background-color: var(--sf-surface-muted); border-color: var(--sf-border); }
html[data-theme="dark"] .sf-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23a3b2c4' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .sf-select option { background-color: var(--sf-surface); color: var(--sf-text); }

html[data-theme="dark"] .sf-check-input { background-color: var(--sf-surface); border-color: var(--sf-border-strong); }
html[data-theme="dark"] .sf-check-input:checked { background-color: #3b82f6; border-color: #3b82f6; }
html[data-theme="dark"] .sf-check-input:hover { border-color: #60a5fa; background-color: var(--sf-primary-soft); }
html[data-theme="dark"] .sf-check-label { color: var(--sf-text); }
html[data-theme="dark"] .sf-check-label a { color: #93c5fd; }

html[data-theme="dark"] .sf-btn--secondary { background-color: var(--sf-surface); border-color: var(--sf-border-strong); color: var(--sf-text); }
html[data-theme="dark"] .sf-btn--secondary:hover { background-color: var(--sf-surface-muted); }
html[data-theme="dark"] .sf-btn--outline { border-color: #60a5fa; color: #93c5fd; }
html[data-theme="dark"] .sf-btn--outline:hover { background-color: var(--sf-primary-soft); color: #bfdbfe; }
html[data-theme="dark"] .sf-btn--ghost { color: #93c5fd; }
html[data-theme="dark"] .sf-btn--ghost:hover { background-color: var(--sf-primary-soft); }
html[data-theme="dark"] .sf-btn--link { color: #93c5fd; }
html[data-theme="dark"] .sf-btn--link:hover { color: #bfdbfe; }

html[data-theme="dark"] .sf-card { background: var(--sf-surface); border-color: var(--sf-border); }
html[data-theme="dark"] .sf-card-header { background: var(--sf-surface); border-bottom-color: var(--sf-border); }
html[data-theme="dark"] .sf-card-header--muted { background: var(--sf-surface-muted); }
html[data-theme="dark"] .sf-card-footer { background: var(--sf-surface-muted); border-top-color: var(--sf-border); }
html[data-theme="dark"] .sf-section-title { color: var(--sf-text); }
html[data-theme="dark"] .sf-section-title-icon { background: var(--sf-primary-soft); color: #93c5fd; }
html[data-theme="dark"] .sf-section-sub { color: var(--sf-text-subtle); }

html[data-theme="dark"] .sf-avatar-initials { background: var(--sf-primary-soft); color: #93c5fd; }
html[data-theme="dark"] .sf-avatar-initials--subscriber {
  background: linear-gradient(135deg, rgba(180,83,9,.22), rgba(245,158,11,.15));
  color: #fcd34d;
}
html[data-theme="dark"] .sf-avatar-ring {
  box-shadow: 0 0 0 2px var(--sf-surface), 0 0 12px rgba(124,58,237,.4);
}

html[data-theme="dark"] .sf-plan-badge--gold    { background: rgba(217,119,6,.18); color: #fcd34d; border-color: rgba(217,119,6,.40); }
html[data-theme="dark"] .sf-plan-badge--purple  { background: rgba(124,58,237,.18); color: #c4b5fd; border-color: rgba(124,58,237,.40); }
html[data-theme="dark"] .sf-plan-badge--blue    { background: var(--sf-primary-soft); color: #93c5fd; border-color: rgba(59,130,246,.40); }
html[data-theme="dark"] .sf-plan-badge--emerald { background: rgba(5,150,105,.18); color: #6ee7b7; border-color: rgba(5,150,105,.40); }
html[data-theme="dark"] .sf-plan-badge--rose    { background: rgba(225,29,72,.18); color: #fda4af; border-color: rgba(225,29,72,.40); }
html[data-theme="dark"] .sf-plan-badge--amber   { background: rgba(217,119,6,.18); color: #fcd34d; border-color: rgba(217,119,6,.40); }
html[data-theme="dark"] .sf-plan-badge--default { background: var(--sf-surface-muted); color: var(--sf-text-muted); border-color: var(--sf-border); }

/* Plan card accent — dark mode: preserve hue identity */
html[data-theme="dark"] .sf-plan-card--gold    { border-top-color: #f59e0b !important; }
html[data-theme="dark"] .sf-plan-card--purple  { border-top-color: #a78bfa !important; }
html[data-theme="dark"] .sf-plan-card--blue    { border-top-color: #60a5fa !important; }
html[data-theme="dark"] .sf-plan-card--default { border-top-color: var(--sf-border-strong) !important; }

html[data-theme="dark"] .sf-subscriber-status--active   { background: rgba(217,119,6,.16); color: #fcd34d; border-color: rgba(217,119,6,.40); }
html[data-theme="dark"] .sf-subscriber-status--expired  { background: var(--sf-surface-muted); color: var(--sf-text-muted); border-color: var(--sf-border); }
html[data-theme="dark"] .sf-subscriber-status--expiring { background: rgba(217,119,6,.14); color: #fbbf24; border-color: rgba(217,119,6,.35); }

html[data-theme="dark"] .sf-status--success { background: rgba(22,163,74,.16); color: #86efac; }
html[data-theme="dark"] .sf-status--error   { background: rgba(220,38,38,.16); color: #fca5a5; }
html[data-theme="dark"] .sf-status--warning { background: rgba(217,119,6,.16); color: #fbbf24; }
html[data-theme="dark"] .sf-status--info    { background: rgba(14,165,233,.16); color: #7dd3fc; }
html[data-theme="dark"] .sf-status--neutral { background: var(--sf-surface-muted); color: var(--sf-text-muted); border-color: var(--sf-border); }
html[data-theme="dark"] .sf-status--gold    { background: rgba(217,119,6,.16); color: #fcd34d; border-color: rgba(217,119,6,.40); }

html[data-theme="dark"] .sf-table-wrapper { border-color: var(--sf-border); }

html[data-theme="dark"] .sf-terms-checkbox-wrapper { background: var(--sf-surface-muted); border-color: var(--sf-border); }
html[data-theme="dark"] .sf-terms-checkbox-wrapper:has(.form-check-input:checked) {
  border-color: rgba(34,197,94,.50);
  background: rgba(34,197,94,.08);
}
html[data-theme="dark"] .sf-terms-checkbox-wrapper.sf-terms--error {
  border-color: rgba(239,68,68,.50);
  background: rgba(239,68,68,.08);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background-color: var(--sf-surface);
  border-color: var(--sf-border-strong);
  color: var(--sf-text);
}
html[data-theme="dark"] .form-control::placeholder { color: var(--sf-text-subtle); opacity: 1; }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
  background-color: var(--sf-surface);
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96,165,250,.22);
  color: var(--sf-text);
}
html[data-theme="dark"] .form-control:-webkit-autofill {
  -webkit-text-fill-color: var(--sf-text);
  box-shadow: 0 0 0 1000px var(--sf-surface) inset;
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-select:disabled { background-color: var(--sf-surface-muted); border-color: var(--sf-border); color: var(--sf-text-subtle); }

html[data-theme="dark"] .form-check-input { background-color: var(--sf-surface); border-color: var(--sf-border-strong); }
html[data-theme="dark"] .form-check-input:checked { background-color: #3b82f6; border-color: #3b82f6; }
html[data-theme="dark"] .form-check-input:focus { box-shadow: 0 0 0 3px rgba(96,165,250,.25); border-color: #60a5fa; }
html[data-theme="dark"] .form-check-label { color: var(--sf-text); }

/* ============================================================================
   13. RESPONSIVE
   ============================================================================ */

@media (max-width: 575.98px) {
  .sf-card-body   { padding: 1rem; }
  .sf-card-header { padding: 1rem; }
  .sf-card-footer { padding: 0.75rem 1rem; }
  .sf-btn--lg     { min-height: 44px; padding: 0.625rem 1.125rem; font-size: 1rem; }
  .sf-avatar-initials--xl { width: 56px; height: 56px; font-size: 1.25rem; }
}

/* ============================================================================
   14. REDUCED MOTION — component-level animations
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  /* Stop the continuously spinning avatar ring */
  .sf-avatar-ring { animation: none; background: var(--sf-primary, #1d4ed8); }

  /* Strip transform/transition from interactive cards */
  .billing-plan-preview-card,
  .sf-card { transition: box-shadow var(--sf-duration-base) linear,
                          border-color var(--sf-duration-base) linear !important; }
  .billing-plan-preview-card:hover { transform: none; }

  /* Spinner inside buttons — keep the visual indicator but stop the spin */
  .sf-btn--loading .spinner-border { animation-duration: 2s; }
}

/* ============================================================================
   15. FOCUS RINGS — pagination and interactive components
   ============================================================================ */

/* Visible focus ring for Bootstrap pagination links */
.pagination .page-link:focus-visible {
  outline: none;
  box-shadow: var(--sf-focus-shadow, 0 0 0 3px rgba(29,78,216,.28));
  position: relative;
  z-index: 2;
}

/* Touch target: ensure pagination items are tall enough on mobile */
@media (pointer: coarse) {
  .pagination .page-link { min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; }
}

/* RTL — flip directional chevrons inside pagination */
[dir="rtl"] .pagination .bi-chevron-left  { transform: scaleX(-1); display: inline-block; }
[dir="rtl"] .pagination .bi-chevron-right { transform: scaleX(-1); display: inline-block; }

/* RTL — plan badges: zero letter-spacing for Arabic script */
[dir="rtl"] .sf-plan-badge { letter-spacing: 0; }
[dir="rtl"] .sf-subscriber-status { letter-spacing: 0; }