/*
Theme Name: CheatChat
Theme URI: https://cheatchat.example
Author: CheatChat
Author URI: https://cheatchat.example
Description: A dark, editorial WordPress theme for a women's dating-safety community. Playfair Display + Dancing Script over near-black with hot-pink accents. Includes a homepage, feature landing pages, sign-up, and support/legal templates.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cheatchat
*/

/* =========================================================================
   Design tokens
   ========================================================================= */
:root {
  --cc-bg:          #0C0509;
  --cc-panel:       #140A10;
  --cc-panel-2:     #170B12;
  --cc-pink:        #E0218A;
  --cc-pink-bright: #FF6EC7;
  --cc-magenta:     #FC0FC0;
  --cc-text:        #FFFFFF;
  --cc-text-soft:   #F2F2F4;
  --cc-text-soft-2: #E2E2E6;
  --cc-text-muted:  #C4C4CA;
  --cc-text-faint:  #9C9CA4;
  --cc-border:      rgba(255,110,199,.14);
  --cc-border-2:    rgba(255,110,199,.2);
  --cc-border-3:    rgba(255,110,199,.35);
  --cc-tint:        rgba(224,33,138,.14);
  --cc-tint-2:      rgba(224,33,138,.2);

  --serif:  'Playfair Display', Georgia, serif;
  --script: 'Dancing Script', cursive;
  --sans:   'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono:   Menlo, Consolas, monospace;

  --wrap: 1200px;
  --gutter: 48px;
}

/* =========================================================================
   Base
   ========================================================================= */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cc-bg);
}

body {
  font-family: var(--sans);
  color: var(--cc-text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }

input::placeholder { color: inherit; opacity: .45; }

.cc-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cc-pink);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  z-index: 999;
  font-weight: 700;
  text-decoration: none;
}
.cc-skip-link:focus { left: 0; }

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--cc-pink-bright);
  outline-offset: 2px;
}

/* =========================================================================
   Layout helpers
   ========================================================================= */
.cc-wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  overflow: hidden;
}

.cc-pad { padding-left: var(--gutter); padding-right: var(--gutter); }

.cc-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cc-pink);
}

.cc-script {
  font-family: var(--script);
  color: var(--cc-pink-bright);
}

.cc-h1 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 76px;
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 0 0 22px;
  color: #fff;
  text-wrap: balance;
}

.cc-h2 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 48px;
  color: #fff;
  margin: 14px 0 0;
  text-wrap: balance;
}

.cc-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--cc-text-soft);
}

/* =========================================================================
   Buttons
   ========================================================================= */
.cc-btn {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.cc-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.cc-nav__actions .cc-btn { gap: 8px; }
.cc-ico { width: 16px; height: 16px; flex: 0 0 auto; color: var(--cc-pink); }

.cc-btn--primary {
  background: var(--cc-pink);
  color: #fff;
  font-size: 14px;
  padding: 11px 20px;
}
.cc-btn--gradient {
  background: linear-gradient(120deg, var(--cc-pink), var(--cc-magenta));
  color: #fff;
  font-size: 16px;
  padding: 16px 28px;
}
.cc-btn--ghost {
  background: transparent;
  color: var(--cc-text);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 8px;
}
.cc-btn--light {
  background: #fff;
  color: #C4126F;
  font-weight: 800;
  font-size: 17px;
  padding: 16px 36px;
}

/* =========================================================================
   Header / nav
   ========================================================================= */
.cc-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--gutter);
  border-bottom: 1px solid var(--cc-border);
}
.cc-nav__logo img { width: auto; }
.cc-logo-link { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1; text-decoration: none; }
.cc-logo-img { width: auto; display: block; }
.cc-logo-tagline {
  text-transform: uppercase;
  letter-spacing: .24em;
  font-weight: 700;
  color: #FFFFFF;
  opacity: .85;
  white-space: nowrap;
  line-height: 1;
}
.cc-footer__brand .cc-logo-link { margin-bottom: 14px; }
.cc-logo-mark {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 26px;
  color: #fff;
  text-decoration: none;
  letter-spacing: -.02em;
}
.cc-logo-mark span { color: var(--cc-pink-bright); }

.cc-nav__menu {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 14px;
  font-weight: 500;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--cc-text-soft);
}
.cc-nav__menu a { text-decoration: none; color: inherit; }
.cc-nav__menu a:hover { color: var(--cc-pink-bright); }

.cc-nav__actions { display: flex; align-items: center; gap: 12px; }
.cc-nav__drawer { display: contents; }
.cc-nav__backdrop { display: none; }
.cc-nav__close { display: none; }

.cc-nav__toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--cc-border-2);
  color: var(--cc-text);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 18px;
}

/* =========================================================================
   Hero
   ========================================================================= */
.cc-hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  padding: 72px var(--gutter) 56px;
  align-items: center;
}
.cc-hero__kicker {
  font-family: var(--script);
  font-size: 30px;
  color: var(--cc-pink-bright);
  margin-bottom: 14px;
}
.cc-hero p { max-width: 520px; margin: 0 0 32px; }

.cc-search {
  display: flex;
  gap: 10px;
  max-width: 560px;
}
.cc-search__input {
  flex: 1;
  background: var(--cc-panel-2);
  border: 1px solid var(--cc-border-3);
  border-radius: 999px;
  padding: 16px 24px;
  font-size: 16px;
  color: var(--cc-text);
  outline: none;
  font-family: inherit;
}
.cc-search__note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--cc-text-faint);
}

.cc-media-frame {
  aspect-ratio: 4/5;
  border-radius: 18px;
  border: 1px dashed var(--cc-border-3);
  background: repeating-linear-gradient(45deg, #180A12 0 16px, #100710 16px 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  overflow: hidden;
}
.cc-media-frame { position: relative; }
.cc-media-frame video,
.cc-media-frame img { width: 100%; height: 100%; object-fit: cover; }
.cc-embed-fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.cc-embed-fill > div { width: 100%; height: 100%; }
.cc-embed-fill .wistia_responsive_padding { padding: 0 !important; position: absolute !important; inset: 0 !important; height: 100% !important; }
.cc-embed-fill .wistia_responsive_wrapper { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
.cc-embed-fill iframe,
.cc-embed-fill video { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; object-fit: cover; }
.cc-playbtn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 88px;
  border: none;
  border-radius: 20px;
  background: rgba(224,33,138,.82);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 12px 34px rgba(224,33,138,.5);
  transition: opacity .25s ease, transform .15s ease, background .2s ease;
}
.cc-playbtn:hover { transform: translate(-50%, -50%) scale(1.06); background: rgba(224,33,138,.95); }
.cc-playbtn.is-hidden { opacity: 0; pointer-events: none; }
.cc-playbtn--sm { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 8px 22px rgba(224,33,138,.5); }
.cc-media-frame__play {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--cc-tint-2);
  border: 1px solid rgba(255,110,199,.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--cc-pink-bright);
}
.cc-media-frame__label {
  font-family: var(--mono);
  font-size: 13px;
  color: #C8C8CE;
}

/* =========================================================================
   Stats bar
   ========================================================================= */
.cc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--cc-border);
  border-bottom: 1px solid var(--cc-border);
}
.cc-stat {
  padding: 28px 24px;
  text-align: center;
  border-right: 1px solid rgba(255,110,199,.1);
}
.cc-stat:last-child { border-right: none; }
.cc-stat__n {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 800;
  color: var(--cc-pink-bright);
}
.cc-stat__l {
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cc-text-muted);
  margin-top: 6px;
}

/* =========================================================================
   Tag strip
   ========================================================================= */
.cc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 36px 64px 8px;
}
.cc-tag {
  font-size: 13px;
  font-weight: 600;
  color: #F0F0F2;
  background: var(--cc-panel-2);
  border: 1px solid rgba(255,110,199,.25);
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
}
.cc-tag:hover { border-color: var(--cc-pink); color: var(--cc-pink-bright); }

/* =========================================================================
   Section headings
   ========================================================================= */
.cc-section-head {
  padding: 64px var(--gutter) 24px;
  text-align: center;
}
.cc-section-head .cc-h2 { font-size: 48px; }

/* =========================================================================
   Features
   ========================================================================= */
.cc-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 32px var(--gutter) 64px;
}
.cc-card {
  background: var(--cc-panel);
  border: 1px solid rgba(255,110,199,.16);
  border-radius: 16px;
  padding: 28px 26px;
  text-align: left;
}
.cc-card__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(224,33,138,.16);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
}
.cc-card__icon--img {
  width: 58px; height: 58px;
  background: none;
  border-radius: 14px;
  overflow: hidden;
}
.cc-card__iconimg { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 14px; }
.cc-card__title {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.cc-card__desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--cc-text-soft-2);
}

/* =========================================================================
   Comparison table
   ========================================================================= */
.cc-compare-wrap { padding: 8px var(--gutter) 72px; }
.cc-compare {
  border: 1px solid var(--cc-border-2);
  border-radius: 16px;
  overflow: hidden;
}
.cc-compare__head,
.cc-compare__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
}
.cc-compare__head {
  background: var(--cc-panel-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cc-compare__head > div { padding: 18px 24px; color: var(--cc-text-muted); }
.cc-compare__head .is-us { color: var(--cc-pink-bright); background: var(--cc-tint); }
.cc-compare__row { border-top: 1px solid rgba(255,110,199,.1); font-size: 15px; }
.cc-compare__row .cell-f  { padding: 16px 24px; color: #F0F0F2; font-weight: 600; }
.cc-compare__row .cell-us { padding: 16px 24px; color: #FFFFFF; background: var(--cc-tint); font-weight: 600; }
.cc-compare__row .cell-them { padding: 16px 24px; color: var(--cc-text-faint); }

/* =========================================================================
   Stories
   ========================================================================= */
.cc-stories { padding: 0 var(--gutter) 72px; }
.cc-stories__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
}
.cc-stories__head .cc-h2 { font-size: 40px; margin: 0; }
.cc-stories__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
/* Video carousel — 4 per view on desktop, horizontal scroll-snap */
.cc-carousel { position: relative; }
.cc-carousel__track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.cc-carousel__track::-webkit-scrollbar { display: none; }
.cc-carousel__slide {
  flex: 0 0 calc((100% - 3 * 18px) / 4);
  scroll-snap-align: start;
}
.cc-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 36px; height: 36px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 40px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: color .15s ease, transform .15s ease;
}
.cc-carousel__nav:hover { background: transparent; color: var(--cc-pink-bright); transform: translateY(-50%) scale(1.15); }
.cc-carousel__nav--prev { left: -44px; }
.cc-carousel__nav--next { right: -44px; }
.cc-carousel__nav[hidden] { display: none; }
.cc-story__frame {
  aspect-ratio: 9/16;
  border-radius: 14px;
  border: 1px dashed rgba(255,110,199,.4);
  background: repeating-linear-gradient(45deg, #180A12 0 14px, #100710 14px 28px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  overflow: hidden;
  position: relative;
}
.cc-story__play {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--cc-tint-2);
  border: 1px solid rgba(255,110,199,.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--cc-pink-bright);
}
.cc-story__file { font-family: var(--mono); font-size: 11px; color: #C8C8CE; }
.cc-story__label { text-align: center; font-size: 13px; color: var(--cc-text-muted); margin-top: 10px; }

/* =========================================================================
   Testimonials
   ========================================================================= */
.cc-testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 0 var(--gutter) 72px;
}
.cc-testimonials-wrap { padding: 0 var(--gutter) 72px; }
.cc-testimonials-wrap .cc-quote { height: 100%; }
.cc-testimonials-wrap .cc-carousel__slide { flex-basis: calc((100% - 2 * 18px) / 3); }
.cc-quote {
  background: var(--cc-panel);
  border: 1px solid rgba(255,110,199,.16);
  border-radius: 16px;
  padding: 30px 28px;
}
.cc-quote__mark {
  font-family: var(--serif);
  font-size: 52px;
  line-height: .5;
  color: var(--cc-pink);
  margin: 10px 0 18px;
}
.cc-quote__stars { color: #E0218A; font-size: 13px; letter-spacing: .2em; margin-bottom: 14px; }
.cc-quote__text { font-size: 15px; line-height: 1.65; color: #F0F0F2; margin: 0 0 22px; font-style: italic; }
.cc-quote__name { font-size: 14px; font-weight: 700; color: #fff; }
.cc-quote__meta { font-size: 13px; color: var(--cc-text-muted); margin-top: 3px; }

/* =========================================================================
   Big CTA
   ========================================================================= */
.cc-cta {
  margin: 0 var(--gutter) 72px;
  background: var(--cc-pink);
  border-radius: 20px;
  padding: 64px 56px;
  text-align: center;
}
.cc-cta .cc-script { color: #FFFFFF; font-size: 28px; margin-bottom: 10px; }
.cc-cta h2 {
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 14px;
  text-wrap: balance;
}
.cc-cta p { font-size: 17px; color: #FFFFFF; margin: 0 0 32px; }

/* =========================================================================
   Footer
   ========================================================================= */
.cc-footer {
  border-top: 1px solid var(--cc-border);
  padding: 48px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px;
}
.cc-footer__brand img { height: 38px; width: auto; margin-bottom: 14px; }
.cc-footer__tagline { font-size: 14px; color: var(--cc-text-muted); line-height: 1.6; }
.cc-footer__col {
  font-size: 14px;
  color: var(--cc-text-soft-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cc-footer__col-title {
  font-weight: 700;
  color: #fff;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cc-footer__col a { text-decoration: none; color: inherit; }
.cc-footer__col a:hover { color: var(--cc-pink-bright); }
.cc-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.cc-disclaimer {
  padding: 0 48px 20px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--cc-text-faint);
}
.cc-colophon {
  padding: 0 48px 32px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--cc-text-faint);
}

/* =========================================================================
   Generic page / content
   ========================================================================= */
.cc-page {
  padding: 64px var(--gutter) 80px;
}
.cc-page__header { text-align: center; margin-bottom: 40px; }
.cc-page__header .cc-h1 { font-size: 56px; margin-bottom: 16px; }
.cc-prose {
  max-width: 760px;
  margin: 0 auto;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--cc-text-soft);
}
.cc-prose h2 { font-family: var(--serif); color: #fff; font-size: 30px; margin: 40px 0 12px; }
.cc-prose h3 { font-family: var(--serif); color: #fff; font-size: 22px; margin: 28px 0 10px; }
.cc-prose a { color: var(--cc-pink-bright); }
.cc-prose ul, .cc-prose ol { padding-left: 22px; }
.cc-prose li { margin: 8px 0; }
.cc-prose blockquote {
  border-left: 3px solid var(--cc-pink);
  margin: 24px 0;
  padding: 4px 20px;
  color: #F0F0F2;
  font-style: italic;
}

/* Auth / form card */
.cc-auth {
  max-width: 460px;
  margin: 56px auto 80px;
  background: var(--cc-panel);
  border: 1px solid rgba(255,110,199,.16);
  border-radius: 20px;
  padding: 44px 40px;
}
.cc-auth h1 { font-family: var(--serif); font-size: 34px; font-weight: 800; color: #fff; margin: 0 0 6px; text-align: center; }
.cc-auth__sub { text-align: center; color: var(--cc-text-muted); font-size: 14px; margin-bottom: 28px; }
.cc-field { margin-bottom: 16px; }
.cc-field label { display: block; font-size: 13px; color: var(--cc-text-soft-2); margin-bottom: 8px; font-weight: 600; }
.cc-field input {
  width: 100%;
  background: var(--cc-panel-2);
  border: 1px solid var(--cc-border-3);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  color: var(--cc-text);
  font-family: inherit;
  outline: none;
}
.cc-auth .cc-btn { width: 100%; justify-content: center; margin-top: 8px; }
.cc-auth__alt { text-align: center; font-size: 13px; color: var(--cc-text-muted); margin-top: 20px; }
.cc-auth__alt a { color: var(--cc-pink-bright); text-decoration: none; }

/* Oracle / feature tiles */
.cc-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 8px var(--gutter) 72px;
}

/* =========================================================================
   Auth flow (sign up / sign in) — matches the multi-step onboarding design
   ========================================================================= */
.cc-authpage {
  min-height: 100vh;
  background: radial-gradient(900px 500px at 50% -10%, rgba(224,33,138,.14), transparent 70%), var(--cc-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px;
}
.cc-authpage__logo { margin-bottom: 10px; }
.cc-authpage__tag { font-size: 22px; margin-bottom: 28px; }
.cc-authpage__note {
  margin-top: 22px;
  font-size: 11.5px;
  color: #9C9CA4;
  text-align: center;
  max-width: 460px;
  line-height: 1.6;
}

/* progress dots */
.cc-progress { display: flex; gap: 8px; margin-bottom: 24px; }
.cc-progress span {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #3A2230;
  transition: all .25s;
}
.cc-progress span.is-done { background: var(--cc-pink); }
.cc-progress span.is-current { width: 26px; background: var(--cc-pink-bright); }

/* card */
.cc-authcard {
  width: 460px;
  max-width: 100%;
  background: var(--cc-panel);
  border: 1px solid rgba(255,110,199,.18);
  border-radius: 20px;
  padding: 36px;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
}

/* steps */
.cc-step { display: none; }
.cc-step.is-active { display: block; }
.cc-step h1 {
  font-family: var(--serif);
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px;
  font-size: 28px;
}
.cc-step__title--lg { font-size: 32px; text-align: center; margin-bottom: 10px !important; text-wrap: balance; }
.cc-step__sub {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--cc-text-muted);
  margin: 0 0 24px;
}
.cc-step__sub--center { text-align: center; }

/* inputs */
.cc-input {
  width: 100%;
  background: var(--cc-panel-2);
  border: 1px solid rgba(255,110,199,.3);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 14.5px;
  color: var(--cc-text);
  outline: none;
  font-family: inherit;
}
.cc-input::placeholder { color: #ADADB4; }
.cc-input:focus { border-color: var(--cc-pink); }
.cc-input-group { display: flex; flex-direction: column; gap: 12px; }

/* buttons */
.cc-btn--block { width: 100%; justify-content: center; padding: 15px; font-weight: 800; font-size: 15px; }
.cc-btn--outline {
  background: transparent;
  border: 1px solid rgba(255,110,199,.35);
  color: var(--cc-pink-bright);
  font-weight: 700;
  font-size: 14px;
  padding: 14px;
}
.cc-btn.is-disabled,
.cc-btn:disabled { background: #2A1520; color: #9C9CA4; cursor: not-allowed; filter: none; transform: none; }

.cc-authlink {
  color: var(--cc-pink-bright);
  font-weight: 700;
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  padding: 0;
  text-decoration: none;
}
.cc-back {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #9C9CA4;
  cursor: pointer;
  margin-top: 16px;
  background: none;
  border: none;
  font-family: inherit;
}

/* divider */
.cc-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.cc-divider::before, .cc-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,110,199,.15); }
.cc-divider span { font-size: 12px; color: #9C9CA4; }

/* oauth */
.cc-oauth { display: flex; gap: 10px; margin-bottom: 20px; }
.cc-oauth button {
  flex: 1;
  text-align: center;
  border: 1px solid rgba(255,110,199,.25);
  color: #F0F0F2;
  font-weight: 700;
  font-size: 13.5px;
  padding: 12px;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  white-space: nowrap;
  font-family: inherit;
}
.cc-oauth button:hover { border-color: var(--cc-pink); }

.cc-fineprint { font-size: 11.5px; line-height: 1.6; color: #9C9CA4; text-align: center; }
.cc-fineprint a { color: var(--cc-text-muted); }

/* alias */
.cc-alias {
  background: var(--cc-panel-2);
  border: 1px solid rgba(255,110,199,.3);
  border-radius: 14px;
  padding: 22px;
  text-align: center;
  margin-bottom: 14px;
}
.cc-alias__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(224,33,138,.22);
  border: 1px solid rgba(255,110,199,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: var(--cc-pink-bright);
  margin: 0 auto 12px;
}
.cc-alias__name { font-family: var(--serif); font-size: 24px; font-weight: 800; color: #fff; }
.cc-shuffle {
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cc-pink-bright);
  cursor: pointer;
  margin-bottom: 22px;
  background: none;
  border: none;
  width: 100%;
  font-family: inherit;
}

/* otp */
.cc-otp { display: flex; gap: 8px; justify-content: center; margin-bottom: 20px; }
.cc-otp input {
  width: 52px; height: 60px;
  text-align: center;
  font-size: 24px; font-weight: 800;
  background: var(--cc-panel-2);
  border: 1px solid rgba(255,110,199,.25);
  border-radius: 12px;
  color: var(--cc-pink-bright);
  outline: none;
  font-family: inherit;
}
.cc-otp input:focus { border-color: rgba(255,110,199,.6); }

/* pledge */
.cc-pledge { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.cc-pledge__item {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--cc-panel-2);
  border: 1px solid rgba(255,110,199,.2);
  border-radius: 12px;
  padding: 15px 16px;
  cursor: pointer;
}
.cc-pledge__item.is-on { border-color: rgba(123,224,173,.5); }
.cc-pledge__box {
  width: 22px; height: 22px;
  border-radius: 7px;
  flex: 0 0 auto;
  background: transparent;
  border: 1.5px solid rgba(255,110,199,.4);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 800;
}
.cc-pledge__item.is-on .cc-pledge__box { background: var(--cc-pink); border-color: var(--cc-pink); }
.cc-pledge__item.is-on .cc-pledge__box::after { content: '✓'; }
.cc-pledge__title { font-size: 13.5px; font-weight: 700; color: #fff; }
.cc-pledge__desc { font-size: 12px; line-height: 1.55; color: #ADADB4; margin-top: 3px; }

/* personalize */
.cc-field-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9C9CA4;
  margin-bottom: 8px;
}
.cc-toggles { display: flex; flex-direction: column; gap: 12px; }
.cc-toggle-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.cc-toggle-row .label { font-size: 13.5px; font-weight: 600; color: #F0F0F2; }
.cc-switch {
  margin-left: auto;
  width: 40px; height: 22px;
  border-radius: 999px;
  background: #3A2230;
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  transition: background .2s;
}
.cc-switch__knob {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}
.cc-toggle-row.is-on .cc-switch { background: var(--cc-pink); }
.cc-toggle-row.is-on .cc-switch__knob { left: 21px; }

/* pro */
.cc-prolist {
  background: var(--cc-panel-2);
  border: 1px solid rgba(255,110,199,.3);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 22px;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 13.5px; color: #F0F0F2;
}
.cc-prolist .ok { color: #7BE0AD; }

/* messages */
.cc-formmsg { font-size: 13px; color: #FF8FB0; margin: 0 0 14px; text-align: center; }
.cc-formmsg[hidden] { display: none; }

/* utilities */
.cc-center { text-align: center; }
.cc-mt-14 { margin-top: 14px; }
.cc-mb-10 { margin-bottom: 10px; }
.cc-mb-12 { margin-bottom: 12px; }
.cc-mb-16 { margin-bottom: 16px; }
.cc-mb-18 { margin-bottom: 18px; }
.cc-mb-20 { margin-bottom: 20px; }
.cc-mb-22 { margin-bottom: 22px; }
.cc-small-note { font-size: 13px; color: #9C9CA4; text-align: center; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1024px) {
  :root { --gutter: 32px; }
  .cc-hero { grid-template-columns: 1fr; }
  .cc-hero__media { max-width: 420px; }
  .cc-features,
  .cc-testimonials,
  .cc-tiles { grid-template-columns: repeat(2, 1fr); }
  .cc-stories__grid { grid-template-columns: repeat(2, 1fr); }
  .cc-carousel__slide { flex-basis: calc((100% - 2 * 18px) / 3); }
  .cc-testimonials-wrap .cc-carousel__slide { flex-basis: calc((100% - 18px) / 2); }
  .cc-h1 { font-size: 56px; }
  .cc-footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  :root { --gutter: 20px; }
  .cc-nav { position: relative; }
  .cc-nav__toggle { display: inline-block; }
  .cc-nav__drawer {
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: fixed;
    top: 0; left: 0;
    height: 100vh; height: 100dvh;
    width: min(82vw, 320px);
    background: var(--cc-panel);
    border-right: 1px solid var(--cc-border);
    box-shadow: 8px 0 40px rgba(0,0,0,.5);
    transform: translateX(-100%);
    transition: transform .28s ease;
    z-index: 200;
    padding: 84px 26px 32px;
    overflow-y: auto;
  }
  .cc-nav.is-open .cc-nav__drawer { transform: translateX(0); }
  .cc-nav__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--cc-border-2);
    color: var(--cc-text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
  }
  .cc-nav__menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    font-size: 16px;
  }
  .cc-nav__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 4px;
    padding-top: 22px;
    border-top: 1px solid var(--cc-border);
  }
  .cc-nav__actions .cc-btn { justify-content: center; text-align: center; }
  .cc-nav__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s;
    z-index: 150;
  }
  .cc-nav.is-open .cc-nav__backdrop { opacity: 1; visibility: visible; }
  body.cc-nav-open { overflow: hidden; }
  .cc-search { flex-direction: column; }
  .cc-hero__copy { text-align: center; }
  .cc-hero__copy p,
  .cc-hero__copy .cc-lead { margin-left: auto; margin-right: auto; }
  .cc-hero .cc-search { max-width: 560px; margin-left: auto; margin-right: auto; }
  .cc-hero__copy .cc-search__note { text-align: center; }
  .cc-stats { grid-template-columns: repeat(2, 1fr); }
  .cc-stat:nth-child(2) { border-right: none; }
  .cc-features,
  .cc-testimonials,
  .cc-tiles { grid-template-columns: 1fr; }
  .cc-stories__grid { grid-template-columns: 1fr 1fr; }
  .cc-carousel__slide { flex-basis: calc((100% - 18px) / 2); }
  .cc-stories .cc-carousel__slide { flex-basis: 100%; }
  .cc-testimonials-wrap .cc-carousel__slide { flex-basis: 100%; }
  .cc-h1 { font-size: 40px; }
  .cc-h2,
  .cc-section-head .cc-h2 { font-size: 32px; }
  .cc-cta h2 { font-size: 34px; }
  .cc-cta { padding: 44px 28px; }
  .cc-compare-wrap { padding: 8px 16px 60px; }
  .cc-compare {
    border: none;
    border-radius: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .cc-compare__head { display: none; }
  .cc-compare__row {
    display: block;
    border: 1px solid var(--cc-border-2);
    border-radius: 16px;
    overflow: hidden;
    font-size: 14px;
  }
  .cc-compare__row .cell-f {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 18px;
    font-size: 15px;
    font-weight: 700;
    border-bottom: 1px solid var(--cc-border-2);
  }
  .cc-compare__row .cell-f::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cc-pink-bright);
    flex: 0 0 auto;
  }
  .cc-compare__row .cell-us,
  .cc-compare__row .cell-them {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 18px;
    font-size: 14.5px;
  }
  .cc-compare__row .cell-us { border-bottom: 1px solid var(--cc-border-2); }
  .cc-compare__row .cell-us::before,
  .cc-compare__row .cell-them::before {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    flex: 0 0 auto;
  }
  .cc-compare__row .cell-us::before { content: "CHEATCHAT"; color: var(--cc-pink-bright); }
  .cc-compare__row .cell-them::before { content: "OTHERS"; color: var(--cc-text-muted); }
  .cc-stories__head { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
  .cc-footer {
    grid-template-columns: repeat(3, 1fr);
    padding: 32px 16px;
    gap: 24px 10px;
    text-align: center;
  }
  .cc-footer__brand {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .cc-footer__brand .cc-logo-link { align-items: center; }
  .cc-footer__tagline { text-align: center; }
  .cc-footer__col {
    font-size: 12.5px;
    gap: 9px;
    align-items: center;
    text-align: center;
  }
  .cc-footer__col ul { align-items: center; }
  .cc-footer__col-title { font-size: 11px; letter-spacing: .06em; }
  .cc-app__foot { justify-content: center; text-align: center; }
  .cc-app__foot > span[style] { margin-left: 0 !important; text-align: center !important; max-width: 100% !important; width: 100%; }
  #ccdm { flex-direction: column; height: calc(100dvh - 200px) !important; min-height: 440px; }
  #ccdm-listpane { width: 100% !important; flex: 1 1 auto !important; border-right: none !important; }
  #ccdm-chatpane { display: none !important; }
  #ccdm.is-chat-open #ccdm-listpane { display: none !important; }
  #ccdm.is-chat-open #ccdm-chatpane { display: flex !important; }
  #ccdm-back { display: inline-flex !important; }
  .cc-disclaimer, .cc-colophon { padding-left: 20px; padding-right: 20px; text-align: center; }
  .cc-colophon { flex-direction: column; gap: 8px; align-items: center; }
  .cc-page__header .cc-h1 { font-size: 38px; }
  .cc-authcard { padding: 28px 22px; }
  .cc-otp { gap: 6px; }
  .cc-otp input { width: 100%; height: 54px; font-size: 20px; }
  .cc-step__title--lg { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =========================================================================
 * App shell (logged-in inner pages: The Buzz, etc.)
 * Left nav sidebar + top bar + middle feed + right rail
 * ========================================================================= */
.cc-app { display:flex; min-height:100vh; background:#0C0509; }
.cc-app__side {
	width:230px; flex:0 0 230px; background:#0E060B;
	border-right:1px solid rgba(255,110,199,.12);
	padding:22px 16px; position:sticky; top:0; height:100vh; overflow-y:auto;
	display:flex; flex-direction:column; gap:18px;
}
.cc-app__logo img { height:36px; width:auto; display:block; }
.cc-app__warn {
	display:block; text-align:center; text-decoration:none;
	background:linear-gradient(120deg,#E0218A,#FC0FC0); color:#fff;
	font-weight:700; font-size:14px; padding:12px; border-radius:999px;
}
.cc-app__group { display:flex; flex-direction:column; }
.cc-app__grouplabel { font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#fff; padding:0 10px 6px; }
.cc-app__nav { display:flex; flex-direction:column; gap:2px; }
.cc-app__nav a { display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px; font-size:14px; font-weight:600; color:#fff; text-decoration:none; }
.cc-app__nav a .i { width:22px; font-size:20px; color:#FF6EC7; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.cc-app__nav a.is-active .i { color:#fff; }
.cc-app__nav a:hover { background:rgba(224,33,138,.10); color:#fff; }
.cc-app__nav a.is-active { background:rgba(224,33,138,.22); color:#fff; }
.cc-app__badge { margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:linear-gradient(120deg,#E0218A,#FC0FC0); color:#fff; font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; line-height:1; box-shadow:0 2px 8px rgba(224,33,138,.5); }
.cc-app__badge[hidden] { display:none; }
.cc-app__main { flex:1; min-width:0; display:flex; flex-direction:column; }
.cc-app__top { display:flex; align-items:center; justify-content:space-between; padding:18px 36px; border-bottom:1px solid rgba(255,110,199,.10); position:sticky; top:0; background:rgba(12,5,9,.92); backdrop-filter:blur(8px); z-index:5; }
.cc-app__crumb { font-size:13.5px; color:#fff; font-weight:600; }
.cc-app__topright { display:flex; align-items:center; gap:18px; }
.cc-app__signin { display:inline-flex; align-items:center; justify-content:center; gap:6px; background:linear-gradient(120deg,#E0218A,#FC0FC0); color:#fff; text-decoration:none; font-weight:700; font-size:13.5px; padding:9px 18px; border-radius:999px; line-height:1; box-shadow:0 2px 8px rgba(224,33,138,.35); transition:transform .15s ease, filter .15s ease; }
.cc-app__signin:hover { transform:translateY(-1px); filter:brightness(1.06); color:#fff; }
.cc-app__cta { background:#E0218A; color:#fff; font-weight:700; font-size:13.5px; padding:10px 18px; border-radius:999px; text-decoration:none; }
.cc-app__cols { display:flex; gap:28px; padding:32px 36px; align-items:flex-start; flex:1; }
.cc-app__feed { flex:1; min-width:0; }
.cc-app__rail { width:300px; flex:0 0 300px; display:flex; flex-direction:column; gap:18px; position:sticky; top:88px; }
.cc-rail-card { background:#140A10; border:1px solid rgba(255,110,199,.16); border-radius:16px; padding:22px; }
.cc-rail-card__title { font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#FF6EC7; margin-bottom:14px; }
.cc-app__foot { padding:20px 36px; border-top:1px solid rgba(255,110,199,.1); color:#fff; font-size:12.5px; display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.cc-app__foot a { color:#fff; text-decoration:none; }
@media (max-width:1100px){ .cc-app__rail { display:none; } }
@media (max-width:820px){ .cc-app__side { display:none; } .cc-app__cols,.cc-app__top,.cc-app__foot { padding-left:20px; padding-right:20px; } }

/* Modern, on-brand scrollbars for the app shell (sidebar, rail, chat lists) */
.cc-app__side,
.cc-app__rail,
.cc-app .cc-app__cols,
.cc-app [style*="overflow-y:auto"],
.cc-app [style*="overflow-y: auto"] {
	scrollbar-width: thin;                                   /* Firefox */
	scrollbar-color: rgba(224,33,138,.55) transparent;
}
.cc-app__side::-webkit-scrollbar,
.cc-app__rail::-webkit-scrollbar,
.cc-app [style*="overflow-y:auto"]::-webkit-scrollbar,
.cc-app [style*="overflow-y: auto"]::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
.cc-app__side::-webkit-scrollbar-track,
.cc-app__rail::-webkit-scrollbar-track,
.cc-app [style*="overflow-y:auto"]::-webkit-scrollbar-track,
.cc-app [style*="overflow-y: auto"]::-webkit-scrollbar-track {
	background: transparent;
	margin: 6px 0;
}
.cc-app__side::-webkit-scrollbar-thumb,
.cc-app__rail::-webkit-scrollbar-thumb,
.cc-app [style*="overflow-y:auto"]::-webkit-scrollbar-thumb,
.cc-app [style*="overflow-y: auto"]::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg,#E0218A,#FC0FC0);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: padding-box;
}
.cc-app__side::-webkit-scrollbar-thumb:hover,
.cc-app__rail::-webkit-scrollbar-thumb:hover,
.cc-app [style*="overflow-y:auto"]::-webkit-scrollbar-thumb:hover,
.cc-app [style*="overflow-y: auto"]::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg,#FF6EC7,#FC0FC0);
	background-clip: padding-box;
}
/* Idle: keep the sidebar bar subtle until you interact/hover the sidebar */
.cc-app__side::-webkit-scrollbar-thumb { background: rgba(224,33,138,.45); background-clip: padding-box; }
.cc-app__side:hover::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#E0218A,#FC0FC0); background-clip: padding-box; }

/* The Buzz — Read more / Read less clamp */
.cc-body { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; }
.cc-body.is-open { -webkit-line-clamp:unset; display:block; overflow:visible; }

/* Sister Gram — full-width responsive content */
.cc-gram-wrap { padding: 32px 36px; }
.cc-gram-feed { display: flex; flex-direction: column; gap: 20px; width: 100%; }
@media (max-width: 900px) { .cc-gram-wrap { padding: 22px 20px; } }
@media (max-width: 600px) {
	.cc-gram-wrap { padding: 16px 12px; }
	.cc-gram-feed { gap: 16px; }
}

/* Stories carousel — single video per view on small phones */
@media (max-width: 480px) {
  .cc-carousel__slide { flex-basis: 82%; }
  .cc-carousel__nav { display: none; }
}

/* =========================================================================
 * Full responsive pass — phones & tablets
 * ========================================================================= */
/* Global safety net: nothing should force horizontal scrolling */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }
.cc-app__main, .cc-app__feed, .cc-app__cols, .cc-app__rail, #cc-main, .cc-page { min-width: 0; }

/* App shell: turn the sidebar into an off-canvas drawer on tablet/mobile */
.cc-app__menu { display: none; }
.cc-app__backdrop { display: none; }
.cc-app__top .cc-app__crumb { margin-right: auto; }

@media (max-width: 820px) {
  .cc-app__menu {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;
    border: 1px solid rgba(255,110,199,.22); background: rgba(224,33,138,.12);
    color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
  }
  .cc-app__top { gap: 12px; }
  .cc-app__side {
    display: flex !important;              /* override the old display:none */
    position: fixed; top: 0; left: 0; height: 100vh; width: 268px; max-width: 84vw;
    z-index: 90; transform: translateX(-102%); transition: transform .25s ease;
    box-shadow: 0 0 44px rgba(0,0,0,.55);
  }
  body.cc-appnav-open .cc-app__side { transform: none; }
  body.cc-appnav-open .cc-app__backdrop {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 80;
  }
  body.cc-appnav-open { overflow: hidden; }
  .cc-app__cols { flex-direction: column; }
  .cc-app__rail { width: 100%; flex: 1 1 auto; position: static; }
}

/* Any inline multi-column grid collapses to one column on phones */
@media (max-width: 600px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .cc-btn { white-space: normal; }        /* long CTA labels wrap instead of overflowing */
  .cc-app__top { padding: 14px 16px; }
  .cc-app__cols { padding: 20px 16px; }
  .cc-app__foot { padding: 18px 16px; }
}

/* Marketing hero media full width on small screens */
@media (max-width: 680px) {
  .cc-hero__media { max-width: 100%; }
}

/* Very small phones */
@media (max-width: 380px) {
  .cc-authcard { padding: 22px 15px; }
  .cc-otp { gap: 5px; }
  .cc-otp input { font-size: 18px; }
  .cc-nav__logo img, .cc-app__logo img { height: 32px; }
}

/* =======================================================================
   Front-end form fields — white background, black text (all front-end
   pages). Not loaded in wp-admin, so the dark admin panel is unaffected.
   ======================================================================= */
body:not(.wp-admin) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]):not([type=reset]):not([type=color]),
body:not(.wp-admin) textarea,
body:not(.wp-admin) select {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: #d8b9c8 !important;
  -webkit-text-fill-color: #111111; /* iOS keeps text readable */
  caret-color: #111111;
  font-family: var(--sans) !important; /* every field uses the site font */
  font-weight: 500; /* slightly bold for legibility */
}
body:not(.wp-admin) input::placeholder,
body:not(.wp-admin) textarea::placeholder { color: #8a8a8a !important; opacity: 1; }
body:not(.wp-admin) select option { background: #ffffff; color: #111111; }

/* =======================================================================
   Front-end buttons — black background + white text on hover (all pages).
   Not loaded in wp-admin, so the admin panel is unaffected.
   ======================================================================= */
body:not(.wp-admin) button[style*="border-radius:999px"]:hover,
body:not(.wp-admin) input[type=submit]:hover,
body:not(.wp-admin) input[type=button]:hover,
body:not(.wp-admin) input[type=reset]:hover,
body:not(.wp-admin) .cc-btn:hover,
body:not(.wp-admin) a.cc-btn:hover {
  background: #000000 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* Keep icons/SVGs inside buttons readable on the black hover */
body:not(.wp-admin) button[style*="border-radius:999px"]:hover svg,
body:not(.wp-admin) .cc-btn:hover svg { color: #ffffff !important; stroke: currentColor; }

/* Front-end pill buttons — always a 1px solid border in the button's own (brand) color */
body:not(.wp-admin) button[style*="border-radius:999px"],
body:not(.wp-admin) input[type=submit],
body:not(.wp-admin) input[type=button],
body:not(.wp-admin) input[type=reset],
body:not(.wp-admin) .cc-btn,
body:not(.wp-admin) a.cc-btn {
  border: 1px solid #E0218A !important;
}

/* =======================================================================
   Comparison section — "CheatChat vs. the rest" (redesigned)
   ======================================================================= */
.cc-cmp-sub{ max-width:760px; margin:14px auto 0; font-family:var(--sans); font-size:17px; line-height:1.6; color:var(--cc-text-muted); text-align:center; }
.cc-cmp{ position:relative; display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:0; max-width:1180px; margin:40px auto 0; padding:8px; border:1px solid var(--cc-border); border-radius:0; background:rgba(20,10,18,.45); }
.cc-cmp__row{ display:contents; }
.cc-cmp__usbg{ grid-column:2; grid-row:1 / -1; background:linear-gradient(180deg,#7c1450,#57103c); border-radius:0; box-shadow:0 26px 64px rgba(224,33,138,.22); pointer-events:none; }
.cc-cmp__h{ position:relative; z-index:1; padding:16px 26px 12px; font-family:var(--sans); font-size:12.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--cc-text-faint); }
.cc-cmp__h--us{ color:var(--cc-pink-bright); }
.cc-cmp__f,.cc-cmp__us,.cc-cmp__them{ position:relative; z-index:1; padding:13px 26px; display:flex; align-items:center; gap:14px; min-width:0; }
.cc-cmp__f{ border-top:1px solid rgba(255,255,255,.05); }
.cc-cmp__us{ border-top:1px solid rgba(255,255,255,.08); color:#fff; font-weight:800; font-size:16px; }
.cc-cmp__them{ border-top:1px solid rgba(255,255,255,.05); color:#cbb6c4; font-weight:700; font-size:16px; }
.cc-cmp__ic{ flex:0 0 auto; width:42px; height:42px; border-radius:0; display:flex; align-items:center; justify-content:center; background:#2a1420; border:1px solid rgba(255,110,199,.30); }
.cc-cmp__icimg{ width:24px; height:24px; display:block; }
.cc-cmp__ft{ font-family:var(--sans); font-size:16.5px; font-weight:800; color:#fff; }
.cc-cmp__fd{ font-family:var(--sans); font-size:13.5px; color:var(--cc-text-faint); margin-top:2px; line-height:1.4; }
.cc-cmp__ok{ flex:0 0 auto; width:26px; height:26px; border-radius:0; background:linear-gradient(140deg,var(--cc-pink),var(--cc-magenta)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:900; }
.cc-cmp__them .m-x{ color:#FF3D6E; font-size:18px; font-weight:900; flex:0 0 auto; }
.cc-cmp__them .m-w{ color:#FFB347; font-size:18px; font-weight:900; flex:0 0 auto; }
.cc-cmp__them .m-ok{ color:#7BE0AD; font-size:18px; font-weight:900; flex:0 0 auto; }
@media(max-width:820px){
  /* Stacked card layout on phones/tablets (like the reference) */
  .cc-cmp{ display:block; grid-template-columns:none; border:none; background:none; padding:0; margin:28px auto 0; max-width:540px; }
  .cc-cmp__usbg{ display:none; }
  .cc-cmp__h{ display:none; }
  .cc-cmp__row{ display:block; background:var(--cc-panel); border:1px solid var(--cc-border-2); border-radius:16px; margin-bottom:16px; overflow:hidden; }
  .cc-cmp__f,.cc-cmp__us,.cc-cmp__them{ grid-column:auto !important; grid-row:auto !important; }
  .cc-cmp__f{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-top:none; border-bottom:1px solid var(--cc-border); }
  .cc-cmp__ic{ display:flex; width:34px; height:34px; }
  .cc-cmp__ic .cc-cmp__icimg{ width:19px; height:19px; }
  .cc-cmp__ft{ font-size:16px; }
  .cc-cmp__fd{ display:none; }
  .cc-cmp__us,.cc-cmp__them{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-top:none; }
  .cc-cmp__us{ background:rgba(224,33,138,.12); }
  .cc-cmp__them{ border-top:1px solid var(--cc-border); }
  .cc-cmp__us::before,.cc-cmp__them::before{ margin-right:auto; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
  .cc-cmp__us::before{ content:"CheatChat"; color:var(--cc-pink-bright); }
  .cc-cmp__them::before{ content:"Others"; color:var(--cc-text-faint); }
}

/* Footer social icons */
.cc-social{ display:flex; align-items:center; gap:14px; }
.cc-social a{ display:inline-flex; line-height:0; border-radius:50%; transition:transform .15s ease, filter .15s ease; }
.cc-social a:hover{ transform:translateY(-2px); filter:brightness(1.2); }
.cc-social img{ width:36px; height:36px; display:block; border-radius:50%; }

/* App footer bar social icons (inner pages) */
.cc-app__foot .cc-social{ margin:0 auto; }
.cc-app__foot .cc-social img{ width:30px; height:30px; }
@media(max-width:700px){ .cc-app__foot .cc-social{ margin:6px auto !important; } }

/* Warn the Girls form — force site font on every field, label & upload/record text
   (uses !important so it overrides any stale inline font baked into cached HTML) */
#cc-warn-form, #cc-warn-form * { font-family: var(--sans) !important; }
/* Slightly bold the upload/record instruction text */
#cc-warn-form label div, #cc-rec span, #cc-rec-timer, #cc-rec-msg { font-weight: 500 !important; }

/* Her Space comment box — larger, easy-to-read text (cache-proof) */
.cc-gram-comment-form input[name="body"] { font-size: 15px !important; padding: 12px 18px !important; }
.cc-gram-comment-form button[type="submit"] { font-size: 15px !important; padding: 12px 22px !important; }

/* Match Meter — remove the quick name-match tool (keeps the compatibility quiz
   AND the Match Meter history / past results below; cache-proof via !important) */
#cc-mm .cmp-or,
#cc-mm .mm-fields,
#cc-mm .mm-cta,
#cc-mm .mm-result,
#cc-mm .mm-signin,
#cc-mm .mm-history { display: none !important; }

/* -------------------------------------------------------------------------
 * Banner ads (managed in admin → Revenue → Ads Manager)
 * ------------------------------------------------------------------------- */
.cc-ad{ position:relative; max-width:728px; margin:8px auto 40px; padding:0 20px; }
.cc-ad__inner{ position:relative; border-radius:16px; overflow:hidden; border:1px solid rgba(255,110,199,.14); background:var(--cc-panel,#140A10); box-shadow:0 12px 40px rgba(0,0,0,.35); }
.cc-ad__link{ display:block; }
.cc-ad__img{ display:block; width:100%; height:auto; max-height:180px; object-fit:contain; }
.cc-ad__tag{ position:absolute; top:14px; right:30px; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#c99; background:rgba(0,0,0,.45); border:1px solid rgba(255,110,199,.18); padding:2px 7px; border-radius:999px; }
@media (max-width:600px){ .cc-ad{ margin:4px auto 26px; } .cc-ad__tag{ right:24px; } }

/* Pink-tint an emoji glyph to the CheatChat brand pink (#E0218A). */
.cc-ico-pink{display:inline-block;filter:brightness(0) saturate(100%) invert(24%) sepia(82%) saturate(3200%) hue-rotate(313deg) brightness(95%) contrast(96%)}

/* Top-bar notification bell + unread count badge. */
.cc-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-size:18px;line-height:1}
.cc-bell__count{position:absolute;top:-7px;right:-10px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:linear-gradient(120deg,#E0218A,#FC0FC0);color:#fff;font-size:10px;font-weight:800;line-height:16px;text-align:center;box-shadow:0 0 0 2px #0b0409;box-sizing:border-box}
.cc-bell__count[hidden]{display:none}

/* =======================================================================
   Header account buttons (Dashboard / account / Log Out) — refined pills
   Scoped to the top nav so the rest of the site's buttons are untouched.
   ======================================================================= */
body:not(.wp-admin) .cc-nav__actions{ display:flex; align-items:center; gap:10px; }
body:not(.wp-admin) .cc-nav__actions .cc-btn{
  height:42px; padding:0 18px; border-radius:999px;
  font-size:14px; font-weight:700; line-height:1;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
/* Ghost pills (Dashboard, account name, Sign In): glassy pink-tinted */
body:not(.wp-admin) .cc-nav__actions .cc-btn--ghost{
  background:rgba(224,33,138,.12) !important;
  border:1px solid rgba(255,110,199,.42) !important;
  color:#fff !important;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
body:not(.wp-admin) .cc-nav__actions .cc-btn--ghost:hover{
  background:rgba(224,33,138,.24) !important;
  border-color:rgba(255,110,199,.95) !important;
  color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(224,33,138,.30);
}
body:not(.wp-admin) .cc-nav__actions .cc-btn--ghost svg,
body:not(.wp-admin) .cc-nav__actions .cc-btn--ghost:hover svg{ color:#FF6EC7 !important; }
/* Primary pill (Log Out, Get Started): gradient with a soft brand glow */
body:not(.wp-admin) .cc-nav__actions .cc-btn--primary{
  background:linear-gradient(120deg,#E0218A,#FC0FC0) !important;
  border:1px solid transparent !important;
  color:#fff !important;
  box-shadow:0 6px 16px rgba(224,33,138,.34);
}
body:not(.wp-admin) .cc-nav__actions .cc-btn--primary:hover{
  background:linear-gradient(120deg,#E0218A,#FC0FC0) !important;
  border-color:transparent !important;
  color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 9px 24px rgba(224,33,138,.55);
}
/* Keep a long account name tidy (truncates with an ellipsis) */
body:not(.wp-admin) .cc-nav__actions .cc-acct-name{
  max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}