.sr-success-box {
    padding: 20px;
    border: 2px solid green;
    color: green;
    margin: 20px auto;
    text-align: center;       /* Center all content */
    background: #f9fff9;      /* Pale green background tint */
    border-radius: 6px;
    max-width: 600px;         /* Prevent box from stretching too wide */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Soft shadow for depth */
}

.sr-success-box .sr-logo {
    max-width: 120px;         /* Scale down logo */
    height: auto;             /* Keep proportions */
    display: block;
    margin: 0 auto 15px;      /* Center logo with spacing below */
}

.sr-success-box h3,
.sr-success-box p {
    margin: 10px 0;
}

/* Profile picture styling */
.sr-profile-picture {
    display: block;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    border: 3px solid red !important;
    max-width: 150px;
    height: auto;
}


/* Servant card styling */
.servant-card {
    text-align: center;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
    background: #fafafa;
    transition: box-shadow 0.3s ease;
}

.servant-card:hover {
    box-shadow: 0 0 10px rgba(0,0,0,0.2); /* subtle hover effect */
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .sr-profile-picture {
        max-width: 100px; /* smaller on mobile */
    }
}

.sr-error-message {
    color: #b00;
    background: #fdd;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #b00;
    border-radius: 4px;
    font-weight: bold;
}

.sr-error-message {
    color: #b00;              /* red text */
    background: #fdd;         /* light red background */
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #b00;
    border-radius: 4px;
    font-weight: bold;
}

.sr-success-message {
    color: #060;              /* dark green text */
    background: #dfd;         /* light green background */
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #060;
    border-radius: 4px;
    font-weight: bold;
}

.servant-card {
    border:1px solid #eee; padding:10px; margin:8px; display:inline-block; width:220px; vertical-align:top; }
.sr-profile-picture {
    border-radius:4px; margin-bottom:6px; }
.sr-success-box {
    border:1px solid #c7f0d1; background:#f0fff4; padding:12px; margin-bottom:12px; }
.sr-no-image { 
    color:#777; font-style:italic; }
.spinner {
    border: 4px solid #f3f3f3; border-top: 4px solid #0073aa; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; display:inline-block; margin-right:8px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }