/* \assets\css\component_view.css */
/* ==========================================================
   Photo Gallery & Grid View Styles (Dedicated)
   ========================================================== */

/* Main Media Container Base */
.media-container {
    width: 100%;
    margin-top: 0.75rem;
    overflow: hidden;
}

/* Common Image Properties inside Gallery */
.media-container img {
    object-fit: cover;
    width: 100%;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: filter 0.2s ease;
}

.media-container img:hover {
    filter: brightness(0.95);
}

/* 1. Single Photo Layout */
.media-container.gallery-single-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
}

.gallery-single-blur {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(24px);
    transform: scale(1.1);
    opacity: 0.6;
}

.gallery-single-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.2);
}

.gallery-single-inner {
    position: relative;
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

@media (min-width: 640px) {
    .gallery-single-inner {
        height: 450px;
    }
}

.gallery-single-inner img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 2. Two Photos Layout */
.media-container.gallery-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
}

.gallery-grid-2 img {
    height: 250px;
}

@media (min-width: 640px) {
    .gallery-grid-2 img {
        height: 400px;
    }
}

/* 3. Three Photos Layout */
.media-container.gallery-grid-3 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.25rem;
}

.gallery-grid-3 .gallery-main-img {
    grid-column: span 3 / span 3;
    height: 350px;
}

@media (min-width: 640px) {
    .gallery-grid-3 .gallery-main-img {
        height: 450px;
    }
}

.gallery-grid-3 .gallery-side-col {
    grid-column: span 2 / span 2;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gallery-grid-3 .gallery-side-col img {
    height: 173px;
}

@media (min-width: 640px) {
    .gallery-grid-3 .gallery-side-col img {
        height: 223px;
    }
}

/* 4. Four Photos Layout */
.media-container.gallery-grid-4 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
}

.gallery-grid-4 img {
    height: 200px;
}

@media (min-width: 640px) {
    .gallery-grid-4 img {
        height: 250px;
    }
}

/* 5. Five Photos Layout */
.media-container.gallery-grid-5 {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gallery-grid-5 .gallery-row-top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
}

.gallery-grid-5 .gallery-row-top img {
    height: 250px;
}

@media (min-width: 640px) {
    .gallery-grid-5 .gallery-row-top img {
        height: 300px;
    }
}

.gallery-grid-5 .gallery-row-bottom {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.25rem;
}

.gallery-grid-5 .gallery-row-bottom img {
    height: 120px;
}

@media (min-width: 640px) {
    .gallery-grid-5 .gallery-row-bottom img {
        height: 150px;
    }
}

/* 6. Six or More Photos Layout */
.media-container.gallery-grid-6plus {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gallery-grid-6plus .gallery-row-top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
}

.gallery-grid-6plus .gallery-row-top img {
    height: 250px;
}

@media (min-width: 640px) {
    .gallery-grid-6plus .gallery-row-top img {
        height: 300px;
    }
}

.gallery-grid-6plus .gallery-row-bottom {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.25rem;
}

.gallery-grid-6plus .gallery-row-bottom img,
.gallery-grid-6plus .gallery-more-wrapper img {
    height: 120px;
}

@media (min-width: 640px) {
    .gallery-grid-6plus .gallery-row-bottom img,
    .gallery-grid-6plus .gallery-more-wrapper img {
        height: 150px;
    }
}

.gallery-more-wrapper {
    position: relative;
    cursor: pointer;
}

.gallery-more-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.125rem;
    border-radius: 0.5rem;
}


/* ==========================================================
   Poll View Styles (Dedicated)
   ========================================================== */

/* Main Poll Container */
.poll-card {
    background-color: rgba(30, 41, 59, 0.2);
    border: 1px solid rgba(51, 65, 85, 0.5);
    border-radius: 0.75rem;
    padding: 1rem;
    width: 100%;
}

.poll-card h3 {
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

/* Poll Options Stack */
.poll-card .flex-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Individual Poll Option Button */
.btn-poll-option {
    position: relative;
    cursor: pointer;
    height: 3.5rem; /* h-14 equivalent */
    display: flex;
    align-items: center;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    border-radius: 0.5rem;
    background-color: rgba(51, 65, 85, 0.3);
    border: 1px solid rgba(71, 85, 105, 0.3);
    overflow: hidden;
    transition: all 0.2s ease-in-out;
}

.btn-poll-option:hover {
    background-color: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
}

/* Poll Option Thumbnail */
.btn-poll-option img {
    width: 2.5rem; /* w-10 */
    height: 2.5rem; /* h-10 */
    aspect-ratio: 1 / 1;
    border-radius: 0.375rem;
    object-fit: cover;
    margin-right: 0.75rem;
    border: 1px solid rgb(71, 85, 105);
}

/* Percentage Progress Fill Bar */
.btn-poll-option .absolute {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: rgba(99, 102, 241, 0.25);
    border-radius: 0.5rem;
    transition: width 0.4s ease-in-out;
}

/* Option Text & Percentage Typography */
.btn-poll-option span.relative {
    position: relative;
    z-index: 10;
    font-size: 0.875rem;
    color: #ffffff;
    font-weight: 500;
}

.btn-poll-option span.ml-auto {
    margin-left: auto;
    position: relative;
    z-index: 10;
    font-size: 0.75rem;
    color: rgb(203, 213, 225);
    font-weight: 700;
}

/* Total Votes & Status Footer */
.poll-card p {
    font-size: 0.625rem; /* 10px */
    color: rgb(100, 116, 139);
    margin-top: 0.75rem;
}

.poll-card .total-votes {
    font-weight: 600;
    color: rgb(148, 163, 184);
}


/* ==========================================================
   Updated Audio Component Styles (Orange Theme & Square Thumb)
   ========================================================== */

.audio-card {
    background: linear-gradient(135deg, rgba(20, 24, 33, 0.95), rgba(35, 39, 48, 0.9));
    border: 1px solid rgba(249, 115, 22, 0.25); /* কমলা বর্ডার টোন */
    border-radius: 1rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    width: 100%;
    box-sizing: border-box;
}

.audio-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

/* থাম্বনেইল এখন ফিক্সড স্কয়ার শেপ এবং রাউন্ডেড কর্নার */
.audio-thumb-img {
    width: 4.5rem !important;
    height: 4.5rem !important;
    min-width: 4.5rem;
    min-height: 4.5rem;
    max-width: 4.5rem;
    max-height: 4.5rem;
    border-radius: 0.75rem !important; /* স্কয়ার উইথ স্মুথ কার্ভ */
    object-fit: cover !important;
    border: 2px solid rgba(249, 115, 22, 0.3);
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.audio-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow: hidden;
    flex: 1;
}

.audio-info h3 {
    color: #f8fafc;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.audio-info p {
    color: #94a3b8;
    font-size: 0.8rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Audio Wave Animation UI (মেটাটেক্সটের নিচে ইফেক্ট) */
.audio-wave {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 14px;
    margin-top: 0.35rem;
}

.audio-wave-bar {
    width: 3px;
    height: 35%; 
    opacity: 0.4;
    background-color: #f97316; /* কমলা ওয়েভ কালার */
    border-radius: 2px;
}

/* যখন অডিও কার্ডে playing ক্লাস যোগ হবে, তখন অ্যানিমেশন শুরু হবে */
.audio-card.playing .audio-wave-bar {
    animation: wavePulse 1.2s ease-in-out infinite alternate;
}

.audio-card.playing .audio-wave-bar:nth-child(1) { animation-delay: 0.1s; }
.audio-card.playing .audio-wave-bar:nth-child(2) { animation-delay: 0.3s; }
.audio-card.playing .audio-wave-bar:nth-child(3) { animation-delay: 0.5s; }
.audio-card.playing .audio-wave-bar:nth-child(4) { animation-delay: 0.2s; }
.audio-card.playing .audio-wave-bar:nth-child(5) { animation-delay: 0.6s; }

@keyframes wavePulse {
    0% { height: 30%; opacity: 0.4; }
    100% { height: 100%; opacity: 1; }
}

.audio-controls-wrapper {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: rgba(15, 23, 42, 0.6);
    padding: 0.65rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(51, 65, 85, 0.4);
    width: 100%;
    box-sizing: border-box;
}

.audio-play-pause {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, #f97316, #ea580c); /* কমলা গ্রেডিয়েন্ট বাটন */
    border-radius: 50%;
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
    transition: transform 0.2s ease, background 0.2s ease;
}

.audio-play-pause:hover {
    transform: scale(1.05);
}

.current-time, .total-duration {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 600;
    min-width: 32px;
    text-align: center;
    flex-shrink: 0;
}

.audio-timeline {
    flex: 1;
    height: 0.4rem;
    background-color: #334155;
    border-radius: 9999px;
    appearance: none;
    cursor: pointer;
    accent-color: #f97316; /* কমলা প্রোগ্রেস থম */
    outline: none;
}

/* রেস্পন্সিভ ডিজাইন হ্যান্ডলিং */
@media (max-width: 480px) {
    .audio-card {
        padding: 0.85rem;
        gap: 0.85rem;
    }
    .audio-thumb-img {
        width: 3.75rem !important;
        height: 3.75rem !important;
        min-width: 3.75rem;
        min-height: 3.75rem;
    }
    .audio-controls-wrapper {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }
    .audio-play-pause {
        width: 2.25rem;
        height: 2.25rem;
    }
}

/* --- 1. Video Component Improvements --- */
/* ==========================================================
   Otvut Video Component & Shaka Player Styles (Perfect Fix)
   ========================================================== */

/* ----------------------------------------------------------
   Main Video Container
   ---------------------------------------------------------- */

.media-container.video-layout {
    width: 100%;
    margin-top: 0.75rem;
    box-sizing: border-box;
}

/* ----------------------------------------------------------
   Video Trigger
   ---------------------------------------------------------- */

.video-trigger-zone {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    cursor: pointer;
    background: #000;
    border-radius: 0.5rem;
    isolation: isolate;
}

/* ----------------------------------------------------------
   Thumbnail & Duration Badge
   ---------------------------------------------------------- */

.thumbnail-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    border-radius: 0.5rem;
}

.thumbnail-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}

.video-duration-badge {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 1.25rem;
    padding: 0.15rem 0.4rem;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    border-radius: 0.25rem;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
}

/* ----------------------------------------------------------
   Player Holder & Shaka Container
   ---------------------------------------------------------- */

.player-render-holder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    border-radius: 0.5rem;
}

.player-render-holder.hidden,
.thumbnail-wrapper.hidden {
    display: none !important;
}

.player-render-holder [data-shaka-player-container] {
    position: relative;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    background: #000;
    border-radius: 0.5rem;
}

.player-render-holder video[data-shaka-player],
#inline-core-video {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    background: #000;
    outline: none;
}

#shakaUiWrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000;
    transition: opacity 0.15s linear;
}

#shakaUiWrapper.opacity-0 {
    opacity: 0;
}

/* ==========================================================
   LIGHT VIDEO LOADER
   ========================================================== */

#customVideoLoader {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.48) !important;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.15s linear;
}

#customVideoLoader > div:first-child {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 50% !important;
    border-width: 4px !important;
    border-style: solid !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    border-top-color: #f97316 !important;
    border-right-color: #f97316 !important;
    animation: videoLoadingSpin 0.75s linear infinite !important;
    box-sizing: border-box !important;
    flex-shrink: 0;
}

#customVideoLoader p {
    margin: 10px 0 0 0 !important;
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    letter-spacing: 0.025em !important;
    text-align: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@keyframes videoLoadingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#customVideoLoader.opacity-0 {
    opacity: 0 !important;
    visibility: hidden;
}

#customVideoLoader.pointer-events-none {
    pointer-events: none !important;
}

#shakaErrorMessage {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.88);
    color: #fff;
    text-align: center;
}

#shakaErrorMessage.hidden {
    display: none !important;
}

/* ----------------------------------------------------------
   Shaka Controls & Custom Layout Fixes
   ---------------------------------------------------------- */

[data-shaka-player-container] .shaka-controls-container {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 30;
    padding: 0 !important;
    pointer-events: none;
    background: transparent !important;
}

/* কন্টেইনারের ভিতরের এলিমেন্টগুলোতে ক্লিক ইভেন্ট সচল রাখা */
[data-shaka-player-container] .shaka-controls-container * {
    pointer-events: auto;
}

[data-shaka-player-container] .shaka-bottom-controls {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 70%, transparent 100%) !important;
    box-sizing: border-box !important;
}

[data-shaka-player-container] .shaka-control-button-container {
    order: 2;
    align-items: center;
    padding: 0.4rem 0.75rem;
}

[data-shaka-player-container] .shaka-current-time,
[data-shaka-player-container] .shaka-time-container {
    white-space: nowrap;
}

/* ----------------------------------------------------------
   TIMELINE (SEEK BAR) & SQUARE THUMB/COLUMN FIX
   ---------------------------------------------------------- */

[data-shaka-player-container] .shaka-seek-bar-container {
    order: 1;
    position: relative !important;
    width: calc(100% - 4px) !important;
    height: 6px !important;
    margin: 0 2px 2px 2px !important;
    padding: 0 !important;
    cursor: pointer !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border-radius: 3px !important;
    box-sizing: border-box !important;
}

[data-shaka-player-container] .shaka-range-element {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

/* দেখা অংশটুকু কমলা কালার করার জন্য */
[data-shaka-player-container] .shaka-current-time-bar {
    background-color: #f97316 !important;
    border-radius: 3px 0 0 3px !important;
}

/* সার্কেল রিমুভ করে সেখানে স্কয়ার বা কলাম আকৃতির হ্যান্ডেল বা ইন্ডিকেটর তৈরি */
[data-shaka-player-container] input[type=range].shaka-range-element::-webkit-slider-thumb {
    appearance: none;
    width: 4px !important;
    height: 12px !important;
    background: #f97316 !important;
    border-radius: 1px !important;
    cursor: pointer;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

[data-shaka-player-container] input[type=range].shaka-range-element::-moz-range-thumb {
    width: 4px !important;
    height: 12px !important;
    background: #f97316 !important;
    border-radius: 1px !important;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

/* ----------------------------------------------------------
   VOLUME SLIDER PERMANENT LINE / VISIBILITY FIX
   ---------------------------------------------------------- */

[data-shaka-player-container] .shaka-volume-container {
    display: inline-flex !important;
    align-items: center !important;
}

/* ভলিউম স্লাইডার লাইন যাতে হারিয়ে না যায়, বরং ডিফল্টভাবে দৃশ্যমান বা হোভারে সুন্দরভাবে থাকে */
[data-shaka-player-container] .shaka-volume-bar-container {
    max-width: 80px !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
    display: inline-block !important;
    vertical-align: middle;
}

/* ভলিউম ট্র্যাক বা বার ডিজাইন */
[data-shaka-player-container] .shaka-volume-bar-container .shaka-seek-bar-container,
[data-shaka-player-container] .shaka-volume-bar-container input[type=range] {
    width: 70px !important;
    height: 4px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border-radius: 2px !important;
}

/* ----------------------------------------------------------
   FLOATING VIDEO PLAYER
   ---------------------------------------------------------- */

#global-floating-player-root {
    position: fixed;
    z-index: 999999;
    overflow: hidden;
}

#global-floating-player-root [data-shaka-player-container] {
    width: 100% !important;
    height: 100% !important;
    background: #000;
}

#global-floating-player-root video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000;
}

@media (min-width: 550px) {
    #global-floating-player-root {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 320px;
        height: 180px;
        border: 1px solid rgba(148, 163, 184, 0.35);
        border-radius: 0.75rem;
        background: #000;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    }
}

@media (max-width: 549px) {
    #global-floating-player-root {
        top: 0;
        left: 0;
        width: 100%;
        height: 220px;
        background: #000;
    }
    #global-floating-player-root [data-shaka-player-container] {
        border-radius: 0;
    }
}

#global-floating-player-root > button {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 9999999;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

#global-floating-player-root > button:hover {
    background: rgba(0, 0, 0, 0.85);
    transform: scale(1.05);
}

/* ----------------------------------------------------------
   ACCESSIBILITY & REDUCED MOTION
   ---------------------------------------------------------- */

.video-trigger-zone:focus-visible {
    outline: 2px solid #f97316;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    #customVideoLoader {
        transition: none;
    }
    #customVideoLoader > div:first-child {
        animation: none !important;
    }
}