/* 
============================================
   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;
  padding: 0;
}

.microact-heart .heart-svg {
  width: 20px;
  height: 20px;
  stroke: var(--gray-400);
  fill: rgba(0, 0, 0, 0.2);
  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); }
}

/* --- 5. SAD MICROINTERACTIONS (Account Deletion) --- */
.danger-zone-wrap {
  border: 1px solid #fee2e2;
  background: #fef2f2;
  border-radius: 16px;
  padding: 24px;
  margin-top: 40px;
  transition: all 0.3s ease;
}

.danger-zone-wrap.active-confirm {
  background: #7f1d1d;
  border-color: #450a0a;
  color: white;
}

.btn-sad-delete {
  padding: 12px 24px;
  background: white;
  color: #ef4444;
  border: 1px solid #f87171;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn-sad-delete:hover {
  background: #fef2f2;
  border-color: #ef4444;
}

.danger-zone-wrap.active-confirm .btn-sad-delete {
  background: #ef4444;
  color: white;
  border-color: #ef4444;
  animation: gentleShake 0.5s ease-in-out;
}

.danger-zone-wrap.active-confirm .btn-sad-delete:hover {
  background: #dc2626;
}

/* SVG Face Animation */
.sad-face-svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.4s ease;
}

/* Base states for eyes and mouth */
.face-eye {
  transition: all 0.3s ease;
  transform-origin: center;
}
.face-mouth {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.face-tear {
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.4s ease;
}

/* Hover: Looks slightly worried and drops a tear */
.btn-sad-delete:hover .sad-face-svg {
  transform: scale(1.1);
}
.btn-sad-delete:hover .face-mouth {
  d: path('M 6 15 Q 10 12 14 15'); /* Frowns deeper */
}
.btn-sad-delete:hover .face-tear {
  opacity: 1;
  animation: dropTear 1.5s infinite;
}

/* Active Confirm State: Broken Heart / Full Crying */
.danger-zone-wrap.active-confirm .sad-face-svg {
  transform: scale(1.2) rotate(-5deg);
}
.danger-zone-wrap.active-confirm .face-mouth {
  d: path('M 6 16 Q 10 9 14 16'); /* Extreme frown */
  stroke-width: 2.5;
}
.danger-zone-wrap.active-confirm .face-eye {
  transform: scaleY(0.2); /* Squinting/Crying eyes */
}

@keyframes dropTear {
  0% { transform: translateY(-3px) scale(0.8); opacity: 0; }
  20% { transform: translateY(0px) scale(1); opacity: 1; }
  80% { transform: translateY(8px) scale(0.8); opacity: 0; }
  100% { transform: translateY(8px); opacity: 0; }
}

@keyframes gentleShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-4px); }
}