/* /home/siisi/vertex/media_app/static/css/media-detail.css */

/* ============================================= */
/* 1. COMMENTS SECTION SCROLLBAR & STYLING       */
/* ============================================= */

/* Beautiful Colored Scrollbar for Comments */
.comments-list {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 8px;
}

/* Webkit browsers */
.comments-list::-webkit-scrollbar {
    width: 12px;
}

.comments-list::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 10px;
    border: 2px solid #f8f9fa;
}

.comments-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--bs-primary) 0%, #0d6efd 100%);
    border-radius: 10px;
    border: 2px solid #f8f9fa;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.comments-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #0b5ed7 0%, #0a58ca 100%);
}

.comments-list::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #0a58ca 0%, #0a53be 100%);
}

.comments-list::-webkit-scrollbar-corner {
    background: #f8f9fa;
}

/* Firefox */
.comments-list {
    scrollbar-width: thin;
    scrollbar-color: var(--bs-primary) #f8f9fa;
}

.comment-item {
    transition: all 0.3s ease;
    border-left: 3px solid transparent !important;
}

.comment-item:hover {
    border-left-color: var(--bs-primary) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateX(2px);
}

.delete-comment-btn {
    transition: all 0.2s ease;
    opacity: 0.7;
}

.delete-comment-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.media-owner-comment {
    border-left: 4px solid #ffc107 !important;
    background-color: rgba(255, 193, 7, 0.05);
}

.btn-outline-warning.delete-comment-btn:hover {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #000;
}

/* ============================================= */
/* 2. BASE MEDIA CONTAINER (shared)             */
/* ============================================= */
.image-wrapper {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: transparent !important;
}

/* ============================================= */
/* 3. VIDEO HANDLING (dynamic aspect ratio via JS) */
/* ============================================= */
.image-wrapper.video-wrapper {
    width: 100%;
    min-height: 400px;
    background: transparent !important;
    transition: all 0.3s ease;
}

.adaptive-video {
    width: 100%;
    height: 100%;
    display: block;
    background: transparent;
}

.video-player-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

/* --- Classes applied by JS based on video orientation --- */
.image-wrapper.video-wrapper.landscape-video {
    aspect-ratio: 16 / 9;
    max-height: 70vh;
}

.image-wrapper.video-wrapper.landscape-video .adaptive-video {
    object-fit: contain;
}

.image-wrapper.video-wrapper.portrait-video {
    height: 85vh;
    min-height: 600px;
    width: auto;
    max-width: 100%;
}

.image-wrapper.video-wrapper.portrait-video .adaptive-video {
    object-fit: contain;
    width: auto;
    height: 100%;
    margin: 0 auto;
}

.image-wrapper.video-wrapper.square-video {
    aspect-ratio: 1 / 1;
    max-height: 70vh;
}

/* Fallback if JS hasn't run */
.image-wrapper.video-wrapper:not(.landscape-video):not(.portrait-video):not(.square-video) .adaptive-video {
    object-fit: contain;
    aspect-ratio: 16/9;
}

/* ============================================= */
/* 4. IMAGE HANDLING (always contain)           */
/* ============================================= */
.image-wrapper:not(.video-wrapper) {
    min-height: 400px;
    background: transparent !important;
}

.image-wrapper:not(.video-wrapper) img {
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.image-display-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: transparent !important;
}

.media-image {
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ============================================= */
/* 5. STORY MEDIA                               */
/* ============================================= */
.story-media-container .media-image,
.story-media-container video {
    max-height: 70vh;
    width: auto;
    object-fit: contain;
    margin: 0 auto;
}

/* ============================================= */
/* 6. MISC UI ELEMENTS (badges, overlays, etc.) */
/* ============================================= */
.media-display-card .card-body {
    display: none;
}

.badge.bg-warning {
    font-size: 0.7em;
    padding: 0.25em 0.5em;
}

/* Social overlay at bottom — a sibling of .image-wrapper (see template),
   not nested inside it, so it always spans the full card width even when
   the wrapper itself narrows and centers (desktop/tablet portrait video). */
.image-wrapper ~ .social-overlay {
    top: auto !important;
    left: 0;
    right: 0;
    padding: 0.75rem 1rem !important;
    text-align: center;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}

/* Stats on left, action buttons on right for all media */
.image-wrapper ~ .social-overlay .d-flex {
    justify-content: space-between !important;
    flex-wrap: nowrap;
    gap: 0.5rem;
}

.social-overlay .text-white {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* ---------- Vertical action rail (Reels/TikTok pattern) ----------
   Lets stat counts use the full width of the bottom bar instead of
   sharing it with like/comment/report. Only for portrait/square media,
   which have plenty of vertical headroom — landscape media (wide, short
   wrapper) keeps the original horizontal row, since a tall stacked rail
   looks sparse floating on one side of it. portrait-video/landscape-video/
   square-video (existing) and their -image equivalents (added in
   media_detail.js) classify the wrapper once dimensions are known.
   Because the overlay is anchored to the full-width card (not the
   wrapper), this stays correct even for desktop/tablet portrait video,
   whose wrapper itself narrows to 35-60% and centers — no separate
   breakpoint override needed here. */
.image-wrapper ~ .social-overlay .social-actions {
    position: absolute;
    /* Logical property, not `right` — this is the vertical action rail
       for portrait/square media (see gallery.css's identical fix for the
       grid version of this same rail). Not really an image-vs-video bug:
       landscape media uses the static/row variant below instead, which
       stays in normal flex flow and already mirrors correctly per dir. */
    inset-inline-end: 0.75rem;
    bottom: 0.75rem;
    flex-direction: column-reverse !important;
    gap: 0.5rem !important;
}

.image-wrapper.landscape-video ~ .social-overlay .social-actions,
.image-wrapper.landscape-image ~ .social-overlay .social-actions {
    position: static;
    flex-direction: row !important;
    gap: 0.4rem !important;
}

/* Give each icon its own translucent dark backdrop so it stays visible
   regardless of what's behind it (a light image, light mode, a bright
   patch of a busy photo) instead of relying only on the overlay's own
   dark gradient, which doesn't reach every button once they're stacked.
   Bootstrap's outline-light color (#f8f9fa) reads as muted against a dark
   chip, so force pure white + the same text-shadow the stat counts use. */
.social-actions .btn {
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    color: #fff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.social-actions .btn:hover,
.social-actions .btn:focus,
.social-actions .btn:active {
    background: rgba(0, 0, 0, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    color: #fff !important;
}

.aspect-ratio-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.75rem;
}

.video-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

.video-loading .spinner-border {
    width: 3rem;
    height: 3rem;
}

/* Style the video controls panel background */
video::-webkit-media-controls-panel {
    padding-bottom: 2.3rem !important;
    border-radius: 6px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%) !important;
}

/* ============================================= */
/* 7. RESPONSIVE ADJUSTMENTS                    */
/* ============================================= */
@media (min-width: 1200px) {
    .media-image {
        max-height: 520px;
    }
}

/* Tablet and mobile adjustments */
@media (max-width: 768px) {
    .image-wrapper:not(.video-wrapper) {
        min-height: 60vh !important;
    }

    .image-wrapper:not(.video-wrapper) img {
        max-height: 60vh !important;
        object-fit: contain !important;
    }

    .image-wrapper.video-wrapper {
        min-height: 60vh !important;
        max-height: 60vh !important;
    }

    .adaptive-video {
        object-fit: contain !important;
    }

    .image-wrapper.video-wrapper.portrait-video {
        height: 80vh !important;
        min-height: auto;
        max-width: none;
    }

    .image-wrapper.video-wrapper.portrait-video .adaptive-video {
        max-height: 80vh !important;
    }
}

@media (max-width: 576px) {
    .image-wrapper:not(.video-wrapper) {
        min-height: 70vh !important;
    }

    .image-wrapper:not(.video-wrapper) img {
        max-height: 70vh !important;
    }

    .image-wrapper.video-wrapper {
        min-height: 70vh !important;
        max-height: 70vh !important;
    }

    .image-wrapper.video-wrapper.portrait-video {
        height: 85vh !important;
    }

    .image-wrapper.video-wrapper.portrait-video .adaptive-video {
        max-height: 85vh !important;
    }
}

/* ============================================= */
/* 8. TABLET & DESKTOP PORTRAIT VIDEO CENTERING */
/* ============================================= */
@media (min-width: 768px) and (max-width: 991px) {
    .image-wrapper.video-wrapper.portrait-video {
        height: 60vh !important;
        min-height: 400px !important;
        max-width: 60% !important;
        margin: 0 auto !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .image-wrapper.video-wrapper.portrait-video {
        height: 70vh !important;
        min-height: 450px !important;
        max-width: 50% !important;
        margin: 0 auto !important;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .image-wrapper.video-wrapper.portrait-video {
        height: 65vh !important;
        min-height: 400px !important;
        max-width: 40% !important;
        margin: 0 auto !important;
    }
}

@media (min-width: 1400px) {
    .image-wrapper.video-wrapper.portrait-video {
        height: 60vh !important;
        min-height: 350px !important;
        max-width: 35% !important;
        margin: 0 auto !important;
    }
}

/* Landscape tablets */
@media (min-width: 768px) and (max-width: 991px) and (orientation: landscape) {
    .image-wrapper.video-wrapper.portrait-video {
        height: 80vh !important;
        min-height: 300px !important;
        max-width: 40% !important;
    }
}

/* ============================================= */
/* 9. COMMON FIXES FOR ALL SCREENS              */
/* ============================================= */
.image-wrapper.video-wrapper.portrait-video {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.image-wrapper.video-wrapper.portrait-video .adaptive-video {
    object-fit: contain !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
}

.media-content-wrapper,
.video-player-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

.image-wrapper.video-wrapper.portrait-video,
.image-wrapper.video-wrapper.portrait-video .adaptive-video {
    transition: all 0.3s ease-in-out !important;
}

/* Landscape & square video consistency on desktop */
@media (min-width: 992px) {
    .image-wrapper.video-wrapper.landscape-video {
        max-height: 70vh !important;
        margin: 0 auto !important;
    }

    .image-wrapper.video-wrapper.square-video {
        max-height: 65vh !important;
        max-width: 65vh !important;
        margin: 0 auto !important;
    }

    .media-image {
        max-height: 70vh !important;
        margin: 0 auto !important;
        display: block !important;
    }
}

/* Height-limited screens */
@media (max-height: 700px) and (min-width: 768px) {
    .image-wrapper.video-wrapper.portrait-video {
        height: 75vh !important;
        min-height: 250px !important;
    }
}

/* ============================================= */
/* 10. DETAIL POLISH (dark-safe)                */
/* ============================================= */

/* Prompt / description box — replaces bg-light (unreadable in dark mode) */
.prompt-box {
    position: relative;
    background: rgba(var(--bs-body-color-rgb), .04);
    border: 1px solid rgba(var(--bs-body-color-rgb), .08);
    border-radius: .6rem;
    padding: .9rem 2.4rem .9rem 1rem;
}
.copy-prompt-btn {
    position: absolute;
    top: .45rem;
    right: .45rem;
    border: none;
    background: transparent;
    color: var(--bs-secondary-color, #6b7280);
    cursor: pointer;
    padding: .25rem .5rem;
    border-radius: .4rem;
    transition: all .15s;
}
.copy-prompt-btn:hover {
    color: #667eea;
    background: rgba(102, 126, 234, .12);
}

/* Metadata tiles */
.meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .6rem;
}
.meta-tile {
    display: flex;
    align-items: center;
    gap: .65rem;
    border: 1px solid rgba(var(--bs-body-color-rgb), .08);
    border-radius: .6rem;
    padding: .55rem .75rem;
    min-width: 0;
    transition: border-color .15s;
}
.meta-tile:hover {
    border-color: rgba(102, 126, 234, .45);
}
.meta-tile > i {
    color: #667eea;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.meta-tile-body {
    min-width: 0;
}
.meta-tile-label {
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--bs-secondary-color, #6b7280);
}
.meta-tile-value {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Author link — replaces text-dark (invisible on dark cards) */
.created-by-link {
    color: inherit;
    text-decoration: underline;
}
.created-by-link:hover {
    color: #667eea;
}
/* Beat the dark theme's "a:hover { color:#fff }" rule */
[data-theme-version="dark"] .created-by-link:hover,
[data-bs-theme="dark"] .created-by-link:hover {
    color: #8ea2ff;
}

/* Comment items — bg-light replacement that adapts to the card colour */
.comment-item {
    background: rgba(var(--bs-body-color-rgb), .03);
}
.comment-text {
    color: inherit;
}

/* Comment author link — same treatment as .created-by-link */
.comment-user-link {
    color: inherit;
    text-decoration: none;
}
.comment-user-link:hover {
    color: #667eea;
    text-decoration: underline;
}
[data-theme-version="dark"] .comment-user-link:hover,
[data-bs-theme="dark"] .comment-user-link:hover {
    color: #8ea2ff;
}

/* "Liked by X and N others" line + insights link */
.liked-by-link {
    text-decoration: none;
    font-weight: 600;
}
.liked-by-link:hover {
    color: #667eea !important;
    text-decoration: underline;
}

/* Owner-only Info Card links ("View insights", "Seen by") — small icon +
   text links that plain .text-muted doesn't give any hover affordance to
   on its own, so both share this instead of each needing its own rule. */
.owner-action-link {
    text-decoration: none;
    border-bottom: 1px dashed rgba(var(--bs-body-color-rgb), .35);
    padding-bottom: 1px;
}
.owner-action-link:hover {
    color: #667eea !important;
    border-bottom-color: #667eea;
    border-bottom-style: solid;
}
[data-theme-version="dark"] .owner-action-link:hover,
[data-bs-theme="dark"] .owner-action-link:hover {
    color: #8ea2ff !important;
    border-bottom-color: #8ea2ff;
}

/* Likers modal rows */
.liker-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem 0;
}
.liker-row + .liker-row {
    border-top: 1px solid rgba(var(--bs-body-color-rgb), .06);
}
.liker-avatar {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
}
.liker-name-link {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.liker-name-link:hover {
    color: #667eea;
    text-decoration: underline;
}
[data-theme-version="dark"] .liker-name-link:hover,
[data-bs-theme="dark"] .liker-name-link:hover {
    color: #8ea2ff;
}

/* Extra share buttons */
.btn-whatsapp {
    background: #25d366;
    border-color: #25d366;
    color: #fff;
}
.btn-whatsapp:hover,
.btn-whatsapp:focus {
    background: #1ebe5b;
    border-color: #1ebe5b;
    color: #fff;
}
.btn-native-share,
.btn-download-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: #fff;
}
.btn-native-share:hover,
.btn-native-share:focus,
.btn-download-gradient:hover,
.btn-download-gradient:focus {
    color: #fff;
    opacity: .9;
}
.btn-instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border: none;
    color: #fff;
}
.btn-instagram:hover,
.btn-instagram:focus {
    color: #fff;
    opacity: .9;
}
.btn-tiktok {
    background: #000;
    border: none;
    color: #fff;
}
.btn-tiktok:hover,
.btn-tiktok:focus {
    color: #fff;
    opacity: .9;
}

/* Dark mode - scrollbar & comment section */
[data-bs-theme="dark"] .comments-list::-webkit-scrollbar-track {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .comments-list::-webkit-scrollbar-thumb {
    border-color: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .comments-list::-webkit-scrollbar-corner {
    background: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .comments-list {
    scrollbar-color: var(--bs-primary) var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .media-owner-comment {
    background-color: rgba(255, 193, 7, 0.08);
}

/* ---------- Remix button: gradient + bubbles, same family as the
   public page dropdown headers ---------- */
.btn-remix {
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    overflow: hidden;
    font-weight: 700;
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn-remix::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.btn-remix:hover,
.btn-remix:focus {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, .45);
}
.btn-remix i, .btn-remix span { position: relative; z-index: 1; }

/* ============================================= */
/* MOBILE ACCORDION (info, comments, actions,     */
/* share) — collapsed by default below the lg     */
/* breakpoint; always expanded at lg+             */
/* ============================================= */
.card-header.accordion-header {
    cursor: pointer;
}

/* Same gradient + bubble overlay as public.html's accordion__header--gradient-bg
   and this page's own Remix button: linear-gradient(135deg, #667eea, #764ba2). */
.card-header.accordion-header.accordion-gradient-bg,
.card-header.accordion-header.accordion-gradient-bg.collapsed {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    transition: background 0.2s ease;
}

.card-header.accordion-header.accordion-gradient-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
    pointer-events: none;
}

.card-header.accordion-header.accordion-gradient-bg:hover {
    background: linear-gradient(135deg, #5a67d8, #6b46c1) !important;
}

.card-header.accordion-header.accordion-gradient-bg > * {
    position: relative;
    z-index: 1;
}

.accordion-chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.card-header.accordion-header.collapsed .accordion-chevron {
    transform: rotate(-90deg);
}

/* No desktop-only override here anymore — accordion headers used to become
   pointer-events:none and every panel got forced open with !important on
   screens ≥992px, so they were never actually closable there. Same
   collapse/expand behaviour now applies at every screen size; each panel's
   initial open/closed state still comes from its own "collapse"/"collapse
   show" class in the template, unrelated to viewport width. */

/* Gift dropdown ("Send a gift" / tier list / "Paid with your credits") —
   the bundled admin theme's .dropdown-header/.dropdown-item-text use
   hardcoded hex colors with no light/dark awareness of their own. Explicit
   solid colors per theme, verified against the dropdown's real background
   in both modes (white in light, ~#24292d in dark) — --bs-body-color-rgb
   tinting was tried first but that variable never actually changes value
   between themes in this app, so opacity math against it produces poor
   contrast on one side or the other. */
.gift-dropdown-menu .dropdown-header {
    color: #000000 !important;
    font-weight: 700 !important;
    background: rgba(0, 0, 0, .09) !important;
    border-radius: .4rem;
    padding-top: .4rem;
    padding-bottom: .4rem;
    /* .social-overlay .text-white (an ancestor) sets a dark text-shadow so
       white text stays legible over a busy photo. That shadow inherits down
       into this dropdown; it helps in dark mode (white text) but smears
       against the black text used here in light mode. Not needed either
       way once color is explicit and solid. */
    text-shadow: none !important;
}
.gift-dropdown-menu .dropdown-item-text.text-muted {
    color: #000000 !important;
    font-weight: 500 !important;
    text-shadow: none !important;
}
/* The tier buttons themselves (⭐ Star, ✨ Sparkles, 💎 Diamond) were
   inheriting the same non-adaptive body-color gray as everything else in
   this dropdown — the actual content people read, not just header/footer. */
.gift-dropdown-menu .dropdown-item,
.gift-dropdown-menu .gift-tier-option {
    color: #212529;
}
.gift-dropdown-menu .gift-tier-option .text-muted {
    color: #6c757d !important;
}
[data-theme-version="dark"] .gift-dropdown-menu .dropdown-header,
[data-bs-theme="dark"] .gift-dropdown-menu .dropdown-header {
    color: #ffffff !important;
    background: rgba(255, 255, 255, .08) !important;
}
[data-theme-version="dark"] .gift-dropdown-menu .dropdown-item-text.text-muted,
[data-bs-theme="dark"] .gift-dropdown-menu .dropdown-item-text.text-muted {
    color: #adb5bd !important;
}
[data-theme-version="dark"] .gift-dropdown-menu .dropdown-item,
[data-theme-version="dark"] .gift-dropdown-menu .gift-tier-option,
[data-bs-theme="dark"] .gift-dropdown-menu .dropdown-item,
[data-bs-theme="dark"] .gift-dropdown-menu .gift-tier-option {
    color: #f8f9fa;
}
[data-theme-version="dark"] .gift-dropdown-menu .gift-tier-option .text-muted,
[data-bs-theme="dark"] .gift-dropdown-menu .gift-tier-option .text-muted {
    color: #adb5bd !important;
}