/**
 * ===============================================================================================
 * LOFI SWAP MODAL - UI POLISH & FINAL TOUCHES
 * ===============================================================================================
 * 
 * This file adds the final polish to ensure a professional, smooth experience.
 * Includes:
 * - Smooth animations
 * - Perfect alignment
 * - Visual feedback
 * - Loading states
 * - Error handling UI
 * 
 * ===============================================================================================
 */

/* ===============================================================================================
 * SMOOTH ENTRY/EXIT ANIMATIONS
 * ===============================================================================================
 */

/* Modal fade in */
#lofi-swap-modal {
  animation: modalFadeIn 0.3s ease-out;
}

#lofi-swap-modal.closing {
  animation: modalFadeOut 0.25s ease-out forwards;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(10px);
  }
}

@keyframes modalFadeOut {
  from {
    opacity: 1;
    backdrop-filter: blur(10px);
  }
  to {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
}

/* Container slide in */
.lofi-swap-container {
  animation: containerSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lofi-swap-container.closing {
  animation: containerSlideOut 0.25s ease-in forwards;
}

@keyframes containerSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes containerSlideOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
}

/* ===============================================================================================
 * LOADING STATES
 * ===============================================================================================
 */

/* Loading overlay */
.lofi-swap-container.loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 29, 62, 0.9);
  backdrop-filter: blur(2px);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
}

/* Animated loader */
.lofi-swap-container.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border: 3px solid rgba(79, 118, 255, 0.2);
  border-top-color: #4F76FF;
  border-radius: 50%;
  animation: loaderSpin 0.8s linear infinite;
  z-index: 1000;
}

@keyframes loaderSpin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Button loading state */
.lofi-swap-button.loading {
  position: relative;
  color: transparent;
}

.lofi-swap-button.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ===============================================================================================
 * INPUT FOCUS STATES
 * ===============================================================================================
 */

/* Token section focus */
.lofi-swap-token-section:has(.lofi-swap-input:focus) {
  border-color: rgba(79, 118, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(79, 118, 255, 0.1);
}

/* Input focus animation */
.lofi-swap-input:focus {
  animation: inputFocusPulse 2s ease-in-out infinite;
}

@keyframes inputFocusPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.9;
  }
}

/* ===============================================================================================
 * PRICE UPDATE ANIMATIONS
 * ===============================================================================================
 */

/* Price change indicator */
.lofi-price-value {
  position: relative;
  transition: color 0.3s ease;
}

.lofi-price-value.price-up {
  color: #10b981;
}

.lofi-price-value.price-down {
  color: #ff4444;
}

/* Flash effect for price updates */
.lofi-price-flash {
  position: absolute;
  top: -2px;
  left: -10px;
  right: -10px;
  bottom: -2px;
  background: linear-gradient(90deg, transparent, rgba(79, 118, 255, 0.3), transparent);
  transform: translateX(-100%);
  animation: priceFlash 0.4s ease-out;
  pointer-events: none;
  border-radius: 4px;
}

@keyframes priceFlash {
  to {
    transform: translateX(100%);
  }
}

/* ===============================================================================================
 * TRANSACTION STATUS INDICATORS
 * ===============================================================================================
 */

/* Success state */
.lofi-transaction-item.success {
  animation: txSuccess 0.5s ease-out;
}

@keyframes txSuccess {
  0% {
    background: rgba(16, 185, 129, 0.3);
  }
  100% {
    background: rgba(42, 45, 94, 0.9);
  }
}

/* Failed state */
.lofi-transaction-item.failed {
  animation: txFailed 0.5s ease-out;
}

@keyframes txFailed {
  0% {
    background: rgba(255, 68, 68, 0.3);
  }
  100% {
    background: rgba(42, 45, 94, 0.9);
  }
}

/* Pending pulse */
.lofi-transaction-item.pending .lofi-transaction-icon {
  animation: pendingPulse 2s ease-in-out infinite;
}

@keyframes pendingPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(0.95);
  }
}

/* ===============================================================================================
 * ERROR STATES
 * ===============================================================================================
 */

/* Input error state */
.lofi-swap-token-section.error {
  animation: errorShake 0.5s ease-in-out;
  border-color: rgba(255, 68, 68, 0.5);
}

.lofi-swap-token-section.error .lofi-swap-input {
  color: #ff4444;
}

@keyframes errorShake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-2px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(2px);
  }
}

/* ===============================================================================================
 * TOOLTIP ANIMATIONS
 * ===============================================================================================
 */

/* Tooltip for info icons */
.lofi-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: rgba(26, 29, 62, 0.95);
  border: 1px solid rgba(138, 138, 237, 0.3);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: #ffffff;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1000;
}

.lofi-tooltip::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(138, 138, 237, 0.3);
}

*:hover > .lofi-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-12px);
}

/* ===============================================================================================
 * MICRO-INTERACTIONS
 * ===============================================================================================
 */

/* Button press effect */
.lofi-swap-button:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(79, 118, 255, 0.3);
}

/* Max button hover */
.lofi-max-button {
  position: relative;
  overflow: hidden;
}

.lofi-max-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(79, 118, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
}

.lofi-max-button:hover::before {
  width: 100%;
  height: 100%;
}

/* Token selector hover */
.lofi-token-selector {
  position: relative;
  overflow: hidden;
}

.lofi-token-selector::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(138, 138, 237, 0.2), transparent);
  transition: left 0.5s ease;
}

.lofi-token-selector:hover::after {
  left: 100%;
}

/* ===============================================================================================
 * PERFECT ALIGNMENT FIXES
 * ===============================================================================================
 */

/* Ensure all text is properly aligned */
.lofi-swap-token-header,
.lofi-swap-detail-row,
.lofi-recent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Icon alignment */
.lofi-modal-icon,
.lofi-transaction-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

/* Input group alignment */
.lofi-swap-input-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ===============================================================================================
 * FINAL POLISH
 * ===============================================================================================
 */

/* Smooth all transitions */
.lofi-swap-container * {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Disable text selection on UI elements */
.lofi-swap-button,
.lofi-max-button,
.lofi-slippage-preset,
.lofi-token-selector,
.lofi-modal-close {
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Ensure proper stacking */
.lofi-modal-header {
  z-index: 20;
}

.lofi-swap-button {
  z-index: 15;
}

.lofi-swap-message {
  z-index: 25;
}

/* Perfect shadows */
.lofi-swap-container {
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04),
    0 0 60px rgba(79, 118, 255, 0.1);
}

/* Crisp borders */
.lofi-swap-container,
.lofi-swap-token-section,
.lofi-swap-details {
  border-width: 1px;
  border-style: solid;
}

/* Ensure modal is always on top */
#lofi-swap-modal {
  z-index: 999999;
}

/* ===============================================================================================
 * RESPONSIVE POLISH
 * ===============================================================================================
 */

/* Mobile-specific polish */
@media (max-width: 767px) {
  /* Larger shadows on mobile for depth */
  .lofi-swap-container {
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
  }
  
  /* Smoother animations on mobile */
  .lofi-swap-container,
  .lofi-swap-button {
    animation-duration: 0.3s;
  }
}

/* Desktop-specific polish */
@media (min-width: 1025px) {
  /* Subtle hover effects on desktop */
  .lofi-swap-container:hover {
    box-shadow: 
      0 20px 25px -5px rgba(0, 0, 0, 0.15),
      0 10px 10px -5px rgba(0, 0, 0, 0.06),
      0 0 80px rgba(79, 118, 255, 0.15);
  }
}

/* ===============================================================================================
 * ACCESSIBILITY POLISH
 * ===============================================================================================
 */

/* Ensure focus is always visible */
*:focus-visible {
  outline: 2px solid #4F76FF;
  outline-offset: 2px;
}

/* Skip animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}