/* ==== Reset & base ==== */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --gold:#b8860b;
  --gold-dark:#a37408;
  --sidebar:#111;
  --sidebar-2:#181818;
  --sidebar-3:#222;
  --white:#fff;
  --text:#111;
  --muted:#666;
  --card:#111;
  --border:#2a2a2a;
  --accent:#c9a227;
}
html,body{height:100%}
body{font-family:Arial,Helvetica,sans-serif;background:#fff;color:var(--text);}

/* ==== Layout ==== */
.container{display:flex;min-height:100vh}

/* ==== Sidebar ==== */
.sidebar{
  width:260px;background:var(--sidebar);color:#fff;padding:1rem;border-right:3px solid var(--accent);
  display:flex;flex-direction:column;gap:1rem;
}
.logo{color:var(--accent);text-align:center;font-size:1.5rem;font-weight:800}
.nav{list-style:none;display:flex;flex-direction:column;gap:.5rem}

/* Sidebar lines */
.line{
  width:100%;background:var(--sidebar-3);color:#fff;border:1px solid #1a1a1a;
  padding:.5rem .6rem;border-radius:8px;text-align:left;cursor:pointer;display:flex;align-items:center;gap:.5rem;
  font-weight:700;font-size:.95rem;transition:background .2s ease,color .2s ease;
}
.line:hover{background:#2b2b2b;}
.line.open{background:#333;}
.arrow{display:inline-block;transition:transform .22s ease;color:var(--accent);}
.pill{margin-left:auto;background:#222;border:1px solid #333;color:#ddd;padding:.1rem .45rem;border-radius:999px;
  font-size:.78rem;font-weight:800;min-width:28px;text-align:center;}
.label{flex:1;text-align:left;}
.nested{display:none;padding-left:.6rem;}
.nested.show{display:block;animation:fadeIn .25s ease;}
@keyframes fadeIn {from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
.line.country{background:var(--sidebar-2);}
.line.city{background:#151515;font-weight:700;}
.line.country.open{background:#242424;}
.line.city.open{background:#1b1b1b;}
.line .label{font-size:.92rem;}
.line.city .label{font-size:.9rem;}
.add-btn{background:var(--accent);color:#111;font-weight:800;border:none;padding:.7rem;border-radius:8px;cursor:pointer;
  text-decoration:none;display:block;text-align:center;}
.add-btn:hover{filter:brightness(.95);}
.support-link{color:#ddd;text-decoration:none;text-align:center;}
.support-link:hover{color:var(--accent);}

/* ==== Main ==== */
.main{flex:1;padding:2rem 2rem 3rem;background:#fff;}
.title{color:var(--gold);font-size:2rem;margin-bottom:.25rem;}
.subtitle{color:#333;margin-bottom:1rem;}
.searchbar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.75rem;}
.searchbar input{flex:1;min-width:240px;padding:.55rem .7rem;border:1.6px solid var(--gold);border-radius:8px;font-size:.95rem;}
.btn{background:var(--gold);color:#fff;border:none;padding:.55rem .9rem;border-radius:8px;cursor:pointer;font-weight:800;}
.btn:hover{background:var(--gold-dark);}
.btn.outline{background:#fff;color:var(--gold);border:1.6px solid var(--gold);}
.result-heading{font-weight:800;color:#333;margin:.25rem 0 1rem;}
#showAllBtn{margin-bottom:1rem;}

/* ==== Cards grid ==== */
.store-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem;
  align-items:start;
}
.store-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  color:#eee;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.store-card:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 14px rgba(0,0,0,.25),0 0 0 2px rgba(184,134,11,0.3);
}
.store-img{width:100%;height:160px;object-fit:cover;background:#000;}
.badge-row{display:flex;gap:.4rem;margin-bottom:.4rem;flex-wrap:wrap;}
.type-badge-inline{
  font-weight:800;
  font-size:.75rem;
  border-radius:6px;
  padding:.25rem .6rem;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#fff;
}
.card-body{display:flex;flex-direction:column;gap:.4rem;padding:.9rem;flex-grow:1;justify-content:flex-start;}
.title-wrap{min-height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card-title{font-size:1rem;color:#fff;line-height:1.3;}
.rating-stars{color:var(--accent);font-size:1.05rem;}
.card-info{font-size:.9rem;color:#ccc;line-height:1.3;word-break:break-word;}
.card-info:last-child{margin-bottom:.4rem;}