/* K-Beauty Pass Icon System */

@layer components {
  /* Icon Base Styles */
  .icon {
    @apply inline-block;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 0;
  }

  .icon-sm {
    @apply w-4 h-4;
  }

  .icon-md {
    @apply w-6 h-6;
  }

  .icon-lg {
    @apply w-8 h-8;
  }

  .icon-xl {
    @apply w-12 h-12;
  }

  /* Beauty Treatment Icon - Based on uploaded image */
  .icon-beauty-treatment {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='headGradient' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23558FFF;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%237BA3FF;stop-opacity:1' /%3E%3C/linearGradient%3E%3ClinearGradient id='neckGradient' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23FFB3C1;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23FFC4D1;stop-opacity:1' /%3E%3C/linearGradient%3E%3ClinearGradient id='wandGradient' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23654321;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%238B4513;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- Head silhouette --%3E%3Cpath d='M60 40 C60 20, 80 10, 100 10 C120 10, 140 20, 140 40 L140 80 C140 100, 130 120, 120 130 L80 130 C70 120, 60 100, 60 80 Z' fill='url(%23headGradient)'/%3E%3C!-- Neck --%3E%3Cpath d='M85 130 L115 130 L120 160 L80 160 Z' fill='url(%23neckGradient)'/%3E%3C!-- Magic wand handle --%3E%3Cpath d='M30 60 L50 80 L48 82 L28 62 Z' fill='url(%23wandGradient)' stroke='%23654321' stroke-width='1'/%3E%3C!-- Magic wand tip/star --%3E%3Cpath d='M25 55 L30 50 L35 55 L30 60 Z' fill='%23FFD700' stroke='%23FFA500' stroke-width='1'/%3E%3C!-- Sparkle effects --%3E%3Ccircle cx='40' cy='45' r='2' fill='%23FFD700' opacity='0.8'/%3E%3Ccircle cx='45' cy='35' r='1.5' fill='%23FFA500' opacity='0.6'/%3E%3Ccircle cx='35' cy='40' r='1' fill='%23FFD700' opacity='0.7'/%3E%3C!-- Additional sparkles --%3E%3Cpath d='M50 30 L52 28 L54 30 L52 32 Z' fill='%23FF69B4' opacity='0.6'/%3E%3Cpath d='M55 45 L57 43 L59 45 L57 47 Z' fill='%23FF1493' opacity='0.5'/%3E%3C!-- Glow effect around head --%3E%3Cellipse cx='100' cy='70' rx='45' ry='35' fill='none' stroke='%23FFFF99' stroke-width='2' opacity='0.3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  /* Common Navigation Icons */
  .icon-back {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 18L9 12L15 6' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .icon-search {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='m21 21-4.35-4.35' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .icon-menu {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='3' y1='6' x2='21' y2='6' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='3' y1='12' x2='21' y2='12' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='3' y1='18' x2='21' y2='18' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .icon-heart {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .icon-heart.filled {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
  }

  .icon-calendar {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2' stroke='currentColor' stroke-width='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='8' y1='2' x2='8' y2='6' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='3' y1='10' x2='21' y2='10' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .icon-location {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z' stroke='currentColor' stroke-width='2'/%3E%3Ccircle cx='12' cy='10' r='3' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .icon-chevron-down {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .icon-chevron-up {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 15L12 9L6 15' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .icon-close {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='18' y1='6' x2='6' y2='18' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='6' y1='6' x2='18' y2='18' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  /* Beauty-specific icons */
  .icon-skincare {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' stroke='currentColor' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='6' stroke='currentColor' stroke-width='1' opacity='0.5'/%3E%3Ccircle cx='12' cy='12' r='2' fill='currentColor'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .icon-laser {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L12 22' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M2 12L22 12' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M4.93 4.93L19.07 19.07' stroke='currentColor' stroke-width='1' stroke-linecap='round' opacity='0.7'/%3E%3Cpath d='M4.93 19.07L19.07 4.93' stroke='currentColor' stroke-width='1' stroke-linecap='round' opacity='0.7'/%3E%3Ccircle cx='12' cy='12' r='3' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .icon-injection {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 3L21 6L18 9' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 21L3 18L6 15' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 6L9 12L12 15L18 9' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  /* Icon color variants */
  .icon-primary {
    color: var(--color-primary);
  }

  .icon-white {
    color: var(--color-white);
  }

  .icon-black {
    color: var(--color-black);
  }

  .icon-error {
    color: var(--color-error);
  }

  .icon-muted {
    color: var(--color-text-muted);
  }
}