/**
 * 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 *,
.simple-swap-modal,
.simple-swap-modal * {
  font-family: 'Gluten', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Fix modal headers */
.lofi-modal-header h2,
.simple-swap-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,
.swap-amount-input,
#sui-amount,
#lofi-amount,
input[type="text"],
input[type="number"] {
  font-family: 'Gluten', monospace !important;
  font-weight: 600;
  letter-spacing: 0.25px;
}

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

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

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

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

/* Price displays */
.lofi-price-text,
.swap-rate,
#simple-lofi-rate,
.simple-price-banner {
  font-family: 'Gluten', monospace !important;
  font-weight: 600;
  letter-spacing: 0.25px;
}

/* ===============================================================================================
 * 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,
  .simple-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,
  .simple-swap-header {
    padding: 16px 16px 12px 16px !important;
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 10;
  }
  
  .lofi-modal-header h2,
  .simple-swap-header h2 {
    font-size: 18px !important;
    letter-spacing: 0.25px !important;
  }
  
  /* Content padding */
  .lofi-swap-content,
  .simple-swap-content {
    padding: 16px !important;
  }
  
  /* Input fields - ensure proper sizing */
  .lofi-swap-input,
  .swap-amount-input,
  #sui-amount {
    font-size: 22px !important;
    padding: 8px 0 !important;
    min-height: 44px !important; /* Touch target */
  }
  
  /* Token selectors */
  .lofi-token-selector,
  .swap-input-token,
  .swap-output-token {
    padding: 8px 12px !important;
    min-height: 44px !important; /* Touch target */
  }
  
  .lofi-token-selector span,
  .token-symbol {
    font-size: 14px !important;
  }
  
  .token-icon,
  .token-icon-small {
    width: 24px !important;
    height: 24px !important;
  }
  
  /* Buttons - ensure proper touch targets */
  .lofi-swap-button,
  .swap-execute-btn,
  .simple-swap-btn {
    min-height: 52px !important;
    font-size: 16px !important;
    padding: 14px 20px !important;
    letter-spacing: 0.5px !important;
  }
  
  .lofi-max-button,
  .lofi-quick-action {
    min-height: 36px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  
  /* Slippage controls */
  .lofi-slippage-presets {
    gap: 4px !important;
  }
  
  .lofi-slippage-preset,
  .slippage-option {
    min-height: 36px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
  
  /* Reverse button */
  .lofi-swap-reverse-button {
    width: 40px !important;
    height: 40px !important;
  }
  
  /* Balance displays */
  .lofi-balance-display,
  .swap-balance {
    font-size: 12px !important;
  }
  
  /* Quick actions - stack on very small screens */
  @media (max-width: 380px) {
    .lofi-quick-actions {
      flex-direction: column !important;
      width: 100% !important;
    }
    
    .lofi-quick-action {
      width: 100% !important;
    }
  }
}

/* ===============================================================================================
 * RESPONSIVE FIXES - SMALL MOBILE (320px - 374px)
 * ===============================================================================================
 */
@media (max-width: 374px) {
  /* Further reduce font sizes */
  .lofi-modal-header h2,
  .simple-swap-header h2 {
    font-size: 16px !important;
  }
  
  .lofi-swap-input,
  .swap-amount-input,
  #sui-amount {
    font-size: 20px !important;
  }
  
  .lofi-swap-button,
  .swap-execute-btn {
    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,
  .simple-swap-container {
    max-width: 520px !important;
  }
  
  .lofi-modal-header h2,
  .simple-swap-header h2 {
    font-size: 22px !important;
  }
  
  .lofi-swap-input,
  .swap-amount-input {
    font-size: 26px !important;
  }
}

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

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

/* Ensure all interactive elements have proper minimum touch targets */
button,
.lofi-modal-close,
.simple-close-btn,
.lofi-token-selector,
.lofi-swap-reverse-button {
  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,
  .simple-swap-container::-webkit-scrollbar {
    width: 0;
    display: none;
  }
  
  .lofi-swap-container,
  .simple-swap-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

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

/* Ensure modal overlay covers entire viewport */
#lofi-swap-modal,
#simple-lofi-swap-modal,
.simple-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,
.swap-amount-input,
#sui-amount,
#lofi-amount,
.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,
  .swap-execute-btn::before {
    display: none !important; /* Remove shimmer on mobile */
  }
}

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

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

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

.lofi-swap-container,
.simple-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,
    .simple-swap-container {
      padding-bottom: env(safe-area-inset-bottom) !important;
    }
    
    .lofi-swap-content,
    .simple-swap-content {
      padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    }
  }
}