/* ========== RESPONSIVE - Mobile Optimized ========== */

/* Mobile Performance Optimizations */
@media(max-width:768px){
  /* Hardware acceleration & performance */
  .card, .plan-panel, .toast, .chip{
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* Reduce backdrop filter intensity for better mobile performance */
  .search-box, .panel, .plan-panel, .summary-panel{
    backdrop-filter: blur(8px) saturate(1.1);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
  }

  .toast{
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
  }

  /* Add momentum scrolling for iOS */
  .panel, .plan-panel, .summary-panel, body{
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
  }

  /* Contain paint for better rendering */
  .card{
    contain: layout style paint;
  }

  .stamp{ display:none; }

  .hero{ padding:36px 20px 32px; }

  .search-wrap{ max-width:100%; }

  .results-grid{
    grid-template-columns:1fr;
    gap:14px;
    /* Use content-visibility for better scrolling performance */
    content-visibility: auto;
  }

  main{ padding:20px 16px 70px; }

  .filterbar{ padding:14px 16px; }

  .plan-fab{
    right:16px; bottom:16px;
    padding:14px 20px;
    font-size:14px;
  }

  /* Bottom sheet style for panels on mobile */
  .panel{
    width:100% !important;
    top:auto !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    height:90vh !important;
    border-radius:24px 24px 0 0 !important;
    border-left:none !important;
    transform:translateY(100%) !important;
    box-shadow:0 -8px 32px rgba(0,0,0,0.3) !important;
    will-change: transform;
  }

  .panel.show{
    transform:translateY(0) !important;
  }

  /* Swipe handle indicator */
  .panel::before{
    content:''; position:sticky; top:10px; display:block; margin:0 auto -4px;
    width:40px; height:5px; border-radius:999px;
    background:rgba(255,255,255,0.6); z-index:11;
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
  }

  .panel-head{ padding:24px 20px; }

  .panel-body{ padding:20px 20px 40px; }

  .plan-panel{
    width:100%; top:auto; height:90vh;
    border-radius:24px 24px 0 0;
    transform:translateY(100%);
    box-shadow:0 -8px 32px rgba(0,0,0,0.3);
    will-change: transform;
  }

  .plan-panel.show{
    transform:translateY(0);
  }

  .plan-panel::before{
    content:''; position:sticky; top:10px; display:block; margin:0 auto -4px;
    width:40px; height:5px; border-radius:999px;
    background:rgba(255,255,255,0.6); z-index:11;
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
  }

  .plan-panel-head{ padding:20px; }

  .plan-panel-body{ padding:16px 16px 100px; }

  /* Adjust button sizes for mobile - add touch feedback */
  .btn-primary, .btn-secondary{
    padding:14px 18px;
    font-size:14px;
    min-height:48px; /* Better touch target */
  }

  .chip{
    padding:9px 16px;
    font-size:13.5px;
    min-height:44px; /* Better touch target */
  }

  .card{
    padding:16px 18px;
    /* Faster animation on mobile */
    animation-duration: 0.3s;
  }

  /* Add active/touch states for better feedback */
  .card:active{
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  .btn-primary:active, .btn-secondary:active, .chip:active{
    transform: scale(0.96);
    transition: transform 0.1s ease;
  }

  /* Optimize overlay transitions */
  .overlay{
    transition: opacity 0.2s ease;
  }

  /* Lazy load cards */
  .lazy-card{
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .lazy-card.visible{
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tablet breakpoint */
@media(min-width:641px) and (max-width:920px){
  .hero{ padding:42px 24px 36px; }

  .results-grid{ gap:14px; }

  main{ padding:24px 20px 70px; }
}