/* Custom Styles for Halal Essence - Luxury Perfume & Attar Brand */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Hind+Siliguri:wght@300;400;500;600;700&family=Tiro+Bangla:ital@0;1&display=swap');

:root {
  --color-emerald-deep: #032217;
  --color-emerald-medium: #0A3F2C;
  --color-emerald-light: #16563F;
  --color-gold-deep: #AA7C11;
  --color-gold-medium: #C59B27;
  --color-gold-light: #E5C158;
  --color-gold-soft: #F9EFAF;
  --color-sand: #FAFAF9;
  --font-serif: 'Tiro Bangla', 'Playfair Display', Georgia, serif;
  --font-sans: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-bn-sans: 'Hind Siliguri', sans-serif;
  --font-bn-serif: 'Tiro Bangla', serif;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-sand);
  color: #1e293b;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

html.lang-bn {
  /* Removed font-size: 106% to prevent layout shifting between languages */
}

body.lang-bn {
  font-family: var(--font-bn-sans);
}

body.lang-bn .font-serif-luxury {
  font-family: var(--font-bn-serif) !important;
}

/* Headings font overrides */
.font-serif-luxury {
  font-family: var(--font-serif);
}

/* Custom Scrollbar for Luxury Experience */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--color-emerald-deep);
}
::-webkit-scrollbar-thumb {
  background: var(--color-gold-medium);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold-light);
}

/* Luxury Gold Gradients and Text */
.text-gold-gradient {
  background: linear-gradient(135deg, var(--color-gold-soft) 0%, var(--color-gold-light) 30%, var(--color-gold-medium) 70%, var(--color-gold-deep) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-gold-gradient {
  background: linear-gradient(135deg, #FACC15, #CA8A04, #A16207);
}

.bg-emerald-gradient {
  background: linear-gradient(180deg, #1C1917 0%, #0C0A09 100%);
}

.border-gold-gradient {
  border-image: linear-gradient(135deg, var(--color-gold-soft), var(--color-gold-medium), var(--color-gold-deep)) 1;
}

/* Glassmorphism Classes */
.glass-header {
  background: rgba(28, 25, 23, 0.7);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
}

.glass-header.scrolled {
  background: rgba(12, 10, 9, 0.9);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  transition: all var(--fluid-duration) cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(202, 138, 4, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Animations */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 193, 88, 0.4); }
  50% { box-shadow: 0 0 15px 4px rgba(229, 193, 88, 0.7); }
}

@keyframes shiver {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(1deg); }
  75% { transform: rotate(-1deg); }
}

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

.animate-pulse-gold {
  animation: pulse-gold 2.5s infinite;
}

/* Gold Underline Hover Transition */
.hover-underline-gold {
  position: relative;
}
.hover-underline-gold::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: -4px;
  left: 0;
  background: linear-gradient(90deg, transparent, var(--color-gold-medium), transparent);
  transform-origin: bottom right;
  transition: transform 0.4s ease-out;
}
.hover-underline-gold:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Product Card Custom Overlay */
.product-card-overlay {
  background: linear-gradient(to top, rgba(3, 34, 23, 0.9) 0%, rgba(3, 34, 23, 0.4) 60%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.product-card:hover .product-card-overlay {
  opacity: 1;
}

/* Modal Open Animation */
.modal-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Toast Notification styling */
.toast-notification {
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.toast-notification.show {
  transform: translateY(0);
  opacity: 1;
}

/* Dropdown Select Menu & Option styling for Dark Theme readability */
select {
  color-scheme: dark;
}

select option {
  background-color: #0c0a09; /* Deep dark background matching the cart drawer */
  color: #fafaf9; /* Light text for readability */
}

/* Premium Contact Cards Hover Effects */
.contact-card-premium {
  position: relative;
  background-color: rgba(12, 10, 9, 0.6);
  z-index: 1;
  border: none !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Background Hover Radial Glow */
.contact-card-premium::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -2;
}

.contact-card-call::after {
  background: radial-gradient(circle at center, rgba(202, 138, 4, 0.08) 0%, transparent 70%);
}
.contact-card-wa::after {
  background: radial-gradient(circle at center, rgba(37, 211, 102, 0.08) 0%, transparent 70%);
}
.contact-card-fb::after {
  background: radial-gradient(circle at center, rgba(24, 119, 242, 0.08) 0%, transparent 70%);
}

.contact-card-premium:hover::after {
  opacity: 1;
}

/* Gradient Border */
.contact-card-premium::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1.5px; /* Border thickness */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: background 0.4s ease;
  z-index: -1;
}

.contact-card-call:hover::before {
  background: linear-gradient(135deg, #FACC15, #CA8A04, #78350F);
}
.contact-card-wa:hover::before {
  background: linear-gradient(135deg, #4ade80, #25D366, #166534);
}
.contact-card-fb:hover::before {
  background: linear-gradient(135deg, #60a5fa, #1877F2, #1e40af);
}

.contact-card-call:hover {
  box-shadow: 0 0 30px rgba(202, 138, 4, 0.22);
}
.contact-card-wa:hover {
  box-shadow: 0 0 30px rgba(37, 211, 102, 0.22);
}
.contact-card-fb:hover {
  box-shadow: 0 0 30px rgba(24, 119, 242, 0.22);
}

/* Premium Footer Social Buttons Hover Effects */
.social-btn-premium {
  position: relative;
  width: 2.25rem; /* 36px - w-9 */
  height: 2.25rem; /* 36px - h-9 */
  background-color: rgba(12, 10, 9, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  border: none !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Gradient Border for Social Icons */
.social-btn-premium::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px; /* border thickness */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: background 0.4s ease;
  z-index: -1;
}

/* Hover States */
.social-btn-fb:hover::before {
  background: linear-gradient(135deg, #60a5fa, #1877F2, #1e40af);
}
.social-btn-wa:hover::before {
  background: linear-gradient(135deg, #4ade80, #25D366, #166534);
}

.social-btn-fb:hover {
  color: #1877F2 !important;
  box-shadow: 0 0 15px rgba(24, 119, 242, 0.35);
  transform: translateY(-2px);
}
.social-btn-wa:hover {
  color: #25D366 !important;
  box-shadow: 0 0 15px rgba(37, 211, 102, 0.35);
  transform: translateY(-2px);
}