/* Enhanced CSS with smooth animations and premium effects */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=fallback');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-display: fallback; 
min-height: 100vh;
background: linear-gradient(135deg, #0f0a23 0%, #1a0b2e 50%, #0b0820 100%);
color: #ffffff;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.glass-effect {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.12);
}

.glass-card {
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 20px;
}

.gradient-border {
position: relative;
background: linear-gradient(135deg, #0f0a23, #1a0b2e);
}

.gradient-border::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
background: linear-gradient(45deg, #8b5cf6, #ec4899, #3b82f6);
border-radius: inherit;
z-index: -1;
animation: gradientShift 3s ease infinite;
}

.img-modal {
position: fixed; inset: 0; display: none;
align-items: center; justify-content: center;
background: rgba(0,0,0,.85); z-index: 9999;
padding: 24px;
}
.img-modal.open { display: flex; }
.img-modal img {
max-width: 90vw; max-height: 85vh;
border-radius: 12px; box-shadow: 0 10px 35px rgba(0,0,0,.6);
transform: scale(.92); opacity: .7; transition: transform .18s, opacity .18s;
}
.img-modal.open img { transform: scale(1); opacity: 1; }
.img-modal-close{
position:absolute; top:16px; right:18px; font-size:30px; line-height:1;
background:transparent; border:0; color:#fff; cursor:pointer;
}
body.no-scroll { overflow: hidden; }

/* Zoom animation */
@keyframes zoom {
from {transform: scale(0.7);}
to {transform: scale(1);}
}

/* Thumbnail cursor */
.thumbnail {
cursor: pointer;
transition: transform 0.2s;
}
.thumbnail:hover {
transform: scale(1.05);
}

@keyframes gradientShift {
0%, 100% { opacity: 0.6; }
50% { opacity: 0.8; }
}

@keyframes glow {
0% { 
box-shadow: 0 0 0 rgba(34, 197, 94, 0);
transform: scale(1);
}
50% { 
box-shadow: 0 0 30px rgba(34, 197, 94, 0.4);
transform: scale(1.05);
}
100% { 
box-shadow: 0 0 0 rgba(34, 197, 94, 0);
transform: scale(1);
}
}

@keyframes subtleGlow {
0%, 100% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.1); }
50% { box-shadow: 0 0 30px rgba(168, 85, 247, 0.2); }
}

@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
}

@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}

.animate-glow {
animation: glow 0.6s ease-out;
}

.animate-subtle-glow {
animation: subtleGlow 3s ease-in-out infinite;
}

.animate-float {
animation: float 3s ease-in-out infinite;
}

.animate-pulse-slow {
animation: pulse 2s ease-in-out infinite;
}

.btn-primary {
background: linear-gradient(135deg, #8b5cf6, #ec4899);
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

.btn-primary:active {
transform: translateY(0);
}

.btn-secondary {
background: rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}

.btn-secondary:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-1px);
}

.quantity-btn {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}

.quantity-btn:active {
transform: scale(0.95);
}

.product-card {
transition: all 0.3s ease;
will-change: transform;
}

.product-card:hover {
transform: translateY(-2px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.fade-in {
animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

.slide-in {
animation: slideIn 0.4s ease-out;
}

@keyframes slideIn {
from { transform: translateX(-100px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}

/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}

::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #8b5cf6, #ec4899);
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #7c3aed, #db2777);
}

/* Responsive design */
@media (max-width: 768px) {
.glass-card {
border-radius: 16px;
}

.product-card {
margin-bottom: 12px;
}
}

/* Loading states */
.loading-shimmer {
background: linear-gradient(90deg, 
rgba(255, 255, 255, 0.1) 0%, 
rgba(255, 255, 255, 0.2) 50%, 
rgba(255, 255, 255, 0.1) 100%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}

@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Add these CSS animations directly */
@keyframes glow {
0% { box-shadow: 0 0 0 rgba(34, 197, 94, 0); }
50% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.6); }
100% { box-shadow: 0 0 0 rgba(34, 197, 94, 0); }
}

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}

/* Responsive styles */
@media (max-width: 1023px) {
.desktop-only { display: none !important; }
.mobile-only { display: block !important; }
}
@media (min-width: 1024px) {
.mobile-only { display: none !important; }
.desktop-only { display: block !important; }
}

/* Loading animation */
@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}

/* Mobile Cart Summary Row */
.mobile-cart-summary {
display: none;
}

@media (max-width: 768px) {
.mobile-cart-summary {
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1));
padding: 15px;
border-radius: 20px;
margin-bottom: 25px;
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.cart-summary-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 1;
padding: 0 8px;
position: relative;
}

.cart-summary-item:not(:last-child):after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 40px;
background: linear-gradient(180deg, 
transparent 0%, 
rgba(255, 255, 255, 0.3) 50%, 
transparent 100%);
}

.cart-summary-icon {
font-size: 1.4em;
margin-bottom: 6px;
background: linear-gradient(135deg, #8b5cf6, #ec4899);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 2px 4px rgba(139, 92, 246, 0.3));
}

.cart-summary-label {
font-size: 0.7em;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.cart-summary-value {
font-size: 1.1em;
font-weight: 800;
background: linear-gradient(135deg, #86efac, #4ade80);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 2px 4px rgba(34, 197, 94, 0.3));
}

/* Specific colors for each item */
.cart-summary-item:nth-child(1) .cart-summary-value {
background: linear-gradient(135deg, #86efac, #4ade80);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.cart-summary-item:nth-child(2) .cart-summary-value {
background: linear-gradient(135deg, #93c5fd, #60a5fa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.cart-summary-item:nth-child(3) .cart-summary-value {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/* Hover effects */
.cart-summary-item {
transition: all 0.3s ease;
}

.cart-summary-item:hover {
transform: translateY(-2px);
}

.cart-summary-item:hover .cart-summary-icon {
animation: pulse 1s ease-in-out;
}

/* Animation for value changes */
.cart-summary-value {
transition: all 0.3s ease;
}

.cart-summary-value.animate {
animation: glow 0.6s ease;
}

/* Compact view for very small screens */
@media (max-width: 380px) {
.mobile-cart-summary {
padding: 12px;
}

.cart-summary-icon {
font-size: 1.2em;
margin-bottom: 4px;
}

.cart-summary-label {
font-size: 0.65em;
}

.cart-summary-value {
font-size: 1em;
}
}

/* Hide desktop summary on mobile */
.cart-summary {
display: none;
}

/* Adjust view cart button for mobile */
.view-cart-btn {
width: 100%;
margin-bottom: 20px;
padding: 14px;
font-size: 1em;
}
}

/* Additional animations */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}

@keyframes glow {
0% { 
filter: drop-shadow(0 2px 4px rgba(34, 197, 94, 0.3));
}
50% { 
filter: drop-shadow(0 4px 12px rgba(34, 197, 94, 0.6));
}
100% { 
filter: drop-shadow(0 2px 4px rgba(34, 197, 94, 0.3));
}
}

/* Loading state for mobile summary */
.mobile-cart-summary.loading .cart-summary-value {
background: linear-gradient(90deg, 
rgba(255, 255, 255, 0.1) 0%, 
rgba(255, 255, 255, 0.2) 50%, 
rgba(255, 255, 255, 0.1) 100%) !important;
-webkit-background-clip: initial !important;
-webkit-text-fill-color: initial !important;
color: transparent !important;
border-radius: 8px;
animation: loading 1.5s infinite;
min-width: 40px;
height: 20px;
}

@keyframes loading {
0% { background-position: -200px 0; }
100% { background-position: calc(200px + 100%) 0; }
}