/* ============================================================
   Bons Plans Tana — Plain CSS (no external frameworks)
   Ported from Tailwind config + index.css
   ============================================================ */

/* --- CSS Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; color: #1c1917; background: #fff; line-height: 1.5; }
h1, h2, h3, h4, h5, h6 { font-family: 'Lora', Georgia, serif; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
input, select, textarea, button { font: inherit; }
button { cursor: pointer; border: none; background: none; }
svg { flex-shrink: 0; }

/* --- Color variables --- */
:root {
  --brand-50: #eff8fd; --brand-100: #d9effb; --brand-200: #b9e2f7; --brand-300: #8bd0ef;
  --brand-400: #62b9e7; --brand-500: #42A7DF; --brand-600: #2f91c7; --brand-700: #2379a7;
  --brand-800: #216488; --brand-900: #205473; --brand-950: #15364b;
  --sand-50: #fafaf9; --sand-100: #f5f5f4; --sand-200: #e7e5e4; --sand-300: #d6d3d1;
  --sand-400: #a8a29e; --sand-500: #78716c; --sand-600: #57534e; --sand-700: #44403c;
  --sand-800: #292524; --sand-900: #1c1917; --sand-950: #0c0a09;
  --success-500: #22c55e; --success-600: #16a34a;
  --warning-500: #f59e0b; --warning-600: #d97706;
  --error-500: #ef4444; --error-600: #dc2626;
  --amber-500: #f59e0b;
}

/* --- Layout --- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; width: 100%; }
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

/* --- Animations --- */
@keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.animate-fade-in-up { animation: fade-in-up 0.5s ease-out both; }
.animate-fade-in { animation: fade-in 0.4s ease-out both; }

/* --- Components --- */
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 9999px; background: var(--brand-600); padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 600; color: #fff; box-shadow: 0 4px 12px rgba(47,145,199,0.2); transition: all 0.2s; }
.btn-primary:hover { background: var(--brand-700); box-shadow: 0 8px 20px rgba(47,145,199,0.3); }
.btn-primary:active { transform: scale(0.95); }
.btn-primary:disabled { opacity: 0.6; }

.btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 9999px; border: 1px solid var(--sand-300); background: #fff; padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 600; color: var(--brand-800); transition: all 0.2s; }
.btn-secondary:hover { border-color: var(--brand-300); background: var(--brand-50); }

.input-field { width: 100%; border-radius: 0.75rem; border: 1px solid var(--sand-300); background: #fff; padding: 0.75rem 1rem; font-size: 0.875rem; color: var(--brand-900); transition: all 0.2s; }
.input-field:focus { border-color: var(--brand-500); outline: none; box-shadow: 0 0 0 4px rgba(66,167,223,0.1); }
.input-field::placeholder { color: var(--brand-400); }

.card { border-radius: 1rem; border: 1px solid var(--sand-200); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); }

/* --- Header --- */
.site-header { position: sticky; top: 0; z-index: 50; background-color: #16527A !important; transition: all 0.3s; }
.site-header.scrolled { background-color: rgba(22,82,122,0.98) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.12); backdrop-filter: blur(8px); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; height: 4rem; }
@media (min-width: 1024px) { .header-inner { height: 5rem; } }
.logo { display: flex; align-items: center; gap: 0.625rem; transition: transform 0.2s; }
.logo:hover { transform: scale(1.02); }
.logo-img { height: 2.5rem; width: auto; }
@media (min-width: 1024px) { .logo-img { height: 3rem; } }
.desktop-nav { display: none; align-items: center; gap: 0.25rem; flex: 1; justify-content: center; white-space: nowrap; flex-wrap: nowrap; }
@media (min-width: 1024px) { .desktop-nav { display: flex !important; } }
.nav-link { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 9999px; padding: 0.5rem 0.75rem; font-size: 0.8125rem; font-weight: 500; color: #fff !important; transition: all 0.2s; white-space: nowrap; flex-shrink: 0; }
.nav-link:hover { background: rgba(255,255,255,0.15); color: #fff; }
.nav-link.active { background: rgba(255,255,255,0.2); color: #fff; }
.header-actions { display: flex; align-items: center; gap: 0.375rem; flex-shrink: 0; }
.btn-add { display: none; align-items: center; gap: 0.5rem; border-radius: 9999px; background: #fff; padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 600; color: #16527A; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: all 0.2s; }
.btn-add:hover { background: rgba(255,255,255,0.9); box-shadow: 0 8px 16px rgba(0,0,0,0.2); }
@media (min-width: 640px) { .btn-add { display: inline-flex; } }
.btn-login { display: none; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.4); padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 600; color: #fff; transition: all 0.2s; }
.btn-login:hover { border-color: #fff; background: rgba(255,255,255,0.15); }
@media (min-width: 640px) { .btn-login { display: inline-block; } }
.mobile-toggle { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; color: #fff; transition: all 0.2s; }
.mobile-toggle:hover { background: rgba(255,255,255,0.15); }
@media (min-width: 1024px) { .mobile-toggle { display: none; } }

/* --- User menu --- */
.user-menu { position: relative; display: none; }
@media (min-width: 640px) { .user-menu { display: block; } }
.user-btn { display: flex; align-items: center; gap: 0.5rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 500; color: #fff; transition: all 0.2s; }
.user-btn:hover { border-color: rgba(255,255,255,0.6); }
.user-avatar { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: rgba(255,255,255,0.2); color: #fff; }
.user-email { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-dropdown { display: none; position: absolute; right: 0; top: 100%; margin-top: 0.5rem; width: 14rem; border-radius: 1rem; border: 1px solid var(--sand-200); background: #fff; padding: 0.5rem 0; box-shadow: 0 12px 24px rgba(0,0,0,0.1); z-index: 20; }
.user-dropdown.show { display: block; }
.dropdown-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; font-size: 0.875rem; color: var(--sand-700); transition: all 0.2s; }
.dropdown-item:hover { background: var(--brand-50); color: var(--brand-700); }
.dropdown-item.danger:hover { background: rgba(220,38,38,0.1); color: var(--error-600); }

/* --- Mobile menu --- */
.mobile-menu { display: none; border-top: 1px solid rgba(255,255,255,0.15); background: #16527A; }
.mobile-menu.show { display: block; }
@media (min-width: 1024px) { .mobile-menu { display: none !important; } }
.mobile-nav { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 0; }
.mobile-nav-link { border-radius: 0.75rem; padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 500; color: #fff; transition: all 0.2s; }
.mobile-nav-link:hover { background: rgba(255,255,255,0.15); }
.mobile-nav-link.active { background: rgba(255,255,255,0.2); color: #fff; }
.mobile-nav-link.danger { color: #ff9999; }
.mobile-divider { height: 1px; background: rgba(255,255,255,0.15); margin: 0.5rem 0; }
.btn-add-full { border-radius: 0.75rem; background: #fff; padding: 0.75rem 1rem; text-align: center; font-size: 0.875rem; font-weight: 600; color: #16527A; }
.btn-login-full { display: block; border-radius: 0.75rem; border: 1px solid rgba(255,255,255,0.4); padding: 0.75rem 1rem; text-align: center; font-size: 0.875rem; font-weight: 600; color: #fff; }

/* --- Footer --- */
.site-footer { margin-top: 5rem; border-top: 1px solid var(--sand-200); background: var(--sand-900); color: var(--sand-300); }
.footer-grid { display: grid; gap: 2.5rem; padding: 3rem 0; grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }
.footer-logo { height: 2.5rem; width: auto; margin-bottom: 1rem; filter: brightness(0) invert(1); }
.footer-brand p { max-width: 20rem; font-size: 0.875rem; line-height: 1.6; color: var(--sand-400); }
.social-links { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.social-link { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; background: var(--sand-800); color: var(--sand-400); transition: all 0.2s; }
.social-link:hover { background: var(--brand-600); color: #fff; }
.footer-col h4 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #fff; margin-bottom: 1rem; }
.footer-col ul li { margin-bottom: 0.625rem; }
.footer-col ul li a { font-size: 0.875rem; color: var(--sand-400); transition: color 0.2s; }
.footer-col ul li a:hover { color: var(--brand-400); }
.footer-col p { font-size: 0.875rem; color: var(--sand-400); margin-bottom: 0.75rem; }
.newsletter-form { display: flex; gap: 0.5rem; }
.newsletter-input { flex: 1; border-radius: 0.75rem; border: 1px solid var(--sand-700); background: var(--sand-800); padding: 0.625rem 0.75rem; font-size: 0.875rem; color: #fff; }
.newsletter-input::placeholder { color: var(--sand-500); }
.newsletter-input:focus { border-color: var(--brand-500); outline: none; }
.newsletter-btn { border-radius: 0.75rem; background: var(--brand-600); padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 600; color: #fff; transition: all 0.2s; }
.newsletter-btn:hover { background: var(--brand-500); }
.footer-bottom { display: flex; flex-direction: column; align-items: center; gap: 1rem; border-top: 1px solid var(--sand-800); padding: 1.5rem 0; font-size: 0.875rem; color: var(--sand-500); }
@media (min-width: 640px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }

/* --- Hero (homepage) --- */
.hero { position: relative; min-height: 600px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(28,25,23,0.7), rgba(28,25,23,0.5), rgba(28,25,23,0.8)); }
.hero-content { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 600px; text-align: center; color: #fff; padding: 5rem 0; }
.hero-badge { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); padding: 0.5rem 1.25rem; font-size: 0.875rem; font-weight: 500; backdrop-filter: blur(4px); animation: fade-in-up 0.5s ease-out both; }
.hero h1 { margin-top: 1.5rem; max-width: 48rem; font-size: 2.25rem; line-height: 1.1; animation: fade-in-up 0.5s ease-out 0.1s both; }
@media (min-width: 640px) { .hero h1 { font-size: 3rem; } }
@media (min-width: 1024px) { .hero h1 { font-size: 3.75rem; } }
.hero p { margin-top: 1rem; max-width: 36rem; font-size: 1.125rem; color: #e7e5e4; animation: fade-in-up 0.5s ease-out 0.2s both; }

/* --- Search bar --- */
.search-bar { display: flex; flex-direction: column; gap: 0.5rem; border-radius: 1rem; background: #fff; padding: 0.75rem; box-shadow: 0 25px 50px rgba(0,0,0,0.25); margin-top: 2rem; width: 100%; max-width: 56rem; animation: fade-in-up 0.5s ease-out 0.3s both; }
@media (min-width: 640px) { .search-bar { flex-direction: row; align-items: center; justify-content: space-between; } }
.search-field { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; border-radius: 0.75rem; background: var(--sand-50); flex: 1; }
@media (min-width: 640px) { .search-field { background: transparent; border-radius: 0; } }
.search-field select, .search-field input { width: 100%; border: none; background: transparent; padding: 0.75rem 0; font-size: 0.875rem; color: var(--brand-900); }
.search-field select:focus, .search-field input:focus { outline: none; }
.search-btn { border-radius: 0.75rem; background: var(--brand-600); padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 600; color: #fff; transition: all 0.2s; flex-shrink: 0; }
.search-btn:hover { background: var(--brand-700); }

/* --- Category cards --- */
.categories-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .categories-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .categories-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }
.category-card { position: relative; overflow: hidden; border-radius: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.15); animation: fade-in-up 0.5s ease-out both; }
.category-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform 0.7s; }
.category-card:hover img { transform: scale(1.1); }
.category-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,25,23,0.9), rgba(28,25,23,0.3), transparent); }
.category-card-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem; text-align: left; }
.category-card-content h3 { font-size: 1.25rem; color: #fff; }
.category-card-content p { margin-top: 0.25rem; font-size: 0.875rem; color: #e7e5e4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.category-card-content span { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--brand-300); }

/* --- Listing cards --- */
.listings-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .listings-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .listings-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.listing-card { border-radius: 1rem; border: 1px solid var(--sand-200); background: #fff; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.06); transition: all 0.3s; display: flex; flex-direction: column; }
.listing-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.08); transform: translateY(-2px); }
.listing-card-img { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--sand-100); }
.listing-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.listing-card:hover .listing-card-img img { transform: scale(1.05); }
.listing-card-img-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--sand-300); }
.sponsored-badge { position: absolute; top: 0.75rem; left: 0.75rem; display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 9999px; background: var(--amber-500); padding: 0.25rem 0.625rem; font-size: 0.625rem; font-weight: 700; color: #fff; }
.verified-badge { position: absolute; top: 0.75rem; right: 0.75rem; display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: var(--brand-500); color: #fff; }
.listing-card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.listing-card-body h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1rem; font-weight: 700; color: var(--brand-900); }
.listing-card-title { display: flex; align-items: flex-start; gap: 0.5rem; }
.listing-card-category-icons { display: inline-flex; align-items: center; gap: 0.2rem; flex: 0 0 auto; color: var(--brand-600); }
.listing-card-category-icons span { display: inline-flex; }
.listing-card-category-icons svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.listing-card-location { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.375rem; font-size: 0.75rem; color: var(--sand-400); }
.listing-card-desc { margin-top: 0.5rem; font-size: 0.75rem; color: var(--sand-500); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.listing-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--sand-100); }
.listing-card-price { font-size: 0.875rem; font-weight: 600; color: var(--brand-700); }

/* --- Star rating --- */
.star-rating { display: inline-flex; gap: 1px; }
.star { width: 16px; height: 16px; }
.star.filled { fill: var(--warning-500); }
.star.empty { fill: var(--sand-300); }
.review-count { font-size: 0.75rem; color: var(--sand-400); margin-left: 0.25rem; }

/* --- Section titles --- */
.section-title { font-size: 1.875rem; font-weight: 700; color: var(--brand-900); }
@media (min-width: 640px) { .section-title { font-size: 2.25rem; } }
.section-subtitle { margin-top: 0.5rem; color: var(--sand-500); font-size: 0.875rem; }

/* --- Filter bar --- */
.filter-bar { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .filter-bar { flex-direction: row; align-items: center; } }
.search-input-wrap { display: flex; align-items: center; gap: 0.5rem; border-radius: 0.75rem; border: 1px solid var(--sand-300); background: #fff; padding: 0.625rem 1rem; flex: 1; }
.search-input-wrap input { width: 100%; border: none; font-size: 0.875rem; color: var(--brand-900); background: transparent; }
.search-input-wrap input:focus { outline: none; }
.filter-btn { display: flex; align-items: center; gap: 0.5rem; border-radius: 0.75rem; border: 1px solid var(--sand-300); background: #fff; padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 500; color: var(--brand-800); transition: all 0.2s; }
.filter-btn:hover { border-color: var(--brand-300); }
.filter-panel { margin-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; border-radius: 0.75rem; border: 1px solid var(--sand-200); background: #fff; padding: 1rem; }
.filter-label { font-size: 0.875rem; font-weight: 600; color: var(--brand-800); }
.filter-chip { border-radius: 9999px; padding: 0.375rem 1rem; font-size: 0.875rem; font-weight: 500; background: var(--sand-100); color: var(--sand-600); transition: all 0.2s; }
.filter-chip:hover { background: var(--sand-200); }
.filter-chip.active { background: var(--brand-600); color: #fff; }
.filter-select { border-radius: 9999px; border: none; background: var(--sand-100); padding: 0.375rem 1rem 0.375rem 2rem; font-size: 0.875rem; font-weight: 500; color: var(--sand-700); appearance: none; cursor: pointer; }
.filter-select:focus { outline: none; box-shadow: 0 0 0 2px var(--brand-400); }

/* --- Category hero --- */
.popular-features-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; max-width: 940px; margin-left: auto; margin-right: auto; }
.popular-feature-card { position: relative; display: block; height: 390px; overflow: hidden; border-radius: 0.75rem; background: var(--sand-100); box-shadow: 0 8px 18px rgba(15, 59, 87, 0.08); transition: transform 0.25s, box-shadow 0.25s; }
.popular-feature-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(15, 59, 87, 0.16); }
.popular-feature-card img { width: 100%; height: 100%; object-fit: cover; }
.popular-feature-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 36, 52, 0.58), transparent 42%); }
.popular-feature-card span { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; padding: 0.75rem; background: rgba(235, 183, 53, 0.92); color: #fff; text-align: center; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.02em; }
.popular-feature-card:nth-child(1) span { background: rgba(68, 211, 235, 0.92); }
.popular-feature-card:nth-child(3) span { background: rgba(154, 190, 191, 0.92); }
.popular-feature-card:nth-child(4) span { background: rgba(169, 125, 108, 0.94); }
@media (max-width: 768px) { .popular-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .popular-feature-card { height: 260px; } }
@media (max-width: 480px) { .popular-features-grid { gap: 0.75rem; } .popular-feature-card { height: 220px; } }
.category-hero { position: relative; height: 16rem; overflow: hidden; }
.category-hero img { width: 100%; height: 100%; object-fit: cover; }
.category-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,25,23,0.8), rgba(28,25,23,0.3)); }
.category-hero-content { position: absolute; inset: 0; display: flex; align-items: flex-end; padding-bottom: 2rem; color: #fff; }
.category-hero h1 { font-size: 2.25rem; color: #fff; }
.category-hero p { margin-top: 0.5rem; max-width: 36rem; font-size: 0.875rem; color: #e7e5e4; }
.breadcrumb { margin-bottom: 0.5rem; font-size: 0.875rem; color: #d6d3d1; }
.breadcrumb a:hover { color: #fff; }

/* --- Listing detail --- */
.detail-gallery { display: grid; gap: 0.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .detail-gallery { grid-template-columns: 2fr 1fr; } }
.detail-main-img { border-radius: 1rem; overflow: hidden; aspect-ratio: 16/10; background: var(--sand-100); }
.detail-main-img img { width: 100%; height: 100%; object-fit: cover; }
.detail-thumbs { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.detail-thumb { border-radius: 0.5rem; overflow: hidden; width: 4rem; height: 4rem; background: var(--sand-100); }
.detail-thumb img { width: 100%; height: 100%; object-fit: cover; }
.detail-title { font-size: 1.875rem; color: var(--brand-900); }
.detail-location { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.5rem; color: var(--sand-500); font-size: 0.875rem; }
.detail-contact { display: flex; flex-direction: column; gap: 0.625rem; margin-top: 1.5rem; }
.detail-contact-item { display: flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; color: var(--sand-700); }
.detail-contact-item a { color: var(--brand-600); }
.detail-contact-item a:hover { text-decoration: underline; }
.detail-features { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.feature-tag { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 9999px; background: var(--brand-50); padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 500; color: var(--brand-700); transition: background 0.2s, color 0.2s, transform 0.2s; }
.feature-tag:hover { background: var(--brand-600); color: #fff; transform: translateY(-1px); }
.feature-tag a { color: inherit; text-decoration: none; }
.detail-map { border-radius: 1rem; overflow: hidden; margin-top: 1.5rem; border: 1px solid var(--sand-200); }
.detail-map iframe { width: 100%; height: 300px; border: none; }
.detail-sidebar { display: flex; flex-direction: column; gap: 1.25rem; }
.sidebar-listing-section { position: relative; padding: 0; }
.sidebar-section-heading { display: flex; align-items: center; margin-bottom: 0.75rem; }
.sidebar-section-heading h3 { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.25rem; font-weight: 500; color: var(--brand-900); }
.sidebar-section-heading small { display: block; margin-top: 0.125rem; color: var(--sand-500); font-size: 0.6875rem; }
.sidebar-listing-list { display: flex; flex-direction: column; gap: 0.75rem; }
.sidebar-listing-card { display: flex; align-items: center; gap: 0.75rem; min-width: 0; border: 1px solid #dedede; border-radius: 0.625rem; background: #fff; padding: 0.75rem; color: inherit; transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.sidebar-listing-card:hover { border-color: var(--brand-200); background: var(--brand-50); box-shadow: 0 5px 14px rgba(15, 59, 87, 0.08); transform: translateY(-1px); }
.sidebar-listing-image { position: relative; display: block; width: 5.75rem; height: 5.25rem; flex: 0 0 5.75rem; overflow: hidden; border-radius: 0.35rem; background: var(--sand-100); }
.sidebar-listing-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
.sidebar-listing-card:hover img { transform: scale(1.06); }
.sidebar-listing-badge { position: absolute; right: 0.25rem; bottom: 0.25rem; display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.2rem 0.35rem; border-radius: 999px; font-size: 0.5625rem; line-height: 1; }
.sidebar-listing-info { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 0.3rem; align-self: stretch; justify-content: center; }
.sidebar-listing-info strong { display: -webkit-box; overflow: hidden; color: var(--brand-900); font-size: 0.875rem; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sidebar-listing-description { display: -webkit-box; overflow: hidden; color: var(--sand-500); font-size: 0.6875rem; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sidebar-listing-category { align-self: flex-start; color: var(--brand-600); font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.sidebar-listing-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-width: 0; color: var(--sand-500); font-size: 0.6875rem; }
.sidebar-listing-location { display: flex; align-items: center; gap: 0.25rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-listing-location svg { flex: 0 0 auto; color: var(--sand-400); }
.sidebar-listing-distance { flex: 0 0 auto; color: #f04422; font-size: 0.6875rem; font-weight: 800; }
.sidebar-listing-card:hover .sidebar-listing-distance { color: #d93618; }
.claim-box { border-radius: 0.75rem; border: 1px solid var(--brand-200); background: rgba(239,248,253,0.5); padding: 1rem; }
.claim-box-title { font-size: 0.875rem; font-weight: 600; color: var(--brand-900); }
.claim-box-desc { margin-top: 0.125rem; font-size: 0.75rem; color: var(--sand-500); }
.claim-btn { margin-top: 0.75rem; display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 0.5rem; background: var(--brand-600); padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; color: #fff; }

/* --- Review --- */
.review-item { border-radius: 0.75rem; border: 1px solid var(--sand-200); background: #fff; padding: 1rem; }
.review-header { display: flex; align-items: center; justify-content: space-between; }
.review-author { font-weight: 600; font-size: 0.875rem; color: var(--brand-900); }
.review-date { font-size: 0.75rem; color: var(--sand-400); }
.review-comment { margin-top: 0.5rem; font-size: 0.875rem; color: var(--sand-600); }
.star-input { display: inline-flex; gap: 0.125rem; }
.star-input svg { width: 28px; height: 28px; cursor: pointer; }
.star-input svg.filled { fill: var(--warning-500); }
.star-input svg.empty { fill: var(--sand-300); }

/* --- Auth page --- */
.auth-page { min-height: calc(100vh - 80px); background: linear-gradient(to bottom right, var(--brand-50), var(--sand-50), var(--sand-100)); padding: 4rem 0; }
.auth-card { max-width: 28rem; margin: 0 auto; border-radius: 1rem; border: 1px solid var(--sand-200); background: #fff; padding: 2rem; box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
.auth-logo { display: flex; flex-direction: column; align-items: center; text-align: center; }
.auth-logo-icon { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: linear-gradient(to bottom right, var(--brand-500), var(--brand-700)); color: #fff; box-shadow: 0 4px 12px rgba(47,145,199,0.2); }
.auth-logo h1 { margin-top: 1rem; font-size: 1.5rem; color: var(--brand-900); }
.auth-logo p { margin-top: 0.25rem; font-size: 0.875rem; color: var(--sand-500); }
.auth-form { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.auth-form label { font-size: 0.875rem; font-weight: 500; color: var(--sand-600); }
.auth-input-wrap { position: relative; margin-top: 0.375rem; }
.auth-input-wrap svg { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--sand-400); }
.auth-input { width: 100%; border-radius: 0.75rem; border: 1px solid var(--sand-300); background: #fff; padding: 0.75rem 1rem 0.75rem 2.75rem; font-size: 0.875rem; color: var(--brand-900); }
.auth-input:focus { border-color: var(--brand-500); outline: none; box-shadow: 0 0 0 4px rgba(66,167,223,0.1); }
.auth-alert { border-radius: 0.75rem; padding: 0.75rem 1rem; font-size: 0.875rem; margin-top: 1.5rem; }
.auth-alert.error { background: rgba(239,68,68,0.1); color: var(--error-600); }
.auth-alert.success { background: rgba(34,197,94,0.1); color: var(--success-600); }
.auth-divider { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: var(--sand-200); }
.auth-divider span { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sand-400); }
.social-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1.25rem; }
.social-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 0.75rem; border: 1px solid var(--sand-300); background: #fff; padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 600; color: var(--brand-800); transition: all 0.2s; }
.social-btn:hover { border-color: var(--sand-400); background: var(--sand-50); }
.social-btn:active { transform: scale(0.95); }
.social-btn:disabled { opacity: 0.5; }
.auth-switch { margin-top: 1.5rem; text-align: center; font-size: 0.875rem; color: var(--sand-500); }
.auth-switch a { font-weight: 600; color: var(--brand-600); }
.auth-switch a:hover { color: var(--brand-700); }

/* --- Forms (add/edit listing) --- */
.form-section { border-radius: 1rem; border: 1px solid var(--sand-200); background: #fff; padding: 1.5rem; margin-bottom: 1.5rem; }
.form-section h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.125rem; font-weight: 700; color: var(--brand-900); margin-bottom: 1rem; }
.form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-grid-full { grid-column: 1 / -1; }
.form-label { font-size: 0.875rem; font-weight: 500; color: var(--sand-600); display: block; margin-bottom: 0.375rem; }
.form-input, .form-select, .form-textarea { width: 100%; border-radius: 0.75rem; border: 1px solid var(--sand-300); background: #fff; padding: 0.75rem 1rem; font-size: 0.875rem; color: var(--brand-900); transition: all 0.2s; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--brand-500); outline: none; box-shadow: 0 0 0 4px rgba(66,167,223,0.1); }
.form-textarea { resize: vertical; min-height: 100px; }
.checkbox-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.checkbox-item { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 9999px; border: 1px solid var(--sand-300); padding: 0.375rem 0.75rem; font-size: 0.875rem; color: var(--sand-600); cursor: pointer; transition: all 0.2s; }
.checkbox-item.active { border-color: var(--brand-500); background: var(--brand-50); color: var(--brand-700); }
.checkbox-item input { display: none; }
.file-upload { border: 2px dashed var(--sand-300); border-radius: 0.75rem; padding: 1.5rem; text-align: center; cursor: pointer; transition: all 0.2s; }
.file-upload:hover { border-color: var(--brand-400); background: var(--brand-50); }
.file-upload svg { margin: 0 auto; color: var(--sand-400); }
.file-upload p { margin-top: 0.5rem; font-size: 0.875rem; color: var(--sand-500); }

/* --- Rich text editor --- */
.rich-tabs { display: flex; gap: 0.5rem; border-bottom: 1px solid var(--sand-200); margin-bottom: 0.75rem; }
.rich-tab { border: none; border-bottom: 2px solid transparent; background: transparent; padding: 0.5rem 0.875rem; font-size: 0.8125rem; font-weight: 600; color: var(--sand-500); cursor: pointer; }
.rich-tab:hover { color: var(--brand-600); }
.rich-tab.active { border-bottom-color: var(--brand-600); color: var(--brand-700); }
.rich-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; border: 1px solid var(--sand-300); border-bottom: none; border-radius: 0.75rem 0.75rem 0 0; background: var(--sand-50); padding: 0.625rem 0.75rem; }
.rich-toolbar button { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; border: 1px solid transparent; background: #fff; font-size: 0.8125rem; font-weight: 600; color: var(--sand-700); cursor: pointer; transition: all 0.15s; }
.rich-toolbar button:hover { border-color: var(--brand-300); background: var(--brand-50); color: var(--brand-700); }
.rich-sep { width: 1px; height: 1.75rem; background: var(--sand-200); margin: 0 0.25rem; }
.rich-editor, .rich-code { min-height: 120px; border: 1px solid var(--sand-300); border-radius: 0 0 0.75rem 0.75rem; padding: 0.875rem 1rem; font-size: 0.875rem; line-height: 1.6; color: var(--brand-900); background: #fff; outline: none; }
.rich-code { display: none; width: 100%; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; tab-size: 2; }
.rich-editor:focus, .rich-code:focus { border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(66,167,223,0.1); }
.rich-editor:focus { border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(66,167,223,0.1); }
.rich-editor:empty::before { content: attr(data-placeholder); color: var(--sand-400); pointer-events: none; }
.rich-editor h3 { font-size: 1rem; font-weight: 700; color: var(--brand-900); margin: 0.5rem 0; }
.rich-editor ul, .rich-editor ol { margin: 0.5rem 0; padding-left: 1.5rem; }
.rich-editor a { color: var(--brand-600); text-decoration: underline; }

/* --- Member space --- */
.stats-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .stats-grid { grid-template-columns: 1fr 1fr 1fr; } }
.stat-card { border-radius: 1rem; border: 1px solid var(--sand-200); background: #fff; padding: 1.5rem; }
.stat-card .stat-value { font-family: 'Lora', serif; font-size: 2.25rem; font-weight: 700; color: var(--brand-900); }
.stat-card .stat-label { font-size: 0.875rem; color: var(--sand-500); }

/* --- How it works --- */
.how-hero { position: relative; overflow: hidden; background: linear-gradient(to bottom right, var(--brand-700), var(--brand-900)); padding: 5rem 0; color: #fff; }
.how-hero h1 { font-size: 2.25rem; color: #fff; }
@media (min-width: 640px) { .how-hero h1 { font-size: 3rem; } }
.how-hero p { margin-top: 1rem; max-width: 42rem; font-size: 1.125rem; color: var(--brand-100); }
.how-nav { border-bottom: 1px solid var(--sand-200); background: #fff; }
.how-nav-inner { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 1rem 0; }
.how-nav-link { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 9999px; background: var(--sand-50); padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; color: var(--brand-700); transition: all 0.2s; }
.how-nav-link:hover { background: var(--brand-50); }
.how-section { scroll-margin-top: 6rem; }
.how-step-label { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand-600); }
.how-step-icon { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: var(--brand-100); color: var(--brand-600); flex-shrink: 0; }
.how-step-title { font-size: 1.5rem; color: var(--brand-900); }
.how-step-intro { margin-top: 0.25rem; font-size: 0.875rem; font-weight: 500; color: var(--brand-500); }
.how-step-body { margin-top: 1.25rem; font-size: 1rem; line-height: 1.6; color: var(--sand-700); }
.how-divider { height: 1px; background: var(--sand-200); margin: 4rem 0; }
.how-cta-box { position: relative; overflow: hidden; border-radius: 1.5rem; background: var(--brand-600); padding: 3.5rem 2rem; text-align: center; color: #fff; }
.how-cta-box h2 { font-size: 1.875rem; color: #fff; }
.how-cta-box p { margin: 0.75rem auto 0; max-width: 30rem; color: var(--brand-100); }
.how-cta-btn { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; background: #fff; padding: 0.875rem 2rem; font-size: 0.875rem; font-weight: 600; color: var(--brand-700); }

/* --- Sponsored page --- */
.plan-card { border-radius: 1rem; border: 2px solid var(--sand-200); background: #fff; padding: 2rem; text-align: center; transition: all 0.2s; }
.plan-card:hover { border-color: var(--brand-300); }
.plan-card.featured { border-color: var(--brand-500); }
.plan-price { font-family: 'Lora', serif; font-size: 2.5rem; font-weight: 700; color: var(--brand-900); }
.plan-duration { font-size: 0.875rem; color: var(--sand-500); }

/* --- Contact --- */
.contact-form { display: flex; flex-direction: column; gap: 1rem; }

/* --- Misc --- */
.text-center { text-align: center; }
.text-sand-500 { color: var(--sand-500); }
.text-sand-400 { color: var(--sand-400); }
.text-brand-600 { color: var(--brand-600); }
.text-brand-900 { color: var(--brand-900); }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; }
@media (max-width: 768px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-md { max-width: 28rem; }
.max-w-3xl { max-width: 48rem; }
.hidden { display: none; }
.rounded-full { border-radius: 9999px; }
.flex-1 { flex: 1; }
.w-full { width: 100%; }
.no-results { border-radius: 1rem; border: 1px solid var(--sand-200); background: #fff; padding: 4rem; text-align: center; }
.skeleton { animation: pulse 1.5s ease-in-out infinite; background: var(--sand-200); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { scrollbar-width: none; -ms-overflow-style: none; }

/* --- Admin page --- */
.admin-page { min-height: calc(100vh - 80px); background: var(--sand-50); }
.admin-header { background: linear-gradient(to right, var(--sand-900), var(--sand-800)); color: #fff; }
.admin-header-inner { display: flex; align-items: center; gap: 0.75rem; padding: 2rem 0; }
.admin-shield { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 1rem; background: var(--brand-600); box-shadow: 0 4px 12px rgba(47,145,199,0.3); flex-shrink: 0; }
.admin-title { font-family: 'Lora', serif; font-size: 1.5rem; font-weight: 700; color: #fff; }
.admin-subtitle { font-size: 0.875rem; color: var(--sand-300); }
.admin-body { padding: 2rem 0 4rem; }

/* Admin tabs */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--sand-200); overflow-x: auto; }
.admin-tab { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; border-bottom: 2px solid transparent; padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: 500; color: var(--sand-500); transition: all 0.2s; position: relative; }
.admin-tab:hover { color: var(--brand-600); }
.admin-tab.active { border-bottom-color: var(--brand-600); color: var(--brand-700); }
.admin-tab svg { flex-shrink: 0; }
.tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; border-radius: 9999px; background: var(--error-500); color: #fff; font-size: 0.625rem; font-weight: 700; padding: 0 0.25rem; margin-left: 0.25rem; }
.admin-content { margin-top: 1.5rem; }

/* Admin stat cards */
.admin-stats-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .admin-stats-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .admin-stats-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }
.admin-stat-card { border-radius: 1rem; border: 1px solid var(--sand-200); background: #fff; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.admin-stat-icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; }
.admin-stat-icon.brand { background: var(--brand-100); color: var(--brand-600); }
.admin-stat-icon.teal { background: #ccfbf1; color: #0d9488; }
.admin-stat-value { margin-top: 0.75rem; font-family: 'Lora', serif; font-size: 1.875rem; font-weight: 700; color: var(--brand-900); }
.admin-stat-label { font-size: 0.875rem; color: var(--sand-500); }

/* Admin dashboard recent */
.admin-dashboard-recent { margin-top: 1rem; padding: 1.5rem; }
.admin-section-heading { font-family: 'Lora', serif; font-size: 1.125rem; font-weight: 600; color: var(--brand-900); }
.admin-recent-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.admin-recent-item { display: flex; align-items: center; justify-content: space-between; border-radius: 0.5rem; border: 1px solid var(--sand-100); background: var(--sand-50); padding: 0.625rem 1rem; }
.admin-recent-info { display: flex; align-items: center; gap: 0.75rem; }
.admin-recent-thumb { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; object-fit: cover; }
.admin-recent-thumb-placeholder { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background: var(--sand-200); color: var(--sand-400); }
.admin-recent-title { font-size: 0.875rem; font-weight: 600; color: var(--brand-900); }
.admin-recent-date { font-size: 0.75rem; color: var(--sand-400); }

/* Admin search */
.admin-search-bar { display: flex; align-items: center; gap: 0.75rem; border-radius: 0.75rem; border: 1px solid var(--sand-300); background: #fff; padding: 0.625rem 1rem; }
.admin-search-bar svg { color: var(--sand-400); flex-shrink: 0; }
.admin-search-bar input { width: 100%; border: none; font-size: 0.875rem; color: var(--brand-900); background: transparent; }
.admin-search-bar input:focus { outline: none; }
.admin-count-text { margin-top: 1rem; font-size: 0.875rem; color: var(--sand-500); }

/* Admin listing rows */
.admin-listings-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.admin-listing-row { display: flex; align-items: center; gap: 1rem; padding: 1rem; }
.admin-listing-thumb { display: none; width: 5rem; height: 4rem; border-radius: 0.5rem; overflow: hidden; background: var(--sand-100); flex-shrink: 0; }
@media (min-width: 640px) { .admin-listing-thumb { display: block; } }
.admin-listing-thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-listing-thumb-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--sand-300); }
.admin-listing-info { flex: 1; min-width: 0; }
.admin-listing-cats { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.admin-cat-pill { border-radius: 9999px; background: var(--brand-50); padding: 0.125rem 0.5rem; font-size: 0.6875rem; font-weight: 600; color: var(--brand-700); }
.admin-listing-title { margin-top: 0.25rem; font-family: 'Lora', serif; font-size: 1rem; font-weight: 600; color: var(--brand-900); }
.admin-listing-meta { font-size: 0.75rem; color: var(--sand-400); }
.admin-listing-actions { display: flex; gap: 0.375rem; flex-shrink: 0; }
.admin-icon-btn { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; color: var(--sand-500); transition: all 0.2s; background: transparent; }
.admin-icon-btn:hover { background: var(--brand-50); color: var(--brand-600); }
.admin-icon-btn.verified { background: #eff6ff; color: #2563eb; }
.admin-icon-btn.verified:hover { background: #dbeafe; }
.admin-icon-btn.danger:hover { background: rgba(239,68,68,0.1); color: var(--error-600); }
.admin-inline-form { display: inline; }

/* Admin members */
.admin-members-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.admin-member-row { display: flex; align-items: center; gap: 1rem; padding: 1rem; }
.admin-member-avatar { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: var(--brand-100); font-size: 0.875rem; font-weight: 700; color: var(--brand-700); flex-shrink: 0; }
.admin-member-info { flex: 1; min-width: 0; }
.admin-member-name-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.admin-member-email { font-size: 0.875rem; font-weight: 600; color: var(--brand-900); }
.admin-admin-badge { border-radius: 9999px; background: var(--brand-600); padding: 0.125rem 0.5rem; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; color: #fff; }
.admin-member-date { font-size: 0.75rem; color: var(--sand-400); }
.admin-member-count { text-align: right; flex-shrink: 0; }
.admin-member-count-num { font-size: 1.125rem; font-weight: 700; color: var(--brand-600); }
.admin-member-count-label { font-size: 0.75rem; color: var(--sand-400); }

/* Admin form card */
.admin-form-card { padding: 1.5rem; margin-bottom: 1.5rem; }
.admin-inline-form-row { display: flex; gap: 0.75rem; margin-top: 1rem; align-items: stretch; }
.admin-inline-form-row .input-field { flex: 1; }

/* Admin list card */
.admin-list-card { overflow: hidden; margin-top: 1.5rem; }
.admin-list-header { border-bottom: 1px solid var(--sand-100); padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: 600; color: var(--brand-800); }
.admin-list-items { display: flex; flex-direction: column; }
.admin-list-item { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--sand-100); }
.admin-list-item:last-child { border-bottom: none; }
.admin-list-item-info { display: flex; align-items: center; gap: 0.75rem; }
.admin-list-item-icon { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.5rem; background: var(--brand-50); color: var(--brand-600); }
.admin-list-item-info span { font-size: 0.875rem; font-weight: 500; color: var(--brand-900); }

/* Admin category selector */
.admin-cat-selector { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.admin-cat-btn { border-radius: 9999px; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; background: #fff; color: var(--sand-600); transition: all 0.2s; border: 1px solid var(--sand-200); }
.admin-cat-btn:hover { background: var(--sand-100); }
.admin-cat-btn.active { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }

/* Admin section header */
.admin-section-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.admin-section-icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: var(--brand-100); color: var(--brand-600); flex-shrink: 0; }
.admin-section-title { font-family: 'Lora', serif; font-size: 1.25rem; font-weight: 700; color: var(--brand-900); }
.admin-section-desc { font-size: 0.875rem; color: var(--sand-500); }

/* Admin claims */
.admin-subgroup-heading { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sand-500); margin-bottom: 0.75rem; }
.admin-subgroup-heading.mt { margin-top: 1.5rem; }
.admin-claims-list { display: flex; flex-direction: column; gap: 0.75rem; }
.admin-claim-card { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem; }
.admin-claim-info { flex: 1; min-width: 200px; }
.admin-claim-title { font-family: 'Lora', serif; font-size: 1rem; font-weight: 700; color: var(--brand-900); }
.admin-claim-details { margin-top: 0.5rem; display: grid; gap: 0.5rem; font-size: 0.875rem; color: var(--sand-600); }
@media (min-width: 640px) { .admin-claim-details { grid-template-columns: 1fr 1fr; } }
.admin-claim-details span { display: flex; align-items: center; gap: 0.375rem; }
.admin-claim-details svg { color: var(--sand-400); flex-shrink: 0; }
.admin-claim-address { margin-top: 0.375rem; font-size: 0.875rem; color: var(--sand-500); }
.admin-claim-doc { margin-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 500; color: var(--brand-600); }
.admin-claim-doc:hover { text-decoration: underline; }
.admin-claim-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* Admin pills */
.admin-pill { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 9999px; padding: 0.125rem 0.625rem; font-size: 0.75rem; font-weight: 600; }
.admin-pill.success { background: rgba(34,197,94,0.1); color: var(--success-600); }
.admin-pill.error { background: rgba(239,68,68,0.1); color: var(--error-600); }

/* Admin approve/reject buttons */
.btn-approve { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 0.5rem; background: var(--success-500); padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; color: #fff; transition: all 0.2s; }
.btn-approve:hover { background: var(--success-600); }
.btn-reject { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 0.5rem; background: var(--error-500); padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; color: #fff; transition: all 0.2s; }
.btn-reject:hover { background: var(--error-600); }

/* Admin processed list */
.admin-processed-list { display: flex; flex-direction: column; gap: 0.5rem; }
.admin-processed-row { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; }
.admin-processed-title { font-weight: 500; color: var(--brand-900); }
.admin-processed-name { margin-left: 0.5rem; font-size: 0.875rem; color: var(--sand-500); }

/* Admin empty states */
.admin-empty { padding: 2rem; text-align: center; font-size: 0.875rem; color: var(--sand-400); }
.admin-empty-card { padding: 2rem; text-align: center; font-size: 0.875rem; color: var(--sand-400); }

/* --- Filter panel visibility --- */
.filter-panel.hidden { display: none; }
.filter-panel.show { display: flex; }

/* --- Lightbox --- */
.lightbox { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.92); align-items: center; justify-content: center; padding: 2rem; }
.lightbox.show { display: flex; }
.lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 0.5rem; }
.lightbox-close { position: absolute; top: 1rem; right: 1.5rem; font-size: 2.5rem; color: #fff; background: none; border: none; cursor: pointer; line-height: 1; z-index: 10000; }
.lightbox-close:hover { color: var(--brand-300); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 2rem; color: #fff; background: rgba(255,255,255,0.1); border-radius: 9999px; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; z-index: 10000; }
.lightbox-nav:hover { background: rgba(255,255,255,0.25); }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }
.lightbox-counter { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); border-radius: 9999px; background: rgba(255,255,255,0.1); padding: 0.375rem 1rem; font-size: 0.875rem; color: #fff; z-index: 10000; }

/* --- Detail gallery grid (listing page) --- */
.detail-gallery-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 0.25rem; border-radius: 1rem; overflow: hidden; aspect-ratio: 4/3; background: var(--sand-100); }
@media (min-width: 640px) { .detail-gallery-grid { aspect-ratio: 16/7; gap: 0.5rem; border-radius: 1.5rem; } }
.gallery-main { grid-column: 1 / 4; grid-row: 1 / 4; position: relative; overflow: hidden; cursor: pointer; background: var(--sand-200); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.gallery-main:hover img { transform: scale(1.03); }
.gallery-thumb { overflow: hidden; cursor: pointer; background: var(--sand-200); position: relative; }
.gallery-thumb:nth-child(2) { grid-column: 1; grid-row: 3; display: none; }
.gallery-thumb:nth-child(3) { grid-column: 2; grid-row: 3; display: none; }
.gallery-thumb:nth-child(4) { grid-column: 3; grid-row: 3; display: none; }
@media (min-width: 640px) {
  .gallery-thumb:nth-child(2) { grid-column: 1; grid-row: 3; display: block; }
  .gallery-thumb:nth-child(3) { grid-column: 2; grid-row: 3; display: block; }
  .gallery-thumb:nth-child(4) { grid-column: 3; grid-row: 3; display: block; }
  .gallery-main { grid-column: 1 / 4; grid-row: 1 / 3; }
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.gallery-thumb:hover img { transform: scale(1.05); }
.gallery-count-btn { position: absolute; bottom: 0.75rem; right: 0.75rem; display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 9999px; background: rgba(28,25,23,0.75); padding: 0.5rem 1rem; font-size: 0.75rem; font-weight: 600; color: #fff; backdrop-filter: blur(4px); transition: background 0.2s; }
.gallery-count-btn:hover { background: rgba(28,25,23,0.9); }

/* --- Promo grid (ad + neighborhoods on homepage) --- */
.promo-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .promo-grid { grid-template-columns: 1fr 1fr; } }

/* --- Neighborhood masonry --- */
.neighborhood-masonry-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1rem; min-height: 400px; }
.neighborhood-tile { position: relative; overflow: hidden; border-radius: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: all 0.3s; }
.neighborhood-tile.big { grid-row: span 2; }
.neighborhood-tile:hover { box-shadow: 0 12px 24px rgba(0,0,0,0.15); transform: translateY(-2px); }
.neighborhood-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }
.neighborhood-tile:hover img { transform: scale(1.1); }
.neighborhood-tile-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,25,23,0.8), rgba(28,25,23,0.3), transparent); }
.neighborhood-tile-content { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-height: 180px; padding: 1.5rem; text-align: center; }
.neighborhood-tile-icon { display: flex; align-items: center; justify-content: center; border-radius: 1rem; background: rgba(255,255,255,0.2); color: #fff; backdrop-filter: blur(4px); width: 3rem; height: 3rem; transition: background 0.3s; }
.neighborhood-tile.big .neighborhood-tile-icon { width: 4rem; height: 4rem; }
.neighborhood-tile:hover .neighborhood-tile-icon { background: var(--brand-600); }
.neighborhood-tile-name { margin-top: 1rem; font-family: 'Lora', Georgia, serif; font-weight: 700; color: #fff; font-size: 1.125rem; }
.neighborhood-tile.big .neighborhood-tile-name { font-size: 1.5rem; }
.neighborhood-tile-count { margin-top: 0.25rem; font-size: 0.75rem; color: #e7e5e4; }

/* --- Neighborhood pills --- */
.neighborhood-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 0.625rem; margin-top: 2rem; }
.neighborhood-pill { display: inline-flex; align-items: center; gap: 0.35rem; border: 0; background: transparent; padding: 0.2rem 0; font-size: 0.75rem; font-weight: 500; color: var(--brand-700); transition: color 0.2s; }
.neighborhood-pill:hover { color: var(--brand-500); }
.neighborhood-pill-dot { width: 0.25rem; height: 0.25rem; border-radius: 9999px; background: var(--brand-400); transition: background 0.2s; }
.neighborhood-pill:hover .neighborhood-pill-dot { background: var(--brand-600); }

/* --- Ad slider --- */
.ad-slider-wrap { position: relative; border-radius: 1.5rem; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); aspect-ratio: 16/10; background: var(--sand-100); }
.ad-slide { width: 100%; height: 100%; position: relative; }
.ad-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: rgba(255,255,255,0.8); color: var(--brand-800); font-size: 1.25rem; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: background 0.2s; z-index: 5; }
.ad-nav:hover { background: #fff; }
.ad-prev { left: 0.75rem; }
.ad-next { right: 0.75rem; }
.ad-dots { position: absolute; bottom: 0.75rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; z-index: 5; }
.ad-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: rgba(255,255,255,0.5); cursor: pointer; transition: all 0.2s; }
.ad-dot.active { width: 2rem; background: #fff; }