:root {
    --profile-label-color: var(--bs-body-color);
    --profile-value-color: var(--bs-white);
    --profile-empty-color: var(--bs-danger-border-subtle);
    --profile-link-color: var(--bs-link-color-rgb);
    --profile-link-hover: var(--bs-link-hover-color-rgb);
    --profile-icon-color: #0d6efd;
    --profile-li-gap: 0.5rem;
}

.profile-list li {
    display: flex;
    align-items: center;
    gap: var(--profile-li-gap);
    padding: 0.3rem 0;
}

.profile-list strong {
    color: var(--bs-white);
}

.profile-list .value {
    color: var(--profile-value-color);
}

.profile-list .empty {
    color: var(--profile-empty-color);
    font-style: italic;
}

.profile-list a {
    text-decoration: none;
    font-size: 0.9rem;
}

.profile-list i {
    color: var(--profile-icon-color);
    margin-right: 0.25rem;
}

.cover-adjust-mode {
    cursor: grab;
    background-repeat: no-repeat;
    background-size: cover; /* or 'contain' depending on your taste */
}

    .cover-adjust-mode:active {
        cursor: grabbing;
    }

#profileForm .form-label {
    font-weight: 500;
}

#profileForm select[multiple] {
    min-height: 120px;
}

#socialLinksWrapper .social-link-group {
    margin-bottom: 10px;
}

#consentStatus {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

    #consentStatus.show {
        opacity: 1;
    }


.card {
    
}

.filmography-timeline .row {
    display: flex;
    flex-wrap: wrap;
}

.editable-field {
    padding-right: 30px; /* space for pencil icon */
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}

.edit-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    pointer-events: none;
    transition: color 0.3s;
}

.editable-field:hover + .edit-icon,
.editable-field:focus + .edit-icon {
    color: #ff7f00;
}

#usernamespan {
    transition: all 0.3s ease;
    background-color: var(--bs-border-color-translucent);
}

    #usernamespan span {
        font-size: 0.95rem;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
    }

#shareBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

#socialLinksWrapper .social-link-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

    #socialLinksWrapper .social-link-row select,
    #socialLinksWrapper .social-link-row input {
        border-radius: 0.5rem;
        padding: 0.45rem 0.75rem;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
    }

    #socialLinksWrapper .social-link-row button.removeSocialLink {
        min-width: 2.2rem;
        height: 2.2rem;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        #socialLinksWrapper .social-link-row button.removeSocialLink:hover {
            background-color: #dc3545;
            color: #fff;
            border-color: #dc3545;
        }

#socialLinksWrapper .social-platform {
    flex: 0 0 150px;
}

#socialLinksWrapper .social-url {
    flex: 1;
}


.profile-hero {
    height: 450px;
    position: relative;
    border-radius: 1rem;
}

/* Small screens: increase height */
@media (max-width: 767.98px) {
    .profile-hero {
        height: 550px;
    }
}

.cover-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

    .cover-image .overlay {
        background-color: rgba(0,0,0,0.75);
    }

.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.profile-details ul li {
    margin-bottom: 4px;
}

@media (min-width: 768px) {
    .hero-content {
        flex-direction: row;
        align-items: center;
    }

    .profile-details {
        text-align: left;
    }
}

.profile-picture button {
    cursor: pointer;
}

.profile-gallery .card img {
    transition: transform 0.2s;
}

    .profile-gallery .card img:hover {
        transform: scale(1.05);
    }


#changeCoverBtn{
    z-index:2;
}
/* Lightbox Enhancements */
.bs5-lightbox .modal-content {
    background: #000;
    border: none;
    border-radius: 1rem;
}

.bs5-lightbox img {
    border-radius: 0.75rem;
}

.bs5-lightbox .modal-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
}

.sticky-filter-btn {
    position: fixed;
    top: 70px; /* adjust based on header height */
    left: 50%;
    background: linear-gradient(135deg, var(--bs-primary), color-mix(in srgb, var(--bs-primary) 80%, var(--bs-dark)));
    color: var(--bs-white);
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateX(-50%);
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

    .sticky-filter-btn.show {
        opacity: 1;
        pointer-events: auto;
    }


.filmography-timeline {
    position: relative;
    padding-left: 2rem;
    border-left: 3px solid #dee2e6;
}

/* Fade-in / Fade-out animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.8);
    }
}

.selected-role-card.fade-in {
    animation: fadeIn 0.2s ease forwards;
}

.selected-role-card.fade-out {
    animation: fadeOut 0.2s ease forwards;
}

/* Hover effect */
.selected-role-card:hover {
    background-color: #0056b3; /* Slightly darker blue */
    cursor: pointer;
    transform: scale(1.05);
    transition: transform 0.15s, background-color 0.15s;
}

/* Selected role card wrapper */
#selectedRolesWrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}