/* ==========================================================================
   Diwali appeal pages — /diwali/<slug>/ (festival/diwali_base.html, used by
   old_age_home_diwali.html and homeless_diwali.html)
   Five sections: hero, Short + donation form, what we give, celebration
   photos, finale. Golden sandal with mild marigold and saffron; site fonts
   (Lexend headings, Hind text). Sections are kept short: on phones the gift
   cards and photos scroll sideways instead of stacking.
   Cracker effects come from js/festival/diwali_fx.js (DiwaliFX).
   ========================================================================== */

.dp-page {
  --dp-cream: #fffcf6;
  --dp-sandal-100: #fdf3e1;
  --dp-sandal-200: #f8e6c4;
  --dp-sandal-300: #f0d39b;
  --dp-gold-400: #e2b65c;
  --dp-gold-500: #cf9a3a;
  --dp-gold-700: #94650f;   /* gold text on light backgrounds */
  --dp-marigold: #f29a2e;
  --dp-saffron: #e8781f;
  --dp-saffron-dark: #b85a10;
  --dp-ink: #3a2a1a;
  --dp-body: #6a5640;
  --dp-mute: #9a8670;
  --dp-line: #efdfc2;
  --dp-ok: #2f8a4f;
  --dp-danger: #c0392b;
  --dp-festive: linear-gradient(135deg, var(--dp-marigold), var(--dp-saffron));
  --dp-shadow: 0 18px 40px rgba(150, 100, 30, 0.12);

  position: relative;
  overflow-x: clip;
  background: var(--dp-cream);
  color: var(--dp-body);
  font-family: Hind, sans-serif;
}

.dp-page .container {
  position: relative;
  z-index: 1;
}

/* the drawing sprite (included just before .dp-page) must stay rendered
   (gradients), just out of sight */
.dw-sprites {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* in-page jumps land clear of the fixed header */
#donate,
#story,
#dpCustom {
  scroll-margin-top: 96px;
}

/* bursts fired when an amount is picked (DiwaliFX.pop) */
.dw-pop-layer {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

/* ---------- Shared pieces ------------------------------------------------- */

.dp-section {
  padding: 56px 0;
}

.dp-head {
  max-width: 640px;
  margin: 0 auto 28px;
  text-align: center;
}

/* small caps label between two gold hairlines */
.dp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--dp-gold-700);
  font-family: Lexend, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.dp-kicker::before,
.dp-kicker::after {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dp-gold-500));
}

.dp-kicker::after {
  transform: scaleX(-1);
}

.dp-h2 {
  margin: 0;
  color: var(--dp-ink);
  font-family: Lexend, sans-serif;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* the warm word in a heading */
.dp-h2 span,
.dp-hero__title span,
.dp-finale__title span {
  background: var(--dp-festive);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dp-sub {
  margin: 10px auto 0;
  color: var(--dp-body);
  font-size: 1rem;
  line-height: 1.6;
  text-wrap: balance;
}

/* Marigold button with a slow light sweep */
.dp-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  overflow: hidden;
  padding: 13px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--dp-festive);
  color: #fff;
  font-family: Lexend, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(232, 120, 31, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dp-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  animation: dpSweep 3.6s ease-in-out infinite;
}

.dp-btn:hover,
.dp-btn:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(232, 120, 31, 0.38);
}

.dp-btn--ghost {
  background: #fff;
  color: var(--dp-ink);
  box-shadow: inset 0 0 0 1.5px var(--dp-gold-400);
}

.dp-btn--ghost::after {
  display: none;
}

.dp-btn--ghost i {
  color: var(--dp-saffron);
}

.dp-btn--ghost:hover,
.dp-btn--ghost:focus-visible {
  color: var(--dp-ink);
  background: var(--dp-sandal-100);
  box-shadow: inset 0 0 0 1.5px var(--dp-gold-500);
}

.dp-btn:focus-visible,
.dp-amount:focus-visible,
.dp-moment:focus-visible {
  outline: 3px solid var(--dp-gold-400);
  outline-offset: 3px;
}

@keyframes dpSweep {
  0%, 55% { left: -60%; }
  100% { left: 130%; }
}

/* sideways strip for phones (gift cards, photos): the next card peeks in */
@media (max-width: 767.98px) {
  .dp-swipe {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 14px;
    margin: 0 calc(var(--bs-gutter-x, 1.5rem) * -0.5);
    padding: 4px calc(var(--bs-gutter-x, 1.5rem) * 0.5) 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .dp-swipe::-webkit-scrollbar {
    display: none;
  }

  .dp-swipe > * {
    scroll-snap-align: start;
  }
}

/* ===== 1. Hero =========================================================== */

/* desktop padding kept tight so the hero isn't taller than its banner needs;
   tablets and phones set their own below */
.dp-hero {
  position: relative;
  overflow: hidden;
  padding: 50px 0 50px;
  background:
    radial-gradient(50% 70% at 80% 45%, rgba(242, 154, 46, 0.2), transparent 70%),
    radial-gradient(40% 60% at 0% 0%, rgba(226, 182, 92, 0.25), transparent 70%),
    linear-gradient(180deg, #fff8ea 0%, var(--dp-sandal-200) 100%);
  color: var(--dp-ink);
}

/* gold line along the foot of the hero */
.dp-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--dp-gold-400), var(--dp-marigold) 50%, var(--dp-gold-400));
}

/* a fine jaali of gold dots */
.dp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(rgba(207, 154, 58, 0.2) 1px, transparent 1.6px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%);
  mask-image: linear-gradient(180deg, #000, transparent 80%);
  pointer-events: none;
}

.dp-hero__grid {
  display: grid;
  gap: 28px;
  align-items: center;
}

@media (min-width: 992px) {
  .dp-hero__grid {
    grid-template-columns: 0.95fr 1.05fr;
    gap: 40px;
  }
}

.dp-countdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px 14px;
  border: 1px solid var(--dp-sandal-300);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--dp-body);
  font-family: Lexend, sans-serif;
  font-size: 0.8rem;
}

.dp-countdown strong {
  color: var(--dp-saffron-dark);
  font-weight: 600;
}

.dp-countdown__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dp-saffron);
  animation: dpPulse 2s ease-out infinite;
}

.dp-countdown__date {
  color: var(--dp-mute);
}

@keyframes dpPulse {
  0% { box-shadow: 0 0 0 0 rgba(232, 120, 31, 0.55); }
  100% { box-shadow: 0 0 0 9px rgba(232, 120, 31, 0); }
}

.dp-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--dp-gold-700);
  font-family: Lexend, sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.dp-hero__eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--dp-gold-500);
}

.dp-hero__title {
  margin: 0;
  color: var(--dp-ink);
  font-family: Lexend, sans-serif;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.015em;
}

.dp-hero__title span {
  display: block;
}

.dp-hero__lead {
  max-width: 500px;
  margin: 14px 0 0;
  color: var(--dp-body);
  font-size: 1.06rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* two buttons of equal width and height */
.dp-hero__ctas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 440px;
  margin-top: 24px;
}

.dp-hero__ctas .dp-btn {
  min-width: 0;
}

.dp-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  color: var(--dp-body);
  font-size: 0.88rem;
}

.dp-hero__trust i {
  margin-right: 6px;
  color: var(--dp-gold-500);
}

/* Banner (3:2) in a white frame with a gold hairline */
.dp-hero__visual {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 16px;
}

.dp-banner {
  position: relative;
  padding: 8px;
  border: 1px solid var(--dp-sandal-300);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 26px 50px rgba(150, 100, 30, 0.2), 0 0 70px rgba(242, 154, 46, 0.18);
}

/* the banner is a poster with its own words and Donate button: shown whole, never
   cropped, and a tap on it goes to the form */
.dp-banner a {
  display: block;
}

.dp-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 19px;
}

.dp-banner__tag {
  position: absolute;
  left: 50%;
  bottom: -16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--dp-festive);
  color: #fff;
  font-family: Lexend, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 8px 18px rgba(232, 120, 31, 0.3);
}

/* phones: the banner tag carries the countdown, and the countdown line above
   the headline goes; tablets and desktop keep both as they were */
.dp-banner__count {
  display: none;
  align-items: center;
  gap: 7px;
}

.dp-banner__count .dp-countdown__dot {
  background: #fff;
}

.dp-banner__count strong {
  font-weight: 700;
}

.dp-banner__count-date {
  opacity: 0.85;
  font-weight: 500;
}

@media (max-width: 767.98px) {
  .dp-countdown {
    display: none;
  }

  .dp-banner__tag--count .dp-banner__gift {
    display: none;
  }

  .dp-banner__tag--count .dp-banner__count {
    display: inline-flex;
  }
}

/* flower pot (anar) on the finale's floor: saffron with cream bands */
.dp-pot {
  position: relative;
  width: 42px;
  height: 58px;
  --c1: var(--dp-saffron);
  --c2: #fff3d6;
}

.dp-pot__body {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* sparks leave from the canvas's bottom-centre, which sits on the nozzle */
.dp-pot__fx {
  position: absolute;
  left: 50%;
  bottom: 53px;
  width: 200px;
  height: 260px;
  transform: translateX(-50%);
  pointer-events: none;
}

@media (max-width: 991.98px) {
  .dp-hero {
    padding: 28px 0 44px;
    text-align: center;
  }

  .dp-hero__eyebrow,
  .dp-hero__ctas,
  .dp-hero__trust {
    justify-content: center;
  }

  .dp-hero__eyebrow::before {
    display: none;
  }

  .dp-hero__lead,
  .dp-hero__ctas {
    margin-left: auto;
    margin-right: auto;
  }

  .dp-hero__visual {
    max-width: 560px;
  }
}

@media (max-width: 575.98px) {
  .dp-hero__lead {
    font-size: 1rem;
  }

  /* normal-size buttons, side by side and even */
  .dp-hero__ctas {
    gap: 10px;
    margin-top: 20px;
  }

  .dp-hero__ctas .dp-btn {
    gap: 7px;
    padding: 11px 12px;
    font-size: 0.84rem;
    white-space: nowrap;
  }

  .dp-hero__trust {
    gap: 4px 14px;
    margin-top: 16px;
    font-size: 0.8rem;
  }

}

/* very narrow phones: no room for two side by side, so they stack, still even */
@media (max-width: 359.98px) {
  .dp-hero__ctas {
    grid-template-columns: 1fr;
  }
}

/* ===== 2. Gift: the Short beside the donation form ======================= */

.dp-give {
  background: var(--dp-cream);
}

.dp-give__grid {
  display: grid;
  gap: 28px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

@media (min-width: 992px) {
  .dp-give__grid {
    grid-template-columns: 300px 1fr;
    gap: 44px;
  }
}

@media (max-width: 575.98px) {
  .dp-give__video .dp-video {
    width: 240px;
  }
}

/* Donate links land on the card itself below 992px, clear of the header */
.dp-card {
  scroll-margin-top: 88px;
}

.dp-give__video {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* YouTube Short (9:16) */
.dp-video {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 5px solid #fff;
  border-radius: 24px;
  background: #2b1d10;
  box-shadow: 0 0 0 1px var(--dp-gold-400), var(--dp-shadow);
}

.dp-video iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* see the HD boost script in the template */
.dp-video.hd-boost iframe {
  width: 300%;
  height: 300%;
  transform: scale(0.3334);
  transform-origin: top left;
}

.dp-video__caption {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 0;
  color: var(--dp-body);
  font-size: 0.9rem;
}

.dp-video__caption i {
  color: var(--dp-saffron);
}

/* Donation card */
.dp-card {
  border: 1px solid var(--dp-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--dp-shadow);
}

/* a thin festive line along the top */
.dp-card::before {
  content: "";
  display: block;
  height: 4px;
  margin: 0 22px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--dp-gold-400), var(--dp-marigold), var(--dp-gold-400));
}

.dp-card__body {
  padding: 20px 26px 22px;
}

@media (max-width: 575.98px) {
  .dp-card__body {
    padding: 18px 16px 20px;
  }
}

/* Amount buttons (five amounts + Custom): one row from 768px, two rows of
   three below */
.dp-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-top: 8px;
  margin-bottom: 18px;
}

@media (min-width: 768px) {
  .dp-amounts {
    grid-template-columns: repeat(6, 1fr);
  }
}

.dp-amount {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 54px;
  padding: 10px 4px;
  border: 1.5px solid var(--dp-line);
  border-radius: 14px;
  background: #fff;
  color: var(--dp-ink);
  font-family: Lexend, sans-serif;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.dp-amount:hover {
  border-color: var(--dp-gold-400);
  transform: translateY(-2px);
}

.dp-amount__value {
  font-size: 1.08rem;
  font-weight: 600;
  white-space: nowrap;
}

.dp-amount__badge {
  position: absolute;
  top: -9px;
  left: 50%;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--dp-festive);
  color: #fff;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* bottom corner, clear of the badge on the top edge */
.dp-amount__check {
  position: absolute;
  right: -7px;
  bottom: -7px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--dp-saffron);
  color: #fff;
  font-size: 0.56rem;
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dp-amount.is-active {
  border-color: var(--dp-marigold);
  background: linear-gradient(180deg, #fffaf0, #fff0d6);
  color: var(--dp-saffron-dark);
  box-shadow: 0 0 0 3px rgba(242, 154, 46, 0.18), 0 8px 18px rgba(232, 120, 31, 0.14);
}

.dp-amount.is-active .dp-amount__check {
  transform: scale(1);
}

.dp-amount--other {
  font-size: 0.9rem;
  font-weight: 500;
}

.dp-amount--other i {
  color: var(--dp-gold-500);
  font-size: 0.8rem;
}

/* Gift-item pages: two choices (Gift items / Custom amount) instead of amounts */
.dp-amounts.dp-amounts--modes {
  grid-template-columns: 1fr 1fr;
}

.dp-amounts--modes .dp-amount {
  min-height: 46px;
  font-size: 0.92rem;
  font-weight: 600;
}

.dp-amounts--modes .dp-amount i {
  color: var(--dp-gold-500);
  font-size: 0.85rem;
}

/* one row per gift item: icon, name and price, quantity stepper */
.dp-items {
  display: grid;
  gap: 8px;
  margin: -6px 0 16px;
}

.dp-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 8px;
  border: 1.5px solid var(--dp-line);
  border-radius: 14px;
  background: #fff;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.dp-item.has-qty {
  border-color: var(--dp-gold-400);
  background: #fffaf0;
}

.dp-item__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--dp-festive);
  color: #fff;
  font-size: 0.95rem;
}

.dp-item__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.dp-item__name {
  color: var(--dp-ink);
  font-family: Lexend, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
}

.dp-item__price {
  color: var(--dp-mute);
  font-size: 0.82rem;
}

.dp-qty {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
}

.dp-qty__btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1.5px solid var(--dp-line);
  border-radius: 50%;
  background: #fff;
  color: var(--dp-saffron-dark);
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.dp-qty__btn:hover:not(:disabled) {
  border-color: var(--dp-marigold);
  background: #fff6e6;
}

.dp-qty__btn--add {
  border-color: transparent;
  background: var(--dp-festive);
  color: #fff;
}

.dp-qty__btn--add:hover:not(:disabled) {
  border-color: transparent;
  background: var(--dp-saffron);
}

.dp-qty__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.dp-qty__btn:focus-visible,
.dp-qty__input:focus {
  outline: 2px solid var(--dp-gold-400);
  outline-offset: 2px;
}

.dp-qty__input {
  width: 36px;
  padding: 4px 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--dp-ink);
  font-family: Lexend, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}

.dp-items__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 4px 0;
  color: var(--dp-body);
  font-size: 0.88rem;
}

.dp-items__total strong {
  color: var(--dp-saffron-dark);
  font-family: Lexend, sans-serif;
  font-size: 1.1rem;
}

.dp-custom {
  margin: -6px 0 16px;
}

.dp-custom__note {
  margin: 6px 2px 0;
  color: var(--dp-mute);
  font-size: 0.82rem;
}

.dp-custom.is-invalid .dp-custom__note {
  color: var(--dp-danger);
  font-weight: 500;
}

.dp-money {
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1.5px solid var(--dp-marigold);
  border-radius: 12px;
  background: #fffaf0;
}

.dp-money span {
  padding: 0 2px 0 16px;
  color: var(--dp-saffron-dark);
  font-family: Lexend, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
}

.dp-money input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px 11px 6px;
  border: 0;
  background: transparent;
  color: var(--dp-ink);
  font-family: Lexend, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  outline: none;
}

.dp-money:focus-within {
  box-shadow: 0 0 0 3px rgba(242, 154, 46, 0.2);
}

.dp-money:has(.is-invalid) {
  border-color: var(--dp-danger);
}

/* Donor fields: name + city, WhatsApp + email (then the receipt note), PAN with
   its 80G note beside it. One column on phones. */
.dp-fields {
  display: grid;
  gap: 12px;
}

.dp-field {
  min-width: 0;
}

@media (min-width: 576px) {
  .dp-fields {
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
  }

  .dp-note {
    grid-column: 1 / -1;
  }

  /* beside the PAN box, centred on it */
  .dp-note--pan {
    grid-column: auto;
    align-self: end;
    min-height: 46px;
  }
}

.dp-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: -2px 0 0;
  color: var(--dp-body);
  font-size: 0.84rem;
  line-height: 1.4;
}

.dp-note i {
  flex: none;
  color: var(--dp-gold-500);
}

.dp-note .dp-note__wa {
  color: #25a55a;
  font-size: 0.95rem;
}

/* receipt line: a soft green-to-gold card with the two channels as round badges */
.dp-note--receipt {
  gap: 12px;
  margin: 2px 0 4px;
  padding: 10px 14px;
  border: 1px solid rgba(37, 165, 90, 0.22);
  border-radius: 12px;
  background: linear-gradient(90deg, #edf9f1, #fff8ec);
  color: var(--dp-ink);
  font-size: 0.86rem;
  line-height: 1.45;
}

.dp-note--receipt strong {
  font-weight: 600;
}

.dp-note__icons {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
}

.dp-note__icons i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(60, 40, 10, 0.12);
  font-size: 0.85rem;
  line-height: 1;
}

/* desktop: a slimmer line with slightly smaller text and badges */
@media (min-width: 768px) {
  .dp-note--receipt {
    gap: 10px;
    padding: 6px 12px;
    font-size: 0.8rem;
    line-height: 1.35;
  }

  .dp-note__icons {
    gap: 5px;
  }

  .dp-note__icons i,
  .dp-note__icons .dp-note__wa {
    width: 24px;
    height: 24px;
    font-size: 0.74rem;
  }
}

@media (max-width: 575.98px) {
  .dp-note--receipt {
    gap: 10px;
    padding: 9px 12px;
  }

  .dp-note__icons {
    gap: 5px;
  }

  .dp-note__icons i {
    width: 26px;
    height: 26px;
    font-size: 0.78rem;
  }
}

.dp-field label {
  display: block;
  margin-bottom: 5px;
  color: var(--dp-ink);
  font-family: Lexend, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
}

.dp-field label small {
  color: var(--dp-mute);
  font-weight: 400;
}

.dp-input {
  display: block;
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--dp-line);
  border-radius: 10px;
  background: #fff;
  color: var(--dp-ink);
  font-size: 0.98rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dp-input::placeholder {
  color: #bfae98;
  text-transform: none;  /* the PAN box uppercases what is typed, not "Optional" */
}

.dp-input:focus {
  border-color: var(--dp-marigold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(242, 154, 46, 0.18);
}

.dp-input.is-invalid {
  border-color: var(--dp-danger);
}

/* custom.css paints every required input with a red left bar and squares its
   left corners (!important); this form shows errors inline instead. */
.dp-page .dp-input:required,
.dp-page .dp-input:required:hover {
  border-left: 1.5px solid var(--dp-line) !important;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.dp-page .dp-input:required:focus {
  border-left-color: var(--dp-marigold) !important;
}

.dp-page .dp-input.is-invalid:required {
  border-left-color: var(--dp-danger) !important;
}

.dp-page .dp-phone .dp-input:required {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.dp-phone {
  display: flex;
}

.dp-phone span {
  display: grid;
  place-items: center;
  padding: 0 11px;
  border: 1.5px solid var(--dp-line);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  background: var(--dp-sandal-100);
  color: var(--dp-body);
  font-weight: 500;
}

.dp-phone .dp-input {
  border-radius: 0 10px 10px 0;
}

.dp-msg {
  display: none;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fdecea;
  color: var(--dp-danger);
  font-size: 0.9rem;
}

.dp-msg.is-visible {
  display: block;
}

.dp-pay {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 16px;
  overflow: hidden;
  padding: 14px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--dp-festive);
  color: #fff;
  font-family: Lexend, sans-serif;
  font-size: 1.04rem;
  font-weight: 600;
  box-shadow: 0 12px 26px rgba(232, 120, 31, 0.3);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dp-pay::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  animation: dpSweep 3.6s ease-in-out infinite;
}

.dp-pay:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(232, 120, 31, 0.38);
}

.dp-pay:focus-visible {
  outline: 3px solid var(--dp-gold-400);
  outline-offset: 3px;
}

.dp-pay:disabled {
  cursor: wait;
  opacity: 0.75;
  transform: none;
}

.dp-trust {
  margin: 12px 0 0;
  color: var(--dp-mute);
  font-size: 0.8rem;
  text-align: center;
}

/* Phones fill the form in two steps: (1) gifts or amount and Continue, (2) a
   summary with Change, the donor's details and Donate. The script adds is-details
   for step 2; larger screens never see the step parts and show the whole form. */
.dp-steps .dp-step-next,
.dp-steps .dp-step-sum {
  display: none;
}

@media (max-width: 767.98px) {
  .dp-steps:not(.is-details) .dp-step-next {
    display: flex;
  }

  .dp-steps:not(.is-details) .dp-fields,
  .dp-steps:not(.is-details) .dp-pay:not(.dp-step-next) {
    display: none;
  }

  .dp-steps.is-details .dp-amounts,
  .dp-steps.is-details .dp-items,
  .dp-steps.is-details .dp-custom {
    display: none;
  }

  .dp-steps.is-details .dp-step-sum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 10px 12px 10px 14px;
    border: 1px solid var(--dp-sandal-300);
    border-radius: 12px;
    background: var(--dp-sandal-100);
    animation: dpStepIn 0.3s ease;
  }

  .dp-steps.is-details .dp-fields {
    animation: dpStepIn 0.3s ease;
  }

  .dp-steps.is-details .dp-step-sum {
    position: relative;
  }

  /* Change gently pulses, like a bubble */
  .dp-steps.is-details .dp-step-sum__edit {
    animation: dpBubble 1.8s ease-in-out infinite;
  }

  /* first visit to step 2: a tip above Change, its arrow nudging down at it */
  .dp-steps.show-hint .dp-step-sum__hint {
    display: inline-flex;
  }
}

.dp-step-sum__hint {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  right: 4px;
  z-index: 3;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--dp-ink);
  color: #fff;
  font-family: Lexend, sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(58, 42, 26, 0.25);
  animation: dpStepIn 0.35s ease;
}

/* the little tail pointing down at Change */
.dp-step-sum__hint::before {
  content: "";
  position: absolute;
  bottom: -5px;
  right: 34px;
  width: 10px;
  height: 10px;
  background: var(--dp-ink);
  transform: rotate(45deg);
}

.dp-step-sum__hint i {
  color: var(--dp-marigold);
  animation: dpNudge 0.9s ease-in-out infinite;
}

@keyframes dpBubble {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(232, 120, 31, 0.35); }
  50% { transform: scale(1.07); box-shadow: 0 0 0 6px rgba(232, 120, 31, 0); }
}

@keyframes dpNudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .dp-steps.is-details .dp-step-sum__edit,
  .dp-step-sum__hint i {
    animation: none;
  }
}

.dp-step-sum__info {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.dp-step-sum__label {
  color: var(--dp-mute);
  font-size: 0.74rem;
}

.dp-step-sum__info strong {
  color: var(--dp-saffron-dark);
  font-family: Lexend, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
}

.dp-step-sum__edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--dp-sandal-300);
  border-radius: 999px;
  background: #fff;
  color: var(--dp-ink);
  font-family: Lexend, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
}

.dp-step-sum__edit i {
  color: var(--dp-saffron);
  font-size: 0.7rem;
}

@keyframes dpStepIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.dp-trust i {
  margin-right: 4px;
  color: var(--dp-ok);
}

/* ===== 3. What we give ================================================== */

.dp-gifts {
  background:
    radial-gradient(40% 60% at 100% 0%, rgba(242, 154, 46, 0.1), transparent 70%),
    var(--dp-sandal-100);
}

/* a small square photo beside the words; three across from 992px */
.dp-gifts__grid {
  display: grid;
  gap: 14px;
  max-width: 600px;
  margin: 0 auto;
}

@media (min-width: 992px) {
  .dp-gifts__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: none;
  }
}

.dp-gift {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--dp-line);
  border-radius: 18px;
  background: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.dp-gift:hover {
  border-color: var(--dp-sandal-300);
  transform: translateY(-3px);
  box-shadow: var(--dp-shadow);
}

.dp-gift__img {
  flex: none;
  width: 104px;
  height: 104px;
  border-radius: 14px;
  background: var(--dp-sandal-200);
  object-fit: cover;
}

.dp-gift__body {
  min-width: 0;
}

.dp-gift__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  color: var(--dp-ink);
  font-family: Lexend, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
}

.dp-gift__title i {
  color: var(--dp-saffron);
  font-size: 0.9rem;
}

.dp-gift__text {
  margin: 0;
  color: var(--dp-body);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ===== 4. Celebration photos ============================================= */

.dp-moments {
  background: var(--dp-cream);
}

/* two rows of three, all the same size; a sideways strip on phones */
@media (min-width: 768px) {
  .dp-moments__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

@media (max-width: 767.98px) {
  .dp-moments__grid {
    grid-auto-columns: 85%;
  }
}

.dp-moment {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  background: var(--dp-sandal-200);
  box-shadow: 0 10px 22px rgba(150, 100, 30, 0.12);
}

.dp-moment img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* thin gold frame on hover */
.dp-moment::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0);
  border-radius: 9px;
  transition: border-color 0.3s ease;
  pointer-events: none;
}

.dp-moment:hover img {
  transform: scale(1.06);
}

.dp-moment:hover::after {
  border-color: rgba(255, 255, 255, 0.85);
}

/* real photos (page.moment_images): one row of 4:5 cards that scrolls in a loop
   and can be dragged with the mouse or swiped by touch (script in diwali_base.html).
   The track holds the photos twice, so moving it by half its width lands the copy
   exactly where the first set began. Faces sit near the top of these photos, so
   the crop starts there. */
.dp-marquee {
  overflow: hidden;
  padding: 10px 0 24px;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.dp-marquee.is-dragging {
  cursor: grabbing;
}

.dp-marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.dp-marquee img {
  -webkit-user-drag: none;
  pointer-events: none;
}

/* margin, not gap, so both halves of the track are exactly the same width */
.dp-marquee .dp-moment {
  flex: 0 0 auto;
  width: 250px;
  margin-right: 22px;
  aspect-ratio: 4 / 5;
  padding: 8px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(150, 100, 30, 0.14);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.dp-marquee .dp-moment img {
  border-radius: 14px;
  object-position: center 25%;
}

.dp-marquee .dp-moment::after {
  inset: 16px;
}

.dp-marquee .dp-moment:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 36px rgba(150, 100, 30, 0.2);
}

.dp-marquee .dp-moment:hover img {
  transform: scale(1.04);
}

@media (max-width: 767.98px) {
  .dp-marquee .dp-moment {
    width: 190px;
    margin-right: 14px;
  }
}

/* ===== 5. Finale ========================================================= */

.dp-finale {
  position: relative;
  overflow: hidden;
  padding: 52px 0 96px;
  background:
    radial-gradient(50% 80% at 50% 0%, rgba(255, 255, 255, 0.55), transparent 70%),
    linear-gradient(180deg, #fbe7bf 0%, #f5cf86 100%);
  color: var(--dp-ink);
  text-align: center;
}

.dp-finale::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(rgba(207, 154, 58, 0.22) 1px, transparent 1.6px) 0 0 / 22px 22px;
  pointer-events: none;
}

.dp-finale__title {
  max-width: 680px;
  margin: 0 auto;
  color: var(--dp-ink);
  font-family: Lexend, sans-serif;
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

.dp-finale__text {
  max-width: 500px;
  margin: 10px auto 22px;
  color: var(--dp-body);
  font-size: 1rem;
  line-height: 1.6;
  text-wrap: balance;
}

/* flower pots and a ground chakra on the floor of the finale */
.dp-finale__ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(60px, 14vw, 180px);
  pointer-events: none;
}

/* Phones: flower pots out at the sides so their sparks clear Donate Now */
@media (max-width: 767.98px) {
  .dp-finale__ground {
    justify-content: space-between;
    padding: 0 14px;
  }
}

.dp-wheel {
  position: relative;
  width: 40px;
  height: 40px;
  --c1: var(--dp-saffron);
  --c2: #e2557a;
}

.dp-wheel__body {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: dpSpin 0.5s linear infinite;
}

.dp-wheel__fx {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 170px;
  height: 170px;
  transform: translate(-50%, -50%);
}

@keyframes dpSpin {
  to { transform: rotate(360deg); }
}

/* ===== Phone dock: the chosen amount and a Donate button ================= */

.dp-dock {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px 8px 18px;
  border: 1px solid var(--dp-sandal-300);
  border-radius: 16px;
  background: rgba(255, 252, 246, 0.97);
  color: var(--dp-ink);
  box-shadow: 0 14px 34px rgba(120, 80, 20, 0.22);
  transform: translateY(140%);
  transition: transform 0.35s ease;
}

.dp-dock.is-shown {
  transform: translateY(0);
}

.dp-dock__info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.dp-dock__label {
  color: var(--dp-mute);
  font-size: 0.76rem;
}

.dp-dock__amount {
  color: var(--dp-saffron-dark);
  font-family: Lexend, sans-serif;
  font-size: 1.15rem;
}

.dp-dock .dp-btn {
  padding: 11px 20px;
  font-size: 0.92rem;
}

@media (min-width: 992px) {
  .dp-dock {
    display: none;
  }
}

/* ===== Phones: shorter sections ========================================== */

@media (max-width: 767.98px) {
  .dp-section {
    padding: 40px 0;
  }

  .dp-head {
    margin-bottom: 22px;
  }

  .dp-sub {
    font-size: 0.95rem;
  }

  .dp-finale {
    padding: 40px 0 88px;
  }

}

/* Poster above the heading wherever the hero stacks (below 992px) */
@media (max-width: 991.98px) {
  .dp-hero__visual {
    order: -1;
  }
}

.dp-dots {
  display: none;
}

/* dots under the sliding photos, phones only */
@media (max-width: 767.98px) {
  .dp-dots {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-top: 2px;
  }
}

/* each dot sits in an 18px tap target */
.dp-dots button {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.dp-dots button::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dp-sandal-300);
  transition: background 0.2s ease, transform 0.2s ease;
}

.dp-dots button.is-active::before {
  background: var(--dp-saffron);
  transform: scale(1.3);
}

/* Phones: a tighter form, so it needs less scrolling. Name and city share a
   row; inputs, labels and amount buttons are a little smaller. */
@media (max-width: 575.98px) {
  .dp-hero {
    padding-top: 20px;
  }

  .dp-amounts {
    gap: 8px;
    margin-bottom: 14px;
  }

  .dp-amount {
    min-height: 48px;
  }

  .dp-amount__value {
    font-size: 1rem;
  }

  .dp-fields {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* everything after name and city takes the full width */
  .dp-fields > :nth-child(n + 3) {
    grid-column: 1 / -1;
  }

  .dp-field label {
    margin-bottom: 4px;
    font-size: 0.78rem;
  }

  .dp-input {
    padding: 10px 12px;
    font-size: 0.95rem;
  }

  .dp-note {
    font-size: 0.8rem;
  }

  .dp-pay {
    margin-top: 14px;
    padding: 13px 16px;
  }
}

/* ===== Reduced motion ==================================================== */

@media (prefers-reduced-motion: reduce) {
  .dp-btn::after,
  .dp-pay::after,
  .dp-countdown__dot,
  .dp-wheel__body {
    animation: none;
  }


  .dp-amount,
  .dp-gift,
  .dp-moment img,
  .dp-dock {
    transition: none;
  }
}