/*
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: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(233,30,140,0.25); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: rgba(233,30,140,0.45); }

html::-webkit-scrollbar { width: 6px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background: rgba(233,30,140,0.25); border-radius: 100px; }
html::-webkit-scrollbar-thumb:hover { background: rgba(233,30,140,0.45); }
html { scrollbar-width: thin; scrollbar-color: rgba(233,30,140,0.25) transparent; }

.app-sidebar::-webkit-scrollbar { width: 4px; }
.app-sidebar::-webkit-scrollbar-track { background: transparent; }
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(233,30,140,0.30); border-radius: 100px; }
.app-sidebar { scrollbar-width: thin; scrollbar-color: rgba(233,30,140,0.30) transparent; }

/* ─── 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); }

/* ─── Category Cards (post-new) ─────────────────────────────────────────── */
.cc-cat-default {
  border-color: #f0dde9 !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(233,30,140,0.06) !important;
}
.cc-cat-default:hover {
  border-color: #e0b8d0 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 20px rgba(233,30,140,0.12) !important;
}
.cc-cat-selected {
  border-color: #e91e8c !important;
  background: #fce4ec !important;
  box-shadow: 0 4px 24px rgba(233,30,140,0.22) !important;
  transform: translateY(-2px) !important;
}

/* ─── Custom Select ──────────────────────────────────────────────────────── */
select.cc-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a0a0b0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 42px;
  cursor: pointer;
}
select.cc-input:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(233,30,140,0.08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e91e8c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
select.cc-input:hover:not(:focus) {
  border-color: var(--text-4);
}
select.cc-input option {
  background: var(--bg-elevated);
  color: var(--text-1);
  font-size: 14px;
  padding: 8px 12px;
}
select.cc-input option:checked,
select.cc-input option:hover {
  background: rgba(233,30,140,0.10);
  color: var(--pink);
}

/* ─── 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; }
  .homevideo { height: 90vh; }
}

/* ─── Marquee ────────────────────────────────────────────────────────────── */
.marquee-track {
  display: flex;
  align-items: center;
  animation: marquee 40s linear infinite;
  white-space: nowrap;
  width: max-content;
}

/* ─── 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: 4px 10px;
  border-radius: 100px;
  display: inline-block;
  border: 1px solid rgba(233,30,140,0.15);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
  box-sizing: border-box;
}

/* Tags container — clips to card width, pills wrap to next line */
.cc-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  margin-top: 4px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* ─── 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;
}
/* landing-nav scroll animation handled in index.php */
/* ── Share Sheet (global) ───────────────────────────────────── */
.cc-share-sheet {
    position: fixed !important;
    inset: 0;
    z-index: 99999 !important;
    display: none;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
}
.cc-share-sheet.open { display: flex !important; }
.cc-share-inner {
    background: var(--bg-card, #1a1a2e);
    border: 1px solid var(--border, rgba(255,255,255,.1));
    border-radius: 20px 20px 0 0;
    padding: 20px;
    width: 100%;
    max-width: 520px;
    transform: translateY(0);
}
.cc-share-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
    margin: 16px 0;
}
.cc-share-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: var(--bg-2, rgba(255,255,255,.05));
    border: 1px solid var(--border, rgba(255,255,255,.1));
    border-radius: 14px;
    padding: 14px 8px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3, #aaa);
    font-family: inherit;
}
.cc-share-opt:hover { border-color: var(--pink, #e91e8c); color: var(--text-1, #fff); }
.cc-share-opt span { font-size: 22px; }