/* ==========================
   LAYOUT / STRUCTURE (MOBILE-FIRST)
   ========================== */

/* Full-page skeleton */
.gg-wrapper{
  width:100%;
  min-height:100vh;
  background:var(--bg,#0a0a0a);
  overflow-x:hidden;
}

/* Centered app frame */
.gg-content{
  width:100%;
  max-width:480px;
  margin:0 auto;
  padding:0 12px;
  box-sizing:border-box;
  background:var(--bg,#0a0a0a);
}

/* Sticky header */
.gg-header{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--toolbar,#0e0e0e);
  border-bottom:1px solid var(--line,#1f1f1f);
}

.gg-header > *{
  max-width:480px;
  margin:0 auto;
  padding:12px 12px 8px;
  box-sizing:border-box;
}

/* Main content container */
.gg-container{
  width:100%;
  padding:12px 0;
  box-sizing:border-box;
}

/* ==========================
   NAV + CHIP BARS
   ========================== */

.gg-nav,
.gg-chipbar{
  width:100%;
  max-width:480px;
  margin:0 auto;
  padding:8px 12px;
  box-sizing:border-box;
  overflow-x:clip;
  border:0;
}

.gg-nav__inner,
.gg-chipbar .gg-chips,
.gg-chipbar .gg-chips.rail{
  display:flex;
  flex-wrap:wrap !important;
  gap:8px;
  align-items:center;
  max-width:100%;
  overflow:visible !important;
}

/* ==========================
   AREA SELECT — FULL WIDTH
   ========================== */

.gg-select{
  background-color:#2cd38d !important;
  color:#0a0a0a !important;
  border:1px solid #2cd38d !important;
  border-radius:9999px !important;
  font-weight:600;
  appearance:none;
  padding:.6rem 1rem;
  box-sizing:border-box;
}

/* Whatever lives inside .gg-area fills the 480px frame */
.gg-area > *{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:100% !important;
  margin:4px auto 0 !important;
  box-sizing:border-box !important;
}

/* ==========================
   CARD GRID
   ========================== */

.gg-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  width:100%;
  max-width:480px;
  margin:0 auto;
  justify-items:center;
  box-sizing:border-box;
}

.gg-grid > .card,
.gg-grid > .pro-card,
.gg-grid > .promo-card{
  width:100%;
  max-width:480px;
}

/* ==========================
   FOOTER
   ========================== */

.gg-footer{
  width:100%;
  background:transparent;
}

.gg-footer > *{
  max-width:480px;
  margin:0 auto;
  padding:12px;
  box-sizing:border-box;
}

/* ==========================
   UTILITIES
   ========================== */

.rail::-webkit-scrollbar{
  display:none;
}

.rail{
  scrollbar-width:none;
}

.hide{
  display:none !important;
}

/* ==========================
   RESULT BAR
   ========================== */

.gg-resultcount{
  margin:6px 0 10px;
  text-align:center;
  font-size:.95rem;
  color:var(--muted,#b7b7b7);
}

.gg-resultcount b{
  color:var(--brand,#2cd38d);
}

/* Sticky bar that holds the result count + CTA */
.resultbar{
  position:sticky;
  top:64px;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  background:var(--toolbar,#0e0e0e);
  border:1px solid var(--line,#1f1f1f);
  border-radius:16px;
  margin:10px 0 14px;
  flex-wrap:wrap;
}

/* GET LISTED button */
.resultbar-cta{
  background:var(--brand,#2cd38d) !important;
  border:1px solid var(--brand,#2cd38d) !important;
  color:#0a0a0a !important;
  font-weight:700;
  font-size:.9rem;
  padding:.55rem 1.1rem;
  border-radius:9999px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  box-shadow:none !important;
  animation:listingBreath 2.6s ease-in-out infinite;
  transform-origin:center;
}

@keyframes listingBreath{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.06);}
}

@media (max-width:480px){

  .resultbar{
    padding:12px;
    gap:10px;
  }

  .resultbar-cta{
    width:100%;
    justify-content:center;
  }

}

/* ==========================
   CARD LANE
   ========================== */

.gg-results{
  width:100%;
  max-width:480px;
  margin:0 auto;
  padding:0 12px 16px;
  box-sizing:border-box;
}

.gg-results .gg-card,
.gg-results .gg-card--pro,
.gg-results .gg-card--promo,
.gg-results .card,
.gg-results .pro-card,
.gg-results .promo-card{
  width:100%;
  max-width:100%;
  margin:0 0 16px;
  overflow:hidden;
}

.gg-results .gg-card *,
.gg-results .gg-card--pro *,
.gg-results .gg-card--promo *,
.gg-results .card *,
.gg-results .pro-card *,
.gg-results .promo-card *{
  max-width:100%;
  box-sizing:border-box;
}

/* =========================================
   SEARCH BOX
   ========================================= */

.gg-search{
  width:100%;
  max-width:480px;
  margin:10px auto 6px;
  padding:0 12px;
  box-sizing:border-box;
}

.gg-search input[type="search"]{
  width:100% !important;
  max-width:100% !important;
  padding:10px 16px;
  border-radius:9999px;
  border:1px solid var(--line,#1f1f1f);
  background:var(--card,#121212);
  color:var(--ink,#ffffff);
  font-size:1rem;
  box-sizing:border-box;
  appearance:none;
  -webkit-appearance:none;
  box-shadow:0 0 8px rgba(0,0,0,.25);
}

.gg-search input[type="search"]::placeholder{
  color:var(--muted,#888);
}

.gg-search input[type="search"]:focus{
  border:1px solid var(--brand,#2cd38d) !important;
  box-shadow:0 0 10px rgba(44,211,141,.45) !important;
  outline:none !important;
}

input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance:none !important;
  appearance:none !important;
  display:none !important;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration{
  display:none !important;
  -webkit-appearance:none !important;
}

input[type="search"]{
  -moz-appearance:textfield !important;
}

.gg-search .gg-search-clear,
#searchClear,
.gg-search button,
.gg-search input[type="button"],
.gg-search input[type="reset"]{
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
}