/* ========================================
   CUSTOM STYLES (TAILWIND CSS EXTENSIONS)
   ======================================== */

/* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
* {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

:root {
  /* Profile & Layout - Normal Mode (Spacious) */
  --py-main: 2rem;            /* 32px */
  --py-main-md: 2.5rem;       /* 40px */
  --p-profile: 1.5rem;        /* 24px */
  --size-avatar: 7.5rem;      /* 120px */
  --text-name: 1.5rem;        /* 24px */
  --text-handle: 0.875rem;    /* 14px */
  --text-bio: 1rem;           /* 16px */
  --mb-bio: 1.5rem;           /* 24px */
  --p-stats: 1.25rem;         /* 20px */
  --size-stat-icon: 28px;     
  --text-stat-num: 1.25rem;   /* 20px */
  --text-stat-lbl: 0.75rem;   /* 12px */

  /* Link Items - Normal Mode */
  --p-acc-btn: 1.25rem;       /* 20px */
  --p-card: 0.75rem;          /* 12px */
  --size-icon-box: 3rem;      /* 48px box */
  --size-icon: 24px;          /* Icon font size */
  --text-title: 1rem;         /* 16px title */
  --text-desc: 0.875rem;      /* 14px description */
  --gap-items: 0.5rem;        /* 8px gap in lists */
  --radius-card: 0.75rem;    /* Default radius */
}

/* Material Design 3 Overrides */
[data-design="material"] {
  --radius-card: 1.75rem;    /* 28px - M3 Extra Large */
}

[data-design="apple"] {
  --radius-card: 1.25rem;    /* Apple Squircle-like */
}


.compact-mode {
  /* Profile & Layout - Compact Mode (Dense) */
  --py-main: 1.5rem;          /* 24px */
  --py-main-md: 2rem;         /* 32px */
  --p-profile: 1rem;          /* 16px */
  --size-avatar: 5.5rem;      /* 88px */
  --text-name: 1.125rem;      /* 18px */
  --text-handle: 0.75rem;     /* 12px */
  --text-bio: 0.875rem;       /* 14px */
  --mb-bio: 1rem;             /* 16px */
  --p-stats: 0.75rem;         /* 12px */
  --size-stat-icon: 20px;
  --text-stat-num: 1rem;      /* 16px */
  --text-stat-lbl: 10px;      /* 10px */

  /* Link Items - Compact Mode */
  --p-acc-btn: 0.75rem;       /* 12px */
  --p-card: 0.5rem;           /* 8px */
  --size-icon-box: 2.25rem;   /* 36px box */
  --size-icon: 20px;          /* Icon font size */
  --text-title: 0.875rem;     /* 14px title */
  --text-desc: 11px;          /* 11px description */
  --gap-items: 0.375rem;      /* 6px gap */
}

.ltr-text {
  direction: ltr;
  unicode-bidi: embed;
}

/* Base Material Symbols setup */
.material-symbols-rounded {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

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

.animate-slide-up {
  animation: slideUp 0.4s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease forwards;
}

/* Staggered delays for accordion items */
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }

/* --- Apple Design (The Cupertino Way) --- */
[data-design="apple"] {
  --radius-card: 1.25rem;
  --apple-bg: #f5f5f7;
  --apple-card: rgba(255, 255, 255, 0.72);
  --apple-blue: #007aff;
  --apple-text: #1d1d1f;
  --font-family: 'Inter', 'IBM Plex Sans Arabic';
}

.dark[data-design="apple"] {
  --apple-bg: #000000;
  --apple-card: rgba(28, 28, 30, 0.72);
  --apple-blue: #0a84ff;
  --apple-text: #f5f5f7;
}

[data-design="apple"] body { 
  background-color: var(--apple-bg) !important; 
  color: var(--apple-text) !important;
}

[data-design="apple"] header { 
  background-color: var(--apple-card) !important; 
  border-bottom: 0.5px solid rgba(0,0,0,0.1) !important;
}

.dark[data-design="apple"] header { 
  border-bottom: 0.5px solid rgba(255,255,255,0.1) !important;
}

[data-design="apple"] .accordion-item,
[data-design="apple"] .bg-white,
[data-design="apple"] .bg-gray-900 {
  background-color: var(--apple-card) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 0.5px solid rgba(0,0,0,0.1) !important;
  box-shadow: none !important;
}

.dark[data-design="apple"] .accordion-item,
.dark[data-design="apple"] .bg-white,
.dark[data-design="apple"] .bg-gray-900 {
  border: 0.5px solid rgba(255,255,255,0.15) !important;
}

[data-design="apple"] .text-indigo-600,
[data-design="apple"] .text-indigo-400 {
  color: var(--apple-blue) !important;
}

[data-design="apple"] .bg-indigo-600,
[data-design="apple"] .bg-indigo-500 {
  background-color: var(--apple-blue) !important;
}

[data-design="apple"] .material-symbols-rounded {
  font-family: 'Material Symbols Outlined' !important;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
}

/* --- Material Design 3 (The Google Way) --- */
[data-design="material"] {
  --radius-card: 1.75rem;     /* 28px Extra Large */
  --m3-surface: #fef7ff;     /* M3 Surface */
  --m3-container: #f3edf7;   /* M3 Surface Container */
  --m3-primary: #6750a4;     /* M3 Primary */
  --m3-on-surface: #1d1b20;
  --font-family: 'Lexend', 'Vazirmatn';
}

.dark[data-design="material"] {
  --m3-surface: #141218;
  --m3-container: #211f26;
  --m3-primary: #d0bcff;
  --m3-on-surface: #e6e1e5;
}

[data-design="material"] body { 
  background-color: var(--m3-surface) !important; 
  color: var(--m3-on-surface) !important;
}

[data-design="material"] .accordion-item {
  background-color: var(--m3-container) !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  transition: box-shadow 0.2s, transform 0.2s;
}

[data-design="material"] .accordion-item:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

[data-design="material"] .bg-white,
[data-design="material"] .bg-gray-900 {
  background-color: var(--m3-container) !important;
  border: none !important;
}

[data-design="material"] .text-indigo-600,
[data-design="material"] .text-indigo-400 {
  color: var(--m3-primary) !important;
}

[data-design="material"] .bg-indigo-600,
[data-design="material"] .bg-indigo-500 {
  background-color: var(--m3-primary) !important;
}

[data-design="material"] .material-symbols-rounded {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
}

/* Global Overrides */
.rounded-xl { border-radius: var(--radius-card) !important; }
.rounded-lg { border-radius: calc(var(--radius-card) * 0.7) !important; }
.rounded-2xl { border-radius: calc(var(--radius-card) * 1.2) !important; }

/* Design-specific Hover & Interactions */
[data-design="material"] a:hover {
  background-color: rgba(103, 80, 164, 0.08) !important;
}

[data-design="apple"] a:hover {
  background-color: rgba(0, 0, 0, 0.03) !important;
}

.dark[data-design="apple"] a:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-design="apple"] * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@keyframes shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animate-shimmer {
  animation: shimmer 5s ease infinite;
}

@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.animate-bounce-slow {
  animation: bounce-slow 3s ease-in-out infinite;
}