/* Listings Helper - front-end modal styles. */

/* ---------- Buttons ----------
 * We use !important and `html body` specificity so themes that target the
 * bare `button` selector can't repaint our modal buttons. The visual
 * properties below (color, background, border, font, transform, etc.) are
 * the ones themes most commonly override; layout properties stay at normal
 * specificity so we can tweak them without fighting ourselves. */
html body .lh-btn {
	display: inline-block !important;
	border: 1px solid transparent !important;
	padding: 0.5em 1em !important;
	border-radius: 4px !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	font-style: normal !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	background: #f0f0f1 !important;
	background-image: none !important;
	color: #1d2327 !important;
}
html body .lh-btn:hover { background: #e0e0e1 !important; color: #1d2327 !important; }
html body .lh-btn--primary { background: #4f5f42 !important; color: #fff !important; border-color: #4f5f42 !important; }
html body .lh-btn--primary:hover { background: #3d4a33 !important; color: #fff !important; border-color: #3d4a33 !important; }
html body .lh-btn--secondary { background: #f6f7f7 !important; color: #4f5f42 !important; border-color: #4f5f42 !important; }
html body .lh-btn--secondary:hover { background: #f0f0f1 !important; color: #4f5f42 !important; }
html body .lh-btn--link { background: transparent !important; color: #4f5f42 !important; padding: 0.5em 0.5em !important; border-color: transparent !important; }
html body .lh-btn--link:hover { background: transparent !important; color: #3d4a33 !important; text-decoration: underline !important; }
html body .lh-btn--danger { background: #b32d2e !important; color: #fff !important; border-color: #b32d2e !important; }
html body .lh-btn--danger:hover { background: #8a2424 !important; color: #fff !important; border-color: #8a2424 !important; }
html body .lh-btn--danger:disabled,
html body .lh-btn--danger.is-busy { opacity: 0.6 !important; cursor: not-allowed !important; }
html body .lh-btn--success { background: #198754 !important; color: #fff !important; border-color: #198754 !important; }
html body .lh-btn--success:hover { background: #126c43 !important; color: #fff !important; border-color: #126c43 !important; }
html body .lh-btn--success:disabled,
html body .lh-btn--success.is-busy { opacity: 0.6 !important; cursor: not-allowed !important; }
html body .lh-btn--lg { padding: 0.75em 1.5em !important; font-size: 16px !important; }

/* ---------- Listings list ---------- */
.lh-listings-list .lh-empty { padding: 1em; color: #50575e; font-style: italic; }
.lh-listings { list-style: none; padding: 0; margin: 0; }
.lh-listing {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1em;
	padding: 0.75em;
	border-bottom: 1px solid #e0e0e1;
}
.lh-listing:last-child { border-bottom: 0; }
.lh-listing__thumb { flex: 0 0 64px; width: 64px; height: 64px; background: #f0f0f1; border-radius: 4px; overflow: hidden; display:flex; align-items:center; justify-content:center; }
.lh-listing__thumb img { max-width: 100%; height: auto; display: block; }
.lh-listing__thumb-link { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.lh-listing__thumb-link:hover { opacity: 0.85; }
.lh-listing__body { flex: 1 1 auto; }
.lh-listing__title { font-size: 16px; margin: 0 0 0.25em; }
.lh-listing__status { font-size: 12px; color: #50575e; margin: 0; }
.lh-listing__author { font-size: 12px; color: #50575e; margin: 0 0 0.15em; }
.lh-listing__author span { font-weight: 600; color: #1d2327; }
.lh-listing__actions { flex: 0 0 auto; display: flex; gap: 0.5em; }

/* Thumb + publication-status badge column (admin view) */
.lh-listing__media {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4em;
	width: 64px;
}
.lh-listing__media > .lh-listing__thumb { flex: 0 0 auto; }
.lh-listing__pub-status {
	flex: 0 0 100%;
	width: 100%;
	display: flex;
	justify-content: flex-start;
	margin: 0 0 0.25em;
}
html body .lh-pub-status {
	display: inline-block !important;
	padding: 0.35em 0.8em !important;
	border-radius: 999px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	border: 1px solid transparent !important;
	white-space: nowrap !important;
}
.lh-pub-status--publish { background: #e6f4ea; color: #0f5132; border-color: #0f5132; }
.lh-pub-status--draft   { background: #fdecea; color: #842029; border-color: #842029; }
.lh-pub-status--pending { background: #fff3cd; color: #664d03; border-color: #b58900; }
.lh-pub-status--future  { background: #e7f1ff; color: #084298; border-color: #084298; }
.lh-pub-status--private { background: #ececec; color: #1d2327; border-color: #1d2327; }
.lh-pub-status--missing { background: #ffe5d0; color: #7a3a00; border-color: #c2410c; }

/* Highlight drafts / pending / missing-translation rows so they're visually distinct at the top of the admin list. */
.lh-listings-list--admin .lh-listing { background: transparent; }
.lh-listings-list--admin .lh-listing[data-listing-id]:has(.lh-pub-status--pending),
.lh-listings-list--admin .lh-listing[data-listing-id]:has(.lh-pub-status--draft) {
	background: #fff8e1;
}
.lh-listings-list--admin .lh-listing[data-listing-id]:has(.lh-pub-status--missing) {
	background: #fff1e6;
}

@media ( max-width: 640px ) {
	.lh-listing--admin { flex-wrap: wrap; }
	.lh-listing--admin .lh-listing__actions { order: 3; width: 100%; }
}

.lh-add-wrap { padding: 1em 0; }

/* ---------- Modal ---------- */
.lh-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	z-index: 99999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 2em 1em;
	overflow-y: auto;
}
.lh-modal-overlay[hidden] { display: none; }

body.lh-modal-open { overflow: hidden; }

.lh-modal {
	background: #fff;
	border-radius: 6px;
	width: 100%;
	max-width: 960px;
	box-shadow: 0 24px 64px rgba(0,0,0,0.25);
	display: flex;
	flex-direction: column;
}

.lh-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1em 1.5em;
	border-bottom: 1px solid #e0e0e1;
}
.lh-modal__title { margin: 0; font-size: 18px; }
html body .lh-modal__close {
	position: relative !important;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	font-size: 0 !important;
	color: transparent !important;
	cursor: pointer !important;
	line-height: 1 !important;
	padding: 0 !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	transition: background-color 0.15s ease !important;
}
html body .lh-modal__close::before,
html body .lh-modal__close::after {
	content: '' !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: 22px !important;
	height: 2px !important;
	background-color: #1d2327 !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 1px !important;
	transform: translate(-50%, -50%) rotate(45deg) !important;
}
html body .lh-modal__close::after { transform: translate(-50%, -50%) rotate(-45deg) !important; }
html body .lh-modal__close:hover { background-color: #f0f0f1 !important; }
html body .lh-modal__close:hover::before,
html body .lh-modal__close:hover::after { background-color: #d63638 !important; }
html body .lh-modal__close:focus { outline: 2px solid #4f5f42 !important; outline-offset: 2px !important; }

.lh-modal__body {
	padding: 1.25em 1.5em;
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.lh-modal__footer {
	padding: 1em 1.5em;
	border-top: 1px solid #e0e0e1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
}
.lh-modal__buttons { display: flex; gap: 0.5em; flex: 1 1 auto; }
.lh-modal__buttons [data-lh-modal-delete] { margin-right: auto; }
.lh-modal__message { font-size: 13px; color: #50575e; }
.lh-modal__message.is-error { color: #b32d2e; }
.lh-modal__message.is-success { color: #00a32a; }

/* ---------- Fields ---------- */
.lh-field {
	flex: 1 1 100%;
	min-width: 0;
}
.lh-field--w30 { flex-basis: calc( 33.333% - 0.667em ); }
.lh-field--w33 { flex-basis: calc( 33.333% - 0.667em ); }
.lh-field--w50 { flex-basis: calc( 50% - 0.5em ); }

/* Two-column row: e.g., Features on the left, stacked number inputs on the right. */
.lh-field-row {
	flex: 1 1 100%;
	display: flex;
	gap: 1em;
	align-items: stretch;
}
.lh-field-row > .lh-field {
	flex: 1 1 50%;
	min-width: 0;
}
.lh-field-row__stack {
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	min-width: 0;
}
.lh-field-row__stack > .lh-field {
	flex: 0 0 auto;
	width: 100%;
}

.lh-field__label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25em;
	font-size: 13px;
}
.lh-field__help {
	color: #50575e;
	font-size: 12px;
	margin: 0 0 0.5em;
}

.lh-input-wrap { display: flex; align-items: stretch; }
.lh-input {
	width: 100%;
	padding: 0.5em 0.75em;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	font-size: 14px;
	background: #fff;
}
.lh-input-prepend, .lh-input-append {
	background: #f0f0f1;
	border: 1px solid #c3c4c7;
	padding: 0 0.75em;
	display: flex;
	align-items: center;
	color: #50575e;
	font-size: 13px;
}
.lh-input-prepend { border-right: 0; border-radius: 4px 0 0 4px; }
.lh-input-append { border-left: 0; border-radius: 0 4px 4px 0; }
.lh-input-wrap > .lh-input-prepend + .lh-input { border-radius: 0 4px 4px 0; }
.lh-input-wrap > .lh-input:has( + .lh-input-append ) { border-radius: 4px 0 0 4px; }
.lh-input-wrap .lh-input + .lh-input-append { border-radius: 0 4px 4px 0; }

/* Translate two-column layout */
.lh-translate-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75em;
}
.lh-translate-col { display: flex; flex-direction: column; }
.lh-translate-flag {
	font-size: 11px;
	text-transform: uppercase;
	color: #50575e;
	letter-spacing: 0.05em;
	margin-bottom: 0.25em;
}

/* Radio / checkbox groups */
.lh-radio-group, .lh-checkbox-group {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}
.lh-radio, .lh-checkbox {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 14px;
	cursor: pointer;
}

/* Image picker */
.lh-image-picker {
	border: 1px dashed #c3c4c7;
	padding: 0.75em;
	border-radius: 4px;
	display: flex;
	gap: 1em;
	align-items: flex-start;
}
.lh-image-preview { flex: 0 0 100px; min-height: 100px; background: #f6f7f7; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.lh-image-preview img { max-width: 100%; max-height: 100px; }
.lh-image-controls { display: flex; flex-direction: column; gap: 0.5em; }

/* Gallery picker */
.lh-gallery-picker {
	border: 1px dashed #c3c4c7;
	padding: 0.75em;
	border-radius: 4px;
}
.lh-gallery-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	list-style: none;
	padding: 0;
	margin: 0 0 0.75em;
}
.lh-gallery-thumb {
	position: relative;
	width: 80px;
	height: 80px;
	border-radius: 4px;
	overflow: hidden;
	background: #f0f0f1;
}
.lh-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lh-gallery-remove {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 0;
	background: rgba(0,0,0,0.6);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

/* Conditional fields default visible; JS toggles. */
.lh-field--conditional { display: block; }

/* Responsive */
@media ( max-width: 640px ) {
	.lh-field--w30, .lh-field--w33, .lh-field--w50 { flex-basis: 100%; }
	.lh-translate-cols { grid-template-columns: 1fr; }
	.lh-modal__body { padding: 1em; }
	.lh-modal__header, .lh-modal__footer { padding: 0.75em 1em; }
	.lh-field-row { flex-direction: column; }
	.lh-field-row > .lh-field,
	.lh-field-row__stack { flex-basis: auto; }
}

/* ---------- Image upload status ---------- */
.lh-image-status {
	font-size: 12px;
	color: #50575e;
	padding: 0.25em 0.5em;
	text-align: center;
}

/* ---------- Users list (admin) ---------- */
.lh-users-list .lh-empty { padding: 1em; color: #50575e; font-style: italic; }
.lh-user__avatar { background: #f0f0f1; border-radius: 50%; overflow: hidden; }
.lh-user__avatar .lh-user__avatar-img,
.lh-user__avatar img { width: 64px; height: 64px; border-radius: 50%; display: block; }
.lh-user__email { font-size: 13px; margin: 0 0 0.15em; }
.lh-user__email a { color: #4f5f42; text-decoration: none; }
.lh-user__email a:hover { text-decoration: underline; }
.lh-user__role { font-size: 12px; color: #50575e; margin: 0; text-transform: uppercase; letter-spacing: 0.04em; }

/* User modal body lays out fields the same way the profile form does. */
.lh-modal--user .lh-modal__body {
	flex-wrap: wrap;
	gap: 1em;
}
.lh-modal--user .lh-field { flex: 1 1 100%; }
.lh-modal--user .lh-field--w50 { flex-basis: calc( 50% - 0.5em ); }
.lh-modal--user .lh-required { color: #b32d2e; margin-left: 0.15em; }

@media ( max-width: 640px ) {
	.lh-modal--user .lh-field--w50 { flex-basis: 100%; }
}

/* ---------- Profile form ---------- */
.lh-profile-form {
	max-width: 720px;
	background: #fff;
	padding: 1.5em;
	border: 1px solid #e0e0e1;
	border-radius: 6px;
}
.lh-profile-form__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}
.lh-profile-form__footer {
	margin-top: 1.5em;
	padding-top: 1em;
	border-top: 1px solid #e0e0e1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1em;
	flex-wrap: wrap;
}
.lh-profile-form__message {
	flex: 1 1 auto;
	font-size: 13px;
	color: #50575e;
}
.lh-profile-form__message.is-error { color: #b32d2e; }
.lh-profile-form__message.is-success { color: #00a32a; }
.lh-profile-form .lh-required { color: #b32d2e; margin-left: 0.15em; }
.lh-profile-form .lh-field--password input { letter-spacing: 0.1em; }
.lh-profile-form .lh-not-logged-in,
.lh-not-logged-in { padding: 1em; color: #50575e; font-style: italic; }
html body .lh-profile-form .lh-btn.is-busy { opacity: 0.7 !important; cursor: progress !important; }