/* ============================================================
   WebDealz - Refresh Layer (wd-refresh.css)
   Loaded AFTER style.css and wd-compat.css.

   1) WIDTH - content sits in a centered, generous 1400px column
      (--wd-max) with a fluid gutter, instead of the old boxed
      720px-1400px column or a stretched edge-to-edge layout.
   2) Light modern polish - glass navbar with a brand accent bar,
      richer hero, softer cards, gradient CTAs, refined spacing.

   Notes on the cascade:
   - Tailwind's runtime injects its stylesheet LAST in <head>, so
     any rule that must beat a Tailwind utility is written with a
     doubled class (specificity 0,2,0 > Tailwind's 0,1,0).
   - Inline style="max-width" still wins over a plain selector,
     which keeps the few deliberately-narrow reading pages
     (blog.php, page.php, orders/*) readable.
   ============================================================ */

:root {
  --wd-gutter: clamp(1rem, 2.2vw, 3rem);
  --wd-max: 1400px;
  --wd-radius: 16px;
  --wd-radius-sm: 10px;
  --wd-shadow: 0 4px 16px rgba(11, 31, 66, .07);
  --wd-shadow-md: 0 16px 34px -12px rgba(11, 31, 66, .16);
  --wd-shadow-lg: 0 26px 60px -18px rgba(11, 31, 66, .22);
}

/* ---------- 1. Content width ---------- */
/* Generous, centered 1400px column with a fluid gutter. Uses a
   doubled class so it beats Tailwind's runtime .container (which
   is injected last) and the compat/style .container rules. Inline
   style="max-width" still wins, keeping the deliberately-narrow
   reading pages (blog.php, page.php, orders/*) readable. */
.container.container,
.container-fluid.container-fluid {
  width: 100%;
  max-width: var(--wd-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--wd-gutter);
  padding-right: var(--wd-gutter);
}

/* ---------- 2. Header: glass navbar + brand accent ---------- */
.wd-navbar.wd-navbar {
  background: #ffffff;
}
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .wd-navbar.wd-navbar {
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(165%) blur(14px);
    backdrop-filter: saturate(165%) blur(14px);
  }
}
.wd-navbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(90deg,
    var(--wd-primary) 0%,
    var(--wd-primary-light) 55%,
    var(--wd-orange) 100%);
}
.wd-navbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(8, 102, 245, .28) 50%, transparent);
  opacity: .7;
}
.wd-nav-inner {
  width: 100%;
  max-width: var(--wd-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--wd-gutter);
  padding-right: var(--wd-gutter);
}

/* ---------- 3. Hero ---------- */
.wd-hero {
  background:
    radial-gradient(58% 76% at 5% -12%, rgba(8, 102, 245, .12), transparent 62%),
    radial-gradient(46% 60% at 101% 2%, rgba(255, 107, 0, .07), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--wd-bg-soft) 100%);
}
.wd-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(rgba(11, 31, 66, .05) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent 68%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent 68%);
}
@media (min-width: 992px) {
  .wd-hero { padding: clamp(3rem, 5.4vw, 5.2rem) 0 clamp(2.6rem, 4.4vw, 4.2rem); }
}

/* ---------- 4. Section rhythm ---------- */
@media (min-width: 576px) {
  .section { padding: clamp(2.9rem, 4.6vw, 4.4rem) 0; }
  .section-tight { padding: clamp(1.6rem, 2.6vw, 2.3rem) 0; }
}
.section-head h2 { font-size: clamp(1.35rem, 2vw, 1.7rem); }

/* ---------- 5. Stats band ---------- */
.wd-stats-band {
  background: linear-gradient(180deg, #ffffff 0%, var(--wd-bg-soft2) 100%);
  padding: clamp(1.7rem, 2.6vw, 2.4rem) 0;
}
.wd-stat strong { font-size: clamp(1.7rem, 2.4vw, 2.2rem); }

/* ---------- 6. Buttons: gradient CTAs ---------- */
.btn-danger {
  background: var(--wd-grad-primary);
  border-color: transparent;
  box-shadow: 0 8px 20px -8px rgba(8, 102, 245, .55);
}
.btn-danger:hover, .btn-danger:focus {
  background: linear-gradient(135deg, #1f7aff 0%, #0447b3 100%);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -9px rgba(8, 102, 245, .65);
}
.btn-primary {
  background: var(--wd-grad-primary);
  border-color: transparent;
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, #1f7aff 0%, #0447b3 100%);
  border-color: transparent;
}
.btn-sell {
  background: var(--wd-grad-orange);
  border-color: transparent;
  box-shadow: 0 8px 20px -8px rgba(255, 107, 0, .55);
}
.btn-sell:hover, .btn-sell:focus {
  background: linear-gradient(135deg, #ff7a1a 0%, #e05a00 100%);
  border-color: transparent;
  transform: translateY(-1px);
}

/* ---------- 7. Cards: slightly softer ---------- */
.listing-card:hover,
.blog-card:hover,
.sold-card:hover,
.story-card:hover,
.trust-card:hover,
.cat-card:hover { box-shadow: var(--wd-shadow-md); }

/* ---------- 8. Dashboard main gutter ---------- */
@media (min-width: 992px) {
  .dash-main { padding: 1.9rem var(--wd-gutter) 2.8rem; }
}

/* ---------- 9. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn-danger:hover, .btn-primary:hover, .btn-sell:hover { transform: none; }
}