/* --- General Body & Layout --- */
.cm-public-view-body {
    background-color: #f0f2f5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    margin: 0;
    padding: 0;
    color: #444;
}

.cm-public-view-container {
    width: 100%;
    max-width: 100%; /* Ensure it takes full width */
    padding: 2rem;
    box-sizing: border-box;
}
form#cm-public-view-form {
    padding: 0 0 10px 0;
    margin-bottom: 30px;
}

/* --- Header & Titles --- */
.cm-catalog-header {
    margin-bottom: 2.5rem;
}

.cm-catalog-header h1 {
    font-size: 2.2em;
    font-weight: 600;
    color: #1d2327;
    margin: 0 0 0.25em 0;
}

.cm-catalog-header .cm-catalog-subtitle {
    font-size: 2em;
    color: #646970;
    margin: 0;
}

/* --- Sorting and Search Controls Bar --- */
.cm-view-controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 20px;
    margin-bottom: 1.5rem;
    padding: 10px;
    background-color: #ffffff;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.cm-sorting-form,
.cm-search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap; /* Allow internal items to wrap gracefully */
}

/* --- NEW: Custom Search Clear Button Styles --- */
.cm-search-input-wrapper {
    position: relative;
    display: flex;
    flex-grow: 1; /* Allows the wrapper to fill space on mobile */
    align-items: center;
}

/* Hide the native, non-standard clear button */
.cm-search-form input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}

/* Add padding to the input to make space for our button */
.cm-search-form input[type="search"] {
    padding-right: 30px; /* Space for the clear button */
}

/* Style our custom clear button */
.cm-clear-search-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: #777;
    font-size: 24px;
    line-height: 26px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    display: none; /* JS will control visibility */
}
.cm-clear-search-btn:hover {
    background: #888;
}
/* --- End Custom Search Clear Button Styles --- */

.cm-sorting-form label {
    font-weight: 600;
    color: #555;
    font-size: 0.9em;
}

.cm-sorting-form select,
.cm-search-form input[type="search"] {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 6px 10px;
    font-size: 0.9em;
    background-color: #fff;
    min-width: 150px;
}

.cm-search-form .button {
    background-color: #0073aa;
    color: #fff;
    border: 1px solid #0073aa;
    border-radius: 3px;
    padding: 6px 12px;
    font-size: 0.9em;
    cursor: pointer;
}
.cm-search-form .button:hover {
    background-color: #005a87;
}


/* --- Media Grid --- */
.cm-media-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Increased gap for better spacing */
    justify-content: start;
}
.cm-media-wrapper {
    width: 150px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}
.cm-media-item {
    width: 150px;
    height: 150px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.07);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.cm-media-wrapper:hover .cm-media-item {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.cm-media-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cm-media-item-title {
    padding: 8px 2px;
    font-size: 13px;
    line-height: 1.4;
    color: #444;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Footer & Pagination Controls --- */
.cm-catalog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #ddd;
}

.cm-per-page-selector,
.cm-media-count,
.cm-pagination-links {
    flex-basis: 33.33%;
    text-align: center;
    padding: 10px 0;
}
.cm-per-page-selector { text-align: left; }
.cm-pagination-links { text-align: right; }
.cm-per-page-selector label, .cm-media-count { font-size: 0.9em; color: #555; }
.cm-per-page-selector select { border: 1px solid #ccc; border-radius: 3px; padding: 4px 8px; font-size: 0.9em; }
.cm-pagination-links .page-numbers {
    display: inline-block; padding: 8px 12px; margin: 0 2px; border: 1px solid #ddd;
    background-color: #fff; color: #0073aa; text-decoration: none; border-radius: 3px; transition: background-color 0.2s, color 0.2s;
}
.cm-pagination-links .page-numbers:hover { background-color: #f0f0f0; color: #005a87; }
.cm-pagination-links .page-numbers.current { background-color: #0073aa; border-color: #0073aa; color: #fff; cursor: default; }
.cm-pagination-links .page-numbers.dots { border: none; background: none; cursor: default; }

/* --- Image Detail Modal --- */
.cm-modal-backdrop {
    display: none; position: fixed; top: 0; left: 0;
    width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 1000;
}
.cm-modal-container {
    display: none; position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%); width: 90%; max-width: 960px; max-height: 90vh;
    background-color: #fff; border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 1001; flex-direction: column;
}
.cm-modal-header {
    padding: 15px 20px; border-bottom: 1px solid #ddd; display: flex;
    justify-content: space-between; align-items: center;
}
.cm-modal-header .cm-modal-title-header { margin: 0; font-size: 1.2em; font-weight: 600; }
.cm-modal-close {
    background: none; border: none; font-size: 28px; line-height: 1;
    color: #666; cursor: pointer; padding: 0 5px;
}
.cm-modal-close:hover { color: #000; }
.cm-modal-content { display: flex; padding: 20px; overflow-y: auto; flex-grow: 1; gap: 20px; }

.cm-modal-image-wrapper {
    flex: 0 0 40%; /* Image panel takes up less space */
    display: flex; align-items: center; justify-content: center;
}
.cm-modal-image-wrapper img {
    max-width: 100%; max-height: 100%; height: auto;
    width: auto; object-fit: contain; max-height: 300px; /* Max height for the image */
}
.cm-modal-details {
    flex: 1 1 60%; /* Details panel takes up more space */
    display: flex; flex-direction: column; gap: 10px;
}
.cm-modal-detail-row {
    display: grid;
    grid-template-columns: 100px 1fr; /* Label column and field column */
    align-items: center;
    gap: 10px;
}
.cm-modal-detail-row label {
    font-weight: 600; font-size: 13px; color: #333;
    text-align: right; padding-right: 10px;
}
.cm-modal-input-wrapper {
    display: flex; align-items: center; gap: 0;
}
.cm-modal-detail-row input {
    width: 100%; padding: 8px; border: 1px solid #ddd;
    background-color: #f9f9f9; font-family: inherit; font-size: 13px;
    border-radius: 3px;
}
.cm-modal-input-wrapper input {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.cm-modal-action-icons {
    display: flex;
}
.cm-modal-action-icons button, .cm-modal-action-icons a,
.cm-copy-btn {
    width: 34px; height: 36px; display: flex;
    align-items: center; justify-content: center;
    border: 1px solid #ddd; background-color: #f1f1f1;
    cursor: pointer; color: #555;
    border-left: none;
}
.cm-modal-action-icons a:first-child, .cm-modal-action-icons button:first-child,
.cm-copy-btn {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.cm-modal-action-icons a, .cm-modal-action-icons button {
    border-radius: 0;
}
.cm-modal-action-icons a:last-child, .cm-modal-action-icons button:last-child {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.cm-copy-btn .dashicons-yes, .cm-modal-action-icons .dashicons-yes { color: green; }
.cm-view-btn:hover, .cm-download-icon:hover, .cm-copy-btn:hover { background-color: #e0e0e0; }

@media (max-width: 768px) {
    .cm-modal-content {
        flex-direction: column;
    }
    .cm-modal-image-wrapper {
        flex-basis: auto; /* Reset flex basis for stacking */
        padding-bottom: 20px;
        max-height: 40vh; /* Allow image to be a bit larger on mobile */
    }
    .cm-modal-image-wrapper img {
        max-height: 100%; /* Ensure it fits within the wrapper's new max-height */
    }
    .cm-modal-details {
        gap: 15px; /* Adjust gap between rows for mobile */
    }
    .cm-modal-detail-row {
        grid-template-columns: 1fr; /* Stack label and input */
        gap: 4px; /* Reduce gap between label and input */
    }
    .cm-modal-detail-row label {
        text-align: left;
    }
}


/* --- Fallback Form & Message Styles --- */
.cm-key-form-wrapper { max-width: 500px; margin: 4rem auto; padding: 2rem; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; text-align: center; }
.cm-key-form-wrapper h1 { font-size: 1.5em; margin-top: 0; }
.cm-key-input { width: 100%; padding: 10px; font-size: 1em; margin: 1rem 0; border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box; }
.cm-submit-button { display: inline-block; background-color: #0073aa; color: #fff; border: none; padding: 10px 20px; font-size: 1em; border-radius: 3px; cursor: pointer; transition: background-color 0.2s; }
.cm-submit-button:hover { background-color: #005a87; }
.cm-message { margin: 1.5rem auto; padding: 1rem; border: 1px solid #ddd; border-radius: 3px; background-color: #fff; max-width: 800px; text-align: center; }
.cm-message.cm-error { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }
.cm-screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .cm-media-grid {
        justify-content: center; /* Center grid items on smaller screens */
    }
    .cm-view-controls-bar { flex-direction: column; align-items: stretch; }
    .cm-sorting-form, .cm-search-form { width: 100%; }
    .cm-search-form input[type="search"] { flex-grow: 1; }
    .cm-catalog-footer { flex-direction: column; gap: 0px; }
    .cm-per-page-selector, .cm-media-count, .cm-pagination-links { flex-basis: 100%; text-align: center; }
    .cm-catalog-header h1 { font-size: 1.8em; }
    .cm-catalog-header .cm-catalog-subtitle { font-size: 1.5em; }
    .cm-public-view-container { padding: 0.5rem; }
    .cm-pagination-links .page-numbers { margin: 0px 2px 8px 2px; }
}

/* --- Styles for Change Catalog Link --- */
.cm-catalog-subtitle {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    align-items: baseline;
    gap: 0.75rem; /* Space between title and link */
}

.cm-change-catalog-link {
    font-size: 0.7em; /* Make it smaller than the subtitle */
    color: #024e71;
    text-decoration: underline;
    white-space: nowrap; /* Prevent the link text itself from wrapping */
}

.cm-change-catalog-link:hover {
    color: #0073aa;
    text-decoration: underline;
}

/* --- Fixes for responsive controls bar --- */
.cm-sort-selects-wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 10px;
}

/* --- NEW: Public View Header Styles --- */
.cm-public-view-header {
    padding: 0.3rem 1rem; /* Custom padding */
    background-color: #FFFFFF;
    border-bottom: 1px solid #CED4DA;
}

/* Override the theme's .site-branding styles for this specific header */
.cm-public-view-header .site-branding {
    font-size: 1.5rem; /* Custom font size */
}


/* This targets the logo image */
.cm-public-view-header .site-branding .site-logo {
    width: 40px; /* Custom logo width */
    height: auto;
}

.cm-microcopy{
    font-size: 0.9rem;
    font-style: italic;
}

.cm-microcopy p{
    margin: 0 0 2px 0;
}

.cm-highlight{
    color: #0073aa;
}