/* AL RIZWAN CNC - GLOBAL LUXURY COMPONENTS */

:root {
    --primary-gold: #FFCC0D;
    --gold-glow: rgba(255, 204, 13, 0.6);
    --gold-light: #FFE585;
    --shadow-dark: rgba(0, 0, 0, 0.85);
    --inner-light: rgba(255, 255, 255, 0.7);
    --inner-dark: rgba(0, 0, 0, 0.7);
}

/* --- 1. SPARKLE BALL ICON (AUTHENTIC SKEUOMORPHIC) --- */
.gold-icon-circle { 
  position: relative;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  border-radius: 50%;
  /* Removed old background/border because sparkle-ball handles it now */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sparkle Ball (Main Skeuomorphic + Glass Object) */
.sparkle-ball {
    position: relative;
    width: 100%; /* Adapts to container */
    height: 100%; /* Adapts to container */
    border-radius: 50%;
    
    background: radial-gradient(circle at 40% 40%, rgba(255, 204, 13, 0.15), rgba(255, 204, 13, 0.05) 70%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    border: 1px solid rgba(255, 204, 13, 0.4);
    box-shadow: 
        0 15px 20px -5px var(--shadow-dark),
        0 8px 10px -3px rgba(0,0,0,0.5),
        inset 5px 5px 15px var(--inner-light), 
        inset -8px -8px 20px var(--inner-dark), 
        inset 0 0 10px var(--gold-glow), 
        0 0 20px rgba(255, 204, 13, 0.2);

    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform-style: preserve-3d;
    
    animation: toy-bounce 6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* Sharp Plastic/Glass Glare */
.sparkle-ball::before {
    content: '';
    position: absolute;
    top: 6%;
    left: 12%;
    width: 45%;
    height: 25%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 70%);
    transform: rotate(-25deg);
    z-index: 20;
    pointer-events: none;
}

/* Continuous Glossy Sweep */
.glass-sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.6) 25%, transparent 30%);
    animation: sweep-shine 5s ease-in-out infinite;
    z-index: 15;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* Liquid Core */
.liquid-core {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: 2;
    animation: liquid-swirl 15s linear infinite;
}

/* Sparkles inside the ball */
.sparkle {
    position: absolute;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0 C50 40 60 50 100 50 C60 50 50 60 50 100 C50 60 40 50 0 50 C40 50 50 40 50 0 Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.8)) drop-shadow(0 0 8px var(--primary-gold));
    animation: twinkle 3s ease-in-out infinite alternate;
}

/* Sizes converted to percentages to be responsive */
.s1 { width: 9%; height: 9%; top: 20%; left: 30%; animation-delay: 0s; }
.s2 { width: 6%; height: 6%; top: 60%; left: 15%; animation-delay: 0.5s; filter: blur(1px); }
.s3 { width: 11%; height: 11%; top: 70%; left: 65%; animation-delay: 1.2s; }
.s4 { width: 7.5%; height: 7.5%; top: 35%; left: 75%; animation-delay: 0.8s; filter: blur(2px); opacity: 0.6; }
.s5 { width: 9.5%; height: 9.5%; top: 45%; left: 45%; animation-delay: 1.5s; }
.s6 { width: 5%; height: 5%; top: 80%; left: 40%; animation-delay: 0.3s; }
.s7 { width: 8%; height: 8%; top: 15%; left: 60%; animation-delay: 2s; filter: blur(1.5px); }

/* Rising Liquid Bubbles */
.bubble {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4), transparent 60%);
    animation: bubble-rise linear infinite;
}

.b1 { width: 6%; height: 6%; left: 30%; animation-duration: 4s; animation-delay: 0s; }
.b2 { width: 4%; height: 4%; left: 60%; animation-duration: 5s; animation-delay: 1.5s; }
.b3 { width: 7.5%; height: 7.5%; left: 45%; animation-duration: 3.5s; animation-delay: 2s; }
.b4 { width: 3%; height: 3%; left: 70%; animation-duration: 4.5s; animation-delay: 0.8s; }

/* Icon Container */
.icon-container {
    position: relative;
    z-index: 5;
    width: 45%;
    height: 45%;
    transform: translateZ(10px);
    filter: drop-shadow(0 4px 5px rgba(0,0,0,0.6)) drop-shadow(0 0 8px var(--primary-gold));
}

.icon-container svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Floor Light Reflection */
.floor-light {
    position: absolute;
    bottom: -20%;
    width: 70%;
    height: 10%;
    background: radial-gradient(ellipse at center, var(--primary-gold) 0%, transparent 70%);
    filter: blur(3px);
    opacity: 0.8;
    border-radius: 50%;
    animation: floor-shadow 6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    z-index: 1;
}

/* --- Animations --- */
@keyframes floor-shadow {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(0.5); opacity: 0.3; }
}

@keyframes sweep-shine {
    0%, 20% { transform: translateX(-150%) translateY(-150%) rotate(45deg); }
    80%, 100% { transform: translateX(150%) translateY(150%) rotate(45deg); }
}

@keyframes bubble-rise {
    0% { transform: translateY(200%) scale(0.8); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(-200%) scale(1.2); opacity: 0; }
}

@keyframes toy-bounce {
    0% { transform: translateY(0) rotateX(10deg) rotateY(-15deg); }
    50% {
        transform: translateY(-10%) rotateX(-5deg) rotateY(10deg);
        box-shadow: 
            0 25px 30px -10px var(--shadow-dark),
            0 10px 15px -3px rgba(0,0,0,0.4),
            inset 5px 5px 15px var(--inner-light),
            inset -8px -8px 20px var(--inner-dark),
            inset 0 0 15px var(--gold-glow),
            0 0 25px rgba(255, 204, 13, 0.3);
    }
    100% { transform: translateY(0) rotateX(10deg) rotateY(-15deg); }
}

@keyframes liquid-swirl {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.05); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes twinkle {
    0% { opacity: 0.2; transform: scale(0.6); }
    100% { opacity: 1; transform: scale(1.2); }
}

/* --- 2. MOVING BORDER BUTTON --- */
.moving-border-btn-h {
    position: relative;
    background: transparent !important;
    padding: 2px !important;
    border-radius: 100px !important;
    border: none !important;
    overflow: hidden; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    transition: transform 0.2s ease;
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
    color: #FFCC0D !important;
    text-decoration: none;
    cursor: pointer;
}

.moving-border-btn-h::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        #FFCC0D,
        #F4EBD0,
        #6f4c3e,
        #000000,
        #FFCC0D
    );
    animation: spin 4s linear infinite;
    z-index: 0;
}

.moving-border-btn-h .-content-wrapper {
    position: relative;
    background: #080503; 
    border-radius: 100px !important;
    z-index: 1; 
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
    font-weight: 600;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.moving-border-btn-h:hover { transform: scale(1.02); }
.moving-border-btn-h:hover::before { animation-duration: 1.5s; filter: brightness(1.2); }
.moving-border-btn-h:active { transform: scale(0.95); }

/* --- 3. RUHAANI EFFECT (TYPOGRAPHY) --- */


 5. ROYAL CENTERPIECE (STANDALONE) --- */
.royal-centerpiece {
    position: relative;
    width: 75px; 
    height: 75px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.royal-centerpiece .filigree-carving {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 15;
    filter: drop-shadow(0px 0px 8px rgba(255, 204, 13, 0.6));
}

.royal-centerpiece .core-gem {
    position: absolute;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle at 30% 30%, #FFFFFF, #FFF7D6, #FFCC0D);
    border-radius: 50%;
    z-index: 20;
    box-shadow: 
        0 0 10px #FFE066,
        0 0 30px #FFCC0D,
        inset -2px -2px 4px rgba(0,0,0,0.5);
    animation: pulseGem 2s sine-in-out infinite alternate;
}

.royal-centerpiece .glare-sweep {
    position: absolute;
    top: -50%; left: -100%;
    width: 50%; height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: rotate(35deg);
    z-index: 30;
    pointer-events: none;
    mix-blend-mode: overlay;
    animation: sweepGlare 7s ease-in-out infinite;
}

.royal-centerpiece .ambient-glow {
    position: absolute;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(255, 204, 13, 0.15) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}

@keyframes pulseGem {
    0% { transform: scale(1); box-shadow: 0 0 10px #FFE066, 0 0 30px #FFCC0D; }
    100% { transform: scale(1.1); box-shadow: 0 0 20px #FFE066, 0 0 50px #FFCC0D; }
}

@keyframes sweepGlare {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; }
}

/* --- 4. ROYAL LINE (LEFT & RIGHT) FOR ELEMENTOR DIVIDER WIDGET --- */
.royal-line-left .elementor-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 30px;
}
.royal-line-left .elementor-divider-separator {
    width: 100%;
    height: 2px !important;
    border: none !important;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 5px rgba(255, 204, 13, 0.4) !important;
    background: linear-gradient(to right, transparent, #665205 20%, #FFF7D6 100%) !important;
}
.royal-line-left .elementor-divider-separator::before,
.royal-line-left .elementor-divider-separator::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    opacity: 0.8;
    background: linear-gradient(to right, transparent, #B38F09 40%, #FFE066 100%);
    left: 0;
}
.royal-line-left .elementor-divider-separator::before { transform: translateY(-4px); top: 0; }
.royal-line-left .elementor-divider-separator::after { transform: translateY(4px); top: 0; }

.royal-line-left .elementor-divider::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #FFF7D6, #FFCC0D, #665205);
    transform: rotate(45deg);
    border: 1px solid #FFE066;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.8), inset 1px 1px 2px rgba(255,255,255,0.8);
    z-index: 5;
    right: 25%;
    top: 50%;
    margin-top: -4px;
}

.royal-line-right .elementor-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 30px;
}
.royal-line-right .elementor-divider-separator {
    width: 100%;
    height: 2px !important;
    border: none !important;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 5px rgba(255, 204, 13, 0.4) !important;
    background: linear-gradient(to left, transparent, #665205 20%, #FFF7D6 100%) !important;
}
.royal-line-right .elementor-divider-separator::before,
.royal-line-right .elementor-divider-separator::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    opacity: 0.8;
    background: linear-gradient(to left, transparent, #B38F09 40%, #FFE066 100%);
    left: 0;
}
.royal-line-right .elementor-divider-separator::before { transform: translateY(-4px); top: 0; }
.royal-line-right .elementor-divider-separator::after { transform: translateY(4px); top: 0; }

.royal-line-right .elementor-divider::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #FFF7D6, #FFCC0D, #665205);
    transform: rotate(45deg);
    border: 1px solid #FFE066;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.8), inset 1px 1px 2px rgba(255,255,255,0.8);
    z-index: 5;
    left: 25%;
    top: 50%;
    margin-top: -4px;
}


/* --- 5. EXACT ORIGINAL CENTERPIECE --- */
.royal-centerpiece {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}
.royal-centerpiece .ambient-glow {
    position: absolute;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(255, 204, 13, 0.15) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}
.royal-centerpiece .filigree-carving {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 15;
    filter: drop-shadow(0px 0px 8px rgba(255, 204, 13, 0.6));
}
.royal-centerpiece .core-gem {
    position: absolute;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle at 30% 30%, #FFFFFF, #FFF7D6, #FFCC0D);
    border-radius: 50%;
    z-index: 20;
    box-shadow: 
        0 0 10px #FFE066,
        0 0 30px #FFCC0D,
        inset -2px -2px 4px rgba(0,0,0,0.5);
    /* Converted GSAP pulse to pure CSS */
    animation: originalPulseGem 2s sine-in-out infinite alternate;
}
.royal-centerpiece .glare-sweep {
    position: absolute;
    top: -50%; left: -100%;
    width: 50%; height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: rotate(35deg);
    z-index: 30;
    pointer-events: none;
    mix-blend-mode: overlay;
    /* Converted GSAP sweep to pure CSS */
    animation: originalSweepGlare 5s ease-in-out infinite;
}

@keyframes originalPulseGem {
    0% { 
        transform: scale(1); 
        box-shadow: 0 0 10px #FFE066, 0 0 30px #FFCC0D, inset -2px -2px 4px rgba(0,0,0,0.5); 
    }
    100% { 
        transform: scale(1.1); 
        box-shadow: 0 0 20px #FFE066, 0 0 50px #FFCC0D, inset -2px -2px 4px rgba(0,0,0,0.5); 
    }
}

@keyframes originalSweepGlare {
    0% { left: -100%; }
    40% { left: 200%; }
    100% { left: 200%; }
}
.spark {
    position: absolute;
    width: 2px; height: 2px;
    background: #FFF7D6;
    border-radius: 50%;
    box-shadow: 0 0 5px #FFE066;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
}