/* Profile main styles */
.save-notification {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(76, 175, 80, 0.9);
    color: white;
    padding: 15px 30px;
    border-radius: 5px;
    font-size: 16px;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    white-space: nowrap;
}
.save-notification.show {
    opacity: 1;
}
.field-saved {
    background-color: rgba(76, 175, 80, 0.9) !important;
    color: white !important;
    text-align: center;
    transition: all 0.3s ease-in-out;
}
.mini-loader {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    vertical-align: middle;
}
.mini-loader:after {
    content: " ";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: currentColor;
    animation: mini-loader-pulse 1.2s infinite ease-in-out;
}
@keyframes mini-loader-pulse {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}
.field-saving {
    background-color: rgba(76, 175, 80, 0.3) !important;
    color: #333 !important;
    text-align: center;
    transition: all 0.3s ease-in-out;
}
.avatar-status-message {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(60, 40, 80, 0.95);
    color: #fff;
    font-weight: bold;
    font-size: 1.3em;
    padding: 18px 36px;
    border-radius: 12px;
    z-index: 10;
    display: none;
    pointer-events: none;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.avatar-status-message.show {
    display: block;
    animation: fadeIn 0.3s;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
#upload-avatar-btn.disabled,
#upload-avatar-btn:disabled {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}
#upload-avatar-btn {
    background: rgba(60,40,80,0.5) !important;
}
#upload-avatar-btn:hover,
#upload-avatar-btn:active,
#upload-avatar-btn:focus {
    background: rgba(60,40,80,1) !important;
}
.user-photos-thumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    min-height: 32px;
    margin-bottom: 8px;
}
.user-photo-thumb {
    transition: box-shadow 0.2s;
    cursor: pointer;
}
.user-photo-thumb:hover {
    box-shadow: 0 2px 12px rgba(60,40,80,0.18);
    border-color: #b9a6d6;
}
.photo-lightbox-overlay {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(30,20,40,0.92); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.2s;
}
.photo-lightbox-content {
  position: relative; max-width: 90vw; max-height: 90vh; text-align: center;
}
.photo-lightbox-content img {
  max-width: 80vw; max-height: 80vh; border-radius: 10px; box-shadow: 0 4px 32px #0008;
  background: #fff;
}
.photo-lightbox-close, .photo-lightbox-prev, .photo-lightbox-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(60,40,80,0.8);
  color: #fff;
  border: none;
  font-size: 2em;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  cursor: pointer;
  z-index: 10001;
}
.photo-lightbox-close {
    position: fixed;
    top: 20px;
    right: 20px;
    transform: none;
    font-size: 2.2em;
    background: rgba(60,40,80,0.8);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    cursor: pointer;
    z-index: 10001;
}
.photo-lightbox-prev { left: 20px; }
.photo-lightbox-next { right: 20px; }
.photo-lightbox-counter { color: #fff; margin-top: 10px; font-size: 1.1em; }
@media (max-width: 600px) {
  .photo-lightbox-content img { max-width: 98vw; max-height: 60vh; }
  .photo-lightbox-content { max-width: 98vw; }
}