/* ===== Reset & Base ===== */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Nunito',system-ui,sans-serif;
  background:#fef6f0;
  color:#4a3728;
  overflow:hidden;
  height:100dvh;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img{display:block;max-width:100%}

/* ===== App Shell ===== */
#app{display:flex;flex-direction:column;height:100dvh;overflow:hidden}

/* ===== Top Bar ===== */
.topbar{
  background:linear-gradient(135deg,#ff9a9e 0%,#fecfef 50%,#ffdde1 100%);
  padding:12px 16px;
  padding-top:max(12px,env(safe-area-inset-top));
  text-align:center;
  flex-shrink:0;
}
.topbar h1{font-size:1.15em;font-weight:800;color:#6b3a5d}
.topbar-sub{font-size:.72em;color:#8b5a6d;font-weight:600}

/* ===== Tab Bar (bottom) ===== */
.tab-bar{
  display:flex;
  background:#fff;
  border-top:2px solid #f5ddd0;
  flex-shrink:0;
  padding-bottom:env(safe-area-inset-bottom);
}
.tab-btn{
  flex:1;
  padding:10px 0 8px;
  text-align:center;
  font-size:.7em;
  font-weight:700;
  color:#b08a7a;
  transition:color .2s;
}
.tab-btn .tab-icon{font-size:1.6em;display:block;margin-bottom:2px}
.tab-btn.active{color:#e94560}

/* ===== Content Area ===== */
.content{flex:1;overflow:hidden;position:relative}
.page{
  position:absolute;inset:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  display:none;
  background:#fef6f0;
}
.page.active{display:block}
.page::-webkit-scrollbar{width:4px}
.page::-webkit-scrollbar-thumb{background:#f5ddd0;border-radius:2px}

/* ===== Filters Bar ===== */
.filters-bar{
  position:sticky;top:0;z-index:5;
  background:#fff;
  border-bottom:2px solid #f5ddd0;
  padding:10px 12px;
  display:flex;gap:6px;flex-wrap:wrap;
}
.filter-pill{
  background:#fff;
  border:2px solid #f5ddd0;
  color:#6b3a5d;
  padding:6px 12px;
  border-radius:20px;
  font-size:.78em;
  font-weight:700;
  font-family:'Nunito',sans-serif;
  transition:all .15s;
  white-space:nowrap;
}
.filter-pill:focus{outline:none;border-color:#ff9a9e;box-shadow:0 0 0 3px rgba(255,154,158,.12)}
.filter-pill.search{flex:1;min-width:100px}

/* ===== Kitten Grid ===== */
.kitten-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(165px,1fr));
  gap:10px;
  padding:12px;
}
.kitten-thumb{
  background:#fff;
  border:2px solid #f5ddd0;
  border-radius:14px;
  overflow:hidden;
  transition:all .15s;
}
.kitten-thumb:active{transform:scale(.97)}
.kt-img{width:100%;aspect-ratio:1;object-fit:cover;background:linear-gradient(135deg,#fef0e7,#fce4ec)}
.kt-noimg{
  width:100%;aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  font-size:2.5em;
  background:linear-gradient(135deg,#fef0e7,#fce4ec);
}
.kt-body{padding:8px 10px 10px}
.kt-name{font-size:.82em;font-weight:800;color:#6b3a5d;line-height:1.2}
.kt-meta{font-size:.7em;color:#b08a7a;font-weight:600;margin-top:2px}
.kt-price{font-size:.78em;font-weight:800;color:#2e7d32;margin-top:3px}
.kt-chips{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.chip{
  display:inline-block;
  padding:2px 7px;
  border-radius:10px;
  font-size:.62em;
  font-weight:700;
}
.chip-sex-m{background:#e3f2fd;color:#1565c0}
.chip-sex-f{background:#fce4ec;color:#c62828}
.chip-breed-dr{background:#f3e5f5;color:#7b1fa2}
.chip-breed-sp{background:#e8eaf6;color:#283593}
.chip-avail{background:#e8f5e9;color:#2e7d32}
.chip-reserved{background:#fff8e1;color:#f57f17}
.chip-color{background:#fef0e7;color:#d4816b;border:1px solid #f5ddd0}

/* ===== Breeder List ===== */
.breeder-list{padding:8px 12px}
.breeder-row{
  display:flex;align-items:center;gap:12px;
  background:#fff;
  border:2px solid #f5ddd0;
  border-radius:14px;
  padding:12px;
  margin-bottom:8px;
  transition:all .15s;
}
.breeder-row:active{transform:scale(.98)}
.br-avatar{
  width:44px;height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,#ff9a9e,#fecfef);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3em;flex-shrink:0;
}
.br-info{flex:1;min-width:0}
.br-name{font-size:.88em;font-weight:800;color:#6b3a5d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-loc{font-size:.72em;color:#b08a7a;font-weight:600}
.br-right{text-align:right;flex-shrink:0}
.br-dist{font-size:.7em;color:#d4816b;font-weight:700}
.br-status{margin-top:2px}
.br-count{font-size:.65em;color:#b08a7a;font-weight:600}
.br-chevron{color:#d4a99a;font-size:1.1em;margin-left:4px}

/* ===== Map View Toggle ===== */
.view-toggle{
  display:flex;
  background:#fff;
  border-bottom:2px solid #f5ddd0;
  position:sticky;top:0;z-index:5;
}
.vt-btn{
  flex:1;padding:9px 0;
  text-align:center;
  font-size:.78em;font-weight:800;
  color:#b08a7a;
  position:relative;
  transition:color .15s;
}
.vt-btn.active{color:#6b3a5d}
.vt-btn.active::after{
  content:'';position:absolute;bottom:-2px;left:20%;width:60%;height:3px;
  background:linear-gradient(90deg,#ff9a9e,#fecfef);border-radius:3px;
}
.map-wrap{width:100%;height:100%;display:none}
.map-wrap.active{display:block}
.breeder-list-wrap{display:none}
.breeder-list-wrap.active{display:block;overflow-y:auto;height:calc(100% - 42px)}
#breeder-map{width:100%;height:calc(100% - 42px)}

/* ===== Detail Pages ===== */
.detail-page{
  position:fixed;inset:0;
  background:#fef6f0;
  z-index:100;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  display:none;
}
.detail-page.open{display:block}

.detail-hero{position:relative}
.detail-hero img{width:100%;max-height:55dvh;object-fit:cover}
.detail-hero-noimg{
  width:100%;height:30dvh;
  display:flex;align-items:center;justify-content:center;
  font-size:5em;
  background:linear-gradient(135deg,#fef0e7,#fce4ec);
}
.detail-back{
  position:absolute;top:max(12px,env(safe-area-inset-top));left:12px;
  width:36px;height:36px;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(8px);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1em;font-weight:800;color:#6b3a5d;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
  z-index:2;
}
.detail-body{padding:16px 16px 40px}
.detail-name{font-size:1.4em;font-weight:800;color:#6b3a5d}
.detail-subtitle{font-size:.85em;color:#d4816b;font-weight:700;margin-top:2px}
.detail-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.detail-chips .chip{font-size:.72em;padding:3px 10px}

.detail-section{margin-top:20px}
.detail-section h3{
  font-size:.72em;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:#d4816b;
  font-weight:800;
  margin-bottom:8px;
}
.detail-section p,.detail-section li{font-size:.85em;color:#5a4a3a;line-height:1.6}
.detail-section ul{list-style:none;padding:0}
.detail-section ul li{padding:4px 0 4px 16px;position:relative}
.detail-section ul li::before{content:">";position:absolute;left:0;color:#ff9a9e;font-weight:800}

.contact-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.contact-btn{
  display:inline-flex;align-items:center;gap:4px;
  background:#fff;border:2px solid #f5ddd0;
  border-radius:20px;padding:8px 14px;
  font-size:.8em;font-weight:700;color:#6b3a5d;
  transition:all .15s;
}
.contact-btn:active{background:#fef0e7;border-color:#ff9a9e}

/* Kitten gallery on breeder detail */
.breeder-kittens-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:8px;margin-top:8px;
}
.bk-thumb{border-radius:12px;overflow:hidden;background:#fff;border:2px solid #f5ddd0}
.bk-thumb img{width:100%;aspect-ratio:1;object-fit:cover}
.bk-thumb-name{font-size:.72em;font-weight:700;color:#6b3a5d;padding:4px 6px;text-align:center}

/* ===== Empty States ===== */
.empty{text-align:center;padding:60px 24px;color:#b08a7a}
.empty .emoji{font-size:3em;margin-bottom:8px}
.empty p{font-weight:600}

/* ===== Count Bar ===== */
.count-bar{
  font-size:.72em;font-weight:700;color:#d4816b;
  padding:8px 14px;background:#fff9f6;
  border-bottom:1px solid #f5ddd0;
  position:sticky;top:0;z-index:4;
}
.filters-bar+.count-bar{position:sticky;top:0}

/* ===== Leaflet Popup ===== */
.leaflet-popup-content-wrapper{
  background:#fff;color:#4a3728;border-radius:14px;
  border:2px solid #f5ddd0;font-family:'Nunito',sans-serif;
}
.leaflet-popup-tip{background:#fff}
.leaflet-popup-content{margin:10px 14px;font-size:.85em}
.leaflet-popup-content b{color:#6b3a5d}
.paw-icon{font-size:22px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.15))}

/* ===== Desktop widening ===== */
@media(min-width:600px){
  .kitten-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;padding:16px}
  .detail-body{max-width:600px;margin:0 auto}
  .breeder-list{max-width:600px;margin:0 auto}
}
@media(min-width:900px){
  .kitten-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));padding:20px}
}