/*
Theme Name: Listora
Theme URI: https://example.com/listora
Author: Custom
Description: A classifieds/listings theme for posting, browsing, and searching classified ad listings by category and location.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: listora
*/

/* -----------------------------------------------------------------------
   Reset & base
----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

:root {
	--cp-red: #c1272d;
	--cp-red-dark: #a11f24;
	--cp-ink: #2b2b2b;
	--cp-gray: #6b6b6b;
	--cp-border: #e3e3e3;
	--cp-bg-alt: #f7f7f7;
	--cp-radius: 6px;
	--cp-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

body {
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--cp-ink);
	line-height: 1.55;
	background: #fff;
}

.container {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 20px;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: var(--cp-radius);
	border: 1px solid transparent;
	font-weight: 600;
	font-size: 14px;
}
.btn-primary { background: var(--cp-red); color: #fff; }
.btn-primary:hover { background: var(--cp-red-dark); }
.btn-outline { background: #fff; color: var(--cp-red); border-color: var(--cp-red); }
.btn-outline:hover { background: var(--cp-red); color: #fff; }
.btn-text { color: var(--cp-ink); padding: 8px 10px; }
.btn-large { padding: 13px 26px; font-size: 16px; }

.badge {
	display: inline-block;
	background: var(--cp-bg-alt);
	color: var(--cp-gray);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 3px;
}
.badge-featured { background: var(--cp-red); color: #fff; }

.verified-badge {
	color: #1d9bf0;
	font-size: 18px;
	vertical-align: middle;
	line-height: 1;
}
.listing-card__title .verified-badge { font-size: 15px; }

/* -----------------------------------------------------------------------
   Header
----------------------------------------------------------------------- */
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding: 18px 20px;
}
.site-logo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 24px;
	font-weight: 800;
	color: var(--cp-red);
}
.site-tagline { color: var(--cp-gray); font-size: 13px; margin-top: 2px; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.account-menu { position: relative; display: flex; align-items: center; gap: 10px; }
.account-link { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.account-link img { border-radius: 50%; }
.logout-link { font-size: 13px; color: var(--cp-gray); }
.moderate-link { font-size: 13px; font-weight: 700; color: var(--cp-red); }

.site-nav {
	background: var(--cp-red);
}
.site-nav .menu {
	display: flex;
	flex-wrap: wrap;
}
.site-nav .menu > li {
	position: relative;
}
.site-nav .menu > li > a {
	display: block;
	padding: 13px 16px;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
}
.site-nav .menu > li:hover > a,
.site-nav .menu > li > a:hover {
	background: var(--cp-red-dark);
}
.site-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	box-shadow: var(--cp-shadow);
	min-width: 200px;
	z-index: 20;
	border: 1px solid var(--cp-border);
}
.site-nav .menu-item-has-children:hover .sub-menu { display: block; }
.site-nav .sub-menu a { color: var(--cp-ink); padding: 10px 16px; display: block; }
.site-nav .sub-menu a:hover { background: var(--cp-bg-alt); }

/* -----------------------------------------------------------------------
   Hero + search form
----------------------------------------------------------------------- */
.hero {
	background: linear-gradient(rgba(20, 20, 20, 0.55), rgba(20, 20, 20, 0.55)),
		linear-gradient(135deg, #3a3a3a, #161616);
	color: #fff;
	padding: 72px 0;
	text-align: center;
}
.hero-title { font-size: 40px; font-weight: 800; margin-bottom: 12px; }
.hero-subtitle { font-size: 16px; color: #ddd; max-width: 640px; margin: 0 auto 32px; }

.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	background: rgba(255, 255, 255, 0.08);
	padding: 14px;
	border-radius: var(--cp-radius);
	max-width: 900px;
	margin: 0 auto;
}
.search-form .search-field {
	flex: 1 1 200px;
	padding: 12px 14px;
	border: none;
	border-radius: 4px;
	font-size: 14px;
}
.search-form .search-submit { flex: 0 0 auto; padding: 12px 26px; }
.listings-archive .search-form {
	background: var(--cp-bg-alt);
	margin: 0 0 28px;
}
.listings-archive .search-form .search-field {
	border: 1px solid var(--cp-border);
}

/* -----------------------------------------------------------------------
   Sections / grids
----------------------------------------------------------------------- */
.home-section { padding: 48px 20px; max-width: 1160px; margin: 0 auto; }
.section-title { font-size: 26px; font-weight: 800; text-align: center; }
.section-subtitle { color: var(--cp-gray); text-align: center; margin: 6px 0 28px; }

.listing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 22px;
	margin-top: 20px;
}

.listing-card {
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--cp-shadow);
	transition: box-shadow 0.15s ease;
}
.listing-card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); }
.listing-card__thumb { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--cp-bg-alt); }
.listing-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.listing-card__placeholder {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	font-size: 40px; color: #ccc;
}
.listing-card__thumb .badge-featured { position: absolute; top: 10px; left: 10px; }
.listing-card__body { padding: 14px; }
.listing-card__price { color: var(--cp-red); font-weight: 800; font-size: 15px; }
.listing-card__title { font-size: 16px; margin: 6px 0; }
.listing-card__title a:hover { color: var(--cp-red); }
.listing-card__location { font-size: 13px; color: var(--cp-gray); display: flex; align-items: center; gap: 4px; }

.category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 16px;
	margin-top: 20px;
}
.category-tile {
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius);
	padding: 22px 16px;
	text-align: center;
	background: #fff;
}
.category-tile:hover { border-color: var(--cp-red); }
.category-tile .dashicons { font-size: 28px; width: 28px; height: 28px; color: var(--cp-red); margin-bottom: 8px; }
.category-tile__name { display: block; font-weight: 700; }
.category-tile__count { display: block; font-size: 12px; color: var(--cp-gray); margin-top: 4px; }

.view-all { text-align: center; margin-top: 28px; }
.results-count { color: var(--cp-gray); font-size: 14px; }
.no-results { padding: 30px 0; color: var(--cp-gray); }

.subcategory-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.subcategory-pill {
	border: 1px solid var(--cp-border);
	border-radius: 20px;
	padding: 6px 14px;
	font-size: 13px;
}
.subcategory-pill span { color: var(--cp-gray); }

.pagination { display: flex; justify-content: center; gap: 8px; margin: 32px 0; }
.pagination .page-numbers {
	border: 1px solid var(--cp-border);
	border-radius: 4px;
	padding: 8px 13px;
	font-size: 14px;
}
.pagination .page-numbers.current { background: var(--cp-red); color: #fff; border-color: var(--cp-red); }

.breadcrumbs { font-size: 13px; color: var(--cp-gray); margin: 20px 0 10px; }
.breadcrumbs a:hover { color: var(--cp-red); }
.page-title { font-size: 28px; font-weight: 800; margin: 8px 0 4px; }
.term-description { color: var(--cp-gray); margin-bottom: 10px; }

/* -----------------------------------------------------------------------
   Single listing
----------------------------------------------------------------------- */
.single-listing__layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 36px;
	margin-top: 20px;
	align-items: start;
}
.listing-gallery__main {
	border-radius: var(--cp-radius);
	overflow: hidden;
	background: var(--cp-bg-alt);
	aspect-ratio: 4 / 3;
}
.listing-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.listing-gallery__placeholder { display: flex; align-items: center; justify-content: center; font-size: 60px; color: #ccc; }
.listing-gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.gallery-thumb { border: 2px solid transparent; border-radius: 4px; overflow: hidden; padding: 0; }
.gallery-thumb:hover { border-color: var(--cp-red); }

.single-listing__header { margin-top: 22px; }
.single-listing__header h1 { font-size: 28px; font-weight: 800; }
.single-listing__meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--cp-gray); font-size: 14px; margin-top: 8px; }
.single-listing__meta span { display: flex; align-items: center; gap: 4px; }
.single-listing__price { font-size: 26px; font-weight: 800; color: var(--cp-red); margin-top: 14px; }
.single-listing__description { margin-top: 20px; line-height: 1.7; }
.owner-actions { margin-top: 24px; }

.seller-box, .category-box {
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius);
	padding: 20px;
	margin-bottom: 20px;
}
.seller-box h2, .category-box h2 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--cp-gray); margin-bottom: 10px; }
.seller-box p { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; }
.seller-name { font-weight: 700; font-size: 16px !important; }

.btn-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #25d366;
	color: #fff;
	padding: 8px 14px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 700;
}
.btn-whatsapp:hover { background: #1eb955; }
.btn-whatsapp--locked { background: #cfcfcf; color: #767676; cursor: not-allowed; }

.masked-phone, .masked-email { color: var(--cp-gray); letter-spacing: 0.02em; }
.masked-phone .dashicons-lock, .masked-email .dashicons-lock { color: var(--cp-gray); }

.seller-contact-gate { margin-top: 14px; }
.seller-contact-gate p:first-child { margin-top: 0; }

.related-listings { margin-top: 50px; }
.related-listings h2 { font-size: 20px; font-weight: 800; margin-bottom: 6px; }

/* -----------------------------------------------------------------------
   Forms (post an ad)
----------------------------------------------------------------------- */
.page-post-ad, .page-dashboard, .page-moderation { max-width: 960px; margin: 30px auto; }
.page-post-ad h1, .page-dashboard h1, .page-moderation h1 { font-size: 28px; font-weight: 800; margin-bottom: 20px; }
.page-moderation h2 { font-size: 18px; font-weight: 800; margin: 32px 0 4px; }

.page-auth { max-width: 440px; margin: 40px auto; }
.page-auth h1 { font-size: 26px; font-weight: 800; margin-bottom: 8px; }
.page-auth > p { color: var(--cp-gray); margin-bottom: 20px; }
.auth-form { border: 1px solid var(--cp-border); border-radius: var(--cp-radius); padding: 24px; background: #fff; }
.auth-switch { text-align: center; font-size: 14px; color: var(--cp-gray); margin-top: 4px; }
.auth-switch a { color: var(--cp-red); font-weight: 600; }

.contact-info-display {
	background: var(--cp-bg-alt);
	border-radius: var(--cp-radius);
	padding: 12px 14px;
	font-size: 14px;
	margin-bottom: 12px;
}
.field-hint { font-weight: 400; color: var(--cp-gray); font-size: 12px; }

.ad-form .form-row { margin-bottom: 18px; }
.ad-form label, .ad-form legend { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; }
.ad-form input[type="text"],
.ad-form input[type="email"],
.ad-form input[type="password"],
.ad-form input[type="number"],
.ad-form input[type="file"],
.ad-form select,
.ad-form textarea {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius);
	font-size: 14px;
	font-family: inherit;
}
.ad-form textarea { resize: vertical; }
.form-row--split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
}
.ad-form fieldset { border: none; padding: 0; }
.image-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.image-preview img { width: 80px; height: 60px; object-fit: cover; border-radius: 4px; border: 1px solid var(--cp-border); }
.existing-images-note { font-size: 13px; color: var(--cp-gray); margin-top: 14px; }

.removable-image { position: relative; display: block; cursor: default; }
.removable-image__remove {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	color: var(--cp-red);
	margin-top: 4px;
}
.removable-image__remove input { margin: 0; }

.moderation-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 12px 0 20px;
	padding: 14px;
	background: var(--cp-bg-alt);
	border-radius: var(--cp-radius);
}
.moderation-filters select {
	padding: 8px 10px;
	border: 1px solid var(--cp-border);
	border-radius: 4px;
	font-size: 13px;
}
.filter-clear { font-size: 13px; color: var(--cp-gray); }

.package-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
	margin-top: 10px;
}
.package-card {
	position: relative;
	display: block;
	border: 2px solid var(--cp-border);
	border-radius: var(--cp-radius);
	padding: 16px;
	cursor: pointer;
}
.package-card input[type="radio"] { position: absolute; top: 14px; right: 14px; }
.package-card:has(input:checked) { border-color: var(--cp-red); background: #fdf5f5; }
.package-card__name { display: block; font-weight: 700; font-size: 15px; padding-right: 24px; }
.package-card__price { display: block; color: var(--cp-red); font-weight: 700; font-size: 14px; margin: 4px 0; }
.package-card__description { display: block; color: var(--cp-gray); font-size: 13px; }
.package-locked-note, .package-payment-note { font-size: 13px; color: var(--cp-gray); margin-top: 10px; }

.listora-payment-status { font-weight: 600; }
.listora-payment-status--paid { color: #1f6b34; }
.listora-payment-status--pending_review { color: #92700c; }
.listora-payment-status--none { color: var(--cp-gray); }

/* Per-category custom fields: front-end Post an Ad form */
#ad-custom-fields:empty { display: none; }

/* Per-category custom fields: single listing "Specs" list */
.listing-specs {
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius);
	padding: 4px 16px;
	margin: 18px 0;
}
.listing-specs__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--cp-border);
	font-size: 14px;
}
.listing-specs__row:last-child { border-bottom: none; }
.listing-specs__row dt { color: var(--cp-gray); }
.listing-specs__row dd { margin: 0; font-weight: 600; }

/* Per-category custom fields: admin category field-builder */
.listora-cf-rows { margin: 8px 0; }
.listora-cf-row {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-bottom: 8px;
	padding: 10px;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	background: #fff;
	max-width: 600px;
}
.listora-cf-row .listora-cf-label { flex: 0 0 200px; }
.listora-cf-row .listora-cf-options { flex: 1 1 auto; }

.notice { border-radius: var(--cp-radius); padding: 16px 18px; margin-bottom: 20px; }
.notice-info { background: #eef4fb; border: 1px solid #cfe1f5; }
.notice-error { background: #fdeeee; border: 1px solid #f3c8c8; color: #9a2020; }
.notice-success { background: #eaf7ee; border: 1px solid #c5e6cf; color: #1f6b34; }
.notice ul { margin-left: 4px; }
.notice li { list-style: disc; margin-left: 18px; }

/* -----------------------------------------------------------------------
   Dashboard
----------------------------------------------------------------------- */
.dashboard-table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 14px; }
.dashboard-table th, .dashboard-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--cp-border); }
.dashboard-table th { color: var(--cp-gray); font-size: 12px; text-transform: uppercase; }
.dashboard-actions a { margin-right: 12px; font-weight: 600; }
.dashboard-actions .delete-link { color: var(--cp-red); }
.status-badge { display: inline-block; padding: 3px 9px; border-radius: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; background: var(--cp-bg-alt); }
.status-badge.status-publish { background: #eaf7ee; color: #1f6b34; }
.status-badge.status-pending { background: #fdf6e3; color: #92700c; }

/* -----------------------------------------------------------------------
   Blog / pages / 404
----------------------------------------------------------------------- */
.blog-list, .blog-post, .page-content, .error-404 { max-width: 760px; margin: 30px auto; }
.blog-list__item { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--cp-border); }
.blog-list__item h2 { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.blog-list__thumb { display: block; margin: 12px 0; border-radius: var(--cp-radius); overflow: hidden; }
.blog-post__meta { color: var(--cp-gray); font-size: 13px; margin: 8px 0 20px; }
.blog-post__thumb { margin-bottom: 20px; border-radius: var(--cp-radius); overflow: hidden; }
.error-404 { text-align: center; padding: 60px 0; }
.error-404 h1 { font-size: 32px; margin-bottom: 12px; }
.error-404 p { color: var(--cp-gray); margin-bottom: 24px; }

/* -----------------------------------------------------------------------
   Comments
----------------------------------------------------------------------- */
.comments-area { max-width: 760px; margin: 40px auto 0; }
.comments-title { font-size: 20px; font-weight: 800; margin-bottom: 16px; }
.comment-list > li { padding: 16px 0; border-bottom: 1px solid var(--cp-border); }

/* -----------------------------------------------------------------------
   Footer
----------------------------------------------------------------------- */
.site-footer { background: #1d1d1d; color: #ccc; margin-top: 60px; }
.footer-inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 24px;
	padding: 40px 20px;
	font-size: 14px;
}
.footer-inner a:hover { color: #fff; }
.footer-menu { display: flex; flex-direction: column; gap: 8px; }
.footer-copy { align-self: end; color: #888; font-size: 13px; }

/* -----------------------------------------------------------------------
   Responsive
----------------------------------------------------------------------- */
@media (max-width: 782px) {
	.single-listing__layout { grid-template-columns: 1fr; }
	.hero-title { font-size: 28px; }
	.footer-inner { grid-template-columns: 1fr; }
	.site-header__inner { flex-direction: column; align-items: flex-start; }
}