/*
Theme Name: Rainbow Clean
Theme URI: https://rainbowclean.online
Author: Rainbow Clean
Author URI: https://rainbowclean.online
Description: قالب احترافي لمنتج مكنسة رينبو - تصميم عربي RTL متجاوب بنظام هجين معياري
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: Proprietary
Text Domain: rainbow-clean
Tags: rtl-language, custom-colors, full-width-template, one-column
*/

/* ─────────────────────────────────────────────────────────────
   GLOBAL CSS CUSTOM PROPERTIES
───────────────────────────────────────────────────────────── */
:root {
  /* Palette */
  --clr-bg:          #06080e;
  --clr-surface:     #0b0f18;
  --clr-card:        #111722;
  --clr-card-hover:  #161e2e;
  --clr-border:      rgba(255,255,255,.055);
  --clr-border-glow: rgba(0,168,210,.25);

  /* Brand Accents */
  --clr-primary:     #00a8d2;   /* deep water-blue   */
  --clr-primary-dk:  #007fa0;
  --clr-gold:        #c9a034;   /* Saudi luxury gold */
  --clr-gold-lt:     #e8c05a;

  /* Text */
  --clr-text:        #dce6f4;
  --clr-muted:       #64768f;
  --clr-white:       #ffffff;

  /* Gradients */
  --grad-primary: linear-gradient(135deg, #00a8d2 0%, #0074a8 100%);
  --grad-gold:    linear-gradient(135deg, #c9a034 0%, #e8c05a 100%);
  --grad-hero:    linear-gradient(160deg, #06080e 0%, #0b1420 60%, #0a1628 100%);
  --grad-card:    linear-gradient(145deg, #111722, #0d1420);

  /* Shadow */
  --shadow-sm:   0 2px 8px rgba(0,0,0,.4);
  --shadow-md:   0 4px 24px rgba(0,0,0,.5);
  --shadow-lg:   0 8px 48px rgba(0,0,0,.6);
  --shadow-glow: 0 0 40px rgba(0,168,210,.15);

  /* Typography */
  --font-arabic: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  --font-display:'Cormorant Garamond', Georgia, serif;

  /* Radius */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   32px;
  --r-full: 9999px;

  /* Spacing */
  --sec-pad: clamp(3.5rem, 8vw, 7rem) 0;

  /* Transition */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur:  .3s;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  font-size: 16px;
}

body {
  font-family: var(--font-arabic);
  background-color: var(--clr-bg);
  color: var(--clr-text);
  direction: rtl;
  text-align: right;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ─── CONTAINERS ───────────────────────────────────────────── */
.rc-container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 3rem);
}

/* ─── UTILITY CLASSES ──────────────────────────────────────── */
.rc-section { padding: var(--sec-pad); position: relative; }

.rc-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem 1rem;
  border-radius: var(--r-full);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid;
}

.rc-badge--primary {
  background: rgba(0,168,210,.12);
  border-color: rgba(0,168,210,.3);
  color: var(--clr-primary);
}

.rc-badge--gold {
  background: rgba(201,160,52,.1);
  border-color: rgba(201,160,52,.3);
  color: var(--clr-gold-lt);
}

.rc-section-head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.rc-section-head h2 {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--clr-white);
  line-height: 1.2;
  margin-top: .75rem;
  margin-bottom: 1rem;
}

.rc-section-head p {
  font-size: clamp(.95rem, 2vw, 1.1rem);
  color: var(--clr-muted);
  max-width: 600px;
  margin-inline: auto;
}

.rc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .85rem 2rem;
  border-radius: var(--r-full);
  font-weight: 700;
  font-size: .95rem;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}

.rc-btn--primary {
  background: var(--grad-primary);
  color: #fff;
  box-shadow: 0 4px 20px rgba(0,168,210,.3);
}

.rc-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,168,210,.45);
  filter: brightness(1.1);
}

.rc-btn--gold {
  background: var(--grad-gold);
  color: #000;
  font-weight: 800;
  box-shadow: 0 4px 20px rgba(201,160,52,.3);
}

.rc-btn--gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(201,160,52,.4);
  filter: brightness(1.08);
}

.rc-btn--outline {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.2);
  color: var(--clr-text);
}

.rc-btn--outline:hover {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
  background: rgba(0,168,210,.05);
}

/* ─── SCROLL REVEAL ────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.reveal.visible { opacity: 1; transform: translateY(0); }

/* ─── DIVIDER ──────────────────────────────────────────────── */
.rc-divider {
  height: 1px;
  background: var(--clr-border);
  margin: 0;
}

/* ─── WORDPRESS ADMIN BAR FIX ──────────────────────────────── */
body.admin-bar .rc-nav { top: 32px; }

@media (max-width: 782px) {
  body.admin-bar .rc-nav { top: 46px; }
}