[data-bs-theme=light]{
    --pets-border-color: #999;
    --pets-badge-bg:rgba(var(--bs-secondary-rgb), 0.7);
}
[data-bs-theme=dark]{
    --pets-border-color: #333;
    --pets-badge-bg:rgba(var(--bs-secondary-rgb), 0.7);
}

.pets{ list-style: none; display: flex; flex-direction: column; margin:0; padding:0; }
.pets>li { position:relative; display: flex; gap: 1em; margin-bottom:1em; background:#fff; border:1px solid var(--pets-border-color); border-radius: 1em; overflow:hidden;}
.pets>li>.pic{height: calc(50px + 2rem);aspect-ratio: 1 / 1;overflow: hidden;flex-shrink:0;border-radius: 10%;margin: 1rem 0 0 1rem;}
.pets>li>.pic>img{ width:100%;height:100%; object-fit: cover; }
.pets>li>div>.info { padding:1em 0;color: #333; }
.pets>li>div>.info>span{display:block}
.pets>li>div>.info>.name{font-size:1.2rem;font-weight:700}
.pets>li>div>.btn-group{ position:absolute; bottom: .5em; right: .5em; }
.pets .badges span { font-size: 10px !important; font-weight: 400; background-color: var(--pets-badge-bg) !important; }

.pets>li .dropdown-toggle::after { display: none; }
.pets>li .dropdown-menu {
    --bs-dropdown-bg:#fff;
    --bs-dropdown-color:#000;
    --bs-dropdown-border-color:#dee2e6;
    --bs-dropdown-link-color:#000;
    --bs-dropdown-link-hover-color:#333;
    --bs-dropdown-link-hover-bg:#dee2e6;
    font-size: 0.875rem;
}
.pets>li .dropdown { position: absolute; top: 0; right: 0; }
.pets>li .dropdown button{width:40px;height:40px;color:#333;}

@media (max-width: 768px) {
    .pets>li>div>.info{font-size:12px}
}


/* [data-bs-theme=light]{
    --pet-card-bg:#fff;
    --pet-card-color:#000;
    --pet-card-border-color:#555;
    --pet-card-badge-bg:rgba(var(--bs-secondary-rgb), 0.7);
}
[data-bs-theme=dark]{
    --pet-card-bg:#000;
    --pet-card-color:#fff;
    --pet-card-border-color:#000;
    --pet-card-badge-bg:var(--bs-secondary-rgb);
}
.pet-card { border-radius: 1rem; padding: 1rem; color: var(--pet-card-color); background-color:var(--pet-card-bg); display: flex; flex-direction: column; justify-content: space-between; min-height: 150px; position: relative; text-decoration: none; border:1px solid var(--pet-card-border-color); }
.pet-image { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-bottom: 0.5rem; }
.dropdown-toggle::after { display: none; }
.dropdown-menu { font-size: 0.875rem; }
.card-wrapper { position: relative; }
.card-wrapper .dropdown { position: absolute; top: 0; right: 0; z-index: 1; color: var(--pet-card-color); }
.card-wrapper .dropdown button{width:40px;height:40px}
.pet-card .badges span { font-size: 10px !important; font-weight: 400; background-color: var(--pet-card-badge-bg) !important; } */