/*
Theme Name: Omgle Site
Theme URI: https://omgle.site
Author: Omgle Site
Author URI: https://omgle.site
Description: A modern, full-site-editing WordPress theme for Omgle.site — anonymous video & text chat platform. Built with WordPress blocks, fully customisable colours, fonts, menus, and social links via theme settings. SEO and AI engine optimised with structured data, semantic HTML5, and Open Graph support.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: omgle-site
Tags: full-site-editing, block-editor, custom-colors, custom-fonts, wide-blocks, one-column, accessibility-ready

This theme uses WordPress Full Site Editing (FSE) with theme.json for all design tokens.
All colours, fonts, spacing, and layout settings are controlled via Appearance > Editor > Styles.
*/

/* Base reset — block theme minimal baseline */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--wp--preset--font-family--dm-sans, 'DM Sans', sans-serif);
  background-color: var(--wp--preset--color--background, #2d1060);
  color: var(--wp--preset--color--foreground, #ffffff);
  -webkit-font-smoothing: antialiased;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Links */
a {
  color: var(--wp--preset--color--accent, #f9e03b);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.8;
}

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

/* Skip link accessibility */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--wp--preset--color--accent);
  color: #1a1200;
  padding: 0.5rem 1rem;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  z-index: 9999;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}

/* Ensure block editor full width works */
.wp-site-blocks {
  overflow-x: hidden;
}

/* Navigation overrides */
.wp-block-navigation a {
  color: var(--wp--preset--color--muted, #cbb8f5);
  font-size: 0.9rem;
  font-weight: 400;
  transition: color 0.2s;
}

.wp-block-navigation a:hover {
  color: var(--wp--preset--color--foreground, #ffffff);
  opacity: 1;
}

/* Nav CTA button style */
.nav-cta .wp-block-button__link {
  background-color: var(--wp--preset--color--accent) !important;
  color: #1a1200 !important;
  font-weight: 600;
  padding: 0.45rem 1.1rem;
  border-radius: 8px;
  font-size: 0.88rem;
}

/* Hero section */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.hero-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(45px);
  animation: orbFloat 9s ease-in-out infinite;
}

.orb-1 {
  width: 680px; height: 680px;
  top: -180px; left: 50%;
  transform: translateX(-55%);
  background: radial-gradient(circle, rgba(168,85,247,0.55) 0%, rgba(109,40,217,0.28) 45%, transparent 70%);
}

.orb-2 {
  width: 480px; height: 480px;
  bottom: -60px; right: -80px;
  background: radial-gradient(circle, rgba(249,224,59,0.28) 0%, rgba(255,107,157,0.18) 45%, transparent 70%);
  animation-delay: -3s;
  animation-duration: 11s;
}

.orb-3 {
  width: 360px; height: 360px;
  bottom: 10%; left: -60px;
  background: radial-gradient(circle, rgba(94,255,200,0.26) 0%, rgba(56,189,248,0.14) 45%, transparent 70%);
  animation-direction: reverse;
  animation-duration: 13s;
}

.orb-4 {
  width: 240px; height: 240px;
  top: 28%; right: 7%;
  background: radial-gradient(circle, rgba(255,107,157,0.28) 0%, transparent 65%);
  animation-delay: -5s;
  animation-duration: 8s;
}

@keyframes orbFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.04); }
}

.orb-1 { animation-name: orbFloat1; }

@keyframes orbFloat1 {
  0%, 100% { transform: translateX(-55%) translateY(0) scale(1); }
  50% { transform: translateX(-55%) translateY(-20px) scale(1.04); }
}

/* Live badge */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  color: #cbb8f5;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.85rem;
  border-radius: 100px;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.live-badge-dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: #5effc8;
  border-radius: 50%;
  box-shadow: 0 0 8px #5effc8;
  animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Trust bar */
.trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 3vw, 3rem);
  flex-wrap: wrap;
  padding: 1.6rem clamp(1.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.84rem;
  color: var(--wp--preset--color--muted, #cbb8f5);
}

.trust-item span:first-child { font-size: 1rem; }

/* Feature grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  overflow: hidden;
}

.feature-card {
  background: rgba(255,255,255,0.05);
  padding: 2.2rem;
  transition: background 0.25s;
}

.feature-card:hover {
  background: rgba(255,255,255,0.11);
}

.feature-icon {
  width: 46px; height: 46px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
}

/* Stats row */
.stats-row {
  display: flex;
  gap: clamp(2rem, 5vw, 4rem);
  justify-content: center;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.stat-number {
  font-family: var(--wp--preset--font-family--syne, 'Syne', sans-serif);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--wp--preset--color--foreground, #fff);
  letter-spacing: -0.03em;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--wp--preset--color--muted, #cbb8f5);
  letter-spacing: 0.02em;
}

.stat-divider {
  width: 1px;
  height: 100%;
  min-height: 40px;
  background: rgba(255,255,255,0.15);
  align-self: stretch;
}

/* Section label */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--wp--preset--color--accent, #f9e03b);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}

.section-label::before {
  content: '';
  display: inline-block;
  width: 18px; height: 1px;
  background: var(--wp--preset--color--accent, #f9e03b);
}

/* Chat mockup */
.chat-mockup {
  background: #ffffff;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,0.35), 0 0 60px rgba(168,85,247,0.18);
}

.chat-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.9rem 1.3rem;
  background: #f5f5f5;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}

.topbar-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}

.chat-status {
  flex: 1;
  text-align: center;
  font-size: 0.74rem;
  color: #555;
}

.chat-live-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(94,255,200,0.1);
  border: 1px solid rgba(94,255,200,0.25);
  color: #008f5f;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.18rem 0.55rem;
  border-radius: 100px;
}

.chat-live-dot {
  width: 5px; height: 5px;
  background: #00c896;
  border-radius: 50%;
  animation: blink 1.5s ease-in-out infinite;
}

.chat-video {
  background: #e0e0e0;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.chat-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: #888;
}

.avatar-circle {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.self-preview {
  position: absolute;
  bottom: 10px; right: 10px;
  width: 76px; height: 55px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.chat-input-bar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem 1.1rem;
  background: #ececec;
  border-top: 1px solid rgba(0,0,0,0.07);
}

.chat-input-bar input {
  flex: 1;
  background: #f0f0f0;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  font-size: 0.84rem;
  color: #222;
  outline: none;
  font-family: inherit;
}

.chat-send {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #e0e0e0;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
}

.chat-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 0.9rem 1.3rem;
  background: #f5f5f5;
  border-top: 1px solid rgba(0,0,0,0.07);
}

.ctrl-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #e0e0e0;
  border: 1px solid rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s;
}

.ctrl-btn:hover { background: #ccc; }

.ctrl-btn-next {
  width: 50px; height: 50px;
  background: rgba(0,200,150,0.15);
  border-color: rgba(0,200,150,0.3);
  font-size: 1.05rem;
}

.ctrl-btn-end {
  background: rgba(255,80,80,0.15);
  border-color: rgba(255,80,80,0.3);
}

/* Mode selector */
.mode-selector {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto 2.5rem;
}

.mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 1.2rem 1.8rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 16px;
  text-decoration: none;
  color: #fff;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
  min-width: 140px;
}

.mode-card:hover,
.mode-card.active {
  border-color: var(--wp--preset--color--accent, #f9e03b);
  background: rgba(249,224,59,0.08);
  transform: translateY(-3px);
}

.mode-icon { font-size: 1.5rem; }
.mode-label { font-size: 0.88rem; font-weight: 600; }
.mode-sub { font-size: 0.72rem; color: var(--wp--preset--color--muted, #cbb8f5); }

/* Testimonial cards */
.testimonial-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 16px;
  padding: 1.8rem;
  transition: background 0.2s, transform 0.2s;
}

.testimonial-card:hover {
  background: rgba(255,255,255,0.11);
  transform: translateY(-3px);
}

.stars { color: #f9e03b; font-size: 0.9rem; letter-spacing: 2px; margin-bottom: 0.85rem; }

.testimonial-text {
  font-size: 0.91rem;
  color: var(--wp--preset--color--muted, #cbb8f5);
  line-height: 1.7;
  font-weight: 300;
  font-style: italic;
  margin-bottom: 1.1rem;
}

.author-row { display: flex; align-items: center; gap: 10px; }

.author-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.author-name { font-size: 0.84rem; font-weight: 500; color: #fff; }
.author-country { font-size: 0.73rem; color: var(--wp--preset--color--muted, #cbb8f5); }

/* Safety cards */
.safety-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 16px;
  padding: 1.8rem 1.5rem;
  text-align: center;
}

.safety-icon { font-size: 2rem; margin-bottom: 0.9rem; display: block; }

/* FAQ accordion */
.faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding: 1.2rem 0;
  cursor: pointer;
}

.faq-item:last-child { border-bottom: none; }

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faq-question h4 {
  font-size: 0.98rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.faq-toggle {
  font-size: 1.2rem;
  color: #f9e03b;
  transition: transform 0.25s;
  flex-shrink: 0;
  font-weight: 300;
}

.faq-answer {
  font-size: 0.88rem;
  color: var(--wp--preset--color--muted, #cbb8f5);
  font-weight: 300;
  line-height: 1.7;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.25s;
}

.faq-item.open .faq-answer {
  max-height: 220px;
  padding-top: 0.8rem;
}

.faq-item.open .faq-toggle { transform: rotate(45deg); }

/* Comparison table */
.compare-table-wrap {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  overflow: hidden;
}

.compare-table-wrap table { width: 100%; border-collapse: collapse; }

.compare-table-wrap thead th {
  padding: 1rem 1.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-align: left;
}

.compare-table-wrap thead th.col-us {
  color: #f9e03b;
  background: rgba(249,224,59,0.06);
}

.compare-table-wrap tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: background 0.15s;
}

.compare-table-wrap tbody tr:last-child { border-bottom: none; }
.compare-table-wrap tbody tr:hover { background: rgba(255,255,255,0.05); }

.compare-table-wrap tbody td {
  padding: 0.9rem 1.3rem;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.58);
  font-weight: 300;
}

.compare-table-wrap tbody td:first-child { color: #fff; font-weight: 400; }
.compare-table-wrap tbody td.col-us { background: rgba(249,224,59,0.04); }

.check-yes { color: #6cffb8; }
.check-no { color: #ff5f5f; opacity: 0.8; }
.check-partial { color: #ffca6c; }

/* Countries strip */
.countries-strip {
  text-align: center;
  padding: 2.5rem clamp(1.5rem, 5vw, 4rem);
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.countries-label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 1.2rem;
}

.flags-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 1.75rem;
}

/* CTA section */
.cta-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 28px;
  padding: clamp(3rem, 5vw, 4.5rem) clamp(2rem, 5vw, 4rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-card::before {
  content: '';
  position: absolute;
  top: -80px; left: 50%;
  transform: translateX(-50%);
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(249,224,59,0.13) 0%, transparent 65%);
  pointer-events: none;
}

/* Footer */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 2rem;
}

.footer-brand-desc {
  font-size: 0.87rem;
  color: var(--wp--preset--color--muted, #cbb8f5);
  font-weight: 300;
  line-height: 1.65;
  margin-top: 0.7rem;
  max-width: 280px;
}

.footer-col-title {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 1rem;
}

/* Buttons */
.wp-block-button.is-style-primary .wp-block-button__link {
  background-color: var(--wp--preset--color--accent, #f9e03b) !important;
  color: #1a1200 !important;
  font-weight: 600;
  border-radius: 12px;
  padding: 0.85rem 2rem;
  box-shadow: 0 0 32px rgba(249,224,59,0.45);
  transition: transform 0.2s, box-shadow 0.2s;
  border: none;
}

.wp-block-button.is-style-primary .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 48px rgba(249,224,59,0.65);
  opacity: 1;
}

.wp-block-button.is-style-secondary .wp-block-button__link {
  background-color: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 12px;
  padding: 0.85rem 2rem;
  font-weight: 400;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover {
  background-color: rgba(255,255,255,0.2) !important;
  border-color: var(--wp--preset--color--accent, #f9e03b) !important;
  transform: translateY(-2px);
  opacity: 1;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* Responsive */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .stat-divider { display: none; }
  .stats-row { gap: 1.5rem; }
}