:root {
    --primary: #2563eb;
    --text: #1f2937;
    --muted: #6b7280;
    --border: #e5e7eb;
    --bg: #f9fafb;
    --success: #16a34a;
    --error: #dc2626;
    --brand-purple: #4b0a6b;
    --brand-purple-dark: #35084d;
}

* { box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text);
    background: var(--bg);
    margin: 0;
}

.site-header { background: #fff; border-bottom: 1px solid var(--border); }
.header-top {
    display: flex; align-items: center; gap: 1.25rem;
    padding: 0.9rem 2rem; max-width: 1400px; margin: 0 auto;
}
.site-header .logo {
    font-weight: 800; text-decoration: none; color: var(--brand-purple);
    font-size: 1.3rem; display: flex; align-items: center; gap: 0.3rem; white-space: nowrap;
}
.logo-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot-1 { background: #f97316; }
.dot-2 { background: #22c55e; }
.dot-3 { background: #ef4444; }

.search-bar {
    flex: 1; display: flex; align-items: center; border: 1px solid var(--border);
    border-radius: 8px; overflow: hidden; max-width: 640px; background: #fff;
}
.search-bar .search-icon { padding: 0 0.6rem; color: var(--muted); font-size: 0.9rem; }
.search-bar input[type="text"] { flex: 1; border: none; padding: 0.65rem 0.4rem; outline: none; font-size: 0.95rem; }
.search-divider { width: 1px; align-self: stretch; background: var(--border); margin: 0.4rem 0; }
.search-category-select { border: none; background: none; padding: 0.65rem 0.6rem; font-size: 0.9rem; color: var(--text); max-width: 140px; outline: none; }
.search-bar button { border-radius: 0; padding: 0.65rem 1.3rem; background: var(--brand-purple); }
.search-bar button:hover { background: var(--brand-purple-dark); }

.location-pill { white-space: nowrap; font-size: 0.9rem; color: var(--text); display: flex; align-items: center; gap: 0.3rem; }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 0.8rem; white-space: nowrap; }
.header-link { text-decoration: none; color: var(--text); font-size: 0.92rem; position: relative; }
.header-link-sep { color: var(--muted); font-size: 0.9rem; }
.btn-post {
    background: var(--brand-purple); color: #fff; text-decoration: none;
    padding: 0.55rem 1.4rem; border-radius: 6px; font-weight: 600; font-size: 0.92rem;
}
.btn-post:hover { background: var(--brand-purple-dark); }

.category-nav {
    display: flex; gap: 1.6rem; padding: 0.7rem 2rem;
    border-top: 1px solid var(--border); max-width: 1400px; margin: 0 auto;
}
.category-nav a { text-decoration: none; color: var(--text); font-size: 0.92rem; font-weight: 500; }
.category-nav a:hover { color: var(--brand-purple); }

.badge { background: var(--error); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 0.7rem; margin-left: 3px; }

.site-main { max-width: 1400px; margin: 0 auto; padding: 2rem; }

.homepage .tagline { font-size: 1.4rem; margin-bottom: 1.5rem; color: var(--text); }
.listing-section { margin-bottom: 2.5rem; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.8rem; }
.section-heading h2 { font-size: 1.1rem; margin: 0; }
.see-all { color: var(--brand-purple); text-decoration: none; font-size: 0.9rem; }
.empty-state { color: var(--muted); grid-column: 1 / -1; }

.alert { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
.alert-error { background: #fee2e2; color: var(--error); }
.alert-success { background: #dcfce7; color: var(--success); }

.auth-form { max-width: 480px; margin: 0 auto; background: #fff; padding: 2rem; border-radius: 8px; border: 1px solid var(--border); }
.post-ad-form { max-width: 960px; margin: 0 auto; background: #fff; padding: 2.5rem; border-radius: 8px; border: 1px solid var(--border); }
.auth-form label, .post-ad-form label { display: block; margin-bottom: 1rem; font-size: 0.9rem; color: var(--muted); }
.auth-form input, .post-ad-form input, .post-ad-form select, .post-ad-form textarea {
    display: block; width: 100%; padding: 0.6rem; margin-top: 0.3rem; border: 1px solid var(--border); border-radius: 6px;
}
button, .btn {
    background: var(--primary); color: #fff; border: none; padding: 0.6rem 1.2rem;
    border-radius: 6px; cursor: pointer; text-decoration: none; display: inline-block; font-size: 0.95rem;
}

.listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.1rem; }
.gallery-grid { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }

.listing-card {
    background: #fff; border: 1px solid var(--border); border-radius: 8px;
    overflow: hidden; text-decoration: none; color: var(--text);
    display: flex; flex-direction: column; transition: box-shadow 0.15s;
}
.listing-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.listing-thumb { aspect-ratio: 4 / 3; background: #f1f5f9; overflow: hidden; }
.listing-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listing-thumb-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: 0.8rem; background: #f1f5f9;
}
.listing-card-body { padding: 0.75rem 0.9rem 0.9rem; }
.listing-card-body h3 { font-size: 0.92rem; font-weight: 500; margin: 0 0 0.3rem; line-height: 1.3; }
.listing-card .location { color: var(--muted); font-size: 0.8rem; margin: 0 0 0.4rem; }
.listing-card .price { color: var(--text); font-weight: 700; margin: 0; font-size: 0.92rem; }

.category-pill { background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 0.4rem 1rem; text-decoration: none; color: var(--text); margin-right: 0.5rem; }

.pagination { margin-top: 1.5rem; display: flex; gap: 0.4rem; }
.pagination a { padding: 0.4rem 0.8rem; border: 1px solid var(--border); border-radius: 4px; text-decoration: none; color: var(--text); }
.pagination a.active { background: var(--primary); color: #fff; }

.breadcrumb { max-width: 1400px; margin: 0.5rem auto 0; padding: 0 2rem; font-size: 0.85rem; color: var(--muted); display: flex; gap: 0.4rem; align-items: center; }
.breadcrumb a { color: var(--brand-purple); text-decoration: none; }
.breadcrumb-current { color: var(--muted); }

.product-layout { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; max-width: 1400px; margin: 1.5rem auto 0; padding: 0 2rem 2rem; align-items: start; }

.product-gallery { display: grid; grid-template-columns: 1fr 130px; gap: 0.6rem; margin-bottom: 1.5rem; }
.gallery-main { aspect-ratio: 4/3; background: #f1f5f9; border-radius: 8px; overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-empty { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.gallery-thumbs { display: flex; flex-direction: column; gap: 0.6rem; }
.gallery-thumb { position: relative; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; cursor: pointer; background: #f1f5f9; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,0.45); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem;
}

.product-title { font-size: 1.4rem; margin: 0 0 0.4rem; }
.product-price { font-size: 1.7rem; font-weight: 700; margin: 0 0 0.3rem; }
.product-posted { color: var(--muted); font-size: 0.85rem; margin: 0 0 1rem; }

.product-actions { display: flex; gap: 0.6rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--border); margin-bottom: 1.2rem; }
.btn-outline {
    background: #fff; border: 1px solid var(--border); border-radius: 6px;
    padding: 0.45rem 1rem; font-size: 0.9rem; cursor: pointer; color: var(--text);
}
.btn-outline.saved { color: var(--error); border-color: var(--error); }

.product-specs { display: flex; gap: 2.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.spec-item { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.88rem; }
.spec-icon { font-size: 1.1rem; }

.product-description { line-height: 1.6; color: var(--text); }

.seller-card { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 1.2rem; }
.seller-header { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; }
.seller-avatar {
    width: 40px; height: 40px; border-radius: 50%; background: #dbeafe; color: #1e3a8a;
    display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.seller-location { color: var(--muted); font-size: 0.85rem; margin: 0 0 1rem; }
.btn-send-message {
    display: block; text-align: center; background: var(--brand-purple); color: #fff;
    text-decoration: none; padding: 0.65rem; border-radius: 6px; font-weight: 600; margin-bottom: 0.8rem;
}
.btn-send-message:hover { background: var(--brand-purple-dark); }
.btn-send-message.disabled { background: var(--muted); pointer-events: none; }
.seller-disclaimer { font-size: 0.72rem; color: var(--muted); line-height: 1.4; margin: 0; }

.messages-page { display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; }
.inbox-list { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 1rem; }
.inbox-list a { display: block; padding: 0.5rem 0; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); }
.thread-view { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 1rem; display: flex; flex-direction: column; min-height: 400px; }
#thread-messages { flex: 1; overflow-y: auto; margin-bottom: 1rem; }
.message { max-width: 70%; padding: 0.6rem 0.9rem; border-radius: 10px; margin-bottom: 0.5rem; }
.message.mine { background: var(--primary); color: #fff; margin-left: auto; }
.message.theirs { background: #f1f5f9; }
.message time { display: block; font-size: 0.7rem; opacity: 0.7; margin-top: 0.2rem; }
#message-form { display: flex; gap: 0.5rem; }
#message-form textarea { flex: 1; padding: 0.5rem; border-radius: 6px; border: 1px solid var(--border); resize: none; }

.listings-table { width: 100%; border-collapse: collapse; background: #fff; }
.listings-table th, .listings-table td { text-align: left; padding: 0.6rem; border-bottom: 1px solid var(--border); }
.status { padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; }
.status-pending { background: #fef3c7; }
.status-approved { background: #dcfce7; }
.status-rejected { background: #fee2e2; }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.stat-card { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; text-decoration: none; color: var(--text); text-align: center; }
.stat-card strong { font-size: 1.8rem; color: var(--primary); }

.moderation-card { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }

/* --- Location fields (post-ad form) --- */
.location-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* --- Drag & drop image uploader --- */
.image-dropzone {
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    background: #fafafa;
    transition: border-color 0.15s, background 0.15s;
    margin-bottom: 0.5rem;
}
.image-dropzone:hover { border-color: var(--brand-purple); }
.image-dropzone.dropzone-active { border-color: var(--brand-purple); background: #f5edfb; }
.image-dropzone.dropzone-full { opacity: 0.6; cursor: not-allowed; }
.dropzone-icon { font-size: 1.8rem; margin-bottom: 0.4rem; }
.dropzone-text { margin: 0 0 0.2rem; color: var(--text); font-size: 0.9rem; }
.dropzone-text strong { color: var(--brand-purple); }
.dropzone-hint { margin: 0; color: var(--muted); font-size: 0.78rem; }

.image-count-label { font-size: 0.8rem; color: var(--muted); margin: 0 0 0.8rem; }
.image-upload-notice { color: var(--error); font-size: 0.82rem; margin: -0.3rem 0 0.8rem; }

.image-preview-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 0.6rem;
    margin-bottom: 1.2rem;
}
.image-preview-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.image-preview-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured-tag {
    position: absolute; bottom: 4px; left: 4px;
    background: var(--brand-purple); color: #fff; font-size: 0.65rem;
    padding: 1px 6px; border-radius: 4px; font-weight: 600;
}
.remove-image-btn {
    position: absolute; top: 3px; right: 3px;
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(0,0,0,0.6); color: #fff; border: none;
    cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 0;
}
.remove-image-btn:hover { background: rgba(0,0,0,0.85); }

.search-filters {
    display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
    background: #fff; border: 1px solid var(--border); border-radius: 8px;
    padding: 1rem; margin-bottom: 1rem;
}
.search-filters input, .search-filters select {
    padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem;
}
.search-filters input[type="text"] { flex: 1; min-width: 180px; }

.admin-location-forms { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0 1.5rem; }
.inline-form { display: flex; gap: 0.5rem; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 0.8rem; align-items: center; }
.inline-form input, .inline-form select { padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem; }

.province-block { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.province-header { display: flex; justify-content: space-between; align-items: center; }
.province-header h3 { margin: 0; font-size: 1rem; }
.city-list { list-style: none; padding: 0; margin: 0.6rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.city-list li {
    background: #f1f5f9; border-radius: 999px; padding: 0.3rem 0.4rem 0.3rem 0.8rem;
    font-size: 0.85rem; display: flex; align-items: center; gap: 0.4rem;
}
.btn-danger-small {
    background: none; border: none; color: var(--error); cursor: pointer;
    font-size: 0.9rem; padding: 0 4px; line-height: 1;
}
.category-tree { list-style: none; padding-left: 0; }
.category-tree ul { list-style: none; padding-left: 1.2rem; }

/* --- View toggle (grid/list) --- */
.homepage-top-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.homepage-top-row .tagline { margin: 0; }
.view-toggle { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.view-toggle-btn {
    background: #fff; border: none; padding: 0.45rem 0.6rem; cursor: pointer;
    color: var(--muted); display: flex; align-items: center;
}
.view-toggle-btn + .view-toggle-btn { border-left: 1px solid var(--border); }
.view-toggle-btn.active { background: var(--brand-purple); color: #fff; }

/* List view layout override */
.listing-grid.list-view { grid-template-columns: 1fr; gap: 0.7rem; }
.listing-grid.list-view .listing-card { flex-direction: row; }
.listing-grid.list-view .listing-thumb { width: 160px; flex-shrink: 0; aspect-ratio: 4/3; }
.listing-grid.list-view .listing-card-body { flex: 1; padding: 0.8rem 1rem; }
.listing-grid.list-view .listing-card-body h3 { font-size: 1rem; }

/* --- Lightbox / gallery modal --- */
.gallery-clickable { cursor: zoom-in; }

.lightbox-overlay {
    display: none;
    position: fixed; inset: 0; background: rgba(0,0,0,0.9);
    z-index: 1000; align-items: center; justify-content: center;
}
.lightbox-overlay.open { display: flex; }
.lightbox-image { max-width: 85vw; max-height: 85vh; object-fit: contain; border-radius: 4px; }
.lightbox-close {
    position: absolute; top: 1.2rem; right: 1.5rem; background: none; border: none;
    color: #fff; font-size: 2.2rem; cursor: pointer; line-height: 1; z-index: 1001;
}
.lightbox-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.12); border: none; color: #fff;
    font-size: 1.4rem; width: 48px; height: 48px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.lightbox-arrow:hover { background: rgba(255,255,255,0.25); }
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }
.lightbox-counter {
    position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
    color: #fff; font-size: 0.85rem; background: rgba(0,0,0,0.5); padding: 0.3rem 0.8rem; border-radius: 999px;
}

/* --- Hover zoom effect (site-wide, any image inside a clipped container) --- */
.listing-thumb, .gallery-main, .gallery-thumb, .lightbox-image-wrap {
    overflow: hidden;
}
.listing-thumb img,
.gallery-main img,
.gallery-thumb img {
    transition: transform 0.35s ease;
}
.listing-thumb:hover img,
.gallery-main:hover img,
.gallery-thumb:hover img {
    transform: scale(1.08);
}

/* --- Seller phone reveal --- */
.seller-phone {
    display: flex; align-items: center; gap: 0.5rem;
    background: #f8fafc; border: 1px solid var(--border); border-radius: 6px;
    padding: 0.6rem 0.8rem; margin-bottom: 0.8rem; font-size: 0.9rem;
}
.seller-phone .phone-icon { font-size: 1rem; }
#seller-phone-value { font-weight: 600; letter-spacing: 0.5px; flex: 1; }
.btn-show-number {
    background: var(--brand-purple); color: #fff; border: none;
    padding: 0.35rem 0.8rem; border-radius: 6px; font-size: 0.8rem; cursor: pointer; white-space: nowrap;
}
.btn-show-number:hover { background: var(--brand-purple-dark); }
.btn-show-number:disabled { opacity: 0.6; cursor: default; }

/* --- Listed By section --- */
.listed-by-section { margin-top: 1.5rem; }
.listed-by-row { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; }
.listed-by-avatar {
    width: 48px; height: 48px; border-radius: 50%; background: #ede9fe; color: var(--brand-purple);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; flex-shrink: 0;
}
.listed-by-role { margin: 0; color: var(--muted); font-size: 0.82rem; }
.listed-by-links { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-bottom: 1rem; }
.listed-by-link-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; }
.listed-by-link-item a { color: var(--brand-purple); text-decoration: none; }
.listed-by-link-item a:hover { text-decoration: underline; }

.btn-report {
    display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem;
}

/* --- Similar listings (horizontal scroller) --- */
.similar-listings-section { max-width: 1400px; margin: 2rem auto 0; padding: 0 2rem 2rem; }
.similar-listings-section h2 { margin-bottom: 1rem; }
.similar-listings-scroller {
    display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem;
    scroll-snap-type: x proximity;
}
.similar-listings-scroller .listing-card {
    flex: 0 0 220px; scroll-snap-align: start;
}
.similar-listings-scroller::-webkit-scrollbar { height: 8px; }
.similar-listings-scroller::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* --- Generic modal (used by Report Listing) --- */
.modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 1000; align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
    background: #fff; border-radius: 8px; padding: 1.5rem; width: 100%; max-width: 420px;
    position: relative;
}
.modal-box h3 { margin-top: 0; }
.modal-box label { display: block; font-size: 0.88rem; color: var(--muted); margin-bottom: 1rem; }
.modal-box textarea {
    display: block; width: 100%; margin-top: 0.4rem; padding: 0.6rem;
    border: 1px solid var(--border); border-radius: 6px; resize: vertical; font-family: inherit;
}
.modal-close {
    position: absolute; top: 0.8rem; right: 1rem; background: none; border: none;
    font-size: 1.4rem; cursor: pointer; color: var(--muted);
}

/* --- Edit listing page --- */
.edit-listing-link { color: var(--brand-purple); text-decoration: none; font-weight: 600; }
.edit-listing-link:hover { text-decoration: underline; }

.existing-image { position: relative; }
.remove-existing-checkbox {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.65); color: #fff; font-size: 0.7rem;
    display: flex; align-items: center; justify-content: center; gap: 0.3rem;
    padding: 3px 0; cursor: pointer;
}
.image-preview-item.marked-for-delete { opacity: 0.4; }
.image-preview-item.marked-for-delete img { filter: grayscale(1); }

/* --- Dashboard row action icons --- */
.row-actions { display: flex; gap: 0.5rem; align-items: center; }
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border);
    background: #fff; cursor: pointer; text-decoration: none; padding: 0;
}
.icon-btn-edit { color: var(--brand-purple); }
.icon-btn-edit:hover { background: #f5edfb; border-color: var(--brand-purple); }
.icon-btn-delete { color: var(--error); }
.icon-btn-delete:hover { background: #fee2e2; border-color: var(--error); }

/* --- Featured Ads carousel (homepage) --- */
.carousel-wrapper { position: relative; display: flex; align-items: center; }
.carousel-track {
    display: flex; gap: 1rem; overflow-x: auto; scroll-behavior: smooth;
    scroll-snap-type: x mandatory; padding: 0.2rem 0.2rem 0.6rem;
    scrollbar-width: none; /* Firefox */
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide { flex: 0 0 220px; scroll-snap-align: start; }
.carousel-arrow {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--border); background: #fff; color: var(--text);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 1rem; box-shadow: 0 2px 6px rgba(0,0,0,0.08); z-index: 2;
}
.carousel-arrow:hover { background: var(--brand-purple); color: #fff; border-color: var(--brand-purple); }
.carousel-arrow.at-edge { opacity: 0.35; pointer-events: none; }
.carousel-prev { margin-right: -8px; }
.carousel-next { margin-left: -8px; }

/* --- Profile page --- */
.profile-page { max-width: 1000px; margin: 0 auto; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1.2rem; }
.profile-content-card { grid-column: 1 / -1; }
.profile-card {
    background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 1.3rem;
}
.profile-card h2 { margin-top: 0; font-size: 1.05rem; }
.profile-card label { display: block; margin-bottom: 1rem; font-size: 0.88rem; color: var(--muted); }
.profile-card input {
    display: block; width: 100%; padding: 0.55rem; margin-top: 0.3rem;
    border: 1px solid var(--border); border-radius: 6px;
}
.profile-card input:disabled { background: #f3f4f6; color: var(--muted); }
.profile-content-summary { font-size: 0.95rem; font-weight: 600; }
.profile-content-actions { display: flex; gap: 0.6rem; margin-top: 0.8rem; }

.dashboard-thumb-cell { width: 60px; }
.dashboard-thumb {
    width: 56px; height: 42px; object-fit: cover; border-radius: 4px; display: block;
}
.dashboard-thumb-placeholder {
    background: #f1f5f9; color: var(--muted); font-size: 0.6rem;
    display: flex; align-items: center; justify-content: center; text-align: center;
}

.inline-status-form select { padding: 0.3rem 0.4rem; border-radius: 6px; border: 1px solid var(--border); font-size: 0.82rem; }
.featured-toggle-btn {
    background: #fff; border: 1px solid var(--border); border-radius: 6px;
    padding: 0.3rem 0.6rem; font-size: 0.8rem; cursor: pointer; white-space: nowrap;
}
.featured-toggle-btn.active { background: #fef3c7; border-color: #f59e0b; color: #92400e; }

/* --- Popular tags --- */
.popular-tags-section { margin-bottom: 2.5rem; }
.popular-tags-section h2 { font-size: 1.1rem; margin-bottom: 0.8rem; }
.popular-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.popular-tag {
    background: #fff; border: 1px solid var(--border); border-radius: 6px;
    padding: 0.6rem 1.2rem; text-decoration: none; color: var(--text); font-size: 0.88rem;
}
.popular-tag:hover { border-color: var(--brand-purple); color: var(--brand-purple); }

/* --- Category showcase (tiles + popular listings per category) --- */
.category-showcase-section { margin-bottom: 2.5rem; }
.category-tile-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin-bottom: 1.2rem;
}
@media (max-width: 900px) { .category-tile-grid { grid-template-columns: repeat(2, 1fr); } }
.category-tile {
    aspect-ratio: 16/9; border-radius: 8px; display: flex; align-items: center;
    justify-content: center; text-decoration: none; position: relative; overflow: hidden;
}
.category-tile-bg {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    transition: transform 0.4s ease;
}
.category-tile:hover .category-tile-bg { transform: scale(1.12); }
.category-tile-label {
    position: relative; z-index: 1; color: #fff; font-weight: 700; font-size: 1.15rem;
    background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(2px);
    padding: 0.5rem 1rem; border-radius: 6px; text-align: center;
}
.subsection-heading { font-size: 0.95rem; color: var(--muted); margin-bottom: 0.6rem; }

/* --- Membership CTA --- */
.membership-cta {
    background: var(--brand-purple); color: #fff; text-align: center;
    padding: 2.5rem 1.5rem; border-radius: 8px; margin: 2rem 0;
}
.membership-cta h2 { margin: 0 0 0.5rem; }
.membership-cta p { margin: 0 0 1.2rem; opacity: 0.9; }
.btn-cta {
    background: #fff; color: var(--brand-purple); text-decoration: none; font-weight: 700;
    padding: 0.7rem 1.8rem; border-radius: 6px; display: inline-block;
}

/* --- Footer --- */
.site-footer { background: #2c2c3a; color: #cbd5e1; margin-top: 3rem; padding: 2.5rem 2rem 1.5rem; }
.footer-columns {
    max-width: 1400px; margin: 0 auto; display: grid;
    grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-bottom: 2rem;
}
.footer-col h4 { color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.8rem; }
.footer-col a { display: block; color: #94a3b8; text-decoration: none; font-size: 0.88rem; margin-bottom: 0.5rem; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
    max-width: 1400px; margin: 0 auto; border-top: 1px solid #3f3f4f;
    padding-top: 1.2rem; text-align: center; font-size: 0.8rem; color: #94a3b8;
}

/* --- Account dropdown --- */
.account-dropdown { position: relative; }
.account-dropdown-trigger {
    display: flex; align-items: center; gap: 0.5rem; background: none; border: none;
    cursor: pointer; font-size: 0.92rem; color: var(--text); padding: 0.3rem 0.4rem; border-radius: 6px;
}
.account-dropdown-trigger:hover { background: #f3f4f6; }
.account-avatar-sm {
    width: 26px; height: 26px; border-radius: 50%; background: var(--brand-purple); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; flex-shrink: 0;
}
.account-dropdown-menu {
    display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px;
    background: #fff; border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1); padding: 0.4rem; z-index: 50;
}
.account-dropdown.open .account-dropdown-menu { display: block; }
.account-dropdown-menu a {
    display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.7rem; border-radius: 6px;
    text-decoration: none; color: var(--text); font-size: 0.88rem;
}
.account-dropdown-menu a:hover { background: #f5edfb; color: var(--brand-purple); }
.account-dropdown-divider { height: 1px; background: var(--border); margin: 0.3rem 0.2rem; }

/* --- Location dropdown (header) --- */
.location-dropdown { position: relative; }
.location-pill {
    white-space: nowrap; font-size: 0.9rem; color: var(--text); display: flex;
    align-items: center; gap: 0.4rem; background: none; border: none; cursor: pointer; padding: 0.3rem 0.4rem; border-radius: 6px;
}
.location-pill:hover { background: #f3f4f6; }
.location-dropdown-panel {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; width: 260px;
    background: #fff; border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1); padding: 1rem; z-index: 50;
}
.location-dropdown.open .location-dropdown-panel { display: block; }
.location-dropdown-panel label { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 0.8rem; }
.location-dropdown-panel select {
    display: block; width: 100%; padding: 0.45rem; margin-top: 0.3rem;
    border: 1px solid var(--border); border-radius: 6px; font-size: 0.88rem;
}
.location-dropdown-actions { display: flex; justify-content: space-between; gap: 0.6rem; margin-top: 0.4rem; }

/* --- Admin: editable category rows --- */
.category-manage-list { margin-top: 1.2rem; }
.category-row {
    display: flex; align-items: center; gap: 0.6rem; background: #fff;
    border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem 0.7rem; margin-bottom: 0.5rem;
}
.category-edit-form { display: flex; align-items: center; gap: 0.5rem; flex: 1; }
.category-indent { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.category-edit-form input[type="text"] {
    flex: 1; padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.88rem;
}
.category-edit-form select { padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem; }

/* --- Admin: draggable category rows --- */
.category-drag-group { display: flex; flex-direction: column; gap: 0.4rem; }
.category-children-indent { margin: 0.4rem 0 0.4rem 1.6rem; padding-left: 0.8rem; border-left: 2px solid var(--border); }
.category-node.dragging { opacity: 0.4; }
.category-node .category-row {
    display: flex; align-items: center; gap: 0.6rem; background: #fff;
    border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem 0.7rem;
}
.drag-handle {
    cursor: grab; color: var(--muted); font-size: 1rem; user-select: none;
    padding: 0 2px; flex-shrink: 0;
}
.drag-handle:active { cursor: grabbing; }
.category-edit-form { display: flex; align-items: center; gap: 0.5rem; flex: 1; }
.category-edit-form input[type="text"] {
    flex: 1; padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.88rem;
}
.category-edit-form select { padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem; }

/* --- Admin: category row image thumbnail + upload input --- */
.category-row-thumb {
    width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex-shrink: 0;
}
.category-row-thumb-placeholder {
    background: #f1f5f9; color: var(--muted); font-size: 0.6rem;
    display: flex; align-items: center; justify-content: center; text-align: center;
}
.category-image-input { font-size: 0.75rem; max-width: 140px; }

/* Category tile zoom/label styling now lives with .category-tile above */

/* --- Admin layout: left sidebar --- */
.admin-layout {
    display: grid; grid-template-columns: 220px 1fr; gap: 2rem;
    max-width: 1400px; margin: 0 auto; align-items: start;
}
.admin-sidebar {
    background: #fff; border: 1px solid var(--border); border-radius: 8px;
    padding: 1rem 0.7rem; position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 0.2rem;
}
.admin-sidebar-title {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--muted); padding: 0.4rem 0.6rem 0.8rem;
}
.admin-sidebar-link {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.7rem;
    border-radius: 6px; text-decoration: none; color: var(--text); font-size: 0.9rem;
}
.admin-sidebar-link:hover { background: #f5edfb; color: var(--brand-purple); }
.admin-sidebar-link.active { background: var(--brand-purple); color: #fff; }
.admin-sidebar-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
.admin-sidebar-divider { height: 1px; background: var(--border); margin: 0.6rem 0.6rem; }
.admin-sidebar-exit { color: var(--muted); }

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

@media (max-width: 900px) {
    .admin-layout { grid-template-columns: 1fr; }
    .admin-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
}

/* --- Public static page viewer --- */
.static-page { max-width: 800px; margin: 0 auto; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 2rem; }
.static-page h1 { margin-top: 0; }
.static-page-content { line-height: 1.7; color: var(--text); }

/* --- Admin: pages management --- */
.add-page-details {
    background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 1rem; margin: 1rem 0 1.5rem;
}
.add-page-details summary { cursor: pointer; font-weight: 600; color: var(--brand-purple); }
.page-card {
    position: relative; background: #fff; border: 1px solid var(--border); border-radius: 8px;
    padding: 1.2rem; margin-bottom: 1rem;
}
.page-edit-form label { display: block; margin-bottom: 0.9rem; font-size: 0.85rem; color: var(--muted); }
.page-edit-form input[type="text"], .page-edit-form textarea {
    display: block; width: 100%; padding: 0.55rem; margin-top: 0.3rem;
    border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 0.9rem;
}
.page-card-header { display: flex; align-items: flex-end; gap: 0.8rem; margin-bottom: 0.3rem; padding-right: 2.2rem; }
.page-title-label { flex: 1; margin-bottom: 0 !important; }
.page-slug-badge { background: #f1f5f9; color: var(--muted); padding: 0.3rem 0.6rem; border-radius: 4px; font-size: 0.78rem; white-space: nowrap; }
.page-view-link { font-size: 0.8rem; color: var(--brand-purple); text-decoration: none; white-space: nowrap; }
.page-card-actions { display: flex; align-items: center; gap: 1rem; }
.page-updated-note { font-size: 0.78rem; color: var(--muted); }
.page-delete-form { position: absolute; top: 1.2rem; right: 1.2rem; }

/* --- Admin: pages grid listing --- */
.admin-pages .section-heading { margin-bottom: 1.2rem; }
.page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.page-grid-card {
    background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 1.2rem;
    display: flex; flex-direction: column; justify-content: space-between;
}
.page-grid-card-body h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.page-grid-slug { color: var(--brand-purple); font-size: 0.8rem; margin: 0 0 0.3rem; }
.page-grid-updated { color: var(--muted); font-size: 0.78rem; margin: 0 0 1rem; }
.page-grid-card-actions { display: flex; gap: 0.5rem; }

/* --- Admin: page editor (Quill WYSIWYG) --- */
.admin-page-editor { max-width: 900px; }
.page-editor-title-label { display: block; margin-bottom: 0.4rem; font-size: 0.88rem; color: var(--muted); }
.page-editor-title-label input {
    display: block; width: 100%; padding: 0.6rem; margin-top: 0.3rem; font-size: 1.05rem;
    border: 1px solid var(--border); border-radius: 6px;
}
.page-slug-note { color: var(--muted); font-size: 0.82rem; margin: 0 0 1.2rem; }
#quill-toolbar {
    border: 1px solid var(--border); border-bottom: none; border-radius: 6px 6px 0 0; background: #fafafa;
}
#quill-editor {
    background: #fff; border: 1px solid var(--border); border-radius: 0 0 6px 6px;
    min-height: 400px; font-size: 0.95rem;
}
.page-editor-actions { display: flex; gap: 0.7rem; margin-top: 1.2rem; }

/* --- Public static page: rendered rich content needs its own type styles --- */
.static-page-content h1, .static-page-content h2, .static-page-content h3 { margin: 1.2rem 0 0.6rem; }
.static-page-content p { margin: 0 0 1rem; }
.static-page-content ul, .static-page-content ol { margin: 0 0 1rem 1.4rem; }
.static-page-content a { color: var(--brand-purple); }
.static-page-content blockquote {
    border-left: 3px solid var(--border); margin: 1rem 0; padding: 0.4rem 0 0.4rem 1rem; color: var(--muted);
}

/* --- Admin: show-on-homepage checkbox --- */
.show-homepage-checkbox {
    display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem;
    color: var(--muted); white-space: nowrap; cursor: pointer;
}
.show-homepage-checkbox input { margin: 0; }