/* ============================================================================
   LastList - Utilitarian Grid Design
   ============================================================================ */

:root {
	--black: #000;
	--white: #fff;
	--gray-1: #fafafa;
	--gray-2: #eee;
	--gray-3: #ddd;
	--gray-4: #999;
	--gray-5: #666;
	--gray-6: #222;

	--link: #000;
	--link-hover: #444;

	--success: #2a2;
	--danger: #c00;

	--font-stack: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--content-width: 1400px;
	--sidebar-width: 200px;
}

/* ============================================================================
   Reset
   ============================================================================ */

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	font-size: 14px;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-stack);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--black);
	background: var(--white);
}

button {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

a {
	color: var(--link);
	text-decoration: underline;
}

a:hover {
	color: var(--link-hover);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 10px;
	font-weight: normal;
}

h1 { font-size: 18px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }

p { margin: 0 0 10px; }

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

img {
	max-width: 100%;
	height: auto;
}

/* ============================================================================
   Layout Grid
   ============================================================================ */

.container {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 15px 20px;
}

.container-fluid {
	max-width: none;
	padding: 15px 30px;
}

.grid {
	display: grid;
	gap: var(--grid-gap);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }

.two-col {
	display: grid;
	grid-template-columns: var(--sidebar-width) 1fr;
	gap: 30px;
}

@media (max-width: 700px) {
	.grid-2, .grid-3, .grid-4, .grid-5, .grid-6 {
		grid-template-columns: 1fr;
	}
	.two-col {
		grid-template-columns: 1fr;
	}
}

/* ============================================================================
   Header
   ============================================================================ */

.header {
	background: var(--white);
	border-bottom: 2px solid var(--black);
}

.header-inner {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 10px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.logo {
	font-size: 22px;
	font-weight: 700;
	color: var(--black);
	text-decoration: none;
	letter-spacing: -0.5px;
}

.logo:hover {
	color: var(--black);
	text-decoration: none;
}

.logo-region {
	font-size: 14px;
	font-weight: 400;
	color: var(--gray-5);
	margin-left: 10px;
}

.header-search {
	flex: 1;
	max-width: 400px;
	display: flex;
}

.header-search input {
	flex: 1;
	padding: 8px 12px;
	border: 2px solid var(--black);
	font-size: 14px;
	font-family: inherit;
}

.header-search input:focus {
	outline: none;
	background: var(--gray-1);
}

.header-search button {
	padding: 8px 16px;
	background: var(--black);
	color: var(--white);
	border: 2px solid var(--black);
	border-left: none;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}

.header-search button:hover {
	background: var(--gray-6);
}

.header-nav {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 13px;
}

.header-nav a {
	color: var(--black);
	text-decoration: none;
	font-weight: 500;
}

.header-nav a:hover {
	text-decoration: underline;
}

.btn-post {
	background: var(--black);
	color: var(--white) !important;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none !important;
	border: none;
}

.btn-post:hover {
	background: var(--gray-6);
	color: var(--white) !important;
}

/* ============================================================================
   Sidebar
   ============================================================================ */

/* Category Pills */
.category-pills {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--gray-2);
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.category-pills::-webkit-scrollbar {
	display: none;
}

.category-pills a {
	flex-shrink: 0;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 500;
	color: var(--black);
	text-decoration: none;
	background: var(--white);
	border: 2px solid var(--gray-3);
	transition: all 0.1s ease;
}

.category-pills a:hover {
	border-color: var(--black);
}

.category-pills a.active {
	background: var(--black);
	border-color: var(--black);
	color: var(--white) !important;
}

.pill-count {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 6px;
	font-size: 11px;
	font-weight: 600;
	background: var(--gray-2);
	color: var(--gray-5);
}

.category-pills a.active .pill-count {
	background: rgba(255,255,255,0.2);
	color: var(--white);
}

/* ============================================================================
   Region Picker
   ============================================================================ */

.region-picker {
	padding: 60px 0;
}

.region-picker h1 {
	font-size: 32px;
	font-weight: 700;
	color: var(--black);
	margin-bottom: 8px;
	letter-spacing: -0.5px;
}

.region-picker .subtitle {
	color: var(--gray-5);
	margin-bottom: 40px;
	font-size: 15px;
}

.regions-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1px;
	background: var(--black);
	border: 1px solid var(--black);
}

.region-card {
	background: var(--white);
	padding: 20px;
	text-decoration: none;
}

.region-card:hover {
	background: var(--gray-1);
}

.region-card .name {
	font-weight: 600;
	font-size: 15px;
	color: var(--black);
	display: block;
	text-decoration: none;
}

.region-card:hover .name {
	text-decoration: underline;
}

.region-card .state {
	font-size: 12px;
	color: var(--gray-5);
	margin-top: 2px;
}


/* ============================================================================
   Region Homepage - Category Grid
   ============================================================================ */

.page-header {
	margin-bottom: 25px;
	padding-bottom: 15px;
	border-bottom: 2px solid var(--black);
}

.page-title {
	font-size: 24px;
	font-weight: 700;
	margin: 0;
	letter-spacing: -0.5px;
}

.page-subtitle {
	font-size: 14px;
	color: var(--gray-5);
	margin: 8px 0 0;
}

.category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1px;
	background: var(--black);
	border: 1px solid var(--black);
}

.category-card {
	background: var(--white);
	padding: 20px;
}

.category-card h3 {
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--gray-2);
	color: var(--black);
}

.category-card ul {
	font-size: 13px;
}

.category-card li {
	padding: 4px 0;
}

.category-card a {
	color: var(--black);
	text-decoration: none;
}

.category-card a:hover {
	text-decoration: underline;
}


/* ============================================================================
   Listings
   ============================================================================ */

.listings-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	margin-bottom: 25px;
}

.listings-header-title {
	flex: 1;
}

.listings-header h1 {
	margin: 0;
}

.listings-count {
	font-size: 13px;
	color: var(--gray-5);
	margin-top: 4px;
}

.search-inline {
	display: flex;
	flex: 1;
	max-width: 400px;
}

.search-inline input {
	flex: 1;
	padding: 12px 16px;
	border: 2px solid var(--black);
	font-size: 14px;
}

.search-inline input:focus {
	outline: none;
	background: var(--gray-1);
}

.search-inline button {
	padding: 12px 24px;
	background: var(--black);
	color: var(--white);
	border: 2px solid var(--black);
	border-left: none;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

.search-inline button:hover {
	background: var(--gray-6);
}

/* Search Filters */
.search-filters {
	background: var(--gray-1);
	border: 1px solid var(--gray-3);
	padding: 12px;
	margin-bottom: 20px;
}

.search-filters-row {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

.search-filters-row:first-child {
	margin-bottom: 10px;
}

.search-filters-input {
	flex: 1;
	min-width: 200px;
	padding: 8px 12px;
	border: 1px solid var(--gray-3);
	font-size: 14px;
}

.search-filters-input:focus {
	outline: none;
	border-color: var(--black);
}

.filter-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.filter-group label {
	font-size: 12px;
	font-weight: 500;
	color: var(--gray-5);
}

.filter-range {
	display: flex;
	align-items: center;
	gap: 4px;
}

.filter-range input {
	width: 80px;
	padding: 6px 8px;
	border: 1px solid var(--gray-3);
	font-size: 13px;
}

.filter-range input:focus {
	outline: none;
	border-color: var(--black);
}

.filter-range span {
	color: var(--gray-4);
}

.filter-select {
	padding: 6px 8px;
	border: 1px solid var(--gray-3);
	font-size: 13px;
	background: var(--white);
}

.filter-select:focus {
	outline: none;
	border-color: var(--black);
}

.filter-clear {
	font-size: 12px;
	color: var(--gray-5);
}

@media (max-width: 600px) {
	.search-filters-row {
		flex-direction: column;
		align-items: stretch;
	}

	.filter-group {
		width: 100%;
		justify-content: space-between;
	}

	.filter-range input {
		flex: 1;
	}

	.filter-select {
		flex: 1;
	}
}

.date-group {
	margin-bottom: 25px;
}

.date-header {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--gray-5);
	padding: 8px 0;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--gray-2);
}

.listings-list {
	font-size: 14px;
}

.listing-row {
	display: grid;
	grid-template-columns: 100px 1fr auto;
	gap: 20px;
	padding: 15px 0;
	border-bottom: 1px solid var(--gray-2);
	align-items: center;
	text-decoration: none;
	color: inherit;
}

.listing-row:hover {
	background: var(--gray-1);
	margin: 0 -15px;
	padding-left: 15px;
	padding-right: 15px;
}

.listing-thumb {
	width: 100px;
	height: 75px;
	background: var(--gray-2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: var(--gray-4);
	overflow: hidden;
}

.listing-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.listing-content {
	min-width: 0;
}

.listing-title {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
}

.listing-title a {
	color: var(--black);
	text-decoration: none;
}

.listing-title a:hover {
	text-decoration: underline;
}

.listing-meta {
	font-size: 12px;
	color: var(--gray-5);
	margin-top: 4px;
}

.listing-meta span {
	margin-right: 15px;
}

.listing-price {
	font-weight: 700;
	color: var(--black);
	font-size: 16px;
	white-space: nowrap;
}

.listing-badge {
	display: inline-block;
	font-size: 10px;
	padding: 2px 6px;
	background: var(--gray-2);
	color: var(--gray-5);
	text-transform: uppercase;
	font-weight: 600;
}

.listing-badge.has-image {
	background: var(--black);
	color: var(--white);
}

/* Empty state */
.empty-state {
	padding: 60px 40px;
	text-align: center;
	background: var(--gray-1);
	border: 2px solid var(--black);
}

.empty-state h3 {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 10px;
}

.empty-state p {
	color: var(--gray-5);
	margin-bottom: 20px;
}

/* ============================================================================
   Listing Detail
   ============================================================================ */

.breadcrumb {
	font-size: 13px;
	color: var(--gray-5);
	margin-bottom: 25px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--gray-2);
}

.breadcrumb a {
	color: var(--black);
}

.breadcrumb span {
	margin: 0 8px;
	color: var(--gray-4);
}

.listing-detail {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 40px;
}

@media (max-width: 800px) {
	.listing-detail {
		grid-template-columns: 1fr;
	}
}

.listing-main {
	min-width: 0;
}

.listing-gallery {
	margin-bottom: 25px;
}

.listing-gallery-main {
	background: var(--black);
	border: 2px solid var(--black);
	aspect-ratio: 4/3;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gray-4);
	font-size: 14px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.listing-gallery-main img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.listing-gallery-main:hover::after {
	content: "Click to enlarge";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0.7);
	color: white;
	padding: 8px;
	font-size: 12px;
	text-align: center;
}

.listing-gallery-thumbs {
	display: flex;
	gap: 8px;
	margin-top: 8px;
	overflow-x: auto;
}

.listing-gallery-thumb {
	flex-shrink: 0;
	width: 80px;
	height: 60px;
	background: var(--gray-2);
	border: 2px solid var(--gray-3);
	cursor: pointer;
	overflow: hidden;
}

.listing-gallery-thumb:hover,
.listing-gallery-thumb.active {
	border-color: var(--black);
}

.listing-gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Lightbox */
.lightbox {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.95);
	z-index: 1000;
	align-items: center;
	justify-content: center;
}

.lightbox.active {
	display: flex;
}

.lightbox-content {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
}

.lightbox-content img {
	max-width: 90vw;
	max-height: 85vh;
	object-fit: contain;
}

.lightbox-close {
	position: absolute;
	top: -40px;
	right: 0;
	background: none;
	border: none;
	color: white;
	font-size: 32px;
	cursor: pointer;
	padding: 8px;
	line-height: 1;
}

.lightbox-close:hover {
	color: var(--gray-3);
}

.lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255,255,255,0.1);
	border: none;
	color: white;
	font-size: 24px;
	padding: 20px 16px;
	cursor: pointer;
}

.lightbox-nav:hover {
	background: rgba(255,255,255,0.2);
}

.lightbox-prev {
	left: -60px;
}

.lightbox-next {
	right: -60px;
}

.lightbox-counter {
	position: absolute;
	bottom: -30px;
	left: 50%;
	transform: translateX(-50%);
	color: var(--gray-4);
	font-size: 13px;
}

@media (max-width: 600px) {
	.lightbox-nav {
		padding: 15px 12px;
		font-size: 20px;
	}
	.lightbox-prev {
		left: 10px;
	}
	.lightbox-next {
		right: 10px;
	}
}

.listing-detail h1 {
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 15px;
	letter-spacing: -0.5px;
}

.listing-detail-meta {
	font-size: 13px;
	color: var(--gray-5);
	margin-bottom: 25px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--gray-2);
}

.listing-detail-meta span {
	margin-right: 20px;
}

.listing-detail-price {
	font-size: 28px;
	font-weight: 700;
	color: var(--black);
}

.listing-description {
	font-size: 15px;
	line-height: 1.7;
}

.listing-description p {
	margin-bottom: 15px;
}

.listing-sidebar {
	font-size: 14px;
}

.listing-card {
	background: var(--gray-1);
	border: 2px solid var(--black);
	padding: 20px;
	margin-bottom: 20px;
}

.listing-card h3 {
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 15px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--gray-3);
}

/* ============================================================================
   Buttons
   ============================================================================ */

.btn {
	display: inline-block;
	padding: 10px 20px;
	font-size: 13px;
	font-weight: 500;
	font-family: inherit;
	text-decoration: none !important;
	cursor: pointer;
	border: 2px solid;
	transition: all 0.1s ease;
}

.btn-primary {
	background: var(--black);
	color: var(--white) !important;
	border-color: var(--black);
}

.btn-primary:hover {
	background: var(--white);
	color: var(--black) !important;
}

.btn-secondary {
	background: var(--white);
	color: var(--black) !important;
	border-color: var(--black);
}

.btn-secondary:hover {
	background: var(--black);
	color: var(--white) !important;
}

.btn-danger {
	background: var(--white);
	color: var(--danger) !important;
	border-color: var(--danger);
}

.btn-danger:hover {
	background: var(--danger);
	color: var(--white) !important;
}

.btn-sm {
	padding: 6px 12px;
	font-size: 12px;
}

.btn-block {
	display: block;
	width: 100%;
	text-align: center;
}

/* Share Buttons */
.share-buttons {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid var(--gray-2);
}

.share-label {
	font-size: 12px;
	color: var(--gray-5);
}

.share-btn {
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	border: 1px solid var(--gray-3);
	background: var(--white);
	color: var(--black);
	cursor: pointer;
	transition: all 0.15s;
}

.share-btn:hover {
	background: var(--gray-1);
	border-color: var(--black);
}

.share-twitter:hover {
	background: #000;
	color: #fff;
	border-color: #000;
}

.share-facebook:hover {
	background: #1877f2;
	color: #fff;
	border-color: #1877f2;
}

.share-copy:hover {
	background: var(--black);
	color: var(--white);
}

.report-link {
	display: block;
	text-align: center;
	font-size: 12px;
	color: var(--gray-4);
	margin-top: 15px;
	text-decoration: none;
}

.report-link:hover {
	color: var(--black);
	text-decoration: underline;
}

/* ============================================================================
   Pagination
   ============================================================================ */

.pagination {
	display: flex;
	gap: 0;
	margin-top: 30px;
	font-size: 13px;
}

.pagination a,
.pagination span {
	display: inline-block;
	padding: 10px 16px;
	border: 2px solid var(--black);
	margin-left: -2px;
	background: var(--white);
	color: var(--black);
	text-decoration: none;
	font-weight: 500;
}

.pagination a:first-child {
	margin-left: 0;
}

.pagination a:hover {
	background: var(--gray-1);
}

.pagination a.active {
	background: var(--black);
	color: var(--white);
}

.pagination .ellipsis {
	border-color: transparent;
	color: var(--gray-5);
}

/* ============================================================================
   Forms
   ============================================================================ */

.form-group {
	margin-bottom: 20px;
}

.form-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
}

.form-input,
.form-textarea,
.form-select {
	width: 100%;
	padding: 12px 14px;
	border: 2px solid var(--black);
	font-size: 14px;
	font-family: inherit;
	background: var(--white);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
	outline: none;
	background: var(--gray-1);
}

.form-textarea {
	min-height: 120px;
	resize: vertical;
}

.form-hint {
	font-size: 12px;
	color: var(--gray-5);
	margin-top: 6px;
}

/* Image Editing */
.edit-images-section {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--gray-3);
}

.edit-images-section h3 {
	margin-bottom: 8px;
}

.edit-images-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 10px;
	margin-top: 10px;
}

.edit-image-item {
	position: relative;
	aspect-ratio: 1;
	border: 1px solid var(--gray-3);
	overflow: hidden;
}

.edit-image-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.edit-image-delete {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 24px;
	height: 24px;
	background: rgba(0, 0, 0, 0.7);
	color: white;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.edit-image-delete:hover {
	background: var(--danger);
}

/* ============================================================================
   Seller Card (on listing detail)
   ============================================================================ */

.seller-card {
	margin-top: 12px;
}

.seller-link {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	padding: 8px;
	margin: -8px;
	border-radius: 4px;
}

.seller-link:hover {
	background: var(--gray-1);
}

.seller-avatar {
	width: 40px;
	height: 40px;
	background: var(--black);
	color: var(--white);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 16px;
}

.seller-info {
	display: flex;
	flex-direction: column;
}

.seller-name {
	font-weight: 500;
}

.seller-meta {
	font-size: 12px;
	color: var(--gray-5);
}

/* ============================================================================
   Profile Page
   ============================================================================ */

.profile-header {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 30px 0;
	border-bottom: 1px solid var(--gray-3);
	margin-bottom: 30px;
}

.profile-avatar {
	width: 80px;
	height: 80px;
	background: var(--black);
	color: var(--white);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 32px;
}

.profile-info h1 {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 600;
}

.profile-meta {
	display: flex;
	gap: 16px;
	color: var(--gray-5);
	font-size: 14px;
}

.profile-listings {
	margin-bottom: 40px;
}

.profile-listings h2 {
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: 600;
}

.listings-grid {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--gray-3);
	border: 1px solid var(--gray-3);
}

.listings-grid .listing-row {
	background: var(--white);
}

@media (max-width: 600px) {
	.profile-header {
		flex-direction: column;
		text-align: center;
	}

	.profile-meta {
		flex-direction: column;
		gap: 4px;
	}
}

.form-error {
	font-size: 12px;
	color: var(--danger);
	margin-top: 6px;
}

.checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 2px 0 0 0;
	cursor: pointer;
}

.checkbox-label span {
	flex: 1;
}

/* ============================================================================
   Auth Pages
   ============================================================================ */

.auth-container {
	max-width: 400px;
	margin: 60px auto;
}

.auth-card {
	background: var(--white);
	border: 2px solid var(--black);
	padding: 40px;
}

.auth-card h1 {
	font-size: 24px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 25px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--gray-2);
}

.auth-footer {
	margin-top: 25px;
	padding-top: 20px;
	border-top: 1px solid var(--gray-2);
	font-size: 13px;
	text-align: center;
	color: var(--gray-5);
}

.error-message {
	background: var(--white);
	border: 2px solid var(--danger);
	color: var(--danger);
	padding: 12px 16px;
	margin-bottom: 20px;
	font-size: 13px;
	font-weight: 500;
}

/* ============================================================================
   Account Pages
   ============================================================================ */

.account-nav {
	display: flex;
	gap: 0;
	margin-bottom: 30px;
	border-bottom: 2px solid var(--black);
}

.account-nav a {
	padding: 12px 20px;
	font-size: 13px;
	font-weight: 500;
	color: var(--black);
	text-decoration: none;
	background: var(--gray-1);
	border: 2px solid var(--black);
	border-bottom: none;
	margin-right: -2px;
}

.account-nav a:hover {
	background: var(--gray-2);
}

.account-nav a.active {
	background: var(--white);
	border-bottom: 2px solid var(--white);
	margin-bottom: -2px;
	font-weight: 700;
}

.my-listings {
	border: 2px solid var(--black);
}

.my-listing {
	display: grid;
	grid-template-columns: 100px 1fr auto;
	gap: 16px;
	padding: 16px;
	border-bottom: 1px solid var(--gray-2);
	align-items: center;
}

.my-listing:last-child {
	border-bottom: none;
}

.my-listing:hover {
	background: var(--gray-1);
}

.my-listing-thumb {
	width: 100px;
	height: 75px;
	background: var(--gray-2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: var(--gray-4);
	text-decoration: none;
	overflow: hidden;
}

.my-listing-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.my-listing-info {
	min-width: 0;
}

.my-listing-info h3 {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 600;
}

.my-listing-info h3 a {
	color: var(--black);
	text-decoration: none;
}

.my-listing-info h3 a:hover {
	text-decoration: underline;
}

.my-listing-meta {
	font-size: 13px;
	color: var(--gray-5);
}

.my-listing-price {
	color: var(--black);
	font-weight: 600;
}

.my-listing-stats {
	display: flex;
	gap: 12px;
	font-size: 12px;
	color: var(--gray-4);
	margin-top: 4px;
}

.my-listing-stats span {
	display: flex;
	align-items: center;
	gap: 4px;
}

.my-listing-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

@media (max-width: 600px) {
	.my-listing {
		grid-template-columns: 80px 1fr;
		gap: 12px;
	}

	.my-listing-thumb {
		width: 80px;
		height: 60px;
	}

	.my-listing-actions {
		grid-column: 1 / -1;
		justify-content: flex-end;
	}
}

/* Messages */
.messages-list {
	border: 2px solid var(--black);
}

.message-preview {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 15px;
	padding: 15px;
	border-bottom: 1px solid var(--gray-2);
	text-decoration: none;
	color: inherit;
}

.message-preview:last-child {
	border-bottom: none;
}

.message-preview:hover {
	background: var(--gray-1);
}

.message-preview strong {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
}

.message-preview p {
	font-size: 13px;
	color: var(--gray-5);
	margin: 0;
}

.message-preview time {
	font-size: 12px;
	color: var(--gray-4);
}

.message-thread {
	border: 2px solid var(--black);
	margin-bottom: 20px;
}

.message-item {
	padding: 15px;
	border-bottom: 1px solid var(--gray-2);
}

.message-item:last-child {
	border-bottom: none;
}

.message-item.mine {
	background: var(--gray-1);
}

.message-header {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--gray-5);
	margin-bottom: 10px;
}

.message-content {
	font-size: 14px;
	line-height: 1.5;
}

.reply-form textarea {
	width: 100%;
	min-height: 100px;
	padding: 14px;
	border: 2px solid var(--black);
	margin-bottom: 15px;
	font-family: inherit;
	font-size: 14px;
}

.reply-form textarea:focus {
	outline: none;
	background: var(--gray-1);
}

/* Settings */
.settings-form {
	max-width: 400px;
}

.delete-form {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid var(--gray-3);
}

.delete-form h3 {
	color: var(--danger);
	margin-bottom: 10px;
}

.delete-form p {
	font-size: 12px;
	color: var(--gray-5);
	margin-bottom: 15px;
}

/* Favorites */
.favorites-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1px;
	background: var(--black);
	border: 2px solid var(--black);
}

.favorite-item {
	background: var(--white);
	padding: 15px;
}

.favorite-item:hover {
	background: var(--gray-1);
}

.favorite-thumb {
	aspect-ratio: 4/3;
	background: var(--gray-2);
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: var(--gray-4);
}

.favorite-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.favorite-item h3 {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 6px;
}

.favorite-item h3 a {
	color: var(--black);
	text-decoration: none;
}

.favorite-item h3 a:hover {
	text-decoration: underline;
}

.favorite-price {
	font-weight: 700;
	color: var(--black);
}

.favorite-actions {
	margin-top: 10px;
}

.favorite-actions button {
	font-size: 11px;
	padding: 4px 8px;
	background: none;
	border: 1px solid var(--gray-3);
	color: var(--gray-5);
	cursor: pointer;
}

.favorite-actions button:hover {
	background: var(--gray-1);
	border-color: var(--black);
	color: var(--black);
}


/* ============================================================================
   Admin
   ============================================================================ */

.admin-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin-bottom: 30px;
}

.stat-card {
	background: var(--white);
	border: 2px solid var(--black);
	padding: 20px;
	text-align: center;
}

.stat-card.highlight {
	background: var(--gray-1);
}

.stat-value {
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 8px;
}

.stat-label {
	font-size: 13px;
	color: var(--gray-5);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.admin-table-wrapper {
	overflow-x: auto;
	border: 2px solid var(--black);
}

.admin-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.admin-table th,
.admin-table td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var(--gray-2);
}

.admin-table th {
	background: var(--gray-1);
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.admin-table tr:last-child td {
	border-bottom: none;
}

.admin-table tr:hover td {
	background: var(--gray-1);
}

.admin-table a {
	color: var(--black);
}

.admin-table .actions {
	white-space: nowrap;
}

.admin-table .actions form {
	display: inline;
	margin-left: 8px;
}

.admin-table .actions form:first-child {
	margin-left: 0;
}

.flag-reason {
	display: inline-block;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	background: var(--gray-2);
}

.flag-spam { background: #fee; color: #c00; }
.flag-scam { background: #fee; color: #c00; }
.flag-prohibited { background: #ffe; color: #a80; }
.flag-other { background: var(--gray-2); color: var(--gray-5); }

.status-badge {
	display: inline-block;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
}

.status-active { background: #efe; color: #070; }
.status-expiring { background: #ffc; color: #960; }
.status-removed { background: #fee; color: #c00; }
.status-expired { background: var(--gray-2); color: var(--gray-5); }

.role-badge {
	display: inline-block;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
}

.role-admin { background: var(--black); color: var(--white); }
.role-user { background: var(--gray-2); color: var(--gray-5); }

/* ============================================================================
   Utilities
   ============================================================================ */

.text-muted { color: var(--gray-5); }
.text-small { font-size: 11px; }
.text-center { text-align: center; }

.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 20px; }

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* ============================================================================
   Mobile Styles
   ============================================================================ */

/* Mobile header nav - icon buttons */
.header-nav-mobile {
	display: none;
	align-items: center;
	gap: 2px;
}

.mobile-icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--black);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.mobile-icon-btn svg {
	width: 20px;
	height: 20px;
}

.mobile-icon-btn:hover,
.mobile-icon-btn:active {
	color: var(--gray-5);
}

/* Post button - matches desktop style */
.mobile-post-btn {
	background: var(--black);
	color: var(--white);
}

.mobile-post-btn:hover,
.mobile-post-btn:active {
	background: var(--gray-6);
	color: var(--white);
}

/* Mobile breakpoint */
@media (max-width: 768px) {
	/* Show mobile nav, hide desktop nav/search */
	.header-nav-mobile {
		display: flex;
	}

	.header-search,
	.header-nav {
		display: none;
	}

	/* Container padding */
	.container {
		padding: 0 16px;
	}

	/* Header adjustments */
	.header-inner {
		padding: 8px 12px;
		gap: 12px;
	}

	.logo {
		font-size: 18px;
	}

	.logo-region {
		font-size: 12px;
		margin-left: 6px;
	}

	/* Listings grid to single column */
	.listings-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	/* Listing cards */
	.listing-card-thumb {
		height: 200px;
	}

	.listing-card-title {
		font-size: 16px;
	}

	/* Category grid */
	.category-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	/* Region grid */
	.regions-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	/* Listing detail page */
	.listing-detail {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.listing-images {
		max-height: 300px;
	}

	.listing-thumbnails {
		gap: 8px;
	}

	.listing-thumb {
		width: 60px;
		height: 60px;
	}

	.listing-title {
		font-size: 22px;
	}

	.listing-price {
		font-size: 24px;
	}

	/* Contact card */
	.contact-card {
		position: static;
		margin-top: 20px;
	}

	/* My listings */
	.my-listing {
		flex-direction: column;
		gap: 12px;
	}

	.my-listing-thumb {
		width: 100%;
		height: 150px;
	}

	.my-listing-actions {
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		gap: 8px;
	}

	.my-listing-actions .btn {
		flex: 1;
		min-width: 80px;
	}

	/* Account nav */
	.account-nav {
		flex-wrap: wrap;
		gap: 8px;
	}

	.account-nav a {
		flex: 1 1 auto;
		text-align: center;
		padding: 10px 12px;
		font-size: 14px;
	}

	/* Forms */
	.form-row {
		flex-direction: column;
	}

	.form-input,
	.form-select,
	.form-textarea {
		min-height: 44px;
		font-size: 16px; /* Prevents zoom on iOS */
	}

	/* Buttons */
	.btn {
		min-height: 44px;
		padding: 12px 20px;
	}

	.btn-sm {
		min-height: 36px;
		padding: 8px 12px;
	}

	/* Filter form */
	.search-filters {
		flex-direction: column;
		gap: 12px;
	}

	.filter-group {
		flex-direction: column;
		width: 100%;
	}

	.filter-group input,
	.filter-group select {
		width: 100%;
		min-height: 44px;
	}

	/* Pagination */
	.pagination {
		flex-wrap: wrap;
		gap: 8px;
	}

	.pagination a,
	.pagination span {
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Messages */
	.messages-list {
		gap: 12px;
	}

	.message-preview {
		flex-direction: column;
		gap: 8px;
	}

	.message-thread {
		padding: 12px;
	}

	.message-item {
		padding: 12px;
	}

	.reply-form textarea {
		min-height: 100px;
	}

	/* Share buttons */
	.share-buttons {
		flex-wrap: wrap;
	}

	.share-buttons button,
	.share-buttons a {
		flex: 1;
		min-width: 100px;
	}

	/* Seller/profile card */
	.seller-card,
	.user-profile-card {
		padding: 16px;
	}

	/* Search results header */
	.search-header {
		flex-direction: column;
		gap: 12px;
		align-items: flex-start;
	}

	/* Breadcrumb */
	.breadcrumb {
		font-size: 13px;
		flex-wrap: wrap;
	}

	/* Page titles */
	h1 {
		font-size: 24px;
	}

	h2 {
		font-size: 20px;
	}

	/* Admin table scroll */
	.admin-table-wrapper {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.admin-table {
		min-width: 600px;
	}
}

/* Small mobile devices */
@media (max-width: 480px) {
	.container {
		padding: 0 12px;
	}

	.category-grid {
		grid-template-columns: 1fr;
	}

	.regions-grid {
		grid-template-columns: 1fr;
	}

	.listing-card-thumb {
		height: 180px;
	}

	.my-listing-stats {
		flex-direction: column;
		gap: 4px;
	}

	.my-listing-stats span {
		font-size: 12px;
	}

	/* Stack buttons on very small screens */
	.btn-group {
		flex-direction: column;
	}

	.btn-group .btn {
		width: 100%;
	}
}

/* ============================================================================
   Print
   ============================================================================ */

@media print {
	.header,
	.sidebar,
	.btn,
	.pagination {
		display: none;
	}

	body {
		font-size: 12pt;
	}

	.container {
		max-width: none;
		padding: 0;
	}
}