/**
 * ===============================================================================================
 * 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 */
.swap-execute-btn {
  padding: 12px 20px !important;  /* 44px total height */
  font-size: 16px !important;
  min-height: 44px !important;
  letter-spacing: 0.25px !important;
}

/* Mobile button adjustments */
@media (max-width: 768px) {
  .lofi-swap-button,
  .swap-execute-btn {
    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 */
.lofi-swap-reverse-container {
  margin: -6px 0 !important;  /* Tighter overlap */
}

/* Reduce reverse button size slightly */
.lofi-swap-reverse-button {
  width: 40px !important;   /* Reduced from 44-48px */
  height: 40px !important;
}

/* ===============================================================================================
 * 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,
  .swap-amount-input {
    font-size: 24px !important;  /* Reduced from 28px */
  }
  
  .swap-output-amount {
    font-size: 24px !important;
  }
}

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

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

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

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

/* Reduce slippage section padding */
.swap-slippage-section {
  margin-bottom: 16px !important;  /* Reduced from 24px */
  padding: 12px !important;        /* Reduced from 16px */
}

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

/* Tighter slippage options grid */
.swap-slippage-options {
  gap: 6px !important;             /* Reduced from 8px */
  margin-top: 6px !important;      /* Reduced from 8px */
}

/* Custom slippage input spacing */
.custom-slippage-input {
  margin-top: 10px !important;     /* Reduced from 16px */
}

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

/* Reduce quick actions spacing */
.lofi-quick-actions {
  margin-bottom: 16px !important;  /* Reduced from 20-24px */
  gap: 8px !important;             /* Reduced from 12px */
}

/* Smaller quick action buttons */
.lofi-quick-action {
  padding: 8px 16px !important;    /* Reduced from 10x20px */
  font-size: 13px !important;      /* Smaller font */
}

/* ===============================================================================================
 * 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 */
.swap-status {
  padding: 20px 16px !important;   /* Reduced padding */
  margin-top: 16px !important;     /* Reduced from 24px */
}

/* ===============================================================================================
 * 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,
.lofi-swap-modal-content {
  max-height: 85vh !important;     /* Slightly reduced from 90vh */
}

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

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

/* Reduce input container padding */
.swap-input-container,
.swap-output-container {
  padding: 12px !important;        /* Reduced from 16px */
}

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

.token-icon-small {
  width: 20px !important;          /* Reduced from 24px */
  height: 20px !important;
}

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

/* Reduce general section margins */
.swap-input-section,
.swap-output-section {
  margin-bottom: 16px !important;  /* Reduced from 24px */
}

/* Tighter label spacing */
.swap-label {
  margin-bottom: 6px !important;   /* Reduced from 8px */
}

/* Reduce balance/rate text spacing */
.swap-balance,
.swap-rate {
  margin-top: 6px !important;      /* Reduced from 8px */
  font-size: 12px !important;      /* Smaller font */
}

/* ===============================================================================================
 * 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,
  .swap-execute-btn {
    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,
  .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,
  .lofi-swap-reverse-button::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,
.slippage-option {
  min-height: 36px !important;  /* Slightly below 44px for non-primary actions */
}

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