/* ── Noor Arts Custom Design System & Luxury Islamic Aesthetics ── */
@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=Cinzel:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --color-gold-50: #faf6eb;
  --color-gold-100: #f4ebd2;
  --color-gold-200: #e8d4a3;
  --color-gold-300: #dcb873;
  --color-gold-400: #d19f4b;
  --color-gold-500: #c58930;
  --color-gold-600: #af6e24;
  --color-gold-700: #8c521f;
  --color-obsidian: #0b0907;
  --color-card-dark: #14110d;
  --color-border-gold: rgba(209, 159, 75, 0.25);
  --color-gold-glow: rgba(209, 159, 75, 0.15);
}

/* Base Body Styles with Subtle Islamic Pattern Watermark */
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--color-obsidian);
  color: #f5efe6;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

.font-serif-luxury {
  font-family: 'Cormorant Garamond', serif;
}

.font-arabic {
  font-family: 'Amiri', serif;
}

.font-cinzel {
  font-family: 'Cinzel', serif;
}

/* Subtle pattern overlay on top of deep obsidian background */
.pattern-bg {
  background-image: radial-gradient(rgba(197, 137, 48, 0.04) 1px, transparent 1px), url('../pattern.jpeg');
  background-size: 40px 40px, 450px auto;
  background-repeat: repeat, repeat;
  background-blend-mode: normal, overlay;
}

/* Gold Gradient Shimmer Text */
.text-gold-gradient {
  background: linear-gradient(135deg, #fcedc5 0%, #d8a855 50%, #ad762b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gold-light-gradient {
  background: linear-gradient(135deg, #ffffff 0%, #f6e3ba 60%, #dfb264 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Gilded Metallic Border */
.border-gold-glow {
  border: 1px solid rgba(216, 168, 85, 0.3);
  box-shadow: 0 0 20px rgba(197, 137, 48, 0.08);
}

.border-gold-glow:hover {
  border-color: rgba(216, 168, 85, 0.6);
  box-shadow: 0 0 28px rgba(216, 168, 85, 0.18);
}

/* Glassmorphism Panels */
.glass-panel {
  background: rgba(20, 17, 13, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(216, 168, 85, 0.2);
}

.glass-nav {
  background: rgba(11, 9, 7, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(216, 168, 85, 0.18);
}

.glass-dropdown {
  background: rgba(18, 15, 12, 0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(216, 168, 85, 0.3);
}

/* Gold Button Hover Shimmer */
.btn-gold {
  background: linear-gradient(135deg, #d8a855 0%, #b88231 100%);
  color: #0d0a06;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 18px rgba(184, 130, 49, 0.25);
}

.btn-gold:hover {
  background: linear-gradient(135deg, #ebd08d 0%, #c9933f 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(216, 168, 85, 0.4);
}

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

.btn-gold-outline {
  border: 1px solid rgba(216, 168, 85, 0.6);
  color: #f3deb0;
  background: transparent;
  transition: all 0.3s ease;
}

.btn-gold-outline:hover {
  background: rgba(216, 168, 85, 0.12);
  border-color: #d8a855;
  color: #ffffff;
  transform: translateY(-1px);
}

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

::-webkit-scrollbar-track {
  background: #0d0a08;
}

::-webkit-scrollbar-thumb {
  background: #382c1e;
  border-radius: 4px;
  border: 1px solid rgba(216, 168, 85, 0.2);
}

::-webkit-scrollbar-thumb:hover {
  background: #735328;
}

/* Artwork Image Zoom on Hover */
.artwork-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.artwork-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 24px rgba(216, 168, 85, 0.15);
}

.artwork-card img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.artwork-card:hover img {
  transform: scale(1.06);
}

/* Lightbox Modal Animation */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-modal {
  animation: fadeInScale 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Pulse Glow Keyframe */
@keyframes goldPulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(216, 168, 85, 0.2);
  }
  50% {
    box-shadow: 0 0 30px rgba(216, 168, 85, 0.45);
  }
}

.pulse-gold {
  animation: goldPulse 3s infinite;
}

/* Mobile Bottom Navigation Safe-area */
.mobile-bottom-nav {
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* Toast Notification Transition */
.toast-notice {
  transform: translateY(100px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

.toast-notice.show {
  transform: translateY(0);
  opacity: 1;
}

/* Filter Tab Badges Active State */
.filter-pill.active {
  background: linear-gradient(135deg, #d8a855 0%, #ad762b 100%);
  color: #0b0907;
  font-weight: 600;
  border-color: #d8a855;
  box-shadow: 0 3px 12px rgba(184, 130, 49, 0.3);
}

/* Image Upload Drag and Drop zone */
.dropzone-active {
  border-color: #d8a855 !important;
  background-color: rgba(216, 168, 85, 0.08) !important;
}

/* Carousel Slide Fade */
.carousel-slide-item {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s ease;
  pointer-events: none;
}

.carousel-slide-item.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ── Explicit Responsive Slide Modes ── */
@media (min-width: 768px) {
  .hero-slide-desktop {
    display: flex !important;
  }
  .hero-slide-mobile {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .hero-slide-desktop {
    display: none !important;
  }
  .hero-slide-mobile {
    display: flex !important;
  }
}

/* ── Hero Slide Overlay with Mobile Media Query ── */
.hero-slide-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.20) 50%, rgba(0, 0, 0, 0.35) 100%);
}

@media (max-width: 768px) {
  .hero-slide-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.10) 45%, rgba(0, 0, 0, 0.20) 100%) !important;
  }

  /* Enhance text readability over brighter mobile background */
  #heroSection h1 {
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.9);
  }

  #heroSection p {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95);
  }
}