@import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400;700&family=Cairo:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,700&display=swap');

:root {
  --trad-bg: #F8F6F3;
  --trad-text: #2C2C2C;
  --trad-accent: #8B7355;
  --trad-accent-hover: #6D5A43;
  --trad-card: #FFFFFF;
  --trad-border: #E8E2DA;
  --emo-primary: #E91E8C;
  --emo-secondary: #9C27B0;
  --emo-tertiary: #FF4081;
  --emo-gold: #D4AF37;
  --font-elegant: 'Aref Ruqaa', serif;
  --font-body: 'Cairo', sans-serif;
  --font-logo: 'Playfair Display', serif;
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-full: 9999px;
  --t-fast: 0.2s ease; --t-normal: 0.3s ease; --t-slow: 0.5s ease;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.15);
  --shadow-glow-pink: 0 0 30px rgba(233,30,140,0.3);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font-body);direction:rtl;text-align:right;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;outline:none;font-family:var(--font-body)}
img{max-width:100%;height:auto}
ul,ol{list-style:none}

.emotional-animated-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;background:linear-gradient(-45deg,#FF6B9D,#C44AC4,#E91E8C,#9C27B0,#FF4081,#AB47BC,#F06292,#CE93D8);background-size:400% 400%;animation:emoGrad 15s ease infinite}
@keyframes emoGrad{0%{background-position:0% 50%}25%{background-position:50% 0%}50%{background-position:100% 50%}75%{background-position:50% 100%}100%{background-position:0% 50%}}

.glass{background:rgba(255,255,255,0.15);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.25);border-radius:var(--r-lg)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:12px 32px;border-radius:var(--r-full);font-family:var(--font-body);font-weight:600;font-size:1rem;transition:all var(--t-normal);position:relative;overflow:hidden}
.btn:active{transform:scale(0.97)}
.btn-emotional{background:linear-gradient(135deg,var(--emo-primary),var(--emo-secondary));color:#fff;box-shadow:var(--shadow-glow-pink)}
.btn-emotional:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(233,30,140,0.5)}
.btn-traditional{background:var(--trad-accent);color:#fff}
.btn-traditional:hover{background:var(--trad-accent-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-gold{background:linear-gradient(135deg,#D4AF37,#F2D06B,#D4AF37);color:#1a1a1a;font-weight:700}
.btn-gold:hover{box-shadow:0 0 30px rgba(212,175,55,0.5);transform:translateY(-2px)}
.btn-outline-white{background:transparent;border:2px solid #fff;color:#fff}
.btn-outline-white:hover{background:rgba(255,255,255,0.15)}

.card{border-radius:var(--r-lg);overflow:hidden;transition:all var(--t-normal)}
.card:hover{transform:translateY(-4px)}
.card-traditional{background:var(--trad-card);box-shadow:var(--shadow-sm);border:1px solid var(--trad-border)}
.card-emotional{background:rgba(255,255,255,0.12);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.2)}
.card-emotional:hover{background:rgba(255,255,255,0.18);box-shadow:var(--shadow-glow-pink)}

.navbar{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;position:sticky;top:0;z-index:100}
.navbar-traditional{background:rgba(248,246,243,0.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--trad-border)}
.navbar-emotional{background:rgba(255,255,255,0.08);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,0.1)}
.navbar-logo{font-family:var(--font-logo);font-size:1.5rem;font-weight:700;font-style:italic}
.navbar-links{display:flex;gap:1.5rem;align-items:center}
.navbar-links a{font-weight:500;transition:all var(--t-fast)}
.cart-icon{position:relative;font-size:1.3rem;cursor:pointer}
.cart-badge{position:absolute;top:-8px;left:-8px;width:20px;height:20px;border-radius:50%;font-size:0.7rem;display:flex;align-items:center;justify-content:center;font-weight:700}

.loader{display:flex;flex-direction:column;align-items:center;gap:1rem}
.loader-dots{display:flex;gap:8px}
.loader-dots span{width:12px;height:12px;border-radius:50%;animation:bounce 1.4s infinite ease-in-out both}
.loader-dots span:nth-child(1){background:#FF6B9D;animation-delay:-0.32s}
.loader-dots span:nth-child(2){background:#C44AC4;animation-delay:-0.16s}
.loader-dots span:nth-child(3){background:#9C27B0}
@keyframes bounce{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}

@media(max-width:768px){.navbar{padding:1rem}.navbar-links{gap:1rem}.btn{padding:10px 24px;font-size:0.9rem}}
@media(max-width:480px){html{font-size:14px}}