/* assets/css/gustabe-avatar.css */

.gustabe-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px dashed #e0e0e0;
}

.gustabe-upload-wrapper {
    position: relative;
    width: 130px;
    height: 130px;
    margin-bottom: 15px;
}

#gustabe-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    background: #f9f9f9;
    transition: 0.3s;
}

/* Buttons */
.action-btn {
    position: absolute;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid #fff;
    font-size: 18px;
    z-index: 5;
}
.action-btn:hover { transform: scale(1.1); }

.edit-btn {
    bottom: 5px; right: 5px;
    background: #04a39c; color: #fff;
}
.remove-btn {
    top: 5px; right: -5px;
    background: #ff4757; color: #fff;
}
.remove-btn.hidden { display: none; }

/* Loading Overlay */
.avatar-loading {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255,255,255,0.7);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    z-index: 10;
    opacity: 0; visibility: hidden;
    transition: 0.3s;
}
.avatar-loading.active { opacity: 1; visibility: visible; }

.spinner {
    width: 30px; height: 30px;
    border: 3px solid #ddd;
    border-top-color: #04a39c;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.helper-text { font-size: 14px; color: #888; margin-top: 5px; }
.msg-box { font-size: 13px; margin-top: 8px; height: 20px; font-weight: 500; }
.msg-success { color: #04a39c; }
.msg-error { color: #ff4757; }