/**
 * Modern Megamenu for Divi - Icon Styles
 * Version: 1.0.0
 */

/* ============================
   Base Icon Styles
   ============================ */
.mmd-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  transition: all var(--mmd-animation-speed) ease;
}

/* ============================
   Search Icon Styles
   ============================ */
.mmd-search-icon .mmd-icon-search {
  width: 18px;
  height: 18px;
  fill: var(--mmd-search-accent-color);
  opacity: 1;
  pointer-events: none;
}

.mmd-search-input-wrapper:focus-within .mmd-search-icon .mmd-icon-search {
  opacity: 1;
  transform: scale(1.05);
}

/* ============================
   Clear Button Icon Styles
   ============================ */
.mmd-search-clear .mmd-icon-close {
  width: 16px;
  height: 16px;
  stroke: black;
}

.mmd-search-clear:hover .mmd-icon-close {
  transform: scale(1.1) rotate(90deg);
}

/* ============================
   Menu Close Button Icon Styles
   ============================ */
.mmd-close .mmd-icon-close {
  width: 20px;
  height: 20px;
  stroke: var(--mmd-text-color);
}

.mmd-close:hover .mmd-icon-close {
  transform: scale(1.1) rotate(90deg);
}

/* ============================
   Toggle Arrow Icon Styles
   ============================ */
.mmd-toggle-arrow .mmd-icon-chevron-right {
  width: 16px;
  height: 16px;
  fill: var(--mmd-text-color);
  opacity: 1;
  transition: transform var(--mmd-animation-speed) ease;
}

/* Expand mode - rotate when expanded if needed */
.mmd-has-children.expanded .mmd-toggle-arrow .mmd-icon-chevron-right {
  transform: rotate(90deg);
}

/* Slide mode - keep as-is */
.mmd-slide-mode .mmd-toggle-arrow .mmd-icon-chevron-right {
  transform: none;
}

/* ============================
   Back Arrow Icon Styles
   ============================ */
.mmd-back-arrow .mmd-icon-arrow-left {
  width: 16px;
  height: 16px;
  color: var(--mmd-text-color);
  margin-right: 8px;
  margin-top: -4px;
  transition: transform var(--mmd-animation-speed) ease;
}

.mmd-back-btn:hover .mmd-back-arrow .mmd-icon-arrow-left {
  transform: translateX(-3px);
}

/* ============================
   Social Media Icon Styles
   ============================ */
.mmd-social-icon .mmd-icon {
  width: 20px;
  height: 20px;
  fill: var(--mmd-text-color);
  transition: all var(--mmd-animation-speed) ease;
}

/* Platform-specific hover colors - removed as per user request */

/* ============================
   Icon Animation Classes
   ============================ */
.mmd-icon-spin {
  animation: mmd-icon-spin 1s linear infinite;
}

.mmd-icon-pulse {
  animation: mmd-icon-pulse 2s infinite;
}

.mmd-icon-bounce {
  animation: mmd-icon-bounce 1s infinite;
}

/* ============================
   Icon Animations
   ============================ */
@keyframes mmd-icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes mmd-icon-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes mmd-icon-bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-3px); }
  60% { transform: translateY(-1px); }
}

/* ============================
   Icon Size Variants
   ============================ */
.mmd-icon-xs { width: 12px; height: 12px; }
.mmd-icon-sm { width: 16px; height: 16px; }
.mmd-icon-md { width: 20px; height: 20px; }
.mmd-icon-lg { width: 24px; height: 24px; }
.mmd-icon-xl { width: 32px; height: 32px; }

/* ============================
   Accessibility Support
   ============================ */
@media (prefers-reduced-motion: reduce) {
  .mmd-icon,
  .mmd-icon * {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================
   High Contrast Support
   ============================ */
@media (prefers-contrast: high) {
  .mmd-icon {
    stroke-width: 2.5;
  }

  .mmd-toggle-arrow .mmd-icon {
    opacity: 1;
  }
}

/* ============================
   Dark Mode Support
   ============================ */
@media (prefers-color-scheme: dark) {
  .mmd-search-clear .mmd-icon-close {
    color: var(--mmd-background-color);
  }
}