/* ============================================================
   Datly Design System — Modern UI Layer
   Overrides KTUI with a refined, consistent design language
   Supports light & dark modes via CSS custom properties
   ============================================================ */

/* ── CSS Custom Properties ──────────────────────────────── */
:root,
html[data-kt-theme-mode="light"] {
  --dl-ink: #0a1b3d;
  --dl-ink-2: #3a4b6e;
  --dl-ink-3: #6b7b98;
  --dl-line: #e3e8f2;
  --dl-line-2: #eef2f9;
  --dl-bg: #ffffff;
  --dl-bg-soft: #f6f8fc;
  --dl-bg-tint: #eef3ff;
  --dl-surface: #ffffff;
  --dl-surface-hover: #f9fafb;
  --dl-blue: #1b4dff;
  --dl-blue-2: #4f75ff;
  --dl-blue-deep: #0832c4;
  --dl-mint: #19c7a0;
  --dl-mint-soft: #e8fbf4;
  --dl-coral: #ff7a59;
  --dl-coral-soft: #ffefe9;
  --dl-amber: #ffb13d;
  --dl-amber-soft: #fff5e0;
  --dl-indigo: #7a5bff;
  --dl-indigo-soft: #eceaff;
  --dl-sky: #0284c7;
  --dl-sky-soft: #e0f2fe;
  --dl-red: #ef4444;
  --dl-red-soft: #fef2f2;
  --dl-green: #22c55e;
  --dl-green-soft: #f0fdf4;
  --dl-yellow: #eab308;
  --dl-yellow-soft: #fefce8;
  --dl-maxw: 1280px;
  --dl-r-sm: 8px;
  --dl-r: 12px;
  --dl-r-lg: 16px;
  --dl-r-xl: 22px;
  --dl-r-2xl: 28px;
  --dl-shadow-sm: 0 1px 2px rgba(10, 27, 61, 0.04), 0 2px 6px rgba(10, 27, 61, 0.04);
  --dl-shadow: 0 1px 2px rgba(10, 27, 61, 0.04), 0 12px 24px -8px rgba(10, 27, 61, 0.1), 0 32px 60px -20px rgba(10, 27, 61, 0.14);
  --dl-shadow-lg: 0 1px 2px rgba(10, 27, 61, 0.04), 0 18px 38px -10px rgba(10, 27, 61, 0.12), 0 50px 90px -20px rgba(10, 27, 61, 0.18);
  --dl-shadow-inset: inset 0 1px 2px rgba(10, 27, 61, 0.04);
  --dl-ring: 0 0 0 3px rgba(27, 77, 255, 0.15);
  --dl-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --dl-transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --dl-font: 'Inter', system-ui, -apple-system, sans-serif;
}

html.dark,
html[data-kt-theme-mode="dark"] {
  --dl-ink: #f1f5f9;
  --dl-ink-2: #cbd5e1;
  --dl-ink-3: #94a3b8;
  --dl-line: #1e293b;
  --dl-line-2: #162032;
  --dl-bg: #0b1120;
  --dl-bg-soft: #0f1729;
  --dl-bg-tint: #131d35;
  --dl-surface: #111827;
  --dl-surface-hover: #1a2332;
  --dl-blue: #4f75ff;
  --dl-blue-2: #6b8aff;
  --dl-blue-deep: #3a5ce6;
  --dl-mint: #19c7a0;
  --dl-mint-soft: #0d2a24;
  --dl-coral: #ff7a59;
  --dl-coral-soft: #2a1510;
  --dl-amber: #ffb13d;
  --dl-amber-soft: #2a1f0a;
  --dl-indigo: #8b7aff;
  --dl-indigo-soft: #1a1530;
  --dl-sky: #38bdf8;
  --dl-sky-soft: #0c1f2e;
  --dl-red: #f87171;
  --dl-red-soft: #2a0f0f;
  --dl-green: #4ade80;
  --dl-green-soft: #0f2a17;
  --dl-yellow: #facc15;
  --dl-yellow-soft: #2a2408;
  --dl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
  --dl-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 12px 24px -8px rgba(0, 0, 0, 0.3), 0 32px 60px -20px rgba(0, 0, 0, 0.35);
  --dl-shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.2), 0 18px 38px -10px rgba(0, 0, 0, 0.3), 0 50px 90px -20px rgba(0, 0, 0, 0.4);
  --dl-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.2);
  --dl-ring: 0 0 0 3px rgba(79, 117, 255, 0.25);

  /* Re-align KTUI/shadcn base tokens with the Datly palette so the page
     background, cards and borders match the sidebar/header in dark mode
     (otherwise there's a visible color seam between them). */
  --background: var(--dl-bg);
  --card: var(--dl-surface);
  --popover: var(--dl-surface);
  --border: var(--dl-line);
}

/* ── Base resets ────────────────────────────────────────── */
* {
  font-family: var(--dl-font);
}

a {
  color: var(--dl-blue);
  text-decoration: none;
  transition: color var(--dl-transition);
}

a:hover {
  color: var(--dl-blue-deep);
}

/* ── Scroll reveal ──────────────────────────────────────── */
.dl-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.dl-reveal.dl-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   CARDS
   ============================================================ */
.dl-card {
  background: var(--dl-surface);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-xl);
  box-shadow: var(--dl-shadow-sm);
  transition: box-shadow var(--dl-transition), transform var(--dl-transition), border-color var(--dl-transition);
  overflow: hidden;
}

.dl-card:hover {
  box-shadow: var(--dl-shadow);
  border-color: transparent;
}

.dl-card-header {
  padding: 20px 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dl-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--dl-ink);
  letter-spacing: -0.01em;
  margin: 0;
}

.dl-card-subtitle {
  font-size: 13px;
  color: var(--dl-ink-3);
  margin: 0;
}

.dl-card-body {
  padding: 20px 24px;
}

.dl-card-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--dl-line);
  background: var(--dl-bg-soft);
}

/* Override KTUI cards */
.kt-card.dl-card {
  background: var(--dl-surface);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-xl);
  box-shadow: var(--dl-shadow-sm);
}

.kt-card.dl-card .kt-card-header {
  padding: 20px 24px 0;
}

.kt-card.dl-card .kt-card-content {
  padding: 20px 24px;
}

/* ============================================================
   STAT CARDS (small-box replacement)
   ============================================================ */
.dl-stat {
  background: var(--dl-surface);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-xl);
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: var(--dl-shadow-sm);
  transition: transform var(--dl-transition), box-shadow var(--dl-transition);
  position: relative;
  overflow: hidden;
}

.dl-stat::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  opacity: 0.06;
  transition: opacity var(--dl-transition-slow);
}

/* Accent line that sweeps in from the left on hover */
.dl-stat::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--dl-r-xl) var(--dl-r-xl) 0 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dl-transition-slow);
}

.dl-stat:hover {
  border-color: var(--dl-line-2);
}

.dl-stat:hover::before {
  opacity: 0.12;
}

.dl-stat:hover::after {
  transform: scaleX(1);
}

.dl-stat:hover .dl-stat-icon {
  transform: scale(1.08);
}

.dl-stat--info::before, .dl-stat--info::after { background: var(--dl-blue); }
.dl-stat--success::before, .dl-stat--success::after { background: var(--dl-green); }
.dl-stat--warning::before, .dl-stat--warning::after { background: var(--dl-amber); }
.dl-stat--danger::before, .dl-stat--danger::after { background: var(--dl-red); }
.dl-stat--mint::before, .dl-stat--mint::after { background: var(--dl-mint); }

.dl-stat--info::after { background: linear-gradient(90deg, var(--dl-blue), var(--dl-blue-2)); }
.dl-stat--success::after { background: linear-gradient(90deg, var(--dl-green), #4ade80); }
.dl-stat--warning::after { background: linear-gradient(90deg, var(--dl-amber), #ffc56b); }
.dl-stat--danger::after { background: linear-gradient(90deg, var(--dl-red), #ff8a8a); }
.dl-stat--mint::after { background: linear-gradient(90deg, var(--dl-mint), #5ee0c4); }

.dl-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--dl-r-lg);
  display: grid;
  place-items: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: transform var(--dl-transition);
}

.dl-stat--info .dl-stat-icon { background: var(--dl-bg-tint); color: var(--dl-blue); }
.dl-stat--success .dl-stat-icon { background: var(--dl-green-soft); color: var(--dl-green); }
.dl-stat--warning .dl-stat-icon { background: var(--dl-amber-soft); color: var(--dl-amber); }
.dl-stat--danger .dl-stat-icon { background: var(--dl-red-soft); color: var(--dl-red); }
.dl-stat--mint .dl-stat-icon { background: var(--dl-mint-soft); color: var(--dl-mint); }

.dl-stat-content {
  flex: 1;
  min-width: 0;
}

.dl-stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--dl-ink);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 4px;
}

.dl-stat-label {
  font-size: 13px;
  color: var(--dl-ink-3);
  font-weight: 500;
}

.dl-stat-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--dl-blue);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  transition: gap var(--dl-transition);
}

.dl-stat-link:hover {
  gap: 8px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border-radius: var(--dl-r);
  font-size: 14px;
  font-weight: 600;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--dl-transition);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}

.dl-btn:hover {
  transform: translateY(-1px);
}

.dl-btn:active {
  transform: translateY(0);
}

.dl-btn--primary {
  background: var(--dl-blue);
  color: #fff;
  box-shadow: 0 4px 12px -2px rgba(27, 77, 255, 0.35);
}

.dl-btn--primary:hover {
  background: var(--dl-blue-deep);
  color: #fff;
  box-shadow: 0 6px 16px -4px rgba(27, 77, 255, 0.45);
}

.dl-btn--secondary {
  background: var(--dl-bg-soft);
  color: var(--dl-ink);
  border-color: var(--dl-line);
}

.dl-btn--secondary:hover {
  background: var(--dl-surface-hover);
  border-color: var(--dl-ink-3);
}

.dl-btn--ghost {
  background: transparent;
  color: var(--dl-ink-2);
}

.dl-btn--ghost:hover {
  background: var(--dl-bg-soft);
  color: var(--dl-ink);
}

.dl-btn--danger {
  background: var(--dl-red);
  color: #fff;
}

.dl-btn--danger:hover {
  background: #dc2626;
  color: #fff;
}

.dl-btn--success {
  background: var(--dl-green);
  color: #fff;
}

.dl-btn--success:hover {
  background: #16a34a;
  color: #fff;
}

.dl-btn--sm {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
}

.dl-btn--lg {
  height: 48px;
  padding: 0 28px;
  font-size: 15px;
}

.dl-btn--icon {
  width: 40px;
  padding: 0;
}

.dl-btn--icon.dl-btn--sm {
  width: 32px;
}

.dl-btn--full {
  width: 100%;
}

.dl-btn:disabled,
.dl-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Override KTUI buttons — apply to ALL kt-btn, not just .dl-btn */
.kt-btn {
  border-radius: var(--dl-r);
  font-weight: 600;
  transition: all var(--dl-transition);
}

.kt-btn:not(.kt-btn-icon):not(.kt-btn-xs):not(.kt-btn-sm):not(.kt-btn-lg) {
  height: 40px;
  padding: 0 20px;
}

.kt-btn-primary {
  background: var(--dl-blue) !important;
  color: #fff !important;
  border-color: var(--dl-blue) !important;
  box-shadow: 0 4px 12px -2px rgba(27, 77, 255, 0.35);
}

.kt-btn-primary:hover {
  background: var(--dl-blue-deep) !important;
  color: #fff !important;
  border-color: var(--dl-blue-deep) !important;
  box-shadow: 0 6px 16px -4px rgba(27, 77, 255, 0.45);
}

.kt-btn-primary .ki-filled,
.kt-btn-primary .ki-outline,
.kt-btn-primary span,
.kt-btn-primary i,
.kt-btn-primary svg {
  color: #fff !important;
  fill: #fff !important;
}

.kt-btn-outline {
  background: transparent !important;
  color: var(--dl-ink) !important;
  border-color: var(--dl-line) !important;
}

.kt-btn-outline:hover {
  background: var(--dl-bg-soft) !important;
  border-color: var(--dl-ink-3) !important;
}

.kt-btn-outline .ki-filled,
.kt-btn-outline .ki-outline,
.kt-btn-outline span,
.kt-btn-outline i,
.kt-btn-outline svg {
  color: var(--dl-ink) !important;
  fill: var(--dl-ink) !important;
}

.kt-btn-outline.kt-btn-danger {
  color: var(--dl-red) !important;
  border-color: var(--dl-red) !important;
}

.kt-btn-outline.kt-btn-danger:hover {
  background: var(--dl-red-soft) !important;
}

.kt-btn-outline.kt-btn-danger span,
.kt-btn-outline.kt-btn-danger i,
.kt-btn-outline.kt-btn-danger svg {
  color: var(--dl-red) !important;
}

.kt-btn-outline.kt-btn-success {
  color: var(--dl-green) !important;
  border-color: var(--dl-green) !important;
}

.kt-btn-outline.kt-btn-success span,
.kt-btn-outline.kt-btn-success i,
.kt-btn-outline.kt-btn-success svg {
  color: var(--dl-green) !important;
}

/* ============================================================
   FORM INPUTS
   ============================================================ */
.dl-input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1.5px solid var(--dl-line);
  border-radius: var(--dl-r);
  background: var(--dl-surface);
  color: var(--dl-ink);
  font-size: 14px;
  transition: border-color var(--dl-transition), box-shadow var(--dl-transition);
  outline: none;
}

.dl-input::placeholder {
  color: var(--dl-ink-3);
}

.dl-input:hover {
  border-color: var(--dl-ink-3);
}

.dl-input:focus {
  border-color: var(--dl-blue);
  box-shadow: var(--dl-ring);
}

.dl-input:disabled {
  background: var(--dl-bg-soft);
  opacity: 0.6;
  cursor: not-allowed;
}

.dl-input--sm {
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
}

.dl-input--lg {
  height: 48px;
  padding: 0 16px;
  font-size: 15px;
}

.dl-input--error {
  border-color: var(--dl-red);
}

.dl-input--error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

textarea.dl-input {
  height: auto;
  min-height: 100px;
  padding: 12px 14px;
  resize: vertical;
}

select.dl-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7b98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

/* Override KTUI inputs */
.kt-input.dl-input {
  border: 1.5px solid var(--dl-line);
  border-radius: var(--dl-r);
  height: 42px;
}

.dl-form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--dl-ink);
  margin-bottom: 6px;
}

.dl-form-hint {
  font-size: 12px;
  color: var(--dl-ink-3);
  margin-top: 4px;
}

.dl-form-error {
  font-size: 12px;
  color: var(--dl-red);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ============================================================
   TABLES
   ============================================================ */
.dl-table-wrap {
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-xl);
  overflow: hidden;
  background: var(--dl-surface);
}

.dl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.dl-table thead {
  background: var(--dl-bg-soft);
}

.dl-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--dl-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--dl-line);
}

.dl-table td {
  padding: 14px 16px;
  color: var(--dl-ink);
  border-bottom: 1px solid var(--dl-line);
  vertical-align: middle;
}

.dl-table tbody tr {
  transition: background var(--dl-transition);
}

.dl-table tbody tr:hover {
  background: var(--dl-bg-soft);
}

.dl-table tbody tr:last-child td {
  border-bottom: none;
}

/* ============================================================
   BADGES / TAGS
   ============================================================ */
.dl-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.dl-badge--info { background: var(--dl-bg-tint); color: var(--dl-blue); }
.dl-badge--success { background: var(--dl-green-soft); color: var(--dl-green); }
.dl-badge--warning { background: var(--dl-amber-soft); color: var(--dl-amber); }
.dl-badge--danger { background: var(--dl-red-soft); color: var(--dl-red); }
.dl-badge--mint { background: var(--dl-mint-soft); color: var(--dl-mint); }
.dl-badge--neutral { background: var(--dl-bg-soft); color: var(--dl-ink-2); border: 1px solid var(--dl-line); }

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.dl-progress {
  width: 100%;
  height: 8px;
  background: var(--dl-bg-soft);
  border-radius: 999px;
  overflow: hidden;
}

.dl-progress-bar {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.dl-progress-bar--info { background: var(--dl-blue); }
.dl-progress-bar--success { background: var(--dl-green); }
.dl-progress-bar--warning { background: var(--dl-amber); }
.dl-progress-bar--danger { background: var(--dl-red); }

/* ============================================================
   AVATAR
   ============================================================ */
.dl-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}

.dl-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.dl-avatar--lg { width: 48px; height: 48px; font-size: 18px; }
.dl-avatar--xl { width: 64px; height: 64px; font-size: 24px; }

.dl-avatar--blue { background: linear-gradient(135deg, var(--dl-blue), var(--dl-blue-2)); }
.dl-avatar--mint { background: linear-gradient(135deg, var(--dl-mint), #2dd4a8); }
.dl-avatar--coral { background: linear-gradient(135deg, var(--dl-coral), #ff9a7a); }
.dl-avatar--amber { background: linear-gradient(135deg, var(--dl-amber), #ffc56b); }
.dl-avatar--indigo { background: linear-gradient(135deg, var(--dl-indigo), #a89aff); }

.dl-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.dl-empty {
  text-align: center;
  padding: 60px 24px;
}

.dl-empty-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--dl-bg-soft);
  display: grid;
  place-items: center;
  font-size: 32px;
  color: var(--dl-ink-3);
}

.dl-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--dl-ink);
  margin: 0 0 8px;
}

.dl-empty-desc {
  font-size: 14px;
  color: var(--dl-ink-3);
  margin: 0 0 24px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   MODAL / DIALOG
   ============================================================ */

/* KTUI modals (.kt-modal, used by confirm dialogs, the generic
   information dialog, etc.) toggle a plain "open" class and rely on
   `transitionDuration` to know when to flip display:none — without a
   transition they pop in/out instantly. Give them the same fade + scale
   treatment as our custom .dl-modal-overlay. */
.kt-modal {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.kt-modal.open {
  opacity: 1;
}

.kt-modal .kt-modal-content {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  transform: scale(0.95) translateY(16px);
  opacity: 0;
  border-radius: var(--dl-r-2xl);
  box-shadow: var(--dl-shadow-lg);
}

.kt-modal.open .kt-modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.dl-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.dl-modal-overlay.dl-open {
  opacity: 1;
  visibility: visible;
}

.dl-modal {
  background: var(--dl-surface);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-2xl);
  box-shadow: var(--dl-shadow-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dl-modal-overlay.dl-open .dl-modal {
  transform: scale(1) translateY(0);
}

.dl-modal-header {
  padding: 24px 24px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.dl-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--dl-ink);
  margin: 0;
}

.dl-modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--dl-r-sm);
  border: none;
  background: transparent;
  color: var(--dl-ink-3);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--dl-transition), color var(--dl-transition);
}

.dl-modal-close:hover {
  background: var(--dl-bg-soft);
  color: var(--dl-ink);
}

.dl-modal-body {
  padding: 16px 24px;
}

.dl-modal-footer {
  padding: 16px 24px 24px;
  display: flex;
  gap: 12px;
}

/* ============================================================
   TOAST / NOTIFICATION
   ============================================================ */
.dl-toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.dl-toast {
  pointer-events: auto;
  background: var(--dl-surface);
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-lg);
  box-shadow: var(--dl-shadow);
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 320px;
  max-width: 420px;
  animation: dl-toast-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.dl-toast.dl-toast-out {
  animation: dl-toast-out 0.25s ease forwards;
}

.dl-toast-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 12px;
}

.dl-toast--success .dl-toast-icon { background: var(--dl-green-soft); color: var(--dl-green); }
.dl-toast--error .dl-toast-icon { background: var(--dl-red-soft); color: var(--dl-red); }
.dl-toast--warning .dl-toast-icon { background: var(--dl-amber-soft); color: var(--dl-amber); }
.dl-toast--info .dl-toast-icon { background: var(--dl-bg-tint); color: var(--dl-blue); }

.dl-toast-content {
  flex: 1;
}

.dl-toast-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--dl-ink);
  margin: 0 0 2px;
}

.dl-toast-message {
  font-size: 13px;
  color: var(--dl-ink-3);
  margin: 0;
}

@keyframes dl-toast-in {
  from { opacity: 0; transform: translateX(40px) scale(0.95); }
  to { opacity: 1; transform: none; }
}

@keyframes dl-toast-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateX(40px) scale(0.95); }
}

/* ============================================================
    SIDEBAR MODERN OVERRIDES
    ============================================================ */

/* Override the demo1 sidebar width variables with higher specificity
   (body.demo1.dl-sidebar > .demo1) so the collapsed state actually
   shrinks the sidebar instead of just hiding the labels. */
body.demo1.dl-sidebar {
  --sidebar-width: 260px;
  --sidebar-default-width: 260px;
  --sidebar-width-collapse: 76px;
}

body.demo1.dl-sidebar.kt-sidebar-collapse {
  --sidebar-width: var(--sidebar-width-collapse);
}

/* Disable demo1's hover-to-expand behaviour while collapsed: our menu
   labels stay hidden, so an expanding sidebar on hover would look broken. */
body.demo1.dl-sidebar.kt-sidebar-collapse .kt-sidebar,
body.demo1.dl-sidebar.kt-sidebar-collapse .kt-sidebar:hover:not(.animating) {
  width: var(--sidebar-width-collapse);
}

.dl-sidebar .kt-sidebar {
  background: var(--dl-bg);
  border-right: 1px solid var(--dl-line);
  display: flex;
  flex-direction: column;
}

.dl-sidebar .kt-sidebar-header {
  height: var(--header-height);
  padding: 0 20px;
  border-bottom: 1px solid var(--dl-line);
  flex-shrink: 0;
}

.dl-sidebar .kt-sidebar-content {
  padding: 12px 12px 12px 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.dl-sidebar #sidebar_scrollable {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  height: auto !important;
}

/* Logo swap between expanded (wordmark) and collapsed (icon-only) */
.dl-sidebar-logo-collapsed {
  display: none;
}

.dl-sidebar.kt-sidebar-collapse .kt-sidebar-header {
  padding: 0 12px;
  justify-content: center;
}

.dl-sidebar.kt-sidebar-collapse .dl-sidebar-logo-full {
  display: none;
}

.dl-sidebar.kt-sidebar-collapse .dl-sidebar-logo-collapsed {
  display: flex;
}

.dl-sidebar .kt-menu {
  gap: 2px;
}

.dl-sidebar .kt-menu-link {
  border-radius: var(--dl-r);
  padding: 9px 12px;
  transition: all var(--dl-transition);
  color: var(--dl-ink-2);
  gap: 12px;
}

.dl-sidebar .kt-menu-link:hover {
  background: var(--dl-bg-soft);
  color: var(--dl-ink);
}

.dl-sidebar .kt-menu-item.active > .kt-menu-link,
.dl-sidebar .kt-menu-item.show > .kt-menu-link {
  background: var(--dl-bg-tint);
  color: var(--dl-blue);
}

.dl-sidebar .kt-menu-item.active > .kt-menu-link .kt-menu-title,
.dl-sidebar .kt-menu-item.show > .kt-menu-link .kt-menu-title {
  color: var(--dl-blue);
  font-weight: 600;
}

.dl-sidebar .kt-menu-item.active > .kt-menu-link .kt-menu-icon,
.dl-sidebar .kt-menu-item.show > .kt-menu-link .kt-menu-icon {
  color: var(--dl-blue);
}

.dl-sidebar .kt-menu-icon {
  color: var(--dl-ink-3);
  width: 22px;
  transition: color var(--dl-transition);
}

.dl-sidebar .kt-menu-title {
  font-size: 13.5px;
  letter-spacing: -0.01em;
  transition: color var(--dl-transition);
}

.dl-sidebar .kt-menu-accordion {
  padding-left: 34px;
  margin-top: 2px;
  gap: 2px;
}

.dl-sidebar .kt-menu-accordion::before {
  left: 14px;
  border-color: var(--dl-line);
}

.dl-sidebar .kt-menu-accordion .kt-menu-link {
  padding: 7px 12px;
  gap: 10px;
}

.dl-sidebar .kt-menu-bullet::before {
  background: var(--dl-ink-3);
  transition: background var(--dl-transition);
}

.dl-sidebar .kt-menu-item.active .kt-menu-bullet::before {
  background: var(--dl-blue);
}

.dl-sidebar .kt-menu-arrow {
  color: var(--dl-ink-3);
  transition: transform var(--dl-transition), color var(--dl-transition);
}

.dl-sidebar .kt-sidebar-footer {
  height: 64px;
  flex-shrink: 0;
  padding: 0 16px;
  border-top: 1px solid var(--dl-line);
  background: var(--dl-bg-soft);
}

.dl-sidebar .kt-sidebar-footer .dl-avatar {
  box-shadow: 0 0 0 2px var(--dl-bg), 0 0 0 4px var(--dl-line);
}

/* Collapsed sidebar */
.dl-sidebar.kt-sidebar-collapse .kt-menu-title,
.dl-sidebar.kt-sidebar-collapse .kt-menu-arrow,
.dl-sidebar.kt-sidebar-collapse .kt-sidebar-footer .flex-col {
  display: none;
}

.dl-sidebar.kt-sidebar-collapse .kt-menu-accordion {
  display: none;
}

.dl-sidebar.kt-sidebar-collapse .kt-menu-link {
  justify-content: center;
  padding-inline: 0;
  gap: 0;
}

.dl-sidebar.kt-sidebar-collapse .kt-sidebar-footer {
  justify-content: center;
  padding: 0;
}

/* ============================================================
   HEADER MODERN OVERRIDES
   ============================================================ */
.dl-header .kt-header {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--dl-line);
}

html.dark .dl-header .kt-header,
html[data-kt-theme-mode="dark"] .dl-header .kt-header {
  background: rgba(11, 17, 32, 0.8);
}

/* ============================================================
   FOOTER — visually align with the sidebar footer bar
   ============================================================ */
.kt-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--dl-line);
  background: var(--dl-bg-soft);
}

/* ============================================================
   WIZARD / STEPS
   ============================================================ */
.dl-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 32px;
}

.dl-step {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  position: relative;
}

.dl-step:not(:last-child)::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--dl-line);
  margin: 0 12px;
}

.dl-step--completed:not(:last-child)::after {
  background: var(--dl-blue);
}

.dl-step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid var(--dl-line);
  color: var(--dl-ink-3);
  background: var(--dl-surface);
  flex-shrink: 0;
  transition: all var(--dl-transition);
}

.dl-step--active .dl-step-number {
  border-color: var(--dl-blue);
  color: var(--dl-blue);
  background: var(--dl-bg-tint);
}

.dl-step--completed .dl-step-number {
  border-color: var(--dl-blue);
  background: var(--dl-blue);
  color: #fff;
}

.dl-step-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--dl-ink-3);
  white-space: nowrap;
}

.dl-step--active .dl-step-label {
  color: var(--dl-ink);
  font-weight: 600;
}

.dl-step--completed .dl-step-label {
  color: var(--dl-ink-2);
}

/* ============================================================
   CHECKBOX / TOGGLE
   ============================================================ */
.dl-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--dl-ink);
}

.dl-checkbox input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--dl-line);
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--dl-transition);
  position: relative;
  flex-shrink: 0;
}

.dl-checkbox input[type="checkbox"]:checked {
  background: var(--dl-blue);
  border-color: var(--dl-blue);
}

.dl-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.dl-checkbox input[type="checkbox"]:focus {
  box-shadow: var(--dl-ring);
}

/* ============================================================
   SKELETON LOADING
   ============================================================ */
.dl-skeleton {
  background: var(--dl-bg-soft);
  border-radius: var(--dl-r);
  position: relative;
  overflow: hidden;
}

.dl-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: dl-skeleton-shimmer 1.5s infinite;
}

html.dark .dl-skeleton::after,
html[data-kt-theme-mode="dark"] .dl-skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
}

@keyframes dl-skeleton-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.dl-skeleton--text {
  height: 14px;
  margin-bottom: 8px;
}

.dl-skeleton--text:last-child {
  width: 60%;
}

.dl-skeleton--heading {
  height: 24px;
  width: 40%;
  margin-bottom: 16px;
}

.dl-skeleton--avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.dl-skeleton--card {
  height: 120px;
  border-radius: var(--dl-r-xl);
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.dl-section-header {
  margin-bottom: 24px;
}

.dl-section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--dl-ink);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}

.dl-section-desc {
  font-size: 14px;
  color: var(--dl-ink-3);
  margin: 0;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.dl-text-muted { color: var(--dl-ink-3); }
.dl-text-secondary { color: var(--dl-ink-2); }
.dl-text-primary { color: var(--dl-blue); }
.dl-text-success { color: var(--dl-green); }
.dl-text-danger { color: var(--dl-red); }
.dl-text-warning { color: var(--dl-amber); }

.dl-bg-muted { background: var(--dl-bg-soft); }
.dl-bg-tint { background: var(--dl-bg-tint); }

.dl-border { border: 1px solid var(--dl-line); }
.dl-border-b { border-bottom: 1px solid var(--dl-line); }
.dl-border-t { border-top: 1px solid var(--dl-line); }

.dl-rounded { border-radius: var(--dl-r); }
.dl-rounded-lg { border-radius: var(--dl-r-lg); }
.dl-rounded-xl { border-radius: var(--dl-r-xl); }

.dl-shadow-sm { box-shadow: var(--dl-shadow-sm); }
.dl-shadow { box-shadow: var(--dl-shadow); }
.dl-shadow-lg { box-shadow: var(--dl-shadow-lg); }

.dl-transition { transition: all var(--dl-transition); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes dl-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dl-fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes dl-fade-in-down {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: none; }
}

@keyframes dl-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: none; }
}

@keyframes dl-slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.dl-animate-in { animation: dl-fade-in 0.3s ease; }
.dl-animate-in-up { animation: dl-fade-in-up 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.dl-animate-in-down { animation: dl-fade-in-down 0.35s ease; }
.dl-animate-scale { animation: dl-scale-in 0.25s cubic-bezier(0.16, 1, 0.3, 1); }

/* ============================================================
   ICON BADGES (page/section headers)
   ============================================================ */
.dl-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: var(--dl-r-lg);
  display: grid;
  place-items: center;
  font-size: 19px;
  flex-shrink: 0;
  background: var(--dl-bg-tint);
  color: var(--dl-blue);
}

.dl-icon-badge--success { background: var(--dl-green-soft); color: var(--dl-green); }

/* ============================================================
   WIDGET DOMAINS PAGE
   ============================================================ */
.dl-domain-form {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--dl-line);
}

.dl-domain-form .kt-input {
  flex: 1 1 240px;
}

.dl-domain-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dl-domain-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r-lg);
  background: var(--dl-surface);
  overflow: hidden;
  max-height: 200px;
  transition: border-color var(--dl-transition), box-shadow var(--dl-transition), transform var(--dl-transition),
    opacity 0.25s ease, max-height 0.25s ease, padding 0.25s ease, margin 0.25s ease;
}

.dl-domain-row:hover {
  border-color: var(--dl-line-2);
  box-shadow: var(--dl-shadow-sm);
  transform: translateX(2px);
}

.dl-domain-row-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.dl-domain-row-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--dl-r);
  display: grid;
  place-items: center;
  background: var(--dl-green-soft);
  color: var(--dl-green);
  font-size: 16px;
  flex-shrink: 0;
}

.dl-domain-row-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--dl-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dl-domain-row-delete {
  color: var(--dl-ink-3);
  transition: color var(--dl-transition), background var(--dl-transition);
}

.dl-domain-row-delete:hover {
  color: var(--dl-red);
  background: var(--dl-red-soft);
}

.dl-row-leaving {
  opacity: 0;
  transform: scale(0.97);
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-width: 0 !important;
}

.dl-domain-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 48px 24px;
  color: var(--dl-ink-3);
}

.dl-domain-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--dl-bg-tint);
  color: var(--dl-blue);
  font-size: 24px;
}

.dl-domain-empty p {
  font-size: 14px;
  max-width: 360px;
  margin: 0;
}

/* ============================================================
   VIEW TOGGLE (table/calendar segmented control)
   ============================================================ */
.dl-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r);
  background: var(--dl-bg-soft);
}

.dl-view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: calc(var(--dl-r) - 3px);
  background: transparent;
  color: var(--dl-ink-3);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dl-transition);
}

.dl-view-toggle-btn:hover {
  color: var(--dl-ink);
}

.dl-view-toggle-btn.active {
  background: var(--dl-surface);
  color: var(--dl-blue);
  box-shadow: var(--dl-shadow-sm);
}

/* ============================================================
   LANGUAGE SWITCH (compact segmented control)
   ============================================================ */
.dl-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-r);
  background: var(--dl-bg-soft);
}

.dl-lang-switch-btn {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: calc(var(--dl-r) - 3px);
  color: var(--dl-ink-3);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--dl-transition);
}

.dl-lang-switch-btn:hover {
  color: var(--dl-ink);
}

.dl-lang-switch-btn.active {
  background: var(--dl-surface);
  color: var(--dl-blue);
  box-shadow: var(--dl-shadow-sm);
  pointer-events: none;
}

/* ============================================================
   PUBLIC PAGE (LOGIN/SIGNUP) OVERRIDES
   ============================================================ */
.dl-auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.dl-auth-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: var(--dl-bg);
}

.dl-auth-form-card {
  width: 100%;
  max-width: 400px;
}

.dl-auth-brand-side {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  background: linear-gradient(135deg, var(--dl-blue-deep), var(--dl-blue));
  color: #fff;
  overflow: hidden;
}

.dl-auth-brand-side::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 400px at 80% 20%, rgba(255,255,255,0.12), transparent 60%),
    radial-gradient(400px 300px at 20% 80%, rgba(255,255,255,0.08), transparent 60%);
}

.dl-auth-brand-side > * {
  position: relative;
  z-index: 1;
}

.dl-auth-brand-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 16px;
}

.dl-auth-brand-desc {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.85;
  margin: 0;
}

/* ============================================================
   LOGIN FEATURE CARDS
   ============================================================ */
.feature-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -8px rgba(10, 27, 61, 0.12);
}

.feature-card:hover .ki-filled {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .dl-auth-page {
    grid-template-columns: 1fr;
  }

  .dl-auth-brand-side {
    display: none;
  }
}

/* ── Large screens / 4K ───────────────────────────────── */
/* En monitores grandes (27"/32") el contenido dejaba mucho espacio sin usar; se amplía el
   contenedor de forma progresiva para aprovechar el ancho sin llegar a pantalla completa. */
@media (min-width: 1600px) {
  .kt-container-fixed {
    max-width: 1480px !important;
  }
}

@media (min-width: 1920px) {
  .kt-container-fixed {
    max-width: 1760px !important;
  }
}

@media (min-width: 2560px) {
  .kt-container-fixed {
    max-width: 2200px !important;
  }
}

@media (min-width: 3200px) {
  .kt-container-fixed {
    max-width: 2720px !important;
  }
}

.kt-container-fixed {
  max-width: var(--dl-maxw);
}

/* Nombre del titular de tarjeta: siempre en mayúsculas (como aparece en la tarjeta física). */
.dl-card-holder {
  text-transform: uppercase;
}
.dl-card-holder::placeholder {
  text-transform: none;
}

@media (max-width: 768px) {
  .dl-stat {
    padding: 16px;
  }

  .dl-stat-value {
    font-size: 24px;
  }

  .dl-card-body {
    padding: 16px;
  }

  .dl-table th,
  .dl-table td {
    padding: 10px 12px;
  }

  .dl-steps {
    flex-wrap: wrap;
    gap: 8px;
  }

  .dl-step:not(:last-child)::after {
    display: none;
  }
}

/* ── Tiles de método de pago (checkout) ─────────────────────
   Escrito en CSS plano para no depender de la compilación de
   Tailwind (las variantes has-[:checked] arbitrarias no existen
   en el bundle si no se recompila el frontend). */
.dl-pay-tile {
  position: relative;
}

.dl-pay-tile:hover {
  border-color: rgba(27, 77, 255, 0.4);
}

.dl-pay-tile:has(input:checked) {
  border: 2px solid var(--dl-blue);
  background-color: rgba(27, 77, 255, 0.1);
}

/* SweetAlert2 toasts (showToast, position "top-end"): el contenedor
   `.swal2-container` es position:fixed + inset:0 con overflow-y propio.
   Durante la animación de entrada/salida del toast su contenido excede
   por una fracción de px el viewport, lo que dispara brevemente el
   scrollbar DEL CONTENEDOR (no el de la página) en el borde derecho,
   dejando un hueco vacío hasta que el toast termina de animarse.
   heightAuto:false/scrollbarPadding:false (ver ada.core.js) evitan que
   toque html/body, pero no el overflow propio del contenedor. */
.swal2-container {
  overflow-y: hidden !important;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-fade-up {
  animation: fadeUp 0.3s ease-out forwards;
}