@import "tailwindcss";

@theme {
  --font-serif: "Playfair Display", serif;
  --font-sans: "Montserrat", sans-serif;

  --color-primary: var(--primary-color);
  --color-secondary: var(--secondary-color);
  --color-royal-black: var(--royal-black);
  --color-marble-light: var(--marble-light);
  --color-text-light: var(--text-light);
  --color-text-dark: var(--text-dark);
}

:root {
  /* Royal Gold - أكثر إشراقاً */
  --primary-color: #FFD700;
  /* Emerald Green - أخضر واضح ومشرق */
  --secondary-color: #184b2e;
  /* Light Green Accent - أخضر فاتح مشرق */
  --light-green: #3CB371;
  /* Bright Gold - ذهبي ساطع جداً */
  --bright-gold: #d3b73a;
  /* Dark Gold - ذهبي داكن لامع */
  --dark-gold: #b98c1a;

  --neutral-white: #FFFFFF;
  --royal-black: #0A0A0A;
  --marble-light: #F4F1EA;
  --text-light: #F8F8F8;
  --text-dark: #111111;

  /* Luxury Gold Gradient - تدرج ذهبي مشرق */
  --gold-gradient: linear-gradient(135deg, #FFD700 0%, #FFF4C4 50%, #DAA520 100%);

  /* Green to Gold Gradient - تدرج من أخضر مشرق إلى ذهبي */
  --green-gold-gradient: linear-gradient(135deg, #2E8B57 0%, #3CB371 40%, #FFD700 100%);

  /* Rich Green Gradient - تدرج أخضر مشرق */
  --green-gradient: linear-gradient(135deg, #2E8B57 0%, #32CD32 50%, #3CB371 100%);

  /* Radial Gold Gradient - تدرج ذهبي دائري مشرق */
  --gold-radial: radial-gradient(circle, #FFF4C4 0%, #FFD700 50%, #DAA520 100%);

  /* Diagonal Green Gold - تدرج قطري واضح */
  --diagonal-green-gold: linear-gradient(45deg, #2E8B57 0%, #FFD700 100%);

  /* Smooth transitions */
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light Mode - وضع فاتح جميل */
:root:not(.dark) {
  --bg-main: #FAFAF8;
  --bg-secondary: #446939;
  --text-main: #aeffc0;
  --text-secondary: #4A4A4A;
  --accent-main: var(--secondary-color);
  --card-bg: rgba(255, 255, 255, 0.9);
  --card-border: rgba(46, 139, 87, 0.2);
  --hover-bg: rgba(46, 139, 87, 0.05);
}

/* Dark Mode - الوضع الداكن */
:root.dark {
  --bg-main: #02120b;
  --bg-secondary: #082417;
  --text-main: var(--text-light);
  --text-secondary: rgba(248, 248, 248, 0.7);
  --accent-main: var(--primary-color);
  --card-bg: rgba(20, 50, 30, 0.4);
  --card-border: rgba(255, 215, 0, 0.2);
  --hover-bg: rgba(255, 215, 0, 0.05);
}

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: var(--font-sans);
    background-color: var(--bg-main);
    color: var(--text-main);
    @apply transition-colors duration-500 overflow-x-hidden;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-serif;
  }
}

@layer components {
  .gold-text-gradient {
    background: var(--gold-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .green-gold-text-gradient {
    background: var(--green-gold-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .green-text-gradient {
    background: var(--green-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .gold-bg-gradient {
    background: var(--gold-gradient);
  }

  .green-gold-bg-gradient {
    background: var(--green-gold-gradient);
  }

  .green-bg-gradient {
    background: var(--green-gradient);
  }

  .diagonal-green-gold-bg {
    background: var(--diagonal-green-gold);
  }

  .gold-radial-bg {
    background: var(--gold-radial);
  }

  /* Luxury CTA */
  /* Luxury CTA Refined */
  .luxury-cta-group {
    @apply flex flex-col md:flex-row items-center justify-center space-y-6 md:space-y-0 md:space-x-8 rtl:space-x-reverse mt-12;
  }

  .luxury-cta {
    @apply relative px-10 py-4 bg-royal-black/60 backdrop-blur-md border border-primary/30 text-primary tracking-[0.3em] uppercase text-[10px] font-bold transition-all duration-500 overflow-hidden inline-block;
  }

  .luxury-cta::before {
    content: '';
    @apply absolute top-0 -left-full w-full h-full bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-[-25deg] transition-all duration-1000 ease-in-out;
  }

  .luxury-cta:hover {
    @apply border-primary bg-primary text-royal-black tracking-[0.4em] shadow-[0_0_30px_#FFD70066];
    transform: translateY(-2px);
  }

  .luxury-cta:hover::before {
    @apply left-[150%];
  }

  .luxury-cta-secondary {
    @apply relative px-10 py-4 text-white/80 tracking-[0.3em] uppercase text-[10px] font-medium transition-all duration-500 hover:text-primary hover:tracking-[0.4em];
  }

  .luxury-cta-secondary::after {
    content: '';
    @apply absolute bottom-2 left-1/2 -translate-x-1/2 w-0 h-px bg-primary/40 transition-all duration-500;
  }

  .luxury-cta-secondary:hover::after {
    @apply w-1/2;
  }

  /* Sticky Header Shrink */
  header.scrolled {
    @apply py-2 backdrop-blur-md bg-royal-black/80;
  }
}

/* Announcement Bar */
.announcement-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--secondary-color);
  overflow: hidden;
  padding: 0.75rem 0;
  height: 3rem;
}

.announcement-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.marquee {
  display: flex;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
}

.marquee span {
  color: var(--bright-gold);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 300;
  padding: 0 2rem;
}

/* RTL Support */
[dir="rtl"] .marquee {
  animation: marqueeRTL 40s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes marqueeRTL {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(50%);
  }
}

/* Sticky Header Shrink */
header.scrolled {
  @apply py-3 backdrop-blur-md;
}

header.scrolled .max-w-7xl {
  @apply py-3;
}


/* Hero Slider Styles */
.hero-slider {
  position: relative;
  height: 85vh;
  min-height: 600px;
  width: 100%;
  overflow: hidden;
}

.slides-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.hero-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.parallax-bg {
  transition: transform 20s cubic-bezier(0.19, 1, 0.22, 1);
}

.hero-slide.active .parallax-bg {
  transform: scale(1.1);
}

/* Navigation Arrows */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: transparent;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 500ms ease;
  opacity: 0.6;
}

.slider-arrow:hover {
  opacity: 1;
  background: var(--primary-color);
  color: var(--royal-black);
  transform: translateY(-50%) scale(1.1);
}

.slider-arrow-prev {
  left: 2rem;
}

.slider-arrow-next {
  right: 2rem;
}

/* Progress Indicator */
.slider-progress {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 12rem;
  height: 2px;
  background: rgba(255, 215, 0, 0.2);
  z-index: 20;
}

.slider-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--primary-color);
  transition: width 100ms linear;
}

/* Luxury Brands Slider */
.brands-slider {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.brands-slider::before,
.brands-slider::after {
  content: "";
  position: absolute;
  top: 0;
  width: 150px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.brands-slider::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-main), transparent);
}

.brands-slider::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-main), transparent);
}

.brands-track {
  display: inline-block;
  animation: slideBrands 40s linear infinite;
}

.brands-slider:hover .brands-track {
  animation-play-state: paused;
}

.brand-item {
  display: inline-block;
  padding: 0 4rem;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.brand-item:hover {
  opacity: 1;
  transform: scale(1.05);
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

@keyframes slideBrands {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* RTL Support for Brands */
[dir="rtl"] .brands-track {
  animation: slideBrandsRTL 40s linear infinite;
}

@keyframes slideBrandsRTL {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(50%);
  }
}

/* Animations */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Product Card Improvements */
.text-text-light {
  color: var(--text-light);
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

.animate-fade-up {
  animation: fadeUp var(--transition-slow) forwards;
}

/* Custom Scrollbar for Drawer */
.custom-scrollbar::-webkit-scrollbar {
  width: 2px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  @apply bg-transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  @apply bg-primary/20 rounded-full;
}

/* Cart Drawer States */
#cart-drawer.active {
  @apply visible;
}

#cart-drawer.active #cart-overlay {
  @apply opacity-100;
}

#cart-drawer.active #cart-content {
  @apply translate-x-0;
}

/* Custom Scrollbar Global */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  @apply bg-royal-black;
}

::-webkit-scrollbar-thumb {
  @apply bg-primary rounded-full;
}

/* Hero Particles */
.particle {
  position: absolute;
  background: var(--primary-color);
  border-radius: 50%;
  animation: float 10s infinite ease-in-out;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }

  50% {
    transform: translateY(-100px) translateX(20px);
    opacity: 0.8;
  }
}

/* Navigation Mega Menu & Dropdowns */
.collections-mega-menu-wrapper:hover .mega-menu,
.mega-menu:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.about-dropdown-wrapper:hover .dropdown-menu,
.dropdown-menu:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* Mega Menu Styling */
.mega-menu {
  z-index: 50;
}

.mega-menu h4 {
  position: relative;
}

.mega-menu h4::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 30px;
  height: 1px;
  background: var(--primary-color);
}

.mega-menu ul li a {
  position: relative;
  display: block;
  transition: all 0.3s ease;
  padding: 0.25rem 0;
}

.mega-menu ul li a::before {
  content: '';
  position: absolute;
  left: -1rem;
  top: 50%;
  transform: translateY(-50%) scaleX(0);
  width: 0.5rem;
  height: 1px;
  background: var(--primary-color);
  transition: transform 0.3s ease;
}

.mega-menu ul li a:hover::before {
  transform: translateY(-50%) scaleX(1);
}

/* Dropdown Menu Styling */
.dropdown-menu {
  z-index: 50;
}

.dropdown-menu ul li a {
  padding: 0.5rem 0;
  position: relative;
  transition: all 0.3s ease;
}

.dropdown-menu ul li a::before {
  content: '';
  position: absolute;
  left: -1rem;
  top: 50%;
  transform: translateY(-50%) scaleX(0);
  width: 0.5rem;
  height: 1px;
  background: var(--primary-color);
  transition: transform 0.3s ease;
}

.dropdown-menu ul li a:hover::before {
  transform: translateY(-50%) scaleX(1);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {

  .mega-menu,
  .dropdown-menu {
    display: none;
  }
}