/**
 * Cover Photo & Logo Styles
 */

/* Cover Photo & Logo Display */
.cover-photo-display,
.custom-logo-display {
    max-height: 300px;
}

.cover-photo-image,
.custom-logo-image {
    max-height: 300px;
    object-fit: contain;
}

/* Consolidated loading spinner for both cover and logo - centered overlay */
.cover-widget-loading-spinner,
.cover-photo-loading-spinner,
.custom-logo-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: var(--bg-overlay-white);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(var(--bs-black-rgb), 0.15);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cover-widget-loading-spinner i,
.cover-photo-loading-spinner i,
.custom-logo-loading-spinner i {
    font-size: 24px;
    color: var(--bs-primary);
    animation: spin 1s linear infinite;
}

/* Operation-specific spinner colors */
.cover-widget-loading-spinner--adding i {
    color: var(--bs-success);
}

.cover-widget-loading-spinner--removing i {
    color: var(--bs-danger);
}

/* Uppy Dashboard Sizing — height: auto set globally in media-library.css */

/* Cover Widget (Share Offcanvas) */
.cover-widget .theme-card-widget,
.cover-widget .font-card-widget {
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.cover-widget .theme-card-widget:hover,
.cover-widget .font-card-widget:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Selected state checkmark via CSS pseudo-element */
.cover-widget .theme-card-widget.selected::after,
.cover-widget .font-card-widget.selected::after {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 4px;
    right: 4px;
    color: var(--bs-primary);
    font-size: 0.875rem;
    text-shadow: 0 0 2px white;
}

/* Theme preview container */
.cover-widget .theme-preview {
    border-radius: 0.25rem;
}

/* Focus states */
.cover-widget .theme-card-widget:focus,
.cover-widget .font-card-widget:focus {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}