/* Yad2 Scraper — White Modern Theme */

html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
tbody tr { transition: background-color 0.15s ease; }

@keyframes gentle-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.animate-pulse { animation: gentle-pulse 2s ease-in-out infinite; }

/* Badge styles */
.badge-agency { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.badge-private { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.badge-forsale { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.badge-rent { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.badge-commercial { background: #faf5ff; color: #7e22ce; border: 1px solid #e9d5ff; }
.badge-banking { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

/* Feature pills */
.feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.8rem;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}
.feature-pill.active { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }

/* Change timeline */
.change-item { border-left: 3px solid #e2e8f0; padding-left: 12px; }
.change-item.price { border-left-color: #22c55e; }

@media (max-width: 768px) {
  table { font-size: 0.75rem; }
  th, td { padding: 0.375rem 0.5rem; }
}
/* Toast notifications paired with public/js/core/toast.js. */

.toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
[dir="rtl"] .toast-container {
  right: auto;
  left: 16px;
}

.toast {
  min-width: 240px;
  max-width: 360px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: auto;
  cursor: pointer;
}
.toast.toast-in {
  opacity: 1;
  transform: translateY(0);
}

.toast-success { background: #059669; }
.toast-error   { background: #dc2626; }
.toast-warn    { background: #d97706; }
.toast-info    { background: #111827; }
/* Shared form controls. Pages should prefer these classes over inline styles. */

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.form-field label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}
.form-field .hint {
  font-size: 12px;
  color: #6b7280;
}
.form-field .error {
  font-size: 12px;
  color: #dc2626;
}
.form-input,
.form-select,
.form-textarea {
  appearance: none;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #25d366;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.15);
}
.form-input[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
  border-color: #dc2626;
}
.form-textarea { min-height: 80px; resize: vertical; }

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primary {
  background: #25d366;
  color: #fff;
}
.btn-primary:hover { background: #1fb858; }
.btn-ghost {
  background: transparent;
  color: #374151;
  border-color: #d1d5db;
}
.btn-ghost:hover { background: #f3f4f6; }
.btn-danger {
  background: #fee2e2;
  color: #dc2626;
}
.btn-danger:hover { background: #fecaca; }
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Geo-suggest dropdown (paired with components/geo-suggest.js) */
.geo-field { position: relative; }
.geo-suggest {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  max-height: 240px;
  overflow-y: auto;
  z-index: 20;
}
.geo-option {
  padding: 10px 12px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.geo-option:hover { background: #f3f4f6; }
.geo-sub { color: #9ca3af; font-size: 12px; }

/* Image uploader preview */
.upload-preview {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  margin: 4px;
  border: 1px solid #e5e7eb;
}
/* Accessibility widget — floating button + panel + body-level mode classes.
   Legal basis: Israeli accessibility regulation 5768-2008 (תקנה 35), standard
   IS-5568 (based on WCAG 2.0 AA). Widget appears on every public page; only
   on public, not on /app or /admin.

   The DOM for the button and panel is injected by core/accessibility.js —
   this file only supplies visuals + the body-level modifiers that each
   toggle applies. Keep page rules scoped to the body class so resetting is
   a single class removal. */

/* ── Floating button ────────────────────────────────────────────── */
.a11y-btn {
  position: fixed;
  bottom: 20px;
  inset-inline-start: 20px;
  width: 52px;
  height: 52px;
  border-radius: 9999px;
  background: #2563eb;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.35);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 9990;
  transition: transform 0.15s ease-out, background 0.15s;
}
.a11y-btn:hover { background: #1d4ed8; transform: scale(1.06); }
.a11y-btn:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }

/* Expose the button with prominent outline when keyboard nav mode is on. */
body.a11y-keyboard *:focus-visible {
  outline: 3px solid #fbbf24 !important;
  outline-offset: 2px !important;
}

/* ── Panel ──────────────────────────────────────────────────────── */
.a11y-panel {
  position: fixed;
  bottom: 84px;
  inset-inline-start: 20px;
  width: 320px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 120px);
  background: #fff;
  color: #111827;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
  padding: 16px;
  overflow-y: auto;
  z-index: 9991;
  display: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
}
.a11y-panel.open { display: block; }
.a11y-panel h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 2px;
  color: #111827;
}
.a11y-panel .a11y-sub {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 14px;
}
.a11y-panel .a11y-section {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
  margin: 14px 0 6px;
}
.a11y-panel .a11y-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  color: #1f2937;
  border: 1px solid transparent;
  background: #f9fafb;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 500;
  transition: border-color 0.15s, background 0.15s;
}
.a11y-panel .a11y-row:hover { border-color: #d1d5db; background: #f3f4f6; }
.a11y-panel .a11y-row.active { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.a11y-panel .a11y-row svg { width: 18px; height: 18px; }
.a11y-panel .a11y-row .a11y-check { width: 16px; height: 16px; opacity: 0; transition: opacity 0.15s; color: #1d4ed8; }
.a11y-panel .a11y-row.active .a11y-check { opacity: 1; }
.a11y-panel .a11y-reset {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.a11y-panel .a11y-reset:hover { background: #fee2e2; }
.a11y-panel .a11y-font-group {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.a11y-panel .a11y-font-btn {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #374151;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-weight: 600;
}
.a11y-panel .a11y-font-btn:hover { border-color: #d1d5db; background: #f3f4f6; }
.a11y-panel .a11y-font-btn.active { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.a11y-panel .a11y-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5;
}
.a11y-panel .a11y-footer a { color: #2563eb; text-decoration: underline; }

/* ── Body-level mode classes (applied by JS, persisted in localStorage) ─ */

/* Font scaling — triples up on html to cascade. Keep under 140% to avoid
   breaking layouts that depend on measured sizes. */
html.a11y-font-1 { font-size: 112.5%; }
html.a11y-font-2 { font-size: 125%; }
html.a11y-font-3 { font-size: 137.5%; }

/* High contrast — force strong black/white/yellow for low-vision users. */
body.a11y-contrast,
body.a11y-contrast * {
  background: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}
body.a11y-contrast a,
body.a11y-contrast button:not(.a11y-btn),
body.a11y-contrast [role="button"] { color: #ffff00 !important; text-decoration: underline !important; }
body.a11y-contrast img,
body.a11y-contrast picture,
body.a11y-contrast svg {
  filter: contrast(1.1) brightness(1.1);
}
/* Keep the widget itself legible in contrast mode */
body.a11y-contrast .a11y-btn { background: #ffff00 !important; color: #000 !important; border-color: #000 !important; }
body.a11y-contrast .a11y-panel,
body.a11y-contrast .a11y-panel * { background: #000 !important; color: #fff !important; border-color: #fff !important; }
body.a11y-contrast .a11y-panel .a11y-row.active,
body.a11y-contrast .a11y-panel .a11y-font-btn.active { background: #ffff00 !important; color: #000 !important; }

/* Grayscale */
body.a11y-grayscale { filter: grayscale(100%); }

/* Invert (dark-ish mode for light sensitivity) */
body.a11y-invert {
  filter: invert(100%) hue-rotate(180deg);
  background: #fff;
}
body.a11y-invert img,
body.a11y-invert picture,
body.a11y-invert video,
body.a11y-invert [style*="background-image"] {
  filter: invert(100%) hue-rotate(180deg);
}

/* Readable font — swap to a highly-legible system serif for dyslexia users */
body.a11y-readable-font,
body.a11y-readable-font * {
  font-family: 'Verdana', 'Tahoma', 'Arial', sans-serif !important;
  letter-spacing: 0.02em !important;
  line-height: 1.7 !important;
  word-spacing: 0.06em !important;
}

/* Highlight all links — strong color + underline on every anchor */
body.a11y-highlight-links a {
  color: #1d4ed8 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  outline: 1px dashed rgba(29, 78, 216, 0.4);
  outline-offset: 2px;
}

/* Big cursor */
body.a11y-big-cursor,
body.a11y-big-cursor * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M2 2 L2 28 L10 22 L14 36 L20 34 L16 20 L28 20 Z' fill='%23111' stroke='%23fff' stroke-width='2'/></svg>") 2 2, auto !important;
}

/* Reduced motion — kill animations + transitions */
body.a11y-no-motion,
body.a11y-no-motion * {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Screen-reader-only helper (used for a11y-button label etc) */
.a11y-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}