/* ===== DURGA PUJA FESTIVE THEME =====
   Every rule is scoped under html.puja — puja.js adds that class only during the festive dates.
   Outside those dates this file does nothing. */

html.puja {
  --accent: #B4232A;
  --paper: #FFF6E8;
  --gold: #D99A1E;
  --maroon: #4A1014;
  --bn: 'Tiro Bangla', 'Newsreader', Georgia, serif
}

.puja body {
  background-image: radial-gradient(rgba(180, 35, 42, .05) 1px, transparent 1px)
}

.puja .scroll-progress {
  background: linear-gradient(90deg, var(--accent), var(--gold))
}

/* top greeting ribbon */
.pj-ribbon {
  position: relative;
  background: var(--maroon);
  color: #F7E3B5;
  text-align: center;
  padding: 10px 20px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap
}

.pj-ribbon::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 10px, var(--accent) 10px 20px)
}

.pj-ribbon [lang="bn"] {
  font-family: var(--bn);
  font-size: 17px;
  letter-spacing: 0;
  color: var(--gold)
}

.pj-ribbon i {
  color: var(--gold)
}

/* navbar trim */
.puja .navbar {
  background: rgba(255, 246, 232, .9);
  border-bottom: 2px solid var(--gold)
}

.puja .nav-social a:hover,
.puja .nav-social a:focus-visible {
  box-shadow: 0 10px 22px rgba(180, 35, 42, .32)
}

/* buttons */
.puja .btn-accent {
  box-shadow: 0 12px 30px rgba(180, 35, 42, .25), inset 0 -3px 0 rgba(217, 154, 30, .55)
}

/* hero */
.puja .hero {
  position: relative;
  background: radial-gradient(ellipse at 78% 40%, rgba(217, 154, 30, .14), transparent 62%)
}

.pj-greet {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap
}

.pj-greet [lang="bn"] {
  font-family: var(--bn);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.2;
  color: var(--accent)
}

.pj-greet small {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--maroon);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.pj-greet small i {
  color: var(--accent)
}

.puja .glow {
  background: var(--gold);
  opacity: .22
}

.puja .frame {
  border: 2px solid var(--gold);
  opacity: .6
}

.pj-mandala {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 128%;
  aspect-ratio: 1;
  translate: -50% -50%;
  color: var(--gold);
  opacity: .55;
  pointer-events: none;
  animation: pjSpin 90s linear infinite
}

.pj-mandala svg {
  width: 100%;
  height: 100%;
  display: block
}

@keyframes pjSpin {
  to {
    rotate: 360deg
  }
}

/* Maa Durga faded background: left edge to middle of the hero */
.puja .hero-grid {
  position: relative;
  z-index: 1
}

.pj-durga-bg {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  pointer-events: none;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: .30;
  -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%), linear-gradient(to bottom, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, #000 55%, transparent 100%), linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-composite: intersect
}

.pj-durga-empty {
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
  border: 2px dashed rgba(180, 35, 42, .3);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 16px
}

.pj-durga-empty span {
  font-size: 11px;
  line-height: 1.4;
  color: rgba(74, 16, 20, .55)
}

/* shiuli flowers */
.pj-shiuli {
  position: absolute;
  width: 34px;
  height: 34px;
  pointer-events: none;
  z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23fff' stroke='%23E2CFAE' stroke-width='.7'%3E%3Cellipse cx='20' cy='10.5' rx='4.8' ry='8.5'/%3E%3Cellipse cx='20' cy='10.5' rx='4.8' ry='8.5' transform='rotate(72 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='4.8' ry='8.5' transform='rotate(144 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='4.8' ry='8.5' transform='rotate(216 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='4.8' ry='8.5' transform='rotate(288 20 20)'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='4' fill='%23E8731A'/%3E%3C/svg%3E") center/contain no-repeat;
  filter: drop-shadow(0 3px 4px rgba(74, 16, 20, .15));
  animation: pjSway 6s ease-in-out infinite
}

@keyframes pjSway {
  0%, 100% { transform: rotate(var(--r, 0deg)) translateY(0) }
  50% { transform: rotate(calc(var(--r, 0deg) + 14deg)) translateY(-6px) }
}

/* ticker */
.puja .ticker {
  background: var(--maroon);
  border-color: var(--gold)
}

.puja .ticker-track span {
  color: #F7E3B5;
  display: inline-flex;
  align-items: center;
  gap: 14px
}

.puja .ticker-track span::before {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23fff'%3E%3Cellipse cx='20' cy='10.5' rx='4.8' ry='8.5'/%3E%3Cellipse cx='20' cy='10.5' rx='4.8' ry='8.5' transform='rotate(72 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='4.8' ry='8.5' transform='rotate(144 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='4.8' ry='8.5' transform='rotate(216 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='4.8' ry='8.5' transform='rotate(288 20 20)'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='4' fill='%23E8731A'/%3E%3C/svg%3E") center/contain no-repeat
}

/* section dividers: alpona dot strip instead of a plain line */
.puja .section {
  border-top: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='16' viewBox='0 0 60 16'%3E%3Cg fill='%23B4232A'%3E%3Ccircle cx='30' cy='8' r='2.2'/%3E%3Ccircle cx='0' cy='8' r='1.4'/%3E%3Ccircle cx='60' cy='8' r='1.4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23D99A1E' stroke-width='1.2'%3E%3Cpath d='M30 1.5c4 3 4 10 0 13c-4-3-4-10 0-13z'/%3E%3Cpath d='M7 8h14M39 8h14'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: top center;
  background-size: 60px 16px
}

.puja .section-head .num {
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.puja .section-head .num::before {
  content: '';
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23fff' stroke='%23C9A56A' stroke-width='1'%3E%3Cellipse cx='20' cy='10.5' rx='4.8' ry='8.5'/%3E%3Cellipse cx='20' cy='10.5' rx='4.8' ry='8.5' transform='rotate(72 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='4.8' ry='8.5' transform='rotate(144 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='4.8' ry='8.5' transform='rotate(216 20 20)'/%3E%3Cellipse cx='20' cy='10.5' rx='4.8' ry='8.5' transform='rotate(288 20 20)'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='4' fill='%23E8731A'/%3E%3C/svg%3E") center/contain no-repeat
}

/* about */
.puja .check-list li {
  border-color: rgba(217, 154, 30, .35)
}

.puja .img-frame {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
  border-radius: 6px
}

/* why cards: alpona rosette corner */
.puja .why-grid {
  border-color: rgba(217, 154, 30, .4)
}

.puja .why-card {
  position: relative;
  border-color: rgba(217, 154, 30, .4)
}

.puja .why-card::after {
  content: '';
  position: absolute;
  top: 18px;
  right: 18px;
  width: 54px;
  height: 54px;
  opacity: .75;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23D99A1E' stroke-width='1.3'%3E%3Ccircle cx='30' cy='30' r='6'/%3E%3Ccircle cx='30' cy='30' r='26' stroke-dasharray='2 4'/%3E%3Cpath d='M30 8c5 6 5 12 0 16c-5-4-5-10 0-16zM30 52c5-6 5-12 0-16c-5 4-5 10 0 16zM8 30c6-5 12-5 16 0c-4 5-10 5-16 0zM52 30c-6-5-12-5-16 0c4 5 10 5 16 0z'/%3E%3C/g%3E%3Cg fill='%23B4232A'%3E%3Ccircle cx='30' cy='30' r='2.4'/%3E%3Ccircle cx='15' cy='15' r='1.6'/%3E%3Ccircle cx='45' cy='15' r='1.6'/%3E%3Ccircle cx='15' cy='45' r='1.6'/%3E%3Ccircle cx='45' cy='45' r='1.6'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat
}

/* flavors */
.puja .flavor-card {
  border-color: rgba(217, 154, 30, .5);
  transition: box-shadow .3s ease, transform .3s ease
}

.puja .flavor-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(74, 16, 20, .16)
}

.puja .flavor-badge-onimg {
  box-shadow: 0 6px 16px rgba(180, 35, 42, .35)
}

/* menu: deep maroon with faint alpona pattern */
.puja .menu-section {
  background-color: var(--maroon);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='16' viewBox='0 0 60 16'%3E%3Cg fill='%23D99A1E'%3E%3Ccircle cx='30' cy='8' r='2.2'/%3E%3Ccircle cx='0' cy='8' r='1.4'/%3E%3Ccircle cx='60' cy='8' r='1.4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23D99A1E' stroke-width='1.2'%3E%3Cpath d='M30 1.5c4 3 4 10 0 13c-4-3-4-10 0-13z'/%3E%3Cpath d='M7 8h14M39 8h14'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23D99A1E' stroke-width='1.2' opacity='.16'%3E%3Ccircle cx='60' cy='60' r='8'/%3E%3Ccircle cx='60' cy='60' r='24' stroke-dasharray='2 5'/%3E%3Cpath d='M60 38c6 8 6 14 0 22c-6-8-6-14 0-22zM60 82c6-8 6-14 0-22c-6 8-6 14 0 22zM38 60c8-6 14-6 22 0c-8 6-14 6-22 0zM82 60c-8-6-14-6-22 0c8 6 14 6 22 0z'/%3E%3C/g%3E%3Cg fill='%23D99A1E' opacity='.2'%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3Ccircle cx='120' cy='0' r='3'/%3E%3Ccircle cx='0' cy='120' r='3'/%3E%3Ccircle cx='120' cy='120' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x, repeat;
  background-position: top center, center;
  background-size: 60px 16px, 120px 120px
}

.puja .menu-section .section-head .num {
  color: var(--gold)
}

.puja .menu-card {
  background: rgba(255, 246, 232, .05);
  border-color: rgba(217, 154, 30, .35)
}

.puja .menu-badge {
  background: var(--gold);
  color: var(--maroon);
  font-weight: 700
}

.puja .menu-order:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--maroon)
}

.puja .bulk-banner {
  border-color: rgba(217, 154, 30, .5)
}

/* reviews / instagram */
.puja .reviews-section,
.puja .insta-section {
  background-color: #FBEBD3
}

.puja .stars {
  color: var(--gold);
  text-shadow: 0 0 1px var(--maroon)
}

.puja .qr-card {
  border: 2px solid var(--gold)
}

/* faq */
.puja .faq-grid,
.puja .faq-item {
  border-color: rgba(217, 154, 30, .4)
}

/* contact */
.puja .info-item i {
  background: rgba(180, 35, 42, .09)
}

.puja .contact-info,
.puja .message-card,
.puja .map-frame {
  border-color: rgba(217, 154, 30, .5)
}

/* footer */
.puja .footer {
  position: relative;
  background: #3A0B0E
}

.puja .footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 10px, var(--accent) 10px 20px)
}

.pj-foot-greet {
  font-family: var(--bn);
  color: var(--gold);
  font-size: 1.15rem
}

/* sticky bar */
.puja .sticky-bar {
  background: rgba(255, 246, 232, .95);
  border-top: 2px solid var(--gold)
}

@media (max-width:768px) {
  .pj-ribbon {
    font-size: 12px;
    gap: 8px;
    padding: 8px 14px 12px
  }

  .pj-mandala {
    width: 115%
  }

  .pj-durga-bg {
    width: 100%;
    bottom: auto;
    height: 70%;
    opacity: .12
  }

  .pj-shiuli {
    width: 26px;
    height: 26px
  }

  .puja .why-card::after {
    width: 42px;
    height: 42px
  }
}

@media (prefers-reduced-motion:reduce) {
  .pj-mandala,
  .pj-shiuli {
    animation: none
  }
}