/*
Theme Name: Robin Bhai 9x Profit
Theme URI: https://robinbhai.com
Author: Robin Bhai
Author URI: https://robinbhai.com
Description: Glow-effect landing page with money rain animation, green-white gradient, golden glow text, bounce buttons, Meta Pixel tracking, and Elementor support.
Version: 2.0.0
Requires at least: 5.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: robin-bhai
Tags: one-column, custom-colors, custom-logo, elementor
*/

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */
:root {
  --rb-bg-dark: hsl(145, 60%, 20%);
  --rb-bg-mid: hsl(145, 40%, 35%);
  --rb-bg-light: hsl(0, 0%, 95%);
  --rb-primary: hsl(145, 70%, 45%);
  --rb-primary-fg: hsl(0, 0%, 100%);
  --rb-secondary: hsl(38, 100%, 50%);
  --rb-accent: hsl(45, 100%, 55%);
  --rb-text: hsl(0, 0%, 98%);
  --rb-text-muted: hsl(145, 5%, 55%);
  --rb-text-glow: hsl(45, 100%, 70%);
  --rb-radius: 0.75rem;
  --rb-font: 'Poppins', sans-serif;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--rb-font);
  color: var(--rb-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }

/* ============================================
   PAGE WRAPPER
   ============================================ */
.rb-page {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--rb-bg-dark), var(--rb-bg-mid), var(--rb-bg-light));
}

/* ============================================
   MONEY RAIN
   ============================================ */
.rb-money-rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.rb-money-drop {
  position: absolute;
  top: -40px;
  animation: rb-money-fall linear forwards;
  user-select: none;
}

@keyframes rb-money-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}

/* ============================================
   GLOW ORBS
   ============================================ */
.rb-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.rb-orb {
  position: absolute;
  border-radius: 50%;
}

.rb-orb--1 {
  top: 2.5rem; left: 25%;
  width: 15rem; height: 15rem;
  background: hsla(145, 70%, 45%, 0.1);
  filter: blur(80px);
}

.rb-orb--2 {
  bottom: 5rem; right: 25%;
  width: 12rem; height: 12rem;
  background: hsla(38, 100%, 50%, 0.1);
  filter: blur(70px);
}

.rb-orb--3 {
  top: 50%; left: 50%;
  transform: translateX(-50%);
  width: 11rem; height: 11rem;
  background: hsla(45, 100%, 55%, 0.05);
  filter: blur(70px);
}

/* ============================================
   CONTENT
   ============================================ */
.rb-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 0.75rem;
  max-width: 24rem;
  margin: 0 auto;
  gap: 1.25rem;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
.rb-h1 {
  font-size: 1.25rem;
  font-weight: 900;
  text-align: center;
  color: var(--rb-text-glow);
  text-shadow:
    0 0 10px hsla(45, 100%, 60%, 0.9),
    0 0 30px hsla(45, 100%, 50%, 0.5),
    0 0 60px hsla(38, 100%, 50%, 0.3);
}

.rb-h2 {
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}

.rb-gradient-text {
  background: linear-gradient(135deg, hsl(45, 100%, 65%), hsl(38, 100%, 50%), hsl(145, 70%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.rb-text-white { color: var(--rb-text); }

.rb-footer-text {
  font-size: 0.75rem;
  text-align: center;
  margin-top: 1rem;
  color: var(--rb-text-muted);
}

/* ============================================
   IMAGES
   ============================================ */
.rb-img {
  width: 100%;
  max-width: 240px;
  border-radius: var(--rb-radius);
  overflow: hidden;
}

.rb-img--glow {
  box-shadow:
    0 0 15px hsla(190, 100%, 50%, 0.3),
    0 0 30px hsla(280, 100%, 60%, 0.2),
    0 0 60px hsla(190, 100%, 50%, 0.1);
  animation: rb-float 3s ease-in-out infinite;
}

.rb-img--gold {
  box-shadow:
    0 0 15px hsla(45, 100%, 55%, 0.4),
    0 0 30px hsla(45, 100%, 55%, 0.2),
    0 0 60px hsla(45, 100%, 55%, 0.1);
}

/* ============================================
   BUTTONS
   ============================================ */
.rb-cta {
  width: 100%;
  max-width: 280px;
  display: block;
}

.rb-btn {
  display: block;
  width: 100%;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 0.875rem;
  font-family: var(--rb-font);
  background-color: var(--rb-primary);
  color: var(--rb-primary-fg);
  border: none;
  cursor: pointer;
  text-align: center;
  transition: transform 0.2s ease;
  animation: rb-bounce 2s ease-in-out infinite, rb-pulse-glow 2s ease-in-out infinite;
}

.rb-btn:hover { transform: scale(1.05); }
.rb-btn--delay { animation-delay: 0.3s; }

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes rb-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes rb-pulse-glow {
  0%, 100% {
    box-shadow:
      0 0 15px hsla(190, 100%, 50%, 0.4),
      0 0 30px hsla(280, 100%, 60%, 0.3);
  }
  50% {
    box-shadow:
      0 0 30px hsla(190, 100%, 50%, 0.7),
      0 0 60px hsla(280, 100%, 60%, 0.5),
      0 0 90px hsla(45, 100%, 55%, 0.3);
  }
}

@keyframes rb-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-8px) rotate(1deg); }
  66% { transform: translateY(4px) rotate(-1deg); }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (min-width: 768px) {
  .rb-h1 { font-size: 1.5rem; }
  .rb-h2 { font-size: 1rem; }
  .rb-content { padding: 2rem 1rem; }
}

/* WP Admin Bar */
body.admin-bar .rb-page {
  min-height: calc(100vh - 32px);
}
@media (max-width: 782px) {
  body.admin-bar .rb-page {
    min-height: calc(100vh - 46px);
  }
}

/* ============================================
   ELEMENTOR FULL COMPATIBILITY
   ============================================ */

/* Elementor Content Area */
.rb-elementor-content {
  width: 100%;
  max-width: 100%;
}

.rb-elementor-content .elementor-section {
  max-width: 100%;
}

/* Elementor Section - transparent so page gradient shows */
.rb-elementor-content .elementor-section,
.rb-elementor-content .elementor-top-section {
  background: transparent !important;
}

/* Elementor Section with theme gradient */
.elementor-section.rb-gradient-section {
  background: var(--rb-gradient-bg) !important;
}

/* Elementor Headings inherit glow */
.elementor-widget-heading .rb-h1,
.elementor-widget-heading.rb-glow-heading .elementor-heading-title {
  color: var(--rb-text-glow);
  text-shadow:
    0 0 10px hsla(45, 100%, 60%, 0.9),
    0 0 30px hsla(45, 100%, 50%, 0.5),
    0 0 60px hsla(38, 100%, 50%, 0.3);
}

/* Elementor Heading gradient text */
.elementor-widget-heading.rb-gradient-heading .elementor-heading-title {
  background: linear-gradient(135deg, hsl(45, 100%, 65%), hsl(38, 100%, 50%), hsl(145, 70%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Elementor Text Editor */
.elementor-widget-text-editor {
  color: var(--rb-text);
  font-family: var(--rb-font);
}

/* Elementor Button - glow style */
.elementor-widget-button.rb-glow-btn .elementor-button {
  background-color: var(--rb-primary) !important;
  color: var(--rb-primary-fg) !important;
  font-family: var(--rb-font);
  font-weight: 700;
  border-radius: 0.5rem;
  animation: rb-bounce 2s ease-in-out infinite, rb-pulse-glow 2s ease-in-out infinite;
  border: none !important;
}

.elementor-widget-button.rb-glow-btn .elementor-button:hover {
  transform: scale(1.05);
}

/* Elementor Image - glow wrapper */
.elementor-widget-image.rb-glow-image .elementor-image img {
  border-radius: var(--rb-radius);
  box-shadow:
    0 0 15px hsla(190, 100%, 50%, 0.3),
    0 0 30px hsla(280, 100%, 60%, 0.2),
    0 0 60px hsla(190, 100%, 50%, 0.1);
  animation: rb-float 3s ease-in-out infinite;
}

.elementor-widget-image.rb-gold-image .elementor-image img {
  border-radius: var(--rb-radius);
  box-shadow:
    0 0 15px hsla(45, 100%, 55%, 0.4),
    0 0 30px hsla(45, 100%, 55%, 0.2),
    0 0 60px hsla(45, 100%, 55%, 0.1);
}

/* Elementor Column centering */
.elementor-column .elementor-widget-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Elementor Divider with glow */
.elementor-widget-divider.rb-glow-divider .elementor-divider-separator {
  border-color: var(--rb-accent) !important;
  box-shadow: 0 0 10px hsla(45, 100%, 55%, 0.4);
}

/* Elementor Icon with glow */
.elementor-widget-icon.rb-glow-icon .elementor-icon {
  color: var(--rb-text-glow);
  text-shadow: 0 0 10px hsla(45, 100%, 60%, 0.8);
}

/* Elementor Spacer transparent */
.elementor-widget-spacer { background: transparent; }

/* Elementor Inner Section transparent */
.elementor-inner-section { background: transparent !important; }

/* Elementor Container (Flexbox) support */
.e-con.rb-gradient-container {
  background: linear-gradient(135deg, var(--rb-bg-dark), var(--rb-primary), var(--rb-bg-light)) !important;
}

.e-con.rb-transparent {
  background: transparent !important;
}

/* Widget Areas */
.rb-widget { margin-bottom: 1rem; }
.rb-cta-widget { text-align: center; }

/* ============================================
   ELEMENTOR CSS CLASSES REFERENCE
   ============================================
   Add these CSS classes in Elementor widget settings:

   SECTIONS:
   - rb-gradient-section    → Green-white gradient background
   - rb-transparent         → Transparent background

   HEADINGS:
   - rb-glow-heading        → Golden glow text effect
   - rb-gradient-heading    → Gold-green gradient text

   BUTTONS:
   - rb-glow-btn            → Animated bouncing glow button

   IMAGES:
   - rb-glow-image          → Cyan/purple glow frame + float animation
   - rb-gold-image          → Golden glow frame

   DIVIDERS:
   - rb-glow-divider        → Glowing accent divider

   ICONS:
   - rb-glow-icon           → Golden glow icon

   CONTAINERS (Flexbox):
   - rb-gradient-container  → Gradient background container
   - rb-transparent         → Transparent container
   ============================================ */