/**
 * MedNova Component Library — Part 4
 * ─────────────────────────────────────────────────────────────────────────────
 * Complete reusable component system for the MedNova healthcare marketplace.
 * Depends on: mednova-tokens.css, mednova-public.css
 * Never modifies business logic, routes, controllers, or Blade data.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 1 — BUTTON SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base button reset & foundation ── */
.mn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mn-font);
  font-weight: var(--mn-font-semibold);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--mn-radius-btn);
  cursor: pointer;
  outline: none;
  position: relative;
  overflow: hidden;
  transition:
    background 200ms ease,
    border-color 200ms ease,
    color 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease,
    opacity 200ms ease;
  -webkit-user-select: none;
  user-select: none;
}

.mn-btn:focus-visible {
  outline: 2px solid var(--mn-teal);
  outline-offset: 3px;
}

/* Sizes */
.mn-btn-xs  { font-size: 11px; padding: 5px 12px;  border-radius: 10px; gap: 5px; }
.mn-btn-sm  { font-size: 13px; padding: 8px 16px;  }
.mn-btn     { font-size: 15px; padding: 11px 22px; }   /* default = md */
.mn-btn-lg  { font-size: 16px; padding: 14px 28px; }
.mn-btn-xl  { font-size: 18px; padding: 17px 36px; border-radius: 20px; }
.mn-btn-full { width: 100%; }

/* ── Variants ── */

/* Primary */
.mn-btn-primary {
  background: var(--mn-teal);
  color: #fff;
  border-color: var(--mn-teal);
  box-shadow: 0 2px 8px rgba(13,148,136,.20);
}
.mn-btn-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--mn-teal) 88%, black);
  border-color: color-mix(in srgb, var(--mn-teal) 88%, black);
  box-shadow: 0 4px 16px rgba(13,148,136,.28);
  transform: translateY(-1px);
}
.mn-btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: 0 1px 4px rgba(13,148,136,.20); }

/* Secondary */
.mn-btn-secondary {
  background: var(--mn-white);
  color: var(--mn-teal);
  border-color: var(--mn-teal);
}
.mn-btn-secondary:hover:not(:disabled) {
  background: var(--mn-mint);
  box-shadow: 0 3px 12px rgba(13,148,136,.14);
  transform: translateY(-1px);
}
.mn-btn-secondary:active:not(:disabled) { transform: translateY(0); }

/* Outline (navy) */
.mn-btn-outline {
  background: transparent;
  color: var(--mn-navy);
  border-color: var(--mn-navy);
}
.mn-btn-outline:hover:not(:disabled) {
  background: var(--mn-navy);
  color: var(--mn-white);
  transform: translateY(-1px);
}

/* Ghost */
.mn-btn-ghost {
  background: transparent;
  color: var(--mn-text-secondary);
  border-color: transparent;
}
.mn-btn-ghost:hover:not(:disabled) {
  background: var(--mn-gray-50);
  color: var(--mn-teal);
}

/* Text */
.mn-btn-text {
  background: none;
  border-color: transparent;
  color: var(--mn-teal);
  padding-inline: 4px;
  border-radius: 6px;
}
.mn-btn-text:hover:not(:disabled) { text-decoration: underline; }

/* Danger */
.mn-btn-danger {
  background: var(--mn-error);
  color: #fff;
  border-color: var(--mn-error);
  box-shadow: 0 2px 8px rgba(239,68,68,.20);
}
.mn-btn-danger:hover:not(:disabled) {
  background: #DC2626;
  border-color: #DC2626;
  box-shadow: 0 4px 14px rgba(239,68,68,.28);
  transform: translateY(-1px);
}

/* Success */
.mn-btn-success {
  background: var(--mn-success);
  color: #fff;
  border-color: var(--mn-success);
  box-shadow: 0 2px 8px rgba(16,185,129,.20);
}
.mn-btn-success:hover:not(:disabled) {
  background: #059669;
  border-color: #059669;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16,185,129,.28);
}

/* Warning */
.mn-btn-warning {
  background: var(--mn-warning);
  color: var(--mn-navy);
  border-color: var(--mn-warning);
  box-shadow: 0 2px 8px rgba(245,158,11,.20);
}
.mn-btn-warning:hover:not(:disabled) {
  background: #D97706;
  border-color: #D97706;
  transform: translateY(-1px);
}

/* Disabled */
.mn-btn:disabled,
.mn-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}

/* Loading state */
.mn-btn-loading {
  pointer-events: none;
  cursor: wait;
}
.mn-btn-loading .mn-btn-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: mn-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes mn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mn-btn-loading .mn-btn-spinner { animation: none; opacity: 0.7; }
}

/* Icon-only button */
.mn-btn-icon {
  width: 40px; height: 40px;
  padding: 0;
  border-radius: 50%;
}
.mn-btn-icon.mn-btn-sm { width: 32px; height: 32px; }
.mn-btn-icon.mn-btn-lg { width: 48px; height: 48px; }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 2 — INPUT SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Form group ── */
.mn-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

/* ── Label ── */
.mn-field-label {
  font-size: 14px;
  font-weight: var(--mn-font-semibold);
  color: var(--mn-navy);
  display: flex;
  align-items: center;
  gap: 4px;
}
.mn-field-required { color: var(--mn-error); font-size: 12px; }

/* ── Input wrapper (for icons) ── */
.mn-field-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.mn-field-icon-lead,
.mn-field-icon-trail {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--mn-gray-400);
  pointer-events: none;
  flex-shrink: 0;
  transition: color 200ms ease;
}
.mn-field-icon-lead  { left: 14px; }
.mn-field-icon-trail { right: 14px; }

/* ── Base input ── */
.mn-input,
.mn-select,
.mn-textarea {
  width: 100%;
  font-family: var(--mn-font);
  font-size: 15px;
  color: var(--mn-text-primary);
  background: var(--mn-white);
  border: 1.5px solid var(--mn-gray-200);
  border-radius: var(--mn-radius-input);
  padding: 11px 16px;
  outline: none;
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease,
    background 200ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.mn-input::placeholder,
.mn-textarea::placeholder { color: var(--mn-gray-400); }

.mn-input:hover:not(:disabled),
.mn-select:hover:not(:disabled),
.mn-textarea:hover:not(:disabled) {
  border-color: var(--mn-gray-400);
}

.mn-input:focus,
.mn-select:focus,
.mn-textarea:focus {
  border-color: var(--mn-teal);
  box-shadow: 0 0 0 3px rgba(13,148,136,.12);
}

/* With leading icon */
.mn-field-wrap .mn-input.has-icon-lead { padding-left: 42px; }
.mn-field-wrap .mn-input.has-icon-trail { padding-right: 42px; }
.mn-field-wrap:focus-within .mn-field-icon-lead,
.mn-field-wrap:focus-within .mn-field-icon-trail { color: var(--mn-teal); }

/* Textarea */
.mn-textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

/* Select arrow */
.mn-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 42px;
  cursor: pointer;
}

/* Validation states */
.mn-input-error,
.mn-select-error,
.mn-textarea-error {
  border-color: var(--mn-error) !important;
}
.mn-input-error:focus,
.mn-select-error:focus,
.mn-textarea-error:focus {
  box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
}

.mn-input-success,
.mn-select-success,
.mn-textarea-success {
  border-color: var(--mn-success) !important;
}
.mn-input-success:focus,
.mn-select-success:focus,
.mn-textarea-success:focus {
  box-shadow: 0 0 0 3px rgba(16,185,129,.12) !important;
}

/* Disabled */
.mn-input:disabled,
.mn-select:disabled,
.mn-textarea:disabled {
  background: var(--mn-gray-50);
  color: var(--mn-gray-400);
  cursor: not-allowed;
  border-color: var(--mn-gray-100);
}

/* Helper / error / success text */
.mn-field-hint { font-size: 12px; color: var(--mn-text-muted); }
.mn-field-error-msg { font-size: 12px; color: var(--mn-error); display: flex; align-items: center; gap: 4px; }
.mn-field-success-msg { font-size: 12px; color: var(--mn-success); display: flex; align-items: center; gap: 4px; }

/* ── Checkbox & Radio ── */
.mn-check-item,
.mn-radio-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--mn-text-secondary);
  -webkit-user-select: none;
  user-select: none;
}

.mn-check-item input[type="checkbox"],
.mn-radio-item input[type="radio"] {
  width: 18px; height: 18px;
  border: 1.5px solid var(--mn-gray-300);
  border-radius: 4px;
  background: var(--mn-white);
  accent-color: var(--mn-teal);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 200ms ease;
}

.mn-radio-item input[type="radio"] { border-radius: 50%; }

/* ── Toggle Switch ── */
.mn-switch-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.mn-switch {
  position: relative;
  width: 44px; height: 24px;
}

.mn-switch input { display: none; }

.mn-switch-track {
  position: absolute;
  inset: 0;
  background: var(--mn-gray-200);
  border-radius: 999px;
  transition: background 200ms ease;
}

.mn-switch input:checked ~ .mn-switch-track { background: var(--mn-teal); }

.mn-switch-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: var(--mn-white);
  border-radius: 50%;
  box-shadow: var(--mn-shadow-sm);
  transition: transform 200ms ease;
}

.mn-switch input:checked ~ .mn-switch-track .mn-switch-thumb {
  transform: translateX(20px);
}

/* ── Search Input ── */
.mn-search-field {
  display: flex;
  align-items: center;
  background: var(--mn-white);
  border: 1.5px solid var(--mn-gray-200);
  border-radius: var(--mn-radius-pill);
  box-shadow: var(--mn-shadow-sm);
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.mn-search-field:focus-within {
  border-color: var(--mn-teal);
  box-shadow: 0 0 0 3px rgba(13,148,136,.12);
}

.mn-search-field input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--mn-font);
  font-size: 15px;
  color: var(--mn-text-primary);
  padding: 12px 16px;
  min-width: 0;
}

.mn-search-field input::placeholder { color: var(--mn-gray-400); }

.mn-search-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--mn-teal);
  color: var(--mn-white);
  border: none;
  padding: 10px 20px;
  font-family: var(--mn-font);
  font-size: 14px;
  font-weight: var(--mn-font-semibold);
  cursor: pointer;
  transition: background 200ms ease;
  white-space: nowrap;
  margin: 3px;
  border-radius: 999px;
}

.mn-search-submit:hover { background: color-mix(in srgb, var(--mn-teal) 88%, black); }
.mn-search-submit svg { width: 16px; height: 16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 3 — BADGE SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

.mn-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mn-font);
  font-size: 11px;
  font-weight: var(--mn-font-semibold);
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: var(--mn-radius-pill);
  white-space: nowrap;
  line-height: 1.4;
}

.mn-badge svg { width: 10px; height: 10px; flex-shrink: 0; }

/* Variants */
.mn-badge-teal      { background: var(--mn-mint);        color: var(--mn-teal); }
.mn-badge-navy      { background: rgba(10,22,40,.08);     color: var(--mn-navy); }
.mn-badge-success   { background: #D1FAE5;                color: #065F46; }
.mn-badge-warning   { background: #FEF3C7;                color: #92400E; }
.mn-badge-error     { background: #FEE2E2;                color: #991B1B; }
.mn-badge-info      { background: #E0F2FE;                color: #0369A1; }
.mn-badge-neutral   { background: var(--mn-gray-100);     color: var(--mn-gray-600); }
.mn-badge-premium   { background: linear-gradient(90deg, #7C3AED, #4F46E5); color: #fff; }

/* Semantic badges */
.mn-badge-verified   { background: var(--mn-mint); color: var(--mn-teal); }
.mn-badge-new        { background: #E0F2FE; color: #0369A1; }
.mn-badge-popular    { background: #FEF3C7; color: #92400E; }
.mn-badge-featured   { background: linear-gradient(90deg,#7C3AED,#4F46E5); color:#fff; }
.mn-badge-available  { background: #D1FAE5; color: #065F46; }
.mn-badge-closed     { background: #FEE2E2; color: #991B1B; }
.mn-badge-emergency  { background: #FEE2E2; color: var(--mn-error); animation: mn-pulse-badge 1.6s ease-in-out infinite; }
.mn-badge-online     { background: #D1FAE5; color: #065F46; }
.mn-badge-offline    { background: var(--mn-gray-100); color: var(--mn-gray-600); }
.mn-badge-top-rated  { background: linear-gradient(90deg,#F59E0B,#EF4444); color:#fff; }

@keyframes mn-pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) { .mn-badge-emergency { animation: none; } }

/* ── Live dot (avatar status) ── */
.mn-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--mn-white);
  flex-shrink: 0;
}
.mn-dot-online  { background: var(--mn-success); }
.mn-dot-offline { background: var(--mn-gray-400); }
.mn-dot-busy    { background: var(--mn-warning); }
.mn-dot-away    { background: var(--mn-warning); }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 4 — AVATAR SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

.mn-avatar {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.mn-avatar img {
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Sizes */
.mn-avatar-xs  img { width: 28px;  height: 28px;  }
.mn-avatar-sm  img { width: 36px;  height: 36px;  }
.mn-avatar-md  img { width: 48px;  height: 48px;  }
.mn-avatar-lg  img { width: 64px;  height: 64px;  }
.mn-avatar-xl  img { width: 96px;  height: 96px;  }
.mn-avatar-2xl img { width: 128px; height: 128px; }

/* Ring (profile header usage) */
.mn-avatar-ring img {
  border: 3px solid var(--mn-teal);
  padding: 2px;
}

/* Fallback initials */
.mn-avatar-fallback {
  border-radius: 50%;
  background: var(--mn-mint);
  color: var(--mn-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--mn-font-bold);
  font-family: var(--mn-font);
  font-size: 14px;
  flex-shrink: 0;
}
.mn-avatar-xs  .mn-avatar-fallback { width: 28px;  height: 28px;  font-size: 10px; }
.mn-avatar-sm  .mn-avatar-fallback { width: 36px;  height: 36px;  font-size: 12px; }
.mn-avatar-md  .mn-avatar-fallback { width: 48px;  height: 48px;  font-size: 14px; }
.mn-avatar-lg  .mn-avatar-fallback { width: 64px;  height: 64px;  font-size: 18px; }

/* Status dot position */
.mn-avatar .mn-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 5 — TAG SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

.mn-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: var(--mn-font-medium);
  font-family: var(--mn-font);
  padding: 4px 10px;
  border-radius: var(--mn-radius-pill);
  border: 1px solid var(--mn-border);
  background: var(--mn-white);
  color: var(--mn-text-secondary);
  cursor: default;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
  white-space: nowrap;
}

.mn-tag svg { width: 12px; height: 12px; flex-shrink: 0; }

.mn-tag-interactive { cursor: pointer; }
.mn-tag-interactive:hover {
  background: var(--mn-mint);
  border-color: var(--mn-teal);
  color: var(--mn-teal);
}

/* Tag variants */
.mn-tag-teal    { background: var(--mn-mint);    border-color: rgba(13,148,136,.25); color: var(--mn-teal); }
.mn-tag-navy    { background: rgba(10,22,40,.06); border-color: rgba(10,22,40,.15);  color: var(--mn-navy); }
.mn-tag-warning { background: #FEF3C7;            border-color: #FCD34D;             color: #92400E; }
.mn-tag-error   { background: #FEE2E2;            border-color: #FCA5A5;             color: #991B1B; }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 6 — CARD SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base card ── */
.mn-card {
  background: var(--mn-white);
  border-radius: var(--mn-radius-card);
  box-shadow: var(--mn-shadow-card);
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease;
  display: flex;
  flex-direction: column;
}

.mn-card-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--mn-shadow-lg);
}

.mn-card-body   { padding: var(--mn-space-6); flex: 1; display: flex; flex-direction: column; gap: var(--mn-space-3); }
.mn-card-header { padding: var(--mn-space-5) var(--mn-space-6); border-bottom: 1px solid var(--mn-border); }
.mn-card-footer { padding: var(--mn-space-4) var(--mn-space-6); border-top: 1px solid var(--mn-border); }

/* Outlined variant */
.mn-card-outlined {
  box-shadow: none;
  border: 1px solid var(--mn-border);
}
.mn-card-outlined:hover { border-color: var(--mn-teal); }

/* ── Doctor Card ── */
.mn-doctor-card-v2 {
  background: var(--mn-white);
  border-radius: var(--mn-radius-card);
  box-shadow: var(--mn-shadow-card);
  border: 1px solid transparent;
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  display: flex;
  flex-direction: column;
}

.mn-doctor-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: var(--mn-shadow-lg);
  border-color: rgba(13,148,136,.25);
}

.mn-doctor-card-v2 .mn-dc-media {
  position: relative;
  overflow: hidden;
  height: 220px;
}

.mn-doctor-card-v2 .mn-dc-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 300ms ease;
}

.mn-doctor-card-v2:hover .mn-dc-media img { transform: scale(1.04); }

.mn-doctor-card-v2 .mn-dc-verified {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.92);
  border-radius: var(--mn-radius-pill);
  padding: 3px 9px;
  font-size: 11px;
  font-weight: var(--mn-font-semibold);
  color: var(--mn-teal);
  backdrop-filter: blur(6px);
}

.mn-doctor-card-v2 .mn-dc-verified svg { width: 11px; height: 11px; }

.mn-doctor-card-v2 .mn-dc-fav {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.90);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--mn-gray-400);
  transition: color 200ms ease, background 200ms ease, transform 200ms ease;
  text-decoration: none;
  backdrop-filter: blur(6px);
}

.mn-doctor-card-v2 .mn-dc-fav:hover,
.mn-doctor-card-v2 .mn-dc-fav.activefav {
  color: #EF4444;
  background: var(--mn-white);
  transform: scale(1.1);
}

.mn-doctor-card-v2 .mn-dc-fav svg { width: 16px; height: 16px; }

.mn-doctor-card-v2 .mn-dc-body {
  padding: var(--mn-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--mn-space-3);
  flex: 1;
}

.mn-doctor-card-v2 .mn-dc-specialty {
  display: inline-block;
  background: var(--mn-mint);
  color: var(--mn-teal);
  font-size: 11px;
  font-weight: var(--mn-font-semibold);
  padding: 3px 10px;
  border-radius: var(--mn-radius-pill);
  width: fit-content;
}

.mn-doctor-card-v2 .mn-dc-name {
  font-size: 17px;
  font-weight: var(--mn-font-bold);
  color: var(--mn-navy);
  text-decoration: none;
  line-height: 1.3;
  transition: color 200ms ease;
  margin: 0;
}
.mn-doctor-card-v2 .mn-dc-name:hover { color: var(--mn-teal); }

.mn-doctor-card-v2 .mn-dc-clinic {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--mn-text-muted);
}
.mn-doctor-card-v2 .mn-dc-clinic svg { width: 13px; height: 13px; color: var(--mn-teal); flex-shrink: 0; }

.mn-doctor-card-v2 .mn-dc-stars {
  display: flex;
  align-items: center;
  gap: 2px;
}
.mn-doctor-card-v2 .mn-dc-stars svg { width: 14px; height: 14px; }
.mn-doctor-card-v2 .mn-dc-stars .filled { color: #F59E0B; fill: #F59E0B; }
.mn-doctor-card-v2 .mn-dc-stars .empty  { color: var(--mn-gray-200); fill: var(--mn-gray-200); }
.mn-doctor-card-v2 .mn-dc-stars span {
  font-size: 12px;
  color: var(--mn-text-muted);
  margin-left: 4px;
}

.mn-doctor-card-v2 .mn-dc-price {
  font-size: 15px;
  font-weight: var(--mn-font-bold);
  color: var(--mn-teal);
}

.mn-doctor-card-v2 .mn-dc-availability {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: var(--mn-font-medium);
}
.mn-doctor-card-v2 .mn-dc-availability .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mn-dc-avail-yes .dot { background: var(--mn-success); }
.mn-dc-avail-yes { color: var(--mn-success); }
.mn-dc-avail-no .dot  { background: var(--mn-gray-400); }
.mn-dc-avail-no  { color: var(--mn-gray-400); }

.mn-doctor-card-v2 .mn-dc-cta {
  margin-top: auto;
  padding-top: var(--mn-space-3);
  display: flex;
  gap: var(--mn-space-2);
}

.mn-doctor-card-v2 .mn-dc-book {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--mn-teal);
  color: var(--mn-white);
  border-radius: var(--mn-radius-btn);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: var(--mn-font-semibold);
  text-decoration: none;
  transition: background 200ms ease, transform 200ms ease;
}
.mn-doctor-card-v2 .mn-dc-book:hover {
  background: color-mix(in srgb, var(--mn-teal) 88%, black);
  transform: translateY(-1px);
}
.mn-doctor-card-v2 .mn-dc-book svg { width: 14px; height: 14px; }

.mn-doctor-card-v2 .mn-dc-profile {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--mn-radius-btn);
  border: 1.5px solid var(--mn-border);
  background: var(--mn-white);
  color: var(--mn-text-muted);
  text-decoration: none;
  transition: border-color 200ms ease, color 200ms ease;
  flex-shrink: 0;
}
.mn-doctor-card-v2 .mn-dc-profile:hover { border-color: var(--mn-teal); color: var(--mn-teal); }
.mn-doctor-card-v2 .mn-dc-profile svg { width: 16px; height: 16px; }

/* ── Statistics Card ── */
.mn-stat-card {
  background: var(--mn-white);
  border-radius: var(--mn-radius-card);
  box-shadow: var(--mn-shadow-card);
  padding: var(--mn-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--mn-space-3);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.mn-stat-card:hover { transform: translateY(-3px); box-shadow: var(--mn-shadow-lg); }

.mn-stat-card .mn-sc-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--mn-mint);
  display: flex; align-items: center; justify-content: center;
}
.mn-stat-card .mn-sc-icon svg { width: 24px; height: 24px; color: var(--mn-teal); }

.mn-stat-card .mn-sc-number {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: var(--mn-font-extrabold);
  color: var(--mn-navy);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mn-stat-card .mn-sc-label {
  font-size: 13px;
  color: var(--mn-text-muted);
  font-weight: var(--mn-font-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Review Card ── */
.mn-review-card {
  background: var(--mn-white);
  border-radius: var(--mn-radius-card);
  box-shadow: var(--mn-shadow-card);
  padding: var(--mn-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--mn-space-4);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.mn-review-card:hover { transform: translateY(-3px); box-shadow: var(--mn-shadow-lg); }

.mn-review-card .mn-rc-stars {
  display: flex; gap: 2px;
}
.mn-review-card .mn-rc-stars svg { width: 15px; height: 15px; fill: #F59E0B; color: #F59E0B; }

.mn-review-card .mn-rc-text {
  font-size: 14px;
  color: var(--mn-text-secondary);
  line-height: 1.7;
  font-style: italic;
  flex: 1;
}

.mn-review-card .mn-rc-author {
  display: flex;
  align-items: center;
  gap: var(--mn-space-3);
  padding-top: var(--mn-space-3);
  border-top: 1px solid var(--mn-border);
}

.mn-review-card .mn-rc-author img {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.mn-review-card .mn-rc-name {
  font-size: 13px;
  font-weight: var(--mn-font-semibold);
  color: var(--mn-navy);
}

.mn-review-card .mn-rc-treatment {
  font-size: 12px;
  color: var(--mn-teal);
}

.mn-review-card .mn-rc-date {
  margin-left: auto;
  font-size: 11px;
  color: var(--mn-text-muted);
}

/* ── Article Card ── */
.mn-article-card {
  background: var(--mn-white);
  border-radius: var(--mn-radius-card);
  box-shadow: var(--mn-shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.mn-article-card:hover { transform: translateY(-4px); box-shadow: var(--mn-shadow-lg); }

.mn-article-card .mn-ac-media {
  position: relative;
  overflow: hidden;
  height: 200px;
}

.mn-article-card .mn-ac-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease;
}

.mn-article-card:hover .mn-ac-media img { transform: scale(1.04); }

.mn-article-card .mn-ac-category {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--mn-teal);
  color: var(--mn-white);
  font-size: 11px;
  font-weight: var(--mn-font-semibold);
  padding: 3px 10px;
  border-radius: var(--mn-radius-pill);
}

.mn-article-card .mn-ac-body {
  padding: var(--mn-space-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--mn-space-3);
}

.mn-article-card .mn-ac-meta {
  display: flex;
  align-items: center;
  gap: var(--mn-space-4);
  font-size: 12px;
  color: var(--mn-text-muted);
}

.mn-article-card .mn-ac-title {
  font-size: 17px;
  font-weight: var(--mn-font-bold);
  color: var(--mn-navy);
  line-height: 1.4;
  margin: 0;
  text-decoration: none;
  transition: color 200ms ease;
}
.mn-article-card .mn-ac-title:hover { color: var(--mn-teal); }

.mn-article-card .mn-ac-excerpt {
  font-size: 14px;
  color: var(--mn-text-secondary);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.mn-article-card .mn-ac-cta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: var(--mn-font-semibold);
  color: var(--mn-teal);
  text-decoration: none;
  transition: gap 200ms ease;
}
.mn-article-card .mn-ac-cta:hover { gap: 8px; }
.mn-article-card .mn-ac-cta svg { width: 14px; height: 14px; }

/* ── Category / Specialty Card ── */
.mn-category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mn-space-4);
  background: var(--mn-white);
  border-radius: var(--mn-radius-card);
  box-shadow: var(--mn-shadow-card);
  border: 1px solid transparent;
  padding: var(--mn-space-6) var(--mn-space-4);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 200ms ease,
    box-shadow 200ms ease,
    border-color 200ms ease;
}

.mn-category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mn-shadow-lg);
  border-color: rgba(13,148,136,.3);
}

.mn-category-card .mn-cc-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--mn-mint);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: background 200ms ease;
}

.mn-category-card:hover .mn-cc-icon { background: rgba(13,148,136,.15); }

.mn-category-card .mn-cc-icon img {
  width: 42px; height: 42px;
  object-fit: contain;
}

.mn-category-card .mn-cc-icon svg { width: 36px; height: 36px; color: var(--mn-teal); }

.mn-category-card .mn-cc-name {
  font-size: 15px;
  font-weight: var(--mn-font-semibold);
  color: var(--mn-navy);
  text-align: center;
  line-height: 1.3;
  margin: 0;
}

.mn-category-card .mn-cc-count {
  font-size: 12px;
  color: var(--mn-text-muted);
}

.mn-category-card .mn-cc-arrow {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--mn-mint);
  display: flex; align-items: center; justify-content: center;
  color: var(--mn-teal);
  transition: background 200ms ease, transform 200ms ease;
}

.mn-category-card:hover .mn-cc-arrow {
  background: var(--mn-teal);
  color: var(--mn-white);
  transform: translateX(2px);
}

.mn-category-card .mn-cc-arrow svg { width: 14px; height: 14px; }

/* ── Appointment Card ── */
.mn-appt-card {
  background: var(--mn-white);
  border-radius: var(--mn-radius-card);
  box-shadow: var(--mn-shadow-card);
  padding: var(--mn-space-5);
  display: flex;
  align-items: flex-start;
  gap: var(--mn-space-4);
  transition: box-shadow 200ms ease;
}

.mn-appt-card:hover { box-shadow: var(--mn-shadow-md); }

.mn-appt-card .mn-apc-img {
  width: 52px; height: 52px;
  border-radius: var(--mn-radius-img);
  object-fit: cover;
  flex-shrink: 0;
}

.mn-appt-card .mn-apc-info { flex: 1; min-width: 0; }

.mn-appt-card .mn-apc-name {
  font-size: 15px;
  font-weight: var(--mn-font-semibold);
  color: var(--mn-navy);
  margin: 0 0 3px;
}

.mn-appt-card .mn-apc-specialty {
  font-size: 12px;
  color: var(--mn-teal);
  margin-bottom: var(--mn-space-2);
}

.mn-appt-card .mn-apc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mn-space-3);
  font-size: 12px;
  color: var(--mn-text-muted);
}

.mn-appt-card .mn-apc-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mn-appt-card .mn-apc-meta svg { width: 12px; height: 12px; color: var(--mn-teal); }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 7 — MODAL SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

.mn-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10,22,40,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mn-space-6);
  animation: mn-fade-in 200ms ease both;
}

.mn-modal-backdrop.mn-closing { animation: mn-fade-out 200ms ease both; }

@keyframes mn-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes mn-fade-out { from { opacity: 1; } to { opacity: 0; } }

.mn-modal {
  background: var(--mn-white);
  border-radius: var(--mn-radius-modal);
  box-shadow: var(--mn-shadow-lg);
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: mn-modal-in 250ms cubic-bezier(.32,.72,0,1) both;
  position: relative;
}

.mn-modal.mn-closing { animation: mn-modal-out 200ms ease both; }

@keyframes mn-modal-in  { from { opacity:0; transform:translateY(16px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes mn-modal-out { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(8px) scale(.98); } }

@media (prefers-reduced-motion: reduce) {
  .mn-modal-backdrop, .mn-modal { animation: none; }
}

.mn-modal-sm { max-width: 420px; }
.mn-modal-md { max-width: 560px; }
.mn-modal-lg { max-width: 720px; }

.mn-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mn-space-4);
  padding: var(--mn-space-6) var(--mn-space-7);
  border-bottom: 1px solid var(--mn-border);
}

.mn-modal-title {
  font-size: 18px;
  font-weight: var(--mn-font-bold);
  color: var(--mn-navy);
  margin: 0;
}

.mn-modal-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--mn-gray-50);
  color: var(--mn-gray-400);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
  flex-shrink: 0;
}
.mn-modal-close:hover { background: var(--mn-gray-100); color: var(--mn-navy); }
.mn-modal-close svg { width: 16px; height: 16px; }

.mn-modal-body { padding: var(--mn-space-6) var(--mn-space-7); }
.mn-modal-foot {
  padding: var(--mn-space-5) var(--mn-space-7);
  border-top: 1px solid var(--mn-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--mn-space-3);
  flex-wrap: wrap;
}

/* Confirmation modal icon */
.mn-modal-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--mn-space-5);
}
.mn-modal-icon.success { background: #D1FAE5; color: var(--mn-success); }
.mn-modal-icon.danger  { background: #FEE2E2; color: var(--mn-error); }
.mn-modal-icon.warning { background: #FEF3C7; color: var(--mn-warning); }
.mn-modal-icon svg { width: 30px; height: 30px; }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 8 — TOAST / ALERT SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Toast container ── */
.mn-toast-stack {
  position: fixed;
  bottom: var(--mn-space-6);
  right: var(--mn-space-6);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--mn-space-3);
  max-width: 380px;
  width: calc(100% - var(--mn-space-12));
}

.mn-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--mn-space-3);
  background: var(--mn-white);
  border-radius: var(--mn-radius-card);
  box-shadow: var(--mn-shadow-lg);
  padding: var(--mn-space-4) var(--mn-space-5);
  border-left: 4px solid transparent;
  animation: mn-toast-in 300ms cubic-bezier(.32,.72,0,1) both;
}

.mn-toast.mn-toast-out { animation: mn-toast-out 200ms ease both; }

@keyframes mn-toast-in  { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:none; } }
@keyframes mn-toast-out { from { opacity:1; transform:none; } to { opacity:0; transform:translateX(16px); } }

@media (prefers-reduced-motion: reduce) { .mn-toast { animation: none; } }

.mn-toast-success { border-color: var(--mn-success); }
.mn-toast-error   { border-color: var(--mn-error);   }
.mn-toast-warning { border-color: var(--mn-warning);  }
.mn-toast-info    { border-color: var(--mn-aqua);     }

.mn-toast-icon { flex-shrink: 0; margin-top: 1px; }
.mn-toast-icon svg { width: 18px; height: 18px; }
.mn-toast-success .mn-toast-icon { color: var(--mn-success); }
.mn-toast-error   .mn-toast-icon { color: var(--mn-error);   }
.mn-toast-warning .mn-toast-icon { color: var(--mn-warning);  }
.mn-toast-info    .mn-toast-icon { color: var(--mn-aqua);     }

.mn-toast-content { flex: 1; }
.mn-toast-title   { font-size: 14px; font-weight: var(--mn-font-semibold); color: var(--mn-navy); margin: 0 0 2px; }
.mn-toast-message { font-size: 13px; color: var(--mn-text-muted); margin: 0; line-height: 1.5; }

.mn-toast-close {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--mn-gray-400);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 200ms ease;
}
.mn-toast-close:hover { background: var(--mn-gray-100); color: var(--mn-navy); }
.mn-toast-close svg { width: 13px; height: 13px; }

/* ── Alert (inline) ── */
.mn-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--mn-space-3);
  padding: var(--mn-space-4) var(--mn-space-5);
  border-radius: var(--mn-radius-input);
  font-size: 14px;
  line-height: 1.6;
  border: 1px solid transparent;
}

.mn-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

.mn-alert-success { background: #F0FDF4; border-color: #BBF7D0; color: #166534; }
.mn-alert-success svg { color: var(--mn-success); }
.mn-alert-danger  { background: #FFF1F2; border-color: #FECDD3; color: #9F1239; }
.mn-alert-danger  svg { color: var(--mn-error);   }
.mn-alert-warning { background: #FFFBEB; border-color: #FDE68A; color: #78350F; }
.mn-alert-warning svg { color: var(--mn-warning);  }
.mn-alert-info    { background: #EFF6FF; border-color: #BFDBFE; color: #1E40AF; }
.mn-alert-info    svg { color: #3B82F6;             }

/* Dismissible */
.mn-alert .mn-alert-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 200ms ease;
  flex-shrink: 0;
  padding: 0;
  color: inherit;
}
.mn-alert .mn-alert-close:hover { opacity: 1; }
.mn-alert .mn-alert-close svg { width: 16px; height: 16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 9 — TAB SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

.mn-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 2px solid var(--mn-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mn-tabs::-webkit-scrollbar { display: none; }

.mn-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--mn-space-3) var(--mn-space-5);
  font-size: 14px;
  font-weight: var(--mn-font-medium);
  font-family: var(--mn-font);
  color: var(--mn-text-secondary);
  border: none;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 200ms ease;
}

.mn-tab-btn:hover { color: var(--mn-teal); }

.mn-tab-btn[aria-selected="true"] {
  color: var(--mn-teal);
  font-weight: var(--mn-font-semibold);
  border-bottom-color: var(--mn-teal);
}

.mn-tab-btn svg { width: 15px; height: 15px; }

/* Pill tabs variant */
.mn-tabs-pill {
  display: flex;
  gap: var(--mn-space-2);
  flex-wrap: wrap;
  border-bottom: none;
  background: var(--mn-gray-50);
  border-radius: var(--mn-radius-pill);
  padding: 4px;
}

.mn-tabs-pill .mn-tab-btn {
  border-radius: var(--mn-radius-pill);
  border-bottom: none;
  margin-bottom: 0;
  padding: var(--mn-space-2) var(--mn-space-4);
  font-size: 13px;
}

.mn-tabs-pill .mn-tab-btn[aria-selected="true"] {
  background: var(--mn-white);
  box-shadow: var(--mn-shadow-sm);
  color: var(--mn-teal);
  border-bottom-color: transparent;
}

/* Tab panel */
.mn-tab-panel { display: none; }
.mn-tab-panel.is-active,
.mn-tab-panel[aria-hidden="false"] { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 10 — ACCORDION SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

.mn-accordion { display: flex; flex-direction: column; gap: var(--mn-space-2); }

.mn-acc-item {
  background: var(--mn-white);
  border-radius: var(--mn-radius-card);
  border: 1px solid var(--mn-border);
  overflow: hidden;
  transition: border-color 200ms ease;
}

.mn-acc-item.open { border-color: var(--mn-teal); }

.mn-acc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mn-space-4);
  width: 100%;
  padding: var(--mn-space-5) var(--mn-space-6);
  font-family: var(--mn-font);
  font-size: 15px;
  font-weight: var(--mn-font-semibold);
  color: var(--mn-navy);
  background: none;
  border: none;
  cursor: pointer;
  text-align: start;
  transition: color 200ms ease;
}

.mn-acc-item.open .mn-acc-trigger { color: var(--mn-teal); }

.mn-acc-trigger:hover { color: var(--mn-teal); }

.mn-acc-icon {
  width: 22px; height: 22px;
  color: var(--mn-teal);
  flex-shrink: 0;
  transition: transform 250ms ease;
}

.mn-acc-item.open .mn-acc-icon { transform: rotate(45deg); }

.mn-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 350ms ease, padding 350ms ease;
  padding: 0 var(--mn-space-6);
  font-size: 14px;
  color: var(--mn-text-secondary);
  line-height: 1.7;
}

.mn-acc-item.open .mn-acc-body {
  max-height: 600px;
  padding: 0 var(--mn-space-6) var(--mn-space-5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 11 — BREADCRUMB
   ═══════════════════════════════════════════════════════════════════════════ */

.mn-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mn-space-2);
  font-size: 13px;
  color: var(--mn-text-muted);
  list-style: none;
  padding: 0;
  margin: 0;
}

.mn-breadcrumb li { display: inline-flex; align-items: center; gap: var(--mn-space-2); }

.mn-breadcrumb a {
  color: var(--mn-text-muted);
  text-decoration: none;
  transition: color 200ms ease;
}
.mn-breadcrumb a:hover { color: var(--mn-teal); }

.mn-breadcrumb-sep { color: var(--mn-gray-300); font-size: 11px; }

.mn-breadcrumb [aria-current="page"] { color: var(--mn-navy); font-weight: var(--mn-font-medium); }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 12 — PAGINATION
   ═══════════════════════════════════════════════════════════════════════════ */

.mn-pagination {
  display: flex;
  align-items: center;
  gap: var(--mn-space-2);
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mn-pagination li a,
.mn-pagination li span,
.mn-pagination li button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding-inline: var(--mn-space-3);
  border-radius: var(--mn-radius-pill);
  font-size: 14px;
  font-weight: var(--mn-font-medium);
  font-family: var(--mn-font);
  color: var(--mn-text-secondary);
  background: var(--mn-white);
  border: 1px solid var(--mn-border);
  text-decoration: none;
  cursor: pointer;
  transition:
    background 200ms ease,
    border-color 200ms ease,
    color 200ms ease,
    box-shadow 200ms ease;
}

.mn-pagination li a:hover,
.mn-pagination li button:hover {
  border-color: var(--mn-teal);
  color: var(--mn-teal);
  background: var(--mn-mint);
}

.mn-pagination li.active a,
.mn-pagination li.active span,
.mn-pagination li span.current {
  background: var(--mn-teal);
  border-color: var(--mn-teal);
  color: var(--mn-white);
  box-shadow: 0 2px 8px rgba(13,148,136,.3);
}

.mn-pagination li.disabled a,
.mn-pagination li.disabled span {
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 13 — TABLE SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

.mn-table-wrap {
  background: var(--mn-white);
  border-radius: var(--mn-radius-card);
  box-shadow: var(--mn-shadow-card);
  overflow: hidden;
}

.mn-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.mn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-family: var(--mn-font);
}

.mn-table thead {
  background: var(--mn-gray-50);
  border-bottom: 2px solid var(--mn-border);
}

.mn-table th {
  padding: var(--mn-space-4) var(--mn-space-5);
  text-align: left;
  font-size: 12px;
  font-weight: var(--mn-font-semibold);
  color: var(--mn-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.mn-table td {
  padding: var(--mn-space-4) var(--mn-space-5);
  color: var(--mn-text-secondary);
  border-bottom: 1px solid var(--mn-border);
  vertical-align: middle;
}

.mn-table tbody tr { transition: background 150ms ease; }
.mn-table tbody tr:hover { background: var(--mn-gray-50); }
.mn-table tbody tr:last-child td { border-bottom: none; }

/* ── Skeleton for table ── */
.mn-table-skeleton td { padding: var(--mn-space-4) var(--mn-space-5); }
.mn-table-skeleton .mn-skeleton { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 14 — TIME SLOT SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

.mn-slot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mn-space-2);
}

.mn-slot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  padding: 8px 14px;
  border-radius: var(--mn-radius-btn);
  font-family: var(--mn-font);
  font-size: 13px;
  font-weight: var(--mn-font-medium);
  border: 1.5px solid var(--mn-border);
  background: var(--mn-white);
  color: var(--mn-text-secondary);
  cursor: pointer;
  transition:
    background 200ms ease,
    border-color 200ms ease,
    color 200ms ease,
    transform 200ms ease;
}

.mn-slot-btn:hover:not(:disabled) {
  border-color: var(--mn-teal);
  color: var(--mn-teal);
  background: var(--mn-mint);
  transform: translateY(-1px);
}

.mn-slot-btn.selected {
  background: var(--mn-teal);
  border-color: var(--mn-teal);
  color: var(--mn-white);
  box-shadow: 0 2px 8px rgba(13,148,136,.25);
}

.mn-slot-btn.booked {
  background: var(--mn-gray-50);
  border-color: var(--mn-border);
  color: var(--mn-gray-300);
  cursor: not-allowed;
  text-decoration: line-through;
  pointer-events: none;
}

.mn-slot-btn:disabled {
  background: var(--mn-gray-50);
  border-color: var(--mn-border);
  color: var(--mn-gray-300);
  cursor: not-allowed;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 15 — TIMELINE COMPONENT
   ═══════════════════════════════════════════════════════════════════════════ */

.mn-timeline { display: flex; flex-direction: column; gap: 0; }

.mn-timeline-item {
  display: flex;
  gap: var(--mn-space-5);
  position: relative;
}

.mn-timeline-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 36px;
  left: 17px;
  width: 2px;
  bottom: 0;
  background: linear-gradient(to bottom, var(--mn-teal), var(--mn-border));
}

.mn-timeline-dot {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--mn-mint);
  border: 2px solid var(--mn-teal);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: background 200ms ease;
}

.mn-timeline-dot svg { width: 16px; height: 16px; color: var(--mn-teal); }
.mn-timeline-dot.active { background: var(--mn-teal); }
.mn-timeline-dot.active svg { color: var(--mn-white); }

.mn-timeline-body {
  padding-bottom: var(--mn-space-8);
  flex: 1;
  padding-top: 6px;
}

.mn-timeline-title {
  font-size: 15px;
  font-weight: var(--mn-font-semibold);
  color: var(--mn-navy);
  margin: 0 0 4px;
}

.mn-timeline-meta {
  font-size: 12px;
  color: var(--mn-text-muted);
  margin-bottom: var(--mn-space-2);
}

.mn-timeline-text {
  font-size: 14px;
  color: var(--mn-text-secondary);
  line-height: 1.65;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 16 — SUCCESS STATE
   ═══════════════════════════════════════════════════════════════════════════ */

.mn-success-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--mn-space-12) var(--mn-space-8);
  gap: var(--mn-space-4);
}

.mn-success-icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: #D1FAE5;
  display: flex; align-items: center; justify-content: center;
  animation: mn-pop-in 400ms cubic-bezier(.32,.72,0,1) both;
}

@keyframes mn-pop-in {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mn-success-icon { animation: none; }
}

.mn-success-icon svg { width: 38px; height: 38px; color: var(--mn-success); }

.mn-success-title {
  font-size: var(--mn-text-h3);
  font-weight: var(--mn-font-bold);
  color: var(--mn-navy);
  margin: 0;
}

.mn-success-desc {
  font-size: var(--mn-text-body);
  color: var(--mn-text-muted);
  line-height: var(--mn-leading-relaxed);
  max-width: 380px;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 17 — SKELETON LOADING (enhanced)
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes mn-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

.mn-skeleton {
  background: linear-gradient(
    90deg,
    var(--mn-gray-100) 25%,
    var(--mn-gray-50)  50%,
    var(--mn-gray-100) 75%
  );
  background-size: 600px 100%;
  border-radius: 6px;
  animation: mn-shimmer 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .mn-skeleton { animation: none; background: var(--mn-gray-100); }
}

/* Shapes */
.mn-skel-text   { height: 14px; border-radius: 4px; }
.mn-skel-title  { height: 22px; border-radius: 4px; }
.mn-skel-circle { border-radius: 50%; }
.mn-skel-img    { border-radius: var(--mn-radius-card) var(--mn-radius-card) 0 0; }
.mn-skel-btn    { height: 40px; border-radius: var(--mn-radius-btn); width: 120px; }

/* Doctor card skeleton */
.mn-skel-card {
  background: var(--mn-white);
  border-radius: var(--mn-radius-card);
  box-shadow: var(--mn-shadow-card);
  overflow: hidden;
}

.mn-skel-card-img { height: 200px; width: 100%; }

.mn-skel-card-body {
  padding: var(--mn-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--mn-space-3);
}

/* Dashboard widget skeleton */
.mn-skel-widget {
  background: var(--mn-white);
  border-radius: var(--mn-radius-card);
  box-shadow: var(--mn-shadow-card);
  padding: var(--mn-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--mn-space-4);
}

/* Profile skeleton */
.mn-skel-profile {
  display: flex;
  gap: var(--mn-space-5);
  align-items: flex-start;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PART 5 — MOTION ENHANCEMENTS
   CSS-only micro-interactions complementing GSAP animations.
   GPU-only: opacity, transform, filter — no width/height/top/left.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Button ripple (pseudo-element approach, no JS) ── */
.mn-btn {
  isolation: isolate;
}

.mn-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,0);
  transition: background 300ms ease;
  pointer-events: none;
}

.mn-btn:active::after {
  background: rgba(255,255,255,0.18);
  transition: none;
}

/* ── Input focus glow (pure CSS) ── */
.mn-input:focus,
.mn-select:focus,
.mn-textarea:focus {
  border-color: var(--mn-teal);
  box-shadow: 0 0 0 3px rgba(13,148,136,.12), 0 1px 3px rgba(10,22,40,.06);
}

/* ── Card reveal initial state (overrides mednova-public.css) ── */
/* Only for elements that will be GSAP-animated from opacity:0 */
/* We use a JS class to avoid flash-of-hidden for no-JS users */
.mn-js-animated {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}

/* ── Hover: icon translate ── */
.mn-icon-hover svg,
.mn-icon-hover i[data-lucide] {
  transition: transform 200ms ease;
}

.mn-icon-hover:hover svg,
.mn-icon-hover:hover i[data-lucide] {
  transform: translateY(-2px);
}

/* ── Link underline animation ── */
.mn-link-anim {
  position: relative;
  text-decoration: none;
}

.mn-link-anim::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: currentColor;
  transition: width 200ms ease;
}

.mn-link-anim:hover::after { width: 100%; }

/* ── Image zoom container ── */
.mn-img-zoom {
  overflow: hidden;
  border-radius: inherit;
}

.mn-img-zoom img {
  transition: transform 300ms ease;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mn-img-zoom:hover img { transform: scale(1.04); }

/* ── Floating particles: subtle opacity pulse on hero canvas ── */
#mn-hero-canvas {
  will-change: transform;
}

/* ── Stagger entrance: nav links ── */
.mn-nav-links li {
  opacity: 1; /* Default visible; GSAP overrides temporarily */
}

/* ── Smooth nav background transition (handled by mednova-ui.js) ── */
.mn-navbar {
  will-change: background, box-shadow;
}

/* ── Doctor card: border glow on hover ── */
.mn-doctor-card-v2:hover {
  box-shadow:
    var(--mn-shadow-lg),
    0 0 0 1px rgba(13,148,136,.3);
}

/* ── Section background transition ── */
.mn-section {
  transition: background 300ms ease;
}

/* ── FAQ item open state ── */
.mn-faq-item {
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.mn-faq-item.open {
  box-shadow: 0 0 0 1px var(--mn-teal), var(--mn-shadow-sm);
}

/* ── Toast entrance (already defined but re-affirmed) ── */
@media (prefers-reduced-motion: reduce) {
  .mn-toast           { animation: none !important; }
  .mn-modal-backdrop  { animation: none !important; }
  .mn-modal           { animation: none !important; }
  .mn-success-icon    { animation: none !important; }
}

/* ── Skeleton shimmer: performance-safe ── */
.mn-skeleton,
.mn-skel-card-img,
.mn-skeleton-card-img {
  will-change: background-position;
}

/* ── Reduced motion: disable all transitions ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* But keep CSS transitions that are purely visual and expected */
  .mn-btn,
  .mn-input,
  .mn-select,
  .mn-textarea {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PART 6 — FINAL QA PASS
   Visual consistency, WCAG AA accessibility, RTL, performance.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Global focus ring — WCAG AA ── */
:focus-visible {
  outline: 2px solid var(--mn-teal);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Remove :focus outline for mouse (keep for keyboard) */
:focus:not(:focus-visible) { outline: none; }

/* ── Image lazy loading fade-in ── */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 300ms ease;
}
img[loading="lazy"].mn-loaded { opacity: 1; }

/* Trigger via JS IntersectionObserver — or auto on load */
img { transition: opacity 300ms ease; }

/* ── Smooth section dividers ── */
.mn-divider {
  border: none;
  border-top: 1px solid var(--mn-border);
  margin-block: var(--mn-space-6);
}

/* ── Consistent link hover across prose ── */
.mn-prose a {
  color: var(--mn-teal);
  text-decoration: underline;
  text-decoration-color: rgba(13,148,136,.4);
  transition: text-decoration-color var(--mn-duration-base) ease;
}
.mn-prose a:hover { text-decoration-color: var(--mn-teal); }

/* ── RTL logical properties audit ── */
[dir="rtl"] .rtl-flip        { transform: scaleX(-1); }
[dir="rtl"] .mn-btn          { direction: rtl; }
[dir="rtl"] .mn-field-wrap   { direction: rtl; }
[dir="rtl"] .mn-field-icon-lead  { left: auto; right: 14px; }
[dir="rtl"] .mn-field-icon-trail { right: auto; left: 14px; }
[dir="rtl"] .mn-select {
  background-position: left 12px center;
  padding-left: 42px;
  padding-right: 16px;
}

/* ── Consistent card radius everywhere ── */
.mn-card,
.mn-doctor-card-v2,
.mn-review-card,
.mn-article-card,
.mn-category-card,
.mn-appt-card,
.mn-stat-card,
.mn-skel-card {
  border-radius: var(--mn-radius-card);
}

/* ── Consistent shadow depth hierarchy ── */
.mn-card-outlined:hover  { box-shadow: var(--mn-shadow-sm); }
.mn-card:hover           { box-shadow: var(--mn-shadow-md); }
.mn-card-lift:hover      { box-shadow: var(--mn-shadow-lg); }

/* ── Button consistency: ensure all variants have cursor pointer ── */
.mn-btn,
[class*="mn-btn-"] { cursor: pointer; }

/* ── Toast stack mobile ── */
@media (max-width: 479px) {
  .mn-toast-stack {
    bottom: var(--mn-space-4);
    right: var(--mn-space-4);
    left: var(--mn-space-4);
    width: auto;
    max-width: none;
  }
}

/* ── Modal: trap content overflow on mobile ── */
@media (max-width: 639px) {
  .mn-modal {
    margin-inline: var(--mn-space-4);
    max-height: 92vh;
  }
  .mn-modal-head,
  .mn-modal-body,
  .mn-modal-foot { padding-inline: var(--mn-space-5); }
}

/* ── Table mobile: hide less important cols ── */
@media (max-width: 639px) {
  .mn-table-hide-mobile { display: none !important; }
}

/* ── Performance: contain layout for heavy cards ── */
.mn-doctor-card-v2,
.mn-article-card,
.mn-pharmacy-card {
  contain: layout style;
}

/* ── Prevent FOUC on reveal elements — show if JS disabled ── */
.mn-reveal,
.mn-reveal-item {
  /* Will be overridden by GSAP but default is visible for no-JS */
}

/* ── Accessible color contrast override for muted text on light bg ── */
/* mn-text-muted (#94A3B8) on white gives ~3.1:1 — fine for large text/placeholders */
/* For body text we use mn-text-secondary (#475569) which gives 5.9:1 ✓ */

/* ── Print styles — hide animations, nav, etc. ── */
@media print {
  .mn-navbar,
  .mn-nav-drawer,
  .mn-toast-stack,
  .mn-modal-backdrop,
  #mn-progress-bar,
  .mn-hero-scroll,
  .mn-fav-btn,
  .vd-fav-btn,
  .mn-page-loader {
    display: none !important;
  }

  body { background: white !important; }
  .mn-card, .mn-doctor-card-v2 { box-shadow: none !important; border: 1px solid #e2e8f0 !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 11px; color: #475569; }
}

/* ── Smooth scrollbar for Webkit (complementary to Lenis) ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--mn-gray-50); }
::-webkit-scrollbar-thumb { background: var(--mn-gray-200); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--mn-gray-400); }

/* ── Selection color ── */
::selection {
  background: rgba(13,148,136,.18);
  color: var(--mn-navy);
}