/* tokens */
:root{--bg:#f7f7f8;--paper:#fff;--ink:#0f172a;--muted:#6b7280;--border:#e5e7eb;--brand:#0ea5e9;--brand-2:#f59e0b;--chip:#f1f5f9;--radius:12px}
html,body{height:100%}
body{background:#fff;color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif}
p{margin:0 0 .5rem}

/* hero / search */
.hero{max-width:1060px;margin:12px auto;padding:14px;border-radius:var(--radius);background:linear-gradient(180deg,#fff,#f8fafc);border:1px solid var(--border)}
.main-text{font:800 20px/1.25 inherit;margin:12px 0;color:var(--ink)}
.subheadline{color:var(--muted);font-size:14px;margin:0 0 10px}
#id-searchbar{display:flex;gap:8px;align-items:center;width:100%}
#id-searchbar input{flex:1;border:1px solid var(--border)!important;background:#f1f5f9!important;padding:10px 12px;border-radius:10px;font-size:15px;line-height:1.4;min-width:0}
#id-searchbar button{flex-shrink:0;padding:10px 14px;background:var(--brand);border:0;border-radius:10px;cursor:pointer;transition:transform .08s,background .15s}
#id-searchbar button:active{transform:translateY(1px)}
#id-searchbar .search-btn{width:18px;height:18px;filter:invert(1)}

/* carousel */
.carousel{position:relative;max-width:1060px;margin:14px auto;height:44vh;min-height:240px;overflow:hidden;border-radius:var(--radius)}
.carousel-inner{display:flex;height:100%;transition:transform .5s;scroll-snap-type:x mandatory}
.carousel-item{position:relative;min-width:100%;height:100%;flex:0 0 100%;overflow:hidden;scroll-snap-align:start}
.carousel-item img{width:100%;height:100%;object-fit:cover}
.banner-name{position:absolute;bottom:10px;right:10px;color:#fff;padding:6px 10px;font:600 14px/1.1 inherit;border-radius:8px;background:rgba(15,23,42,.6)}
.carousel-control-prev,.carousel-control-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(15,23,42,.25);color:#fff;border:0;padding:6px 10px;cursor:pointer;z-index:1;border-radius:999px}
.carousel-control-prev:hover,.carousel-control-next:hover{background:rgba(15,23,42,.35)}
.carousel-control-prev{left:10px}.carousel-control-next{right:10px}

/* horizontal lists: featured / reviews / blogs */
.homelists,.homereviews{padding:16px 5%}
.lists-container,.list-container{position:relative;display:flex;gap:10px;overflow-x:auto;padding:4px 2px;scroll-snap-type:x mandatory;scrollbar-width:none}
.lists-container::-webkit-scrollbar,.list-container::-webkit-scrollbar{display:none}
.list-item{display:flex;flex-direction:column;gap:6px;cursor:pointer;padding:8px;border-radius:12px;border:1px solid var(--border);background:#fff;width:220px;scroll-snap-align:start;transition:transform .08s,box-shadow .15s}
.list-item:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(2,6,23,.08)}
/* wider images: 5:4 aspect */
.list-image{width:100%;aspect-ratio:5/4;border-radius:10px;object-fit:cover}
/* info */
.list-info{display:flex;flex-direction:column;text-align:left;width:100%}
.list-name{font:700 14px/1.2 inherit;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.list-description,.review-description{font:12px/1.35 inherit;color:var(--muted);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.score-chip{color:var(--brand);font-weight:700}
/* clamp to ~1 line where supported */
@supports(-webkit-line-clamp:1){
  .list-name{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .list-description,.review-description{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
}

/* cuisines grid */
.index-categories2{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0 auto 18px;padding:12px 5%;max-width:1060px}
.cuisine-box{position:relative;width:calc(33.33% - 10px);background-size:cover;background-position:center;color:#fff;display:flex;align-items:center;justify-content:center;height:16vh;min-height:140px;border-radius:14px;overflow:hidden}
.cuisine-box a{color:#fff;text-decoration:none;display:block;width:100%;height:100%}
.cuisine-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(2,6,23,.55),rgba(2,6,23,.05))}
.cuisine-text{position:relative;z-index:1;font:800 16px/1.1 inherit;letter-spacing:.2px}
.more-cuisines{width:100%;text-align:center}
.more-btn{background:#fff;color:#000;cursor:pointer;transition:background-color .15s;font-size:16px;text-decoration:none;padding:10px 20px;border-radius:10px;border:1px solid var(--border)}
.more-btn:hover{background:#f8fafc}

/* ads */
.horizontal-google-ads{display:flex;justify-content:center;margin:16px 0}

/* about/body copy */
.index-body{width:90%;max-width:1060px;margin:24px auto;padding:16px;border:1px solid var(--border);border-radius:12px;background:#fff}
.index-body h3{font-weight:700;margin:0 0 6px}

/* modal */
.modal{display:none;position:fixed;z-index:1000;inset:0;background:rgba(2,6,23,.8);overflow:auto}
.modal-content{background:#fff;padding:20px;width:100%;height:100%;margin-top:5px;box-sizing:border-box;border-top-left-radius:16px;border-top-right-radius:16px}
.close{color:#64748b;font-size:26px;font-weight:700;background:none;border:0;float:right;cursor:pointer}
.close:hover{color:#0f172a}

/* filters/search page controls */
.search-input-bar{width:100%;background:#f8fafc;border:1px solid var(--border);border-radius:10px;padding:10px;margin-bottom:10px;font-size:16px;box-sizing:border-box}
.filter-section,.sort-section{margin-bottom:15px}
.button-group{display:flex;flex-wrap:wrap;gap:8px}
.filter-button,.sort-button{background:var(--chip);border:1px solid var(--border);border-radius:999px;padding:6px 12px;cursor:pointer;font-size:13px;color:#0f172a}
.filter-button.selected,.sort-button.selected{background:var(--brand);color:#fff;border-color:transparent}
.filter-button:hover,.sort-button:hover{background:var(--brand-2);color:#fff;border-color:transparent}
.search-page-btn{display:flex;gap:10px;justify-content:space-between}
.submit-button{background:var(--brand);color:#fff;border:0;padding:8px 14px;border-radius:10px;cursor:pointer;font-size:16px;height:35px}
.clear-button{background:#0ea5e914;color:#0369a1;border:0;padding:8px 14px;border-radius:10px;cursor:pointer;font-size:16px;height:35px}

/* responsive */
@media(max-width:720px){
  .hero{margin:10px;padding:12px}
  .main-text{font-size:18px}
  #id-searchbar input{padding:9px 10px;font-size:14px}
  #id-searchbar button{padding:9px 12px}
  .carousel{height:34vh;min-height:180px}
  .list-item{width:170px}
  .cuisine-box{width:calc(50% - 10px);height:15vh;min-height:120px}
}