/* ==========================================================================
   INDEX.CSS (page-specific)
   Sections:
   A) Fixed right-side action buttons
   B) Card selection checkbox UI
   C) Card flip/layout blocks
   D) Card name/controls areas
   E) Photo overlay (controls + D&D)
   F) Ghost “Add New” card
   G) Back-of-card compact form
   H) Edit lock states
   I) Popup menu
   J) URL modal (search/import)
   K) Info modal layout (photo + details) and Bootstrap modal fixes
   L) Responsive / motion
   M) PHOTO LIGHTBOX (fullscreen gallery)
   ========================================================================== */

/*** A) FIXED RIGHT-SIDE ACTION BUTTONS ***/
.fixed-button {
    position: fixed;
    z-index: 1000;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#deleteSelectedEntriesBtn,
#addNewPersonExternalBtn1418,
#addNewPersonExternalBtn,
#addNewPersonBtn,
#addNewEmptyCardBtn,
#viewTreeBtn {
    right: 20px;
    opacity: .8;
    background-color: var(--default-button-bg);
    border: 2px solid var(--default-border-color);
    color: var(--default-text-color);
}

#deleteSelectedEntriesBtn {
    bottom: 310px;
}

#addNewPersonExternalBtn1418 {
    bottom: 250px;
}

#addNewPersonExternalBtn {
    bottom: 190px;
    color: white;
}

#addNewPersonBtn {
    bottom: 130px;
    color: white;
}

#addNewEmptyCardBtn {
    bottom: 70px;
    color: white;
}

#viewTreeBtn {
    bottom: 70px;
}

/*** B) CARD SELECTION CHECKBOX UI ***/
.check-box-right {
    position: absolute;
    bottom: 18px;
    right: 18px;
    border: 2px solid var(--default-border-color);
    border-radius: 4px;
    color: var(--default-button-i-color);
    background: var(--default-button-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 40px;
    height: 40px;
}

    .check-box-right input[type="checkbox"] {
        accent-color: var(--default-button-bg);
        cursor: pointer;
    }

    .check-box-right:hover {
        background-color: var(--default-button-bg-hover);
        color: var(--default-button-clr-hover);
    }

    .check-box-right input[type="checkbox"]:focus {
        outline: none;
        box-shadow: 0 0 1px 1px var(--default-form-check-input-focus);
        background-color: var(--default-button-focus);
    }

    .check-box-right input[type="checkbox"]:disabled {
        background-color: var(--default-button-bgr-disabled);
        color: var(--default-button-clr-disabled);
        cursor: not-allowed;
    }

    .check-box-right input[type="checkbox"]:checked {
        background-color: var(--default-button-active);
        color: var(--default-button-clr-hover);
    }

/* Hide native checkbox (kept for accessibility) */
.hidden-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
/* Icon swap using Font Awesome */
.check-label i::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0c8"; /* square */
}

.hidden-checkbox:checked + .check-label i::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00c";
    color: black; /* check */
}

.hidden-checkbox:checked + .check-label {
    border-color: var(--default-button-bg-hover);
}

/*** C) CARD FLIP / LAYOUT ***/
.card {
    perspective: 1000px;
    position: relative;
}

.card-style {
    position: relative;
    background-color: var(--default-card-bg);
    perspective: 1000px;
    transition: transform .6s ease-in-out;
}

.card-front, .card-reverse {
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: transform .6s;
    position: relative;
    top: 0;
    left: 0;
}

.card-front {
    transform: rotateY(0deg);
}

.card-reverse {
    transform: rotateY(180deg);
}

.card.flipped .card-front {
    transform: rotateY(-180deg);
}

.card.flipped .card-reverse {
    transform: rotateY(0deg);
}

.card-padding-style {
    width: 100%;
    height: 100%;
    padding: 14px 14px 0;
    position: relative;
}

.card-img-padding-style {
    background-color: var(--default-button-bg);
    width: 100%;
    height: 350px;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}

/*** D) NAME / BUTTON GROUP AREAS ***/
.card-nametag-padding-style {
    background-color: var(--default-button-bg);
    width: 100%;
    height: auto;
    padding: 10px 0 10px 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.card-title {
    min-height: 50px;
    margin-bottom: 5px;
    text-align: left;
}

.card-subtitle {
    margin: 0;
    text-align: left;
    font-size: .875rem;
}

.button-group-padding-style {
    padding: 16px 0 16px 10px;
}

/*** E) PHOTO OVERLAY: controls + drag/drop ***/
.card-photo-style, .card-photo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
    transition: opacity .15s ease;
}

    .card-photo-style.is-loading, .card-photo-img.is-loading {
        opacity: .15;
    }

.card.card-style {
    content-visibility: auto;
    contain-intrinsic-size: 360px 280px;
}

.card--fadein {
    opacity: 0;
    transition: opacity .1s ease;
}

    .card--fadein.is-ready {
        opacity: 1;
    }

.card-photo-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
}

.photo-controls {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    padding-right: 6px;
    opacity: 0;
    pointer-events: none;
    background: transparent;
    transition: opacity .2s ease-in-out;
    z-index: 3;
}

    .photo-controls::before {
        content: "";
        position: absolute;
        right: -4px;
        top: 0;
        bottom: 0;
        width: 44px;
        border-radius: 12px;
        background: linear-gradient(to left, rgba(0,0,0,.28), rgba(0,0,0,0));
        z-index: -1;
    }

.card-photo-wrapper:hover .photo-controls,
.card-photo-wrapper:focus-within .photo-controls,
.card-photo-wrapper.controls-visible .photo-controls {
    opacity: 1;
    pointer-events: auto;
}

.card-photo-wrapper.drag-hover {
    outline: 2px dashed #48a9f8;
    outline-offset: 4px;
    box-shadow: inset 0 0 0 2px #48a9f8;
}

.drop-overlay {
    position: absolute;
    inset: 0;
    background: rgba(72,169,248,.12);
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

.drop-msg {
    background: #fff;
    padding: .5rem .75rem;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
}

/* transparent floating buttons (icons over photo) */
.photo-btn {
    border: none;
    background: transparent;
    color: rgba(255,255,255,.9);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
    transition: color .2s, transform .2s, box-shadow .2s;
    box-shadow: none;
}

    .photo-btn i {
        font-size: 20px;
        text-shadow: 0 2px 4px rgba(0,0,0,.4);
    }

    .photo-btn:hover, .photo-btn:focus-visible {
        color: #fff;
        transform: scale(1.1);
        text-shadow: 0 0 8px rgba(255,255,255,.7), 0 2px 6px rgba(0,0,0,.5);
        outline: none;
    }

    .photo-btn.star {
        width: 44px;
        height: 44px;
        color: rgba(255,255,255,.9);
    }

        .photo-btn.star:hover, .photo-btn.star:focus-visible {
            color: #fff;
            transform: scale(1.15);
            text-shadow: 0 0 10px rgba(255,255,255,.8);
        }

    .photo-btn:disabled {
        opacity: .4;
        cursor: default;
    }
    /* pinned star */
    .photo-btn.star i {
        transition: transform .2s, color .2s, text-shadow .2s;
    }

    .photo-btn.star.is-pinned {
        color: #ffd54d !important;
        animation: pin-pop 160ms ease-out;
    }

        .photo-btn.star.is-pinned i,
        .photo-btn.star.is-pinned i::before {
            color: #ffd54d !important;
            text-shadow: 0 0 10px rgba(255,213,77,.9), 0 2px 6px rgba(0,0,0,.5);
            transform: scale(1.15);
        }

@keyframes pin-pop {
    0% {
        transform: scale(.9);
    }

    60% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}
/* flash ring after pin */
.card-photo-wrapper.flash-primary::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 10px;
    box-shadow: 0 0 0 3px rgba(255,213,77,.95);
    pointer-events: none;
    animation: flash-border .8s ease-out forwards;
}

@keyframes flash-border {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/*** F) GHOST “ADD NEW” CARD ***/
#cardsContainer {
    position: relative;
    overflow: visible;
}

#ghostAddCard {
    position: absolute;
    display: block;
    box-sizing: border-box;
    border: 2px dashed var(--default-border-color);
    border-radius: 6px;
    background-color: var(--default-card-bg);
    box-shadow: 0 1px 8px rgba(0,0,0,.08);
    opacity: 0;
    pointer-events: none;
    transform: translateZ(0);
    transition: opacity .18s ease, box-shadow .18s ease;
    z-index: 9;
}

    #ghostAddCard.ghost-visible {
        opacity: 1;
        pointer-events: auto;
    }

    #ghostAddCard:hover, #ghostAddCard:focus-visible {
        box-shadow: 0 4px 14px rgba(0,0,0,.10);
    }

    #ghostAddCard.disabled {
        opacity: .6;
        pointer-events: none;
    }

/* center ghost content */
.card.add-card .card-padding-style {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
}

.card.add-card .card-img-padding-style.ghost-photo,
.card.add-card .card-nametag-padding-style,
.card.add-card .button-group-padding-style {
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    height: 0;
    padding: 0;
}

.card.add-card .ghost-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.card.add-card .add-plus {
    font-size: 3.25rem;
    line-height: 1;
}

.card.add-card .add-label {
    font-size: 1rem;
    opacity: .9;
}

/*** G) BACK-OF-CARD COMPACT FORM ***/
.card-reverse-padding-style {
    background-color: var(--default-button-bg);
    width: 100%;
    height: 350px;
    padding: 5px 10px 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    font-size: .875rem;
    border: 2px solid var(--default-border-color);
    border-radius: 6px;
    box-sizing: border-box;
    --label-w: 112px;
}

    .card-reverse-padding-style .d-flex {
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px;
        margin-bottom: 4px;
    }

        .card-reverse-padding-style .d-flex:last-child {
            margin-bottom: 0;
        }

        .card-reverse-padding-style .d-flex > label {
            flex: 0 0 var(--label-w);
            margin: 0 !important;
            text-align: right;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.25;
            height: 26px;
            display: flex;
            align-items: center;
        }

        .card-reverse-padding-style .d-flex > input.form-control,
        .card-reverse-padding-style .d-flex > select.form-control {
            flex: 1 1 auto;
            min-width: 0;
            width: 100%;
            height: 26px;
            padding: 2px 6px;
            font-size: .85rem;
            line-height: 1.2;
            appearance: none;
        }

    .card-reverse-padding-style input,
    .card-reverse-padding-style select {
        margin: 2px 0;
    }

    .card-reverse-padding-style .d-flex > span.text-danger {
        display: none;
    }

        .card-reverse-padding-style .d-flex > span.text-danger.field-validation-error {
            display: block;
            order: 3;
            flex: 0 0 100%;
            margin-top: 2px;
            margin-left: calc(var(--label-w) + 10px);
            font-size: .78rem;
            line-height: 1.15;
        }

/*** H) EDIT LOCK STATES ***/
.card.edit-lock .button-group-padding-style .button.is-locked {
    opacity: .45;
    cursor: default;
    pointer-events: none;
}

.card.edit-lock .check-box-right, .card.edit-lock .check-label {
    opacity: .45;
    pointer-events: none;
}

.is-locked {
    opacity: .45;
    pointer-events: none;
}

/*** I) POPUP MENU ***/
.popup-menu {
    display: none;
    position: absolute;
    bottom: 15px;
    right: 10px;
    background-color: var(--default-button-bg);
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,.2);
    z-index: 10;
    border-radius: 4px;
    width: 130px;
}

.popup-options {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .popup-options li {
        padding: 5px 10px;
    }

.popup-option {
    padding: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color .3s;
}

/*** J) URL MODAL (search/import) ***/
/* Overlay shared by Wiki + 1418 */
.modal-url {
    display: none; /* shown via JS */
    position: fixed;
    inset: 0;
    z-index: 1050;
    background-color: rgba(0,0,0,.45);
    align-items: flex-start; /* works when display:flex */
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

    /* if you ever toggle a .show class instead of style.display */
    .modal-url.show {
        display: flex;
    }

/* Main card */
.modal-content-url {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(0,0,0,.25);
    max-width: 720px;
    width: 100%;
    padding: 20px 24px 24px;
    position: relative;
    margin-top: 40px;
    border: 1px solid rgba(0,0,0,.08);
    box-sizing: border-box;
    animation: modal-url-in .22s ease-out;
}

/* Header (title + subtitle + close) */
.modal-url-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.modal-url-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #2b2b2b;
}

.modal-url-subtitle {
    margin: 4px 0 0;
    font-size: .9rem;
    color: #666;
}

.modal-url-close {
    border: none;
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: #999;
    padding: 0 0 4px 8px;
}

    .modal-url-close:hover,
    .modal-url-close:focus-visible {
        color: #555;
        outline: none;
    }

/* Keep old .close style for 1418 modal (span.close) */
.modal-url .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

    .modal-url .close:hover,
    .modal-url .close:focus {
        color: #000;
        text-decoration: none;
    }

/* Body */
.modal-url-body {
    margin-top: 4px;
}

/* Form layout (Wiki) */
.wiki-search-form {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

/* wrapper around input + dropdown */
.wiki-search-input-wrapper {
    position: relative;
    flex: 1 1 auto;
}

/* Base inputs (Wiki + 1418) */
#externalUrl,
#externalUrl1418 {
    width: 100%;
    padding: 10px 12px;
    font-size: 1rem;
    border-radius: 6px;
    border: 1px solid var(--default-border-color, #ccc);
    box-sizing: border-box;
}

/* visually-hidden label helper */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Submit button next to input */
.wiki-submit-button {
    align-self: flex-start;
    padding-inline: 18px;
    height: 40px;
    white-space: nowrap;
}

/* Suggestions dropdown (Wiki – inside wrapper, matches input width) */
.suggestions-box {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 4px;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,.12);
    box-shadow: 0 8px 25px rgba(0,0,0,.18);
    z-index: 10;
    display: none;
}

/* 1418 suggestions keep old behavior (outside input wrapper) */
#suggestions1418 {
    width: 600px;
    background: #fff;
    border: 1px solid #ccc;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 4px 8px rgba(0,0,0,.1);
}

.suggestions-box p,
.suggestion-item {
    margin: 0;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 14px;
    text-align: left;
}

    .suggestion-item:hover,
    .suggestions-box p:hover {
        background-color: #f1f1f1;
    }

/* Small screens */
@keyframes modal-url-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 576px) {
    .modal-content-url {
        margin-top: 20px;
        padding: 16px;
    }

    .wiki-search-form {
        flex-direction: column;
    }

    .wiki-submit-button {
        width: 100%;
        height: 42px;
    }
}


/*** K) INFO MODAL LAYOUT + BOOTSTRAP FIXES ***/
/* sizing */
.modal-custom-responsive {
    width: min(900px, 90vw);
    max-width: none;
}

/* flex column & viewport cap (single source of truth — unified) */
#cardInfoModal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
    position: relative;
}

/* first pass: base flex stuff */
#cardInfoModal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
}

/* second pass: info-modal-specific overflow behavior */
#cardInfoModal .modal-body {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* body itself doesn’t scroll */
}

#cardInfoModal .modal-body::-webkit-scrollbar {
    display: none;
}

/* details (photo + text) */
.person-details-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 18px;
    padding: 4px 8px 0; /* small horizontal padding, still aligned nicely */
    color: #2b2b2b;
    line-height: 1.5;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    position: relative;
}

.modal-photo-container {
    flex: 0 0 215px;
    max-width: 215px;
    padding-right: 20px;
    position: relative;
}

    .modal-photo-container::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 1px;
        background-color: rgba(0,0,0,.1);
    }

.modal-photo-frame {
    width: 215px;
    aspect-ratio: 215 / 310;
    overflow: hidden;
    border-radius: 12px;
    background: #f4f4f4;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

#modalPhoto {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; /* show whole image, no cropping */
    object-position: center;
    background-color: #f4f4f4; /* soft background behind letterboxing */
}

.details-container {
    flex: 1;
    min-width: 0;
    padding-top: 4px;
    padding-left: 15px;
}

#modalName {
    font-family: "Merriweather", Georgia, serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: .75rem;
}

.detail-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 8px;
    align-items: baseline;
    margin-bottom: .35rem;
}

    .detail-row .label {
        font-weight: 600;
        color: #333;
        white-space: nowrap;
    }

    .detail-row span:not(.label) {
        font-family: "Merriweather", Georgia, serif;
        color: #555;
        line-height: 1.4;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

.details-fullwidth {
    order: 3;
    flex: 0 0 100%;
    margin-top: .75rem; /* reduced gap above Description */
    text-align: left;
    padding-left: 0;
}

    .details-fullwidth h5 {
        font-weight: 700;
        font-size: 1.2rem;
        color: #333;
        margin-bottom: .5rem;
        padding-left: 0;
    }

#modalDescription {
    white-space: pre-wrap;
    font-size: .95rem;
    color: #555;
    background: #fafafa;
    border-radius: 8px;
    padding: .8rem 1rem;
    border: 1px solid #eee;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
    width: 100%;
}

/* floating close button (no header/footer) */
.close-btn-container {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20; /* 👈 make sure it sits above .modal-body */
    pointer-events: auto; /* safety */
}

.close-btn {
    background: transparent;
    border: none;
    color: #666;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
}

    .close-btn:hover {
        color: #000;
    }

/* Info modal: only description scrolls, top block stays fixed */
#cardInfoModal .modal-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden; /* body itself doesn’t scroll */
}

/* Top block: photo + facts */
#cardInfoModal .person-details-container {
    flex: 0 0 auto;
}

/* Bottom block: description area */
#cardInfoModal .details-fullwidth {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    margin-top: .75rem;
}

/* Big scrollable description area */
#cardInfoModal .description-scroll {
    flex: 0 0 auto; /* don’t try to stretch, just use the max-height below */
    max-height: 40vh; /* about 40% of viewport height; tweak to taste */
    min-height: 220px; /* so short bios don’t look tiny */
    overflow-y: auto;
    padding-right: 4px;
}

    /* Optional: slim scrollbar only inside description */
    #cardInfoModal .description-scroll::-webkit-scrollbar {
        width: 6px;
    }

    #cardInfoModal .description-scroll::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,.22);
        border-radius: 3px;
    }

    #cardInfoModal .description-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

/*** L) RESPONSIVE / MOTION ***/
@media (max-width: 768px) {
    .person-details-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .modal-photo-container {
        flex: none;
        max-width: 60%;
        padding-right: 0;
    }

        .modal-photo-container::after {
            display: none;
        }

    .detail-row {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .details-fullwidth {
        width: 100%;
        margin-top: 1rem;
        text-align: left;
    }

        .details-fullwidth * {
            text-align: left;
        }
}

/*** M) PHOTO LIGHTBOX (fullscreen gallery) ***/
.photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1100; /* above Bootstrap modal (1050) */
    display: none; /* JS will toggle to flex */
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .92);
    padding: 20px;
    box-sizing: border-box;
}

    .photo-lightbox.is-open {
        display: flex;
    }

.photo-lightbox__inner {
    /* position: relative;  <-- REMOVE or comment this */
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Main image area */
.photo-lightbox__image-wrapper {
    position: relative; /* make this a stacking context */
    max-width: 100%;
    max-height: 70vh; /* you already set something like this */
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-lightbox__image {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .6);
    position: relative;
    z-index: 1; /* image below buttons */
}

/* make ALL lightbox buttons sit above the image */
.photo-lightbox__btn {
    position: absolute;
    z-index: 10; /* 🚀 bring on top of image */
    border: none;
    background: none;
    box-shadow: none;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #f5f5f5;
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease, color .15s ease;
}

    .photo-lightbox__btn i {
        font-size: 22px;
        color: inherit;
    }

/* Close button (top-right inside the frame) */
.photo-lightbox__close {
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, .45);
}

.photo-lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, .35);
}

.photo-lightbox__nav--prev {
    left: 40px; /* was 10px, move a bit inward if you like */
}

.photo-lightbox__nav--next {
    right: 40px; /* was 10px */
}

/* Pin (star) button – top right area, left of close */
.photo-lightbox__pin {
    top: 10px;
    right: 60px;
    background-color: rgba(0, 0, 0, .45);
}

/* Delete button – a bit more to the left */
.photo-lightbox__delete {
    top: 10px;
    right: 110px;
    background-color: rgba(0, 0, 0, .45);
}

.photo-lightbox__btn:hover,
.photo-lightbox__btn:focus-visible {
    background-color: rgba(255, 255, 255, .15);
    color: #ffffff;
    transform: scale(1.08);
    outline: none;
}

/* Meta info row (counter + caption) */
.photo-lightbox__meta {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: .9rem;
    color: #f0f0f0;
    padding-top: 4px;
}

.photo-lightbox__counter {
    opacity: .9;
}

.photo-lightbox__caption {
    flex: 1;
    text-align: right;
    opacity: .75;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Star when pinned inside gallery */
.photo-lightbox__pin.is-pinned i {
    /* same idea as card star (gold-ish) */
    color: #ffd66b; /* tweak if you want */
}

/* Flash highlight around the big image when primary is set */
.photo-lightbox__image-wrapper.flash-primary::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 16px;
    border: 3px solid rgba(255, 214, 107, 0.9);
    box-shadow: 0 0 16px rgba(255, 214, 107, 0.7);
    pointer-events: none;
    animation: gallery-primary-flash 0.8s ease-out;
}

@keyframes gallery-primary-flash {
    0% {
        opacity: 1;
        transform: scale(0.97);
    }

    100% {
        opacity: 0;
        transform: scale(1.05);
    }
}

/* Small tweaks on mobile */
@media (max-width: 600px) {
    .photo-lightbox {
        padding: 10px;
    }

    .photo-lightbox__nav--prev {
        left: 4px;
    }

    .photo-lightbox__nav--next {
        right: 4px;
    }

    .photo-lightbox__btn {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 576px) {
    #cardInfoModal .modal-content {
        max-height: 96vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    #ghostAddCard {
        transition: none;
    }
}

@media (hover: none) and (pointer: coarse) {
    .photo-controls {
        opacity: 1;
        pointer-events: auto;
    }
}