@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Fix Safari mobile viewport issues */
html {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  /* Fill Safari's safe-area zones (top/bottom) so they're never white.
     Defaults to the dark base; switches to light below. */
  background: #0d1b2a;
  transition: background 0.5s ease;
}
html:has(body:not(.dark)) { background: #dff0fb; }

body {
  width: 100%;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: 100dvh;
  overflow-x: hidden;
  position: relative;
}

/* ══ LIGHT MODE (default) ══════════════════════════════ */
:root {
  --bg-body:       linear-gradient(160deg, #dff0fb 0%, #d4f5f5 100%);
  --surface:       rgba(255, 255, 255, 0.15);
  --surface-2:     rgba(255, 255, 255, 0.25);
  --border:        rgba(255, 255, 255, 0.4);
  --border-hover:  rgba(255, 255, 255, 0.6);
  --text-primary:  #0d2b3e;
  --text-secondary:#4a7a96;
  --accent-from:   #1a7abf;
  --accent-to:     #0fbdbd;
  --accent-grad:   linear-gradient(135deg, #1a7abf 0%, #0fbdbd 100%);
  --accent-light:  rgba(255, 255, 255, 0.2);
  --done-text:     #8db8cc;
  --danger:        #c0392b;
  --shadow:        0 8px 32px rgba(31, 38, 135, 0.15);
  --shadow-card:   0 8px 32px rgba(31, 38, 135, 0.15);
  --radius:        14px;
  --archive-day-hover: rgba(255, 255, 255, 0.3);
  --archive-month-hover: rgba(255, 255, 255, 0.35);
  --task-hover-border: rgba(255, 255, 255, 0.6);
}

/* ══ DARK MODE ════════════════════════════════════════ */
body.dark {
  --bg-body:       linear-gradient(160deg, #0d1b2a 0%, #0a1f1f 100%);
  --surface:       rgba(255, 255, 255, 0.05);
  --surface-2:     rgba(255, 255, 255, 0.08);
  --border:        rgba(255, 255, 255, 0.1);
  --border-hover:  rgba(255, 255, 255, 0.2);
  --text-primary:  #d6eaf8;
  --text-secondary:#5fa8c8;
  --accent-from:   #1a8fd1;
  --accent-to:     #0fd4d4;
  --accent-grad:   linear-gradient(135deg, #1a8fd1 0%, #0fd4d4 100%);
  --accent-light:  rgba(255, 255, 255, 0.06);
  --done-text:     #2e6a88;
  --danger:        #e55039;
  --shadow:        0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-card:   0 8px 32px rgba(0, 0, 0, 0.4);
  --archive-day-hover:   rgba(255, 255, 255, 0.08);
  --archive-month-hover: rgba(255, 255, 255, 0.1);
  --task-hover-border:   rgba(255, 255, 255, 0.2);
}

/* ══ BASE ═══════════════════════════════════════════════ */
body {
  background: var(--bg-body);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(3rem, env(safe-area-inset-top, 3rem)) max(1rem, env(safe-area-inset-right, 1rem)) max(3rem, env(safe-area-inset-bottom, 3rem)) max(1rem, env(safe-area-inset-left, 1rem));
  color: var(--text-primary);
  transition: background 0.35s, color 0.25s;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  top: -100%; left: 0; right: 0; bottom: -100%;
  height: 300%;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(26, 143, 209, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(15, 189, 189, 0.18) 0%, transparent 50%),
    radial-gradient(circle, rgba(255,255,255,0.4) 2px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,0.3) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,0.25) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.2) 1px, transparent 1px);
  background-size: 
    100% 100%, 
    100% 100%, 
    200px 200px,
    150px 150px,
    100px 100px,
    60px 60px;
  background-position: 
    0 0, 
    0 0, 
    0 0,
    50px 50px,
    25px 25px,
    10px 10px;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  animation: starsFloat 120s linear infinite;
}

@keyframes starsFloat {
  0% { 
    background-position: 0 0, 0 0, 0 0, 50px 50px, 25px 25px, 10px 10px;
  }
  100% { 
    background-position: 0 0, 0 0, 0 -600px, 50px -550px, 25px -575px, 10px -590px;
  }
}

body.dark::before {
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(26, 143, 209, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(15, 189, 189, 0.12) 0%, transparent 50%),
    radial-gradient(circle, rgba(255,255,255,0.15) 2px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,0.12) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 
    100% 100%, 
    100% 100%, 
    200px 200px,
    150px 150px,
    100px 100px,
    60px 60px;
}

/* ══ THEME TOGGLE BUTTON ════════════════════════════════ */
.theme-toggle {
  position: fixed;
  top: max(20px, env(safe-area-inset-top, 20px));
  right: max(20px, env(safe-area-inset-right, 20px));
  left: auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--accent-grad);
  box-shadow: 0 4px 16px rgba(15, 130, 190, 0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: transform 0.18s, box-shadow 0.2s;
}

.theme-toggle:hover  { transform: scale(1.10); box-shadow: 0 6px 22px rgba(39, 174, 96, 0.45); }
.theme-toggle:active { transform: scale(0.93); }

.theme-toggle svg {
  width: 24px;
  height: 24px;
  color: #fff;
  transition: opacity 0.15s, transform 0.25s;
  position: absolute;
}

/* Light mode → show sun (switch to dark) */
.theme-toggle .icon-sun  { opacity: 1;  transform: rotate(0deg) scale(1); }
.theme-toggle .icon-moon { opacity: 0;  transform: rotate(-45deg) scale(0.6); }

/* Dark mode → show moon (switch to light) */
body.dark .theme-toggle .icon-sun  { opacity: 0;  transform: rotate(45deg) scale(0.6); }
body.dark .theme-toggle .icon-moon { opacity: 1;  transform: rotate(0deg) scale(1); }

/* ══ LOGOUT BUTTON ═══════════════════════════════════════ */
.logout-btn {
  position: fixed;
  top: max(90px, env(safe-area-inset-top, 90px));
  left: max(20px, env(safe-area-inset-left, 20px));
  right: auto;
  padding: 0.625rem 1rem;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(16px);
  color: var(--text-secondary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 100;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.logout-btn:hover {
  background: var(--accent-grad);
  border-color: var(--accent-from);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26, 143, 209, 0.35);
}

.logout-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  transition: all 0.25s;
}

.logout-btn:hover svg {
  transform: translateX(-2px);
}

/* ══ DATE BANNER ════════════════════════════════════════ */
.date-banner {
  background: var(--accent-grad);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 18px rgba(15,130,190,0.22);
}
.date-banner .day-name  { font-size: 18px; font-weight: 700; color: #fff; }
.date-banner .date-full { font-size: 13px; color: rgba(255,255,255,0.82); margin-top: 2px; }
.date-banner .live-clock { font-size: 26px; font-weight: 700; color: #fff; letter-spacing: 1px; direction: ltr; }

/* ══ HEADER ═════════════════════════════════════════════ */
header { margin-bottom: 1.5rem; }

h1 {
  font-size: 28px; font-weight: 700;
  color: var(--text-primary);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px;
}

.icon {
  width: 36px; height: 36px;
  background: var(--accent-grad);
  color: #fff; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
}

.subtitle { color: var(--text-secondary); font-size: 14px; padding-right: 46px; }

/* ══ INPUT ROW ══════════════════════════════════════════ */
.input-row { display: flex; gap: 8px; margin-bottom: 1.25rem; }

.input-row input {
  flex: 1; padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 15px; font-family: 'Inter', sans-serif;
  background: var(--surface); color: var(--text-primary);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  outline: none;
  transition: border-color 0.2s, background 0.25s;
  box-shadow: var(--shadow-card);
}
.input-row input::placeholder { color: var(--done-text); }
.input-row input:focus { border-color: var(--accent-from); }

#addBtn {
  width: 48px; height: 48px;
  background: var(--accent-grad);
  color: #fff; border: none;
  border-radius: var(--radius); font-size: 26px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 12px rgba(15,130,190,0.28);
  transition: opacity 0.15s, transform 0.1s;
  flex-shrink: 0;
}
#addBtn:hover  { opacity: 0.88; }
#addBtn:active { transform: scale(0.95); }

/* ══ TASK LIST ══════════════════════════════════════════ */
#taskList { list-style: none; display: flex; flex-direction: column; gap: 8px; }

.task-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  animation: slideIn 0.2s ease;
  transition: border-color 0.2s, background 0.25s;
}
.task-item:hover { border-color: var(--task-hover-border); }

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.task-check {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border); cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s; background: transparent;
}
.task-check.done { background: var(--accent-grad); border-color: var(--accent-from); }
.task-check.done::after { content: '✓'; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }

.task-text { flex: 1; font-size: 14px; color: var(--text-primary); line-height: 1.4; transition: color 0.15s; }
.task-text.done { color: var(--done-text); text-decoration: line-through; }

.task-time {
  font-size: 11px; color: var(--text-secondary);
  background: var(--accent-light);
  border-radius: 6px; padding: 2px 7px;
  white-space: nowrap; flex-shrink: 0; direction: ltr;
}

.btn-del {
  background: none; border: none; cursor: pointer;
  color: var(--done-text); font-size: 20px;
  padding: 2px 4px; border-radius: 6px; line-height: 1;
  transition: color 0.15s; display: flex; align-items: center;
}
.btn-del:hover { color: var(--danger); }

.btn-priority {
  background: none; border: none; cursor: pointer;
  color: var(--text-secondary); font-size: 22px;
  padding: 2px 6px; border-radius: 6px; line-height: 1;
  transition: all 0.2s; display: flex; align-items: center;
  opacity: 0.5;
}
.btn-priority:hover { 
  opacity: 1;
  color: #f39c12;
  transform: scale(1.15);
}
.btn-priority.active { 
  opacity: 1;
  color: #f39c12;
  text-shadow: 0 0 8px rgba(243, 156, 18, 0.5);
}

/* ══ EMPTY STATE ════════════════════════════════════════ */
.empty-state { text-align: center; padding: 3rem 0; color: var(--text-secondary); font-size: 15px; }
.empty-state .big-icon { font-size: 40px; display: block; margin-bottom: 10px; }

/* ══ FOOTER ═════════════════════════════════════════════ */
footer {
  margin-top: 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--text-secondary); padding: 0 2px;
}
footer.hidden { display: none; }

#clearDone {
  background: none; border: 1px solid var(--border);
  border-radius: 8px; padding: 4px 10px;
  font-size: 12px; font-family: 'Tajawal', sans-serif;
  color: var(--text-secondary); cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#clearDone:hover { background: var(--accent-grad); color: #fff; border-color: transparent; }

/* ══ ARCHIVE SECTION ════════════════════════════════════ */
.archive-section { margin-top: 2rem; }

.archive-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 13px 18px;
  font-size: 15px; font-family: 'Tajawal', sans-serif; font-weight: 500;
  color: var(--text-primary); cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s, background 0.25s;
}
.archive-toggle:hover { border-color: var(--accent-from); }

.archive-toggle-label { display: flex; align-items: center; gap: 8px; }
.archive-icon { font-size: 18px; }

.archive-count-badge {
  font-size: 12px; font-weight: 500;
  background: var(--accent-grad); color: #fff;
  border-radius: 20px; padding: 1px 9px;
  min-width: 22px; text-align: center;
}

.archive-chevron { font-size: 12px; color: var(--text-secondary); transition: transform 0.25s; }
.archive-chevron.open { transform: rotate(180deg); }

.archive-body { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }

.archive-month {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card);
}

.archive-month-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--accent-light);
  font-weight: 700; font-size: 14px; color: var(--accent-from);
  cursor: pointer; user-select: none;
  transition: background 0.15s;
}
.archive-month-header:hover { background: var(--archive-month-hover); }

.archive-month-count { font-size: 12px; font-weight: 400; color: var(--text-secondary); }

.archive-day { border-top: 1px solid var(--border); }

.archive-day-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; font-size: 13px; font-weight: 500;
  color: var(--text-secondary); cursor: pointer;
  background: var(--surface); user-select: none;
  transition: background 0.15s;
}
.archive-day-header:hover { background: var(--archive-day-hover); }

.archive-day-count {
  font-size: 12px; background: var(--accent-light);
  color: var(--accent-from); border-radius: 10px; padding: 1px 8px;
}

.archive-tasks {
  list-style: none; padding: 0 16px 10px 16px;
  display: flex; flex-direction: column; gap: 5px;
}

.archive-task-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text-secondary);
  padding: 5px 0; border-bottom: 1px dashed var(--border);
}
.archive-task-item:last-child { border-bottom: none; }

.archive-check {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent-grad);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 10px; color: #fff;
}

.archive-task-text { flex: 1; }
.archive-task-time { font-size: 11px; color: var(--done-text); direction: ltr; }

.archive-empty {
  text-align: center; padding: 2rem 0;
  color: var(--text-secondary); font-size: 14px;
}

/* ══ BACK BUTTON ════════════════════════════════════════ */
.back-btn {
  /* Fixed at top-left to mirror the theme-toggle on the right.
     Same vertical center (~46-48px) so both controls sit on one axis. */
  position: fixed;
  top: 30px;
  left: 20px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--surface);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: border-color 0.2s, background 0.2s;
  box-shadow: var(--shadow-card);
}

.back-btn:hover {
  border-color: var(--accent-from);
  background: var(--surface-2);
}

/* Mobile: tighter position + slightly smaller, still aligned with theme-toggle */
@media (max-width: 600px) {
  .back-btn {
    top: 30px;
    left: 12px;
    padding: 0.5rem 0.75rem;
    font-size: 12px;
  }
}

.back-btn-left {
  float: left;
  direction: ltr;
}

/* ══ PLACEHOLDER CONTENT ════════════════════════════════ */
.placeholder-content {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--surface);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-card);
  margin-top: 2rem;
}

.placeholder-icon {
  font-size: 64px;
  margin-bottom: 1rem;
}

.placeholder-content h2 {
  font-size: 28px;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.placeholder-content p {
  color: var(--text-secondary);
  font-size: 16px;
  margin-bottom: 1rem;
}

.placeholder-features {
  background: var(--accent-light);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 2rem;
  text-align: right;
  line-height: 1.8;
  display: inline-block;
  max-width: 400px;
}

.placeholder-features strong {
  color: var(--accent-from);
  display: block;
  margin-bottom: 0.5rem;
}


/* ═══════════════════════════════════════════════════════════════════════
 * Site footer — "powered by" with Instagram link.
 *
 * Uses position: fixed pinned to the bottom of the VIEWPORT so it doesn't
 * matter what containing block / flex / grid context wraps it. Centered
 * via flex on the footer itself (not text-align), so RTL/LTR can't shift it.
 * ═══════════════════════════════════════════════════════════════════════ */
body {
  /* Leave room at the bottom for the fixed footer so content doesn't hide */
  padding-bottom: 70px;
}
.site-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  margin: 0 !important;
  padding: 14px 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px;
  color: var(--text-secondary, #94a3b8);
  letter-spacing: 0.2px;
  z-index: 100;
  pointer-events: none;
  /* No background, no backdrop-filter — they conflict with cards above
     that also use backdrop-filter and cause halo artifacts. */
  background: transparent;
  /* Force LTR so the parts read in order: Powered by  khaled.elda  © 2026 */
  direction: ltr;
  text-align: center;
}
.site-footer .footer-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  pointer-events: auto;
}
.site-footer .copyright {
  opacity: 0.6;
}
.site-footer .author-link {
  color: var(--footer-accent, #8b5cf6);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.2s, opacity 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.site-footer .author-link:hover {
  border-bottom-color: var(--footer-accent, #8b5cf6);
}
.site-footer .author-link svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ───────────────────────────────────────────────────────────
   Share-achievement size picker — mobile sizing.
   The size picker overlay is built inline-styled by JS in each
   page, but its inner grid uses .size-pick-card. We target that
   from here so the layout works on small screens for every page
   that uses the share feature (strength, cardio, quran, tasks,
   finance).
   ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* The overlay's grid is wrapped via inline styles; we target it
     by the card class to override grid behaviour from the parent. */
  #sizePickerOverlay > div,
  #sizePickerOverlayQ > div {
    padding: 1.25rem 1rem !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 2rem) !important;
  }
  #sizePickerOverlay > div > div:last-child,
  #sizePickerOverlayQ > div > div:last-child {
    /* The 3-up grid becomes 1-up on phones for breathing room. */
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .size-pick-card {
    flex-direction: row !important;
    min-height: 0 !important;
    padding: 0.85rem 1rem !important;
    gap: 14px !important;
    align-items: center !important;
  }
  .size-pick-card > div:first-child {
    /* preview rect — scale down a bit so it always fits on the row */
    transform: scale(0.85);
    flex-shrink: 0;
  }
  .size-pick-card > div:last-child {
    text-align: right !important;
    flex: 1;
  }
}

@media (max-width: 380px) {
  #sizePickerOverlay > div,
  #sizePickerOverlayQ > div {
    padding: 1rem 0.75rem !important;
  }
  .size-pick-card {
    padding: 0.75rem !important;
    gap: 10px !important;
  }
  .size-pick-card > div:first-child {
    transform: scale(0.7);
  }
}

/* ───────────────────────────────────────────────────────────
   Spinning logo animation — applied site-wide to the Tawazon
   sun mark. Slow 20s rotation matching the login page, so every
   page's logo turns gently like a sun. Respects reduced-motion.
   ─────────────────────────────────────────────────────────── */
@keyframes tawazonLogoSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.page-logo-icon,
.header-icon-svg {
  animation: tawazonLogoSpin 20s linear infinite;
  transform-origin: center center;
}
@media (prefers-reduced-motion: reduce) {
  .page-logo-icon,
  .header-icon-svg {
    animation: none;
  }
}

/* ───────────────────────────────────────────────────────────
   Toast notification — a polished alternative to alert(). Each
   page passes its own accent color so the toast matches the page
   identity. Slides up from the bottom, auto-dismisses.
   Usage (JS): showTawazonToast('message', '#accent', '#accent2')
   ─────────────────────────────────────────────────────────── */
.tawazon-toast-wrap {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(140%);
  z-index: 100000;
  max-width: min(440px, calc(100vw - 32px));
  width: max-content;
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
  pointer-events: none;
}
.tawazon-toast-wrap.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.tawazon-toast {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 16px;
  background: rgba(20, 24, 32, 0.92);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1.5px solid var(--toast-accent, #1a8fd1);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45),
              0 0 30px var(--toast-glow, rgba(26, 143, 209, 0.25));
  direction: rtl;
}
.tawazon-toast-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--toast-accent, #1a8fd1) 0%, var(--toast-accent2, #3aa8e0) 100%);
  box-shadow: 0 4px 14px var(--toast-glow, rgba(26, 143, 209, 0.4));
}
.tawazon-toast-icon svg {
  width: 24px;
  height: 24px;
  color: #fff;
  stroke: #fff;
}
.tawazon-toast-text {
  flex: 1;
  min-width: 0;
}
.tawazon-toast-title {
  font-family: 'Tajawal', 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}
.tawazon-toast-msg {
  font-family: 'Tajawal', 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}
@media (max-width: 600px) {
  .tawazon-toast-wrap { bottom: 20px; }
  .tawazon-toast { padding: 14px 16px; gap: 12px; }
  .tawazon-toast-icon { width: 40px; height: 40px; }
  .tawazon-toast-title { font-size: 13px; }
  .tawazon-toast-msg { font-size: 12px; }
}

/* ───────────────────────────────────────────────────────────
   In-flow back button — used on pages where the back button sits
   inside the header row (title on the right, button on the left)
   instead of floating fixed in the corner. Overrides the global
   fixed positioning.
   ─────────────────────────────────────────────────────────── */
.back-btn.back-btn-inflow {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  flex-shrink: 0;
  white-space: nowrap;
}
.back-btn .back-btn-short { display: none; }
@media (max-width: 600px) {
  .back-btn.back-btn-inflow .back-btn-full { display: none; }
  .back-btn.back-btn-inflow .back-btn-short { display: inline; }
  .page-header-row { padding-top: 0 !important; margin-top: 1.5rem !important; }
}

/* ───────────────────────────────────────────────────────────
   Confirmation dialog — a centered modal in the toast visual
   language (glassy dark, accent border + glow). Used by
   tawazonAnim.showConfirm() as a branded replacement for the
   native confirm().
   ─────────────────────────────────────────────────────────── */
.tawazon-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 100002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(8, 10, 16, 0.6);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tawazon-confirm-overlay.show { opacity: 1; }
.tawazon-confirm-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 28px 30px;
  border-radius: 20px;
  max-width: 380px;
  width: 100%;
  background: rgba(20, 24, 32, 0.94);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1.5px solid var(--toast-accent, #1a8fd1);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5),
              0 0 30px var(--toast-glow, rgba(26, 143, 209, 0.30));
  direction: rtl;
  transform: scale(0.9) translateY(10px);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tawazon-confirm-overlay.show .tawazon-confirm-card {
  transform: scale(1) translateY(0);
}
.tawazon-confirm-icon {
  width: 56px;
  height: 56px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--toast-accent, #1a8fd1) 0%, var(--toast-accent2, #3aa8e0) 100%);
  box-shadow: 0 4px 16px var(--toast-glow, rgba(26, 143, 209, 0.45));
  margin-bottom: 2px;
}
.tawazon-confirm-icon svg { width: 30px; height: 30px; color: #fff; }
.tawazon-confirm-title {
  font-family: 'Tajawal', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.tawazon-confirm-msg {
  font-family: 'Tajawal', 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}
.tawazon-confirm-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}
.tawazon-confirm-actions button {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  font-family: 'Tajawal', 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  border: 1.5px solid transparent;
}
.tawazon-confirm-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
}
.tawazon-confirm-cancel:hover {
  background: rgba(255, 255, 255, 0.14);
}
.tawazon-confirm-ok {
  background: linear-gradient(135deg, var(--toast-accent, #1a8fd1) 0%, var(--toast-accent2, #3aa8e0) 100%);
  color: #fff;
  box-shadow: 0 4px 14px var(--toast-glow, rgba(26, 143, 209, 0.4));
}
.tawazon-confirm-ok:hover { filter: brightness(1.08); transform: translateY(-1px); }
@media (max-width: 600px) {
  .tawazon-confirm-card { padding: 24px 22px; max-width: calc(100vw - 32px); }
  .tawazon-confirm-icon { width: 50px; height: 50px; }
  .tawazon-confirm-icon svg { width: 27px; height: 27px; }
  .tawazon-confirm-title { font-size: 16px; }
}

/* ───────────────────────────────────────────────────────────
   Prevent mobile auto-zoom on focus. iOS Safari zooms in when a
   focused input has a font-size below 16px. Forcing 16px on small
   screens stops the unwanted zoom while still letting users pinch
   to zoom manually if they want.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}