/* Afghan Eats restaurant discovery mobile hardening — 2026-09-06
   Keeps the restaurants listing inside the phone viewport and removes desktop spacing on small screens. */

body.restaurants-page{
  width:100%;
  max-width:100vw;
  overflow-x:hidden;
}
.restaurants-page .header,
.restaurants-page main.section,
.restaurants-page .mobile-nav{
  width:100%;
  max-width:100vw;
}
.restaurants-page .container{
  width:min(1280px,calc(100% - 32px))!important;
  max-width:100%!important;
  margin-inline:auto!important;
  min-width:0!important;
}
.restaurants-page main.section>.container,
.restaurants-page .restaurant-page-head,
.restaurants-page .restaurant-discovery-bar,
.restaurants-page .restaurant-service-row,
.restaurants-page .restaurant-filter-row,
.restaurants-page .restaurant-result-summary,
.restaurants-page .restaurant-grid,
.restaurants-page .browse-restaurant-card,
.restaurants-page .restaurant-card{
  min-width:0!important;
  max-width:100%!important;
}

@media(max-width:760px){
  body.restaurants-page{padding-bottom:64px!important}

  /* Compact one-row mobile header. Account stays available in the bottom navigation. */
  .restaurants-page .header{overflow:visible}
  .restaurants-page .nav{
    width:100%;
    min-height:64px;
    height:auto!important;
    display:flex!important;
    align-items:center;
    gap:6px!important;
    padding:7px 0;
    flex-wrap:nowrap;
  }
  .restaurants-page .brand-home{
    flex:0 1 auto;
    min-width:0;
    gap:7px!important;
  }
  .restaurants-page .brand-emblem{
    width:34px!important;
    height:34px!important;
    flex:0 0 34px!important;
  }
  .restaurants-page .brand-wordmark{
    font-size:1rem!important;
    line-height:1!important;
    white-space:nowrap;
  }
  .restaurants-page .navlinks{display:none!important}
  .restaurants-page .actions{
    display:flex!important;
    align-items:center;
    justify-content:flex-end;
    gap:5px!important;
    margin-inline-start:auto;
    min-width:0;
    flex:0 1 auto;
  }
  .restaurants-page .actions .btn-light[href="/account"]{display:none!important}
  .restaurants-page .ae-city-select{
    width:auto!important;
    max-width:86px!important;
    min-width:68px!important;
    height:42px!important;
    padding:0 8px!important;
    font-size:.78rem!important;
  }
  .restaurants-page .lang{
    min-width:64px!important;
    height:42px!important;
    padding:0 9px!important;
    font-size:.8rem!important;
  }
  .restaurants-page .actions .btn-primary{
    width:46px!important;
    min-width:46px!important;
    height:42px!important;
    padding:0 8px!important;
    border-radius:12px!important;
  }

  /* Main content uses the whole viewport instead of inheriting desktop offsets. */
  .restaurants-page main.section{
    padding:24px 0 40px!important;
    overflow:hidden;
  }
  .restaurants-page main.section>.container{
    display:block!important;
    width:calc(100% - 24px)!important;
    margin:0 12px!important;
  }
  .restaurants-page.rtl main.section>.container{
    margin:0 12px!important;
  }
  .restaurants-page .restaurant-page-head{
    width:100%!important;
    margin:0 0 18px!important;
    padding:0!important;
  }
  .restaurants-page .restaurant-page-kicker{
    margin-bottom:5px!important;
    font-size:.7rem!important;
  }
  .restaurants-page .restaurant-page-head h1{
    max-width:none!important;
    margin:0!important;
    font-size:clamp(2rem,10vw,2.55rem)!important;
    line-height:1.12!important;
    overflow-wrap:anywhere;
  }
  .restaurants-page .restaurant-page-head p{
    max-width:none!important;
    margin:8px 0 0!important;
    font-size:.9rem!important;
    line-height:1.55!important;
  }

  /* Discovery controls become a clean vertical mobile card. */
  .restaurants-page .restaurant-discovery-bar{
    width:100%!important;
    margin:0 0 16px!important;
    padding:10px!important;
    border-radius:18px!important;
    overflow:hidden;
  }
  .restaurants-page .restaurant-service-row{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    padding:0 0 10px!important;
  }
  .restaurants-page .restaurant-service-row .mode-tabs{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    margin:0!important;
  }
  .restaurants-page .restaurant-service-row .mode-tabs button{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
  }
  .restaurants-page .address-summary{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:2px 2px 0!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    line-height:1.5!important;
    font-size:.82rem!important;
  }
  .restaurants-page .restaurant-filter-row{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:8px!important;
    margin:10px 0 0!important;
    padding:0!important;
    overflow:visible!important;
  }
  .restaurants-page .restaurant-search-wrap{
    grid-column:1/-1!important;
    width:100%!important;
    min-width:0!important;
    height:48px!important;
  }
  .restaurants-page .restaurant-search-wrap input[type="search"]{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  .restaurants-page .restaurant-filter-row select,
  .restaurants-page .restaurant-filter-row .chip{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:44px!important;
    margin:0!important;
    padding-inline:10px!important;
  }
  .restaurants-page .restaurant-filter-row .chip[data-filter="favorites"]{
    display:inline-flex!important;
    grid-column:1/-1!important;
  }

  .restaurants-page .restaurant-result-summary{
    width:100%!important;
    margin:0 0 14px!important;
    padding:0 2px!important;
  }

  /* Restaurant cards are true one-column cards on phones. */
  .restaurants-page .restaurant-grid{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:16px!important;
    margin:0!important;
  }
  .restaurants-page .browse-restaurant-card,
  .restaurants-page .restaurant-card{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    border-radius:20px!important;
    overflow:hidden!important;
  }
  .restaurants-page .browse-restaurant-card .restaurant-image,
  .restaurants-page .restaurant-card .restaurant-image{
    width:100%!important;
    height:clamp(185px,54vw,225px)!important;
  }
  .restaurants-page .restaurant-image img{
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
  .restaurants-page .browse-restaurant-card .restaurant-body,
  .restaurants-page .restaurant-card .restaurant-body{
    width:100%!important;
    min-width:0!important;
    padding:15px 16px 17px!important;
  }
  .restaurants-page .title-row{
    min-width:0!important;
    align-items:flex-start!important;
  }
  .restaurants-page .title-row h3,
  .restaurants-page .tagline,
  .restaurants-page .browse-card-meta{
    min-width:0!important;
    overflow-wrap:anywhere;
  }

  /* Fixed bottom navigation must span the actual viewport, independent of RTL. */
  .restaurants-page .mobile-nav{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    position:fixed!important;
    left:0!important;
    right:0!important;
    inset-inline:0!important;
    bottom:0!important;
    width:100vw!important;
    max-width:100vw!important;
    margin:0!important;
    z-index:100!important;
    direction:ltr;
  }
  .restaurants-page .mobile-nav a{
    min-width:0!important;
    min-height:58px!important;
    padding:7px 2px!important;
  }
  .restaurants-page .mobile-nav b{
    display:block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

@media(max-width:390px){
  .restaurants-page .container{width:calc(100% - 20px)!important}
  .restaurants-page main.section>.container{width:calc(100% - 20px)!important;margin:0 10px!important}
  .restaurants-page .brand-wordmark{font-size:.92rem!important}
  .restaurants-page .brand-emblem{width:32px!important;height:32px!important;flex-basis:32px!important}
  .restaurants-page .ae-city-select{max-width:78px!important;min-width:62px!important;padding-inline:6px!important}
  .restaurants-page .lang{min-width:58px!important;padding-inline:7px!important}
  .restaurants-page .actions .btn-primary{width:42px!important;min-width:42px!important}
  .restaurants-page .restaurant-page-head h1{font-size:2rem!important}
}