/* ============================================================
   listings-v2.css — Visual unification overlay 2026
   Re-skin .cd-* (browse), .sd-* (service detail), .sc-* (create)
   to match the unified blue brand design system.
   Uses single-class !important to override loaded-first stylesheets.
   ============================================================ */

/* === Brand tokens for listings (CSS vars override) === */
.cd-page, .sd-page, .sc-page {
  --brand-50:  #eff6ff;
  --brand-100: #dbeafe;
  --brand-500: #3b82f6;
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
  --brand-800: #1e40af;
  --brand-900: #1e3a8a;
  --ink-900:#0f172a; --ink-700:#334155; --ink-500:#64748b; --ink-400:#94a3b8;
  --line:#e2e8f0; --bg:#f8fafc;
}

.cd-page, .sd-page, .sc-page,
.cd-page *, .sd-page *, .sc-page * {
  font-family: 'Inter', 'Catamaran', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ====================================================================
   BROWSE / CATEGORY-DETAIL (cd-*)
   ==================================================================== */

.cd-hero {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
  color: #fff;
}
.cd-hero-badge {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 9999px !important;
  font-weight: 700;
  letter-spacing: .02em;
}
.cd-hero-title, .cd-hero-inner h1 {
  color: #fff !important;
  font-weight: 800;
  letter-spacing: -.02em;
}
.cd-hero-desc { color: rgba(255,255,255,.92) !important; }

.cd-hero-stats { gap: 1rem; }
.cd-hero-stat {
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(6px);
}
.cd-hero-stat strong { color: #fff !important; }

/* Search card */
.cd-search-card {
  border-radius: 14px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.08) !important;
}
.cd-search-btn {
  background: linear-gradient(135deg, #2563eb, #1e40af) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(37,99,235,.3) !important;
}
.cd-search-btn:hover { box-shadow: 0 6px 18px rgba(37,99,235,.4) !important; }

/* Breadcrumbs */
.cd-breadcrumbs a { color: #2563eb !important; }
.cd-breadcrumbs a:hover { color: #1e40af !important; text-decoration: underline; }

/* Trust bar */
.cd-trust-bar {
  background: #fff !important;
  border-radius: 14px !important;
  border: 1px solid #e2e8f0 !important;
}
.cd-trust-icon { border-radius: 12px !important; }
.cd-trust-icon--tools  { background: #dbeafe !important; color: #1d4ed8 !important; }
.cd-trust-icon--users  { background: #dcfce7 !important; color: #15803d !important; }
.cd-trust-icon--star   { background: #fef3c7 !important; color: #b45309 !important; }
.cd-trust-icon--shield { background: #e0e7ff !important; color: #4338ca !important; }
.cd-trust-value { color: #0f172a !important; font-weight: 800; }
.cd-trust-label { color: #64748b !important; }

/* Section titles */
.cd-section-title {
  color: #0f172a !important;
  font-weight: 800;
  letter-spacing: -.015em;
}
.cd-section-title em {
  color: #2563eb !important;
  font-style: normal;
}

/* Subcategory cards */
.cd-subcat-card {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  transition: .2s !important;
}
.cd-subcat-card:hover {
  border-color: #2563eb !important;
  box-shadow: 0 8px 20px rgba(37,99,235,.12) !important;
  transform: translateY(-2px);
}
.cd-subcat-icon {
  background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
  color: #1e40af !important;
  border-radius: 10px !important;
}
.cd-subcat-name { color: #0f172a !important; font-weight: 700; }
.cd-subcat-count { color: #64748b !important; font-size: .82rem; }
.cd-subcat-arrow { color: #94a3b8; transition: .15s; }
.cd-subcat-card:hover .cd-subcat-arrow { color: #2563eb !important; transform: translateX(2px); }

/* About / How sections */
.cd-about-sidebar, .cd-how-step {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
}
.cd-how-step:hover {
  border-color: #2563eb !important;
  box-shadow: 0 6px 18px rgba(37,99,235,.1) !important;
}
.cd-how-num {
  background: linear-gradient(135deg, #2563eb, #1e40af) !important;
  color: #fff !important;
  font-weight: 800;
}
.cd-how-icon--search   { background: #dbeafe !important; color: #1d4ed8 !important; }
.cd-how-icon--compare  { background: #dcfce7 !important; color: #15803d !important; }
.cd-how-icon--contact  { background: #fef3c7 !important; color: #b45309 !important; }
.cd-how-icon--review   { background: #fce7f3 !important; color: #be185d !important; }

/* Listing card (shared in browse + lists) */
.cd-listing-card, .listing-card {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  transition: .2s !important;
}
.cd-listing-card:hover, .listing-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15,23,42,.1) !important;
  border-color: #cbd5e1 !important;
}

/* ====================================================================
   SHOW / SERVICE DETAIL (sd-*)
   ==================================================================== */

.sd-page { background: #f8fafc !important; }

/* Breadcrumbs */
.sd-breadcrumb__list a { color: #2563eb !important; }
.sd-breadcrumb__list a:hover { color: #1e40af !important; }
.sd-breadcrumb__current { color: #0f172a !important; font-weight: 600; }

/* Owner banner (top alert) */
.sd-owner-banner {
  background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
  border: 1px solid #fcd34d !important;
  border-radius: 14px !important;
  color: #78350f !important;
}
.sd-owner-banner__title { color: #78350f !important; font-weight: 800; }
.sd-owner-banner__cta {
  background: linear-gradient(135deg, #2563eb, #1e40af) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(37,99,235,.28) !important;
}
.sd-owner-banner__pill { border-radius: 9999px !important; font-weight: 600; font-size: .78rem; }
.sd-owner-banner__pill--warn { background: rgba(245,158,11,.18) !important; color: #92400e !important; }
.sd-owner-banner__pill--ok   { background: rgba(16,185,129,.18) !important; color: #065f46 !important; }

/* Main card */
.sd-main-card, .sd-side-card, .sd-block, .sd-section-card {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.04) !important;
}

/* Type badge */
.sd-type-badge {
  border-radius: 9999px !important;
  font-weight: 700;
  font-size: .75rem;
  padding: .3rem .8rem !important;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.sd-type-badge--help  { background: #dbeafe !important; color: #1d4ed8 !important; }
.sd-type-badge--offer { background: #dcfce7 !important; color: #15803d !important; }

/* Perks (location/category/price chips) */
.sd-perk {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border-radius: 9999px !important;
  font-weight: 600;
  font-size: .8rem;
  padding: .35rem .8rem !important;
}
.sd-perk--location { background: #dbeafe !important; color: #1d4ed8 !important; }
.sd-perk--category { background: #e0e7ff !important; color: #4338ca !important; }
.sd-perk--price    { background: #dcfce7 !important; color: #15803d !important; }

/* Action buttons (share/fav/copy) */
.sd-action-btn {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  color: #475569 !important;
  font-weight: 600;
  transition: .15s !important;
}
.sd-action-btn:hover { background: #f8fafc !important; border-color: #cbd5e1 !important; transform: translateY(-1px); }
.sd-action-btn--fb:hover { color: #1877f2 !important; border-color: #1877f2 !important; }
.sd-action-btn--li:hover { color: #0a66c2 !important; border-color: #0a66c2 !important; }
.sd-action-btn--tw:hover { color: #000 !important; border-color: #000 !important; }
.sd-action-btn--copy.copied { background: #dcfce7 !important; color: #15803d !important; border-color: #86efac !important; }
.sd-action-btn--fav-active { background: #fee2e2 !important; color: #b91c1c !important; border-color: #fecaca !important; }
.sd-action-btn--fav:hover { color: #dc2626 !important; border-color: #fca5a5 !important; }
.sd-action-btn--danger:hover { color: #dc2626 !important; border-color: #fca5a5 !important; }

/* Gallery */
.sd-gallery__main {
  border-radius: 14px !important;
  border: 1px solid #e2e8f0;
}
.sd-gallery__thumb {
  border-radius: 10px !important;
  border: 2px solid transparent !important;
  transition: .15s !important;
}
.sd-gallery__thumb.active, .sd-gallery__thumb--active {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 1px #2563eb;
}

/* Headings inside detail */
.sd-main-card h1, .sd-section-card h2, .sd-block h2,
.sd-section-title {
  color: #0f172a !important;
  font-weight: 800;
  letter-spacing: -.015em;
}

/* CTAs (Contact button, etc.) */
.sd-cta, .sd-cta-btn, .sd-contact-btn, .sd-btn-primary {
  background: linear-gradient(135deg, #2563eb, #1e40af) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(37,99,235,.3) !important;
  transition: .2s !important;
}
.sd-cta:hover, .sd-cta-btn:hover, .sd-contact-btn:hover, .sd-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(37,99,235,.42) !important;
}

/* Avatar / provider info */
.sd-provider-card, .sd-author-card {
  background: linear-gradient(135deg, #eff6ff, #f8fafc) !important;
  border: 1px solid #dbeafe !important;
  border-radius: 14px !important;
}
.sd-provider-name, .sd-author-name { color: #0f172a !important; font-weight: 700; }
.sd-provider-rating { color: #b45309 !important; font-weight: 700; }

/* Tags / chips */
.sd-tag, .sd-chip {
  background: #eff6ff !important;
  color: #1e40af !important;
  border-radius: 9999px !important;
  font-weight: 600;
}

/* ====================================================================
   CREATE WIZARD (sc-*)
   ==================================================================== */

.sc-page { background: #f8fafc !important; }

/* Step progress */
.sc-step-dot__circle {
  background: #f1f5f9 !important;
  color: #64748b !important;
  font-weight: 800;
  border: 2px solid #e2e8f0 !important;
  transition: .2s !important;
}
.sc-step-dot--active .sc-step-dot__circle {
  background: linear-gradient(135deg, #2563eb, #1e40af) !important;
  color: #fff !important;
  border-color: #2563eb !important;
  box-shadow: 0 4px 12px rgba(37,99,235,.32) !important;
}
.sc-step-dot--done .sc-step-dot__circle {
  background: #10b981 !important;
  color: #fff !important;
  border-color: #10b981 !important;
}
.sc-step-dot__label { color: #64748b !important; font-weight: 600; }
.sc-step-dot--active .sc-step-dot__label,
.sc-step-dot--done .sc-step-dot__label { color: #0f172a !important; }
.sc-step-line { background: #e2e8f0 !important; }
.sc-step-dot--done + .sc-step-line { background: #10b981 !important; }

/* Card */
.sc-card {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 12px rgba(15,23,42,.05) !important;
}
.sc-card__badge {
  background: #eff6ff !important;
  color: #1e40af !important;
  border-radius: 9999px !important;
  font-weight: 700;
  letter-spacing: .02em;
}
.sc-card__title {
  color: #0f172a !important;
  font-weight: 800;
  letter-spacing: -.02em;
}
.sc-card__title em { color: #2563eb !important; font-style: normal; }
.sc-card__subtitle { color: #64748b !important; }

/* Type cards (offer / help) */
.sc-type {
  background: #fff !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 14px !important;
  transition: .2s !important;
}
.sc-type:hover {
  border-color: #2563eb !important;
  box-shadow: 0 8px 20px rgba(37,99,235,.12) !important;
  transform: translateY(-2px);
}
.sc-type--selected, .sc-type.is-selected, .sc-type input:checked + .sc-type__inner,
.sc-type--active {
  border-color: #2563eb !important;
  background: linear-gradient(135deg, #eff6ff, #fff) !important;
}
.sc-type__icon, .sc-type-icon {
  background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
  color: #1e40af !important;
  border-radius: 12px !important;
}
.sc-type__title { color: #0f172a !important; font-weight: 700; }
.sc-type__desc, .sc-type-desc { color: #64748b !important; }

/* Form inputs */
.sc-input, .sc-select, .sc-textarea {
  background: #fff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  color: #0f172a !important;
  transition: .15s !important;
}
.sc-input:focus, .sc-select:focus, .sc-textarea:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
  outline: none !important;
}
.sc-label { color: #334155 !important; font-weight: 600; }

/* Submit / next */
.sc-btn, .sc-btn--primary, .sc-next, .sc-submit {
  background: linear-gradient(135deg, #2563eb, #1e40af) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(37,99,235,.3) !important;
  transition: .2s !important;
  border: 0 !important;
}
.sc-btn:hover, .sc-btn--primary:hover, .sc-next:hover, .sc-submit:hover {
  box-shadow: 0 8px 22px rgba(37,99,235,.42) !important;
  transform: translateY(-1px);
}
.sc-btn--ghost, .sc-back {
  background: #fff !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  font-weight: 600;
}
.sc-btn--ghost:hover, .sc-back:hover { background: #f8fafc !important; border-color: #cbd5e1 !important; }

/* Upload zone */
.sc-upload, .sc-upload-zone {
  background: #f8fafc !important;
  border: 2px dashed #cbd5e1 !important;
  border-radius: 12px !important;
  transition: .15s !important;
}
.sc-upload:hover, .sc-upload-zone:hover {
  border-color: #2563eb !important;
  background: #eff6ff !important;
}

/* ====================================================================
   Dark mode adjustments
   ==================================================================== */
body.dark-mode .cd-page,
body.dark-mode .sd-page,
body.dark-mode .sc-page { background: #0b1220 !important; }
body.dark-mode .cd-trust-bar,
body.dark-mode .sd-main-card, body.dark-mode .sd-side-card,
body.dark-mode .sd-block, body.dark-mode .sd-section-card,
body.dark-mode .cd-subcat-card, body.dark-mode .cd-how-step,
body.dark-mode .cd-about-sidebar, body.dark-mode .listing-card,
body.dark-mode .cd-listing-card, body.dark-mode .sc-card, body.dark-mode .sc-type {
  background: #0f172a !important; border-color: #1e293b !important;
}
body.dark-mode .cd-section-title,
body.dark-mode .sd-section-title,
body.dark-mode .sc-card__title,
body.dark-mode .cd-subcat-name, body.dark-mode .cd-trust-value,
body.dark-mode .sd-main-card h1, body.dark-mode .sd-block h2 { color: #f1f5f9 !important; }
body.dark-mode .sc-input, body.dark-mode .sc-select, body.dark-mode .sc-textarea {
  background: #1e293b !important; border-color: #334155 !important; color: #f1f5f9 !important;
}