body { background:#f8f9fa; font-family:"Quicksand"; }
.detail-image {
width: 100%;
max-height: 520px;
object-fit: cover;
border-radius: 20px;
}
.info-card {
border: 0;
border-radius: 20px;
box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.feature-badge {
display: inline-block;
padding: 8px 12px;
border-radius: 10px;
background: #fff;
border: 1px solid #dee2e6;
margin: 15px 8px 8px 0;
}
.button_animal {
background-color: rgb(35, 168, 165) !important;
border: 1px solid rgb(35, 168, 165) !important;
}
.button_animal:hover {
background-color:rgb(11 153 150) !important;
}
.text-bg-primary {
background-color: rgb(255 151 0) !important;
}

 :root{
      --card-radius: 18px;
    }
    body{
      background: radial-gradient(1200px 600px at 10% 0%, #e7f4ff 0%, transparent 60%),
                  radial-gradient(900px 500px at 90% 10%, #f3e8ff 0%, transparent 55%),
                  #f7f9fb;
    }

    .glass {
      background: rgba(255,255,255,.75);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,.5);
      box-shadow: 0 12px 40px rgba(20, 20, 40, .08);
    }

    .pet-card{
      border: 0;
      border-radius: var(--card-radius);
      overflow: hidden;
      transition: transform .18s ease, box-shadow .18s ease;
      box-shadow: 0 10px 25px rgba(0,0,0,.06);
      height: 100%;
    }
    .pet-card:hover{
      transform: translateY(-6px);
      box-shadow: 0 18px 45px rgba(0,0,0,.12);
    }

    .pet-img{
      aspect-ratio: 4/5;
      object-fit: cover;
      width: 100%;
      filter: saturate(1.05);
      transition: transform .35s ease;
    }
    .pet-card:hover .pet-img{
      transform: scale(1.05);
    }

    .badge-soft{
      background: rgba(13,110,253,.1);
      color: #0d6efd;
      border: 1px solid rgba(13,110,253,.15);
    }
    .badge-soft-2{
      background: rgba(25,135,84,.10);
      color: #198754;
      border: 1px solid rgba(25,135,84,.18);
    }
    .badge-soft-3{
      background: rgba(220,53,69,.08);
      color: #dc3545;
      border: 1px solid rgba(220,53,69,.15);
    }

    /* Like animation */
    .like-btn{
      width: 40px; height: 40px;
      display: grid; place-items: center;
      border-radius: 999px;
      border: 1px solid rgba(0,0,0,.08);
      background: rgba(255,255,255,.8);
      transition: transform .12s ease, background .12s ease;
    }
    .like-btn:active{ transform: scale(.94); }
    .like-btn.liked{
      background: rgba(220,53,69,.10);
      border-color: rgba(220,53,69,.18);
    }
    .pop{
      animation: pop .28s ease;
    }
    @keyframes pop{
      0%{transform: scale(.9)}
      55%{transform: scale(1.12)}
      100%{transform: scale(1)}
    }

    .sticky-topbar{
      position: sticky;
      top: 0;
      z-index: 1020;
    }

    .fade-in{
      animation: fadeIn .22s ease;
    }
    @keyframes fadeIn{
      from{opacity:0; transform: translateY(8px)}
      to{opacity:1; transform: translateY(0)}
    }

    .pagination .page-link{
      border-radius: 12px !important;
      margin: 0 3px;
    }
        .glass {
      background: rgba(255,255,255,.75);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,.5);
      box-shadow: 0 12px 40px rgba(20, 20, 40, .08);
    }

    /* Card motion */
    .pet-card{
      border: 0;
      border-radius: var(--card-radius);
      overflow: hidden;
      transition: transform .18s ease, box-shadow .18s ease;
      box-shadow: 0 10px 25px rgba(0,0,0,.06);
      height: 100%;
    }
    .pet-card:hover{
      transform: translateY(-6px);
      box-shadow: 0 18px 45px rgba(0,0,0,.12);
    }

    .pet-img{
      aspect-ratio: 4/5;
      object-fit: cover;
      width: 100%;
      filter: saturate(1.05);
      transition: transform .35s ease;
    }
    .pet-card:hover .pet-img{
      transform: scale(1.05);
    }

    .badge-soft{
      background: rgba(13,110,253,.1);
      color: #0d6efd;
      border: 1px solid rgba(13,110,253,.15);
    }
    .badge-soft-2{
      background: rgba(25,135,84,.10);
      color: #198754;
      border: 1px solid rgba(25,135,84,.18);
    }
    .badge-soft-3{
      background: rgba(220,53,69,.08);
      color: #dc3545;
      border: 1px solid rgba(220,53,69,.15);
    }

    /* Like animation */
    .like-btn{
      width: 40px; height: 40px;
      display: grid; place-items: center;
      border-radius: 999px;
      border: 1px solid rgba(0,0,0,.08);
      background: rgba(255,255,255,.8);
      transition: transform .12s ease, background .12s ease;
    }
    .like-btn:active{ transform: scale(.94); }
    .like-btn.liked{
      background: rgba(220,53,69,.10);
      border-color: rgba(220,53,69,.18);
    }
    .pop{
      animation: pop .28s ease;
    }
    @keyframes pop{
      0%{transform: scale(.9)}
      55%{transform: scale(1.12)}
      100%{transform: scale(1)}
    }

    .sticky-topbar{
      position: sticky;
      top: 0;
      z-index: 1020;
    }

    .fade-in{
      animation: fadeIn .22s ease;
    }
    @keyframes fadeIn{
      from{opacity:0; transform: translateY(8px)}
      to{opacity:1; transform: translateY(0)}
    }

    .pagination .page-link{
      border-radius: 12px !important;
      margin: 0 3px;
    }