/* 
============================================
   EVNET MICROINTERACTIONS & SVG ANIMATIONS
   "The Premium Dopamine CSS"
============================================
*/

/* --- 1. DOPAMINE HEART (Spara Bostad) --- */
.microact-heart {
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  outline: none;
}

.microact-heart .heart-svg {
  width: 24px;
  height: 24px;
  stroke: var(--gray-400);
  fill: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  stroke-width: 2;
  transition: stroke 0.3s ease, fill 0.3s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: visible;
}

/* Base hover */
.microact-heart:hover .heart-svg {
  stroke: #ef4444;
  transform: scale(1.1);
}

/* Active "Dopamine Pop" State */
.microact-heart.active .heart-svg {
  animation: heartPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  stroke: #ef4444;
}

@keyframes heartPop {
  0% { transform: scale(1); fill: rgba(0, 0, 0, 0.4); }
  30% { transform: scale(0.85); }
  60% { transform: scale(1.4); fill: #ef4444; }
  100% { transform: scale(1); fill: #ef4444; }
}

/* Confetti Sparks */
.confetti-sparks {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0 0 transparent; /* Will animate */
}

.microact-heart.active .confetti-sparks {
  animation: confettiExplosion 0.5s ease-out forwards;
}

@keyframes confettiExplosion {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.8);
    opacity: 1;
  }
  100% {
    box-shadow: 0 -20px 0 0px transparent, 
                20px -10px 0 0px transparent,
                -20px -10px 0 0px transparent,
                15px 15px 0 0px transparent,
                -15px 15px 0 0px transparent;
    opacity: 0;
  }
}


/* --- 2. PIN BOUNCE (Location Input Focus) --- */
/* Target the SVG icon when its parent wrapper has focus-within */
.location-input-wrap:focus-within .input-icon {
  animation: pinBounce 0.6s cubic-bezier(0.28, 0.84, 0.42, 1) forwards;
  stroke: var(--color-primary); /* Turn it Evnet Blue on focus */
}

@keyframes pinBounce {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-8px) scaleY(1.1); }
  60%  { transform: translateY(2px) scaleY(0.9); }
  80%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}


/* --- 3. SVG DRAWING CHECKMARK (Filters) --- */
/* The hidden SVG inside the filter buttons */
.taktil-check {
  width: 14px;
  height: 14px;
  margin-right: -4px;
  margin-left: 6px;
  vertical-align: middle;
  stroke: white; /* Will inherit from active class */
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  
  /* Prep the stroke drawing */
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  
  opacity: 0;
  width: 0; /* Hide initially */
  transition: width 0.2s ease, opacity 0.1s ease;
}

/* When the parent button gets .active, reveal and draw the checkmark */
.prop-type-btn.active .taktil-check {
  width: 14px;
  opacity: 1;
  animation: svgDraw 0.4s 0.1s ease-out forwards;
}

@keyframes svgDraw {
  0% { stroke-dashoffset: 20; }
  100% { stroke-dashoffset: 0; }
}


/* --- 4. AXTAR BUTTON LOADING MORPH --- */
.btn.is-loading .search-svg {
  /* Morph search icon to a spinning half-circle/loader */
  animation: spinSearch 0.8s linear infinite;
  transform-origin: center;
  stroke-dasharray: 40;
  stroke-dashoffset: 20;
}

.btn.is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.9;
}

@keyframes spinSearch {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}