/* ==========================================
   MOBILE APP EXPERIENCE OPTIMIZATIONS
   Native-like feel on phones, perfect on all devices
   ========================================== */

/* ===== MOBILE-FIRST BASE STYLES ===== */
:root {
  /* App-like spacing */
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  
  /* Touch-optimized sizes */
  --touch-target-min: 44px;
  --mobile-padding: 16px;
  --mobile-gap: 12px;
  
  /* Smooth animations */
  --transition-snappy: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ===== PREVENT OVERSCROLL BOUNCE (iOS) ===== */
html {
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}

body {
  overscroll-behavior: contain;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
}

/* ===== SMOOTH SCROLLING ===== */
* {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== SAFE AREA SUPPORT (NOTCHED DEVICES) ===== */
@supports (padding: max(0px)) {
  body {
    padding-left: max(var(--mobile-padding), var(--safe-area-inset-left));
    padding-right: max(var(--mobile-padding), var(--safe-area-inset-right));
  }
  
  header,
  .hero-section,
  #controls {
    padding-top: max(1rem, var(--safe-area-inset-top));
  }
  
  footer {
    padding-bottom: max(1rem, var(--safe-area-inset-bottom));
  }
}

/* ===== MOBILE-SPECIFIC STYLES (< 768px) ===== */
@media (max-width: 767px) {
  /* Remove body side padding on mobile for full-width sections */
  body {
    padding-left: 0;
    padding-right: 0;
  }
  
  /* App-like container padding */
  .container {
    padding-left: var(--mobile-padding);
    padding-right: var(--mobile-padding);
  }
  
  /* Removed old #controls and input overrides - now handled by theme.css */
  
  /* Country picker is handled by country-picker.css - do not override */
  
  /* Rate table - swipe-friendly cards - DISABLED to prevent grid breakage */
  /* #rates > div > div {
    padding: 16px !important;
    margin-bottom: 8px;
  } */
  
  /* Provider cards - app-like spacing with NO TEXT OVERLAP */
  [data-provider] {
    padding: 20px 16px !important;
    margin-bottom: 1px;
    transition: background-color var(--transition-snappy);
  }
  
  [data-provider]:active {
    background-color: rgba(0, 0, 0, 0.02);
  }
  
  /* FIX: Prevent text overlap in provider cards */
  [data-provider] > div:first-child {
    margin-bottom: 16px !important;
  }
  
  /* Fee tier hints and delivery info - clear spacing */
  [data-provider] [class*="tier"],
  [data-provider] .text-\[10px\] {
    margin-top: 8px !important;
    line-height: 1.5 !important;
  }
  
  /* Delivery info and payout methods - prevent crowding */
  [data-provider] .flex-col {
    gap: 10px !important;
    margin-top: 12px !important;
  }
  
  /* Fee and cost columns - clear bottom spacing */
  [data-provider] .col-span-4 {
    margin-bottom: 14px !important;
  }
  
  /* Button column - clear separation */
  [data-provider] > .col-span-12:last-child {
    margin-top: 16px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }
  
  html.dark [data-provider] > .col-span-12:last-child {
    border-top-color: rgba(255, 255, 255, 0.08);
  }
  
  /* Hero section - mobile optimized */
  .hero-section {
    padding: 24px var(--mobile-padding) !important;
  }
  
  .hero-section h1 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }
  
  .hero-section p {
    font-size: 1rem !important;
  }
  
  /* Fix info-tags text overflow on mobile */
  .info-tags {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    display: inline-block !important;
    width: auto !important;
    padding: 0 8px !important;
  }
  
  /* Ensure spans wrap properly */
  .info-tags span {
    display: inline !important;
    white-space: nowrap !important;
  }
  
  /* Tighten spacing on very small screens */
  @media (max-width: 375px) {
    .info-tags {
      font-size: 10px !important;
      padding: 0 4px !important;
    }
    .info-tags span[style*="margin"] {
      margin: 0 2px !important;
    }
  }
  
  /* Hero section layout - mobile first */
  .bg-hero {
    padding-top: 1rem !important; /* 16px - Tight mobile spacing */
    padding-bottom: 1.5rem !important; /* 24px */
  }
  
  .bg-hero > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  .bg-hero .rounded-3xl {
    padding: 24px 20px !important;
    margin-top: 0 !important; /* Remove mt-2 on mobile */
  }
  
  .bg-hero .grid > div:first-child {
    text-align: center;
    margin-bottom: 32px;
  }
  
  .bg-hero h1,
  .bg-hero p {
    text-align: center;
  }
  
  /* ===================================
     MOBILE SPACING REFINEMENT v2.0
     Premium tight layout with floating card effect
     =================================== */
  
  /* Hero layout - tighter gap between calculator and Popular Corridors */
  .hero-layout {
    gap: 16px !important; /* Reduced from 24px → 16px for tighter vertical flow */
  }
  
  /* Show Best Rates button container - reduce bottom spacing */
  .show-rates-button-container {
    margin-bottom: 0 !important; /* Remove default bottom margin */
  }
  
  /* Main content - reduced top margin */
  main.max-w-6xl {
    margin-top: 16px !important; /* Reduced from 32px → 16px for tighter feel */
  }
  
  /* Popular Corridors - Premium floating card effect with adjusted spacing */
  .popular-corridors {
    margin-top: -6px !important; /* Reduced negative margin: -10px → -6px for 16-20px total gap */
    margin-bottom: 12px !important; /* Reduced bottom margin (closer to Best Overall) */
    padding-top: 0 !important;
    position: relative;
    z-index: 10; /* Float above background */
  }
  
  /* Ensure Popular Corridors card styling supports overlap */
  .popular-corridors {
    background: var(--card-bg, #ffffff);
    border-radius: 24px;
    overflow: visible; /* Allow box-shadow to show */
  }
  
  .dark .popular-corridors {
    background: var(--card-bg-dark, #1e293b);
  }
  
  /* Best Overall section - tight spacing above */
  #best-overall.best-overall-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 20px !important; /* Reduced from 28px */
  }
  
  /* Corridor grid - clean mobile spacing */
  .corridor-grid {
    margin: 0 auto;
    padding: 0;
    width: 100%;
  }
  
  /* ===================================
     PREMIUM INPUT ALIGNMENT - Mobile Only
     Perfect centering with reduced currency badges
     =================================== */
  
  /* Input container - perfect centering */
  .amount-card__body {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 20px !important; /* Equal horizontal padding */
    position: relative !important;
  }
  
  /* Remove spacer on mobile (currency badge absolute positioned) */
  .amount-card__spacer {
    display: none !important;
  }
  
  /* Center the input value perfectly */
  .amount-card__value {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  /* Input - perfectly centered, identical sizing */
  .amount-card__input,
  .amount-card--send .amount-card__input,
  .amount-card--receive .amount-card__input,
  input#amount,
  input#receive-amount {
    text-align: center !important;
    font-size: 28px !important; /* Identical size for both */
    font-weight: 700 !important;
    line-height: 1.2 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Recipient Gets - Same size, blue color maintained */
  .amount-card--receive .amount-card__input,
  input#receive-amount {
    color: #0078ff !important;
  }
  
  /* Currency badge - 25% smaller, absolute positioned on right */
  .amount-card__badge {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
  }
  
  .amount-card__currency-pill,
  button.amount-card__currency-pill {
    font-size: 11px !important; /* Reduced from 13-14px (20-25% smaller) */
    font-weight: 500 !important; /* Lighter weight: 600 → 500 */
    padding: 4px 10px !important; /* Reduced from 6px 14px */
    border-width: 1px !important;
    opacity: 0.9 !important; /* Slightly lighter appearance */
  }
  
  /* Dark mode adjustments */
  html.dark .amount-card--receive .amount-card__input,
  html.dark input#receive-amount {
    color: #60a5fa !important;
  }
  
  /* Logo - BIG and visible on mobile */
  header img[alt*="AyaSend"] {
    height: 58px !important;
    width: auto !important;
    max-width: none !important;
  }
  
  /* Reduce header bottom padding on mobile for tighter layout */
  header {
    padding-bottom: 0.5rem !important;
  }
  
  /* Footer - compact */
  footer {
    padding: 24px var(--mobile-padding) !important;
  }
  
  /* Modal overlays - full screen */
  [role="dialog"]:not(.country-panel) {
    margin: 0;
    max-width: 100vw;
    border-radius: 0;
  }
}

/* ===== DESKTOP/TABLET HERO SPACING (≥ 768px) ===== */
@media (min-width: 768px) {
  .bg-hero {
    padding-top: 2rem !important; /* 32px - More breathing room on desktop */
    padding-bottom: 2.5rem !important; /* 40px */
  }
  
  .bg-hero .rounded-3xl {
    margin-top: 0.5rem !important; /* Restore small margin on desktop */
  }
  
  /* Reset header bottom padding to default on desktop */
  header {
    padding-bottom: unset !important;
  }
}

/* ===== TABLET STYLES (768px - 1024px) ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    max-width: 720px;
    padding-left: 32px;
    padding-right: 32px;
  }
  
  /* Two-column layout for rate comparisons */
  #rates [data-provider] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: center;
  }
  
  /* Larger touch targets for tablet */
  button,
  .send-now-btn {
    min-height: 48px;
    font-size: 16px;
  }
  
  /* Country picker handled by country-picker.css */
}

/* ===== DESKTOP STYLES (≥ 1024px) ===== */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Hover effects only on desktop */
  button:hover,
  .send-now-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
  }
  
  a:hover {
    opacity: 0.8;
  }
  
  [data-provider]:hover {
    background-color: rgba(0, 0, 0, 0.02);
  }
  
  /* Country picker handled by country-picker.css */
}

/* ===== PULL-TO-REFRESH HINT ===== */
@media (max-width: 767px) {
  .pull-to-refresh {
    position: fixed;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: rgb(16, 185, 129);
    color: white;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    transition: top var(--transition-smooth);
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  .pull-to-refresh.visible {
    top: calc(var(--safe-area-inset-top) + 16px);
  }
  
  .pull-to-refresh svg {
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
}

/* ===== LOADING STATES - APP-LIKE ===== */
.htmx-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
}

.htmx-request .htmx-indicator {
  display: flex !important;
}

/* ===== DARK MODE MOBILE TWEAKS ===== */
@media (max-width: 767px) {
  .dark {
    background: #0f172a; /* Darker for OLED */
  }
  
  .dark #rates {
    background: rgba(30, 41, 59, 0.95);
  }
}

/* ===== ACCESSIBILITY - LARGE TEXT SUPPORT ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== STATUS BAR STYLING ===== */
@media (max-width: 767px) {
  header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgb(255, 255, 255);
  }
  
  .dark header {
    background: rgb(15, 23, 42);
  }
}

/* ===== FIXED MOBILE SPACING ===== */
@media (max-width: 767px) {
  /* Consistent vertical rhythm */
  section {
    margin-bottom: 24px;
  }
  
  h1, h2, h3 {
    margin-bottom: 16px;
  }
  
  p {
    margin-bottom: 12px;
  }
  
  /* App-like bottom spacing */
  main {
    padding-bottom: calc(32px + var(--safe-area-inset-bottom));
  }
}

/* ===== CARD SHADOWS - DEPTH PERCEPTION ===== */
@media (max-width: 767px) {
  #rates,
  .card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),
                0 1px 2px rgba(0, 0, 0, 0.06);
  }
  
  .dark #rates,
  .dark .card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3),
                0 1px 2px rgba(0, 0, 0, 0.2);
  }
}

/* ===== LANDSCAPE MOBILE OPTIMIZATION ===== */
@media (max-width: 767px) and (orientation: landscape) {
  .hero-section {
    padding: 16px var(--mobile-padding) !important;
  }
  
  .hero-section h1 {
    font-size: 1.5rem !important;
  }
}

/* ===== HAPTIC FEEDBACK VISUAL CUE ===== */
@media (max-width: 767px) {
  @keyframes haptic-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(0.98); }
    100% { transform: scale(1); }
  }
  
  .haptic-feedback {
    animation: haptic-pulse 100ms ease-out;
  }
}