/* Overall Uploader Layout */

.custom-image-upload {

}

.custom-image-upload input[type=file] {
    display: block;
}

[data-key="field_6785de54c9936"] .acf-label :not(label),
[data-key="field_6785de54c9936"] .acf-input .acf-image-uploader,

[data-key="field_661dcb6673bbf"] .acf-label :not(label),
[data-key="field_661dcb6673bbf"] .acf-input .acf-image-uploader{
    display: none !important;
}

:root {
    --color-midgrey: #888; /* Example color for mid grey */
    --color-primary: #007bff; /* Primary color */
    --color-hover: #0056b3; /* Hover color for buttons */
    --color-text: #555; /* Text color */
    --color-border: #ddd; /* Border color */
    --background-light: #f9f9f9; /* Light background color */
    --background-hover: rgba(0, 0, 0, 0.05); /* Hover background effect */
    --border-radius: 1rem; /* Border radius */
}

.custom-image-upload {
    max-width: 380px;
    margin: 20px 0;
    padding: 20px;
    text-align: center;
    background-color: var(--background-light);
    border-radius: var(--border-radius);
    border: 1px dashed var(--color-midgrey);
    position: relative;
}

.custom-image-upload--label {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.825rem;
    display: block;
    text-align: left;
}

.acf-field-6760fcfca76a2 {
    display: block;
}

.custom-image-upload img.image-preview {
    max-width: 250px;
    height: auto;
    display: block;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.file-upload-input {
    display: block;
    margin-top: 10px;
    padding: 10px;
    background-color: var(--background-light);
    border: 1px dashed var(--color-midgrey);
    border-radius: var(--border-radius);
    cursor: pointer;
    color: var(--color-midgrey);
    width: 100%;
}

.file-upload-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.file-upload-input::file-selector-button {
    background-color: var(--color-primary);
    color: white;
    padding: 10px 20px;
    border-radius: var(--border-radius);
    cursor: pointer;
}

.file-upload-input::file-selector-button:hover {
    background-color: var(--color-hover);
}

.file-upload-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
}

.file-upload-button:hover {
    background-color: var(--color-hover);
}









/**
 * Modal
 */
.media-modal {
    position: fixed;
    top: 120px;
    left: 30px;
    right: 30px;
    z-index: 160000;
    height: fit-content;
    transform: translateY(-50%);
}

.wp-customizer .media-modal {
    z-index: 560000;
}

.media-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 360px;
    background: #000;
    opacity: 0.7;
    z-index: 159900;
}

.wp-customizer .media-modal-backdrop {
    z-index: 559900;
}

.media-modal-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    background: none;
    color: #646970;
    z-index: 1000;
    cursor: pointer;
    outline: none;
    transition: color .1s ease-in-out, background .1s ease-in-out;
}

.media-modal-close:hover,
.media-modal-close:active {
    color: var(--colour-orangeyellow);
}

.media-modal-close:focus {
    color: var(--colour-orangeyellow);
    border-color: var(--colour-orangeyellow);
    box-shadow: 0 0 3px var(--colour-orangeyellow);
    /* Only visible in Windows High Contrast mode */
    outline: 2px solid transparent;
}

.media-modal-close span.media-modal-icon {
    background-image: none;
}

.media-modal-close .media-modal-icon:before {
    content: "\00d7";
    font: normal 24px/1 dashicons;
    speak: never;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.media-frame-menu-toggle, .media-frame-menu-heading, .media-frame-router, .acf-expand-details, .media-frame-uploader, .media-frame-toolbar {
    display: none !important;
}

.media-modal-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    height: fit-content;
    min-height: 300px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
    background: #fff;
    -webkit-font-smoothing: subpixel-antialiased;
}

.media-modal-content .media-frame select.attachment-filters {
    margin-top: 32px;
    margin-right: 2%;
    width: 42%;
    width: calc(48% - 12px);
}


.media-frame.mode-select {
    background-color: #f7f7f7; /* Light gray background */
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Title and Header Styles */
.media-frame-title h1 {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
}

/* Toggle Menu Button */
.media-frame-menu-toggle {
    background: #f4f4f4;
    border: 1px solid #ccc;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 14px;
}

.media-frame-menu-toggle:hover {
    background: #e0e0e0;
}

/* Button Style for Upload */
button.browser.button.button-hero {
    background-color: var(--colour-orangeyellow);
    color: #000;
    border: none;
    padding: 12px 20px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    min-height: 0 !important;
    line-height: 1 !important;
}

button.browser.button.button-hero:hover {
    background-color: var(--colour-orangeyellow);
}

/* Drag and Drop Area */
.upload-ui {
    text-align: center;
    background-color: #f0f0f0;
    padding: 30px;
    border-radius: 10px;
    border: 2px dashed #ccc;
    margin-top: 20px;
}

.upload-instructions {
    font-size: 16px;
    color: #555;
    margin-top: 10px;
}

.upload-instructions.drop-instructions {
    font-size: 18px;
    font-weight: bold;
}

/* Input Field Styling */
input[type="file"] {
    display: none;
}

.upload-inline-status {
    display: none;
}

/* Disable Media Library Panel */
#menu-item-library, .attachments-browser {
    display: none;
}

#menu-item-upload, #menu-item-browse {
    border: 1px solid #ccc;
    margin-right: 0.5rem;
}

#menu-item-upload.active, #menu-item-browse.active {
    background-color: #f0f0f0;
}

/* Media List (hide) */
.attachments-wrapper ul {
    display: none;
}

/* Media Frame Tabs */
.media-router {
    border-bottom: 2px solid #ddd;
    margin-bottom: 10px;
}

/* Selected File Button */
button.media-button-select {
    background-color: var(--colour-orangeyellow);
    color: white;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: not-allowed; /* Disable button initially */
}

button.media-button-select:disabled {
    background-color: #e0e0e0;
    cursor: not-allowed;
}

/* Max Upload Size Info */
.max-upload-size {
    font-size: 14px;
    color: #555;
    margin-top: 15px;
}

/* Upload Status and Errors */
.upload-errors {
    color: red;
    margin-top: 10px;
}