/* ============================================
   Eid Al-Adha Theme - Waleed Toys
   Decorative CSS for Eid Al-Adha season
   ============================================ */

:root {
  --adha-bronze: #8B6914;
  --adha-gold: #D4A762;
  --adha-gold-light: #F0DDB8;
  --adha-brown: #5C4033;
  --adha-brown-light: #7A5C4F;
  --adha-green: #2E7D32;
  --adha-green-light: #4CAF50;
  --adha-green-dark: #1B5E20;
  --adha-cream: #FFF8EC;
  --adha-warm-white: #FFFDF7;
}

/* ---- Background Geometric Islamic Pattern ---- */
.eid-adha-theme {
  position: relative;
}

.adha-bg-pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  opacity: 0.035;
  background-image:
    radial-gradient(circle at 25% 25%, var(--adha-gold) 1.5px, transparent 1.5px),
    radial-gradient(circle at 75% 75%, var(--adha-gold) 1.5px, transparent 1.5px),
    radial-gradient(circle at 50% 50%, var(--adha-bronze) 0.8px, transparent 0.8px);
  background-size: 64px 64px, 64px 64px, 32px 32px;
}

/* Interlocking geometric grid overlay */
.adha-bg-pattern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 62px,
      rgba(212, 167, 98, 0.04) 62px,
      rgba(212, 167, 98, 0.04) 64px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 62px,
      rgba(212, 167, 98, 0.04) 62px,
      rgba(212, 167, 98, 0.04) 64px
    );
}

/* Diagonal cross-hatching for eight-pointed star illusion */
.adha-bg-pattern::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 44px,
      rgba(139, 105, 20, 0.025) 44px,
      rgba(139, 105, 20, 0.025) 46px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 44px,
      rgba(139, 105, 20, 0.025) 44px,
      rgba(139, 105, 20, 0.025) 46px
    ),
    repeating-linear-gradient(
      60deg,
      transparent,
      transparent 52px,
      rgba(46, 125, 50, 0.018) 52px,
      rgba(46, 125, 50, 0.018) 54px
    ),
    repeating-linear-gradient(
      -60deg,
      transparent,
      transparent 52px,
      rgba(46, 125, 50, 0.018) 52px,
      rgba(46, 125, 50, 0.018) 54px
    );
}

/* ---- Warm Gradient Banner ---- */
.adha-banner {
  background: linear-gradient(135deg, var(--adha-brown) 0%, var(--adha-bronze) 35%, var(--adha-green-dark) 70%, var(--adha-green) 100%);
  color: var(--adha-cream);
  text-align: center;
  padding: 11px 16px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  z-index: 1040;
}

.adha-banner::before {
  content: '\2726  \2726';
  color: var(--adha-gold);
  margin: 0 12px;
  font-size: 11px;
  vertical-align: middle;
}

.adha-banner::after {
  content: '\2726  \2726';
  color: var(--adha-gold);
  margin: 0 12px;
  font-size: 11px;
  vertical-align: middle;
}

.adha-banner-text {
  display: inline-block;
}

/* Warm shimmer on banner text */
.adha-banner .adha-banner-text {
  background: linear-gradient(90deg, var(--adha-gold-light) 0%, #fff 50%, var(--adha-gold-light) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: adhaShimmer 3.5s linear infinite;
}

@keyframes adhaShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ---- Side Decorations (Earthy Geometric Borders) ---- */
.adha-side-decor-left,
.adha-side-decor-right {
  position: fixed;
  top: 0;
  width: 28px;
  height: 100%;
  pointer-events: none;
  z-index: 1030;
  opacity: 0.1;
}

.adha-side-decor-left {
  left: 0;
  background:
    repeating-linear-gradient(
      180deg,
      var(--adha-gold) 0px,
      var(--adha-gold) 2px,
      transparent 2px,
      transparent 18px,
      var(--adha-green) 18px,
      var(--adha-green) 20px,
      transparent 20px,
      transparent 36px
    );
  border-right: 1px solid var(--adha-gold);
}

.adha-side-decor-right {
  right: 0;
  background:
    repeating-linear-gradient(
      180deg,
      var(--adha-gold) 0px,
      var(--adha-gold) 2px,
      transparent 2px,
      transparent 18px,
      var(--adha-green) 18px,
      var(--adha-green) 20px,
      transparent 20px,
      transparent 36px
    );
  border-left: 1px solid var(--adha-gold);
}

/* ---- Corner Decorations ---- */
.adha-corner {
  position: fixed;
  width: 75px;
  height: 75px;
  pointer-events: none;
  z-index: 1031;
  opacity: 0.14;
}

.adha-corner::before,
.adha-corner::after {
  content: '';
  position: absolute;
}

/* Outer line: gold, inner line: green */
.adha-corner-tl { top: 0; left: 0; }
.adha-corner-tl::before { top: 0; left: 0; width: 55px; height: 2px; background: linear-gradient(90deg, var(--adha-gold), transparent); }
.adha-corner-tl::after { top: 0; left: 0; width: 2px; height: 55px; background: linear-gradient(180deg, var(--adha-gold), transparent); }

.adha-corner-tr { top: 0; right: 0; }
.adha-corner-tr::before { top: 0; right: 0; width: 55px; height: 2px; background: linear-gradient(270deg, var(--adha-gold), transparent); }
.adha-corner-tr::after { top: 0; right: 0; width: 2px; height: 55px; background: linear-gradient(180deg, var(--adha-gold), transparent); }

.adha-corner-bl { bottom: 0; left: 0; }
.adha-corner-bl::before { bottom: 0; left: 0; width: 55px; height: 2px; background: linear-gradient(90deg, var(--adha-gold), transparent); }
.adha-corner-bl::after { bottom: 0; left: 0; width: 2px; height: 55px; background: linear-gradient(0deg, var(--adha-gold), transparent); }

.adha-corner-br { bottom: 0; right: 0; }
.adha-corner-br::before { bottom: 0; right: 0; width: 55px; height: 2px; background: linear-gradient(270deg, var(--adha-gold), transparent); }
.adha-corner-br::after { bottom: 0; right: 0; width: 2px; height: 55px; background: linear-gradient(0deg, var(--adha-gold), transparent); }

/* ---- Festive Celebration Decorations (Floating Crescents & Stars) ---- */
.adha-festive-elements {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.adha-festive-star {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--adha-gold);
  opacity: 0;
  animation: adhaStarTwinkle 5s ease-in-out infinite;
}

.adha-festive-star:nth-child(1)  { top: 4%;  left: 6%;   animation-delay: 0s; }
.adha-festive-star:nth-child(2)  { top: 10%; left: 30%;  animation-delay: 1.4s; }
.adha-festive-star:nth-child(3)  { top: 6%;  left: 58%;  animation-delay: 0.7s; }
.adha-festive-star:nth-child(4)  { top: 18%; left: 20%;  animation-delay: 2.2s; }
.adha-festive-star:nth-child(5)  { top: 9%;  left: 48%;  animation-delay: 1.1s; }
.adha-festive-star:nth-child(6)  { top: 14%; left: 82%;  animation-delay: 0.5s; }
.adha-festive-star:nth-child(7)  { top: 30%; left: 4%;   animation-delay: 2.8s; }
.adha-festive-star:nth-child(8)  { top: 8%;  left: 40%;  animation-delay: 3.2s; }
.adha-festive-star:nth-child(9)  { top: 38%; left: 70%;  animation-delay: 0.3s; }
.adha-festive-star:nth-child(10) { top: 50%; left: 12%;  animation-delay: 1.9s; }
.adha-festive-star:nth-child(11) { top: 60%; left: 90%;  animation-delay: 2.5s; }
.adha-festive-star:nth-child(12) { top: 70%; left: 38%;  animation-delay: 1.0s; }

@keyframes adhaStarTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 0.5; transform: scale(1); }
}

/* ---- Floating Celebration Particles ---- */
.adha-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.adha-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  opacity: 0;
  animation: adhaFloat 9s ease-in infinite;
}

.adha-particle:nth-child(odd)::before {
  content: '\2726';
  color: var(--adha-gold);
  font-size: 10px;
}

.adha-particle:nth-child(even)::before {
  content: '\2605';
  color: var(--adha-green);
  font-size: 9px;
}

.adha-particle:nth-child(1) { left: 8%;  animation-delay: 0s; }
.adha-particle:nth-child(2) { left: 22%; animation-delay: 2s; }
.adha-particle:nth-child(3) { left: 40%; animation-delay: 4.5s; }
.adha-particle:nth-child(4) { left: 58%; animation-delay: 1.2s; }
.adha-particle:nth-child(5) { left: 75%; animation-delay: 3.3s; }
.adha-particle:nth-child(6) { left: 90%; animation-delay: 5.5s; }
.adha-particle:nth-child(7) { left: 15%; animation-delay: 6.8s; }
.adha-particle:nth-child(8) { left: 65%; animation-delay: 7.5s; }

@keyframes adhaFloat {
  0% { bottom: -10px; opacity: 0; transform: translateX(0) rotate(0deg); }
  10% { opacity: 0.35; }
  85% { opacity: 0.15; }
  100% { bottom: 100%; opacity: 0; transform: translateX(25px) rotate(360deg); }
}

/* ---- Mosque Silhouette Accent (Top Right) ---- */
.adha-mosque-accent {
  position: fixed;
  top: 75px;
  right: 20px;
  z-index: 1034;
  pointer-events: none;
  opacity: 0.2;
  color: var(--adha-green);
  font-size: 32px;
  text-shadow: 0 0 10px rgba(46, 125, 50, 0.2);
  animation: adhaMosqueGlow 3s ease-in-out infinite alternate;
}

@keyframes adhaMosqueGlow {
  0% { opacity: 0.15; text-shadow: 0 0 6px rgba(46, 125, 50, 0.1); }
  100% { opacity: 0.3; text-shadow: 0 0 14px rgba(46, 125, 50, 0.25); }
}

/* ---- Golden Accents on Product Cards ---- */
.eid-adha-theme .product-card {
  border: 1px solid rgba(212, 167, 98, 0.1);
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.eid-adha-theme .product-card:hover {
  box-shadow:
    0 4px 20px rgba(212, 167, 98, 0.22),
    0 0 0 1px rgba(212, 167, 98, 0.12) !important;
  border-color: rgba(212, 167, 98, 0.3);
}

/* Warm golden glow on section headings */
.eid-adha-theme .section-title,
.eid-adha-theme h2.mb-4,
.eid-adha-theme .shop-content-wrapper h2 {
  text-shadow: 0 0 18px rgba(212, 167, 98, 0.1);
}

/* Golden separator lines */
.eid-adha-theme hr {
  border-color: rgba(212, 167, 98, 0.15);
}

/* Warm tint on buttons */
.eid-adha-theme .btn-primary:hover {
  box-shadow: 0 2px 12px rgba(139, 105, 20, 0.2);
}

/* ---- Eid Al-Adha Popup Modal ---- */
.adha-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.adha-popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

.adha-popup {
  background: linear-gradient(160deg, var(--adha-brown) 0%, var(--adha-bronze) 40%, var(--adha-green-dark) 80%, var(--adha-green) 100%);
  border: 2px solid var(--adha-gold);
  border-radius: 20px;
  padding: 40px 35px;
  max-width: 430px;
  width: 90%;
  text-align: center;
  position: relative;
  transform: scale(0.8) translateY(20px);
  transition: transform 0.4s ease;
  box-shadow:
    0 0 40px rgba(212, 167, 98, 0.25),
    0 20px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.adha-popup-overlay.active .adha-popup {
  transform: scale(1) translateY(0);
}

/* Popup geometric background pattern */
.adha-popup::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.06;
  background-image:
    radial-gradient(circle at 20% 20%, var(--adha-gold) 1px, transparent 1px),
    radial-gradient(circle at 80% 80%, var(--adha-gold) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, var(--adha-gold) 0.5px, transparent 0.5px);
  background-size: 28px 28px, 28px 28px, 14px 14px;
  pointer-events: none;
}

.adha-popup-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: var(--adha-gold-light);
  font-size: 24px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  z-index: 1;
  line-height: 1;
}

.adha-popup-close:hover {
  opacity: 1;
}

.adha-popup-icon {
  font-size: 52px;
  margin-bottom: 14px;
  display: block;
  animation: adhaPopupBounce 3s ease-in-out infinite;
}

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

.adha-popup-title {
  color: var(--adha-gold);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  font-family: 'Georgia', serif;
}

.adha-popup-subtitle {
  color: var(--adha-gold-light);
  font-size: 16px;
  margin-bottom: 20px;
  opacity: 0.9;
}

.adha-popup-message {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 25px;
}

.adha-popup-btn {
  background: linear-gradient(135deg, var(--adha-gold) 0%, var(--adha-bronze) 100%);
  color: #fff;
  border: none;
  padding: 12px 35px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 15px rgba(212, 167, 98, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.adha-popup-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(212, 167, 98, 0.5);
}

.adha-popup-btn:disabled {
  opacity: 0.65;
  cursor: default;
  transform: none;
}

/* Eidiya claim result message */
.adha-popup-result {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  min-height: 1px;
}

.adha-popup-result.is-success {
  color: var(--adha-green, #2E7D32);
}

.adha-popup-result.is-error {
  color: #c0392b;
}

/* Decorative sheep icons in popup */
.adha-popup-decor {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 10px;
}

.adha-popup-decor span {
  font-size: 22px;
  animation: adhaDecorBob 2.2s ease-in-out infinite;
  display: inline-block;
}

.adha-popup-decor span:nth-child(2) { animation-delay: -0.4s; }
.adha-popup-decor span:nth-child(3) { animation-delay: -0.8s; }
.adha-popup-decor span:nth-child(4) { animation-delay: -1.2s; }
.adha-popup-decor span:nth-child(5) { animation-delay: -1.6s; }

@keyframes adhaDecorBob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-5px) rotate(3deg); }
}

/* Stars in popup */
.adha-popup-stars {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.adha-popup-stars span {
  position: absolute;
  color: var(--adha-gold);
  font-size: 8px;
  animation: adhaStarTwinkle 3s ease-in-out infinite;
}

.adha-popup-stars span:nth-child(1) { top: 8%;  left: 8%;   animation-delay: 0s; }
.adha-popup-stars span:nth-child(2) { top: 12%; right: 10%; animation-delay: 0.9s; }
.adha-popup-stars span:nth-child(3) { top: 68%; left: 6%;   animation-delay: 1.6s; }
.adha-popup-stars span:nth-child(4) { top: 72%; right: 8%;  animation-delay: 0.4s; }
.adha-popup-stars span:nth-child(5) { top: 38%; left: 4%;   animation-delay: 2.1s; }
.adha-popup-stars span:nth-child(6) { top: 42%; right: 5%;  animation-delay: 1.2s; }

/* ---- Responsive ---- */

/* Tablets */
@media (max-width: 991px) {
  .adha-mosque-accent {
    opacity: 0.15;
    top: 65px;
    right: 10px;
    font-size: 26px;
  }
  .adha-side-decor-left,
  .adha-side-decor-right {
    width: 14px;
  }
  .adha-corner {
    width: 50px;
    height: 50px;
  }
  .adha-corner::before { width: 35px !important; }
  .adha-corner::after { height: 35px !important; }
}

/* Mobile */
@media (max-width: 767px) {
  .adha-banner {
    font-size: 13px;
    padding: 8px 10px;
  }
  .adha-mosque-accent {
    display: none;
  }
  .adha-festive-elements .adha-festive-star {
    width: 3px;
    height: 3px;
  }
  .adha-side-decor-left,
  .adha-side-decor-right {
    display: none;
  }
  .adha-corner {
    width: 30px;
    height: 30px;
    opacity: 0.08;
  }
  .adha-corner::before { width: 22px !important; }
  .adha-corner::after { height: 22px !important; }
  .adha-popup {
    padding: 28px 22px;
    max-width: 340px;
  }
  .adha-popup-title {
    font-size: 23px;
  }
  .adha-popup-icon {
    font-size: 40px;
  }
  .adha-bg-pattern {
    opacity: 0.02;
  }
}

/* Very small devices */
@media (max-width: 480px) {
  .adha-banner {
    font-size: 12px;
    padding: 6px 8px;
  }
  .adha-banner::before,
  .adha-banner::after {
    display: none;
  }
  .adha-popup {
    padding: 24px 18px;
    max-width: 300px;
  }
  .adha-popup-title {
    font-size: 20px;
  }
  .adha-popup-subtitle {
    font-size: 14px;
  }
  .adha-popup-message {
    font-size: 13px;
  }
}

/* ---- Reduce Motion for Accessibility ---- */
@media (prefers-reduced-motion: reduce) {
  .adha-festive-star,
  .adha-particle,
  .adha-popup-icon,
  .adha-popup-decor span,
  .adha-mosque-accent,
  .adha-banner .adha-banner-text {
    animation: none !important;
  }
  .adha-festive-star { opacity: 0.2; }
  .adha-popup-icon { transform: none; }
  .adha-mosque-accent { opacity: 0.2; }
  .adha-banner .adha-banner-text {
    -webkit-text-fill-color: var(--adha-gold-light);
    background: none;
  }
  .adha-popup-overlay {
    transition: none;
  }
  .adha-popup {
    transition: none;
  }
  .adha-popup-overlay.active .adha-popup {
    transform: scale(1) translateY(0);
  }
}