/* ==========================================================================
   3D ICON DESIGN ENGINE & CLAYMORPHISM UI/UX STYLESHEET
   Vanniyarnadu Matrimony - 3D Icon Enhancement
   ========================================================================== */

:root {
  --3d-shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.07), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  --3d-shadow-md: 0 8px 16px -2px rgba(15, 23, 42, 0.16), 0 4px 6px -2px rgba(15, 23, 42, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.6);
  --3d-shadow-lg: 0 14px 28px -4px rgba(15, 23, 42, 0.22), 0 6px 12px -4px rgba(15, 23, 42, 0.12), inset 0 2px 3px rgba(255, 255, 255, 0.7);
  --3d-inset-depth: inset 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 -1px 2px rgba(255, 255, 255, 0.4);
}

/* ==========================================
   1. CORE 3D ICON WRAPPER CONTAINER
   ========================================== */
.icon-3d-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  position: relative;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: var(--3d-shadow-md);
  color: #ffffff !important;
  user-select: none;
  overflow: hidden;
  flex-shrink: 0;
  vertical-align: middle;
}

/* 3D Glossy Light Reflection Sweep */
.icon-3d-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 10px 10px 40% 40%;
  pointer-events: none;
}

/* Inner 3D Icon Emboss Effect */
.icon-3d-box i,
.icon-3d-box svg {
  position: relative;
  z-index: 2;
  font-size: 1.15rem;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
  transition: transform 0.25s ease;
}

/* Interactive Hover & Press State */
.icon-3d-box:hover {
  transform: translateY(-3px) scale(1.08) rotateX(6deg);
  box-shadow: var(--3d-shadow-lg);
}

.icon-3d-box:hover i,
.icon-3d-box:hover svg {
  transform: scale(1.12);
}

.icon-3d-box:active {
  transform: translateY(1px) scale(0.95);
  box-shadow: var(--3d-shadow-sm);
}

/* Size Variants */
.icon-3d-xs { width: 21px; height: 21px; border-radius: 6px; font-size: 0.7rem; }
.icon-3d-xs i, .icon-3d-xs svg { font-size: 0.7rem !important; }

.icon-3d-sm { width: 32px; height: 32px; border-radius: 8px; font-size: 0.98rem; }
.icon-3d-sm i { font-size: 0.98rem; }

.icon-3d-lg { width: 48px; height: 48px; border-radius: 14px; }
.icon-3d-lg i { font-size: 1.5rem; }

.icon-3d-xl { width: 64px; height: 64px; border-radius: 18px; }
.icon-3d-xl i { font-size: 2.1rem; }

.icon-3d-circle { border-radius: 50% !important; }
.icon-3d-circle::before { border-radius: 50% 50% 40% 40% !important; }

/* ==========================================
   2. RICH 3D COLOR THEMES
   ========================================== */
/* Royal Blue / Primary */
.icon-3d-primary, .icon-3d-blue {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: 1px solid rgba(147, 197, 253, 0.6);
}

/* Crimson Red / Primary Accent */
.icon-3d-crimson, .icon-3d-red, .icon-3d-danger {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  border: 1px solid rgba(254, 202, 202, 0.6);
}

/* Emerald / Success Green */
.icon-3d-success, .icon-3d-green {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  border: 1px solid rgba(167, 243, 208, 0.6);
}

/* WhatsApp Green */
.icon-3d-whatsapp {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  border: 1px solid rgba(187, 247, 208, 0.7);
}

/* Amber / Warning */
.icon-3d-warning, .icon-3d-amber {
  background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
  border: 1px solid rgba(253, 230, 138, 0.7);
}

/* Purple / Astrology / Premium */
.icon-3d-purple {
  background: linear-gradient(135deg, #a855f7 0%, #6b21a8 100%);
  border: 1px solid rgba(233, 213, 255, 0.6);
}

/* Cyan / Teal */
.icon-3d-cyan, .icon-3d-teal {
  background: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%);
  border: 1px solid rgba(165, 243, 252, 0.6);
}

/* Gold / Luxury */
.icon-3d-gold {
  background: linear-gradient(135deg, #facc15 0%, #ca8a04 100%);
  border: 1px solid rgba(254, 240, 138, 0.8);
  color: #422006 !important;
}

/* Dark Slate / Dark Glass */
.icon-3d-dark {
  background: linear-gradient(135deg, #334155 0%, #0f172a 100%);
  border: 1px solid rgba(203, 213, 225, 0.3);
}

/* Light / Soft Neutral Glass */
.icon-3d-light, .icon-3d-glass {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
  border: 1px solid rgba(226, 232, 240, 0.9);
  color: #334155 !important;
}
.icon-3d-light i, .icon-3d-glass i {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

/* ==========================================
   3. INLINE STANDALONE 3D GLYPHS & ICONS
   ========================================== */
.fa-3d, i[class*="fa-"].fa-3d {
  display: inline-block;
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.28));
  transition: transform 0.2s ease, filter 0.2s ease;
}

.fa-3d:hover {
  transform: translateY(-2px) scale(1.1);
  filter: drop-shadow(0 5px 9px rgba(0, 0, 0, 0.35));
}

/* ==========================================
   4. SIDEBAR 3D MENU STYLING
   ========================================== */
.sidebar-menu .menu-category-header i,
.sidebar-menu a i,
.sidebar .sidebar-menu ul li a i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 10px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.9);
  color: #2563eb !important;
  filter: drop-shadow(0 2px 3px rgba(37, 99, 235, 0.25));
  transition: all 0.25s ease;
  vertical-align: middle;
}

html.dark-mode .sidebar-menu a i,
body.dark-mode .sidebar-menu a i,
[data-theme="dark"] .sidebar-menu a i {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  border-color: #334155 !important;
  color: #60a5fa !important;
}

.sidebar-menu a:hover i,
.sidebar-menu ul li a.active i,
.sidebar-menu .active > a i {
  transform: translateY(-2px) scale(1.12);
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
  border-color: rgba(191, 219, 254, 0.8) !important;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
  color: #ffffff !important;
}

/* ==========================================
   5. TOPBAR 3D ACTION BUTTONS
   ========================================== */
.topbar-3d-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: var(--3d-shadow-sm);
  color: #475569;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  cursor: pointer;
}

.topbar-3d-btn:hover {
  transform: translateY(-2px) scale(1.08);
  box-shadow: var(--3d-shadow-md);
  color: #1e40af;
  background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
}

.topbar-3d-btn i {
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.15));
}

/* ==========================================
   6. TABLE & CARD ACTION 3D BUTTONS
   ========================================== */
.btn-action-3d {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.82rem;
  gap: 6px;
  box-shadow: var(--3d-shadow-sm);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  text-decoration: none !important;
}

.btn-action-3d:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: var(--3d-shadow-md);
}

.btn-action-3d:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: var(--3d-shadow-sm);
}

.btn-action-3d i {
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}