/* ==========================================================================
   DiscountFinder Global Styles (df.css)
   - Bootstrap-friendly overrides
   - Mobile-first responsive tweaks
   - Cards, badges, map containers, compare modal
   - Light & Dark scheme support
   ========================================================================== */

/* ---------- Reset & base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

:root {
  --df-bg: #f7f7f9;
  --df-surface: #ffffff;
  --df-text: #1f2937;
  --df-muted: #6b7280;
  --df-border: #e5e7eb;
  --df-brand: #0d6efd;     /* Bootstrap primary */
  --df-accent: #22c55e;    /* green-500 */
  --df-warning: #f59e0b;   /* amber-500 */
  --df-danger: #ef4444;    /* red-500 */
  --df-shadow: 0 4px 14px rgba(0,0,0,.08);
  --df-radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --df-bg: #0b0e12;
    --df-surface: #12161c;
    --df-text: #e5e7eb;
    --df-muted: #9ca3af;
    --df-border: #1f2937;
    --df-shadow: 0 6px 22px rgba(0,0,0,.35);
  }
  .bg-light { background-color: var(--df-bg) !important; }
}

html, body { height: 100%; }
body {
  background: var(--df-bg);
  color: var(--df-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links are slightly toned down for readability */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Navbar ---------- */
.navbar {
  backdrop-filter: saturate(120%) blur(6px);
}
.navbar, .navbar.bg-white {
  background: var(--df-surface) !important;
}
.navbar .navbar-brand { letter-spacing: .2px; }
.navbar .nav-link.active { font-weight: 600; }

/* ---------- Forms & Inputs ---------- */
.form-control, .form-select {
  border-radius: 10px;
  border-color: var(--df-border);
  background-color: var(--df-surface);
  color: var(--df-text);
}
.form-control::placeholder { color: var(--df-muted); }
.form-control:focus, .form-select:focus {
  box-shadow: 0 0 0 .22rem rgba(13,110,253,.15);
  border-color: #9ec5fe;
}
.input-group .form-control {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

/* Buttons: keep Bootstrap look but slightly rounder */
.btn { border-radius: 10px; }
.btn-outline-secondary { color: var(--df-text); border-color: var(--df-border); }
.btn-outline-secondary:hover { background: #f3f4f6; }
@media (prefers-color-scheme: dark) {
  .btn-outline-secondary:hover { background: #232a34; }
}

/* ---------- Cards (deal cards) ---------- */
.deal-card,
.card {
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius);
  background: var(--df-surface);
  box-shadow: var(--df-shadow);
}
.card:hover {
  transform: translateY(-1px);
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 10px 26px rgba(0,0,0,.09);
}
.card .card-title { line-height: 1.25; }
.card .text-muted { color: var(--df-muted) !important; }

/* Two-line clamp for titles if they get long */
.df-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Price row */
.df-price-now { font-weight: 700; letter-spacing: .2px; }
.df-price-was {
  text-decoration: line-through;
  color: var(--df-muted);
  margin-left: .25rem;
}

/* ---------- Badges ---------- */
.badge { font-weight: 600; border-radius: 999px; }
.badge.text-bg-success { background: rgba(34,197,94,.12) !important; color: #16a34a !important; }
.badge.text-bg-light   { background: rgba(2,6,23,.06) !important; color: var(--df-text) !important; }
@media (prefers-color-scheme: dark) {
  .badge.text-bg-light { background: rgba(255,255,255,.08) !important; color: var(--df-text) !important; }
}

/* Small like heart spacing */
.badge[df-like] { display: inline-flex; align-items: center; gap: .35rem; }

/* ---------- Tables ---------- */
.table {
  --bs-table-bg: transparent;
  color: var(--df-text);
}
.table thead th {
  font-size: .825rem;
  color: var(--df-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  border-bottom-color: var(--df-border);
}
.table tbody tr:hover { background: rgba(2,6,23,.035); }
@media (prefers-color-scheme: dark) {
  .table tbody tr:hover { background: rgba(255,255,255,.04); }
}
.table td, .table th { border-color: var(--df-border); }

/* ---------- Map containers ---------- */
#resultsMap,
#compareMap {
  border-radius: var(--df-radius);
  border: 1px solid var(--df-border);
  background: var(--df-surface);
  box-shadow: var(--df-shadow);
}
.leaflet-container a { color: var(--df-brand); }
.leaflet-popup-content-wrapper {
  border-radius: 12px;
  box-shadow: var(--df-shadow);
}
.leaflet-popup-content { color: var(--df-text); }
.leaflet-popup-tip { display: none; }
.leaflet-control-attribution {
  background: rgba(255,255,255,.75);
  border-radius: 8px;
  padding: 0 .35rem;
}
@media (prefers-color-scheme: dark) {
  .leaflet-control-attribution { background: rgba(18,22,28,.85); }
}

/* ---------- Modal (Compare) ---------- */
.modal-content {
  background: var(--df-surface);
  border-radius: 16px;
  border: 1px solid var(--df-border);
  box-shadow: var(--df-shadow);
}
.modal-header { border-bottom-color: var(--df-border); }
.modal-body { color: var(--df-text); }
.alert.border { border-color: var(--df-border) !important; background: rgba(2,6,23,.02); }
@media (prefers-color-scheme: dark) {
  .alert.border { background: rgba(255,255,255,.03); }
}

/* ---------- Utilities ---------- */
.small, small { font-size: .88rem; }
.text-muted { color: var(--df-muted) !important; }
.rounded-2xl { border-radius: 18px; }
.shadow-soft { box-shadow: var(--df-shadow); }

/* Spacing helpers for tight mobile layouts */
.g-1  { --bs-gutter-x: .25rem; --bs-gutter-y: .25rem; }
.g-2  { --bs-gutter-x: .5rem;  --bs-gutter-y: .5rem; }
.g-3  { --bs-gutter-x: 1rem;   --bs-gutter-y: 1rem; }
.g-4  { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }

/* ---------- Search toolbar tweaks ---------- */
#searchForm .form-control, #searchForm .form-select {
  min-height: 44px;
}
#searchForm .btn { min-height: 44px; }
#status { min-height: 24px; }

/* ---------- Auth dropdown ---------- */
.dropdown-menu {
  border-radius: 12px;
  border-color: var(--df-border);
  background: var(--df-surface);
  box-shadow: var(--df-shadow);
}
.dropdown-item { color: var(--df-text); }
.dropdown-item:hover { background: rgba(2,6,23,.04); }
@media (prefers-color-scheme: dark) {
  .dropdown-item:hover { background: rgba(255,255,255,.06); }
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 991.98px) {
  .navbar .navbar-brand { font-size: 1.05rem; }
  .card .card-body { padding: 1rem; }
  #resultsMap, #compareMap { height: 320px !important; }
}

@media (max-width: 575.98px) {
  /* Stack search form tighter on phones */
  #searchForm .col-6, #searchForm .col-12, #searchForm .col-lg-1, #searchForm .col-lg-2 {
    padding-left: .35rem; padding-right: .35rem;
  }
  .deal-card .badge { font-size: .72rem; }
  .btn { padding: .45rem .7rem; }
}

/* ---------- SEO helpers (visual) ---------- */
/* If you add any OG/Twitter preview image on page, keep it tidy */
.og-preview {
  border: 1px dashed var(--df-border);
  border-radius: 12px;
  padding: .75rem;
  background: rgba(2,6,23,.02);
}

/* ---------- Accessibility ---------- */
:focus-visible {
  outline: 3px solid rgba(13,110,253,.35);
  outline-offset: 2px;
}

/* Keep hr subtle */
hr { border-top-color: var(--df-border); }


/* === DiscountFinder "cream" house style overrides (site-wide) === */
:root {
  --df-bg: #f6f1ea;
  --df-surface: #ffffff;
  --df-text: #2b2b2b;
  --df-muted: #6b6b6b;
  --df-border: #efe9e1;
}
body { background: var(--df-bg); }
.navbar, .site-footer { background: var(--df-bg) !important; }
.df-tile, .card, .modal-content { border-color: var(--df-border); }

/* === Results card refresh === */
.df-card {
  border: 1px solid var(--df-border);
  border-radius: 16px;
  box-shadow: var(--df-shadow);
  background: var(--df-surface);
  padding: 10px;
}
.df-card .card-title a { color: var(--df-text); text-decoration: none; }
.df-card .card-title a:hover { text-decoration: underline; }

.df-like {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .6rem; border-radius: 999px;
  background: rgba(2,6,23,.05); color: var(--df-text);
  border: 1px solid var(--df-border);
}
@media (prefers-color-scheme: dark) {
  .df-like { background: rgba(255,255,255,.06); }
}

.df-ad {
  border: 2px dashed var(--df-border);
  border-radius: 16px;
  background: rgba(2,6,23,.02);
  height: 100%;
}
.df-ad {
  height: 250px; /* typical 300x250 box height */
  display:flex; align-items:center; justify-content:center;
  color: var(--df-muted);
}

#loading .spinner-border { width: 2.5rem; height: 2.5rem; }


/* ===== DiscountFinder – minimal shared tweaks (append to df.css) ===== */
:root{
  --df-muted: #6b7280;       /* fallback if not already defined */
  --df-accent: #0d6efd;      /* brand accent (Bootstrap primary-ish) */
  --df-border: #e5e7eb;
}

/* Accent button used on search/compare */
.btn-accent{
  background: var(--df-accent);
  color:#fff;
  border:0;
}
.btn-accent:hover{ filter:brightness(.95); color:#fff; }

/* Links that should read as “action” but not full buttons */
.link-accent{
  color: var(--df-accent);
  text-decoration: none;
}
.link-accent:hover{ text-decoration: underline; }

/* Compare table helpers */
.table thead th{ white-space:nowrap; }
.price-cell .was{
  text-decoration: line-through;
  color: var(--df-muted);
  font-size: .9em;
}
.muted{ color: var(--df-muted); }

/* “Best” highlight row on top result */
.best{
  outline: 2px solid rgba(16,185,129,.6);
  outline-offset: -2px;
  border-radius: 10px;
}

/* Web-source badge (SERP/Google) */
.badge-web{
  display:inline-block;
  padding:.2rem .45rem;
  border-radius:.35rem;
  background: rgba(255,193,7,.2);
  border:1px solid rgba(255,193,7,.35);
  color:#664d03;
  font-size:.75rem;
  line-height:1;
}

/* Loading label visibility toggle */
.loading{ display:none; }
.loading.show{ display:block; }

/* Optional: subtle row hover for tables */
.table tbody tr:hover{ background-color: rgba(0,0,0,.02); }

/* Optional: ad slot spacing inside cards or table cells (if used) */
.ad-slot{
  border:1px dashed var(--df-border);
  border-radius:.5rem;
  padding:.75rem;
  background:#fafafa;
}

.soc-btn{
  width: 36px; height: 36px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  text-decoration: none;
  border: 1px solid var(--df-border);
  background: var(--df-surface);
  color: var(--df-text);
  box-shadow: var(--df-shadow);
  transition: transform .12s ease, opacity .12s ease;
}
.soc-btn:hover{ transform: translateY(-1px); opacity: .9; }


/* ==========================================================================
   Global Theme Toggle (Bootstrap 5.3 color mode + DF variables)
   Put this at the VERY END of df.css so it overrides the cream :root block.
   ========================================================================== */

:root { color-scheme: light; }

/* Light mode (your cream house style) */
html[data-bs-theme="light"]{
  color-scheme: light;
  --df-bg: #f6f1ea;
  --df-surface: #ffffff;
  --df-text: #2b2b2b;
  --df-muted: #6b6b6b;
  --df-border: #efe9e1;
  --df-shadow: 0 4px 14px rgba(0,0,0,.08);
}

/* Dark mode */
html[data-bs-theme="dark"]{
  color-scheme: dark;
  --df-bg: #0b0e12;
  --df-surface: #12161c;
  --df-text: #e5e7eb;
  --df-muted: #9ca3af;
  --df-border: #1f2937;
  --df-shadow: 0 6px 22px rgba(0,0,0,.35);
}

/* Use DF variables everywhere */
body{
  background: var(--df-bg);
  color: var(--df-text);
}

/* Keep your “navbar/footer use df-bg” behavior, but now it follows the theme */
.navbar, .site-footer{
  background: var(--df-bg) !important;
  border-color: var(--df-border) !important;
}

/* Make Bootstrap-y bits follow DF colors */
.dropdown-menu{ background: var(--df-surface); }
.navbar .nav-link{ color: var(--df-text); }
.navbar .nav-link:hover{ opacity: .85; }

/* Nice avatar pill */
.account-avatar{
  width: 28px; height: 28px;
  border-radius: 999px;
  display: inline-grid; place-items: center;
  font-weight: 800;
  background: rgba(13,110,253,.15);
  border: 1px solid var(--df-border);
}
html[data-bs-theme="dark"] .account-avatar{
  background: rgba(255,255,255,.08);
}