/*
 * lofitheyeti.com site + island styles.
 * Consolidated from the 26 legacy CSS patch files in public/assets/css and the modal \3c style>
 * blocks that lived in index.html, kept in their original cascade order (each section is
 * marked with its source). Selectors for markup that no longer exists were removed.
 * Imported by src/main.tsx, so Vite minifies it and serves it with a content hash.
 */

/* ==== price-feed-styles.css ==== */
/* Price Feed Display Styles */

/* Enhanced Swap Modal Styles - Matching Old Design */
.lofi-swap-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 300ms ease;
}

.lofi-swap-modal[style*="display: flex"] {
  opacity: 1;
}

.lofi-swap-container {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: linear-gradient(135deg, #1a1f3a 0%, #2d3561 50%, #3d4785 100%);
  border-radius: 16px;
  border: 1px solid rgba(168, 184, 237, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  padding: 24px;
  transform: scale(0.9);
  transition: transform 300ms ease;
}

.lofi-swap-modal[style*="display: flex"] .lofi-swap-container {
  transform: scale(1);
}

.lofi-swap-button {
  width: 100%;
  background: linear-gradient(135deg, #a8b8ed 0%, #788af4 100%);
  border: none;
  border-radius: 12px;
  padding: 16px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Gluten', Impact, sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 20px;
}

.lofi-swap-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #b5c4f2 0%, #8a9bf6 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(168, 184, 237, 0.4);
}

.lofi-swap-button:disabled {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .lofi-swap-container {
    max-width: 95vw;
    padding: 20px;
  }
}

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

/* Compact format */

/* Banner styles for swap interfaces */

/* Mobile responsive */

/* ===============================================================================================
 * SIMPLE SWAP MODAL STYLES - DIRECT HTML IMPLEMENTATION
 * ===============================================================================================
 * 
 * Easy-to-find, easy-to-edit styles for the simple swap modal built directly into HTML
 * No complex systems, no unified anything - just straightforward styling you can control
 * 
 * ===============================================================================================
 */

/* Mobile responsiveness for simple modal */

/* Professional Corner Button Design */
.lofi-dashboard-corner {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999; /* Increased to ensure button is clickable above other elements */
  max-width: calc(100vw - 48px);
}

.get-lofi-button {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #a8b8ed;
  color: #1a1a2e;
  border: none;
  padding: 12px 20px;
  border-radius: 28px;
  font-family: 'Gluten', Impact, sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(168, 184, 237, 0.3), 
              0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 8px rgba(26, 26, 46, 0.1);
  transition: all 0.3s ease;
}

.swap-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
  object-fit: contain;
  filter: brightness(0.2) contrast(1.2);
}

.get-lofi-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    rgba(255, 255, 255, 0.05) 50%, 
    rgba(0, 0, 0, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.get-lofi-button:hover {
  background: #b5c4f2;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(168, 184, 237, 0.4), 
              0 4px 12px rgba(0, 0, 0, 0.15);
}

.get-lofi-button:hover::before {
  opacity: 1;
}

.get-lofi-button:hover .icon-container {
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 12px rgba(26, 26, 46, 0.15);
}

.get-lofi-button:hover .swap-icon {
  transform: scale(1.1);
}

.get-lofi-button:active {
  transform: translateY(0px);
  box-shadow: 0 2px 8px rgba(168, 184, 237, 0.3), 
              0 1px 4px rgba(0, 0, 0, 0.1);
}

.button-text {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .lofi-dashboard-corner {
    bottom: 20px;
    right: 20px;
  }
  
  .get-lofi-button {
    padding: 10px 16px;
    border-radius: 24px;
    gap: 10px;
  }
  
  .icon-container {
    width: 24px;
    height: 24px;
    border-radius: 12px;
  }
  
  .swap-icon {
    width: 14px;
    height: 14px;
  }
  
  .button-text {
    font-size: 14px;
  }
}

/* Tablet adjustments */
@media (max-width: 1024px) and (min-width: 769px) {
  .lofi-dashboard-corner {
    bottom: 22px;
    right: 22px;
  }
  
  .get-lofi-button {
    padding: 13px 22px;
    font-size: 15px;
  }
}

/* ==== wallet-modal-styles.css ==== */
/**
 * ===============================================================================================
 * LOFI WALLET MODAL STYLES
 * ===============================================================================================
 * 
 * Premium wallet connection modal styling following LOFI design system.
 * Features official wallet branding, smooth animations, and mobile-first responsive design.
 * 
 * Design Principles:
 * - Dark theme with electric green (#00ff88) accent
 * - Gluten font family for brand consistency
 * - Smooth transitions and hover effects
 * - High contrast for accessibility
 * - Mobile-first responsive approach
 * 
 * ===============================================================================================
 */

/* ===============================================================================================
 * WALLET MODAL OVERLAY & CONTAINER
 * ===============================================================================================
 */

#lofi-wallet-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  animation: lofiModalFadeIn 0.3s ease-out;
  padding: 20px;
}

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

.lofi-modal-container {
  background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 24px;
  padding: 32px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 
    0 0 0 1px rgba(0, 255, 136, 0.1),
    0 20px 80px rgba(0, 0, 0, 0.8),
    0 0 120px rgba(0, 255, 136, 0.15),
    inset 0 0 40px rgba(0, 255, 136, 0.03);
  animation: lofiModalSlideIn 0.4s ease-out;
  position: relative;
  overflow: visible;
}

/* Glow effect on container */
.lofi-modal-container::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, 
    transparent 30%, 
    rgba(0, 255, 136, 0.1) 50%, 
    transparent 70%);
  border-radius: 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.lofi-modal-container:hover::before {
  opacity: 1;
  animation: lofiGlowRotate 3s linear infinite;
}

@keyframes lofiGlowRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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

/* ===============================================================================================
 * MODAL HEADER
 * ===============================================================================================
 */

.lofi-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  position: relative;
}

.lofi-modal-header h2 {
  font-family: 'Gluten', 'Arial Black', sans-serif;
  font-weight: 800;
  font-size: 32px;
  color: #00ff88;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 
    0 0 20px rgba(0, 255, 136, 0.5),
    0 0 40px rgba(0, 255, 136, 0.3);
  animation: lofiTextGlow 2s ease-in-out infinite alternate;
}

@keyframes lofiTextGlow {
  from {
    text-shadow: 
      0 0 20px rgba(0, 255, 136, 0.5),
      0 0 40px rgba(0, 255, 136, 0.3);
  }
  to {
    text-shadow: 
      0 0 30px rgba(0, 255, 136, 0.7),
      0 0 60px rgba(0, 255, 136, 0.4);
  }
}

.lofi-modal-close {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

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

.lofi-modal-close:hover {
  background: rgba(255, 68, 68, 0.1);
  border-color: rgba(255, 68, 68, 0.5);
  color: #ff4444;
  transform: rotate(90deg);
}

.lofi-modal-close:hover::before {
  width: 100%;
  height: 100%;
}

/* ===============================================================================================
 * WALLET OPTIONS CONTAINER
 * ===============================================================================================
 */

.lofi-wallet-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Wallet Option Button */
.lofi-wallet-option {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(45, 45, 45, 0.3) 0%, rgba(26, 26, 26, 0.3) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

/* Shimmer effect */
.lofi-wallet-option::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(0, 255, 136, 0.1) 50%,
    transparent 70%
  );
  transform: rotate(45deg) translateX(-100%);
  transition: transform 0.6s ease;
}

.lofi-wallet-option:hover::before {
  transform: rotate(45deg) translateX(100%);
}

.lofi-wallet-option:hover {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.08) 0%, rgba(0, 255, 136, 0.03) 100%);
  border-color: rgba(0, 255, 136, 0.3);
  transform: translateX(8px);
  box-shadow: 
    0 4px 20px rgba(0, 255, 136, 0.2),
    inset 0 0 20px rgba(0, 255, 136, 0.05);
}

/* Active/pressed state */
.lofi-wallet-option:active {
  transform: translateX(4px) scale(0.98);
  transition: transform 0.1s ease;
}

/* ===============================================================================================
 * WALLET BRANDING
 * ===============================================================================================
 */

.lofi-wallet-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.lofi-wallet-option:hover .lofi-wallet-icon {
  transform: scale(1.05);
  border-color: rgba(0, 255, 136, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.2);
}

.lofi-wallet-icon img,
.lofi-wallet-icon svg {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

/* Wallet-specific icon styling */
.lofi-wallet-option[data-wallet="phantom"] .lofi-wallet-icon {
  background: linear-gradient(135deg, #534BB1 0%, #6E5EC1 100%);
}

.lofi-wallet-option[data-wallet="okx"] .lofi-wallet-icon {
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
}

.lofi-wallet-option[data-wallet="slush"] .lofi-wallet-icon {
  background: linear-gradient(135deg, #FF6B00 0%, #FF8800 100%);
}

/* ===============================================================================================
 * WALLET INFO
 * ===============================================================================================
 */

.lofi-wallet-info {
  flex: 1;
  text-align: left;
}

.lofi-wallet-name {
  font-family: 'Gluten', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #ffffff;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

.lofi-wallet-option:hover .lofi-wallet-name {
  color: #00ff88;
}

.lofi-wallet-status {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Status indicators */
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #666;
  transition: all 0.3s ease;
}

.status-dot.detected {
  background: #00ff88;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
  animation: lofiPulse 2s ease-in-out infinite;
}

.status-dot.not-detected {
  background: #ff8800;
  box-shadow: 0 0 10px rgba(255, 136, 0, 0.5);
}

@keyframes lofiPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

/* ===============================================================================================
 * WALLET ARROW INDICATOR
 * ===============================================================================================
 */

.lofi-wallet-arrow {
  font-size: 24px;
  color: rgba(0, 255, 136, 0.6);
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
}

.lofi-wallet-option:hover .lofi-wallet-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ===============================================================================================
 * NOT INSTALLED STATE
 * ===============================================================================================
 */

.lofi-wallet-option.not-installed {
  background: linear-gradient(135deg, rgba(45, 45, 45, 0.2) 0%, rgba(26, 26, 26, 0.2) 100%);
  border-style: dashed;
  opacity: 0.8;
}

.lofi-wallet-option.not-installed:hover {
  opacity: 1;
  background: linear-gradient(135deg, rgba(255, 136, 0, 0.08) 0%, rgba(255, 136, 0, 0.03) 100%);
  border-color: rgba(255, 136, 0, 0.3);
}

.lofi-wallet-option.not-installed .lofi-wallet-status {
  color: #ff8800;
}

/* ===============================================================================================
 * LOADING STATE
 * ===============================================================================================
 */

.lofi-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(0, 255, 136, 0.1);
  border-top-color: #00ff88;
  border-radius: 50%;
  margin: 0 auto 20px;
  animation: lofiSpin 1s linear infinite;
}

@keyframes lofiSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ===============================================================================================
 * CONNECTED STATE
 * ===============================================================================================
 */

/* ===============================================================================================
 * ACTION BUTTONS
 * ===============================================================================================
 */

/* ===============================================================================================
 * WALLET ICONS (INLINE SVG FALLBACKS)
 * ===============================================================================================
 */

/* Default wallet icon (generic) */

/* ===============================================================================================
 * RESPONSIVE DESIGN
 * ===============================================================================================
 */

@media (max-width: 768px) {
  .lofi-modal-container {
    padding: 24px;
    margin: 20px;
  }
  
  .lofi-modal-header h2 {
    font-size: 28px;
  }
  
  .lofi-wallet-option {
    padding: 16px 20px;
  }
  
  .lofi-wallet-icon {
    width: 48px;
    height: 48px;
  }
  
  .lofi-wallet-icon img,
  .lofi-wallet-icon svg {
    width: 32px;
    height: 32px;
  }
  
  .lofi-wallet-name {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  #lofi-wallet-modal {
    padding: 0;
  }
  
  .lofi-modal-container {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    padding: 20px;
    margin: 0;
  }
  
  .lofi-modal-header {
    margin-bottom: 24px;
  }
  
  .lofi-modal-header h2 {
    font-size: 24px;
  }
  
  .lofi-modal-close {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .lofi-wallet-option {
    padding: 14px 16px;
    gap: 12px;
  }
  
  .lofi-wallet-icon {
    width: 44px;
    height: 44px;
  }
  
  .lofi-wallet-name {
    font-size: 16px;
  }
  
  .lofi-wallet-status {
    font-size: 13px;
  }
  
  .lofi-wallet-arrow {
    font-size: 20px;
  }
}

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

/* Focus states for keyboard navigation */
.lofi-wallet-option:focus-visible,
.lofi-modal-close:focus-visible {
  outline: 2px solid #00ff88;
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .lofi-modal-container {
    border-width: 2px;
  }
  
  .lofi-wallet-option {
    border-width: 2px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===============================================================================================
 * CUSTOM SCROLLBAR
 * ===============================================================================================
 */

.lofi-modal-container::-webkit-scrollbar {
  width: 8px;
}

.lofi-modal-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.lofi-modal-container::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 136, 0.3);
  border-radius: 4px;
  transition: background 0.3s ease;
}

.lofi-modal-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 255, 136, 0.5);
}

/* Firefox scrollbar */
.lofi-modal-container {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 255, 136, 0.3) rgba(255, 255, 255, 0.05);
}

/* ==== loading-transitions.css ==== */
/* ============================================================
   LOFI DEX - Loading States & Smooth Transitions
   ============================================================ */

/* Global Transition Settings */
* {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* ease-out for natural feel */
}

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

/* ============================================================
   Loading States
   ============================================================ */

/* Skeleton Loading */

/* Pulse Loading */

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

/* Spinner Loading */

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Dots Loading */

/* ============================================================
   Button States & Transitions
   ============================================================ */

/* Base Button Transitions */
.button,
button {
  transition: all 0.2s ease-out;
  transform: translateZ(0); /* Hardware acceleration */
  will-change: transform, box-shadow;
}

.button:hover,
button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(168, 184, 237, 0.2);
}

.button:active,
button:active {
  transform: translateY(0);
  transition-duration: 0.1s;
}

/* Loading Button State */
.button.loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.button.loading::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: spin 0.8s linear infinite;
}

/* Success State */
.button.success {
  background: #10b981 !important;
  animation: success-pulse 0.5s ease-out;
}

@keyframes success-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Error State */
.button.error {
  background: #ef4444 !important;
  animation: error-shake 0.5s ease-out;
}

@keyframes error-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

/* ============================================================
   Modal Transitions
   ============================================================ */

/* Modal Backdrop */
.lofi-wallet-modal {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.lofi-wallet-modal.show {
  opacity: 1;
}

/* Modal Content */
.lofi-wallet-modal-content {
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lofi-wallet-modal.show .lofi-wallet-modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Modal Close Animation */
.lofi-wallet-modal.closing {
  opacity: 0;
}

.lofi-wallet-modal.closing .lofi-wallet-modal-content {
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  transition-duration: 0.2s;
}

/* ============================================================
   Input & Form Transitions
   ============================================================ */

/* Input Fields */
input[type="text"],
input[type="number"],
textarea,
select {
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: #a8b8ed;
  box-shadow: 0 0 0 3px rgba(168, 184, 237, 0.1);
}

/* Input Loading State */

/* ============================================================
   Price & Value Transitions
   ============================================================ */

/* Price Updates */

/* ============================================================
   List & Item Transitions
   ============================================================ */

/* List Items */

/* List Item Entry Animation */

/* Staggered List Animation */

/* ============================================================
   Notification Transitions
   ============================================================ */

/* Notification Entry */

/* Notification Exit */

/* ============================================================
   Swap Interface Transitions
   ============================================================ */

/* Token Swap Animation */

/* Swap Preview */

/* ============================================================
   Progress Indicators
   ============================================================ */

/* Progress Bar */

/* Indeterminate Progress */

/* ============================================================
   Success Animations
   ============================================================ */

/* Checkmark Animation */

/* Confetti Animation */

/* ============================================================
   Utility Classes
   ============================================================ */

/* Fade Transitions */

/* Slide Transitions */

/* Scale Transitions */

/* Smooth Height Transitions */

/* No Transition Class */

/* ==== ux-polish.css ==== */
/* ============================================================
   LOFI DEX - Final UX Polish & Production-Ready Styles
   ============================================================ */

/* Smooth Focus States */
input:focus,
textarea:focus,
select:focus,
button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(168, 184, 237, 0.2);
  transition: box-shadow 0.2s ease-out;
}

/* Enhanced Button States */
.button,
button {
  position: relative;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.button:active::before,
button:active::before {
  width: 300px;
  height: 300px;
}

/* Loading State Polish */

/* Elegant Spinner */

/* Price Update Animation */

/* Modal Polish */

/* Success Animation */

@keyframes success-pulse {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Error Shake */

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

/* Smooth Number Transitions */

/* Input Enhancements */
input[type="text"],
input[type="number"] {
  transition: all 0.2s ease-out;
}

input[type="text"]:hover,
input[type="number"]:hover {
  border-color: rgba(168, 184, 237, 0.5);
}

input[type="text"]:focus,
input[type="number"]:focus {
  border-color: #a8b8ed;
  transform: translateY(-1px);
}

/* Tooltip Animations */

/* Micro-interactions */

/* Loading Skeleton Polish */

/* Notification Polish */

/* Page Transitions */

/* Smooth Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(168, 184, 237, 0.1);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: rgba(168, 184, 237, 0.3);
  border-radius: 5px;
  transition: background 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(168, 184, 237, 0.5);
}

/* Production Error Prevention */

/* Performance Optimizations */

/* Final Polish */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Remove tap highlight on mobile */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Ensure smooth animations even under load */
@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

/* ==== universal-gluten-font.css ==== */
/**
 * ===============================================================================================
 * UNIVERSAL GLUTEN FONT ENFORCEMENT
 * ===============================================================================================
 * 
 * Forces ALL text on the site to use Gluten font family, regardless of:
 * - Existing CSS classes
 * - Inline styles
 * - JavaScript-added elements
 * - Third-party components
 * - Error messages, notifications, modals
 * - Dynamic content
 * 
 * Uses maximum CSS specificity and !important to override everything
 * ===============================================================================================
 */

/* ============================================================================
 * GLOBAL FONT FAMILY ENFORCEMENT - HIGHEST PRIORITY
 * ============================================================================ */

/* Universal selector with maximum specificity */
*,
*::before,
*::after,
html,
body {
    font-family: 'Gluten', 'Impact', 'Arial Black', sans-serif !important;
}

/* ============================================================================
 * ALL TEXT ELEMENTS - COMPREHENSIVE COVERAGE
 * ============================================================================ */

/* Basic text elements */
h1, h2, h3, h4, h5, h6,
p, span, div, a, strong, em, i, b,
small, big, sub, sup, mark,
blockquote, cite, q, abbr, dfn,
code, pre, kbd, samp, var,
time, address {
    font-family: 'Gluten', 'Impact', 'Arial Black', sans-serif !important;
}

/* Form elements */
input, textarea, select, option, optgroup,
button, label, fieldset, legend,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="tel"],
input[type="url"], input[type="date"], input[type="time"] {
    font-family: 'Gluten', 'Impact', 'Arial Black', sans-serif !important;
}

/* Interactive elements */
button, a, summary, details {
    font-family: 'Gluten', 'Impact', 'Arial Black', sans-serif !important;
}

/* List elements */
ul, ol, li, dl, dt, dd {
    font-family: 'Gluten', 'Impact', 'Arial Black', sans-serif !important;
}

/* Table elements */
table, th, td, caption, thead, tbody, tfoot, tr {
    font-family: 'Gluten', 'Impact', 'Arial Black', sans-serif !important;
}

/* ============================================================================
 * DYNAMIC AND JAVASCRIPT-ADDED ELEMENTS
 * ============================================================================ */

/* All div and span variations (common for dynamic content) */
div[class*=""], span[class*=""], div[id*=""], span[id*=""], .alert {
    font-family: 'Gluten', 'Impact', 'Arial Black', sans-serif !important;
}

/* ============================================================================
 * ERROR HANDLING AND NOTIFICATION SYSTEMS
 * ============================================================================ */

/* Error Handler elements */

/* Swap and wallet related messages */

/* ============================================================================
 * MODAL AND POPUP CONTENT
 * ============================================================================ */

/* All modal content */
[class*="modal"] *, [id*="modal"] *,
[class*="popup"] *, [id*="popup"] *,
[class*="dialog"] *, [id*="dialog"] *,
[class*="overlay"] *, [id*="overlay"] * {
    font-family: 'Gluten', 'Impact', 'Arial Black', sans-serif !important;
}

/* Specific modal classes from the codebase */
.lofi-swap-modal * {
    font-family: 'Gluten', 'Impact', 'Arial Black', sans-serif !important;
}

/* ============================================================================
 * THIRD-PARTY AND WIDGET CONTENT
 * ============================================================================ */

/* Wallet integration elements */
[class*="wallet"] *, [id*="wallet"] *,
[class*="phantom"] *, [class*="okx"] *, [class*="slush"] *,
[data-wallet] *, [data-provider] * {
    font-family: 'Gluten', 'Impact', 'Arial Black', sans-serif !important;
}

/* Price feed and trading elements */
[class*="price"] *, [id*="price"] *,
[class*="swap"] *, [id*="swap"] *,
[class*="trade"] *, [id*="trade"] *,
[data-price] *, [data-swap] * {
    font-family: 'Gluten', 'Impact', 'Arial Black', sans-serif !important;
}

/* ============================================================================
 * WEBFLOW AND FRAMEWORK OVERRIDES
 * ============================================================================ */

/* Webflow specific classes */
.w-nav-link, .w-nav-menu, .w-button, .text-block-10, .navigation-item-2, .buttontext, .heading-6, .button, .w-inline-block {
    font-family: 'Gluten', 'Impact', 'Arial Black', sans-serif !important;
}

/* ============================================================================
 * PSEUDO-ELEMENTS AND GENERATED CONTENT
 * ============================================================================ */

/* All pseudo-elements */
*::before, *::after {
    font-family: 'Gluten', 'Impact', 'Arial Black', sans-serif !important;
}

/* Placeholder text */
::placeholder, ::-webkit-input-placeholder, ::-moz-placeholder {
    font-family: 'Gluten', 'Impact', 'Arial Black', sans-serif !important;
}

/* ============================================================================
 * DYNAMIC CONTENT PATTERNS
 * ============================================================================ */

/* Common JavaScript-added content patterns */
[data-content], [data-text], [data-label],
[data-value], [data-amount], [data-balance],
[data-status], [data-message], [data-error] {
    font-family: 'Gluten', 'Impact', 'Arial Black', sans-serif !important;
}

/* All elements with text content - nuclear option */
*:not(script):not(style):not(meta):not(link):not(title) {
    font-family: 'Gluten', 'Impact', 'Arial Black', sans-serif !important;
}

/* ============================================================================
 * ANIMATION AND TRANSITION STATES
 * ============================================================================ */

/* Elements during animations (they might have different font rules) */
.loading * {
    font-family: 'Gluten', 'Impact', 'Arial Black', sans-serif !important;
}

/* ============================================================================
 * ACCESSIBILITY AND SCREEN READER CONTENT
 * ============================================================================ */

/* Screen reader and accessibility content */
[aria-label], [aria-labelledby], [aria-describedby], [role="alert"], [role="status"], [role="log"] {
    font-family: 'Gluten', 'Impact', 'Arial Black', sans-serif !important;
}

/* ============================================================================
 * CONSOLE AND DEBUG MESSAGES (if visible)
 * ============================================================================ */

/* In case any debug info is rendered */
[class*="debug"] *, [id*="debug"] * {
    font-family: 'Gluten', 'Impact', 'Arial Black', sans-serif !important;
}

/* ============================================================================
 * FINAL NUCLEAR OPTION - MAXIMUM SPECIFICITY
 * ============================================================================ */

/* Absolutely everything with text - most aggressive override */
html * {
    font-family: 'Gluten', 'Impact', 'Arial Black', sans-serif !important;
}

/* Document-level enforcement */
:root {
    --font-family-override: 'Gluten', 'Impact', 'Arial Black', sans-serif;
}

/* Body with maximum specificity */
html body {
    font-family: 'Gluten', 'Impact', 'Arial Black', sans-serif !important;
}

/* ============================================================================
 * FUTURE-PROOF PATTERNS
 * ============================================================================ */

/* React/Vue/Angular component patterns */
[class*="component"] *, [class*="widget"] *,
[class*="module"] *, [class*="element"] * {
    font-family: 'Gluten', 'Impact', 'Arial Black', sans-serif !important;
}

/* ============================================================================
 * PRINT AND MEDIA OVERRIDES
 * ============================================================================ */

@media print {
    * {
        font-family: 'Gluten', 'Impact', 'Arial Black', sans-serif !important;
    }
}

@media screen {
    * {
        font-family: 'Gluten', 'Impact', 'Arial Black', sans-serif !important;
    }
}

/* ==== wallet-icons.css ==== */
/**
 * Wallet Icon Styles
 * Styles for wallet buttons with icons
 */

/* Wallet Button Base Styles */

/* Button Content Container */

/* Wallet Icon */

/* Specific wallet icon adjustments */
[data-wallet-icon="okx"] {
  border-radius: 6px;
}

[data-wallet-icon="phantom"] {
  filter: drop-shadow(0 0 8px rgba(185, 115, 255, 0.3));
}

[data-wallet-icon="slush"] {
  border-radius: 50%;
}

/* Button Text */

/* Loading State */

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Token Icons */

/* Token specific styles */
[data-token-icon="sui"] {
  background: #4DA2FF;
  padding: 4px;
}

[data-token-icon="lofi"] {
  background: #6B7BFF;
  padding: 4px;
}

/* Swap Modal Token Icons */

/* Multiple Wallet Container */

/* Responsive */

/* Dark mode adjustments */

/* Animation for icon loading */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Error state for failed image loads */

/* ==== swap-modal-redesign.css ==== */
/**
 * ===============================================================================================
 * LOFI SWAP MODAL REDESIGN - Modern DeFi UI/UX
 * ===============================================================================================
 * 
 * Complete redesign of the swap modal following best practices from:
 * - Uniswap V3
 * - PancakeSwap
 * - Turbos Finance
 * 
 * Features:
 * - Mobile-first responsive design
 * - Dark theme with purple/blue LOFI gradients
 * - Dynamic token images with fallbacks
 * - Smooth animations and transitions
 * - Touch-friendly controls
 * - Web3 standard compliance
 * 
 * ===============================================================================================
 */

/* ===============================================================================================
 * ROOT VARIABLES - LOFI Design System
 * ===============================================================================================
 */
:root {
  /* LOFI Brand Colors */
  --lofi-swap-primary: #4F76FF;
  --lofi-swap-primary-light: #6b8bff;
  --lofi-swap-primary-dark: #3a5ed8;
  --lofi-swap-secondary: #a8b8ed;
  --lofi-swap-accent: #4F76FF;
  --lofi-swap-accent-dim: rgba(79, 118, 255, 0.1);
  
  /* Background Colors - Dark Theme to match modal.PNG */
  --lofi-swap-bg-main: #2a2d5e;
  --lofi-swap-bg-card: rgba(42, 45, 94, 0.9);
  --lofi-swap-bg-input: rgba(42, 45, 94, 0.8);
  --lofi-swap-bg-hover: rgba(42, 45, 94, 0.95);
  --lofi-swap-bg-active: rgba(79, 118, 255, 0.1);
  
  /* Text Colors - Light text for dark theme */
  --lofi-swap-text-primary: #ffffff;
  --lofi-swap-text-secondary: #a8b8ed;
  --lofi-swap-text-muted: #8898cd;
  --lofi-swap-text-disabled: #5568a0;
  
  /* Border Colors - Subtle purple/blue tints */
  --lofi-swap-border-default: rgba(138, 138, 237, 0.2);
  --lofi-swap-border-hover: rgba(138, 138, 237, 0.4);
  --lofi-swap-border-active: rgba(138, 138, 237, 0.6);
  --lofi-swap-border-focus: #8a8aed;
  
  /* Status Colors */
  --lofi-swap-success: #10b981;
  --lofi-swap-warning: #f59e0b;
  --lofi-swap-error: #ef4444;
  --lofi-swap-info: #3b82f6;
  
  /* Spacing Scale */
  --lofi-swap-space-xs: 4px;
  --lofi-swap-space-sm: 8px;
  --lofi-swap-space-md: 16px;
  --lofi-swap-space-lg: 24px;
  --lofi-swap-space-xl: 32px;
  --lofi-swap-space-2xl: 48px;
  
  /* Border Radius */
  --lofi-swap-radius-sm: 8px;
  --lofi-swap-radius-md: 12px;
  --lofi-swap-radius-lg: 16px;
  --lofi-swap-radius-xl: 20px;
  --lofi-swap-radius-full: 9999px;
  
  /* Transitions */
  --lofi-swap-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --lofi-swap-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --lofi-swap-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Shadows - Dark Theme with Purple Glow */
  --lofi-swap-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --lofi-swap-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --lofi-swap-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  --lofi-swap-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.6);
  --lofi-swap-shadow-glow: 0 0 30px rgba(138, 138, 237, 0.3);
}

/* ===============================================================================================
 * MODAL OVERLAY & CONTAINER
 * ===============================================================================================
 */
#lofi-swap-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--lofi-swap-space-md);
  opacity: 0;
  transition: opacity var(--lofi-swap-transition-slow);
}

#lofi-swap-modal.show {
  opacity: 1;
}

.lofi-swap-container {
  background: linear-gradient(180deg, #2a2d5e 0%, #1a1d3e 100%);
  border: 2px solid var(--lofi-swap-border-default);
  border-radius: var(--lofi-swap-radius-xl);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--lofi-swap-shadow-xl), var(--lofi-swap-shadow-glow);
  transform: scale(0.95) translateY(20px);
  transition: transform var(--lofi-swap-transition-slow), box-shadow var(--lofi-swap-transition-slow);
}

#lofi-swap-modal.show .lofi-swap-container {
  transform: scale(1) translateY(0);
}

/* ===============================================================================================
 * MODAL HEADER
 * ===============================================================================================
 */
.lofi-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--lofi-swap-space-lg);
  border-bottom: 1px solid var(--lofi-swap-border-default);
}

.lofi-modal-header h2 {
  font-family: 'Gluten', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--lofi-swap-primary);
  margin: 0;
}

.lofi-modal-close {
  width: 40px;
  height: 40px;
  border-radius: var(--lofi-swap-radius-full);
  border: 1px solid var(--lofi-swap-border-default);
  background: transparent;
  color: var(--lofi-swap-text-secondary);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--lofi-swap-transition-base);
  box-shadow: var(--lofi-swap-shadow-sm);
}

.lofi-modal-close:hover {
  background: var(--lofi-swap-bg-hover);
  border-color: var(--lofi-swap-border-hover);
  color: var(--lofi-swap-text-primary);
  transform: rotate(90deg);
  box-shadow: var(--lofi-swap-shadow-md);
}

/* ===============================================================================================
 * SWAP CONTENT
 * ===============================================================================================
 */
.lofi-modal-content {
  padding: var(--lofi-swap-space-lg);
}

/* Swap Direction Toggle */

/* Reduce text size for token symbols in input/output sections */

/* ===============================================================================================
 * INPUT/OUTPUT SECTIONS
 * ===============================================================================================
 */

/* ===============================================================================================
 * SLIPPAGE SETTINGS
 * ===============================================================================================
 */

/* ===============================================================================================
 * TRANSACTION DETAILS
 * ===============================================================================================
 */

/* ===============================================================================================
 * EXECUTE BUTTON
 * ===============================================================================================
 */

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

/* ===============================================================================================
 * ANIMATIONS
 * ===============================================================================================
 */
@keyframes lofi-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

/* ===============================================================================================
 * RESPONSIVE DESIGN
 * ===============================================================================================
 */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
  .lofi-swap-container {
    max-width: 90%;
  }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
  #lofi-swap-modal {
    padding: 0;
    align-items: flex-end;
  }
  
  .lofi-swap-container {
    max-width: 100%;
    max-height: 85vh;
    border-radius: var(--lofi-swap-radius-xl) var(--lofi-swap-radius-xl) 0 0;
    margin: 0;
  }
  
  .lofi-modal-header {
    padding: var(--lofi-swap-space-md);
  }
  
  .lofi-modal-header h2 {
    font-size: 20px;
  }
  
  .lofi-modal-content {
    padding: var(--lofi-swap-space-md);
  }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
  .lofi-modal-header h2 {
    font-size: 18px;
  }
}

/* ===============================================================================================
 * UTILITY CLASSES
 * ===============================================================================================
 */

.lofi-skeleton {
  background: var(--lofi-swap-bg-hover);
  border-radius: var(--lofi-swap-radius-sm);
  animation: lofi-pulse 1.5s infinite;
}

/* Scrollbar Styling */
.lofi-swap-container::-webkit-scrollbar {
  width: 8px;
}

.lofi-swap-container::-webkit-scrollbar-track {
  background: var(--lofi-swap-bg-hover);
  border-radius: var(--lofi-swap-radius-sm);
}

.lofi-swap-container::-webkit-scrollbar-thumb {
  background: var(--lofi-swap-border-hover);
  border-radius: var(--lofi-swap-radius-sm);
}

.lofi-swap-container::-webkit-scrollbar-thumb:hover {
  background: var(--lofi-swap-primary);
}

/* Focus Visible for Accessibility */
.lofi-modal-close:focus-visible {
  outline: 2px solid rgba(138, 138, 237, 0.8);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(138, 138, 237, 0.2);
}

/* Disabled State */

/* Error State */

/* Success State */

/* ==== swap-modal-balance.css ==== */
/* 
 * ===============================================================================================
 * LOFI SWAP MODAL STYLES
 * ===============================================================================================
 * Enhanced swap modal matching LOFI design system
 * Features official branding, smooth animations, and consistent UI
 * ===============================================================================================
 */

/* Modal Background and Container */
#lofi-swap-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  animation: lofiModalFadeIn 0.3s ease-out;
  padding: 20px;
}

#lofi-swap-modal.show {
  display: flex;
}

.lofi-swap-container {
  padding: 32px;
}

/* Modal Header - Matching Wallet Modal Style */
.lofi-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  position: relative;
}

.lofi-modal-header h2 {
  font-family: 'Gluten', 'Arial Black', sans-serif;
  font-weight: 800;
  font-size: 32px;
  color: #4F76FF;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 
    0 0 20px rgba(79, 118, 255, 0.5),
    0 0 40px rgba(79, 118, 255, 0.3);
  animation: lofiTextGlow 2s ease-in-out infinite alternate;
}

.lofi-modal-close {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.lofi-modal-close:hover {
  background: rgba(255, 68, 68, 0.1);
  border-color: rgba(255, 68, 68, 0.5);
  color: #ff4444;
  transform: rotate(90deg);
}

/* Token Sections */
.lofi-swap-token-section {
  background: rgba(42, 45, 94, 0.9);
  border: 2px solid rgba(138, 138, 237, 0.2);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.lofi-swap-token-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(79, 118, 255, 0.05) 50%,
    transparent 70%
  );
  transform: rotate(45deg) translateX(-100%);
  transition: transform 0.6s ease;
}

.lofi-swap-token-section:hover::before {
  transform: rotate(45deg) translateX(100%);
}

.lofi-swap-token-section:hover {
  border-color: rgba(79, 118, 255, 0.3);
  box-shadow: 0 0 20px rgba(79, 118, 255, 0.1);
}

.lofi-swap-token-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.lofi-swap-token-header label {
  font-family: 'Gluten', sans-serif;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Balance Display */
.lofi-balance-display {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.lofi-balance-value {
  color: #4F76FF;
  font-weight: 500;
}

.lofi-max-button {
  background: rgba(79, 118, 255, 0.1);
  border: 1px solid rgba(79, 118, 255, 0.3);
  color: #4F76FF;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lofi-max-button:hover {
  background: rgba(79, 118, 255, 0.2);
  border-color: #4F76FF;
}

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

.lofi-swap-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #ffffff;
  font-family: 'Gluten', sans-serif;
  font-size: 28px;
  font-weight: 700;
  outline: none;
  padding: 0;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.lofi-swap-input::placeholder {
  color: rgba(255, 255, 255, 0.2);
  font-weight: 400;
}

.lofi-swap-input:focus {
  text-shadow: 0 0 20px rgba(79, 118, 255, 0.3);
}

.lofi-swap-input::-webkit-inner-spin-button,
.lofi-swap-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Token Selector */
.lofi-token-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(138, 138, 237, 0.1);
  border: 1px solid rgba(138, 138, 237, 0.2);
  padding: 10px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.lofi-token-selector::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(79, 118, 255, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

.lofi-token-selector:hover::before {
  width: 100%;
  height: 100%;
}

.lofi-token-selector:hover {
  background: rgba(138, 138, 237, 0.2);
  border-color: rgba(138, 138, 237, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 118, 255, 0.2);
}

.lofi-token-selector img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(138, 138, 237, 0.2);
  transition: all 0.3s ease;
}

.lofi-token-selector:hover img {
  border-color: rgba(138, 138, 237, 0.4);
  transform: scale(1.05);
}

.lofi-token-selector span {
  font-family: 'Gluten', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
  letter-spacing: 0.5px;
}

/* USD Value Display */
.lofi-input-value-usd {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 8px;
  height: 16px;
}

/* Reverse Button */

/* Swap Details */
.lofi-swap-details {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 16px;
  margin: 20px 0;
}

.lofi-swap-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
}

.lofi-swap-detail-row:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.lofi-swap-detail-row span:first-child {
  color: rgba(255, 255, 255, 0.6);
}

.lofi-swap-detail-row span:last-child {
  color: white;
  font-weight: 500;
}

/* Slippage Controls */
.lofi-slippage-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lofi-slippage-presets {
  display: flex;
  gap: 6px;
}

.lofi-slippage-preset {
  background: linear-gradient(135deg, rgba(45, 45, 45, 0.4) 0%, rgba(26, 26, 26, 0.4) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  padding: 6px 12px;
  border-radius: 8px;
  font-family: 'Gluten', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lofi-slippage-preset:hover {
  background: rgba(79, 118, 255, 0.05);
  border-color: rgba(79, 118, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
}

.lofi-slippage-preset.active {
  background: rgba(79, 118, 255, 0.1);
  border-color: #4F76FF;
  color: #4F76FF;
  box-shadow: 0 0 12px rgba(79, 118, 255, 0.3);
}

/* Slippage Input */
.lofi-slippage-input-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lofi-slippage-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 4px 8px;
  width: 60px;
  color: white;
  font-size: 14px;
  text-align: right;
  outline: none;
}

.lofi-slippage-input:focus {
  border-color: #4F76FF;
  box-shadow: 0 0 10px rgba(79, 118, 255, 0.2);
}

/* Price Impact */

/* Swap Button */
.lofi-swap-button {
  width: 100%;
  padding: 18px 24px;
  background: #4F76FF;
  border: none;
  border-radius: 16px;
  color: #ffffff;
  font-family: 'Gluten', sans-serif;
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 4px 15px rgba(79, 118, 255, 0.4),
    inset 0 -4px 10px rgba(58, 94, 216, 0.3);
}

.lofi-swap-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.lofi-swap-button:hover:not(:disabled)::before {
  left: 100%;
}

.lofi-swap-button:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 
    0 8px 30px rgba(79, 118, 255, 0.5),
    inset 0 -4px 10px rgba(58, 94, 216, 0.4),
    0 0 60px rgba(79, 118, 255, 0.3);
}

.lofi-swap-button:active:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 
    0 4px 15px rgba(79, 118, 255, 0.4),
    inset 0 -2px 5px rgba(58, 94, 216, 0.3);
}

.lofi-swap-button:disabled {
  background: linear-gradient(135deg, rgba(45, 45, 45, 0.6) 0%, rgba(26, 26, 26, 0.6) 100%);
  color: rgba(255, 255, 255, 0.3);
  cursor: not-allowed;
  box-shadow: none;
}

.lofi-swap-button.loading {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.lofi-swap-button.success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.lofi-swap-button.error {
  background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
  color: white;
}

/* Messages */
.lofi-swap-message {
  padding: 16px;
  border-radius: 12px;
  margin-top: 20px;
  font-family: 'Gluten', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.lofi-swap-message-info {
  background: linear-gradient(135deg, rgba(66, 153, 225, 0.1) 0%, rgba(66, 153, 225, 0.05) 100%);
  border: 1px solid rgba(66, 153, 225, 0.3);
  color: #5a9fd4;
  box-shadow: inset 0 0 20px rgba(66, 153, 225, 0.1);
}

.lofi-swap-message-warning {
  background: linear-gradient(135deg, rgba(255, 170, 0, 0.1) 0%, rgba(255, 170, 0, 0.05) 100%);
  border: 1px solid rgba(255, 170, 0, 0.3);
  color: #ffaa00;
  box-shadow: inset 0 0 20px rgba(255, 170, 0, 0.1);
}

.lofi-swap-message-error {
  background: linear-gradient(135deg, rgba(255, 68, 68, 0.1) 0%, rgba(255, 68, 68, 0.05) 100%);
  border: 1px solid rgba(255, 68, 68, 0.3);
  color: #ff4444;
  box-shadow: inset 0 0 20px rgba(255, 68, 68, 0.1);
}

/* Loading States */
.lofi-swap-input.loading {
  color: rgba(255, 255, 255, 0.5);
  animation: pulse 1.5s ease-in-out infinite;
}

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

/* Price Flash Animation */

@keyframes priceFlashSlide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

/* Shake animation for errors */
.shake {
  animation: shake 0.5s ease-in-out;
}

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

/* Rotating animation for reverse button */

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(180deg); }
}

/* Enhanced Modal Styles */

/* LOFI Animations */
@keyframes lofiModalFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(20px);
  }
}

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

@keyframes lofiTextGlow {
  from {
    text-shadow: 
      0 0 20px rgba(79, 118, 255, 0.5),
      0 0 40px rgba(79, 118, 255, 0.3);
  }
  to {
    text-shadow: 
      0 0 30px rgba(79, 118, 255, 0.7),
      0 0 60px rgba(79, 118, 255, 0.4);
  }
}

/* Quick Actions */

/* Quote Loader */
.lofi-quote-loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lofi-quote-skeleton {
  width: 100%;
}

/* Skeleton Loading */
.lofi-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

.lofi-skeleton-text {
  height: 16px;
  width: 80px;
}

.lofi-skeleton-number {
  height: 32px;
  width: 120px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Recent Transactions */
.lofi-recent-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(138, 138, 237, 0.1);
}

.lofi-recent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.lofi-recent-header h3 {
  font-family: 'Gluten', sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lofi-clear-recent {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.lofi-clear-recent:hover {
  color: #ff4444;
}

.lofi-transaction-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  margin-bottom: 8px;
  transition: all 0.2s ease;
}

.lofi-transaction-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.lofi-transaction-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
}

.lofi-transaction-item.success .lofi-transaction-icon {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.lofi-transaction-item.pending .lofi-transaction-icon {
  background: rgba(255, 170, 0, 0.1);
  color: #ffaa00;
}

.lofi-transaction-item.failed .lofi-transaction-icon {
  background: rgba(255, 68, 68, 0.1);
  color: #ff4444;
}

.lofi-transaction-details {
  flex: 1;
}

.lofi-transaction-pair {
  font-size: 14px;
  font-weight: 500;
}

.lofi-transaction-time {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.lofi-transaction-link {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.2s ease;
}

.lofi-transaction-link:hover {
  color: #4F76FF;
}

.lofi-no-transactions {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  padding: 20px;
  font-size: 14px;
}

/* Custom Scrollbar - Matching Wallet Modal */

/* Firefox scrollbar */

/* Accessibility */
.lofi-swap-button:focus-visible,
.lofi-modal-close:focus-visible,
.lofi-slippage-preset:focus-visible {
  outline: 2px solid rgba(138, 138, 237, 0.8);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(138, 138, 237, 0.2);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Responsive */
@media (max-width: 768px) {
  
  .lofi-swap-container {
    padding: 24px;
  }
  
  .lofi-modal-header h2 {
    font-size: 28px;
  }
  
  .lofi-swap-input {
    font-size: 24px;
  }
  
  .lofi-swap-button {
    font-size: 18px;
    padding: 16px;
  }
}

@media (max-width: 480px) {
  #lofi-swap-modal {
    padding: 0;
  }
  
  .lofi-swap-container {
    padding: 20px;
  }
  
  .lofi-modal-header {
    margin-bottom: 24px;
  }
  
  .lofi-modal-header h2 {
    font-size: 24px;
  }
  
  .lofi-modal-close {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .lofi-swap-input {
    font-size: 20px;
  }
  
  .lofi-swap-button {
    font-size: 16px;
    padding: 14px;
  }
  
  .lofi-swap-token-section {
    padding: 16px;
  }
}
/* Fallback quote indicator */

/* ==== enhanced-swap-modal.css ==== */
/**
 * ===============================================================================================
 * LOFI ENHANCED SWAP MODAL STYLES
 * ===============================================================================================
 * 
 * Premium swap modal styling following LOFI design system.
 * Features smooth animations, LOFI branding, and mobile-first responsive design.
 * 
 * Design Principles:
 * - Dark theme with electric green (#00ff88) accent
 * - Gluten font family for brand consistency
 * - Smooth transitions and hover effects
 * - High contrast for accessibility
 * - Mobile-first responsive approach
 * 
 * ===============================================================================================
 */

/* ===============================================================================================
 * MODAL OVERLAY & BASE STRUCTURE
 * ===============================================================================================
 */

#lofi-swap-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: lofiSwapFadeIn 0.3s ease-out;
}

#lofi-swap-modal.show {
  display: flex;
}

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

.lofi-swap-container {
  background: linear-gradient(180deg, #2a2d5e 0%, #1a1d3e 100%);
  border: 2px solid rgba(138, 138, 237, 0.2);
  border-radius: 24px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6), 0 0 30px rgba(138, 138, 237, 0.3);
  animation: lofiSwapSlideIn 0.4s ease-out;
  position: relative;
  overflow: visible;
}

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

/* Glow effect on container */
.lofi-swap-container::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, 
    transparent 30%, 
    rgba(168, 184, 237, 0.1) 50%, 
    transparent 70%);
  border-radius: 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.lofi-swap-container:hover::before {
  opacity: 1;
  animation: lofiGlowRotate 3s linear infinite;
}

@keyframes lofiGlowRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ===============================================================================================
 * MODAL HEADER
 * ===============================================================================================
 */

.lofi-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 14px 20px;
  border-bottom: 1px solid rgba(138, 138, 237, 0.2);
}

.lofi-modal-header h2 {
  font-family: 'Gluten', 'Comic Sans MS', cursive;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: #4F76FF;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lofi-modal-logo {
  width: 32px;
  height: 32px;
  margin-right: 4px;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(168, 184, 237, 0.4));
}

.lofi-modal-close {
  background: none;
  border: none;
  color: #a8b8ed;
  cursor: pointer;
  padding: 6px;
  transition: all 0.2s ease;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -4px -4px 0 0;
}

.lofi-modal-close:hover {
  background: rgba(138, 138, 237, 0.2);
  color: #ff4444;
  transform: rotate(90deg);
}

/* ===============================================================================================
 * SWAP CONTENT CONTAINER
 * ===============================================================================================
 */

.lofi-swap-content {
  padding: 24px;
}

/* ===============================================================================================
 * TOKEN SECTIONS
 * ===============================================================================================
 */

.lofi-swap-token-section {
  background: rgba(42, 45, 94, 0.9);
  border: 2px solid rgba(138, 138, 237, 0.2);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.lofi-swap-token-section:hover {
  border-color: rgba(138, 138, 237, 0.4);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 0 20px rgba(138, 138, 237, 0.2);
}

.lofi-swap-token-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.lofi-swap-token-header label {
  color: #a8b8ed;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Gluten', 'Comic Sans MS', cursive;
}

/* ===============================================================================================
 * BALANCE DISPLAY
 * ===============================================================================================
 */

.lofi-balance-display {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #8898cd;
}

.lofi-balance-loader {
  display: flex;
  align-items: center;
}

.lofi-balance-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lofi-balance-value {
  color: #4F76FF;
  font-weight: 600;
}

.lofi-max-button {
  background: rgba(79, 118, 255, 0.1);
  border: 1px solid rgba(79, 118, 255, 0.3);
  color: #4F76FF;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Gluten', 'Comic Sans MS', cursive;
  text-transform: uppercase;
}

.lofi-max-button:hover {
  background: rgba(79, 118, 255, 0.2);
  border-color: #4F76FF;
  box-shadow: 0 0 10px rgba(79, 118, 255, 0.3);
  transform: translateY(-1px);
}

/* ===============================================================================================
 * INPUT GROUPS
 * ===============================================================================================
 */

.lofi-swap-input-group {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.lofi-swap-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 28px;
  font-weight: 600;
  outline: none;
  padding: 0;
  font-family: 'Gluten', 'Comic Sans MS', cursive;
}

.lofi-swap-input::placeholder {
  color: #5568a0;
}

.lofi-swap-input::-webkit-inner-spin-button,
.lofi-swap-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ===============================================================================================
 * TOKEN SELECTOR
 * ===============================================================================================
 */

.lofi-token-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(138, 138, 237, 0.1);
  padding: 10px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid rgba(138, 138, 237, 0.2);
}

.lofi-token-selector:hover {
  background: rgba(138, 138, 237, 0.2);
  border-color: rgba(138, 138, 237, 0.4);
}

.lofi-token-selector img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.lofi-token-selector span {
  font-weight: 700;
  color: #ffffff;
  font-size: 16px;
  font-family: 'Gluten', 'Comic Sans MS', cursive;
}

/* ===============================================================================================
 * USD VALUE DISPLAY
 * ===============================================================================================
 */

.lofi-input-value-usd {
  font-size: 13px;
  color: #8898cd;
  margin-top: 12px;
  height: 16px;
  font-style: italic;
}

/* ===============================================================================================
 * SWAP DIRECTION INDICATOR (Fixed - Always SUI → LOFI)
 * ===============================================================================================
 */

/* Reverse button hover removed - fixed direction */


/* ===============================================================================================
 * SWAP DETAILS
 * ===============================================================================================
 */

.lofi-swap-details {
  background: rgba(42, 45, 94, 0.9);
  border: 1px solid rgba(138, 138, 237, 0.2);
  border-radius: 12px;
  padding: 16px;
  margin: 24px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.lofi-swap-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 14px;
}

.lofi-swap-detail-row:not(:last-child) {
  border-bottom: 1px solid rgba(138, 138, 237, 0.1);
}

.lofi-swap-detail-row span:first-child {
  color: #8898cd;
  font-weight: 500;
}

.lofi-swap-detail-row span:last-child {
  color: #ffffff;
  font-weight: 600;
  font-family: 'Gluten', 'Comic Sans MS', cursive;
}

/* ===============================================================================================
 * PRICE DISPLAY
 * ===============================================================================================
 */

@keyframes priceFlashSlide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

/* ===============================================================================================
 * SLIPPAGE CONTROLS
 * ===============================================================================================
 */

.lofi-slippage-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lofi-slippage-presets {
  display: flex;
  gap: 4px;
}

.lofi-slippage-preset {
  background: rgba(42, 45, 94, 0.9);
  border: 1px solid rgba(138, 138, 237, 0.2);
  color: #a8b8ed;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Gluten', 'Comic Sans MS', cursive;
}

.lofi-slippage-preset:hover {
  background: rgba(138, 138, 237, 0.2);
  color: #ffffff;
  border-color: rgba(138, 138, 237, 0.4);
}

.lofi-slippage-preset.active {
  background: rgba(79, 118, 255, 0.1);
  border-color: #4F76FF;
  color: #4F76FF;
  box-shadow: 0 0 10px rgba(79, 118, 255, 0.2);
}

/* ===============================================================================================
 * SLIPPAGE INPUT
 * ===============================================================================================
 */

.lofi-slippage-input-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lofi-slippage-input {
  background: rgba(42, 45, 94, 0.8);
  border: 1px solid rgba(138, 138, 237, 0.2);
  border-radius: 6px;
  padding: 6px 10px;
  width: 70px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  outline: none;
  font-family: 'Gluten', 'Comic Sans MS', cursive;
  transition: all 0.2s ease;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.lofi-slippage-input:focus {
  border-color: #4F76FF;
  box-shadow: 0 0 10px rgba(79, 118, 255, 0.2);
}

.lofi-slippage-input-group span {
  color: #a8b8ed;
  font-weight: 600;
}

/* ===============================================================================================
 * PRICE IMPACT
 * ===============================================================================================
 */

/* ===============================================================================================
 * SWAP BUTTON
 * ===============================================================================================
 */

.lofi-swap-button {
  width: 100%;
  padding: 18px;
  background: #4F76FF;
  border: none;
  border-radius: 16px;
  color: white;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  font-family: 'Gluten', 'Comic Sans MS', cursive;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.lofi-swap-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s ease;
}

.lofi-swap-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(79, 118, 255, 0.4), 0 0 30px rgba(138, 138, 237, 0.3);
  background: #3a5ed8;
}

.lofi-swap-button:hover:not(:disabled)::before {
  left: 100%;
}

.lofi-swap-button:disabled {
  background: rgba(42, 45, 94, 0.5);
  color: #5568a0;
  cursor: not-allowed;
  transform: none;
}

.lofi-swap-button.loading {
  background: #3a5ed8;
  color: white;
}

.lofi-swap-button.success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  animation: successPulse 0.5s ease;
}

.lofi-swap-button.error {
  background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
  color: white;
  animation: errorShake 0.5s ease;
}

@keyframes successPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

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

/* ===============================================================================================
 * BUTTON STATES
 * ===============================================================================================
 */

.lofi-button-text {
  display: block;
}

.lofi-button-loader,
.lofi-button-success {
  display: none;
  align-items: center;
  justify-content: center;
}

.lofi-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ===============================================================================================
 * MESSAGES
 * ===============================================================================================
 */

.lofi-swap-message {
  padding: 12px 16px;
  border-radius: 10px;
  margin-top: 16px;
  font-size: 14px;
  text-align: center;
  font-weight: 600;
  animation: messageSlideIn 0.3s ease;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lofi-swap-message-info {
  background: rgba(79, 118, 255, 0.1);
  border: 1px solid rgba(79, 118, 255, 0.3);
  color: #4F76FF;
}

.lofi-swap-message-warning {
  background: rgba(255, 170, 0, 0.1);
  border: 1px solid rgba(255, 170, 0, 0.3);
  color: #ffaa00;
}

.lofi-swap-message-error {
  background: rgba(255, 68, 68, 0.1);
  border: 1px solid rgba(255, 68, 68, 0.3);
  color: #ff4444;
}

.lofi-swap-message.shake {
  animation: messageShake 0.5s ease-in-out;
}

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

/* ===============================================================================================
 * QUICK ACTIONS - REMOVED (Always SUI → LOFI)
 * ===============================================================================================
 */

/* ===============================================================================================
 * QUOTE LOADER
 * ===============================================================================================
 */

.lofi-quote-loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: rgba(42, 45, 94, 0.95);
  border-radius: 8px;
  padding: 0 10px;
}

.lofi-quote-skeleton {
  width: 100%;
}

/* ===============================================================================================
 * SKELETON LOADING
 * ===============================================================================================
 */

.lofi-skeleton {
  background: linear-gradient(90deg, rgba(138, 138, 237, 0.1) 25%, rgba(138, 138, 237, 0.2) 50%, rgba(138, 138, 237, 0.1) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}

.lofi-skeleton-text {
  height: 16px;
  width: 80px;
}

.lofi-skeleton-number {
  height: 32px;
  width: 120px;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ===============================================================================================
 * RECENT TRANSACTIONS
 * ===============================================================================================
 */

.lofi-recent-section {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(138, 138, 237, 0.1);
}

.lofi-recent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.lofi-recent-header h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  font-family: 'Gluten', 'Comic Sans MS', cursive;
  color: #ffffff;
}

.lofi-transaction-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lofi-tx-nav {
  background: rgba(42, 45, 94, 0.9);
  border: 1px solid rgba(138, 138, 237, 0.2);
  color: #a8b8ed;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.lofi-tx-nav:hover:not(:disabled) {
  background: rgba(138, 138, 237, 0.2);
  color: #ffffff;
  border-color: rgba(138, 138, 237, 0.4);
}

.lofi-tx-nav:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#lofi-tx-counter {
  color: #8898cd;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Gluten', 'Comic Sans MS', cursive;
  min-width: 50px;
  text-align: center;
}

.lofi-clear-recent {
  background: none;
  border: none;
  color: #8898cd;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease;
  font-family: 'Gluten', 'Comic Sans MS', cursive;
  text-transform: uppercase;
  margin-left: 8px;
}

.lofi-clear-recent:hover {
  color: #ff4444;
}

/* Transaction styles moved to swap-modal-transaction-slider.css */

.lofi-no-transactions {
  text-align: center;
  color: #8898cd;
  padding: 30px;
  font-size: 14px;
  font-style: italic;
}

/* ===============================================================================================
 * FAVORITES
 * ===============================================================================================
 */

/* ===============================================================================================
 * MOBILE RESPONSIVE
 * ===============================================================================================
 */

@media (max-width: 640px) {
  #lofi-swap-modal {
    padding: 0;
  }
  
  .lofi-swap-container {
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    animation: lofiSwapSlideUp 0.3s ease-out;
  }
  
  @keyframes lofiSwapSlideUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
  
  .lofi-modal-header {
    padding: 14px 16px 12px 16px;
  }
  
  .lofi-modal-header h2 {
    font-size: 18px;
  }
  
  .lofi-swap-content {
    padding: 20px;
  }
  
  .lofi-swap-input {
    font-size: 24px;
  }
  
  .lofi-swap-button {
    font-size: 16px;
    padding: 16px;
  }
  
  /* Quick actions removed - always SUI → LOFI */
}

/* ===============================================================================================
 * ANIMATIONS AND TRANSITIONS
 * ===============================================================================================
 */

.lofi-swap-container * {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-duration: 200ms;
  transition-timing-function: ease;
}

/* Disable transitions for inputs to prevent lag */
.lofi-swap-input,
.lofi-slippage-input {
  transition: none;
}

/* ===============================================================================================
 * SCROLLBAR STYLING
 * ===============================================================================================
 */

.lofi-swap-container::-webkit-scrollbar {
  width: 8px;
}

.lofi-swap-container::-webkit-scrollbar-track {
  background: rgba(42, 45, 94, 0.5);
  border-radius: 4px;
}

.lofi-swap-container::-webkit-scrollbar-thumb {
  background: rgba(138, 138, 237, 0.3);
  border-radius: 4px;
}

.lofi-swap-container::-webkit-scrollbar-thumb:hover {
  background: rgba(138, 138, 237, 0.5);
}

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

.lofi-swap-button:focus,
.lofi-modal-close:focus,
/* .lofi-quick-action:focus, removed */
.lofi-slippage-preset:focus,
.lofi-max-button:focus {
  outline: 2px solid rgba(138, 138, 237, 0.8);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(138, 138, 237, 0.2);
}

.lofi-swap-input:focus,
.lofi-slippage-input:focus {
  outline: none;
}

/* ===============================================================================================
 * ROTATING ANIMATION
 * ===============================================================================================
 */

/* ==== swap-modal-typography-fixes.css ==== */
/**
 * LOFI SWAP MODAL - TYPOGRAPHY & RESPONSIVE FIXES
 * Agent 5: Brand Font Application and Mobile Optimization
 * ===============================================
 * Ensures Gluten font is properly applied throughout swap modal
 * Fixes responsive issues for all viewport sizes
 */

/* ===============================================================================================
 * FONT FACE DECLARATIONS
 * ===============================================================================================
 */
@font-face {
  font-family: 'Gluten';
  src: url('/fonts/Gluten-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gluten';
  src: url('/fonts/Gluten-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gluten';
  src: url('/fonts/Gluten-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ===============================================================================================
 * GLOBAL TYPOGRAPHY FIXES
 * ===============================================================================================
 */

/* Ensure all text in swap modal uses Gluten font */
#lofi-swap-modal,
#lofi-swap-modal *,
.lofi-swap-container,
.lofi-swap-container * {
  font-family: 'Gluten', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Fix modal headers */
.lofi-modal-header h2 {
  font-family: 'Gluten', sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Fix input fields to use proper font */
.lofi-swap-input,
input[type="text"],
input[type="number"] {
  font-family: 'Gluten', monospace !important;
  font-weight: 600;
  letter-spacing: 0.25px;
}

/* Token symbols */
.lofi-token-selector span {
  font-family: 'Gluten', sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Balance displays */
.lofi-balance-value,
.lofi-balance-display {
  font-family: 'Gluten', monospace !important;
  font-weight: 500;
  letter-spacing: 0.25px;
}

/* Buttons */
.lofi-swap-button,
.lofi-max-button,
.lofi-slippage-preset {
  font-family: 'Gluten', sans-serif !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.75px;
}

/* Detail rows and labels */
.lofi-swap-detail-row {
  font-family: 'Gluten', sans-serif !important;
  font-weight: 500;
}

/* Price displays */

/* ===============================================================================================
 * RESPONSIVE FIXES - MOBILE (375px - 767px)
 * ===============================================================================================
 */
@media (max-width: 767px) {
  /* Modal container adjustments */
  #lofi-swap-modal {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  
  .lofi-swap-container {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 90vh !important;
    border-radius: 24px 24px 0 0 !important;
    margin: 0 !important;
  }
  
  /* Header adjustments */
  .lofi-modal-header {
    padding: 16px 16px 12px 16px !important;
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 10;
  }
  
  .lofi-modal-header h2 {
    font-size: 18px !important;
    letter-spacing: 0.25px !important;
  }
  
  /* Content padding */
  .lofi-swap-content {
    padding: 16px !important;
  }
  
  /* Input fields - ensure proper sizing */
  .lofi-swap-input {
    font-size: 22px !important;
    padding: 8px 0 !important;
    min-height: 44px !important; /* Touch target */
  }
  
  /* Token selectors */
  .lofi-token-selector {
    padding: 8px 12px !important;
    min-height: 44px !important; /* Touch target */
  }
  
  .lofi-token-selector span {
    font-size: 14px !important;
  }
  
  /* Buttons - ensure proper touch targets */
  .lofi-swap-button {
    min-height: 52px !important;
    font-size: 16px !important;
    padding: 14px 20px !important;
    letter-spacing: 0.5px !important;
  }
  
  .lofi-max-button {
    min-height: 36px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  
  /* Slippage controls */
  .lofi-slippage-presets {
    gap: 4px !important;
  }
  
  .lofi-slippage-preset {
    min-height: 36px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
  
  /* Reverse button */
  
  /* Balance displays */
  .lofi-balance-display {
    font-size: 12px !important;
  }
  
  /* Quick actions - stack on very small screens */
}

/* ===============================================================================================
 * RESPONSIVE FIXES - SMALL MOBILE (320px - 374px)
 * ===============================================================================================
 */
@media (max-width: 374px) {
  /* Further reduce font sizes */
  .lofi-modal-header h2 {
    font-size: 16px !important;
  }
  
  .lofi-swap-input {
    font-size: 20px !important;
  }
  
  .lofi-swap-button {
    font-size: 14px !important;
    padding: 12px 16px !important;
  }
  
  /* Stack slippage presets */
  .lofi-slippage-presets {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ===============================================================================================
 * RESPONSIVE FIXES - TABLET (768px - 1023px)
 * ===============================================================================================
 */
@media (min-width: 768px) and (max-width: 1023px) {
  .lofi-swap-container {
    max-width: 520px !important;
  }
  
  .lofi-modal-header h2 {
    font-size: 22px !important;
  }
  
  .lofi-swap-input {
    font-size: 26px !important;
  }
}

/* ===============================================================================================
 * RESPONSIVE FIXES - DESKTOP (1024px+)
 * ===============================================================================================
 */
@media (min-width: 1024px) {
  /* Ensure consistent max-width */
  .lofi-swap-container {
    max-width: 480px !important;
  }
  
  /* Proper hover states for desktop */
  .lofi-max-button:hover,
  .lofi-slippage-preset:hover {
    transform: translateY(-1px);
  }
}

/* ===============================================================================================
 * ACCESSIBILITY & INTERACTION FIXES
 * ===============================================================================================
 */

/* Ensure all interactive elements have proper minimum touch targets */
button,
.lofi-modal-close,
.lofi-token-selector {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Focus states for accessibility */
button:focus-visible,
input:focus-visible,
.lofi-token-selector:focus-visible {
  outline: 2px solid #a8b8ed !important;
  outline-offset: 2px !important;
}

/* Improve input field visibility */
input[type="text"],
input[type="number"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}

/* Fix iOS input zoom issue */
@media (max-width: 767px) {
  input[type="text"],
  input[type="number"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
}

/* ===============================================================================================
 * SCROLLBAR FIXES
 * ===============================================================================================
 */

/* Ensure scrollbar doesn't affect layout on mobile */
@media (max-width: 767px) {
  .lofi-swap-container::-webkit-scrollbar {
    width: 0;
    display: none;
  }
  
  .lofi-swap-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/* ===============================================================================================
 * MODAL OVERLAY FIXES
 * ===============================================================================================
 */

/* Ensure modal overlay covers entire viewport */
#lofi-swap-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
}

/* ===============================================================================================
 * NUMBER INPUT FIXES
 * ===============================================================================================
 */

/* Ensure number inputs use tabular nums for better alignment */
.lofi-swap-input,
.lofi-slippage-input {
  font-variant-numeric: tabular-nums !important;
  -moz-font-feature-settings: "tnum" !important;
  -webkit-font-feature-settings: "tnum" !important;
  font-feature-settings: "tnum" !important;
}

/* ===============================================================================================
 * ANIMATION PERFORMANCE
 * ===============================================================================================
 */

/* Reduce animations on mobile for better performance */
@media (max-width: 767px) {
  * {
    animation-duration: 0.2s !important;
  }
  
  .lofi-swap-button::before {
    display: none !important; /* Remove shimmer on mobile */
  }
}

/* Prefer transform for animations */
.lofi-modal-close:hover {
  will-change: transform;
}

/* ===============================================================================================
 * Z-INDEX HIERARCHY FIX
 * ===============================================================================================
 */

#lofi-swap-modal {
  z-index: 999999 !important;
}

.lofi-swap-container {
  z-index: 1000000 !important;
  position: relative !important;
}

/* ===============================================================================================
 * SAFE AREA INSETS FOR MODERN DEVICES
 * ===============================================================================================
 */

@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 767px) {
    .lofi-swap-container {
      padding-bottom: env(safe-area-inset-bottom) !important;
    }
    
    .lofi-swap-content {
      padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ==== swap-modal-viewport-fix.css ==== */
/**
 * Viewport Height Fix for Mobile Browsers
 * Handles the dynamic viewport height issue on mobile devices
 */

/* Use CSS custom property for true viewport height */
#lofi-swap-modal {
  height: 100vh; /* Fallback */
  height: calc(var(--vh, 1vh) * 100);
}

/* Modal containers on mobile should respect true viewport */
@media (max-width: 767px) {
  .lofi-swap-container {
    max-height: calc(var(--vh, 1vh) * 90);
    height: auto;
  }
}

/* Touch feedback styles */

/* ==== swap-modal-text-colors.css ==== */
/**
 * LOFI SWAP MODAL - TEXT COLOR OVERRIDES
 * Agent 2: Comprehensive text color updates to match LOFI brand
 * ===============================================
 * Based on modal.PNG reference:
 * - Headers: White (#ffffff)
 * - Body text: Light gray (#e0e0e0)
 * - Accent text: Light blue/purple (#a8b8ed)
 * - Success: Keep existing green
 * - Errors: Keep existing red
 * - Warnings: Keep existing yellow
 */

/* ===============================================================================================
 * HEADERS AND TITLES - WHITE
 * ===============================================================================================
 */

/* Main modal headers */
.lofi-modal-header h2,
#lofi-swap-modal h2,
#lofi-swap-modal h3,
.lofi-swap-container h2,
.lofi-swap-container h3,
.lofi-recent-header h3 {
  color: #ffffff !important;
}

/* ===============================================================================================
 * PRIMARY TEXT - WHITE
 * ===============================================================================================
 */

/* Input values and amounts */
.lofi-swap-input,
input[type="text"],
input[type="number"],
.lofi-slippage-input {
  color: #ffffff !important;
}

/* Token symbols and names */
.lofi-token-selector span,
.lofi-transaction-pair {
  color: #ffffff !important;
}

/* Detail values */
.lofi-swap-detail-row span:last-child {
  color: #ffffff !important;
}

/* Button text (when not disabled) */
.lofi-swap-button:not(:disabled) {
  color: #ffffff !important;
}

/* ===============================================================================================
 * SECONDARY TEXT - LIGHT GRAY (#e0e0e0)
 * ===============================================================================================
 */

/* Labels and descriptions */
.lofi-swap-token-header label,
.lofi-swap-detail-row span:first-child {
  color: #e0e0e0 !important;
}

/* Secondary buttons and controls */
.lofi-modal-close,
.lofi-clear-recent,
.lofi-transaction-link,
.lofi-slippage-preset:not(.active),
.lofi-slippage-input-group span {
  color: #e0e0e0 !important;
}

/* Quick actions */

/* Balance labels */
.lofi-balance-display {
  color: #e0e0e0 !important;
}

/* ===============================================================================================
 * ACCENT TEXT - LIGHT BLUE/PURPLE (#a8b8ed)
 * ===============================================================================================
 */

/* Balance values and rates */
.lofi-balance-value,
.lofi-input-value-usd,
.lofi-transaction-time,
.lofi-no-transactions {
  color: #a8b8ed !important;
}

/* Muted text */
.lofi-balance-display,
.lofi-transaction-time {
  color: #a8b8ed !important;
}

/* ===============================================================================================
 * INTERACTIVE STATES
 * ===============================================================================================
 */

/* Hover states - make things white */
.lofi-modal-close:hover,
.lofi-slippage-preset:hover,
.lofi-transaction-link:hover {
  color: #ffffff !important;
}

/* Active/selected states */
.lofi-slippage-preset.active {
  color: #ffffff !important;
}

/* ===============================================================================================
 * PLACEHOLDER TEXT
 * ===============================================================================================
 */

.lofi-swap-input::placeholder,
input::placeholder {
  color: #5568a0 !important; /* Darker gray for placeholders */
  opacity: 1 !important;
}

/* ===============================================================================================
 * DISABLED STATES
 * ===============================================================================================
 */

.lofi-swap-button:disabled,
button:disabled {
  color: #5568a0 !important; /* Keep existing disabled color */
}

/* ===============================================================================================
 * STATUS COLORS - MAINTAIN EXISTING
 * ===============================================================================================
 */

/* Success states */
.lofi-transaction-item.success .lofi-transaction-icon,
.lofi-swap-button.success {
  color: #10b981 !important; /* Keep green */
}

/* Warning states */
.lofi-transaction-item.pending .lofi-transaction-icon,
.lofi-swap-message-warning {
  color: #ffaa00 !important; /* Keep yellow */
}

/* Error states */
.lofi-transaction-item.failed .lofi-transaction-icon,
.lofi-swap-message-error,
.lofi-swap-button.error {
  color: #ff4444 !important; /* Keep red */
}

/* Info states */
.lofi-swap-message-info {
  color: #4F76FF !important; /* Keep blue */
}

/* ===============================================================================================
 * SPECIAL ELEMENTS
 * ===============================================================================================
 */

/* Reverse button */

/* Max button */
.lofi-max-button {
  color: #ffffff !important; /* White text on blue background */
}

/* Direction toggle */

/* Swap arrow */

/* ===============================================================================================
 * DARK THEME SPECIFIC OVERRIDES
 * ===============================================================================================
 */

/* Ensure text is visible on dark backgrounds */
.lofi-swap-token-section {
  color: #ffffff !important;
}

/* Fix any remaining dark text on dark backgrounds */
#lofi-swap-modal .lofi-swap-container *:not(button):not(input) {
  color: inherit;
}

/* ===============================================================================================
 * ENHANCED MODAL SPECIFIC
 * ===============================================================================================
 */

/* Fix text colors in enhanced-swap-modal.css */
.lofi-balance-display {
  color: #a8b8ed !important;
}

.lofi-balance-value {
  color: #e0e0e0 !important;
}

.lofi-transaction-pair {
  color: #ffffff !important;
}

.lofi-transaction-time {
  color: #a8b8ed !important;
}

.lofi-transaction-link {
  color: #e0e0e0 !important;
}

.lofi-no-transactions {
  color: #a8b8ed !important;
}

/* ===============================================================================================
 * SWAP BALANCE MODAL SPECIFIC
 * ===============================================================================================
 */

/* Override green theme text in swap-modal-balance.css */
#lofi-swap-modal .lofi-modal-header h2 {
  color: #ffffff !important; /* White instead of green */
}

#lofi-swap-modal .lofi-balance-value {
  color: #e0e0e0 !important; /* Light gray instead of green */
}

#lofi-swap-modal .lofi-token-selector span {
  color: #ffffff !important; /* White instead of green */
}

/* ===============================================================================================
 * ENSURE READABILITY
 * ===============================================================================================
 */

/* High contrast for important elements */
.lofi-swap-button:not(:disabled) {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Ensure focus states are visible */
*:focus-visible {
  outline-color: #a8b8ed !important;
}

/* ===============================================================================================
 * RESPONSIVE TEXT COLOR FIXES
 * ===============================================================================================
 */

@media (max-width: 767px) {
  /* Ensure text remains visible on mobile */
  .lofi-modal-header h2,
  .lofi-swap-input {
    color: #ffffff !important;
  }
  
  .lofi-balance-display {
    color: #e0e0e0 !important;
  }
}

/* ==== swap-modal-compact-spacing.css ==== */
/**
 * ===============================================================================================
 * LOFI SWAP MODAL - COMPACT SPACING OPTIMIZATION
 * ===============================================================================================
 * 
 * Optimizes vertical spacing and button sizing for better mobile experience
 * Following modern standards: 44-48px button heights, reduced gaps
 * 
 * ===============================================================================================
 */

/* ===============================================================================================
 * SWAP BUTTON OPTIMIZATION - Modern 44-48px Height
 * ===============================================================================================
 */

/* Reduce swap button height from 18px padding to more compact */
.lofi-swap-button {
  padding: 14px 24px !important;  /* 44px total height with 16px font */
  font-size: 16px !important;     /* Slightly smaller font */
  letter-spacing: 0.5px !important; /* Tighter letter spacing */
  min-height: 44px !important;    /* Ensure touch-friendly minimum */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Alternative for enhanced modal button */

/* Mobile button adjustments */
@media (max-width: 768px) {
  .lofi-swap-button {
    padding: 12px 16px !important;  /* Even more compact on mobile */
    font-size: 15px !important;
    min-height: 44px !important;
  }
}

/* ===============================================================================================
 * OVERALL VERTICAL SPACING OPTIMIZATION
 * ===============================================================================================
 */

/* Reduce modal content padding */
.lofi-swap-content,
.lofi-modal-content {
  padding: 20px !important;  /* Reduced from 24px */
}

/* Tighter header spacing */
.lofi-modal-header {
  padding: 20px 20px 16px 20px !important;  /* Reduced bottom padding */
  margin-bottom: 0 !important;  /* Remove margin */
}

/* Reduce gaps between token sections */
.lofi-swap-token-section {
  margin-bottom: 8px !important;  /* Reduced from 12px/16px */
  padding: 16px !important;       /* Reduced from 20px */
}

/* Smaller gap before reverse button */

/* Reduce reverse button size slightly */

/* ===============================================================================================
 * TOKEN INPUT/OUTPUT SECTION SPACING
 * ===============================================================================================
 */

/* Reduce token header spacing */
.lofi-swap-token-header {
  margin-bottom: 12px !important;  /* Reduced from 16px */
}

/* Tighter balance display */
.lofi-balance-display {
  margin-bottom: 0 !important;
  font-size: 12px !important;  /* Slightly smaller */
}

/* Reduce USD value spacing */
.lofi-input-value-usd {
  margin-top: 6px !important;  /* Reduced from 8-12px */
  font-size: 12px !important;
}

/* Smaller input font on mobile */
@media (max-width: 768px) {
  .lofi-swap-input {
    font-size: 24px !important;  /* Reduced from 28px */
  }
}

/* ===============================================================================================
 * SWAP DETAILS SECTION COMPACTING
 * ===============================================================================================
 */

/* Reduce swap details spacing */
.lofi-swap-details {
  margin: 16px 0 !important;    /* Reduced from 20-24px */
  padding: 12px !important;     /* Reduced from 16px */
}

/* Tighter detail rows */
.lofi-swap-detail-row {
  padding: 6px 0 !important;    /* Reduced from 8-10px */
}

/* ===============================================================================================
 * SLIPPAGE SETTINGS COMPACTING
 * ===============================================================================================
 */

/* Reduce slippage section padding */

/* Smaller slippage preset buttons */
.lofi-slippage-preset {
  padding: 6px 10px !important;    /* Reduced padding */
  font-size: 12px !important;      /* Smaller font */
}

/* Tighter slippage options grid */

/* Custom slippage input spacing */

/* ===============================================================================================
 * QUICK ACTIONS COMPACTING
 * ===============================================================================================
 */

/* Reduce quick actions spacing */

/* Smaller quick action buttons */

/* ===============================================================================================
 * MESSAGES AND STATUS SECTIONS
 * ===============================================================================================
 */

/* Reduce message spacing */
.lofi-swap-message {
  margin-top: 12px !important;     /* Reduced from 16-20px */
  padding: 12px !important;        /* Reduced from 16px */
  font-size: 13px !important;      /* Smaller font */
}

/* Compact transaction status */

/* ===============================================================================================
 * RECENT TRANSACTIONS COMPACTING
 * ===============================================================================================
 */

/* Reduce recent section spacing */
.lofi-recent-section {
  margin-top: 20px !important;     /* Reduced from 30-32px */
  padding-top: 16px !important;    /* Reduced from 20-24px */
}

/* Tighter recent header */
.lofi-recent-header {
  margin-bottom: 12px !important;  /* Reduced from 15-20px */
}

/* Smaller transaction items */
.lofi-transaction-item {
  padding: 10px !important;        /* Reduced from 12px */
  margin-bottom: 6px !important;   /* Reduced from 8px */
}

/* ===============================================================================================
 * MODAL CONTAINER HEIGHT OPTIMIZATION
 * ===============================================================================================
 */

/* Ensure modal doesn't have excessive height */
.lofi-swap-container {
  max-height: 85vh !important;     /* Slightly reduced from 90vh */
}

/* Better mobile modal height */
@media (max-width: 768px) {
  .lofi-swap-container {
    max-height: 80vh !important;   /* More aggressive on mobile */
  }
}

/* ===============================================================================================
 * INPUT CONTAINER OPTIMIZATION
 * ===============================================================================================
 */

/* Reduce input container padding */

/* Tighter token selector */
.lofi-token-selector {
  padding: 8px 12px !important;    /* Reduced from 10x16px */
}

/* Smaller token icons in selector */
.lofi-token-selector img {
  width: 24px !important;          /* Reduced from 28px */
  height: 24px !important;
}

/* ===============================================================================================
 * MISCELLANEOUS SPACING FIXES
 * ===============================================================================================
 */

/* Reduce general section margins */

/* Tighter label spacing */

/* Reduce balance/rate text spacing */

/* ===============================================================================================
 * MOBILE-SPECIFIC OPTIMIZATIONS
 * ===============================================================================================
 */

@media (max-width: 480px) {
  /* Even more compact on small phones */
  .lofi-swap-content,
  .lofi-modal-content {
    padding: 16px !important;
  }
  
  .lofi-modal-header {
    padding: 16px 16px 12px 16px !important;
  }
  
  .lofi-swap-token-section {
    padding: 12px !important;
  }
  
  .lofi-swap-button {
    padding: 11px 16px !important;
    font-size: 14px !important;
    min-height: 42px !important;  /* Slightly smaller on very small screens */
  }
  
  /* Reduce all margins by 20% on small screens */
  .lofi-swap-details,
  .lofi-swap-message,
  .lofi-recent-section {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }
}

/* ===============================================================================================
 * ANIMATION PERFORMANCE
 * ===============================================================================================
 */

/* Reduce animation delays for snappier feel */
.lofi-swap-button::before {
  transition: left 0.3s ease !important;  /* Faster shine effect */
}

/* Disable some decorative animations on mobile for performance */
@media (max-width: 768px) {
  .lofi-swap-token-section::before,
  .lofi-token-selector::before {
    display: none !important;  /* Remove decorative overlays */
  }
}

/* ===============================================================================================
 * FINAL TOUCH: ENSURE READABILITY
 * ===============================================================================================
 */

/* Despite compacting, ensure text remains readable */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ensure minimum tap targets are maintained */
button,
.lofi-token-selector,
.lofi-slippage-preset {
  min-height: 36px !important;  /* Slightly below 44px for non-primary actions */
}

/* Primary action buttons maintain 44px minimum */
.lofi-swap-button {
  min-height: 44px !important;  /* Touch-friendly primary actions */
}

/* ==== swap-modal-mobile.css ==== */
/**
 * ===============================================================================================
 * LOFI SWAP MODAL - COMPREHENSIVE MOBILE RESPONSIVENESS
 * ===============================================================================================
 * 
 * This file ensures the swap modal is perfectly usable on ALL mobile devices.
 * Features:
 * - Mobile-first design approach
 * - Touch-friendly interactions
 * - Bottom sheet style on mobile
 * - Smooth scrolling when needed
 * - Safe area handling for notched devices
 * - Landscape orientation support
 * 
 * ===============================================================================================
 */

/* ===============================================================================================
 * CSS VARIABLES FOR MOBILE
 * ===============================================================================================
 */

:root {
  --mobile-safe-area-top: env(safe-area-inset-top, 0px);
  --mobile-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-safe-area-left: env(safe-area-inset-left, 0px);
  --mobile-safe-area-right: env(safe-area-inset-right, 0px);
  --mobile-tap-target: 44px;
  --mobile-modal-radius: 24px;
}

/* ===============================================================================================
 * MOBILE MODAL OVERLAY
 * ===============================================================================================
 */

@media (max-width: 767px) {
  /* Prevent body scroll when modal is open */
  body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }

  /* Full screen overlay on mobile */
  #lofi-swap-modal {
    padding: 0;
    align-items: flex-end; /* Bottom sheet style */
  }

  /* Bottom sheet container */
  .lofi-swap-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    width: 100%;
    max-height: calc(100vh - var(--mobile-safe-area-top) - 20px);
    height: auto;
    border-radius: var(--mobile-modal-radius) var(--mobile-modal-radius) 0 0;
    animation: mobileSlideUp 0.3s ease-out;
    transform: translateY(0);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  @keyframes mobileSlideUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  /* Modal close animation */
  .lofi-swap-container.closing {
    animation: mobileSlideDown 0.3s ease-out;
  }

  @keyframes mobileSlideDown {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(100%);
    }
  }
}

/* ===============================================================================================
 * MOBILE HEADER
 * ===============================================================================================
 */

@media (max-width: 767px) {
  .lofi-modal-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: inherit;
    padding: 16px 16px 12px 16px;
    border-bottom: 1px solid rgba(138, 138, 237, 0.2);
    
    /* Drag handle indicator */
    &::before {
      content: '';
      position: absolute;
      top: 6px;
      left: 50%;
      transform: translateX(-50%);
      width: 36px;
      height: 4px;
      background: rgba(138, 138, 237, 0.3);
      border-radius: 2px;
    }
  }

  .lofi-modal-header h2 {
    font-size: 18px;
    margin-top: 8px; /* Space for drag handle */
  }

  /* Larger close button for mobile */
  .lofi-modal-close {
    min-width: var(--mobile-tap-target);
    min-height: var(--mobile-tap-target);
    font-size: 24px;
    padding: 10px;
    margin: -10px -10px 0 0;
  }
}

/* ===============================================================================================
 * MOBILE CONTENT
 * ===============================================================================================
 */

@media (max-width: 767px) {
  .lofi-swap-content {
    padding: 16px;
    padding-bottom: calc(16px + var(--mobile-safe-area-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
  }

  /* Token sections with better spacing */
  .lofi-swap-token-section {
    padding: 16px;
    margin-bottom: 12px;
  }

  /* Larger input text for mobile */
  .lofi-swap-input {
    font-size: 24px;
    min-height: 40px;
    /* Prevent zoom on focus */
    touch-action: manipulation;
  }

  /* Prevent iOS zoom on input focus */
  .lofi-swap-input:focus {
    font-size: 24px;
  }

  /* Touch-friendly token selector */
  .lofi-token-selector {
    min-height: var(--mobile-tap-target);
    padding: 12px 16px;
  }

  /* Balance display adjustments */
  .lofi-balance-display {
    font-size: 12px;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Touch-friendly MAX button */
  .lofi-max-button {
    min-width: 44px;
    min-height: 28px;
    padding: 6px 12px;
    font-size: 10px;
  }
}

/* ===============================================================================================
 * MOBILE SWAP BUTTON
 * ===============================================================================================
 */

@media (max-width: 767px) {
  /* Sticky swap button at bottom */
  .lofi-swap-button {
    position: sticky;
    bottom: 0;
    margin: 16px 0 0 0;
    padding: 16px;
    font-size: 16px;
    min-height: 56px;
    border-radius: 12px;
    z-index: 5;
    
    /* Add bottom safe area padding */
    margin-bottom: var(--mobile-safe-area-bottom);
  }

  /* Ensure button is always visible */
  .lofi-swap-content {
    padding-bottom: calc(80px + var(--mobile-safe-area-bottom));
  }
}

/* ===============================================================================================
 * MOBILE SLIPPAGE CONTROLS
 * ===============================================================================================
 */

@media (max-width: 767px) {
  .lofi-slippage-presets {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .lofi-slippage-preset {
    min-height: 40px;
    padding: 10px;
    font-size: 13px;
  }

  .lofi-slippage-input {
    width: 100%;
    min-height: 40px;
    font-size: 16px; /* Prevent zoom */
  }
}

/* ===============================================================================================
 * MOBILE TRANSACTION LIST
 * ===============================================================================================
 */

@media (max-width: 767px) {
  /* Swipeable transaction items */
  .lofi-transaction-item {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
  }

  /* Swipe to dismiss indicator */
  .lofi-transaction-item::after {
    content: 'Swipe to dismiss';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #8898cd;
    opacity: 0;
    transition: opacity 0.2s;
  }

  /* Smaller transaction items on mobile */
  .lofi-transaction-details {
    font-size: 13px;
  }

  .lofi-transaction-time {
    font-size: 11px;
  }
}

/* ===============================================================================================
 * MOBILE DETAIL ROWS
 * ===============================================================================================
 */

@media (max-width: 767px) {
  .lofi-swap-details {
    font-size: 13px;
    padding: 12px;
    margin: 16px 0;
  }

  .lofi-swap-detail-row {
    padding: 8px 0;
  }

  /* Stack long values on mobile */
}

/* ===============================================================================================
 * SMALL MOBILE DEVICES (iPhone SE, etc.)
 * ===============================================================================================
 */

@media (max-width: 375px) {
  /* Even more compact spacing */
  .lofi-swap-content {
    padding: 12px;
  }

  .lofi-swap-token-section {
    padding: 14px;
  }

  /* Smaller input text */
  .lofi-swap-input {
    font-size: 20px;
  }

  /* Compact header */
  .lofi-modal-header h2 {
    font-size: 16px;
  }

  /* Smaller swap details */
  .lofi-swap-details {
    font-size: 12px;
  }

  /* Adjust recent transactions */
  .lofi-recent-section {
    margin-top: 20px;
  }
}

/* ===============================================================================================
 * LANDSCAPE ORIENTATION
 * ===============================================================================================
 */

@media (max-height: 500px) and (orientation: landscape) {
  .lofi-swap-container {
    max-height: calc(100vh - 20px);
    border-radius: 0;
  }

  /* Horizontal layout for token sections */
  @media (min-width: 568px) {
    .lofi-swap-content {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 16px;
      align-items: start;
    }

    .lofi-swap-details,
    .lofi-swap-button {
      grid-column: 1 / -1;
    }
  }

  /* Hide recent transactions in landscape */
  .lofi-recent-section {
    display: none;
  }
}

/* ===============================================================================================
 * TOUCH INTERACTIONS
 * ===============================================================================================
 */

/* Touch feedback for all interactive elements */
@media (hover: none) and (pointer: coarse) {
  .lofi-swap-button,
  .lofi-max-button,
  .lofi-slippage-preset,
  .lofi-token-selector,
  .lofi-modal-close {
    transition: transform 0.1s ease, opacity 0.1s ease;
  }

  .lofi-swap-button:active,
  .lofi-max-button:active,
  .lofi-slippage-preset:active,
  .lofi-token-selector:active,
  .lofi-modal-close:active {
    transform: scale(0.95);
    opacity: 0.8;
  }

  /* Disable hover effects on touch devices */
  .lofi-swap-button:hover,
  .lofi-max-button:hover,
  .lofi-slippage-preset:hover,
  .lofi-token-selector:hover {
    transform: none;
  }
}

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

@media (max-width: 767px) {
  /* Full screen loading overlay */
  .lofi-swap-container.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 29, 62, 0.95);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Centered spinner */
  .lofi-swap-container.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid rgba(168, 184, 237, 0.2);
    border-top-color: #a8b8ed;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 101;
  }
}

/* ===============================================================================================
 * MOBILE MESSAGES
 * ===============================================================================================
 */

@media (max-width: 767px) {
  .lofi-swap-message {
    font-size: 13px;
    padding: 10px 14px;
    margin-top: 12px;
  }

  /* Toast-style messages on mobile */
}

/* ===============================================================================================
 * MOBILE SCROLLBAR
 * ===============================================================================================
 */

@media (max-width: 767px) {
  /* Hide scrollbar on mobile but keep functionality */
  .lofi-swap-content::-webkit-scrollbar {
    display: none;
  }

  .lofi-swap-content {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
}

/* ===============================================================================================
 * MOBILE QUICK ACTIONS (if re-enabled)
 * ===============================================================================================
 */

/* ===============================================================================================
 * MOBILE REVERSE BUTTON
 * ===============================================================================================
 */

/* ===============================================================================================
 * TABLET ADJUSTMENTS (iPad, etc.)
 * ===============================================================================================
 */

@media (min-width: 768px) and (max-width: 1024px) {
  .lofi-swap-container {
    max-width: 520px;
  }

  /* Slightly larger touch targets on tablets */
  .lofi-swap-button {
    min-height: 52px;
  }

  .lofi-slippage-preset {
    min-height: 36px;
  }
}

/* ===============================================================================================
 * ACCESSIBILITY ON MOBILE
 * ===============================================================================================
 */

@media (max-width: 767px) {
  /* Larger focus outlines on mobile */
  .lofi-swap-button:focus,
  .lofi-modal-close:focus,
  .lofi-slippage-preset:focus,
  .lofi-max-button:focus {
    outline: 3px solid rgba(138, 138, 237, 0.8);
    outline-offset: 2px;
  }

  /* High contrast mode support */
  @media (prefers-contrast: high) {
    .lofi-swap-container {
      border: 2px solid white;
    }

    .lofi-swap-button {
      border: 2px solid white;
    }
  }

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .lofi-swap-container {
      animation: none;
      transition: none;
    }

    .lofi-swap-button,
    .lofi-max-button,
    .lofi-slippage-preset {
      transition: none;
    }
  }
}

/* ===============================================================================================
 * NOTCH AND SAFE AREAS
 * ===============================================================================================
 */

/* iPhone X and newer */
@supports (padding: max(0px)) {
  @media (max-width: 767px) {
    .lofi-modal-header {
      padding-top: max(16px, var(--mobile-safe-area-top));
    }

    .lofi-swap-content {
      padding-left: max(16px, var(--mobile-safe-area-left));
      padding-right: max(16px, var(--mobile-safe-area-right));
      padding-bottom: max(calc(80px + 16px), calc(80px + var(--mobile-safe-area-bottom)));
    }

    .lofi-swap-button {
      margin-bottom: max(0px, var(--mobile-safe-area-bottom));
    }
  }
}

/* ===============================================================================================
 * PERFORMANCE OPTIMIZATIONS
 * ===============================================================================================
 */

@media (max-width: 767px) {
  /* Use GPU acceleration for animations */
  .lofi-swap-container {
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  /* Optimize repaints */
  .lofi-swap-input,
  .lofi-slippage-input {
    will-change: auto;
  }

  /* Reduce shadows on mobile for performance */
  .lofi-swap-container {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  }

  .lofi-swap-token-section {
    box-shadow: none;
    border: 1px solid rgba(138, 138, 237, 0.2);
  }
}

/* ==== swap-modal-responsive.css ==== */
/**
 * ===============================================================================================
 * LOFI SWAP MODAL - COMPREHENSIVE RESPONSIVE FIXES
 * ===============================================================================================
 * 
 * This file ensures the swap modal is perfectly sized and functional on ALL devices.
 * Addresses:
 * - Modal overflow issues
 * - Proper viewport constraints
 * - Safe area handling for notched devices
 * - Virtual keyboard handling
 * - Landscape orientation support
 * - Touch-friendly interactions
 * - Smooth scrolling behavior
 * 
 * ===============================================================================================
 */

/* ===============================================================================================
 * CSS CUSTOM PROPERTIES FOR RESPONSIVE BEHAVIOR
 * ===============================================================================================
 */

:root {
  /* Safe area insets for modern devices */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  
  /* Dynamic viewport height (set by JS) */
  --vh: 1vh;
  
  /* Modal spacing */
  --modal-padding: 20px;
  --modal-max-width: 480px;
  --modal-border-radius: 24px;
  
  /* Touch targets */
  --min-touch-target: 44px;
  
  /* Virtual keyboard offset */
  --keyboard-offset: 0px;
}

/* ===============================================================================================
 * VIEWPORT HEIGHT FIX
 * ===============================================================================================
 */

/* Use custom viewport height property for accurate sizing */

/* ===============================================================================================
 * MODAL OVERLAY IMPROVEMENTS
 * ===============================================================================================
 */

#lofi-swap-modal {
  /* Ensure full viewport coverage */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  
  /* Safe area padding */
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  
  /* Flexbox centering with constraints */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Prevent body scroll when modal is open */
  overscroll-behavior: contain;
}

/* Body scroll lock when modal is open */
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* ===============================================================================================
 * MODAL CONTAINER CONSTRAINTS
 * ===============================================================================================
 */

.lofi-swap-container {
  /* Size constraints */
  max-width: var(--modal-max-width);
  width: calc(100% - 2 * var(--modal-padding));
  max-height: calc(100vh - 2 * var(--modal-padding) - var(--safe-top) - var(--safe-bottom));
  max-height: calc(var(--vh, 1vh) * 100 - 2 * var(--modal-padding) - var(--safe-top) - var(--safe-bottom));
  
  /* Flexible height */
  height: auto;
  
  /* Internal layout */
  display: flex;
  flex-direction: column;
  
  /* Prevent overflow */
  overflow: hidden;
  
  /* Maintain aspect ratio on very small screens */
  min-height: 400px;
}

/* Modal header - fixed at top */
.lofi-modal-header {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
  background: inherit;
  border-radius: var(--modal-border-radius) var(--modal-border-radius) 0 0;
}

/* Modal content - scrollable area */
.lofi-swap-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  
  /* Smooth scrolling */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  
  /* Scroll padding for sticky elements */
  scroll-padding-bottom: 80px;
  
  /* Prevent horizontal scroll */
  max-width: 100%;
}

/* Custom scrollbar styling */
.lofi-swap-content::-webkit-scrollbar {
  width: 6px;
}

.lofi-swap-content::-webkit-scrollbar-track {
  background: rgba(42, 45, 94, 0.3);
  border-radius: 3px;
}

.lofi-swap-content::-webkit-scrollbar-thumb {
  background: rgba(138, 138, 237, 0.4);
  border-radius: 3px;
}

.lofi-swap-content::-webkit-scrollbar-thumb:hover {
  background: rgba(138, 138, 237, 0.6);
}

/* ===============================================================================================
 * MOBILE SPECIFIC (PHONES)
 * ===============================================================================================
 */

@media (max-width: 767px) {
  :root {
    --modal-padding: 0px;
  }
  
  #lofi-swap-modal {
    padding: 0;
    align-items: flex-end;
  }
  
  .lofi-swap-container {
    /* Full width bottom sheet */
    max-width: 100%;
    width: 100%;
    max-height: calc(100vh - var(--safe-top));
    max-height: calc(var(--vh, 1vh) * 100 - var(--safe-top));
    
    /* Bottom sheet styling */
    border-radius: var(--modal-border-radius) var(--modal-border-radius) 0 0;
    
    /* Handle virtual keyboard */
    margin-bottom: var(--keyboard-offset);
    
    /* Ensure minimum height for usability */
    min-height: 50vh;
    min-height: calc(var(--vh, 1vh) * 50);
  }
  
  /* Modal header mobile adjustments */
  .lofi-modal-header {
    padding-top: max(16px, var(--safe-top));
    
    /* Visual drag indicator */
    &::before {
      content: '';
      position: absolute;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 4px;
      background: rgba(138, 138, 237, 0.3);
      border-radius: 2px;
    }
  }
  
  /* Content padding with safe areas */
  .lofi-swap-content {
    padding-left: max(16px, var(--safe-left));
    padding-right: max(16px, var(--safe-right));
    padding-bottom: max(16px, var(--safe-bottom));
  }
  
  /* Larger touch targets */
  .lofi-swap-button,
  .lofi-max-button,
  .lofi-slippage-preset,
  .lofi-token-selector {
    min-height: var(--min-touch-target);
  }
  
  /* Prevent input zoom on iOS */
  input[type="number"],
  input[type="text"] {
    font-size: 16px !important;
  }
  
  /* Sticky swap button */
  .lofi-swap-button {
    position: sticky;
    bottom: var(--safe-bottom);
    margin-top: auto;
    z-index: 5;
  }
}

/* ===============================================================================================
 * SMALL PHONES (iPhone SE, Galaxy S5, etc.)
 * ===============================================================================================
 */

@media (max-width: 375px) {
  .lofi-swap-container {
    min-height: 45vh;
    min-height: calc(var(--vh, 1vh) * 45);
  }
  
  /* More compact spacing */
  .lofi-swap-token-section {
    padding: 14px;
  }
  
  .lofi-swap-input {
    font-size: 22px;
  }
  
  .lofi-modal-header h2 {
    font-size: 16px;
  }
  
  /* Smaller details section */
  .lofi-swap-details {
    font-size: 12px;
    padding: 10px;
  }
}

/* ===============================================================================================
 * TABLETS (iPad, Surface, etc.)
 * ===============================================================================================
 */

@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --modal-max-width: 540px;
  }
  
  .lofi-swap-container {
    max-height: 80vh;
    max-height: calc(var(--vh, 1vh) * 80);
  }
  
  /* Slightly larger elements for tablets */
  .lofi-swap-button {
    padding: 20px;
    font-size: 19px;
  }
  
  .lofi-swap-input {
    font-size: 30px;
  }
}

/* ===============================================================================================
 * LANDSCAPE ORIENTATION
 * ===============================================================================================
 */

@media (orientation: landscape) and (max-height: 600px) {
  .lofi-swap-container {
    max-height: calc(100vh - 40px);
    max-height: calc(var(--vh, 1vh) * 100 - 40px);
    min-height: auto;
  }
  
  /* More compact header */
  .lofi-modal-header {
    padding: 12px 16px;
  }
  
  .lofi-modal-header h2 {
    font-size: 16px;
  }
  
  /* Reduce spacing */
  .lofi-swap-content {
    padding: 12px;
  }
  
  .lofi-swap-token-section {
    padding: 14px;
    margin-bottom: 8px;
  }
  
  /* Hide recent transactions in landscape */
  .lofi-recent-section {
    display: none;
  }
  
  /* Smaller inputs */
  .lofi-swap-input {
    font-size: 24px;
  }
}

/* Two-column layout for landscape tablets/phones */
@media (orientation: landscape) and (min-width: 768px) and (max-height: 600px) {
  .lofi-swap-content {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: start;
  }
  
  .lofi-swap-details,
  .lofi-swap-button {
    grid-column: 1 / -1;
  }
}

/* ===============================================================================================
 * DESKTOP IMPROVEMENTS
 * ===============================================================================================
 */

@media (min-width: 1025px) {
  .lofi-swap-container {
    /* Better desktop proportions */
    max-height: 85vh;
    max-height: calc(var(--vh, 1vh) * 85);
    
    /* Add some breathing room */
    margin: 20px;
  }
  
  /* Hover effects only on desktop */
  @media (hover: hover) {
    .lofi-swap-token-section {
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .lofi-swap-token-section:hover {
      transform: translateY(-1px);
    }
  }
}

/* ===============================================================================================
 * VIRTUAL KEYBOARD HANDLING
 * ===============================================================================================
 */

/* When input is focused (keyboard likely visible) */
.lofi-swap-input:focus,
.lofi-slippage-input:focus {
  /* Scroll input into view */
  scroll-margin-bottom: 100px;
}

/* iOS specific keyboard handling */
@supports (-webkit-touch-callout: none) {
  .lofi-swap-container {
    /* Account for iOS keyboard */
    padding-bottom: env(keyboard-inset-height, 0);
  }
}

/* ===============================================================================================
 * TRANSACTION SLIDER RESPONSIVE FIXES
 * ===============================================================================================
 */

.lofi-transaction-slider-wrapper {
  max-width: 100%;
  margin: 0 -4px; /* Compensate for slider padding */
}

.lofi-transaction-slider {
  /* Ensure it doesn't cause horizontal scroll */
  max-width: calc(100% + 8px);
}

@media (max-width: 767px) {
  .lofi-transaction-slider .lofi-transaction-item {
    width: min(240px, calc(100vw - 80px));
    min-width: min(240px, calc(100vw - 80px));
  }
}

/* ===============================================================================================
 * ACCESSIBILITY IMPROVEMENTS
 * ===============================================================================================
 */

/* Focus visible for keyboard navigation */
.lofi-swap-button:focus-visible,
.lofi-modal-close:focus-visible,
.lofi-max-button:focus-visible,
.lofi-slippage-preset:focus-visible {
  outline: 3px solid rgba(79, 118, 255, 0.8);
  outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .lofi-swap-container {
    border: 3px solid white;
  }
  
  .lofi-swap-token-section {
    border: 2px solid white;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lofi-swap-container,
  .lofi-swap-button,
  .lofi-transaction-slider {
    animation: none;
    transition: none;
  }
}

/* ===============================================================================================
 * PRINT STYLES
 * ===============================================================================================
 */

@media print {
  #lofi-swap-modal {
    display: none !important;
  }
}

/* ===============================================================================================
 * PERFORMANCE OPTIMIZATIONS
 * ===============================================================================================
 */

/* Use GPU acceleration for smooth animations */
.lofi-swap-container {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Optimize repaints during scrolling */
.lofi-swap-content {
  will-change: scroll-position;
}

/* Reduce paint areas */
.lofi-swap-input,
.lofi-slippage-input {
  will-change: auto;
}

/* ===============================================================================================
 * FALLBACKS FOR OLDER BROWSERS
 * ===============================================================================================
 */

/* Fallback for browsers without CSS env() support */
@supports not (padding: env(safe-area-inset-top)) {
  :root {
    --safe-top: 0px;
    --safe-bottom: 0px;
    --safe-left: 0px;
    --safe-right: 0px;
  }
}

/* Fallback for browsers without gap support in flexbox */
@supports not (gap: 1px) {
  .lofi-swap-input-group > * + * {
    margin-left: 16px;
  }
  
  .lofi-balance-display > * + * {
    margin-left: 8px;
  }
}

/* ===============================================================================================
 * EDGE CASE FIXES
 * ===============================================================================================
 */

/* Fix for iOS Safari bounce scroll */
@supports (-webkit-touch-callout: none) {
  #lofi-swap-modal {
    position: fixed;
    overflow: hidden;
  }
  
  .lofi-swap-content {
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
  }
}

/* Fix for Android Chrome address bar */
@media (max-width: 767px) {
  .lofi-swap-container {
    max-height: calc(100vh - 56px); /* Account for address bar */
    max-height: calc(var(--vh, 1vh) * 100 - 56px);
  }
}

/* Fix for notched devices in landscape */
@media (orientation: landscape) and (max-width: 896px) {
  .lofi-swap-container {
    padding-left: max(16px, var(--safe-left));
    padding-right: max(16px, var(--safe-right));
  }
}

/* ==== swap-modal-transaction-slider.css ==== */
/* ===============================================================================================
 * TRANSACTION SLIDER - Horizontal scrollable recent transactions
 * ===============================================================================================
 */

/* Wrapper for the slider with fade indicators */
.lofi-transaction-slider-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  max-width: 100%;
}

/* Main horizontal slider container */
.lofi-transaction-slider {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding: 4px 4px 12px 4px;
  margin: 0 -4px;
  
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  
  /* Enable touch scrolling */
  -webkit-overflow-scrolling: touch;
  
  /* Snap scrolling for better UX */
  scroll-snap-type: x mandatory;
  scroll-padding: 0 12px;
}

/* Hide scrollbar for Chrome, Safari */
.lofi-transaction-slider::-webkit-scrollbar {
  display: none;
}

/* Transaction item in slider - preserving original structure */
.lofi-transaction-slider .lofi-transaction-item {
  flex: 0 0 auto;
  width: 280px;
  min-width: 280px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(42, 45, 94, 0.9);
  border: 1px solid rgba(138, 138, 237, 0.2);
  border-radius: 10px;
  transition: all 0.2s ease;
  scroll-snap-align: center;
  
  /* Prevent text selection on drag */
  user-select: none;
  -webkit-user-select: none;
}

.lofi-transaction-slider .lofi-transaction-item:hover {
  background: rgba(138, 138, 237, 0.15);
  border-color: rgba(138, 138, 237, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Active transaction indicator */
.lofi-transaction-slider .lofi-transaction-item.active {
  background: rgba(138, 138, 237, 0.2);
  border-color: rgba(138, 138, 237, 0.5);
  box-shadow: 0 0 0 2px rgba(79, 118, 255, 0.3);
}

/* Make transactions clickable */
.lofi-transaction-slider .lofi-transaction-item {
  cursor: pointer;
}

/* Transaction icon - original styling */
.lofi-transaction-slider .lofi-transaction-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}

.lofi-transaction-slider .lofi-transaction-item.success .lofi-transaction-icon {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.lofi-transaction-slider .lofi-transaction-item.pending .lofi-transaction-icon {
  background: rgba(255, 170, 0, 0.1);
  color: #ffaa00;
  animation: pulse 2s infinite;
}

.lofi-transaction-slider .lofi-transaction-item.failed .lofi-transaction-icon {
  background: rgba(255, 68, 68, 0.1);
  color: #ff4444;
}

/* Transaction details - original styling */
.lofi-transaction-slider .lofi-transaction-details {
  flex: 1;
  min-width: 0; /* Allow text truncation */
}

.lofi-transaction-slider .lofi-transaction-pair {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lofi-transaction-slider .lofi-transaction-time {
  font-size: 12px;
  color: #8898cd;
  margin-top: 2px;
}

/* Transaction link - original styling */
.lofi-transaction-slider .lofi-transaction-link {
  color: #8898cd;
  text-decoration: none;
  transition: color 0.2s ease;
  font-size: 18px;
  flex-shrink: 0;
}

.lofi-transaction-slider .lofi-transaction-link:hover {
  color: #4F76FF;
}

/* Fade indicators for scroll */

/* No transactions state */
.lofi-no-transactions {
  width: 100%;
  text-align: center;
  color: #8898cd;
  padding: 20px;
  font-size: 13px;
  font-style: italic;
}

/* Recent section adjustments */
.lofi-recent-section {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(138, 138, 237, 0.1);
}

.lofi-recent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 0 4px;
}

.lofi-recent-header h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  font-family: 'Gluten', 'Comic Sans MS', cursive;
  color: #ffffff;
}

/* Transaction controls styling */
.lofi-transaction-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Navigation buttons - subtle styling */
.lofi-tx-nav {
  background: rgba(138, 138, 237, 0.1);
  border: 1px solid rgba(138, 138, 237, 0.2);
  color: #8898cd;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.lofi-tx-nav:hover:not(:disabled) {
  background: rgba(138, 138, 237, 0.2);
  border-color: rgba(138, 138, 237, 0.4);
  color: #ffffff;
}

.lofi-tx-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Transaction counter - subtle styling */
.lofi-tx-counter {
  font-size: 12px;
  color: #8898cd;
  font-weight: 500;
  font-family: 'Gluten', 'Comic Sans MS', cursive;
  min-width: 40px;
  text-align: center;
}

.lofi-clear-recent {
  background: none;
  border: none;
  color: #8898cd;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease;
  font-family: 'Gluten', 'Comic Sans MS', cursive;
  text-transform: uppercase;
  padding: 4px 8px;
}

.lofi-clear-recent:hover {
  color: #ff4444;
}

/* Pulse animation for pending transactions */
@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .lofi-transaction-slider .lofi-transaction-item {
    width: 240px;
    min-width: 240px;
    padding: 10px;
  }
  
  .lofi-transaction-slider {
    gap: 10px;
  }
  
  .lofi-transaction-slider .lofi-transaction-icon {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  
  .lofi-transaction-slider .lofi-transaction-pair {
    font-size: 13px;
  }
  
  .lofi-transaction-slider .lofi-transaction-time {
    font-size: 11px;
  }
}

/* Touch device optimizations */
@media (pointer: coarse) {
  .lofi-transaction-slider .lofi-transaction-item {
    /* Larger touch targets */
    padding: 14px;
  }
  
  .lofi-transaction-slider {
    /* More space between cards for touch */
    gap: 14px;
    padding-bottom: 16px;
  }
  
  .lofi-tx-nav {
    width: 32px;
    height: 32px;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .lofi-transaction-slider {
    scroll-behavior: auto;
  }
}

/* ==== swap-modal-ui-polish.css ==== */
/**
 * ===============================================================================================
 * 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 */

/* Flash effect for price updates */

@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 */

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

/* ==== swap-modal-final-polish.css ==== */
/**
 * ===============================================================================================
 * LOFI SWAP MODAL - FINAL POLISH & STANDARDIZATION
 * ===============================================================================================
 * 
 * This file provides the final layer of polish to ensure a cohesive, professional,
 * and premium user experience across the entire swap modal.
 * 
 * Key Improvements:
 * - Standardized spacing system
 * - Consistent color palette
 * - Typography hierarchy
 * - Premium visual effects
 * - Perfect alignment
 * - Brand consistency
 * 
 * ===============================================================================================
 */

/* ===============================================================================================
 * CSS CUSTOM PROPERTIES - DESIGN SYSTEM
 * ===============================================================================================
 */

:root {
  /* LOFI Brand Colors */
  --lofi-primary: #4F76FF;
  --lofi-primary-dark: #3a5ed8;
  --lofi-primary-light: #6b8aff;
  --lofi-accent: #a8b8ed;
  --lofi-accent-light: #c0cef5;
  --lofi-accent-dark: #8898cd;
  
  /* Background Colors */
  --lofi-bg-primary: #1a1d3e;
  --lofi-bg-secondary: #2a2d5e;
  --lofi-bg-tertiary: rgba(42, 45, 94, 0.9);
  --lofi-bg-overlay: rgba(0, 0, 0, 0.8);
  
  /* Text Colors */
  --lofi-text-primary: #ffffff;
  --lofi-text-secondary: #a8b8ed;
  --lofi-text-muted: #8898cd;
  --lofi-text-dim: #5568a0;
  
  /* Status Colors */
  --lofi-success: #10b981;
  --lofi-warning: #ffaa00;
  --lofi-error: #ff4444;
  
  /* Spacing System */
  --lofi-space-xs: 4px;
  --lofi-space-sm: 8px;
  --lofi-space-md: 16px;
  --lofi-space-lg: 24px;
  --lofi-space-xl: 32px;
  --lofi-space-2xl: 48px;
  
  /* Border Radius */
  --lofi-radius-sm: 6px;
  --lofi-radius-md: 12px;
  --lofi-radius-lg: 16px;
  --lofi-radius-xl: 24px;
  
  /* Typography */
  --lofi-font-primary: 'Gluten', 'Comic Sans MS', cursive;
  --lofi-font-mono: 'Monaco', 'Consolas', monospace;
  
  /* Shadows */
  --lofi-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --lofi-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --lofi-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --lofi-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.6);
  --lofi-shadow-glow: 0 0 30px rgba(79, 118, 255, 0.3);
  
  /* Transitions */
  --lofi-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --lofi-transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --lofi-transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Z-index System */
  --lofi-z-base: 1;
  --lofi-z-dropdown: 10;
  --lofi-z-sticky: 20;
  --lofi-z-modal: 999999;
  --lofi-z-tooltip: 1000000;
}

/* ===============================================================================================
 * GLOBAL RESETS & STANDARDIZATION
 * ===============================================================================================
 */

/* Ensure consistent box-sizing */
#lofi-swap-modal *,
#lofi-swap-modal *::before,
#lofi-swap-modal *::after {
  box-sizing: border-box;
}

/* Standardize transitions */
#lofi-swap-modal * {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-duration: var(--lofi-transition-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===============================================================================================
 * MODAL OVERLAY REFINEMENTS
 * ===============================================================================================
 */

#lofi-swap-modal {
  background: var(--lofi-bg-overlay);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: var(--lofi-z-modal);
}

/* Premium glass effect */
#lofi-swap-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(79, 118, 255, 0.05) 100%);
  pointer-events: none;
}

/* ===============================================================================================
 * CONTAINER REFINEMENTS
 * ===============================================================================================
 */

.lofi-swap-container {
  background: linear-gradient(135deg, var(--lofi-bg-secondary) 0%, var(--lofi-bg-primary) 100%);
  border: 1px solid rgba(168, 184, 237, 0.2);
  border-radius: var(--lofi-radius-xl);
  box-shadow: var(--lofi-shadow-xl), var(--lofi-shadow-glow);
}

/* Premium container glow */
.lofi-swap-container::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(135deg, 
    rgba(79, 118, 255, 0.2) 0%, 
    transparent 40%, 
    transparent 60%, 
    rgba(168, 184, 237, 0.1) 100%);
  border-radius: var(--lofi-radius-xl);
  opacity: 0.5;
  z-index: -1;
  animation: containerGlow 4s ease-in-out infinite;
}

@keyframes containerGlow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

/* ===============================================================================================
 * HEADER STANDARDIZATION
 * ===============================================================================================
 */

.lofi-modal-header {
  padding: var(--lofi-space-md) var(--lofi-space-lg);
  border-bottom: 1px solid rgba(168, 184, 237, 0.15);
  background: rgba(26, 29, 62, 0.5);
}

.lofi-modal-header h2 {
  font-family: var(--lofi-font-primary);
  font-size: 20px;
  font-weight: 700;
  color: var(--lofi-primary);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
}

/* LOFI Logo styling */
.lofi-modal-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(79, 118, 255, 0.4));
  animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Close button refinement */
.lofi-modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--lofi-radius-sm);
  font-size: 20px;
  color: var(--lofi-text-muted);
  background: rgba(168, 184, 237, 0.1);
  border: 1px solid transparent;
  transition: all var(--lofi-transition-base);
}

.lofi-modal-close:hover {
  background: rgba(255, 68, 68, 0.1);
  border-color: rgba(255, 68, 68, 0.3);
  color: var(--lofi-error);
  transform: rotate(90deg) scale(1.1);
}

/* ===============================================================================================
 * CONTENT AREA STANDARDIZATION
 * ===============================================================================================
 */

.lofi-swap-content {
  padding: var(--lofi-space-lg);
}

/* ===============================================================================================
 * TOKEN SECTIONS POLISH
 * ===============================================================================================
 */

.lofi-swap-token-section {
  background: var(--lofi-bg-tertiary);
  border: 1px solid rgba(168, 184, 237, 0.15);
  border-radius: var(--lofi-radius-lg);
  padding: var(--lofi-space-lg);
  margin-bottom: var(--lofi-space-md);
  box-shadow: var(--lofi-shadow-sm);
  position: relative;
  overflow: hidden;
}

/* Token section hover effect */
.lofi-swap-token-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(79, 118, 255, 0.05), 
    transparent);
  transition: left 0.8s ease;
}

.lofi-swap-token-section:hover::before {
  left: 100%;
}

.lofi-swap-token-section:hover {
  border-color: rgba(79, 118, 255, 0.3);
  box-shadow: var(--lofi-shadow-md), 0 0 20px rgba(79, 118, 255, 0.1);
  transform: translateY(-1px);
}

/* Token header standardization */
.lofi-swap-token-header {
  margin-bottom: var(--lofi-space-md);
}

.lofi-swap-token-header label {
  font-family: var(--lofi-font-primary);
  font-size: 14px;
  font-weight: 600;
  color: var(--lofi-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===============================================================================================
 * BALANCE DISPLAY POLISH
 * ===============================================================================================
 */

.lofi-balance-display {
  font-size: 13px;
  color: var(--lofi-text-muted);
  font-family: var(--lofi-font-mono);
}

.lofi-balance-value {
  color: var(--lofi-primary);
  font-weight: 600;
  font-size: 14px;
}

/* MAX button premium styling */
.lofi-max-button {
  background: linear-gradient(135deg, rgba(79, 118, 255, 0.1) 0%, rgba(79, 118, 255, 0.2) 100%);
  border: 1px solid var(--lofi-primary);
  color: var(--lofi-primary);
  padding: 6px 12px;
  border-radius: var(--lofi-radius-sm);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--lofi-font-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}

.lofi-max-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

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

.lofi-max-button:hover {
  background: linear-gradient(135deg, rgba(79, 118, 255, 0.2) 0%, rgba(79, 118, 255, 0.3) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 118, 255, 0.3);
}

/* ===============================================================================================
 * INPUT REFINEMENTS
 * ===============================================================================================
 */

.lofi-swap-input {
  font-family: var(--lofi-font-primary);
  font-size: 28px;
  font-weight: 700;
  color: var(--lofi-text-primary);
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.lofi-swap-input::placeholder {
  color: var(--lofi-text-dim);
  font-weight: 400;
}

/* Input value USD display */
.lofi-input-value-usd {
  font-family: var(--lofi-font-mono);
  font-size: 13px;
  color: var(--lofi-text-muted);
  margin-top: var(--lofi-space-sm);
  font-style: normal;
  opacity: 0.8;
}

/* ===============================================================================================
 * TOKEN SELECTOR PREMIUM STYLING
 * ===============================================================================================
 */

.lofi-token-selector {
  background: linear-gradient(135deg, rgba(138, 138, 237, 0.1) 0%, rgba(138, 138, 237, 0.15) 100%);
  border: 1px solid rgba(138, 138, 237, 0.2);
  padding: var(--lofi-space-sm) var(--lofi-space-md);
  border-radius: var(--lofi-radius-md);
  cursor: default; /* Fixed direction */
  position: relative;
}

.lofi-token-selector img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.lofi-token-selector span {
  font-family: var(--lofi-font-primary);
  font-weight: 700;
  font-size: 16px;
  color: var(--lofi-text-primary);
  letter-spacing: 0.5px;
}

/* ===============================================================================================
 * SWAP DIRECTION INDICATOR (LOCKED)
 * ===============================================================================================
 */

/* ===============================================================================================
 * SWAP DETAILS SECTION
 * ===============================================================================================
 */

.lofi-swap-details {
  background: var(--lofi-bg-tertiary);
  border: 1px solid rgba(138, 138, 237, 0.15);
  border-radius: var(--lofi-radius-md);
  padding: var(--lofi-space-md);
  margin: var(--lofi-space-lg) 0;
  box-shadow: var(--lofi-shadow-sm);
}

.lofi-swap-detail-row {
  padding: var(--lofi-space-sm) 0;
  font-family: var(--lofi-font-primary);
  font-size: 14px;
}

.lofi-swap-detail-row:not(:last-child) {
  border-bottom: 1px solid rgba(138, 138, 237, 0.1);
}

.lofi-swap-detail-row span:first-child {
  color: var(--lofi-text-muted);
  font-weight: 500;
}

.lofi-swap-detail-row span:last-child {
  color: var(--lofi-text-primary);
  font-weight: 600;
}

/* Price value animation */

/* ===============================================================================================
 * SLIPPAGE CONTROLS POLISH
 * ===============================================================================================
 */

.lofi-slippage-preset {
  background: var(--lofi-bg-tertiary);
  border: 1px solid rgba(138, 138, 237, 0.15);
  color: var(--lofi-text-secondary);
  padding: var(--lofi-space-sm) var(--lofi-space-md);
  border-radius: var(--lofi-radius-sm);
  font-family: var(--lofi-font-primary);
  font-size: 12px;
  font-weight: 600;
  transition: all var(--lofi-transition-fast);
}

.lofi-slippage-preset:hover {
  background: rgba(138, 138, 237, 0.15);
  border-color: rgba(138, 138, 237, 0.3);
  color: var(--lofi-text-primary);
  transform: translateY(-1px);
}

.lofi-slippage-preset.active {
  background: linear-gradient(135deg, rgba(79, 118, 255, 0.15) 0%, rgba(79, 118, 255, 0.25) 100%);
  border-color: var(--lofi-primary);
  color: var(--lofi-primary);
  box-shadow: 0 0 12px rgba(79, 118, 255, 0.2);
}

.lofi-slippage-input {
  background: var(--lofi-bg-tertiary);
  border: 1px solid rgba(138, 138, 237, 0.15);
  border-radius: var(--lofi-radius-sm);
  padding: var(--lofi-space-sm) var(--lofi-space-md);
  color: var(--lofi-text-primary);
  font-family: var(--lofi-font-primary);
  font-size: 14px;
  font-weight: 600;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.lofi-slippage-input:focus {
  border-color: var(--lofi-primary);
  box-shadow: 0 0 0 3px rgba(79, 118, 255, 0.1), inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ===============================================================================================
 * SWAP BUTTON - PREMIUM STYLING
 * ===============================================================================================
 */

.lofi-swap-button {
  background: linear-gradient(135deg, var(--lofi-primary) 0%, var(--lofi-primary-dark) 100%);
  border: none;
  border-radius: var(--lofi-radius-lg);
  padding: 18px var(--lofi-space-xl);
  color: white;
  font-family: var(--lofi-font-primary);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(79, 118, 255, 0.3);
  transition: all var(--lofi-transition-base);
}

/* Shine effect */
.lofi-swap-button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  transform: scale(0);
  transition: transform 0.6s ease;
}

.lofi-swap-button:hover:not(:disabled)::before {
  transform: scale(1);
}

.lofi-swap-button:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--lofi-primary-light) 0%, var(--lofi-primary) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79, 118, 255, 0.4), 0 0 40px rgba(79, 118, 255, 0.2);
}

.lofi-swap-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(79, 118, 255, 0.3);
}

.lofi-swap-button:disabled {
  background: var(--lofi-bg-tertiary);
  color: var(--lofi-text-dim);
  cursor: not-allowed;
  box-shadow: none;
}

/* Success state */
.lofi-swap-button.success {
  background: linear-gradient(135deg, var(--lofi-success) 0%, #059669 100%);
  animation: successPulse 0.6s ease;
}

/* Error state */
.lofi-swap-button.error {
  background: linear-gradient(135deg, var(--lofi-error) 0%, #cc0000 100%);
  animation: errorShake 0.5s ease;
}

/* ===============================================================================================
 * MESSAGE STATES
 * ===============================================================================================
 */

.lofi-swap-message {
  padding: var(--lofi-space-md);
  border-radius: var(--lofi-radius-md);
  margin-top: var(--lofi-space-md);
  font-family: var(--lofi-font-primary);
  font-size: 14px;
  text-align: center;
  font-weight: 600;
  animation: messageSlideIn 0.3s ease;
  box-shadow: var(--lofi-shadow-sm);
}

.lofi-swap-message-info {
  background: linear-gradient(135deg, rgba(79, 118, 255, 0.1) 0%, rgba(79, 118, 255, 0.15) 100%);
  border: 1px solid var(--lofi-primary);
  color: var(--lofi-primary);
}

.lofi-swap-message-warning {
  background: linear-gradient(135deg, rgba(255, 170, 0, 0.1) 0%, rgba(255, 170, 0, 0.15) 100%);
  border: 1px solid var(--lofi-warning);
  color: var(--lofi-warning);
}

.lofi-swap-message-error {
  background: linear-gradient(135deg, rgba(255, 68, 68, 0.1) 0%, rgba(255, 68, 68, 0.15) 100%);
  border: 1px solid var(--lofi-error);
  color: var(--lofi-error);
}

/* ===============================================================================================
 * RECENT TRANSACTIONS POLISH
 * ===============================================================================================
 */

.lofi-recent-section {
  margin-top: var(--lofi-space-xl);
  padding-top: var(--lofi-space-lg);
  border-top: 1px solid rgba(138, 138, 237, 0.1);
}

.lofi-recent-header h3 {
  font-family: var(--lofi-font-primary);
  font-size: 16px;
  font-weight: 700;
  color: var(--lofi-text-primary);
  letter-spacing: 0.5px;
}

/* Transaction controls */
.lofi-tx-nav {
  background: var(--lofi-bg-tertiary);
  border: 1px solid rgba(138, 138, 237, 0.15);
  color: var(--lofi-text-secondary);
  width: 28px;
  height: 28px;
  border-radius: var(--lofi-radius-sm);
  font-size: 14px;
  transition: all var(--lofi-transition-fast);
}

.lofi-tx-nav:hover:not(:disabled) {
  background: rgba(138, 138, 237, 0.15);
  border-color: rgba(138, 138, 237, 0.3);
  color: var(--lofi-text-primary);
  transform: scale(1.1);
}

.lofi-tx-counter {
  font-family: var(--lofi-font-mono);
  font-size: 12px;
  color: var(--lofi-text-muted);
  font-weight: 500;
}

.lofi-clear-recent {
  font-family: var(--lofi-font-primary);
  font-size: 11px;
  font-weight: 600;
  color: var(--lofi-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--lofi-space-xs) var(--lofi-space-sm);
  transition: color var(--lofi-transition-fast);
}

.lofi-clear-recent:hover {
  color: var(--lofi-error);
}

/* ===============================================================================================
 * LOADING STATES & SKELETONS
 * ===============================================================================================
 */

.lofi-skeleton {
  background: linear-gradient(90deg, 
    rgba(138, 138, 237, 0.05) 25%, 
    rgba(138, 138, 237, 0.15) 50%, 
    rgba(138, 138, 237, 0.05) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--lofi-radius-sm);
}

/* ===============================================================================================
 * SCROLLBAR STYLING
 * ===============================================================================================
 */

.lofi-swap-container::-webkit-scrollbar,
.lofi-swap-content::-webkit-scrollbar {
  width: 6px;
}

.lofi-swap-container::-webkit-scrollbar-track,
.lofi-swap-content::-webkit-scrollbar-track {
  background: rgba(42, 45, 94, 0.3);
  border-radius: 3px;
}

.lofi-swap-container::-webkit-scrollbar-thumb,
.lofi-swap-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(138, 138, 237, 0.4) 0%, rgba(138, 138, 237, 0.6) 100%);
  border-radius: 3px;
}

.lofi-swap-container::-webkit-scrollbar-thumb:hover,
.lofi-swap-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(138, 138, 237, 0.6) 0%, rgba(138, 138, 237, 0.8) 100%);
}

/* ===============================================================================================
 * MOBILE OPTIMIZATIONS
 * ===============================================================================================
 */

@media (max-width: 767px) {
  :root {
    --lofi-space-lg: 20px;
    --lofi-space-xl: 28px;
  }
  
  .lofi-modal-header {
    padding: var(--lofi-space-md);
  }
  
  .lofi-swap-content {
    padding: var(--lofi-space-md);
  }
  
  .lofi-swap-token-section {
    padding: var(--lofi-space-md);
  }
  
  .lofi-swap-input {
    font-size: 24px;
  }
  
  .lofi-swap-button {
    font-size: 16px;
    padding: 16px var(--lofi-space-lg);
  }
  
  /* Bottom sheet styling */
  .lofi-swap-container {
    border-radius: var(--lofi-radius-xl) var(--lofi-radius-xl) 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  }
}

/* ===============================================================================================
 * TABLET OPTIMIZATIONS
 * ===============================================================================================
 */

@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --lofi-space-lg: 24px;
    --lofi-space-xl: 36px;
  }
  
  .lofi-swap-input {
    font-size: 30px;
  }
  
  .lofi-swap-button {
    font-size: 19px;
    padding: 20px var(--lofi-space-xl);
  }
}

/* ===============================================================================================
 * ACCESSIBILITY ENHANCEMENTS
 * ===============================================================================================
 */

/* Focus visible states */
*:focus-visible {
  outline: 2px solid var(--lofi-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(79, 118, 255, 0.2);
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .lofi-swap-container {
    border-width: 2px;
  }
  
  .lofi-swap-token-section,
  .lofi-swap-details {
    border-width: 2px;
  }
  
  .lofi-swap-button {
    font-weight: 800;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===============================================================================================
 * FINAL TOUCHES
 * ===============================================================================================
 */

/* Ensure text is crisp */
.lofi-swap-container {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Prevent text selection on interactive elements */
.lofi-swap-button,
.lofi-max-button,
.lofi-slippage-preset,
.lofi-modal-close,
.lofi-tx-nav,
.lofi-clear-recent {
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Ensure inputs are not zoomed on mobile */
input[type="number"],
input[type="text"] {
  font-size: 16px !important;
}

/* Perfect pixel alignment */
.lofi-swap-container *::before,
.lofi-swap-container *::after {
  pointer-events: none;
}

/* Ensure modal is always on top */
#lofi-swap-modal {
  isolation: isolate;
}

/* Premium feel with subtle animations */
@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.95; }
}

.lofi-swap-container {
  animation: breathe 4s ease-in-out infinite;
}

/* ===============================================================================================
 * END OF FINAL POLISH
 * ===============================================================================================
 */

/* ==== disconnect-modal.css ==== */
/**
 * LOFI Disconnect Modal Styles
 * Consistent with LOFI design system
 */

/* Base Modal Overlay */
.lofi-disconnect-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  z-index: 100000; /* Very high to ensure it's above all content */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lofi-disconnect-modal.show {
  opacity: 1;
  visibility: visible;
}

/* Base Modal Styles */
.lofi-disconnect-modal .lofi-wallet-modal-content {
  max-width: 400px;
  background: #1a1b23;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 
              0 0 0 1px rgba(168, 184, 237, 0.1),
              0 0 40px rgba(168, 184, 237, 0.15);
  position: relative;
}

/* Header */
.lofi-disconnect-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.lofi-disconnect-title {
  font-family: 'Gluten', sans-serif;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, #a8b8ed, #764ba2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lofi-disconnect-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: #9ca3af;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.lofi-disconnect-close:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(168, 184, 237, 0.3);
  color: #ffffff;
  transform: rotate(90deg);
}

/* Content */
.lofi-disconnect-body {
  padding: 24px;
}

/* Hide wallet info card - no longer used. Scoped to this modal: unscoped, it also hid the
   wallet names (.lofi-wallet-name) in the Connect Wallet list. */
#lofi-disconnect-modal .lofi-wallet-name {
  display: none !important;
}

.lofi-wallet-name {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
  font-family: 'Gluten', sans-serif;
}

/* Copy Address Button */

/* Warning */
.lofi-disconnect-warning {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lofi-disconnect-warning-icon {
  color: #f59e0b;
  font-size: 16px;
  flex-shrink: 0;
}

.lofi-disconnect-warning-text {
  color: #f59e0b;
  font-size: 13px;
  line-height: 1.4;
}

/* Actions */
.lofi-disconnect-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.lofi-btn-disconnect {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  border: none;
  padding: 14px 24px;
  border-radius: 12px;
  font-family: 'Gluten', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2; /* Reduced line height */
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.lofi-btn-disconnect:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
}

.lofi-btn-disconnect:active {
  transform: translateY(-1px);
}

.lofi-btn-cancel {
  background: transparent;
  color: #a8b8ed;
  border: 1px solid #a8b8ed;
  padding: 14px 24px;
  border-radius: 12px;
  font-family: 'Gluten', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2; /* Reduced line height */
  cursor: pointer;
  transition: all 0.2s;
}

.lofi-btn-cancel:hover {
  background: rgba(168, 184, 237, 0.1);
  transform: translateY(-1px);
  border-color: #c5d0f0;
}

/* Loading State */
.lofi-btn-disconnect.loading {
  color: transparent;
  pointer-events: none;
}

.lofi-btn-disconnect.loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .lofi-disconnect-modal .lofi-wallet-modal-content {
    max-width: calc(100% - 32px);
    margin: 16px;
  }
  
  .lofi-disconnect-header {
    padding: 20px;
  }
  
  .lofi-disconnect-title {
    font-size: 20px;
  }
  
  .lofi-disconnect-body {
    padding: 20px;
  }
  
  .lofi-wallet-name {
    font-size: 16px;
  }
  
  .lofi-disconnect-actions {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .lofi-btn-cancel {
    order: -1; /* Cancel button first on mobile */
  }
}

/* Focus States for Accessibility */
.lofi-disconnect-close:focus-visible,
.lofi-btn-disconnect:focus-visible,
.lofi-btn-cancel:focus-visible {
  outline: 2px solid #a8b8ed;
  outline-offset: 2px;
}

/* Animation for modal appearance */
.lofi-disconnect-modal .lofi-wallet-modal-content {
  animation: slideUp 0.3s ease-out;
  transform-origin: center;
}

.lofi-disconnect-modal.show .lofi-wallet-modal-content {
  animation: slideUp 0.3s ease-out;
}

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

/* Click outside to close */
.lofi-disconnect-modal {
  cursor: pointer;
}

.lofi-disconnect-modal .lofi-wallet-modal-content {
  cursor: default;
}

/* ==== cex-placeholders.css ==== */
/* CEX Image Styles */

/* The Binance.US logo asset (binance-CEXlogo.png) is 740x118 — a wide
   wordmark — whereas every other CEX logo is 500x200. Without this rule the
   card shrink-wraps to the short logo and renders at ~half height. Forcing
   the image box to the standard 5:2 ratio makes the card size identically to
   the rest at every breakpoint; object-fit: contain keeps the logo undistorted. */
#w-node-binance-aff75e3c .modal-body.cex img {
  width: 500px;
  height: auto;
  aspect-ratio: 5 / 2;
  object-fit: contain;
}

/* ==== animation-performance-fix.css ==== */
/**
 * Animation Performance Fix
 * Fixes animation speed differences between mobile and desktop
 * Forces consistent GPU acceleration across all devices
 */

/* Force GPU acceleration on gradient animations */
.animate-gradient,
[animate="gradient"],
.preloader-wrapper.v2.animate-gradient {
  /* Force GPU acceleration */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  
  /* Optimize rendering */
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  
  /* Tell browser this will animate */
  will-change: background-position;
  
  /* Prevent flickering */
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
}

/* Normalize animation timing across devices */
@media screen and (max-width: 768px) {
  .animate-gradient,
  [animate="gradient"] {
    /* Slow down animation on mobile to compensate for higher refresh rates */
    animation-duration: 24s !important;
  }
}

/* Force GPU acceleration on marquee/scroll animations */
.marquee-content,
.marquee-content.scroll {
  /* Force GPU acceleration */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  
  /* Optimize rendering */
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  
  /* Tell browser this will animate */
  will-change: transform;
}

/* Adjust marquee timing for mobile */
@media screen and (max-width: 768px) {
  .marquee-content.scroll {
    /* Slow down marquee on mobile */
    animation-duration: 15s !important;
  }
}

/* Fix for high refresh rate displays */
@media screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
  .animate-gradient,
  [animate="gradient"] {
    animation-duration: 28s !important;
  }
  
  .marquee-content.scroll {
    animation-duration: 18s !important;
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .animate-gradient,
  [animate="gradient"],
  .marquee-content,
  .marquee-content.scroll {
    animation: none !important;
  }
}

/* Ensure smooth animations on all devices */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Prevent animation jank on scroll */
body {
  -webkit-overflow-scrolling: touch;
}

/* Fix for iOS devices specifically */
@supports (-webkit-touch-callout: none) {
  .animate-gradient,
  [animate="gradient"] {
    animation-duration: 32s !important;
  }
  
  .marquee-content.scroll {
    animation-duration: 20s !important;
  }
}

/* Add smooth transition for all animated elements */
.animate-gradient,
[animate="gradient"],
.marquee-content,
.marquee-content.scroll {
  transition: none !important; /* Prevent double animations */
}

/* ==== hero-overlay-fix.css ==== */
/**
 * Hero Overlay Interaction Fix
 * Makes the hero overlay non-interactive while preserving visual effect
 */

/* Fix the blocking hero overlay */
.overlay.tophero.v2 {
  pointer-events: none !important;
}

/* Ensure any content within the hero that needs interaction still works */
.overlay.tophero.v2 > * {
  pointer-events: auto;
}

/* ==== nav-swap-icon.css ==== */
/**
 * Navigation Swap Icon Button
 * Simple icon button that sits next to wallet button
 */

/* Container for wallet actions */
.wallet-actions-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto; /* Push to far right */
}

/* Swap icon button */
.nav-swap-icon-btn {
  display: none !important; /* Hidden by default - important to override any inline styles */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 4px;
  background-color: var(--dark-accent-1);
  border: 2px solid var(--dark-accent-1);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.35s;
  position: relative;
  overflow: visible;
  opacity: 0;
  transform: scale(0.8);
  gap: 1px;
}

/* Swap text styling */
.nav-swap-text {
  font-family: 'Gluten', Impact, sans-serif;
  font-size: 7px !important;
  font-weight: 600;
  color: var(--primary-light);
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
  padding: 0;
  display: block;
  white-space: nowrap;
}

/* Show state with animation */
.nav-swap-icon-btn.show {
  display: inline-flex !important;
  animation: swapButtonFadeIn 0.4s ease-out forwards;
}

/* Ensure no transform on clicked state during show */
.nav-swap-icon-btn.show:active {
  transform: scale(1) !important;
}

@keyframes swapButtonFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Swap icon image */
.nav-swap-icon {
  filter: brightness(60%);
  width: 20px;
  height: 20px;
  display: block;
  margin-top: 0;
  transition: transform 0.35s;
}

/* Hover effect - icon rotation only */
.nav-swap-icon-btn:hover .nav-swap-icon {
  transform: rotate(180deg);
}


/* Ensure it aligns with wallet button */
#btn-wallet-connect,
.nav-swap-icon-btn {
  display: inline-block;
  vertical-align: middle;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .nav-swap-icon-btn {
    width: 42px;
    height: 42px;
    padding: 3px;
    margin-left: 6px;
  }
  
  .nav-swap-text {
    font-size: 6px !important;
  }
  
  .nav-swap-icon {
    width: 18px;
    height: 18px;
  }
}

/* Very small mobile */
@media (max-width: 480px) {
  .nav-swap-icon-btn {
    width: 40px;
    height: 40px;
    padding: 3px;
    margin-left: 5px;
  }
  
  .nav-swap-text {
    font-size: 6px !important;
  }
  
  .nav-swap-icon {
    width: 17px;
    height: 17px;
  }
}

/* Ensure wallet button aligns properly */
.button-wallet-connect {
  margin-left: 0;
}

/* Prevent any unwanted state changes */
.nav-swap-icon-btn:active,
.nav-swap-icon-btn:focus,
.nav-swap-icon-btn.active,
.nav-swap-icon-btn.success {
  transform: none !important;
  background-color: var(--dark-accent-1) !important;
  border-color: var(--dark-accent-1) !important;
  box-shadow: none !important;
}

/* Remove any pseudo elements that might be added */
.nav-swap-icon-btn::before,
.nav-swap-icon-btn::after {
  display: none !important;
  content: none !important;
}

/* Ensure text and icon don't change */
.nav-swap-icon-btn:active .nav-swap-text,
.nav-swap-icon-btn:active .nav-swap-icon,
.nav-swap-icon-btn.active .nav-swap-text,
.nav-swap-icon-btn.active .nav-swap-icon,
.nav-swap-icon-btn.success .nav-swap-text,
.nav-swap-icon-btn.success .nav-swap-icon {
  color: var(--primary-light) !important;
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Prevent text content changes */
.nav-swap-icon-btn .nav-swap-text::before,
.nav-swap-icon-btn .nav-swap-text::after {
  display: none !important;
}

/* Loading state */
.nav-swap-icon-btn.loading {
  opacity: 0.7;
  cursor: not-allowed;
}

.nav-swap-icon-btn.loading .nav-swap-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ==== nav-layout-fix.css ==== */
/**
 * Navigation Layout Fix
 * Ensures proper alignment with wallet actions container
 */

/* Ensure navigation maintains proper layout */
.navigation-wrap-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Menu should not push wallet actions */
.menu-2 {
  flex: 1;
  max-width: calc(100% - 300px); /* Leave space for wallet actions */
}

/* Ensure wallet actions stay on far right */
.wallet-actions-container {
  flex-shrink: 0;
  margin-left: auto;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .menu-2 {
    max-width: calc(100% - 200px);
  }
}

/* ==== nav-swap-icon-fix.css ==== */
/**
 * Nav Swap Icon Fix
 * Prevents any unwanted state changes or success messages
 */

/* Complete isolation for nav swap button */
#nav-swap-button,
#nav-swap-button *,
#nav-swap-button::before,
#nav-swap-button::after,
#nav-swap-button .nav-swap-text::before,
#nav-swap-button .nav-swap-text::after,
#nav-swap-button .nav-swap-icon::before,
#nav-swap-button .nav-swap-icon::after {
  /* Reset all potential success/active states */
  animation-name: none !important;
  animation-duration: 0s !important;
  animation-fill-mode: none !important;
  transition-property: transform, opacity !important;
  transition-duration: 0.35s !important;
}

/* Preserve only the hover rotation for icon */
#nav-swap-button:hover .nav-swap-icon {
  transform: rotate(180deg) !important;
}

/* Block any content injection */
#nav-swap-button::before,
#nav-swap-button::after,
#nav-swap-button .nav-swap-text::before,
#nav-swap-button .nav-swap-text::after {
  content: "" !important;
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* Force original text to stay visible */
#nav-swap-button .nav-swap-text {
  font-size: 7px !important;
  color: var(--primary-light) !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  text-indent: 0 !important;
}

/* Prevent any class additions from changing appearance */
#nav-swap-button.active,
#nav-swap-button.success,
#nav-swap-button:active,
#nav-swap-button:focus {
  background-color: var(--dark-accent-1) !important;
  border-color: var(--dark-accent-1) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Keep showing during animation */
#nav-swap-button.show {
  animation: swapButtonFadeIn 0.4s ease-out forwards !important;
}

/* ==== mobile-button-fix.css ==== */
/**
 * Mobile Button Fix
 * Fixes the button padbottommobile blue w-button styling issues on mobile
 */

/* Fix button styling on all screen sizes */
.button.padbottommobile.blue.w-button {
  /* Solid blue background for all viewports */
  background-image: none !important;
  background-color: var(--blue-accent-darkest) !important;
  
  /* Light glow shadow */
  box-shadow: 0 0 15px 2px var(--primary-light) !important;
  
  /* Proper text sizing */
  font-size: 1rem !important;
  font-weight: 600 !important;
  
  /* Consistent padding */
  padding: 12px 24px !important;
  
  /* Proper button styling */
  border: none !important;
  border-radius: 8px !important;
  
  /* Text styling */
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  
  /* Layout */
  display: inline-block !important;
  text-align: center !important;
  
  /* Transitions */
  transition: all 0.3s ease !important;
  
  /* Font */
  font-family: 'Gluten', sans-serif !important;
}

/* Hover state */
.button.padbottommobile.blue.w-button:hover {
  background-image: none !important;
  background-color: var(--blue-accent-darkest) !important;
  box-shadow: 0 0 20px 4px var(--primary-light) !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
}

/* Active state */
.button.padbottommobile.blue.w-button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 10px rgba(79, 118, 255, 0.2) !important;
}

/* Tablet adjustments */
@media screen and (max-width: 768px) {
  .button.padbottommobile.blue.w-button {
    font-size: 0.95rem !important;
    padding: 10px 20px !important;
  }
}

/* Mobile adjustments */
@media screen and (max-width: 479px) {
  .button.padbottommobile.blue.w-button {
    font-size: 0.85rem !important;
    padding: 8px 18px !important;
    letter-spacing: 0.3px !important;
    
    /* Ensure text doesn't break */
    white-space: nowrap !important;
    
    /* Maintain minimum width for readability */
    min-width: 120px !important;
  }
  
  /* Hover state for mobile - slightly less movement */
  .button.padbottommobile.blue.w-button:hover {
    transform: translateY(-1px) !important;
  }
}

/* Very small mobile adjustments */
@media screen and (max-width: 375px) {
  .button.padbottommobile.blue.w-button {
    font-size: 0.8rem !important;
    padding: 8px 16px !important;
    min-width: 110px !important;
  }
}

/* Override any conflicting Webflow styles */
.w-button {
  background-image: none;
  background-color: transparent;
}

/* Specific fix for the "Click Here" button in swap section */
.button.padbottommobile.blue.w-button[onclick*="simpleHandleBuyNow"] {
  margin-bottom: 12px !important;
}

/* Ensure consistent styling across all instances */
a.button.padbottommobile.blue.w-button {
  display: inline-block !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* ==== index.html inline \3c style> (lines 880-1140) ==== */
    /* Enhanced Swap Progress Indicator */
    
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.6; }
    }
    
    /* Enhanced Swap Button States */
    
    @keyframes gradientShift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    
    /* Transaction Hash Display */
    
    /* Real-time Price Updates */
    
    @keyframes priceFlash {
      0% { background: rgba(59, 130, 246, 0.2); }
      100% { background: transparent; }
    }
    
    /* External URL Info */
    
    /* Slippage Warning */
    
    /* Balance Display Enhancement */
    
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    
    /* Agent 3: Price Update Animations */
    
    /* Enhanced Price Display States */
    [data-price-display] {
      transition: all 0.3s ease;
    }
    
    /* Slippage Controls */
    
    /* Quote Details */

/* ==== index.html inline \3c style> (lines 1329-1464) ==== */
    .lofi-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 999999;
      animation: fadeIn 0.3s ease;
    }

    .lofi-modal-container {
      background: linear-gradient(135deg, #1a1f3a 0%, #2d3561 100%);
      border: 2px solid rgba(168, 184, 237, 0.3);
      border-radius: 16px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
      max-width: 420px;
      width: 90%;
      animation: slideUp 0.3s ease;
    }

    .lofi-modal-header {
      padding: 24px;
      border-bottom: 1px solid rgba(168, 184, 237, 0.2);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(0, 0, 0, 0.1);
    }

    .lofi-modal-header h2 {
      color: #ffffff;
      font-size: 24px;
      font-weight: 600;
      margin: 0;
      font-family: 'Gluten', sans-serif;
    }

    .lofi-modal-close {
      background: none;
      border: none;
      color: #ffffff;
      font-size: 28px;
      cursor: pointer;
      opacity: 0.7;
      transition: opacity 0.2s;
      padding: 0;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .lofi-modal-close:hover {
      opacity: 1;
    }

    .lofi-modal-content {
      padding: 24px;
    }

    .lofi-wallet-options {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .lofi-wallet-option {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .lofi-wallet-option:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: #a8b8ed;
      transform: translateY(-2px);
    }

    .lofi-wallet-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
    }

    .lofi-wallet-name {
      color: #ffffff;
      font-size: 18px;
      font-weight: 500;
      font-family: 'Gluten', sans-serif;
      flex: 1;
    }

    .lofi-wallet-status {
      color: #a8b8ed;
      font-size: 14px;
      font-weight: 400;
      font-family: 'Gluten', sans-serif;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

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

/* ==== index.html inline \3c style> (lines 1466-2064) ==== */
    /* Extend existing modal styles */
    .lofi-swap-container {
      max-width: 480px;
    }

    /* Swap Direction Styles */

    /* Input/Output Sections */

    /* Slippage Settings */

    /* Transaction Details */

    /* Execute Button */

    /* Transaction Status */

    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    
    /* Loading state for swap inputs */
    
    @keyframes shimmer {
      to { left: 100%; }
    }

    /* Success/Error States */

    /* Responsive Design for Swap Modal */
    @media (max-width: 768px) {
      .lofi-swap-container {
        max-width: 95%;
        margin: 10px;
      }

      .lofi-modal-content {
        padding: 16px;
      }

      .lofi-modal-header h2 {
        font-size: 20px;
      }
    }

    @media (max-width: 480px) {
      .lofi-swap-container {
        width: 100%;
        height: 100%;
        max-width: 100%;
        border-radius: 0;
        display: flex;
        flex-direction: column;
      }

      .lofi-modal-overlay {
        padding: 0;
      }

      .lofi-modal-content {
        flex: 1;
        overflow-y: auto;
        padding: 12px;
      }
    }

    /* High DPI / Retina Display Enhancements */
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .lofi-modal-container {
        border-width: 1px;
      }
    }

    /* Fix for small height devices (landscape mobile) */
    @media (max-height: 600px) and (orientation: landscape) {
      .lofi-modal-container {
        max-height: 90vh;
        overflow-y: auto;
      }

      .lofi-modal-header {
        padding: 16px 24px;
      }

      .lofi-modal-content {
        padding: 16px;
      }
    }

    /* Ensure proper text readability */

    /* Improve touch targets on mobile */
    @media (pointer: coarse) {
      .lofi-modal-close {
        width: 44px;
        height: 44px;
        font-size: 32px;
      }
    }

    /* Fix z-index issues on mobile */
    .lofi-modal-overlay {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    /* Smooth scrolling on iOS */
    .lofi-modal-content {
      -webkit-overflow-scrolling: touch;
    }

    /* Prevent text selection on interactive elements */

    /* Better number input on mobile */

/* ==== src/styles/island.css ==== */
/* Notifications: same look as the legacy NotificationSystem, which injected these styles inline. */
#turbos-notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 400px;
  pointer-events: none;
}

.turbos-notification {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-family: system-ui, -apple-system, sans-serif;
  pointer-events: auto;
  animation: lofi-toast-in 0.3s ease-out;
}

.turbos-notification.leaving {
  animation: lofi-toast-out 0.3s ease-out forwards;
}

.turbos-notification-success { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.turbos-notification-error { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.turbos-notification-warning { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.turbos-notification-info { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }

.turbos-notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.turbos-notification-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.turbos-notification-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: none;
  color: inherit;
  font-size: 20px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.turbos-notification-close:hover {
  opacity: 1;
}

.turbos-notification-message {
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.9;
}

@keyframes lofi-toast-in {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes lofi-toast-out {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

@media (max-width: 768px) {
  #turbos-notification-container {
    left: 10px;
    right: 10px;
    max-width: none;
  }
}

/* swap-modal-text-colors.css sets `color: inherit` on everything in the container, so the
   recent-transactions counter ended up near-black (Webflow's --darkprimary). Restore the
   slider's intended color; the extra class outranks that rule's specificity. */
#lofi-swap-modal .lofi-swap-container .lofi-tx-counter {
  color: #8898cd;
}

@media (max-width: 767px) {
  /* On phones the custom slippage box is ~34px wide; the legacy 16px side padding left no room
     for the value, so it looked empty. */
  #lofi-swap-modal .lofi-slippage-input {
    padding-left: 2px;
    padding-right: 2px;
    text-align: center;
  }

  /* The enlarged mobile buttons pushed the controls past the modal edge (Clear was cut off):
     give them their own row under the title. */
  #lofi-swap-modal .lofi-recent-header {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  #lofi-swap-modal .lofi-transaction-controls {
    flex-basis: 100%;
    justify-content: space-between;
  }
}