/* =========================================================================
   1. CORE RESET & SCOPED CONTAINER
   ========================================================================= */
.pmu-wrap *,
.pmu-wrap *::before,
.pmu-wrap *::after { 
    box-sizing: border-box; 
}

#pmu-wrap, .pmu-wrap {
    all: initial; /* Reset PTB interference */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    margin: 0 0 28px !important;
    border: 1.5px solid #e0e4ea !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
}

/* =========================================================================
   2. HEADER & TABS
   ========================================================================= */
.pmu-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #f7f9fc;
    border-bottom: 1px solid #e0e4ea;
    font-weight: 600;
    font-size: 15px;
    color: #1a2332;
}

.pmu-header .pmu-icon { color: #3b7dd8; display: flex; }

.pmu-limits {
    margin-left: auto;
    font-size: 12px;
    font-weight: 400;
    color: #8a94a6;
}

.pmu-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #e0e4ea;
    background: #f7f9fc;
}

.pmu-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7a99;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

.pmu-tab:hover { color: #3b7dd8; }

.pmu-tab.active {
    color: #3b7dd8;
    border-bottom-color: #3b7dd8;
    background: #fff;
}

.pmu-count {
    background: #e8effa;
    color: #3b7dd8;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
}

.pmu-tab.active .pmu-count { background: #3b7dd8; color: #fff; }

.pmu-tab-panel { display: none; padding: 20px; }
.pmu-tab-panel.active { display: block; }

/* =========================================================================
   3. DROPZONE & BROWSE BUTTONS
   ========================================================================= */
.pmu-dropzone {
    border: 2px dashed #c8d3e8;
    border-radius: 10px;
    background: #f7f9fc;
    transition: border-color .2s, background .2s;
    cursor: pointer;
    margin-bottom: 16px;
}

.pmu-dropzone:hover, .pmu-dropzone.drag-over {
    border-color: #3b7dd8;
    background: #edf3fd;
}

.pmu-dz-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 20px;
    gap: 8px;
    color: #8a94a6;
    pointer-events: none;
}

.pmu-dz-inner p { margin: 0; font-size: 14px; color: #4a5568; font-weight: 500; }

.pmu-browse-btn {
    pointer-events: all !important;
    background-color: #3b7dd8 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 20px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-block !important;
    transition: background .15s;
    margin-top: 4px !important;
}

.pmu-browse-btn:hover { background-color: #2d6bc4 !important; }

.pmu-hint { font-size: 12px; color: #b0bdd4; margin-top: 2px; }

/* =========================================================================
   4. THUMBNAILS & GRID
   ========================================================================= */
.pmu-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    min-height: 0;
}

.pmu-video-thumbs { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

.pmu-thumbs:not(:empty) { margin-bottom: 4px; }

.pmu-thumb {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1;
    background: #e8eef5;
    border: 2px solid transparent;
    cursor: grab;
    transition: border-color .15s, box-shadow .15s;
    user-select: none;
}

.pmu-vid-thumb { aspect-ratio: 16/9; }

.pmu-thumb:hover { border-color: #3b7dd8; box-shadow: 0 2px 10px rgba(59,125,216,.18); }
.pmu-thumb.is-cover { border-color: #f5a623; box-shadow: 0 0 0 3px rgba(245,166,35,.2); }

.pmu-thumb img, .pmu-thumb video { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    display: block; 
}

/* =========================================================================
   5. THUMBNAIL ACTIONS & DRAG HANDLE
   ========================================================================= */
.pmu-thumb-actions {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    gap: 4px;
    opacity: 0; /* Hidden by default, shown on hover */
    transition: opacity .15s;
    z-index: 9999;
}

.pmu-thumb:hover .pmu-thumb-actions { opacity: 1; }

.pmu-action-btn {
    width: auto;
    height: auto;
    padding: 10px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}

.pmu-action-btn svg {
    display: block !important;
    width: 13px !important;
    height: 13px !important;
    margin: auto !important;
}

.pmu-set-cover { background: rgba(245,166,35,.9); color: #fff; display: none; } /* Set to display:none per your request */
.pmu-set-cover svg { fill: #ffffff !important; }

.pmu-remove { background: rgba(229,62,62,.9); color: #fff; }
.pmu-remove svg { stroke: #ffffff !important; }

.pmu-cover-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    background: #f5a623;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    pointer-events: none;
}

.pmu-drag-handle {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    color: rgba(255,255,255,.85);
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
    cursor: grab;
    opacity: 0;
    transition: opacity .15s;
}

.pmu-thumb:hover .pmu-drag-handle { opacity: 1; }

/* =========================================================================
   6. URL SECTION & PROGRESS
   ========================================================================= */
.pmu-url-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid #e0e4ea; }

.pmu-url-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7a99;
    margin: 0 0 10px;
}

.pmu-url-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }

.pmu-url-row input {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid #d0d7e5;
    border-radius: 7px;
    font-size: 13px;
    color: #2d3748;
    background: #f7f9fc;
}

.pmu-url-remove {
    width: 30px; height: 30px;
    background: #fee2e2;
    color: #e53e3e;
    border-radius: 6px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}

.pmu-add-url-btn {
    background: none;
    border: 1px dashed #b0bdd4;
    border-radius: 7px;
    padding: 7px 16px;
    font-size: 13px;
    color: #6b7a99;
    cursor: pointer;
    margin-top: 4px;
}

.pmu-upload-progress { margin-top: 12px; }
.pmu-progress-bar { height: 5px; background: #e0e4ea; border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.pmu-progress-fill { height: 100%; background: #3b7dd8; width: 0; transition: width .2s; }

/* =========================================================================
   7. HERO SLIDER (PROPERTY SINGLE PAGE)
   ========================================================================= */
.pmu-hero-slider-container {
    width: 100%;
    margin: 0 auto 30px;
    background: #000;
    overflow: hidden;
}
.property.grid3 > .pmu-hero-slider-container, .property.type-property .pmu-hero-slider-container{max-height:250px;}
.property.type-property
.pmu-hero-main { position: relative; }

.pmu-active-viewport {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
}

.pmu-active-viewport img, .pmu-active-viewport video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    animation: pmuFadeIn 0.5s ease-in-out;
}

.pmu-hero-iframe {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 9;
}

.pmu-hero-prev, .pmu-hero-next {
    position: absolute; 
    top: 50%;
    background: rgba(0,0,0,0.6); 
    color: #fff; 
    border: none;
    padding: 14px; 
    cursor: pointer; 
    z-index: 100;
    font-size: 20px; 
    border-radius: 100%;
    line-height: 10px;
    transition: background 0.2s;
}

.pmu-hero-prev { left: 10px; }
.pmu-hero-next { right: 10px; }
.pmu-hero-prev:hover, .pmu-hero-next:hover { background: #fba700; }

.pmu-hero-thumbnails {
    display: flex;
    gap: 5px;
    padding: 10px;
    background: #1a1a1a;
    overflow-x: auto;
}

.pmu-hero-thumb {
    width: 60px;
    height: 40px;
    flex-shrink: 0;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
    border: 2px solid transparent;
}

.pmu-hero-thumb.active { border-color: #3b7dd8 !important; opacity: 1 !important; }

.pmu-video-placeholder {
    width: 100%; height: 100%;
    background: #333; color: #fff;
    font-size: 10px; display: flex;
    align-items: center; justify-content: center;
}
#pmu-active-slide {
    position: relative;
    background: #111; /* Prevents white flash during swap */
    min-height: 400px; /* Adjust to your hero height to prevent jumping */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Optimized Hero Viewport for Full Coverage */
.pmu-active-viewport {
    width: 100% !important;
    height: 500px !important; /* Fixed height ensures stability */
    position: relative !important;
    background: #111 !important;
    overflow: hidden !important;
    display: block !important;
}

#pmu-active-slide img, 
#pmu-active-slide video,
#pmu-active-slide iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    /* 'cover' makes the image fill the area, cropping slightly if needed */
    object-fit: cover !important; 
    object-position: center !important;
    animation: pmuSmoothSlide 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
}

/* Ensure the iframe (YouTube) also covers the area */
.pmu-hero-iframe {
    border: none !important;
}

@keyframes pmuSmoothSlide {
    0% { 
        opacity: 0; 
        transform: translateY(30px) scale(0.98); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}
#pmu-active-slide img, 
#pmu-active-slide video {
    animation: pmuZoomIn 0.7s ease-out;
}

@keyframes pmuZoomIn {
    from { 
        opacity: 0; 
        transform: scale(1.08); 
    }
    to { 
        opacity: 1; 
        transform: scale(1); 
    }
}

@keyframes pmuFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* =========================================================================
   PMU Frontend Gallery CSS [pmu_frontend_gallery]
   ========================================================================= */

.pmu-frontend-gallery-wrap {
    margin: 20px 0;
    width: 100%;
}

.pmu-grid {
    display: grid;
    gap: 10px;
}

/* ইমেজ গ্রিড - প্রতি লাইনে ৪টি (মোবাইলে ২টি) */
.pmu-gallery-images {
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 20px;
}

.pmu-gallery-item {
    position: relative;
    aspect-ratio: 1; /* স্কয়ার থাম্বনেইল */
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #eee;
}

.pmu-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.pmu-gallery-item:hover img {
    transform: scale(1.05); /* হালকা জুম এফেক্ট */
}

/* ওভারলে ও জুম আইকন */
.pmu-gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pmu-gallery-item:hover .pmu-gallery-overlay {
    opacity: 1;
}

.pmu-zoom-icon {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
}

/* ভিডিও গ্রিড - প্রতি লাইনে ২টি */
.pmu-gallery-videos {
    grid-template-columns: repeat(2, 1fr);
}

.pmu-gallery-video-item video,
.pmu-video-embed-wrap iframe {
    width: 100%;
    aspect-ratio: 16/9; /* ভিডিওর অনুপাত */
    border-radius: 8px;
    background: #000;
}

/* রেসপন্সিভ সেটিংস */
@media (max-width: 768px) {
    .pmu-gallery-images {
        grid-template-columns: repeat(2, 1fr); /* ট্যাবলেটে ২টি */
    }
}

@media (max-width: 480px) {
    .pmu-gallery-videos {
        grid-template-columns: 1fr; /* মোবাইলে ১টি ভিডিও */
    }
}
/* স্লাইডার বাটনের কালার পরিবর্তন */
.swiper-button-next, .swiper-button-prev {width:20px !important;height:20px !important;position: absolute !important;top: 50% !important;background: rgba(0, 0, 0, 0.6);color: #fff !important;border: none;padding: 14px;cursor: pointer !important;z-index: 100 !important;font-size: 20px;border-radius: 100%;line-height: 10px;transition: background 0.2s;}
.swiper-button-next:after, .swiper-button-prev:after{font-size:18px !important;}
/* =========================================================================
   8. RESPONSIVE & UTILITIES
   ========================================================================= */
@media (max-width: 600px) {
    .pmu-limits { display: none; }
    .pmu-thumbs { grid-template-columns: repeat(3, 1fr); }
}

.pmu_upload_input_box_row .ptb_custom_text {
    margin-left: 0% !important;
    margin-top: 0px !important;
}

/* Sortable Placeholder & Helper */
.pmu-thumb.ui-sortable-placeholder { border: 2px dashed #3b7dd8; background: #edf3fd; visibility: visible !important; }
.pmu-thumb.ui-sortable-helper { box-shadow: 0 8px 25px rgba(0,0,0,.2); transform: scale(1.04); border-color: #3b7dd8; }

/* Upload Spinner */
.pmu-thumb.uploading::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 24px; height: 24px;
    margin: -12px 0 0 -12px;
    border: 3px solid #3b7dd8;
    border-top-color: transparent;
    border-radius: 50%;
    animation: pmu-spin .7s linear infinite;
    z-index: 2;
}
@keyframes pmu-spin { to { transform: rotate(360deg); } }