/* ===============================
ZARA BOUTIQUE LUXURY VARIABLES
=================================*/
:root{
--zara-gold:#d4af37;
--zara-maroon:#6d0019;
--zara-pink:#ffd6ea;
}

/* ===============================
FLOATING ZARA AGENT CONTAINER
=================================*/
#zaraAgent{
position:fixed;
bottom:30px;
right:30px;
z-index:9999;
font-family:Quicksand, sans-serif;
width:70px;
height:70px;
display:flex;
align-items:center;
justify-content:center;
}

/* ===============================
ZARA AVATAR
=================================*/
#zaraAvatar{
position:relative;
z-index:2;
width:70px;
height:70px;
border-radius:50%;
cursor:pointer;
object-fit:cover;
background:white;
border:3px solid var(--zara-pink);
box-shadow:0 6px 18px rgba(0,0,0,.15);
transition:all .25s ease;
}

#zaraAvatar:hover{
transform:scale(1.05);
box-shadow:
0 0 0 4px rgba(255,200,220,.4),
0 0 25px rgba(212,175,55,.55);
}

/* ===============================
GOLD SHIMMER SPARKLE PULSE
=================================*/
#zaraAgent::before{
content:"";
position:absolute;
width:85px;
height:85px;
border-radius:50%;
background:radial-gradient(circle,
rgba(212,175,55,.6),
rgba(212,175,55,.2),
transparent 70%);
animation:zaraPulse 2.2s infinite ease-out;
}

#zaraAgent::after{
content:"";
position:absolute;
width:90px;
height:90px;
border-radius:50%;
background:
radial-gradient(circle at 20% 30%, #fff 2px, transparent 3px),
radial-gradient(circle at 70% 40%, #fff 2px, transparent 3px),
radial-gradient(circle at 40% 70%, #fff 2px, transparent 3px);
opacity:.9;
animation:zaraSparkle 3s infinite linear;
pointer-events:none;
}

@keyframes zaraPulse{
0%{ transform:scale(1); opacity:.7; }
70%{ transform:scale(1.35); opacity:0; }
100%{ opacity:0; }
}

@keyframes zaraSparkle{
from{ transform:rotate(0deg); }
to{ transform:rotate(360deg); }
}

/* ===============================
GREETING BUBBLE
=================================*/
#zaraGreeting{
position:absolute;
bottom:95px;
right:0;
background:#ffffff;
color:var(--zara-maroon);
padding:10px 14px;
border-radius:18px;
box-shadow:0 8px 18px rgba(0,0,0,.12);
font-size:14px;
white-space:nowrap;
opacity:0;
transform:translateY(10px);
animation:zaraGreetingIn 1s ease forwards;
animation-delay:1.5s;
pointer-events:none;
}

#zaraGreeting::after{
content:"";
position:absolute;
bottom:-6px;
right:20px;
width:12px;
height:12px;
background:#fff;
transform:rotate(45deg);
box-shadow:2px 2px 6px rgba(0,0,0,.05);
}

/* ===============================
CHAT WINDOW
=================================*/
#zaraChat{
position:absolute;
bottom:85px;
right:0;
display:none;
width:280px;
background:#fff6fb;
border-radius:18px;
box-shadow:0 10px 25px rgba(0,0,0,.15);
padding:15px;
/* animation:zaraFade removed - conflicts with display:none toggle; .active transition handles open/close */
transform:translateY(15px);
opacity:0;
transition:all .35s ease;
}

#zaraChat.active{
transform:translateY(0);
opacity:1;
}

#zaraChat h3{
margin:0 0 12px;
color:var(--zara-maroon);
font-size:18px;
font-family:'Playfair Display',serif;
}

/* ===============================
FAQ CARDS
=================================*/
.faqItem{
background:white;
padding:12px;
border-radius:14px;
margin-bottom:10px;
cursor:pointer;
box-shadow:0 3px 10px rgba(0,0,0,.05);
transition:all .2s ease;
border-left:4px solid var(--zara-gold);
}

.faqItem:hover{
transform:translateY(-2px);
box-shadow:0 6px 16px rgba(0,0,0,.09);
}

.answer{
display:none;
font-size:14px;
margin-top:6px;
color:#444;
line-height:1.4;
}

/* ===============================
ANIMATIONS
=================================*/
@keyframes zaraFade{
from{
opacity:0;
transform:translateY(10px);
}
to{
opacity:1;
transform:translateY(0);
}
}

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