/*
Theme Name: CheatChat
Theme URI: https://cheatchat.app
Author: CheatChat
Description: Women's dating safety community theme. Features community feed, name search, Oracle Suite AI readings, forum, scam detector, watchlist, safety map, and admin panel. Full WordPress integration with custom post types and database.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: cheatchat
Tags: community, safety, women, dating, forum
*/

/* Alpine.js cloak — hides elements until Alpine initialises */
[x-cloak] { display: none !important; }

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ─── Design Tokens ──────────────────────────────────────────────────────── */
:root {
  --pink:           #e91e8c;
  --pink-hot:       #f72585;
  --pink-dark:      #c2185b;
  --pink-light:     #fce4ec;
  --pink-pale:      #fdf4f8;
  --pink-glow:      rgba(233, 30, 140, 0.25);
  --pink-glow-soft: rgba(233, 30, 140, 0.10);

  --purple:         #9c27b0;
  --purple-light:   #f3e5f5;
  --purple-pale:    #f8f0fc;
  --gold:           #f59e0b;
  --gold-light:     #fffbeb;

  --red-flag:       #ef4444;
  --red-light:      #fef2f2;
  --green-flag:     #22c55e;
  --green-light:    #f0fdf4;
  --amber-flag:     #f97316;
  --amber-light:    #fff7ed;

  --bg:             #ffffff;
  --bg-2:           #fdf4f8;
  --bg-3:           #fce8f3;
  --bg-elevated:    #fdf0f7;
  --bg-card:        #ffffff;
  --bg-sidebar:     #fff8fc;

  --card:           #ffffff;
  --card-border:    #f0dde9;
  --card-shadow:    0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(233,30,140,0.06);
  --card-shadow-hover: 0 2px 8px rgba(0,0,0,0.06), 0 8px 32px rgba(233,30,140,0.14);

  --text:           #1a0d1f;
  --text-1:         #1a0d1f;
  --text-2:         #4a3050;
  --text-3:         #9e86a5;
  --text-4:         #c9b8d1;

  --border:         #f0dde9;
  --border-bright:  #e0b8d0;

  --radius:    18px;
  --radius-sm: 12px;
  --radius-xs: 8px;

  --nav-width: 248px;
  --content-max: 680px;
}

/* ─── Animations ─────────────────────────────────────────────────────────── */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
@keyframes pulse-pink {
  0%, 100% { box-shadow: 0 4px 24px var(--pink-glow); }
  50%       { box-shadow: 0 6px 40px rgba(247,37,133,0.45), 0 0 0 6px rgba(233,30,140,0.08); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-6px) rotate(2deg); }
}
@keyframes blob-drift {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%       { transform: translate(30px,-20px) scale(1.05); }
  66%       { transform: translate(-20px,15px) scale(0.95); }
}
@keyframes logo-appear {
  0%   { opacity: 0; transform: scale(0.85) translateY(8px); filter: blur(4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bg-2);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  min-height: 100dvh;
  overflow-x: hidden;
  line-height: 1.55;
}

::selection { background: rgba(233,30,140,0.15); color: var(--pink-dark); }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 100px; }

/* ─── Cards ──────────────────────────────────────────────────────────────── */
.cc-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.2s, transform 0.15s;
}
.cc-card:hover { box-shadow: var(--card-shadow-hover); }
.cc-card.feature-card:hover { transform: translateY(-2px); }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  border-radius: 12px;
  font-family: inherit;
  font-weight: 700;
  transition: all 0.15s;
  text-decoration: none;
}
.btn-pink {
  background: linear-gradient(135deg, var(--pink), var(--pink-hot));
 color: #fff;
  font-size: 16px !important;
  font-weight: 800 !important;
  padding: 16px 40px;
  border-radius: 100px !important;
  box-shadow: 0 6px 32px rgba(247,37,133,0.35), 0 2px 8px rgba(233,30,140,0.2) !important;
  border: none;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.15s;
  letter-spacing: 0.01em;
}
.btn-pink:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(233,30,140,0.35);
  color: #fff;
}
.btn-pink-xl { padding: 16px 36px; font-size: 17px; font-weight: 900; border-radius: 16px; }
.animate-pulse-pink { animation: pulse-pink 2.5s ease-in-out infinite; }



/* ─── Cards ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}
.card:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: var(--border-bright);
}

/* Clickable card — lift on hover */
a .card, button.card {
  cursor: pointer;
}
a:hover .card, button.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-lifted);
}

.card-flat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Glass morphism variant */
.card-glass {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: var(--radius);
  box-shadow: 0 4px 24px rgba(233,30,140,0.08), 0 1px 4px rgba(0,0,0,0.04);
}

/* ─── Inputs ─────────────────────────────────────────────────────────────── */
.cc-input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-1);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cc-input:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(233,30,140,0.08);
}
.cc-input::placeholder { color: var(--text-4); }

select.cc-input { appearance: auto; }

/* ─── App Layout ─────────────────────────────────────────────────────────── */
.app-layout {
  display: flex;
  min-height: 100dvh;
}
.app-sidebar {
  width: var(--nav-width);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
}
.app-main {
  flex: 1;
  min-width: 0;
  padding: 0 20px;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}

/* ─── Mobile Nav ─────────────────────────────────────────────────────────── */
.top-bar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,248,252,0.9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  height: 56px;
  align-items: center;
  justify-content: space-between;
}
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255,248,252,0.95);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  height: 68px;
  align-items: center;
}

@media (max-width: 768px) {
  .app-sidebar { display: none !important; }
  .top-bar { display: flex; }
  .bottom-nav { display: flex; }
  .app-main { padding: 0 16px; padding-bottom: 80px; }
  .md-show { display: none !important; }
    nav.landing-nav {  padding: 10px !important;  height: auto !important;}
nav.landing-nav > div * {font-size: 11px !important;font-weight: normal !important; border-radius: 8px !important; padding: 6px 10px !important;  width: auto !important;}
}

/* ─── Marquee ────────────────────────────────────────────────────────────── */
.marquee-track {
  display: inline-flex;
  gap: 0;
  animation: marquee 30s linear infinite;
  white-space: nowrap;
}

/* ─── Gradient Text ──────────────────────────────────────────────────────── */
.gradient-text-animated {
  background: linear-gradient(135deg, var(--pink), var(--purple), var(--pink-hot));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 4s ease infinite;
}

/* ─── Risk badges ────────────────────────────────────────────────────────── */
.risk-high   { background: rgba(233,30,140,0.12); color: var(--pink); }
.risk-medium { background: rgba(243,156,18,0.12); color: #f39c12; }
.risk-low    { background: rgba(0,184,148,0.12);  color: #00b894; }

/* ─── Tag pills ──────────────────────────────────────────────────────────── */
.cc-tag {
  background: var(--pink-pale);
  color: var(--pink);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  display: inline-block;
}

/* ─── Admin layout ───────────────────────────────────────────────────────── */
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: 220px;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  padding: 24px 16px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-main { flex: 1; overflow-y: auto; padding: 28px; }

/* ─── Landing page overrides ─────────────────────────────────────────────── */
.landing-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(12,4,15,0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.landing-nav .btn-pink { color: #fff; }

body.dark-landing {
  background: #0c040f;
  --text-1: #f8f0fc;
  --text-2: rgba(248,240,252,0.8);
  --text-3: rgba(248,240,252,0.55);
  --text-4: rgba(248,240,252,0.35);
  --bg-card: rgba(255,255,255,0.04);
  --bg-elevated: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.1);
}
body.dark-landing .cc-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

/* ─── WP resets ──────────────────────────────────────────────────────────── */
.wp-block-image { margin: 0; }
p { margin: 0; }
h1,h2,h3,h4,h5,h6 { margin: 0; font-weight: 900; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }
a { color: inherit; }
img { max-width: 100%; }


aside.app-sidebar {
    background-color: #fff !important;
}
.app-main .card {
    padding: 20px;
}
input.cc-input {
    background-color: #fff;
}

div#profiletab button {
    background-color: #000 !important;
    color: #fff !important;
    padding: 10px;
    border: 1px solid #000;
    margin-left: 5px;
    border-radius: 4px;
    cursor: pointer;
}

div#profiletab button:nth-child(1) {
    margin-left: 0;
}

div#profiletab button:hover {
    background-color: #e91e8c !important;
    border: 1px solid #e91e8c;
}