@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;600&display=swap');

.pet-uploader-wrap{max-width:420px;}

.pet-select-btn{
    font-family:'Red Hat Display';
    font-size:14px;
    background:#2ecc71;
    color:#fff;
    padding:10px 16px;
    border:none;
    border-radius:8px;
    cursor:pointer;
}

.pet-editor{margin-top:12px; display:flex; flex-direction:column; gap:16px;}

.pet-image-container{
    width:240px;height:320px;
    border:1px solid #ddd;
    background:#fafafa;
    border-radius:8px;
    margin:auto;
    display:flex;justify-content:center;align-items:center;
}
.pet-image-container img{max-width:100%;max-height:100%;}

.pet-controls{
    display:flex; justify-content:center; gap:12px; flex-wrap:wrap;
}

.pet-btn,.pet-btn-primary{
    font-family:'Red Hat Display';
    font-size:14px;
    border-radius:10px;
    padding:10px 18px;
    border:1px solid #0057FF;
    color:#0057FF;
    background:#EAF1FF;
    cursor:pointer;
}

.pet-btn-primary{
    background:#0057FF;
    color:#fff;
}

.pet-success{
    color:#009900;
    font-weight:600;
}

@media(max-width:768px){
    .pet-controls{
        flex-direction:row;
        justify-content:center;
    }
}

.pet-info {
    color: #0073aa;
    font-weight: 500;
}

.pet-uploading {
    color: #f0ad4e;
    font-weight: 500;
}

.pet-success {
    color: #46b450;
    font-weight: 500;
}

.pet-error {
    color: #dc3232;
    font-weight: 500;
}