#admin-banner-modal {}
#admin-banner-modal h3 { font-weight: 800; font-size: 30px; }
#admin-banner-modal input {background: #f2f2f2;border: none;padding: 0 15px;height: 43px;border-radius: 10px;margin: 0 10px 0 0;font-weight: 300;color: var(--c-textcolor);}
#admin-banner-modal select {-moz-appearance: none;-webkit-appearance: none;appearance: none;border-radius: 0;background: #eeeeee !important;background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") !important;background-repeat: no-repeat !important;background-position-x: calc(100% - 7px) !important;background-position-y: 50% !important;border-radius: 10px;border: none;padding: 0 15px;height: 43px;font-weight: 300;}

.image-placeholder-container {margin: 20px 0 0 0;}
.image-placeholder-container .image-category-group { margin-bottom: 24px; }
.image-placeholder-container .image-category-group h4 {margin-bottom: 9px;font-size: 19px;font-weight: 800;border-bottom: none;padding-bottom: 0;display: flex;align-items: center;}
.image-placeholder-container .image-category-group h4::after {content:"";height: 6px;background: #f2f2f2;flex: 1;margin: 0 0 0 20px;}
.image-placeholder-container .image-group-row {display: flex;flex-wrap: wrap;gap: 12px;align-items: flex-start;}
.image-placeholder-container .image-group-row .image-placeholder {max-width: 25%;flex: 0 1 calc(25% - 9px);/* aspect-ratio: 16 / 9; *//* background-color: #f2f2f2; */border-radius: 10px;border: 2px solid #f2f2f2;overflow: hidden;position: relative;display: flex;flex-direction: column;/* justify-content: center; */align-items: center;transition: box-shadow 0.3s ease;/* flex: 1; */}
.image-placeholder img {/* width: 100%; *//* height: 100%; */object-fit: cover;opacity: 0;transition: opacity 0.4s ease;}
.image-placeholder:not(.loading) img { opacity: 1; }
.image-placeholder.loading { animation: pulse-gray 1.2s ease-in-out infinite; }
.image-placeholder.loading.active { animation: pulse-blue 1.2s ease-in-out infinite; }

@keyframes pulse-gray {
    0%, 100% { box-shadow: 0 0 0 rgba(160, 160, 160, 0.2); }
    50% { box-shadow: 0 0 10px rgba(160, 160, 160, 0.6); }
}

@keyframes pulse-blue {
    0%, 100% { box-shadow: 0 0 0 rgba(0, 123, 255, 0.2); }
    50% { box-shadow: 0 0 12px rgba(0, 123, 255, 0.9); }
}

.image-meta {padding: 10px;background: white;width: 100%;box-sizing: border-box;text-align: center;border-top: 1px solid #eee;font-size: 0.9em;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;}
.image-name {font-weight: 500;margin-bottom: 2px;flex: 0 1 100%;}
.image-meta a, .image-meta button {font-size: 12px;color: var(--c-main);text-decoration: none;margin: 0 7px;border: none;background: none;padding: 0;}
.image-meta a:hover, .image-meta button:hover {color:var(--c-textcolor);}

.image-error { color: red; font-size: 0.9em; margin-top: 6px; }

.image-tools {margin-bottom: 16px;padding: 0;display: flex;flex-wrap: wrap;}
.image-tools .filters {display: flex;flex-wrap: wrap;gap: 17px;align-items: center;width: 100%;flex: 0 1 100%;}
.image-tools .filters .filter-item {flex: none;}
.image-tools .filters .filter-item input {display:none}
.image-tools .filters .filter-item label { position: relative; padding: 0 0 0 27px; white-space: nowrap; }
.image-tools .filters .filter-item label::before {content:"";position: absolute;left: 0;top: 0;background: #eee;width: 20px;height: 20px;border-radius: 5px;}
.image-tools .filters .filter-item input:checked + label::before {content:"";background: var(--c-main);}
.image-tools .filters .filter-item input:checked + label::after {content:"\f00c";position: absolute;left: 0;top: 0;width: 20px;height: 20px;text-align: center;line-height: 20px;color: #fff;font-family: 'Font Awesome 6 pro';font-size: 12px;font-weight: 600;}
.image-tools .filters .btn { margin: 0 0 0 auto; }
.banner-search { margin: 0 0 0 auto; display: inline-flex; align-items: center; }
.banner-search input {margin: 0 !important;}
.image-tools .search button {}


.image-tools select,
.image-tools input[type="text"] {min-width: 200px;}

.image-tools + .nav { display: flex; margin: 40px auto 0 0; }

.banners {max-width: 1200px;margin: 0 auto;display: grid;grid-template-columns: repeat(4,1fr);gap: 20px;}
.banners .item {}
.banners .item iframe { width: 100%; }