*/

/* --- Page / global --- */
body {
  background: var(--bg) !important;
  color: var(--text-primary) !important;
}

/* --- Surfaces & common background utilities --- */
/* map common bg-* utilities so templates that use Tailwind utilities inherit theme */
.bg-white { background: var(--surface) !important; }
.bg-surface { background: var(--surface) !important; } /* optional helper */

.bg-gray-50 { background: var(--bg) !important; }
.bg-gray-100 { background: var(--surface-hover) !important; }
.bg-gray-200 { background: var(--surface-strong) !important; }
.bg-gray-300 { background: var(--surface-strong) !important; }

/* semantic accent background variants used in templates */
.bg-indigo-50 { background: rgba(21,147,247,0.06) !important; } /* subtle blue fill */
.bg-red-50 { background: rgba(255,77,79,0.06) !important; }
.bg-amber-50 { background: rgba(245,158,11,0.06) !important; }
.bg-pink-50 { background: rgba(255,92,161,0.06) !important; }

/* --- Text utilities --- */
.text-slate-900, .text-gray-900 { color: var(--text-primary) !important; }
.text-slate-800, .text-gray-800 { color: var(--text-primary) !important; }
.text-slate-700, .text-gray-700 { color: var(--text-secondary) !important; }
.text-slate-600, .text-gray-600 { color: var(--text-secondary) !important; }
.text-slate-500, .text-gray-500 { color: var(--text-muted) !important; }
.text-slate-400, .text-gray-400 { color: var(--text-muted) !important; }

/* Map common color classes used for icons & links to your accent tokens */
.text-indigo-600 { color: var(--accent-blue) !important; }
.text-indigo-500 { color: var(--accent-blue) !important; }
.text-pink-500 { color: var(--accent-pink) !important; }
.text-teal-500 { color: var(--accent-blue) !important; } /* or choose var(--accent-blue) */
.text-yellow-500 { color: #f59e0b !important; } /* leave some colors as-is */
.text-red-600 { color: var(--accent-red) !important; }

/* --- Borders --- */
.border, .border-1 { border-color: var(--border) !important; }
.border-gray-200, .border-gray-300 { border-color: var(--border) !important; }
.border-muted { border-color: var(--border-muted) !important; }

/* --- Hover utilities (Tailwind-style) ---
   Note: the class names contain ':' and must be escaped in CSS selectors.
*/
.hover\:bg-gray-100:hover { background: var(--surface-hover) !important; }
.hover\:bg-gray-50:hover { background: var(--bg) !important; }
.hover\:bg-indigo-100:hover { background: rgba(21,147,247,0.08) !important; }
.hover\:bg-red-100:hover { background: rgba(255,77,79,0.08) !important; }
.hover\:shadow-md:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important; }

/* --- Buttons & small elements --- */
.btn, button, input[type="button"], input[type="submit"] {
  background: var(--surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
.btn-primary, .btn--primary {
  background: var(--gradient-pink-purple) !important;
  color: #fff !important;
  border: none !important;
}

/* small pill variants used in mood filters / tags */
.rounded-full.bg-white { background: var(--surface) !important; }

/* --- Inputs / placeholder --- */
input, textarea, select {
  background: var(--input-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
::placeholder { color: var(--placeholder) !important; }

/* --- Card-like components --- */
.card, .panel, .post-card, .post, .comment, .modal, .dropdown, .popover {
  background: var(--surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

/* --- Muted text and metadata --- */
.small, .meta, .post-meta, .muted, .text-muted, .site-subtitle {
  color: var(--text-muted) !important;
}

/* --- Box-shadow helpers (shadow-sm, shadow-md) ---
     we keep shadows subtle and invert their color in dark mode automatically through different vars */
.shadow-sm { box-shadow: 0 1px 0 var(--border) !important; }
.shadow-md { box-shadow: 0 6px 20px rgba(0,0,0,0.06) !important; }

/* --- Specific inline-style targets (override inline bg colors) ---
   These are IDs/classes we discovered in templates that used inline background attributes.
*/
#ad-placeholder { background: var(--surface-hover) !important; }
.floating-create-btn { background: var(--gradient-pink-purple) !important; color: #fff !important; }

/* --- Image placeholders / avatar backgrounds --- */
.bg-gray-100, .avatar-fallback, .rounded-full.bg-gray-100 {
  background: var(--surface-hover) !important;
  color: var(--text-secondary) !important;
}

/* --- Accessibility: focus states for common focusable elements --- */
a:focus, button:focus, .btn:focus, input:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-ring) !important;
}

/* --- Tailwind utility examples you can add/remove as needed ---
   Many more variants exist; add them here as you encounter classes in templates.
*/

/* Example: Map 'bg-gray-800' (rare) to surface-strong for dark variants (optional)
.bg-gray-800 { background: var(--surface-strong) !important; }
*/

/* ---------- Search result card ---------- */
/* Base card wrapper */
.search-result-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--border, rgba(15,23,36,0.06)) !important;
  border-radius: 8px;
  padding: 8px;
  color: var(--text-primary, #0f1724) !important;
  overflow: hidden;
}

/* image column */
.search-result-card .card-image {
  flex: 0 0 180px;
  min-width: 120px;
  max-width: 220px;
  height: auto;
  display: block;
  border-radius: 8px;
  overflow: hidden;
}

/* actual image */
.search-result-card .card-image img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

/* placeholder when no image (was inline style background:#f5f7fb) */
.card-placeholder {
  width: 100%;
  height: 120px;
  border-radius: 8px;
  background: var(--surface-hover, #f3f5f8) !important;
}

/* content body */
.search-result-card .card-body {
  flex: 1 1 auto;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* title, meta, description */
.search-result-card .card-title {
  margin: 0;
  font-weight: 700;
  color: var(--text-primary, #0f1724) !important;
  font-size: 1rem;
}
.search-result-card .card-meta {
  color: var(--text-muted, #6b7280) !important;
  font-size: .88rem;
}
.search-result-card .card-description {
  color: var(--text-secondary, #374151) !important;
  margin: 0;
  line-height: 1.35;
  font-size: .95rem;
}

/* link / CTA */
.search-result-card .card-link {
  color: var(--accent-blue, #1593f7) !important;
  text-decoration: underline;
  font-weight: 600;
}

/* make the card stack on narrow screens */
@media (max-width: 640px) {
  .search-result-card {
    flex-direction: column;
  }
  .search-result-card .card-image { width: 100%; flex: 0 0 auto; }
  .card-placeholder, .search-result-card .card-image img { height: 160px; }
}

/* ---------- Moodboard components ---------- */
/* These ensure the moodboard cards, title and subtitle follow theme colors. */

/* mood grid card base (mb-card) */
.mb-card {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(180deg, var(--surface, #ffffff), var(--profile-surface-gradient-end, #fbfbff)) !important;
  border: 1px solid var(--border, rgba(15,23,36,0.06)) !important;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.mb-card:hover { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(0,0,0,0.06); }

/* images wrapper inside mood card */
.mb-images { display:block; width:100%; height:140px; overflow:hidden; }
.mb-images img { width:100%; height:100%; object-fit:cover; display:block; }

/* meta area */
.mb-meta { padding:12px; color: var(--text-primary, #0f1724); background: transparent; }
.mb-meta h3 { margin:0 0 6px 0; font-size:1rem; color: var(--text-primary, #0f1724); }
.mb-desc { margin:0; color: var(--text-muted, #6b7280); font-size:.95rem; }

/* tags / small pills */
.mb-tag {
  display:inline-block;
  padding:6px 8px;
  border-radius:999px;
  background: var(--profile-surface-hover, #f3f5f8);
  color: var(--text-primary, #0f1724);
  font-weight:700;
}

/* page title & subtitle */
.site-title { font-size: 1.6rem; margin: 0; color: var(--text-primary, #0f1724); }
.site-subtitle { margin-top:6px; color: var(--text-muted, #6b7280); }

/* When JS applies gradients by reading data-g1/data-g2, keep them on top of background.
   The CSS above is a fallback if JS doesn't run. */

/* ---------- small overrides for inline ad placeholder discovered earlier ---------- */
#ad-placeholder { background: var(--profile-surface-hover, #f3f5f8) !important; border-radius: 8px !important; }


/* ======================================================
   Soultrob Legal & Policy Pages Styles
   Applies to: Privacy Policy, Terms & Conditions, Safety Center
   ====================================================== */

.policy-content {
  max-width: 900px;
  margin: 4rem auto;
  padding: 2.5rem;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  font-family: "Inter", "Segoe UI", Roboto, sans-serif;
  line-height: 1.7;
  color: #222;
}

/* --- Headings --- */
.policy-content h1 {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #111;
  letter-spacing: -0.02rem;
}

.policy-content h2 {
  font-size: 1.6rem;
  font-weight: 600;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: #1a1a1a;
  border-left: 4px solid #4f46e5;
  padding-left: 0.75rem;
}

.policy-content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: #333;
}

.policy-content h4 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 1.2rem;
  margin-bottom: 0.5rem;
  color: #333;
}

/* --- Paragraphs & Lists --- */
.policy-content p {
  margin-bottom: 1rem;
  color: #444;
}

.policy-content ul,
.policy-content ol {
  margin: 1rem 0 1rem 1.5rem;
  padding: 0;
}

.policy-content li {
  margin-bottom: 0.6rem;
}

.policy-content strong {
  color: #222;
}

.policy-content em {
  color: #555;
}

/* --- Links --- */
.policy-content a {
  color: #4f46e5;
  text-decoration: none;
  transition: color 0.2s ease;
}

.policy-content a:hover {
  text-decoration: underline;
  color: #3730a3;
}

/* --- Sections --- */
.policy-content section {
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

/* --- Tables --- */
.policy-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.policy-content th,
.policy-content td {
  border: 1px solid #ddd;
  padding: 0.75rem 1rem;
  text-align: left;
}

.policy-content th {
  background-color: #f9fafb;
  font-weight: 600;
}

/* --- Code snippets --- */
.policy-content code {
  font-family: monospace;
  background: #f3f4f6;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  font-size: 0.95em;
}

/* --- Blockquotes --- */
.policy-content blockquote {
  border-left: 4px solid #4f46e5;
  background: #f9f9ff;
  padding: 0.75rem 1rem;
  margin: 1.5rem 0;
  color: #333;
  border-radius: 6px;
}

/* --- Notices or Callouts --- */
.policy-content .notice {
  background: #eef2ff;
  border-left: 4px solid #4f46e5;
  padding: 0.75rem 1rem;
  margin: 1.5rem 0;
  border-radius: 6px;
  color: #333;
  font-size: 0.95rem;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
  .policy-content {
    padding: 1.5rem;
    margin: 2rem 1rem;
    box-shadow: none;
    border-radius: 10px;
  }

  .policy-content h1 {
    font-size: 2rem;
  }

  .policy-content h2 {
    font-size: 1.35rem;
  }
}

/* --- Accessibility & readability tweaks --- */
.policy-content::selection {
  background: #e0e7ff;
  color: #111;
}

.policy-content a:focus {
  outline: 2px dashed #4f46e5;
  outline-offset: 3px;
}

/* ======================================================
   Dark Mode Support
   ====================================================== */
@media (prefers-color-scheme: dark) {
  .policy-content {
    background: #18181b;
    color: #e5e7eb;
    box-shadow: none;
  }

  .policy-content h1,
  .policy-content h2,
  .policy-content h3,
  .policy-content h4 {
    color: #f9fafb;
  }

  .policy-content p,
  .policy-content li,
  .policy-content strong,
  .policy-content em {
    color: #d4d4d8;
  }

  .policy-content a {
    color: #818cf8;
  }

  .policy-content a:hover {
    color: #a5b4fc;
  }

  .policy-content section {
    border-bottom: 1px solid #2e2e32;
  }

  .policy-content blockquote {
    background: #1e1e24;
    border-left: 4px solid #6366f1;
    color: #d4d4d8;
  }

  .policy-content code {
    background: #27272a;
    color: #f4f4f5;
  }

  .policy-content table {
    border-color: #2e2e32;
  }

  .policy-content th {
    background-color: #1f1f23;
    color: #f4f4f5;
  }

  .policy-content td {
    border-color: #2e2e32;
  }

  .policy-content .notice {
    background: #252532;
    border-left: 4px solid #6366f1;
    color: #e5e7eb;
  }

  .policy-content::selection {
    background: #3f3fff;
    color: #fff;
  }
}