/* USI Galleries frontend styles moved from PHP inline styles */

:root {
	/* Accent colour can be overridden by themes: choose a high-contrast default */
	--usi-accent: #005ea6;
	--usi-form-bg: transparent;
	--usi-border: rgba(0,0,0,0.12);
	--usi-input-bg: #ffffff;
	--usi-button-bg: var(--usi-accent);
	--usi-button-color: #ffffff;
	/* Notice colours (can be overridden per-gallery) */
	--usi-notice-success-bg: #d4edda;
	--usi-notice-success-border: #c3e6cb;
	--usi-notice-success-text: #155724;
	--usi-notice-pending-bg: #fff3cd;
	--usi-notice-pending-border: #ffeeba;
	--usi-notice-pending-text: #856404;
	--usi-notice-error-bg: #f8d7da;
	--usi-notice-error-border: #f5c6cb;
	--usi-notice-error-text: #721c24;
}

.usi-uploader { max-width: 100%; }
.usi-uploader .usi-uploader-label { font-size:18px; }
.usi-uploader form { padding: 14px; border: 1px solid var(--usi-border); background-color: var(--usi-form-bg); border-radius: 6px; color: inherit; }
.usi-uploader label { display: block; font-weight: 600; margin-bottom: 6px; color: inherit; }
.usi-uploader input[type="file"],
.usi-uploader input[type="text"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid rgba(0,0,0,0.12);
	border-radius: 10px;
	background: var(--usi-input-bg);
	color: inherit;
	box-sizing: border-box;
}
.usi-uploader input[type="file"] { padding: 8px 10px; }
.usi-uploader .usi-help { display: block; margin: 6px 0; opacity: 0.85; font-size: 0.9rem; color: inherit; }
.usi-uploader button[type="submit"] {
	display: inline-block;
	padding: 10px 14px;
	border-radius: 10px;
	border: 1px solid transparent;
	background-color: var(--usi-button-bg);
	cursor: pointer;
	font-weight: 600;
	margin-top: 6px;
	color: var(--usi-button-color);
}
.usi-uploader button[type="submit"]:hover { filter: brightness(0.95); }
.usi-uploader button[type="submit"]:active { transform: translateY(1px); }
.usi-upload-notice { border-radius: 10px; padding:10px; margin:10px 0; }
.usi-upload-notice--success { background: var(--usi-notice-success-bg); border: 1px solid var(--usi-notice-success-border); color: var(--usi-notice-success-text); }
.usi-upload-notice--pending { background: var(--usi-notice-pending-bg); border: 1px solid var(--usi-notice-pending-border); color: var(--usi-notice-pending-text); }
.usi-upload-notice--error { background: var(--usi-notice-error-bg); border: 1px solid var(--usi-notice-error-border); color: var(--usi-notice-error-text); }
.usi-uploader p { margin: 0 0 12px 0; }

/* USI Galleries Gallery Styles */
.usi-gallery-wrap { margin-top: 22px; }
.usi-gallery-title { margin: 0 0 10px 0; font-size: 1.25rem; color: inherit; }
.usi-gallery-empty { opacity: 0.8; }

.usi-masonry {
	column-count: var(--usi-cols, 4);
	column-gap: 14px;
}
.usi-masonry-item {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin: 0 0 14px 0;
	border-radius: 6px;
	overflow: hidden;
	background: rgba(0,0,0,0.03);
}
.usi-masonry-link { display: block; text-decoration: none; color: inherit; }
.usi-masonry-img { width: 100%; height: auto; display: block; }

.usi-pagination { margin-top: 14px; }
.usi-pagination-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.usi-pagination-item a,
.usi-pagination-item span {
	display: inline-block;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid rgba(0,0,0,0.08);
	text-decoration: none;
	color: inherit;
}
.usi-pagination-item span.current {
	background: rgba(0,0,0,0.06);
	font-weight: 600;
}

@media (max-width: 1100px) { .usi-masonry { column-count: var(--usi-cols-md, 3); } }
@media (max-width: 700px)  { .usi-masonry { column-count: 2; } }
@media (max-width: 420px)  { .usi-masonry { column-count: 2; } }

/* Lightbox styles */
.usi-lightbox-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.85);z-index:99999}
.usi-lightbox-overlay.is-open{display:flex}
.usi-lightbox-inner{position:relative;max-width:95%;max-height:95%;display:flex;align-items:center;justify-content:center}
.usi-lightbox-img{max-width:100%;max-height:100%;display:block;border-radius:6px}
.usi-lightbox-close,.usi-lightbox-prev,.usi-lightbox-next{position:absolute;top:10px;background:rgba(0,0,0,0.45);color:#fff;border:0;padding:8px 10px;border-radius:6px;cursor:pointer}
.usi-lightbox-close{right:10px;top:10px}
.usi-lightbox-prev,.usi-lightbox-next{top:50%;transform:translateY(-50%);padding:12px}
.usi-lightbox-prev{left:10px}
.usi-lightbox-next{right:10px}
.usi-lightbox-caption{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;color:#fff;opacity:0.9;font-size:0.95rem}

/* Upload progress UI */
.usi-progress { margin-top:10px; height:14px; background: rgba(0,0,0,0.06); border-radius:7px; overflow:hidden; display:none; position:relative; }
.usi-progress-bar { height:100%; background: linear-gradient(90deg,var(--usi-accent),#60a5fa); width:0%; transition: width 0.2s ease; }
.usi-progress-text { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:0.85rem; color:inherit; opacity:0.95; }
.usi-upload-result { margin-top:10px; }

/* Drag & drop area */
.usi-dropzone { margin: 8px 0; padding: 18px; border: 2px dashed rgba(0,0,0,0.12); border-radius:10px; text-align:center; background: rgba(0,0,0,0.02); color: inherit; cursor: pointer; }
.usi-dropzone .usi-dropzone-inner { font-size:0.95rem; opacity:0.95; }
.usi-dropzone.dragover { background: rgba(0,0,0,0.03); border-color: var(--usi-accent); box-shadow: 0 8px 30px rgba(0,0,0,0.12); transform: translateY(-2px); }
.usi-dropzone:focus { outline: 3px solid rgba(0,0,0,0.06); }
/* Stronger global hint when dragging anywhere over the uploader */
.usi-uploader.is-dragging { position: relative; }
.usi-uploader.is-dragging .usi-dropzone { border-color: var(--usi-accent); background: rgba(0,0,0,0.03); box-shadow: 0 10px 40px rgba(0,0,0,0.12); transform: translateY(-2px); }

/* Mobile choose button */
.usi-choose-btn { display: inline-block; margin-top: 10px; padding: 10px 14px; border-radius: 8px; border: 0; background: var(--usi-button-bg); color: var(--usi-button-color); font-weight:700; cursor: pointer; width: 33%; }
.usi-choose-btn:hover { filter: brightness(0.95); }
@media (max-width: 700px) { .usi-choose-btn { width: 100%; box-sizing: border-box; } }