/* ============================================================================
   SIDEBAR — Persistent Collapsible Icon-Rail
   Desktop: 64px collapsed → 240px expanded (left-fixed, full-height)
   Mobile (≤768px): hidden off-screen, slides in from left with backdrop
   ============================================================================ */

/* ── CSS Variables ────────────────────────────────────────────────────────── */
:root {
  --sidebar-collapsed-width: 64px;
  --sidebar-expanded-width: 240px;
}

/* ── Body padding shifts with sidebar (RTL: sidebar is on the right) ────── */
body {
  /* 16px gap added so content never visually touches the sidebar edge */
  padding-right: calc(var(--sidebar-collapsed-width) + 16px);
  transition: padding-right 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-expanded {
  padding-right: calc(var(--sidebar-expanded-width) + 16px);
}

/* ── Sidebar Panel ────────────────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: 0;
  right: 0; /* RTL: anchored to right edge */
  left: auto;
  height: 100%;
  width: var(--sidebar-collapsed-width);
  background: var(--color-background);
  border-left: 1px solid var(--color-border); /* border on the inner/left edge */
  z-index: var(--z-overlay, 500);
  display: flex;
  flex-direction: column;
  /* NO overflow:hidden here — it clips the toggle button & button lift transforms.
     Overflow control is applied per-section (nav has overflow-y: auto). */
  transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.expanded {
  width: var(--sidebar-expanded-width);
}

/* ── Desktop Expand/Collapse Toggle ──────────────────────────────────────── */
.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-background-secondary, #f5f5f5);
  border: 1px solid var(--color-border);
  cursor: pointer;
  position: absolute;
  top: 22px;
  left: -14px; /* straddles the LEFT edge of the right-anchored sidebar */
  right: auto;
  z-index: 10;
  color: var(--color-text);
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
  box-shadow: var(--shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.12));
}

.sidebar-toggle:hover {
  background: var(--color-primary-light, #e8f0fe);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
}

.sidebar-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* The SVG path M15 18l-6-6 6-6 is a left-pointing chevron (‹).
   Collapsed → points LEFT (‹) meaning "expand"
   Expanded  → rotate 180° → points RIGHT (›) meaning "collapse" */
.toggle-chevron {
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.expanded .toggle-chevron {
  transform: rotate(180deg);
}

/* ── Mobile Hamburger (hidden on desktop) ────────────────────────────────── */
.hamburger {
  display: none;
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: calc(var(--z-overlay, 500) + 2);
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  background: var(--color-background, #fff);
  color: var(--color-text, #111);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.hamburger:hover {
  transform: scale(1.07);
  box-shadow: var(--shadow-lg);
}

.hamburger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.hamburger-icon .bar {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 0.25s ease,
    opacity 0.2s ease;
}

.hamburger[aria-expanded="true"] .bar-top {
  transform: translateY(6px) rotate(45deg);
}

.hamburger[aria-expanded="true"] .bar-mid {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger[aria-expanded="true"] .bar-bottom {
  transform: translateY(-6px) rotate(-45deg);
}

/* ── Backdrop (mobile overlay) ───────────────────────────────────────────── */
.side-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  z-index: calc(var(--z-overlay, 500) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.side-menu-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── Nav Scroll Container ────────────────────────────────────────────────── */
.sidebar nav {
  flex: 1;
  overflow-y: auto;
  /*
   * overflow-x: clip (not hidden) — critical distinction:
   *   hidden → creates a Block Formatting Context (BFC) that traps children's
   *            translateY transforms inside the element's paint bounds, causing
   *            theme-selector-btn:active translateY(-2px) to be clipped at top.
   *   clip   → clips visually without creating a BFC, so children's transforms
   *            can paint outside the block edge. Supported in all modern browsers.
   */
  overflow-x: clip;
  /*
   * 64px top padding clears the absolutely-positioned .sidebar-toggle button
   * (top: 22px + height: 28px ≈ 50px) and gives breathing room above the
   * first icon.  When the new .sidebar-header HTML is present, the header
   * occupies the top 56px in flow; the sibling rule below reduces this to 8px.
   */
  padding: 64px 8px 24px;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  /*
   * RTL scrollbar fix: the document is dir="rtl", which moves the scrollbar
   * to the LEFT side of scroll containers. Setting direction: ltr on the nav
   * forces the scrollbar back to the RIGHT edge (closer to the sidebar's
   * inner border). The individual .menu-item elements already set their own
   * direction: rtl, so Arabic text alignment is unaffected.
   */
  direction: ltr;
}

/* New HTML: .sidebar-header is in-flow before nav, so its 56px height already
   provides top clearance — restore compact padding. */
.sidebar-header ~ nav {
  padding-top: 8px;
}

.sidebar nav::-webkit-scrollbar {
  width: 4px;
}
.sidebar nav::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar nav::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

/* ── Sidebar Header ──────────────────────────────────────────────────────── */
/*
 * A real in-flow header at the top of the sidebar (not absolute).
 * Desktop collapsed (64px): shows only the favicon pill.
 * Desktop expanded (240px): shows the full logo wordmark.
 * Mobile bottom-sheet: shows a drag-handle pill above the logo row.
 */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-background);
  position: sticky;
  top: 0;
  z-index: 3;
  overflow: hidden;
  padding: 0 12px;
}

/* Favicon-only pill shown in collapsed state */
.sidebar-favicon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  transition: opacity 200ms ease;
}

.sidebar-favicon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.sidebar.expanded nav {
  padding-top: 15px;
}

/* Collapsed: show favicon, hide wordmark */
.sidebar:not(.expanded) .sidebar-favicon {
  opacity: 1;
}

.sidebar:not(.expanded) .sidebar-logo {
  display: none;
}

/* Expanded: hide favicon, show wordmark */
.sidebar.expanded .sidebar-favicon {
  display: none;
}

.sidebar.expanded .sidebar-logo {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 0px;
}

/* Side bar logo (now in-flow, inside .sidebar-header) */
.sidebar-logo {
  pointer-events: none;
}

/**/
.sidebar:not(.expanded) .menu-section-title,
.sidebar:not(.expanded) .animation-toggle-container,
.sidebar:not(.expanded) .animation-section-header,
.sidebar:not(.expanded) .animation-toggle-label,
.sidebar:not(.expanded) .theme-section-header,
.sidebar:not(.expanded) .theme-selector-grid,
.sidebar:not(.expanded) .menu-divider.sidebar-expanded-only,
.sidebar:not(.expanded) .toggle-switch {
  display: none;
}

/* ── Menu Items ──────────────────────────────────────────────────────────── */
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  text-decoration: none;
  border-radius: 10px;
  margin-bottom: 2px;
  background: none;
  border: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  text-align: right;
  direction: rtl;
  white-space: nowrap;
  position: relative;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

/*
 * Fix: JS shows install-app via style.display = "block", which breaks flex
 * centering in the collapsed sidebar. Force display:flex !important so the
 * icon centers correctly regardless of the inline style value.
 */
.menu-item.install-app {
  display: flex !important;
}

.menu-item svg {
  flex-shrink: 0;
  min-width: 22px;
}

/* Collapsed: center icons perfectly.
 * CRITICAL — gap must be 0 here: the .menu-label still exists in the DOM with
 * max-width: 0, but the flex gap (10px) between icon and label still pushes
 * the icon ~5px off-center. Setting gap: 0 when collapsed ensures pixel-perfect
 * centering of every icon within the 64px rail. */
.sidebar:not(.expanded) .menu-item {
  justify-content: center;
  padding: 10px 0;
  gap: 0;
}

/* Labels: hidden when collapsed */
.menu-label {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition:
    opacity 0s,
    max-width 0s;
  pointer-events: none;
  flex: 1;
  text-align: right;
}

.sidebar.expanded .menu-label {
  opacity: 1;
  max-width: 180px;
  pointer-events: auto;
  transition:
    opacity 120ms ease 80ms,
    max-width 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.menu-item:hover {
  background: var(--color-background-secondary, #f5f5f5);
}

.menu-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  border-radius: 10px;
}

.menu-item.active {
  background: var(--color-primary-light, #e8f0fe);
  color: var(--color-primary);
}

/* ── Tooltips (collapsed state, desktop only) ────────────────────────────── */
/* Sidebar is on the RIGHT → tooltips appear to the LEFT of each icon       */
.sidebar:not(.expanded) [data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 10px); /* left of the icon, toward the content area */
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-surface, #fff);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  box-shadow: var(--shadow-md);
  transition: opacity 0.15s ease 0.35s;
  z-index: 1000;
  direction: rtl;
}

.sidebar:not(.expanded) [data-tooltip]:hover::after {
  opacity: 1;
}

/* ── Divider ─────────────────────────────────────────────────────────────── */
.menu-divider {
  height: 1px;
  background: var(--color-border);
  margin-block: 8px; /* logical: top/bottom only — no physical left/right */
  margin-inline: 4px; /* logical: replaces margin: 8px 4px */
  flex-shrink: 0;
}

/* ── Theme Controls Section ──────────────────────────────────────────────── */
.theme-controls-section {
  margin-top: 4px;
}

/* Collapsed: collapse all margins in the theme/animation sections to remove dead space */
.sidebar:not(.expanded) .theme-controls-section {
  margin-top: 0;
  margin-bottom: 0;
}

.sidebar:not(.expanded) .animation-section-header {
  margin-block: 0;
}

.theme-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-text-tertiary, #888);
  white-space: nowrap;
  position: relative;
}

.sidebar:not(.expanded) .theme-section-header {
  justify-content: center;
  padding: 8px 0;
}

/* ── Items visible only when expanded ────────────────────────────────────── */
.sidebar-expanded-only {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  /*
   * CRITICAL: setting margin: 0 here eliminates invisible dead space.
   * When max-height: 0 + overflow: hidden, the element's box is 0px tall
   * but its margin is NOT collapsed — it still pushes neighbours apart.
   * Zeroing margin here removes that ghost gap (e.g. the space above
   * the contactDev button in the collapsed sidebar).
   */
  margin: 0;
  transition:
    opacity 0s,
    max-height 0s;
}

.sidebar.expanded .sidebar-expanded-only {
  opacity: 1;
  max-height: 600px;
  overflow: visible; /* allow theme-selector-btn translateY(-2px) not to clip */
  pointer-events: auto;
  transition:
    opacity 150ms ease 100ms,
    max-height 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

/* ── Theme Selector Grid ─────────────────────────────────────────────────── */
.theme-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-block: 4px 6px; /* logical top/bottom — replaces margin: 4px 4px 6px */
  margin-inline: 4px; /* logical left/right  */
  /*
   * padding-top gives vertical room for the translateY(-2px) lift on hover/active.
   * Since .sidebar nav now uses overflow-x: clip (not hidden), the nav no longer
   * creates a BFC that would trap this upward movement.
   */
  padding-top: 4px;
  overflow: visible;
}

.theme-selector-btn {
  border: 2px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 4px;
  cursor: pointer;
  background: none;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

[data-theme="dark-slate"] .theme-selector-btn,
[data-theme="dark"] .theme-selector-btn {
  color: #ffffff;
}

.theme-selector-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.theme-selector-btn[aria-pressed="true"] {
  border-color: var(--color-primary);
  border-width: 2.5px;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.theme-btn-icon {
  font-size: 1.2rem;
  transition: transform 0.2s ease;
}

.theme-selector-btn[aria-pressed="true"] .theme-btn-icon {
  transform: scale(1.12);
}

.theme-btn-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-text);
}

.theme-selector-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Animation Toggle ────────────────────────────────────────────────────── */
.animation-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-text-tertiary, #888);
  margin-block: 10px 8px; /* logical: replaces margin: 10px 4px 8px */
  margin-inline: 4px; /* logical: left/right */
  padding: 0 4px;
}

.animation-toggle-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
  margin-block-end: 4px; /* logical bottom: replaces margin: 0 4px 4px */
  margin-inline: 4px; /* logical left/right */
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  user-select: none;
}

.animation-toggle-container:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary);
}

.animation-toggle-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}

.toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 100px;
  background: var(--color-border, #ccc);
  transition: background 0.3s ease;
  flex-shrink: 0;
}

.toggle-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.toggle-input:checked ~ .toggle-switch {
  background: var(--color-primary, #4f6ef7);
}

.toggle-input:checked ~ .toggle-switch::after {
  left: 23px;
}

.toggle-input:focus-visible ~ .toggle-switch {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Responsive: Mobile (≤768px) ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }

  /* Slide up from BOTTOM — full-width bottom sheet */
  .sidebar {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    height: auto;
    max-height: 85dvh; /* use dvh so it respects mobile browser chrome */
    border-left: none;
    border-top: 1px solid var(--color-border);
    border-radius: 24px 24px 0 0;
    transform: translateY(100%); /* hidden below the viewport */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
    overflow-y: hidden; /* nav handles scrolling so header can stay sticky */
    overflow-x: hidden;
  }

  .sidebar.expanded {
    transform: translateY(0); /* slide up into view */
    box-shadow: var(--shadow-xl);
  }

  /* Drag handle pill at the top of the sheet */
  .sidebar::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--color-border);
    margin: 12px auto 4px;
    flex-shrink: 0;
  }

  /* Sidebar header on mobile: sits above the nav, full-width, sticky */
  .sidebar-header {
    border-top: none;
    height: auto;
    padding: 6px 16px 10px;
    justify-content: center; /* center the logo horizontally in the sheet */
    /* position: sticky + top: 0 inherited from base rule — do NOT override with static */
    /* border-bottom inherited from base rule so the nav separator is visible */
    background: var(--color-background);
  }

  /* Old HTML: logo lives in a bare <a> directly inside .sidebar (no .sidebar-header).
     Center it and add a separator line below to match the new-HTML header style. */
  .sidebar > a:has(.sidebar-logo) {
    display: flex;
    justify-content: center;
    padding-bottom: 6px;
    margin-left: 10px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-background);
    position: sticky;
    top: 0;
    z-index: 3;
    flex-shrink: 0;
  }

  /* Always show logo in mobile sheet (expanded-only override already covers this) */
  .sidebar .sidebar-logo {
    display: flex !important;
    align-items: center;
  }

  /* Favicon hidden on mobile — full logo always shows */
  .sidebar .sidebar-favicon {
    display: none !important;
  }

  /* No body padding shift on mobile — sidebar is an overlay */
  body,
  body.sidebar-expanded {
    padding-right: 16px !important;
  }

  /* Full labels always visible on mobile */
  .sidebar .menu-item {
    justify-content: flex-start !important;
    padding: 11px 14px !important;
  }

  .sidebar .menu-label {
    opacity: 1 !important;
    max-width: 200px !important;
    overflow: visible !important;
    pointer-events: auto !important;
    transition: none !important;
  }

  .sidebar-expanded-only {
    opacity: 1 !important;
    max-height: 600px !important;
    overflow: visible !important;
    pointer-events: auto !important;
    transition: none !important;
  }

  .theme-section-header {
    justify-content: flex-start !important;
    padding: 8px 14px !important;
  }

  .sidebar-toggle {
    display: none;
  }

  /* Nav: no extra top padding — logo lives in .sidebar-header now.
     overflow-y: auto makes nav the scroll root so the sticky header above it works. */
  .sidebar nav {
    padding-top: 8px;
    overflow-y: auto;
    overflow-x: visible;
  }

  /* Suppress desktop tooltips on mobile */
  .sidebar:not(.expanded) [data-tooltip]::after {
    display: none;
  }
}

/* ── Reduced Motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .hamburger-icon .bar,
  .toggle-switch,
  .toggle-switch::after,
  .side-menu-backdrop,
  .menu-item,
  .theme-selector-btn,
  .sidebar-toggle,
  .toggle-chevron,
  .menu-label,
  .sidebar-expanded-only,
  body {
    transition: none !important;
  }
}

/* ============================================================================
   User Name
   ============================================================================ */
.change-username {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.12);

  position: relative;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 2px 6px;
  border-radius: 6px;
  margin-right: 0;
  margin-left: 0;
}

/* ============================================================================
   CONTACT DEVELOPER OVERLAY
   ============================================================================ */
.contact-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1100;
  padding: 20px;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease;
}

.contact-overlay-card {
  background: var(--color-surface);
  border-radius: 16px;
  max-width: 440px;
  width: 100%;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-border);
  animation: slideUp 0.3s ease;
  overflow: hidden;
}

.contact-overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 28px;
  border-bottom: 2px solid var(--color-border);
}

.contact-overlay-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-overlay-body {
  padding: 28px;
}

.contact-overlay-desc {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  margin-bottom: 22px;
}

.contact-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-option-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-background);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: right;
  direction: rtl;
  font-family: "Inter", sans-serif;
}

.contact-option-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.contact-option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
}

.contact-whatsapp .contact-option-icon {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: white;
}
.contact-whatsapp:hover {
  border-color: #25d366;
  background: rgba(37, 211, 102, 0.05);
}

.contact-telegram .contact-option-icon {
  background: linear-gradient(135deg, #2ca5e0 0%, #1a7fb5 100%);
  color: white;
}
.contact-telegram:hover {
  border-color: #2ca5e0;
  background: rgba(44, 165, 224, 0.05);
}

.contact-email .contact-option-icon {
  background: var(--gradient-accent);
  color: white;
}
.contact-email:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.contact-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.contact-option-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.contact-option-sub {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  direction: ltr;
  text-align: right;
}

.contact-overlay-footer {
  display: flex;
  justify-content: center;
  padding: 0 28px 24px;
}

.cancel-contact-overlay-button {
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  font-size: large;
}

[data-theme="dark"] .cancel-contact-overlay-button,
[data-theme="dark-slate"] .cancel-contact-overlay-button {
  color: #e8f0fe;
}

[data-theme="dark"] .contact-overlay-card,
[data-theme="dark-slate"] .contact-overlay-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .contact-overlay-header,
[data-theme="dark-slate"] .contact-overlay-header {
  border-color: var(--color-border);
}

[data-theme="dark"] .contact-option-btn,
[data-theme="dark-slate"] .contact-option-btn {
  background: var(--color-background);
  border-color: var(--color-border);
}

[data-theme="dark"] .contact-whatsapp:hover,
[data-theme="dark-slate"] .contact-whatsapp:hover {
  background: rgba(37, 211, 102, 0.08);
}

[data-theme="dark"] .contact-telegram:hover,
[data-theme="dark-slate"] .contact-telegram:hover {
  background: rgba(44, 165, 224, 0.08);
}