/* ThreeBird Photo Picker — Frontend Gallery */

.tbpp-gallery {
    max-width: 1200px;
    margin: 0 auto;
    /* Leave space for sticky/fixed site headers when scrollIntoView targets
       the gallery (e.g. after an AJAX page change). Theme can override. */
    scroll-margin-top: 100px;
}

.tbpp-gallery__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.tbpp-gallery__title {
    margin: 0;
    font-size: 1.5em;
}

.tbpp-gallery__count {
    font-size: 0.9em;
    color: #555;
}

.tbpp-gallery__notice {
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
    padding: 10px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
}

/* Tabs */
.tbpp-tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 8px;
}

.tbpp-tab {
    padding: 8px 16px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    font-size: 0.9em;
    color: #333;
}

.tbpp-tab:hover {
    background: #e0e0e0;
}

.tbpp-tab--active {
    background: #fff;
    border-bottom: 1px solid #fff;
    font-weight: 600;
    margin-bottom: -1px;
}

/* My Picks count badge */
.tbpp-tab-count {
    display: inline-block;
    background: rgba(0, 0, 0, 0.12);
    color: inherit;
    font-size: 0.85em;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    margin-left: 4px;
    min-width: 18px;
    text-align: center;
}

.tbpp-tab--active .tbpp-tab-count {
    background: var(--tbpp-selected, #228b22);
    color: #fff;
}

/* Auto-save info blurb */
.tbpp-autosave-info {
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    padding: 6px 12px;
    margin: 0 0 8px;
}

.tbpp-autosave-info svg {
    vertical-align: middle;
    margin-right: 4px;
    opacity: 0.6;
}

/* ── Theme: Light ── */
.tbpp-gallery--light .tbpp-autosave-info {
    color: rgba(0, 0, 0, 0.45);
}

/* ── Theme: Dark ── */
.tbpp-gallery--dark .tbpp-gallery__title {
    color: #fff;
}

.tbpp-gallery--dark .tbpp-gallery__count {
    color: rgba(255, 255, 255, 0.6);
}

.tbpp-gallery--dark .tbpp-autosave-info {
    color: rgba(255, 255, 255, 0.5);
}

.tbpp-gallery--dark .tbpp-tab {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
}

.tbpp-gallery--dark .tbpp-tab:hover {
    background: rgba(255, 255, 255, 0.15);
}

.tbpp-gallery--dark .tbpp-tab--active {
    background: rgba(255, 255, 255, 0.2);
    border-bottom-color: transparent;
    color: #fff;
    font-weight: 600;
}

.tbpp-gallery--dark .tbpp-tab-count {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
}

.tbpp-gallery--dark .tbpp-tab--active .tbpp-tab-count {
    background: var(--tbpp-selected, #4caf50);
    color: #fff;
}

.tbpp-gallery--dark .tbpp-gallery__notice {
    background: rgba(255, 243, 205, 0.15);
    border-color: rgba(255, 193, 7, 0.4);
    color: #ffc107;
}

/* Grid */
.tbpp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--tbpp-col-width, 150px), 1fr));
    gap: 10px;
}
/* Author display: grid would otherwise beat the UA [hidden] {display:none}.
   Keep these so the tab swap (and the picks paginator slot) actually hides. */
.tbpp-grid[hidden],
.tbpp-pagination[hidden] {
    display: none;
}

/* AJAX page-change in-flight: soften the grid so the user sees the action registered. */
.tbpp-grid--loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* Masonry layout — thumbs at natural aspect ratio, flowed into columns.
   Uses CSS multi-column layout so the browser handles packing without JS.
   Reads top-to-bottom per column (vs left-to-right). */
.tbpp-grid--masonry {
    display: block;
    column-count: auto;
    column-width: var(--tbpp-col-width, 150px);
    column-gap: 10px;
}
.tbpp-grid--masonry .tbpp-thumb {
    display: block;
    width: 100%;
    aspect-ratio: auto;
    break-inside: avoid;
    margin: 0 0 10px;
}
.tbpp-grid--masonry .tbpp-thumb img {
    width: 100%;
    height: auto;
    object-fit: fill;
    object-position: initial;
    transform: none;
}
@media (hover: hover) {
    .tbpp-grid--masonry .tbpp-thumb:hover img {
        transform: scale(var(--tbpp-hover-scale, 1.05));
    }
}

/* Thumbnail */
.tbpp-thumb {
    position: relative;
    aspect-ratio: var(--tbpp-aspect, 3 / 4);
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
    background: #f0f0f0;
}

/* Image — oversized with transform: scale so that even extreme negative
   object-position values (e.g. 50% -55% for face-centering) can't expose
   empty space inside the thumb. The base scale is tunable per gallery via
   --tbpp-content-zoom; hover-scale multiplies on top of it. */
.tbpp-gallery .tbpp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--tbpp-object-position, top center);
    display: block;
    transform: scale(var(--tbpp-content-zoom, 1));
    transform-origin: var(--tbpp-zoom-focus, center);
    transition: transform 0.2s ease;
}

@media (hover: hover) {
    .tbpp-gallery .tbpp-thumb:hover img {
        transform: scale(calc(var(--tbpp-content-zoom, 1) * var(--tbpp-hover-scale, 1.05)));
    }
}

/* Selection checkbox button (top-right corner of each thumb) */
.tbpp-gallery .tbpp-select-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 4;
    width: 26px;
    height: 26px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    color: transparent;
    cursor: pointer;
    opacity: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    transition: opacity 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}

@media (hover: hover) {
    .tbpp-gallery .tbpp-thumb:hover .tbpp-select-btn {
        opacity: 1;
    }

    .tbpp-gallery .tbpp-select-btn:hover {
        background: rgba(0, 0, 0, 0.65);
        color: rgba(255, 255, 255, 0.85);
    }
}

/* Selected state — circle with white check, always visible */
.tbpp-gallery .tbpp-thumb.selected .tbpp-select-btn {
    opacity: 1;
    background: var(--tbpp-selected, #22aa44);
    border-color: #fff;
    color: #fff;
}

/* Selected border */
.tbpp-thumb.selected {
    outline: 3px solid var(--tbpp-selected, #22aa44);
}

/* Loading state */
.tbpp-thumb.loading {
    pointer-events: none;
    opacity: 0.6;
}

.tbpp-thumb.loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tbpp-spin 0.6s linear infinite;
    z-index: 2;
}

@keyframes tbpp-spin {
    to { transform: rotate(360deg); }
}

/* Closed gallery */
.tbpp-gallery--closed .tbpp-thumb {
    cursor: default;
    pointer-events: none;
    opacity: 0.75;
}

/* Login prompt */
.tbpp-login-prompt {
    text-align: center;
    padding: 40px 20px;
}

.tbpp-login-prompt a {
    display: inline-block;
    padding: 10px 24px;
    background: #0073aa;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 1em;
}

.tbpp-login-prompt a:hover {
    background: #005a87;
}

/* ── Lightbox ── */
.tbpp-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    background: rgba(0, 0, 0, 0.92);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
}

/* tabindex=-1 target — we focus this on open; don't render a browser focus ring. */
.tbpp-lightbox:focus {
    outline: none;
}

.tbpp-lightbox.active {
    display: flex;
}

.tbpp-lightbox__img {
    max-width: 90vw;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 4px;
    user-select: none;
}

/* Lightbox image loading spinner */
.tbpp-lightbox.is-image-loading .tbpp-lightbox__img {
    opacity: 0;
}

.tbpp-lightbox.is-image-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tbpp-spin 0.6s linear infinite;
    pointer-events: none;
}

.tbpp-lightbox__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.tbpp-lightbox .tbpp-lightbox__pick-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background 0.15s, border-color 0.15s;
}

.tbpp-lightbox .tbpp-lightbox__pick-btn.is-picked {
    background: var(--tbpp-selected, rgba(34, 139, 34, 0.85));
    border-color: var(--tbpp-selected, #4caf50);
}

/* Pick button loading / busy state */
.tbpp-lightbox .tbpp-lightbox__pick-btn.is-loading,
.tbpp-lightbox .tbpp-lightbox__pick-btn:disabled {
    opacity: 0.7;
    cursor: wait;
    pointer-events: none;
    position: relative;
}

.tbpp-lightbox .tbpp-lightbox__pick-btn.is-loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tbpp-spin 0.6s linear infinite;
    vertical-align: middle;
}

/* Download / submit-notify buttons in lightbox */
.tbpp-lightbox__download-btn,
.tbpp-lightbox__notify-btn,
.tbpp-lightbox__share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--tbpp-accent, rgba(34, 113, 177, 0.7));
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
}

.tbpp-lightbox__download-btn svg,
.tbpp-lightbox__notify-btn svg,
.tbpp-lightbox__share-btn svg {
    flex-shrink: 0;
}

.tbpp-lightbox__notify-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.tbpp-lightbox__share-btn.is-copied {
    background: rgba(40, 140, 70, 0.85);
}

/* "Download All My Picks" batch button */
.tbpp-top-actions {
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tbpp-download-all-btn,
.tbpp-notify-selections-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
}

/* Accent is an override — only apply when the gallery has --tbpp-accent set,
   and only on the resting state. :not(:hover):not(:focus) lets the theme's
   hover/focus rules win unless the user provides an accent-hover color below.
   Trailing colon in the attribute selector keeps `--tbpp-accent-hover` from
   matching this rule on its own. */
.tbpp-gallery[style*="--tbpp-accent:"] .tbpp-download-all-btn:not(:hover):not(:focus),
.tbpp-gallery[style*="--tbpp-accent:"] .tbpp-notify-selections-btn:not(:hover):not(:focus) {
    background: var(--tbpp-accent);
    color: #fff;
    border: none;
}

/* Optional accent-hover override — only when user sets --tbpp-accent-hover. */
.tbpp-gallery[style*="--tbpp-accent-hover:"] .tbpp-download-all-btn:hover,
.tbpp-gallery[style*="--tbpp-accent-hover:"] .tbpp-download-all-btn:focus,
.tbpp-gallery[style*="--tbpp-accent-hover:"] .tbpp-notify-selections-btn:hover,
.tbpp-gallery[style*="--tbpp-accent-hover:"] .tbpp-notify-selections-btn:focus {
    background: var(--tbpp-accent-hover);
    color: #fff;
    border: none;
}

/* Lightbox action / nav / close hover — only when --tbpp-accent-hover is set.
   The lightbox gets reparented to <body> on open, so the attribute selector
   targets the lightbox element itself (which gets its own style="" copy). */
.tbpp-lightbox[style*="--tbpp-accent-hover:"] .tbpp-lightbox__download-btn:hover,
.tbpp-lightbox[style*="--tbpp-accent-hover:"] .tbpp-lightbox__notify-btn:hover,
.tbpp-lightbox[style*="--tbpp-accent-hover:"] .tbpp-lightbox__share-btn:hover {
    background: var(--tbpp-accent-hover);
}
.tbpp-lightbox[style*="--tbpp-accent-hover:"] .tbpp-lightbox__nav:hover,
.tbpp-lightbox[style*="--tbpp-accent-hover:"] .tbpp-lightbox__close:hover {
    color: var(--tbpp-accent-hover);
}

/* Selected-hover override — only when user sets --tbpp-selected-hover. */
.tbpp-gallery[style*="--tbpp-selected-hover:"] .tbpp-thumb.selected .tbpp-select-btn:hover {
    background: var(--tbpp-selected-hover);
}
.tbpp-lightbox[style*="--tbpp-selected-hover:"] .tbpp-lightbox__pick-btn.is-picked:hover {
    background: var(--tbpp-selected-hover);
    border-color: var(--tbpp-selected-hover);
}

.tbpp-download-all-btn:disabled,
.tbpp-notify-selections-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.tbpp-download-all-btn svg,
.tbpp-notify-selections-btn svg {
    flex-shrink: 0;
}

.tbpp-clear-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2271b1;
    border: 1px solid #2271b1;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tbpp-clear-all-btn:not(:disabled):hover {
    background: #2271b1;
    color: #fff;
}

.tbpp-clear-all-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.tbpp-lightbox__close {
    position: absolute;
    top: 16px;
    right: 20px;
    border: none;
    color: var(--tbpp-accent, #fff);
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 6px;
    z-index: 10;
}

.tbpp-gallery--dark .tbpp-clear-all-btn {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.03);
}

.tbpp-gallery--dark .tbpp-clear-all-btn:not(:disabled):hover {
    border-color: rgba(255, 255, 255, 1);
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.tbpp-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    color: var(--tbpp-accent, #fff);
    font-size: 48px;
    cursor: pointer;
    padding: 16px 22px;
    line-height: 1;
    border-radius: 6px;
}

.tbpp-lightbox__nav--prev {
    left: 12px;
}

.tbpp-lightbox__nav--next {
    right: 12px;
}

.tbpp-lightbox__counter {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85em;
}

/* Mobile / touch devices */
@media (max-width: 480px) {
    .tbpp-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(var(--tbpp-col-width, 150px), 140px), 1fr));
        gap: 6px;
    }

    .tbpp-grid--masonry {
        column-width: min(var(--tbpp-col-width, 150px), 140px);
        column-gap: 6px;
    }

    .tbpp-grid--masonry .tbpp-thumb {
        margin-bottom: 6px;
    }

    /* Always show select button on touch (no hover) */
    .tbpp-gallery .tbpp-select-btn {
        opacity: 1;
    }

    /* Lightbox nav buttons bigger for touch targets */
    .tbpp-lightbox__nav {
        padding: 16px 20px;
        font-size: 28px;
    }

    .tbpp-lightbox__close {
        font-size: 28px;
        top: 10px;
        right: 14px;
    }

    /* Keep Select + Download on one row; share button moves to top-left corner */
    .tbpp-lightbox__toolbar {
        gap: 8px;
        padding: 10px 16px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .tbpp-lightbox__pick-btn,
    .tbpp-lightbox__download-btn,
    .tbpp-lightbox__notify-btn {
        min-height: 44px;
        justify-content: center;
        font-size: 15px;
    }

    /* Share button: icon-only, opposite the close button */
    .tbpp-lightbox__share-btn {
        position: absolute;
        top: 10px;
        left: 14px;
        padding: 6px 10px;
        border-radius: 6px;
        z-index: 10;
    }

    .tbpp-lightbox__share-btn svg {
        width: 18px;
        height: 18px;
    }

    .tbpp-lightbox__share-btn .tbpp-lightbox__share-label {
        display: none;
    }

    /* Top action buttons full width on mobile */
    .tbpp-top-actions {
        align-items: stretch;
    }

    .tbpp-download-all-btn,
    .tbpp-notify-selections-btn,
    .tbpp-clear-all-btn {
        width: 100%;
        justify-content: center;
        font-size: 16px;
        padding: 14px 20px;
    }
}

@media (hover: none) and (pointer: coarse) {
    /* Touch device — always show select button */
    .tbpp-gallery .tbpp-select-btn {
        opacity: 1;
    }
}

/* ── Toast notification ── */
.tbpp-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #1a1a1a;
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    z-index: 100001;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    max-width: 90vw;
    text-align: center;
}
.tbpp-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Image loading skeleton ── */
.tbpp-thumb:not(.is-loaded) {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: tbpp-shimmer 1.5s infinite;
}
.tbpp-thumb.is-loaded {
    background: none;
    animation: none;
}
.tbpp-thumb img {
    transition: opacity 0.2s;
}
.tbpp-thumb img[src] {
    opacity: 1;
}
.tbpp-gallery--dark .tbpp-thumb:not(.is-loaded) {
    background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%);
    background-size: 200% 100%;
}
@keyframes tbpp-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Pagination ── */
.tbpp-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 16px 0;
    font-size: 14px;
}
.tbpp-pagination__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.tbpp-pagination__list .page-numbers {
    display: inline-block;
    min-width: 32px;
    padding: 6px 10px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    background: #fff;
    line-height: 1.2;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.tbpp-pagination__list .page-numbers:hover,
.tbpp-pagination__list .page-numbers:focus {
    background: #f3f3f3;
    border-color: rgba(0, 0, 0, 0.3);
}
.tbpp-pagination__list .page-numbers.current {
    background: var(--tbpp-accent, #228b22);
    border-color: var(--tbpp-accent, #228b22);
    color: #fff;
    font-weight: 600;
    cursor: default;
}
.tbpp-pagination__list .page-numbers.dots {
    border: 0;
    background: transparent;
    cursor: default;
}
.tbpp-pagination__summary {
    color: rgba(0, 0, 0, 0.6);
    font-size: 13px;
}

/* Dark theme variant */
.tbpp-gallery--dark .tbpp-pagination__list .page-numbers {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
}
.tbpp-gallery--dark .tbpp-pagination__list .page-numbers:hover,
.tbpp-gallery--dark .tbpp-pagination__list .page-numbers:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
}
.tbpp-gallery--dark .tbpp-pagination__list .page-numbers.current {
    background: var(--tbpp-accent, #4caf50);
    border-color: var(--tbpp-accent, #4caf50);
    color: #fff;
}
.tbpp-gallery--dark .tbpp-pagination__summary {
    color: rgba(255, 255, 255, 0.6);
}

/* Mobile: tighten paginator, stack summary */
@media (max-width: 480px) {
    .tbpp-pagination {
        flex-direction: column;
        gap: 8px;
    }
    .tbpp-pagination__list .page-numbers {
        min-width: 36px;
        padding: 8px 10px;
    }
}