/* ---------- LostVault Style Directory : front-end styles ---------- */

.ld-search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-end;
	background: #f7f7f8;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 18px;
	margin-bottom: 28px;
}

.ld-field {
	display: flex;
	flex-direction: column;
	min-width: 180px;
}

.ld-field label {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 4px;
	color: #333;
}

.ld-field select,
.ld-field input[type="text"] {
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 15px;
	min-width: 180px;
}

.ld-field-wide {
	width: 100%;
	min-width: 100%;
}

.ld-search-help {
	width: 100%;
	margin: 0 0 4px;
	font-size: 14px;
	color: #555;
}

/* Category pill buttons — big, colorful, one-click (easy for anyone to use) */
.ld-pill-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ld-pill {
	position: relative;
	cursor: pointer;
}

.ld-pill input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.ld-pill span {
	display: inline-block;
	padding: 10px 18px;
	border: 2px solid #cbd5f5;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	color: #1d4ed8;
	background: #fff;
	transition: all .15s ease;
}

.ld-pill input:checked + span {
	background: #1d4ed8;
	border-color: #1d4ed8;
	color: #fff;
}

.ld-pill:hover span {
	border-color: #1d4ed8;
}

.ld-submit {
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

.ld-submit button {
	background: #1d4ed8;
	color: #fff;
	border: none;
	padding: 10px 22px;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
}

.ld-submit button:hover {
	background: #1739a6;
}

.ld-reset {
	font-size: 13px;
	color: #555;
	text-decoration: underline;
}

.ld-results-heading h3 {
	margin-bottom: 4px;
}

.ld-results-heading p {
	color: #666;
	margin-top: 0;
	font-size: 14px;
}

/* Card style, one listing per row (single column, full width) */
.ld-listing-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 12px;
}

.ld-card {
	display: flex;
	align-items: stretch;
	border: 1px solid #e2e2e2;
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: #fff;
	transition: box-shadow .15s ease, transform .15s ease;
}

.ld-card:hover {
	box-shadow: 0 4px 14px rgba(0,0,0,.08);
	transform: translateY(-2px);
}

.ld-card-thumb {
	flex-shrink: 0;
	width: 140px;
	align-self: stretch;
}

.ld-card-thumb img {
	width: 100%;
	height: 100%;
	min-height: 100%;
	object-fit: cover;
	display: block;
}

.ld-card-body {
	padding: 16px 18px;
	flex: 1;
	min-width: 0;
}

.ld-card-title {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 700;
	color: #111;
	transition: color .15s ease;
}

.ld-card:hover .ld-card-title {
	color: #1d4ed8;
	text-decoration: underline;
}

.ld-card-meta {
	font-size: 13px;
	color: #666;
	margin: 0 0 8px;
}

.ld-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	background: #eef2ff;
	color: #1d4ed8;
	padding: 3px 8px;
	border-radius: 999px;
	margin-bottom: 10px;
}

.ld-card-excerpt {
	font-size: 14px;
	color: #333;
	margin: 0;
	line-height: 1.5;
}

.ld-single-details {
	background: #f7f7f8;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 16px 18px;
	margin-bottom: 20px;
}

.ld-single-meta-list {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.ld-single-meta-list li {
	padding: 4px 0;
	font-size: 14px;
	color: #333;
}

.ld-no-results {
	padding: 20px;
	background: #fafafa;
	border: 1px dashed #ccc;
	border-radius: 8px;
	text-align: center;
	color: #666;
}

.ld-pagination {
	margin-top: 24px;
	display: flex;
	gap: 6px;
	justify-content: center;
}

.ld-pagination .page-numbers {
	padding: 6px 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	text-decoration: none;
	color: #333;
	font-size: 14px;
}

.ld-pagination .page-numbers.current {
	background: #1d4ed8;
	color: #fff;
	border-color: #1d4ed8;
}

@media (max-width: 600px) {
	.ld-search-form {
		flex-direction: column;
		align-items: stretch;
	}
	.ld-field select {
		min-width: 100%;
	}
	.ld-card {
		flex-direction: column;
	}
	.ld-card-thumb {
		width: 100%;
		height: 160px;
	}
}

/* ===== Account: register / login / submit listing / my listings ===== */

.ld-notice {
	padding: 12px 16px;
	border-radius: 6px;
	margin-bottom: 16px;
	font-size: 14px;
}

.ld-notice-success {
	background: #ecfdf3;
	border: 1px solid #a6e9c1;
	color: #14532d;
}

.ld-notice-error {
	background: #fef2f2;
	border: 1px solid #f3b4b4;
	color: #7f1d1d;
}

.ld-auth-box {
	max-width: 480px;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 24px;
}

.ld-auth-form,
.ld-submit-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ld-submit-form {
	max-width: 100%;
}

.ld-auth-form .ld-field,
.ld-submit-form .ld-field {
	display: flex;
	flex-direction: column;
	min-width: 100%;
}

.ld-auth-form label,
.ld-submit-form label {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 4px;
	color: #333;
}

.ld-auth-form input,
.ld-auth-form select,
.ld-submit-form input,
.ld-submit-form select,
.ld-submit-form textarea {
	padding: 9px 12px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 14px;
	font-family: inherit;
}

.ld-submit-form textarea {
	resize: vertical;
}

.ld-form-note {
	font-size: 13px;
	color: #666;
	font-style: italic;
	margin: 0;
}

.ld-logout-btn {
	background: #444;
	color: #fff;
	border: none;
	padding: 8px 18px;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 600;
}

.ld-my-listings {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ld-my-listing-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 12px 16px;
	background: #fff;
}

.ld-status-badge {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 999px;
}

.ld-status-pending {
	background: #fef9c3;
	color: #854d0e;
}

.ld-status-published {
	background: #dcfce7;
	color: #166534;
}

.ld-status-draft {
	background: #f1f1f1;
	color: #555;
}

/* Shared label-left/input-right row layout (used by Register + Login forms, matches reference image) */
.ld-row-form {
	gap: 10px !important;
}

.ld-row-form .ld-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ld-row-form .ld-row label {
	min-width: 130px;
	text-align: left;
	font-weight: 700;
	font-size: 13px;
	color: #222;
	flex-shrink: 0;
}

.ld-row-form .ld-row input {
	flex: 1;
	max-width: 320px;
	padding: 6px 8px;
	border: 1px solid #999;
	background: #e9e9e9;
	border-radius: 2px;
	font-size: 14px;
}

.ld-row-form .ld-optional {
	font-size: 12px;
	color: #1d4ed8;
	font-style: italic;
}

.ld-row-form .ld-row-submit {
	margin-top: 6px;
}

.ld-row-form .ld-row-submit button {
	background: #e9e9e9;
	color: #111;
	border: 1px solid #999;
	padding: 6px 20px;
	border-radius: 3px;
	font-weight: 600;
	cursor: pointer;
}

.ld-row-form .ld-row-submit button:hover {
	background: #ddd;
}

.ld-auth-box h4 {
	margin: 0 0 12px;
	font-size: 15px;
}

@media (max-width: 600px) {
	.ld-row-form .ld-row {
		flex-direction: column;
		align-items: flex-start;
	}
	.ld-row-form .ld-row label {
		min-width: auto;
	}
	.ld-row-form .ld-row input {
		max-width: 100%;
		width: 100%;
	}
}

/* Account page: static (non-editable) value display, e.g. the Poster/ID row */
.ld-static-value {
	font-size: 14px;
	color: #333;
	padding: 6px 0;
}

/* Direct logout link — usable anywhere (menus, buttons, text) */
.ld-logout-link {
	display: inline-block;
	color: #b91c1c;
	font-weight: 600;
	text-decoration: none;
	padding: 6px 14px;
	border: 1px solid #f3b4b4;
	border-radius: 6px;
	background: #fef2f2;
}

.ld-logout-link:hover {
	background: #fee2e2;
	text-decoration: underline;
}

/* Ad placement form: right-ish label column matching the reference layout */
.ld-ad-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 700px;
}

.ld-ad-form .ld-arow {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.ld-ad-form .ld-arow label {
	min-width: 220px;
	text-align: right;
	font-weight: 700;
	font-size: 13px;
	color: #222;
	flex-shrink: 0;
	line-height: 1.3;
	padding-top: 6px;
}

.ld-ad-form .ld-sub {
	font-weight: 400;
	font-style: italic;
	font-size: 11px;
	color: #666;
}

.ld-ad-form .ld-arow input[type="text"],
.ld-ad-form .ld-arow input[type="number"],
.ld-ad-form .ld-arow input[type="url"],
.ld-ad-form .ld-arow select {
	flex: 1;
	max-width: 360px;
	padding: 6px 8px;
	border: 1px solid #999;
	background: #e9e9e9;
	border-radius: 2px;
	font-size: 14px;
}

.ld-ad-form .ld-arow-textarea textarea {
	flex: 1;
	max-width: 420px;
	padding: 8px;
	border: 1px solid #999;
	background: #e9e9e9;
	border-radius: 2px;
	font-size: 14px;
	font-family: inherit;
	resize: vertical;
}

.ld-ad-form .ld-file-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ld-ad-form .ld-row-submit,
.ld-ad-form .ld-arow-submit {
	margin-top: 10px;
	padding-left: 232px;
}

.ld-ad-form .ld-arow-submit button {
	background: #e9e9e9;
	color: #111;
	border: 1px solid #999;
	padding: 6px 20px;
	border-radius: 3px;
	font-weight: 600;
	cursor: pointer;
}

.ld-ad-form .ld-arow-submit button:hover {
	background: #ddd;
}

@media (max-width: 700px) {
	.ld-ad-form .ld-arow {
		flex-direction: column;
	}
	.ld-ad-form .ld-arow label {
		min-width: auto;
		text-align: left;
		padding-top: 0;
	}
	.ld-ad-form .ld-arow input,
	.ld-ad-form .ld-arow select,
	.ld-ad-form .ld-arow-textarea textarea {
		max-width: 100%;
		width: 100%;
	}
	.ld-ad-form .ld-arow-submit {
		padding-left: 0;
	}
}