/*
Theme Name: The Sale Scout
Theme URI: https://example.com/the-sale-scout
Author: Larry “Chip” Ziem (with ChatGPT)
Author URI: https://chipzworld.com
Description: Directory theme for yard sales, garage sales, flea markets, thrift stores, antique stores, and estate sales. Search by ZIP + radius with map pins. Includes paid listing credits (WooCommerce optional).
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: the-sale-scout
Tags: directory, custom-post-types, translation-ready
*/

:root {
  --tss-bg: #0b1220;
  --tss-border: rgba(255,255,255,0.10);
  --tss-text: rgba(255,255,255,0.92);
  --tss-muted: rgba(255,255,255,0.72);
  --tss-accent: #ffd04a;
  --tss-accent2: #7cc7ff;
  --tss-danger: #ff6b6b;
  --tss-radius: 18px;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(124,199,255,0.25), transparent 60%),
              radial-gradient(900px 500px at 110% 10%, rgba(255,208,74,0.20), transparent 55%),
              var(--tss-bg);
  color: var(--tss-text);
}

a { color: var(--tss-accent2); text-decoration: none; }
a:hover { text-decoration: underline; }

.tss-wrap { max-width: 1100px; margin: 0 auto; padding: 28px 16px 56px; }
.tss-header {
  display:flex; align-items:center; justify-content:space-between; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--tss-border); border-radius: var(--tss-radius);
  background: rgba(0,0,0,0.18); backdrop-filter: blur(10px);
}
.tss-brand { display:flex; align-items:center; gap: 12px; }
.tss-logo {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,208,74,0.9), rgba(124,199,255,0.85));
  display:flex; align-items:center; justify-content:center;
  color: rgba(11,18,32,0.95); font-weight: 800;
}
.tss-title { font-size: 18px; font-weight: 750; line-height: 1.1; }
.tss-subtitle { font-size: 12px; color: var(--tss-muted); margin-top: 2px; }

.tss-nav { display:flex; align-items:center; gap: 10px; flex-wrap: wrap; }
.tss-btn {
  display:inline-flex; align-items:center; gap: 8px;
  padding: 10px 12px; border-radius: 14px;
  border: 1px solid var(--tss-border);
  background: rgba(255,255,255,0.06);
  color: var(--tss-text);
  cursor: pointer;
}
.tss-btn:hover { background: rgba(255,255,255,0.09); }
.tss-btn--accent {
  background: rgba(255,208,74,0.13);
  border-color: rgba(255,208,74,0.35);
}
.tss-pill {
  font-size: 12px; padding: 5px 8px; border-radius: 999px;
  border: 1px solid var(--tss-border); color: var(--tss-muted);
}

.tss-hero {
  margin-top: 18px;
  padding: 22px 18px;
  border-radius: calc(var(--tss-radius) + 4px);
  border: 1px solid var(--tss-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
}
.tss-hero h1 { margin: 0 0 8px; font-size: 30px; letter-spacing: -0.02em; }
.tss-hero p { margin: 0; color: var(--tss-muted); max-width: 70ch; }

.tss-grid { display:grid; grid-template-columns: 1.2fr 0.8fr; gap: 14px; margin-top: 14px; }
@media (max-width: 900px) { .tss-grid { grid-template-columns: 1fr; } }

.tss-card {
  border: 1px solid var(--tss-border);
  border-radius: var(--tss-radius);
  background: rgba(0,0,0,0.16);
  backdrop-filter: blur(10px);
  padding: 14px;
}
.tss-card h2 { margin: 0 0 10px; font-size: 16px; }
.tss-field { display:flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.tss-field label { font-size: 12px; color: var(--tss-muted); }
.tss-input, .tss-select, .tss-textarea {
  width: 100%;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--tss-border);
  background: rgba(255,255,255,0.05);
  color: var(--tss-text);
  outline: none;
}
.tss-input::placeholder, .tss-textarea::placeholder { color: rgba(255,255,255,0.45); }
.tss-row { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .tss-row { grid-template-columns: 1fr; } }

.tss-results { display:flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.tss-item {
  border: 1px solid var(--tss-border);
  background: rgba(255,255,255,0.04);
  border-radius: 16px;
  padding: 12px;
}
.tss-item-title { font-weight: 750; font-size: 15px; margin: 0 0 4px; }
.tss-item-meta { color: var(--tss-muted); font-size: 12px; display:flex; flex-wrap: wrap; gap: 8px; }
.tss-item-meta span {
  display:inline-flex; gap: 6px; align-items:center;
  padding: 4px 8px; border-radius: 999px; border: 1px solid var(--tss-border);
  background: rgba(0,0,0,0.14);
}

.tss-note { color: var(--tss-muted); font-size: 12px; }
.tss-error { color: var(--tss-danger); font-size: 12px; }
.tss-success { color: rgba(124, 255, 180, 0.95); font-size: 12px; }

#tss_map {
  height: 360px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
  margin-top: 12px;
}

.tss-footer { margin-top: 22px; color: var(--tss-muted); font-size: 12px; opacity: 0.9; }