/* ===== Scopes and common variables ===== */

#module-profileadv-petlist,
#module-profileadv-addpet {
    --c-bg: #ffffff;
    --c-accent: #00B4DD;
    --c-accent-soft: #E7F5F7;
    --c-warn: #f88812;
    --c-success-bg: #dff0d8;
    --c-success-bd: #d0e9c6;
    --c-success-fg: #3c763d;
    --c-danger-bg: #f8d7da;
    --c-danger-bd: #f5c6cb;
    --c-danger-fg: #721c24;
    --c-info-fg: #00B4DD;
    --radius-lg: 31px;
    --radius-md: 27px;
    --transition: 1s;
}

#petlist .pet-item {
    position: relative;
    z-index: 1;
}

#petlist .pet-item.is-open {
    z-index: 8;
}

.collap {
    background: none;
    padding: 3px;
    display:none
}
#petlist .pet-item .pet-collapse {
    /*position: absolute;*/
    left: 0;
    right: 0;
    top: 100%;
    z-index: 2;
    margin: 0 !important;
    /*border: 1px solid var(--c-info-fg);*/
}

#petlist .image-flip,
#petlist .mainflip,
#petlist .frontside {
    overflow: visible !important;
}

#module-profileadv-editpet #submit-button {
    clear: both;
}


/* ===== Generic cards ===== */

#module-profileadv-petlist #team .card,
#module-profileadv-addpet #team .card {
    border: none;
    background: var(--c-bg);
}


/* ===== Flip container (3D effect) ===== */

#module-profileadv-petlist .mainflip,
#module-profileadv-addpet .mainflip {
    position: relative;
    transform-style: preserve-3d;
    transition: transform var(--transition);
}


/* ===== Front side (visible face) ===== */

#module-profileadv-petlist .frontside,
#module-profileadv-addpet .frontside {
    position: relative;
    transform: rotateY(0);
    z-index: 2;
    margin-bottom: 30px;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: transform var(--transition);
}


/* ===== Card appearance on the front side ===== */

#module-profileadv-petlist .frontside .card,
#module-profileadv-addpet .frontside .card {
    min-height: 375px;
    background: var(--c-bg) 0 0 / auto no-repeat padding-box;
    border: 1px solid var(--c-accent);
    border-radius: var(--radius-lg);
    opacity: 1;
}

#module-profileadv-petlist .frontside.new-pet-card .card {
    background: var(--c-bg) 0 0 / auto no-repeat padding-box;
    border: 2px solid var(--c-warn);
}


/* ===== Front card title ===== */

#module-profileadv-petlist .frontside .card .card-title,
#module-profileadv-addpet .frontside .card .card-title {
    color: inherit;
}


/* ===== Pet image (list, add, and edit) ===== */

#module-profileadv-petlist .frontside .card .card-body img,
#module-profileadv-addpet .frontside .card .card-body img,
#module-profileadv-editpet .b-body img {
    inline-size: 200px;
    block-size: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px dashed var(--c-accent);
}

#module-profileadv-petlist .frontside.new-pet-card .card .card-body img {
    border: 1px solid var(--c-bg);
}


/* ===== "Add new pet" label ===== */

#module-profileadv-petlist .frontside.new-pet-card .add-new-pet-label {
    text-align: center;
    font-weight: 900;
    font-size: 20px;
    line-height: 21px;
    letter-spacing: -0.5px;
    color: var(--c-warn);
    margin-top: 0;
    padding: 0 25%;
}


/* ===== Alert boxes ===== */

#module-profileadv-petlist .alert,
#module-profileadv-addpet .alert {
    padding: .75rem 1.25rem;
    margin: 1rem;
    background: var(--c-bg);
    border: 1px solid var(--c-accent);
    border-radius: var(--radius-md);
    color: var(--c-info-fg);
}

#module-profileadv-petlist .alert-success {
    background-color: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-bg);
}

#module-profileadv-addpet .alert-success {
    background-color: var(--c-success-bg);
    border-color: var(--c-success-bd);
    color: var(--c-success-fg);
}

#module-profileadv-petlist .alert-danger,
#module-profileadv-addpet .alert-danger {
    color: var(--c-danger-fg);
    background-color: var(--c-danger-bg);
    border-color: var(--c-danger-bd);
}


/* ===== Pet action links ===== */

#module-profileadv-petlist .pet-actions a,
#module-profileadv-addpet .pet-actions a {
    color: inherit;
}

#module-profileadv-petlist .pet-actions {
    margin: 5%;
}

#module-profileadv-petlist .pet-actions .row .col-4 {
    margin: 0 10px;
    text-align: left;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.32px;
    color: #000;
    opacity: 1;
}


/* ===== Custom bullet list ===== */

#module-profileadv-petlist .list-bullets {
    list-style: none;
    padding-left: 5%;
}

#module-profileadv-petlist .list-bullets li {
    display: flex;
    align-items: center;
    text-align: left;
}

#module-profileadv-petlist .list-bullets li::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #5784d7;
    border: 2px solid #8fb3f5;
    display: block;
    margin-right: 1rem;
}


/* ===== Misc styles ===== */

#module-profileadv-petlist .collapse {
    background: #fff;
}

#module-profileadv-petlist .recomm_amount,
#module-profileadv-addpet .recomm_amount {
    background: #28a745;
    color: #fff;
    font-weight: 500;
}

#module-profileadv-addpet .annotations {
    padding: 1%;
    border-bottom: 1px solid #e3e3e3;
}

#module-profileadv-petlist .pet-item {
    z-index: 1;
}


/* ===== Popover message (heartbeat animation) ===== */

#module-profileadv-petlist .popover-message {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    color: #212529;
    background-color: #ffc107;
    border: 1px solid #ffc107;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    animation: beat .5s infinite alternate;
    transform-origin: center;
}


/* ===== List group (pet details) ===== */

#module-profileadv-petlist ul.list-group.list-group-flush,
#module-profileadv-addpet ul.list-group.list-group-flush {
    text-align: left;
    list-style: none;
    padding: 0 5%;
}

#module-profileadv-petlist ul.list-group.list-group-flush li.list-group-item,
#module-profileadv-addpet ul.list-group.list-group-flush li.list-group-item {
    display: block;
    padding: 0 .5rem;
    margin-bottom: -1px;
    background-color: #fff;
    border-color: var(--c-accent);
}

#module-profileadv-petlist ul.list-group.list-group-flush li.list-group-item:first-child {
    border-top: 1px solid #fff;
}

#module-profileadv-petlist ul.list-group.list-group-flush li.list-group-item:last-child {
    border-bottom: 1px solid #fff;
}

#module-profileadv-petlist ul.list-group.list-group-flush li .list-label {
    text-align: left;
    font-weight: 700;
    font-size: 16px;
    line-height: 35px;
    letter-spacing: -0.32px;
    color: #000;
}

#module-profileadv-petlist ul.list-group.list-group-flush li .list-value {
    text-align: left;
    font-size: 16px;
    line-height: 35px;
    letter-spacing: -0.32px;
    color: #000;
}


/* ===== Heartbeat animation ===== */

@keyframes beat {
    to {
        transform: scale(1.2);
    }
}


/* ===== Accessibility: reduce motion ===== */

@media (prefers-reduced-motion: reduce) {
    #module-profileadv-petlist .mainflip,
    #module-profileadv-addpet .mainflip,
    #module-profileadv-petlist .frontside,
    #module-profileadv-addpet .frontside {
        transition: none;
    }
    #module-profileadv-petlist .popover-message {
        animation: none;
        transition: none;
    }
}