/* =================================================================
   WORDPRESS MEDIA MODAL - MAKE CONTROLS VISIBLE ON ALL SCREEN SIZES
   ================================================================= */

/* Ensure media modal is properly displayed on all devices */
.media-modal {
    display: block !important;
    position: fixed !important;
    top: 105px !important;
    left: 30px !important;
    right: 30px !important;
    bottom: 30px !important;
    z-index: 160000 !important;
}

/* Make sure the modal header with close button and tabs is visible */
.media-modal .media-frame-title,
.media-modal .media-frame-router,
.media-modal .media-modal-close {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure the close X button is always visible and positioned correctly */
.media-modal .media-modal-close {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 50px !important;
    height: 50px !important;
    background: #00967d !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 160005 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    text-decoration: none !important;
}

/* Force the icon inside the close button to be visible */
.media-modal .media-modal-close .media-modal-icon {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #fff !important;
    font-size: 20px !important;
}

.media-modal .media-modal-close:hover {
    background: #008a7b !important;
}

/* Force modal frame to have proper structure */
.media-modal .media-frame {
    position: relative !important;
    height: 100% !important;
    width: 100% !important;
}

/* Modal title bar container */
.media-modal .media-frame-title {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 60px 0 16px !important;
    background: #fcfcfc !important;
    border-bottom: 1px solid #ddd !important;
    box-sizing: border-box !important;
    z-index: 160001 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* Modal title text */
.media-modal .media-frame-title h1 {
    font-size: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 50px !important; /* Vertically center in its 50px container */
    text-align: left !important;
    width: 100% !important;
}

/* Modal tabs bar */
.media-modal .media-frame-router {
    position: absolute !important;
    top: 50px !important;
    right: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    background: #fcfcfc !important;
    border-bottom: 1px solid #ddd !important;
    z-index: 160001 !important;
    display: block !important;
    visibility: visible !important;
}

/* Modal main content area */
.media-modal .media-frame-content {
    position: absolute !important;
    top: 94px !important;
    right: 0 !important;
    bottom: 60px !important; /* leaves space for bottom toolbar */
    visibility: visible !important;
}

/* Ensure Upload Files and Media Library tabs are visible */
.media-modal .media-frame-router {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 0 !important;
    background: #fcfcfc !important;
    border-bottom: 1px solid #ddd !important;
}


.media-modal .media-router {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 0 0 0 12px !important;
    background: transparent !important;
}


/* Make tab buttons visible and properly styled with centered text */
.media-modal .media-menu-item,
.media-modal .media-router .media-menu-item {
    display: inline-flex !important; /* Use flex for better centering */
    align-items: center !important; /* Center vertically */
    justify-content: center !important; /* Center horizontally */
    visibility: visible !important;
    padding: 9px 15px !important;
    cursor: pointer !important;
    height: auto !important;
    min-height: 36px !important;
    line-height: 1.4 !important;
    background: transparent !important;
    border: none !important;
    color: #555 !important;
    font-size: 14px !important;
    min-width: 110px !important;
    width: 110px !important;
    text-align: center !important;
    margin-right: 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* Prevent text overflow */
    white-space: normal !important; /* Keep text on one line */
}

/* Active tab styling - same height as inactive, no extra border, properly centered */
.media-modal .media-menu-item.active {
    background: #00967d !important;
    color: #fff !important;
    border: none !important;
    text-align: center !important;
    min-height: 36px !important;
    line-height: 1.4 !important;
    padding: 9px 15px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    white-space: normal !important;
}

/* Hover state for tabs */
.media-modal .media-menu-item:hover {
    background: rgba(0, 150, 125, 0.1) !important;
    color: #00967d !important;
}

/* Responsive fixes for desktop screens - SIDE BY SIDE LAYOUT */
@media screen and (min-width: 783px) {
    /* Modal should sit below the fixed header on desktop */
    .media-modal {
        top: 105px !important;
        left: 30px !important;
        right: 30px !important;
        bottom: 30px !important;
    }
    
    /* Ensure modal header is visible on desktop */
    .media-modal .media-frame-title {
        display: block !important;
        height: auto !important;
        min-height: 50px !important;
    }
    
    /* Make sure tabs are visible on desktop */
    .media-modal .media-frame-router {
        display: block !important;
        height: auto !important;
        min-height: 44px !important;
    }
    
    /* Close button visible on desktop */
    .media-modal .media-modal-close {
        display: flex !important;
    }
    
    /* Make toolbar extend full width across to sidebar on desktop */
    .media-modal .attachments-browser .media-toolbar {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        width: 100% !important;
        z-index: 10 !important;
    }
    
    /* Push content below toolbar - reduced margin for shorter toolbar */
    .media-modal .attachments-browser .attachments-wrapper {
        margin-top: 46px !important;
    }
}

/* Responsive fixes for mobile/tablet - VERTICAL STACKING */
@media screen and (max-width: 782px) {
    /* Keep modal below fixed header on mobile - no gap */
    .media-modal {
        top: 60px !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
        margin-top: 0 !important;
    }
}

/* Gap for tablet/larger-mobile where site header is taller (75px) */
@media screen and (min-width: 641px) and (max-width: 782px) {
    .media-modal {
        top: 85px !important;
    }
}

@media screen and (max-width: 782px) {
    /* Ensure all controls are visible on mobile */
    .media-modal .media-frame-title,
    .media-modal .media-frame-router,
    .media-modal .media-modal-close {
        display: flex !important;
    }

    /* Keep the Upload Files and Media Library tabs to the left for consistency */
    .media-modal .media-frame-router .media-router {
        display: flex !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }

    /* Close button more prominent and fully visible on mobile */
    .media-modal .media-modal-close {
        width: 44px !important;
        height: 44px !important;
        font-size: 24px !important;
        right: 0 !important;
        z-index: 160005 !important;
    }

    /* VERTICAL STACKING: Media content area uses flexbox column layout */
    .media-modal .media-frame-content {
        display: block !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        position: absolute !important;
        top: 94px !important;
        right: 0 !important;
        bottom: 60px !important;
    }
    
    /* Media library (attachments browser) - full width, contains both grid and sidebar */
    .media-modal .attachments-browser {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-height: 250px !important;
        max-height: none !important;
        height: auto !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
        border-bottom: none !important;
        position: relative !important;
    }

    /* Force children (except sidebar) to relative so they stack in flex column */
    .media-modal .attachments-browser > *:not(.media-sidebar) {
        position: relative !important;
    }

    /* Top toolbar (filter + search) - order 1 */
    .media-modal .attachments-browser > .media-toolbar {
        order: 1 !important;
        width: 100% !important;
        margin-bottom: 0 !important;
        padding-bottom: 4px !important;
    }
    
    /* Grid wrapper - order 2 */
    .media-modal .media-frame-content .attachments-browser .attachments-wrapper {
        width: 100% !important;
        height: auto !important;
        min-height: 250px !important;
        display: block !important;
        order: 2 !important;
        top: 0 !important;
    }
    
    /* Image grid container - LARGER THUMBNAILS */
    .media-modal .media-frame-content .attachments-browser .attachments {
        width: 100% !important;
        height: auto !important;
        display: grid !important;
        top: 0 !important;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
        gap: 10px !important;
        padding: 6px 10px 10px !important;
    }
    
    /* Make individual attachment thumbnails larger and more readable */
    .media-modal .attachment {
        width: 100% !important;
        height: auto !important;
        min-height: 150px !important;
    }
    
    .media-modal .attachment .thumbnail {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .media-modal .attachment .thumbnail img {
        max-width: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }
    
    /* Removed old attachment labels rule to avoid conflicts */
    
    /* Attachment details panel (sidebar) - OVERLAY on top of the grid */
    .media-modal .media-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-left: none !important;
    }
    
    /* Hide sidebar by default to avoid taking up space on mobile */
    .media-modal .media-sidebar {
        display: none !important;
    }

    /* Show sidebar as overlay ΓÇö class-based (JS toggle for all browsers) */
    .media-modal.kinwi-attachment-selected .media-sidebar {
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        z-index: 100 !important;
        padding: 20px 16px !important;
        background: #fff !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    /* Show sidebar as overlay ΓÇö :has() for modern browsers (instant, no JS delay) */
    .media-modal .media-sidebar:has(.attachment-details) {
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        z-index: 100 !important;
        padding: 20px 16px !important;
        background: #fff !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Hide toolbar when overlay active ΓÇö class-based */
    .media-modal.kinwi-attachment-selected .attachments-browser > .media-toolbar {
        display: none !important;
    }
    /* Hide toolbar when overlay active ΓÇö :has() */
    .media-modal .attachments-browser:has(.media-sidebar .attachment-details) > .media-toolbar {
        display: none !important;
    }
    
    /* Prevent double-scrolling ΓÇö class-based */
    .media-modal.kinwi-attachment-selected .media-frame-content {
        overflow: hidden !important;
    }
    /* Prevent double-scrolling ΓÇö :has() */
    .media-modal .media-frame-content:has(.media-sidebar .attachment-details) {
        overflow: hidden !important;
    }
    
    /* Remove relative positioning ΓÇö class-based */
    .media-modal.kinwi-attachment-selected .attachments-browser {
        position: static !important;
    }
    /* Remove relative positioning ΓÇö :has() */
    .media-modal .attachments-browser:has(.media-sidebar .attachment-details) {
        position: static !important;
    }

    /* Override potential ID-scoped plugin rules ΓÇö class-based */
    :is(#__wp-uploader-id-1, #__wp-uploader-id-2, #__wp-uploader-id-3, #__wp-uploader-id-4, #__wp-uploader-id-5, #__wp-uploader-id-6) .media-modal.kinwi-attachment-selected .media-sidebar {
        position: absolute !important;
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
    }
    /* Override potential ID-scoped plugin rules ΓÇö :has() */
    :is(#__wp-uploader-id-1, #__wp-uploader-id-2, #__wp-uploader-id-3, #__wp-uploader-id-4, #__wp-uploader-id-5, #__wp-uploader-id-6) .media-modal .media-sidebar:has(.attachment-details) {
        position: absolute !important;
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
    }
    
    /* Toolbar secondary - auto width so it shares row with search */
    .media-modal .media-toolbar-secondary {
        width: auto !important;
        max-width: 50% !important;
        flex: 0 1 auto !important;
    }
    
    /* Make attachment info more readable on mobile */
    .media-modal .attachment-details .attachment-info {
        padding: 0 !important;
    }
    
    /* Larger touch targets for mobile */
    .media-modal .attachment-details .details,
    .media-modal .attachment-details .settings {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
}

/* Force visibility of modal content area */
.media-modal .media-frame-content {
    visibility: visible !important;
}

/* Ensure toolbar with action buttons is visible */
.media-modal .media-toolbar,
.media-modal .media-toolbar-primary,
.media-modal .media-toolbar-secondary {
    visibility: visible !important;
}

/* Fix toolbar scrollbar - remove overflow arrows */
.media-modal .media-toolbar {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Bottom toolbar with buttons (Select and Crop, etc) - overridden completely below */

/* Action buttons in bottom toolbar */
.media-modal .media-toolbar .button,
.media-modal .media-toolbar-primary .button,
.media-modal .media-frame-toolbar .button {
    min-height: 32px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* "Showing X of X media items" text - Lora upload font */
.media-modal .attachments-browser .media-toolbar-secondary,
.media-modal .media-toolbar-secondary span,
.media-modal .attachments-browser .media-toolbar-secondary .displaying-num {
    font-family: "Lora upload", "Lora", serif !important;
    font-size: 13px !important;
    color: #666 !important;
}

/* Remove excess padding/margin from attachments area to reduce scrolling */
.media-modal .attachments-browser {
    padding: 0 !important;
}

.media-modal .attachments-wrapper {
    padding: 8px !important;
    margin: 0 !important;
}

/* Reduce line height for thumbnail text to prevent overflow */
html body .media-modal .attachment .filename,
html body .media-modal .attachment .title,
html body .media-modal .attachment-preview .filename,
html body .media-modal .attachment-preview .title,
html body .media-modal .attachment .filename div,
html body .media-modal .attachment .title div,
html body .media-modal .attachment-preview .filename div,
html body .media-modal .attachment-preview .title div,
html body .wp-core-ui .attachment::after,
html body .media-modal .attachment::after,
html body .wp-core-ui .attachment:not(:has(.filename))::after,
html body .media-modal .attachment:not(:has(.filename))::after {
    font-family: "Lora upload", "Lora", serif !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    height: auto !important;
    max-height: 18px !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
}

html body .media-modal .attachment .filename,
html body .media-modal .attachment .title,
html body .media-modal .attachment-preview .filename,
html body .media-modal .attachment-preview .title,
html body .wp-core-ui .attachment::after,
html body .media-modal .attachment::after,
html body .wp-core-ui .attachment:not(:has(.filename))::after,
html body .media-modal .attachment:not(:has(.filename))::after {
    padding: 2px 4px !important;
    margin: 0 !important;
    font-size: 12px !important;
    display: block !important;
}

html body .media-modal .attachment .filename div,
html body .media-modal .attachment .title div,
html body .media-modal .attachment-preview .filename div,
html body .media-modal .attachment-preview .title div {
    padding: 0 !important;
    margin: 0 !important;
    display: inline !important;
}

/* Fix search input overflow clipping */
.media-modal input#media-search-input,
.media-modal .search-form input[type="search"] {
    overflow: visible !important;
}

/* Remove sidebar scrollbar arrows but keep scrolling functionality */
.media-modal .media-sidebar {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.media-modal .media-sidebar .attachment-details {
    overflow: visible !important;
}

/* Attachment details form - Lora upload 16px */
.media-modal .attachment-details input,
.media-modal .attachment-details textarea,
.media-modal .attachment-details .attachment-details-copy-link,
.media-modal .compat-item input,
.media-modal .compat-item textarea {
    font-family: "Lora upload", "Lora", serif !important;
    font-size: 16px !important;
}

/* Setting labels and values - Lora upload 10px */
.media-modal .attachment-details .setting,
.media-modal .attachment-details .setting label,
.media-modal .attachment-details .setting .name,
.media-modal .attachment-details .setting .value,
.media-modal .attachment-details .setting input,
.media-modal .attachment-details .setting textarea {
    font-family: "Lora upload", "Lora", serif !important;
    font-size: 10px !important;
}

/* Delete permanently button - Lora upload 10px */
.media-modal .attachment-details .delete-attachment,
.media-modal .attachment-details .button-link-delete {
    font-family: "Lora upload", "Lora", serif !important;
    font-size: 10px !important;
}

/* Attachment info details (filename, date, size, dimensions) - Lora upload 10px */
.media-modal .attachment-info .details .filename,
.media-modal .attachment-info .details .uploaded,
.media-modal .attachment-info .details .file-size,
.media-modal .attachment-info .details .dimensions,
.media-modal .attachment-info .details .edit-attachment {
    font-family: "Lora upload", "Lora", serif !important;
    font-size: 10px !important;
}

/* Copy URL button - Lora upload 10px */
.media-modal .attachment-details .copy-attachment-url,
.media-modal .attachment-details .button.copy-attachment-url {
    font-family: "Lora upload", "Lora", serif !important;
    font-size: 10px !important;
}

/* Responsive heading size for small screens - allow wrapping with tight line spacing */
@media screen and (max-width: 400px) {
    .media-modal .media-frame-title {
        height: auto !important;
        min-height: 50px !important;
        padding: 8px 60px 8px 16px !important;
    }
    
    .media-modal .media-frame-title h1 {
        font-size: 18px !important;
        line-height: 1.1 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
}

/* Smaller screens - reduce font size further */
@media screen and (max-width: 320px) {
    .media-modal .media-frame-title h1 {
        font-size: 16px !important;
        line-height: 1.1 !important;
    }
}

/* Extra-small screens - ensure it stays readable */
@media screen and (max-width: 280px) {
    .media-modal .media-frame-title h1 {
        font-size: 14px !important;
        line-height: 1.1 !important;
    }
}

/* Minimum size for very small screens */
@media screen and (max-width: 260px) {
    .media-modal .media-frame-title h1 {
        font-size: 13px !important;
        line-height: 1.1 !important;
    }
}

/* Grid item labels in media library - Lora upload, compact */

/* Default text in attachment details panel - 14px */
.media-modal .attachment-details .setting,
.media-modal .attachment-details .setting label,
.media-modal .attachment-details .setting .value,
.media-modal .attachment-details .setting input,
.media-modal .attachment-details .setting textarea,
.media-modal .attachment-details .setting .name,
.media-modal .attachment-details .delete-attachment,
.media-modal .attachment-details .button-link-delete,
.media-modal .attachment-details .copy-attachment-url,
.media-modal .attachment-details .button.copy-attachment-url {
    font-size: 14px !important;
}

/* Attachment Details and Uploading side panel titles - Lora upload 18px */
.media-modal .media-sidebar h2 {
    font-family: "Lora upload", "Lora", serif !important;
    font-size: 18px !important;
    text-transform: uppercase !important;
    letter-spacing: normal !important;
    margin-bottom: 24px !important;
    line-height: 1.4 !important;
    height: auto !important;
}

/* Fix attachment details field overlaps by stacking labels and inputs cleanly */
.media-modal .attachment-details .setting {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-bottom: 12px !important;
    height: auto !important;
}

/* Attachment details labels - Lora upload bold 14px */
.media-modal .attachment-details .setting .name {
    font-family: "Lora upload", "Lora", serif !important;
    font-size: 14px !important;
    font-weight: bold !important;
    min-width: 100% !important;
    margin-bottom: 4px !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

/* Ensure inputs are full width and don't float into each other */
.media-modal .attachment-details .setting input,
.media-modal .attachment-details .setting textarea {
    width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* Attachment info text (filename, date, size, dimensions) - 14px */
.media-modal .attachment-info .details .filename,
.media-modal .attachment-info .details .uploaded,
.media-modal .attachment-info .details .file-size,
.media-modal .attachment-info .details .dimensions,
.media-modal .attachment-info .details .edit-attachment {
    font-size: 14px !important;
}

/* =================================================================
   FIX 1: Hide green checkbox (.check) in attachment details on mobile
   and hide the .compat-item form (Enable Media Replace plugin fields)
   ================================================================= */
@media screen and (max-width: 782px) {
    /* Hide the green check/deselect button that bleeds into detail view on mobile */
    .media-modal .attachment-details .check,
    .media-modal .media-sidebar .attachment .check,
    .media-modal .details .check {
        display: none !important;
    }

    /* Hide Enable Media Replace compat fields (Replace media / Remove background) */
    .media-modal .compat-item,
    .media-modal .compat-attachment-fields,
    .media-modal .compat-field-enable-media-replace,
    .media-modal .compat-field-emr-remove-background {
        display: none !important;
    }

    /* Remove green borders between attachments grid and sidebar detail panel */
    .media-modal .attachments-browser {
        border-bottom: none !important;
    }

    .media-modal .media-sidebar {
        border-top: none !important;
    }
}

/* =================================================================
   FIX 2: Hide ACF "Expand Details" link on screens Γëñ782px
   ================================================================= */
@media screen and (max-width: 782px) {
    .media-modal .acf-expand-details {
        display: none !important;
    }
}

/* =================================================================
   FIX 3: Filter by date + Search media layout ΓÇö ALL screen sizes
   Professional matching styling for both controls
   ================================================================= */

/* Toolbar containing filter + search ΓÇö horizontal layout with top alignment - HIGHEST SPECIFICITY */
.media-modal .attachments-browser .media-toolbar,
.media-modal .media-frame-content .attachments-browser .media-toolbar,
.media-modal .media-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 6px 12px !important;
    background: #f9f9f9 !important;
    border-bottom: 1px solid #ddd !important;
    margin: 0 !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
}

/* Secondary toolbar (holds filter by date) ΓÇö vertical layout with label on top - HIGHEST SPECIFICITY */
.media-modal .attachments-browser .media-toolbar-secondary,
.media-modal .media-frame-content .attachments-browser .media-toolbar-secondary,
.media-modal .media-toolbar-secondary,
.media-modal .media-frame-content .media-toolbar-secondary {
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0px !important;
    flex: 0 0 auto !important;
    min-width: 140px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Primary toolbar (holds search) ΓÇö vertical layout with label on top - HIGHEST SPECIFICITY */
.media-modal .attachments-browser .media-toolbar-primary.search-form,
.media-modal .media-frame-content .attachments-browser .media-toolbar-primary.search-form,
.media-modal .media-toolbar-primary.search-form,
.media-modal .media-frame-content .media-toolbar-primary.search-form {
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
    flex: 0 0 auto !important;
    min-width: 180px !important;
    max-width: 300px !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    transform: none !important;
}

/* ---- Shared label styling for both Filter and Search ---- */
.media-modal .media-toolbar .media-toolbar-secondary > label,
.media-modal .media-toolbar .media-toolbar-primary > label,
.media-modal .media-toolbar label[for="media-attachment-date-filters"],
.media-modal .media-toolbar .media-search-input-label,
.media-modal .attachments-browser .media-toolbar-secondary > label,
.media-modal .media-toolbar label.kinwi-filter-label,
.media-modal .attachments-browser .media-toolbar label,
.media-modal .media-frame-content .media-toolbar label {
    font-family: "Lora upload", "Lora", serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: normal !important;
    color: #23282d !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    transform: none !important;
    clip: auto !important;
    -webkit-clip-path: none !important;
    clip-path: none !important;
    overflow: visible !important;
    text-indent: 0 !important;
    width: auto !important;
}

/* ---- Shared input/select styling for both Filter and Search ---- */
.media-modal .media-toolbar select.attachment-filters,
.media-modal .media-toolbar select[name="attachment-filters"],
.media-modal .media-toolbar .search-form input[type="search"],
.media-modal .media-toolbar input#media-search-input,
.media-modal .media-frame-content .media-toolbar select.attachment-filters,
.media-modal .media-frame-content .media-toolbar select[name="attachment-filters"],
.media-modal .media-frame-content .media-toolbar input[type="search"] {
    font-family: "Lora upload", "Lora", serif !important;
    font-size: 13px !important;
    font-style: italic !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 6px 8px !important;
    border: 1px solid #ddd !important;
    border-radius: 3px !important;
    background: #fff !important;
    color: #555 !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Extra specificity for search input to match select exactly */
.media-modal .media-toolbar input[type="search"],
.media-modal .attachments-browser .media-toolbar input[type="search"],
.media-modal .media-frame-content .media-toolbar input[type="search"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    padding: 6px 8px !important;
    height: 32px !important;
    line-height: 1.3 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Focus state for both controls */
.media-modal .media-toolbar select.attachment-filters:focus,
.media-modal .media-toolbar select[name="attachment-filters"]:focus,
.media-modal .media-toolbar .search-form input[type="search"]:focus,
.media-modal .media-toolbar input#media-search-input:focus,
.media-modal .media-frame-content .media-toolbar select:focus,
.media-modal .media-frame-content .media-toolbar input:focus {
    border-color: #00967d !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #00967d !important;
}

/* Filter select sizing */
.media-modal .media-toolbar select.attachment-filters,
.media-modal .media-toolbar select[name="attachment-filters"],
.media-modal .media-frame-content .media-toolbar select.attachment-filters,
.media-modal .media-frame-content .media-toolbar select[name="attachment-filters"] {
    width: 100% !important;
    min-width: 140px !important;
    max-width: 180px !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}
}

/* Search input ΓÇö narrower, not full width, perfectly aligned with filter select */
.media-modal .media-toolbar .search-form input[type="search"],
.media-modal .media-toolbar input#media-search-input {
    width: 100% !important;
    min-width: 180px !important;
    max-width: 300px !important;
    margin-top: -3px !important;
}

/* Responsive adjustments for smaller screens */
@media screen and (max-width: 600px) {
    .media-modal .attachments-browser > .media-toolbar {
        flex-direction: column !important;
        gap: 12px !important;
        height: auto !important;
    }
    
    .media-modal .media-toolbar-secondary,
    .media-modal .media-toolbar-primary.search-form {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }
    
    .media-modal .media-toolbar select.attachment-filters,
    .media-modal .media-toolbar select[name="attachment-filters"],
    .media-modal .media-toolbar .search-form input[type="search"],
    .media-modal .media-toolbar input#media-search-input {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* =================================================================
   GENERAL FIXES FOR ALL SCREEN SIZES - Fix tab container and blank space issues
   ================================================================= */

/* Fix tab container height and reduce encroachment */
.media-modal .media-frame-router {
    min-height: 36px !important; /* Reduced from default */
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ensure tabs are properly sized and don't take too much space */
.media-modal .media-menu-item,
.media-modal .media-router .media-menu-item {
    padding: 6px 12px !important; /* Reduced padding */
    min-height: 30px !important; /* Reduced height */
    line-height: 1.3 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

.media-modal .media-menu-item.active {
    padding: 6px 12px !important; /* Reduced padding */
    min-height: 30px !important; /* Reduced height */
    line-height: 1.3 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}



/* =================================================================
   LANDSCAPE MODE FIX - Title bar, tabs, and content scroll together.
   Select and Crop stays pinned at the bottom.
   Site header unsticks via 08-store-list.css.
   ================================================================= */

/* Basic scroll fixes for all orientations - keep existing behavior intact */
.media-modal .media-frame-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

/* LANDSCAPE MODE: Everything scrolls naturally, Select and Crop stays pinned */
@media screen and (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {

    /* Modal takes full viewport since header scrolled away */
    .media-modal {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }

    /* Frame becomes the scroll container */
    .media-modal .media-frame {
        position: relative !important;
        height: 100% !important;
        width: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
    }

    /* Title bar scrolls with content (not fixed) */
    .media-modal .media-frame-title {
        position: static !important;
        width: 100% !important;
    }

    /* Close button stays anchored to top-right of scroll container */
    .media-modal .media-modal-close {
        position: fixed !important;
        z-index: 160010 !important;
    }

    /* Let the title and tabs scroll naturally with the content */
    .media-modal .media-frame-title,
    .media-modal.kinwi-attachment-selected .media-frame-title {
        position: static !important;
        width: 100% !important;
    }
    
    .media-modal .media-frame:not(.hide-menu) .media-menu,
    .media-modal .media-frame-router,
    .media-modal.kinwi-attachment-selected .media-frame-router {
        position: static !important;
        width: 100% !important;
    }

    /* Content area flows naturally and wraps its children completely */
    .media-modal .media-frame-content {
        position: static !important;
        width: 100% !important;
        min-height: 200px !important;
        height: auto !important;
        top: auto !important;
        bottom: auto !important;
        overflow: visible !important;
    }

    /* Force attachments browser to fully wrap the sidebar too */
    .media-modal .attachments-browser {
        height: auto !important;
        bottom: auto !important;
        top: auto !important;
    }

    /* Bottom toolbar flows naturally at the very bottom of the content */
    .media-modal .media-frame-toolbar {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
        visibility: visible !important;
        background: #fff !important;
        border-top: 1px solid #ddd !important;
        z-index: 10 !important;
    }

    /* Make the inner toolbar relative and reset offsets so it expands its parent correctly */
    .media-modal .media-frame-toolbar .media-toolbar {
        position: relative !important;
        height: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

    /* When attachment details are open, hide the grid so we don't have massive empty space */
    .media-modal.kinwi-attachment-selected .attachments,
    .media-modal .attachments-browser:has(.media-sidebar .attachment-details) .attachments {
        display: none !important;
    }

    /* Make the sidebar relative and auto-height so it sizes exactly to its content,
       pulling the Select and Crop button right up beneath it.
       Uses high-specificity selector to override portrait mode ID selectors. */
    .media-modal.kinwi-attachment-selected .media-sidebar,
    .media-modal .media-sidebar:has(.attachment-details),
    :is(#__wp-uploader-id-1, #__wp-uploader-id-2, #__wp-uploader-id-3, #__wp-uploader-id-4, #__wp-uploader-id-5, #__wp-uploader-id-6) .media-modal.kinwi-attachment-selected .media-sidebar,
    :is(#__wp-uploader-id-1, #__wp-uploader-id-2, #__wp-uploader-id-3, #__wp-uploader-id-4, #__wp-uploader-id-5, #__wp-uploader-id-6) .media-modal .media-sidebar:has(.attachment-details) {
        position: relative !important;
        height: auto !important;
        bottom: auto !important;
        overflow: visible !important;
    }

    /* Attachments browser needs relative positioning when grid is visible */
    .media-modal .attachments-browser {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Attachments wrapper flows naturally */
    .media-modal .attachments-wrapper {
        position: static !important;
        overflow: visible !important;
    }

    /* Force site header BEHIND the modal — Elementor JS may apply
       inline position:fixed and high z-index that override CSS.
       body.modal-open is added by WordPress when a media modal opens. */
    body.modal-open .elementor-location-header,
    body.modal-open header,
    body.modal-open .elementor-sticky--active,
    body.modal-open .elementor-section--fixed,
    body.modal-open [data-settings*="sticky"] {
        z-index: 1 !important;
        position: relative !important;
    }

    /* Completely hide Superfly menu to prevent overlapping text */
    body.modal-open #sfm-mob-navbar,
    body.modal-open .sfm-navicon,
    body.modal-open .sfm-navicon-button {
        display: none !important;
    }
}

/* Style "Original image:" text to match uploaded date */
.media-modal .attachment-info .details .word-wrap-break-word {
    font-family: 'Lora upload', 'Lora', serif !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* Style "Original image:" text to match uploaded date */
.media-modal .attachment-info .details .word-wrap-break-word {
    font-family: 'Lora upload', 'Lora', serif !important;
    font-size: 14px !important;
    color: #646970 !important;
    font-weight: 400 !important;
}

/* Style the original image filename link */
.media-modal .attachment-info .details .word-wrap-break-word a {
    font-family: 'Lora upload', 'Lora', serif !important;
    font-size: 14px !important;
    font-style: normal !important;
}

/* Align "Copy URL to clipboard" button to the left on all screen sizes */
.media-modal .attachment-details .copy-to-clipboard-container {
    margin-left: 0 !important;
}

/* Align "Select and Crop" button to the far left under the Upload files tab */
.media-modal .media-frame.mode-select .media-frame-toolbar .media-toolbar {
    position: relative !important;
    display: block !important;
    height: 100% !important;
    min-height: 60px !important;
}

.media-modal .media-frame.mode-select .media-frame-toolbar .media-toolbar-primary {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
    display: block !important;
}

.media-modal .media-frame.mode-select .media-frame-toolbar .media-toolbar-primary .media-button {
    margin: 0 !important;
    float: none !important;
}

/* Fix left sidebar items padding and spacing */
.media-modal .media-menu {
    padding-top: 65px !important; /* 50px to clear title bar + 15px spacing */
}
.media-modal .media-menu .media-menu-item {
    margin-left: 15px !important;
    margin-right: 15px !important;
    margin-bottom: 8px !important;
    width: calc(100% - 30px) !important;
}

/* =================================================================
   FIX 4: Responsive Left Sidebar (Insert from URL) on Mobile
   ================================================================= */
@media screen and (max-width: 900px) {
    /* Hide WordPress native mobile menu toggle buttons */
    .media-modal .media-menu-toggle,
    .media-modal .media-frame-menu-toggle {
        display: none !important;
    }

    /* Parent menu wrapper flows naturally so it does not constrain child width */
    .media-modal .media-frame-menu {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    /* Horizontal menu bar directly below modal title.
       width: 100% and max-width: 100% are REQUIRED to override WordPress core's
       max-width: 80% rule which caused the right 20% to show as a white cut-off box. */
    .media-modal .media-frame:not(.hide-menu) .media-menu {
        display: flex !important;
        flex-direction: row !important;
        position: absolute !important;
        top: 50px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 50px !important;
        padding: 0 10px !important;
        background: #fff !important;
        border-bottom: 1px solid #ddd !important;
        z-index: 10 !important;
        align-items: center !important;
        transform: none !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-sizing: border-box !important;
    }

    .media-modal .media-frame:not(.hide-menu) .media-menu .media-menu-item,
    .media-modal .media-frame:not(.hide-menu) .media-frame-router .media-router a {
        margin: 0 8px 0 0 !important;
        width: auto !important;
        padding: 6px 10px !important;
        border-left: none !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Hide the native separator to remove the gap between buttons */
    .media-modal .media-frame:not(.hide-menu) .media-menu .separator {
        display: none !important;
    }

    /* Router tabs bar sits directly below the horizontal menu */
    .media-modal .media-frame:not(.hide-menu) .media-frame-router {
        top: 100px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Content area sits directly below the router tabs */
    .media-modal .media-frame:not(.hide-menu) .media-frame-content {
        top: 144px !important;
    }

    /* --- Landscape overrides --- */
    @media (max-height: 500px) and (orientation: landscape) {
        .media-modal .media-frame-menu {
            position: static !important;
            width: 100% !important;
            height: auto !important;
        }

        .media-modal .media-frame:not(.hide-menu) .media-menu {
            position: static !important;
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            min-height: 44px !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
        }

        .media-modal .media-frame:not(.hide-menu) .media-frame-router {
            position: static !important;
            width: 100% !important;
            max-width: 100% !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
        }

        .media-modal .media-frame:not(.hide-menu) .media-frame-content {
            position: static !important;
            width: 100% !important;
            top: auto !important;
        }

        /* Pad Select Files button so it does not crowd the tabs in landscape */
        .media-modal .uploader-inline,
        .media-modal .uploader-inline-content {
            position: static !important;
            top: auto !important;
            padding-top: 30px !important;
            margin: 0 auto !important;
        }
    }
}