/**
 * Diwali greeting experience.
 *
 * 1. Landing: three columns of cards that drift up / down forever, the
 *    "Pick a card, wish a loved one" headline, twinkling fireworks.
 * 2. Form: the chosen card next to the From / To fields.
 * 3. Loading, 4. Result (card + Download + Share).
 * Fluid layout: sizes are in vw / vh so it matches the 1920x1080 design on a
 * desktop screen and reflows to a phone without a separate stage.
 */

.diwali, .diwali * { box-sizing: border-box; }

.diwali {
  --lime: #8fd13a;
  --lime-d: #3e601e;
  --ink: #07180a;
  --panel: rgba(6, 26, 9, .82);
  --text: #eaf6d6;
  --muted: #a9c98a;
  --error: #ff8a6b;
  --diwali-font: 'Diwali Brand', 'Diwali Sans', Inter, 'Helvetica Neue', Arial, sans-serif;
  /* landing geometry (design: 306px cards on a 1920px screen) */
  --cw: min(15.94vw, 28.3vh);
  --gap: min(.84vw, 1.5vh);
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: var(--ink) var(--diwali-bg) center / cover no-repeat;
  font-family: var(--diwali-font);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.diwali-body { margin: 0; background: #07180a; overflow: hidden; }
.diwali-body #main-content { margin: 0; padding: 0; }

.diwali-sr, .diwali-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; }
.diwali-hp { left: -9999px; }
.diwali [hidden] { display: none !important; }
.diwali button { font-family: inherit; }

.diwali-screen { position: absolute; inset: 0; display: none; }
.diwali-screen.is-active { display: block; animation: diwali-in .45s ease both; }

/* Amaron mark, recoloured through a mask so one transparent PNG serves every screen. */
.diwali-mark {
  position: absolute; z-index: 6; right: 3.7vw; bottom: 3vh; width: clamp(96px, 9.2vw, 190px); aspect-ratio: 304 / 72;
  background-color: #fff;
  -webkit-mask: var(--diwali-logo) no-repeat right center / contain; mask: var(--diwali-logo) no-repeat right center / contain;
  pointer-events: none;
}

/* twinkling fireworks laid over the baked-in starbursts */
.diwali-twinkle { position: absolute; z-index: 1; width: 9vw; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(236, 250, 220, .55) 0, rgba(236, 250, 220, 0) 62%); animation: diwali-twinkle 3.4s ease-in-out infinite; }
.diwali-twinkle--l { left: 3.6%; top: 20.2%; transform: translate(-50%, -50%); }
.diwali-twinkle--r { left: 96.6%; top: 9%; transform: translate(-50%, -50%); animation-delay: -1.7s; }

/* ====================================================== 1. LANDING */
.diwali-cols { position: absolute; top: 0; bottom: 0; left: 8.85vw; display: flex; gap: var(--gap); z-index: 2; }
.diwali-col { width: var(--cw); height: 100%; overflow: hidden; }
.diwali-col__track {
  display: flex; flex-direction: column; gap: var(--gap); margin: 0; padding: 0; list-style: none;
  animation: diwali-scroll var(--dur, 40s) linear infinite; will-change: transform;
}
.diwali-col--down .diwali-col__track { animation-direction: reverse; }
.diwali-cols:hover .diwali-col__track, .diwali-cols:focus-within .diwali-col__track { animation-play-state: paused; }
.diwali-col__item { margin: 0; padding: 0; flex: none; }

.diwali-design {
  display: block; width: 100%; padding: 0; border: 0; border-radius: calc(var(--cw) * .05); overflow: hidden; background: #123316; cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45); transition: transform .28s ease, box-shadow .28s ease;
}
.diwali-design img { display: block; width: 100%; height: auto; aspect-ratio: 540 / 850; object-fit: cover; }
.diwali-design:hover { transform: scale(1.035); box-shadow: 0 14px 36px rgba(0, 0, 0, .55), 0 0 0 3px var(--lime); }
.diwali-design:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.diwali-headline {
  position: absolute; z-index: 3; right: 3.2vw; top: 50%; width: min(36vw, 70vh); height: auto; pointer-events: none;
  transform: translateY(-50%); filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .45));
  animation: diwali-headline-in .9s cubic-bezier(.2, .8, .2, 1) .15s both, diwali-float 6s ease-in-out 1.1s infinite alternate;
}

/* ====================================================== 2. FORM */
.diwali-formwrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; overflow-y: auto; }
.diwali-back {
  position: absolute; z-index: 3; top: 3.2vh; left: 3.4vw; padding: 9px 16px; border: 1px solid rgba(143, 209, 58, .45); border-radius: 999px;
  background: rgba(6, 26, 9, .6); color: var(--text); font: 500 14px/1.2 var(--diwali-font); cursor: pointer; transition: background-color .2s, border-color .2s;
}
.diwali-back:hover, .diwali-back:focus-visible { background: rgba(143, 209, 58, .18); border-color: var(--lime); outline: 0; }
.diwali-back:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.diwali-formgrid { display: flex; align-items: center; justify-content: center; gap: 4.5vw; width: 100%; max-width: 1100px; }
.diwali-picked { margin: 0; flex: none; height: min(78vh, 780px); aspect-ratio: 540 / 850; border-radius: 20px; overflow: hidden; background: #000;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 3px rgba(143, 209, 58, .55); animation: diwali-pop .5s cubic-bezier(.2, .8, .2, 1) both; }
.diwali-picked img { display: block; width: 100%; height: 100%; object-fit: cover; }

.diwali-form {
  flex: 0 1 460px; min-width: 0; padding: 34px 32px 30px; border: 1px solid rgba(143, 209, 58, .35); border-radius: 26px;
  background: var(--panel); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.diwali-form__title { margin: 0 0 4px; font: 700 italic 30px/1.15 var(--diwali-font); color: var(--lime); }
.diwali-form__hint { margin: 0 0 20px; font-size: 14px; color: var(--muted); }

.diwali-field { margin: 0 0 14px; }
.diwali-field label { display: block; margin: 0 0 6px; font: 600 12px/1.2 var(--diwali-font); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.diwali-field label span { color: var(--error); }
.diwali-field input {
  display: block; width: 100%; padding: 13px 15px; border: 2px solid rgba(143, 209, 58, .3); border-radius: 12px; background: rgba(255, 255, 255, .06);
  color: #fff; font: 500 18px/1.2 var(--diwali-font); outline: 0; transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.diwali-field input:focus { border-color: var(--lime); background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 4px rgba(143, 209, 58, .18); }
.diwali-field.is-valid input { border-color: rgba(143, 209, 58, .75); }
.diwali-field.is-error input { border-color: var(--error); box-shadow: 0 0 0 4px rgba(255, 138, 107, .15); }
.diwali-field__error { min-height: 0; margin: 6px 2px 0; font-size: 13px; line-height: 1.3; color: var(--error); }
.diwali-field__error:empty { display: none; }
.diwali-field.is-shake { animation: diwali-shake .4s ease; }

.diwali-terms { display: flex; align-items: center; gap: 10px; margin: 4px 0 18px; font-size: 13px; color: var(--muted); }
.diwali-terms__input { width: 18px; height: 18px; margin: 0; accent-color: var(--lime); }
.diwali-terms a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.diwali-submit {
  display: block; width: 100%; padding: 15px 20px; border: 0; border-radius: 999px; background: var(--lime); color: #0b2a0c;
  font: 700 italic 20px/1.1 var(--diwali-font); letter-spacing: .02em; cursor: pointer; box-shadow: 0 8px 24px rgba(143, 209, 58, .3); transition: transform .2s, background-color .2s, box-shadow .2s;
}
.diwali-submit:hover, .diwali-submit:focus-visible { background: #a3e04c; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(143, 209, 58, .4); outline: 0; }
.diwali-submit:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.diwali-submit:disabled { opacity: .6; cursor: default; transform: none; }
.diwali-error { min-height: 1.3em; margin: 12px 0 0; font-size: 14px; text-align: center; color: var(--error); }

/* ====================================================== 3. LOADING */
.diwali-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; text-align: center; padding: 24px; }
.diwali-spinner { position: relative; width: 84px; height: 84px; }
.diwali-spinner i { position: absolute; inset: 0; border: 4px solid transparent; border-top-color: var(--lime); border-radius: 50%; animation: diwali-spin 1.1s linear infinite; }
.diwali-spinner i:nth-child(2) { inset: 12px; border-top-color: #f5c518; animation-duration: 1.5s; animation-direction: reverse; }
.diwali-spinner i:nth-child(3) { inset: 24px; border-top-color: #fff; animation-duration: .9s; }
.diwali-loading__text { margin: 0; font: 600 italic 22px/1.3 var(--diwali-font); color: var(--lime); animation: diwali-pulse 1.6s ease-in-out infinite; }

/* ====================================================== 4. RESULT */
.diwali-result { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2vh; padding: 3vh 4vw; overflow-y: auto; }
.diwali-result-card { display: block; width: auto; height: auto; max-width: 100%; max-height: 72vh; border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 3px rgba(143, 209, 58, .45); animation: diwali-pop .55s cubic-bezier(.2, .8, .2, 1) both; }
.diwali-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.diwali-download, .diwali-share {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 190px; padding: 14px 26px; border-radius: 999px;
  font: 600 17px/1.1 var(--diwali-font); text-decoration: none; cursor: pointer; transition: transform .2s, background-color .2s, border-color .2s;
}
.diwali-download { background: var(--lime); color: #0b2a0c; border: 2px solid var(--lime); }
.diwali-share { background: transparent; color: var(--lime); border: 2px solid var(--lime); }
.diwali-download:hover, .diwali-download:focus-visible { background: #a3e04c; transform: translateY(-2px); outline: 0; }
.diwali-share:hover, .diwali-share:focus-visible { background: rgba(143, 209, 58, .15); transform: translateY(-2px); outline: 0; }
.diwali-download:focus-visible, .diwali-share:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.diwali-again { padding: 6px 12px; border: 0; background: none; color: var(--muted); font: 500 14px/1.2 var(--diwali-font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.diwali-again:hover, .diwali-again:focus-visible { color: var(--text); outline: 0; }

/* ---- share dialog + toast */
.diwali-sharepanel {
  position: absolute; inset: 0; z-index: 40; padding: 16px; display: flex; align-items: center; justify-content: center;
  background: rgba(2, 10, 3, .75); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: diwali-in .25s ease both;
}
.diwali-sharepanel__box {
  position: relative; width: min(100%, 420px); padding: 26px 22px 20px; background: #0c1f0e; border: 1px solid rgba(143, 209, 58, .4);
  border-radius: 26px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); color: var(--text); outline: 0;
}
.diwali-sharepanel__title { margin: 0 36px 20px 0; font: 600 20px/1.2 var(--diwali-font); color: var(--lime); }
.diwali-sharepanel__close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--lime); font-size: 28px; line-height: 38px; cursor: pointer; }
.diwali-sharepanel__close:hover, .diwali-sharepanel__close:focus-visible { background: rgba(143, 209, 58, .15); outline: 0; }
.diwali-sharegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 8px; list-style: none; margin: 0; padding: 0; }
.diwali-sharebtn { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 4px 0; background: none; border: 0; color: var(--text); font: 500 13px/1.2 var(--diwali-font); cursor: pointer; border-radius: 12px; }
.diwali-sharebtn:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.diwali-sharebtn__icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: #fff; transition: transform .15s ease; }
.diwali-sharebtn:hover .diwali-sharebtn__icon, .diwali-sharebtn:focus-visible .diwali-sharebtn__icon { transform: translateY(-2px) scale(1.05); }
.diwali-ic--wa { background: #25d366; }
.diwali-ic--fb { background: #1877f2; }
.diwali-ic--x  { background: #000; box-shadow: inset 0 0 0 1px #444; }
.diwali-ic--gm { background: #ea4335; }
.diwali-ic--ig { background: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 55%, #6228d7 100%); }
.diwali-ic--cp { background: var(--lime-d); }
.diwali-sharepanel__note { margin: 18px 0 0; font-size: 12px; line-height: 1.4; color: rgba(234, 246, 214, .6); text-align: center; }
.diwali-toast {
  position: absolute; left: 50%; bottom: 24px; z-index: 50; max-width: min(92vw, 520px); margin: 0; padding: 12px 18px; transform: translateX(-50%);
  border-radius: 14px; background: #0c1f0e; color: var(--text); border: 1px solid rgba(143, 209, 58, .5); font: 500 14px/1.35 var(--diwali-font); text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
@media (pointer: coarse) { .diwali-sharepanel__note { display: none; } }

/* ====================================================== MOBILE / PORTRAIT */
@media (max-width: 900px), (max-aspect-ratio: 6/5) {
  .diwali { --cw: min(28vw, 24dvh, 190px); --gap: 2.6vw; }
  .diwali-mark { top: 14px; left: 16px; right: auto; bottom: auto; width: 92px; -webkit-mask-position: left center; mask-position: left center; }
  .diwali-twinkle { width: 26vw; }
  .diwali-twinkle--l { top: 17%; }

  .diwali-headline { right: auto; left: 50%; top: 5dvh; width: min(88vw, 40dvh * 1.146); transform: translateX(-50%);
    animation: diwali-headline-in-m .9s cubic-bezier(.2, .8, .2, 1) .15s both, diwali-float 6s ease-in-out 1.1s infinite alternate; }
  .diwali-cols { top: 46dvh; bottom: 0; left: 50%; transform: translateX(-50%); }

  .diwali-formwrap { align-items: flex-start; padding: 64px 5vw 28px; }
  .diwali-back { top: 12px; left: auto; right: 14px; }
  .diwali-formgrid { flex-direction: column; gap: 20px; }
  .diwali-picked { height: min(30dvh, 280px); }
  .diwali-form { flex: none; width: 100%; max-width: 460px; padding: 26px 20px 22px; }
  .diwali-form__title { font-size: 26px; }

  .diwali-result-card { max-height: 66dvh; }
  .diwali-download, .diwali-share { min-width: 0; flex: 1 1 150px; }
}

/* ====================================================== MOTION */
@keyframes diwali-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes diwali-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, calc(var(--dist, 800px) * -1), 0); } }
@keyframes diwali-headline-in { from { opacity: 0; transform: translateY(-46%) scale(.85) rotate(-4deg); } to { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); } }
@keyframes diwali-headline-in-m { from { opacity: 0; transform: translateX(-50%) scale(.85); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes diwali-float { from { margin-top: -6px; } to { margin-top: 8px; } }
@keyframes diwali-twinkle { 0%, 100% { opacity: .15; scale: .8; } 50% { opacity: 1; scale: 1.15; } }
@keyframes diwali-pop { from { opacity: 0; transform: scale(.92) translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes diwali-spin { to { transform: rotate(360deg); } }
@keyframes diwali-pulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes diwali-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

@media (prefers-reduced-motion: reduce) {
  .diwali *, .diwali *::before, .diwali *::after { animation: none !important; transition: none !important; }
  .diwali-col { overflow-y: auto; scrollbar-width: none; }
}


/* ====================================================== AMARON SKIN
 * Matches the approved Amaron layout: sparkles, hero art with the Amaron
 * logo on the landing page, steps background + dark panel on the other screens. */

/* hero art already carries the logo and rays; it is square */
.diwali-headline { width: min(40vw, 78vh); right: 2.4vw;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
.diwali[data-state="select"] .diwali-mark { display: none; }

/* other screens use the steps background */
.diwali[data-state="form"],
.diwali[data-state="loading"],
.diwali[data-state="result"] { background-image: var(--diwali-bg-steps); }

/* orbiting sparkles instead of the soft glow */
.diwali-twinkle {
  width: clamp(34px, 4.2vw, 80px); aspect-ratio: 151 / 296; border-radius: 0;
  background: var(--diwali-sparkle) center / contain no-repeat; opacity: 1; scale: 1;
  animation: diwali-orbit 2s ease-in-out infinite;
}
.diwali-twinkle--l { left: 10px; top: 20%; transform: none; }
.diwali-twinkle--r { left: auto; right: 30px; top: 20%; transform: none; animation-delay: 0s; }
@keyframes diwali-orbit {
  from { transform: translate(10%, 10%) rotate(0deg) translateX(5%) rotate(0deg); }
  to   { transform: translate(10%, 10%) rotate(360deg) translateX(5%) rotate(-360deg); }
}

/* cards keep their rounded corners (transparent PNG) */
.diwali-design { background: transparent; box-shadow: none; border-radius: calc(var(--cw) * .06); }
.diwali-design:hover { box-shadow: 0 0 0 2px #95C93D; }
.diwali-picked { background: transparent; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); border-radius: 14px; }
.diwali-picked img { object-fit: contain; }
.diwali-picked { aspect-ratio: 723 / 1137; }

/* dark rounded panel, grey italic inputs, green buttons */
.diwali-form { border: 0; border-radius: 30px; background: rgba(0, 0, 0, .7); }
.diwali-form__title { font: 400 italic 28px/1.2 var(--diwali-font); color: #fff; text-align: center; text-transform: uppercase; }
.diwali-form__hint { text-align: center; }
.diwali-field input { border: 0; border-radius: 16px; background: rgba(73, 73, 73, .7); font-style: italic; letter-spacing: .5px; }
.diwali-field input:focus { background: rgba(255, 255, 255, .18); box-shadow: 0 0 0 3px rgba(149, 201, 61, .5); }
.diwali-field.is-valid input { box-shadow: none; }
.diwali-field.is-error input { box-shadow: 0 0 0 3px rgba(255, 138, 107, .45); }
.diwali-field label { color: #cfd8c4; }
.diwali-submit, .diwali-download { border: 0; border-radius: 16px; background: rgba(128, 168, 43, .85); color: #fff; font-style: italic; box-shadow: none; }
.diwali-submit:hover, .diwali-submit:focus-visible, .diwali-download:hover, .diwali-download:focus-visible { background: #80a82b; box-shadow: none; }
.diwali-share { border: 0; border-radius: 16px; background: rgba(128, 168, 43, .85); color: #fff; font-style: italic; }
.diwali-share:hover, .diwali-share:focus-visible { background: #80a82b; }
.diwali-loading__text, .diwali-back { font-style: italic; }
.diwali-loading__text { color: #fff; text-transform: uppercase; }

@media (max-width: 900px), (max-aspect-ratio: 6/5) {
  .diwali-headline { width: min(88vw, 40dvh); }
  .diwali-twinkle { width: 34px; }
  .diwali:not([data-state="select"]) .diwali-twinkle { display: none; }
  .diwali-twinkle--l { top: 0; left: 10px; }
  .diwali-twinkle--r { top: 0; right: 20px; }
}


/* ===== Exact supplied Amaron HTML/CSS layout integration ===== */
.di-wali-home-layout { display:flex; }
.di-wali-home-layout, .diwali-home-layout { position:relative; display:grid; grid-template-columns: 1fr 1fr; align-items:center; width:100%; height:100%; padding:2.5vh 3vw; gap:2vw; }
.di-wali-home-hero, .diwali-home-hero { min-width:0; display:flex; align-items:center; justify-content:center; height:100%; }
.di-wali-hero-img, .diwali-hero-img { display:block; width:min(100%, 720px); max-height:90vh; object-fit:contain; }
.di-wali-home-cards, .diwali-home-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; height:100%; max-height:94vh; overflow:hidden; }
.di-wali-home-column, .diwali-home-column { overflow:hidden; height:100%; min-height:0; }
.di-wali-home-track, .diwali-home-track { display:flex; flex-direction:column; align-items:center; gap:1rem; will-change:transform; animation-duration:25s; animation-timing-function:linear; animation-iteration-count:infinite; }
.di-wali-home-column.scroll-up .diwali-home-track { animation-name:diwaliSuppliedScrollUp; }
.di-wali-home-column.scroll-down .diwali-home-track { animation-name:diwaliSuppliedScrollDown; }
.di-wali-design, .diwali-design { display:block; width:100%; padding:0; border:1px solid transparent; border-radius:22px; overflow:hidden; background:transparent; cursor:pointer; line-height:0; }
.di-wali-design img, .diwali-design img { display:block; width:100%; height:auto; border-radius:22px; }
.di-wali-design:hover, .diwali-design:hover, .diwali-design:focus-visible { border-color:#95c93d; }
@keyframes diwaliSuppliedScrollUp { from {transform:translateY(0)} to {transform:translateY(-50%)} }
@keyframes diwaliSuppliedScrollDown { from {transform:translateY(-50%)} to {transform:translateY(0)} }
.di-wali-home-column:hover .diwali-home-track, .diwali-home-column:hover .diwali-home-track { animation-play-state:paused; }
.di-wali-sparkle-left, .diwali-sparkle-left, .diwali-sparkle-right { position:absolute; z-index:1; top:20%; width:110px; pointer-events:none; animation:diwaliSparkleOrbit 2s ease-in-out infinite; }
.di-wali-sparkle-left, .diwali-sparkle-left { left:10px; }
.di-wali-sparkle-right { right:30px; }
@keyframes diwaliSparkleOrbit { from {transform:translate(10%,10%) rotate(0deg) translateX(5%) rotate(0deg)} to {transform:translate(10%,10%) rotate(360deg) translateX(5%) rotate(-360deg)} }

/* Step 2 matches the supplied steps.html composition and styles.css dimensions. */
.di-wali-steps-panel, .diwali-steps-panel { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); align-items:center; gap:2vw; width:min(92vw,1100px); min-height:min(82vh,760px); margin:4vh auto; padding:3vh 2vw; background:rgba(0,0,0,.70); border-radius:30px; }
.di-wali-step-preview, .diwali-step-preview { display:flex; flex-direction:row-reverse; align-items:stretch; gap:10px; min-width:0; height:min(74vh,650px); }
.di-wali-preview-main, .diwali-preview-main { width:80%; min-width:0; position:relative; overflow:hidden; }
.di-wali-preview-thumbs, .diwali-preview-thumbs { position:relative; width:20%; min-width:62px; overflow:hidden; }
.di-wali-main-swiper, .diwali-main-swiper { width:100%; height:100%; }
.di-wali-main-swiper .swiper-wrapper, .diwali-main-swiper .swiper-wrapper { height:100%; }
.di-wali-main-swiper .swiper-slide, .diwali-main-swiper .swiper-slide { height:100%; display:flex; align-items:center; justify-content:center; }
.di-wali-main-swiper .swiper-slide img, .diwali-main-swiper .swiper-slide img { display:block; width:100%; height:100%; object-fit:contain; border-radius:10px; }
.di-wali-thumbs-swiper, .diwali-thumbs-swiper { position:absolute; inset:0; width:100%; height:100%; }
.di-wali-thumbs-swiper .swiper-slide, .diwali-thumbs-swiper .swiper-slide { height:auto; box-sizing:border-box; border-radius:5px; border:1px solid transparent; background:#2c4a1a; overflow:hidden; }
.di-wali-thumb-button, .diwali-thumb-button { display:block; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:pointer; }
.di-wali-thumbs-swiper img, .diwali-thumbs-swiper img { display:block; width:100%; height:100%; object-fit:cover; }
.di-wali-thumbs-swiper .swiper-slide-thumb-active, .diwali-thumbs-swiper .swiper-slide-thumb-active { border:1px solid #95c93d; }
.di-wali-step-form, .diwali-step-form { display:flex; flex-direction:column; justify-content:center; align-items:center; min-width:0; width:100%; }
.di-wali-form, .diwali-step-form .diwali-form { width:100%; max-width:42rem; padding:0 1vw; }
.di-wali-form__title, .diwali-step-form .diwali-form__title { margin:0 0 3.5rem; color:#fff; text-align:center; text-transform:uppercase; font-size:clamp(1.8rem,3vw,3rem); font-weight:400; font-style:italic; }
.di-wali-field, .diwali-step-form .diwali-field { margin:0 0 2rem; }
.di-wali-field label, .diwali-step-form .diwali-field label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.di-wali-field input, .diwali-step-form .diwali-field input { width:100%; min-height:72px; margin:0; padding:1rem 1.25rem; border:0; border-radius:12px; background:rgba(73,73,73,.7); color:#fff; font-size:1.2rem; font-style:italic; letter-spacing:.5px; }
.di-wali-field input::placeholder, .diwali-step-form .diwali-field input::placeholder { color:rgba(255,255,255,.65); }
.di-wali-submit, .diwali-step-form .diwali-submit { display:block; min-width:12rem; margin:2.5rem auto 0; padding:1rem 2.5rem; border:0; border-radius:10px; background:#80a82b; color:#fff; font-size:1.2rem; font-style:italic; cursor:pointer; }
.di-wali-submit:hover, .diwali-step-form .diwali-submit:hover { background:#95c93d; }
.di-wali-terms, .diwali-step-form .diwali-terms { margin-top:1rem; color:#fff; font-size:.85rem; }
.di-wali-error, .diwali-step-form .diwali-error { color:#ffb3b3; text-align:center; }
.di-wali-screen--form, .diwali-screen--form { min-height:100vh; overflow:auto; background-image:var(--diwali-bg-steps); background-position:center; background-size:cover; background-repeat:no-repeat; }
.di-wali-screen--select, .diwali-screen--select { min-height:100vh; overflow:hidden; background-image:var(--diwali-bg); background-position:center; background-size:cover; background-repeat:no-repeat; }
.di-wali-screen--result, .diwali-screen--result { min-height:100vh; }
@media (max-width:900px) {
 .diwali-home-layout { grid-template-columns:1fr 1fr; padding:2vh 2vw; gap:1vw; }
 .diwali-home-cards { gap:6px; }
 .diwali-steps-panel { width:94vw; grid-template-columns:minmax(0,1fr) minmax(280px,1fr); gap:12px; padding:2vh 2vw; }
 .diwali-step-preview { height:60vh; }
 .diwali-form__title { margin-bottom:2rem; }
 .diwali-step-form .diwali-field input { min-height:58px; font-size:1rem; }
}
@media (max-width:640px) {
 .diwali-home-layout { grid-template-columns:1fr; grid-template-rows:40vh 1fr; padding:2vh 3vw; }
 .diwali-home-hero { height:100%; }
 .diwali-hero-img { max-height:38vh; width:90%; }
 .diwali-home-cards { height:52vh; max-height:52vh; }
 .diwali-sparkle-left,.diwali-sparkle-right { width:52px; top:0; }
 .diwali-steps-panel { display:flex; flex-direction:column; width:100%; min-height:100vh; margin:0; padding:3vh 5vw; border-radius:0; }
 .diwali-step-preview { width:100%; height:38vh; max-height:320px; }
 .diwali-step-form { flex:1; }
 .diwali-form__title { font-size:1.7rem; margin:1rem 0 2rem; }
 .diwali-step-form .diwali-field { margin-bottom:1.2rem; }
 .diwali-step-form .diwali-field input { min-height:54px; }
 .diwali-step-form .diwali-submit { margin-top:1rem; }
}
@media (prefers-reduced-motion:reduce) {
 .diwali-home-track,.diwali-sparkle-left,.diwali-sparkle-right { animation:none!important; }
}


/* ============================================================
   SOURCE DESIGN FIDELITY PATCH
   Mirrors the supplied index.html + steps.html + styles.css.
   Scoped to the Drupal campaign so the surrounding site is untouched.
   ============================================================ */
.diwali {
  --diwali-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}
.diwali .diwali-screen--select {
  background-image: var(--diwali-bg) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
.diwali .diwali-home-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 1.4vw !important;
  padding: 0 2.2vw !important;
}
.diwali .diwali-home-hero { justify-content: center; min-width: 0; }
.diwali .diwali-hero-img {
  width: 100% !important;
  max-width: 720px;
  max-height: 96vh !important;
  height: auto;
  object-fit: contain;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.diwali .diwali-home-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  height: 100% !important;
  max-height: 100vh !important;
  overflow: hidden;
}
.diwali .diwali-home-column {
  height: 100%;
  max-height: 100vh;
  min-height: 0;
  overflow: hidden;
}
.diwali .diwali-home-track {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0 !important;
  animation-duration: 25s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  will-change: transform;
}
.diwali .diwali-home-column.scroll-up .diwali-home-track { animation-name: scrollUp !important; }
.diwali .diwali-home-column.scroll-down .diwali-home-track { animation-name: scrollDown !important; }
.diwali .diwali-design {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0;
  line-height: 0;
  border: 1px solid transparent;
  border-radius: 23px;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
.diwali .diwali-design img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 23px;
  object-fit: contain;
}
.diwali .diwali-design:hover,
.diwali .diwali-design:focus-visible {
  border-color: #95C93D;
  box-shadow: none;
  outline: none;
}
@keyframes scrollUp {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}
@keyframes scrollDown {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}
.diwali .diwali-home-column:hover .diwali-home-track { animation-play-state: paused; }

/* Step screen: exact main-preview + narrow vertical thumb rail + form layout. */
.diwali .diwali-screen--form {
  background-image: var(--diwali-bg-steps) !important;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow-y: auto;
}
.diwali .diwali-steps-panel {
  width: min(76vw, 1280px) !important;
  min-height: min(82vh, 820px) !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr) !important;
  gap: 2vw !important;
  margin: 4vh auto !important;
  padding: 3vh 2vw !important;
  border-radius: 30px;
  background: rgba(0, 0, 0, .70);
}
.diwali .diwali-step-preview {
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  min-width: 0;
  height: min(74vh, 720px) !important;
}
.diwali .diwali-preview-main {
  position: relative;
  flex: 1 1 80%;
  width: 80%;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}
.diwali .diwali-preview-thumbs {
  position: relative;
  flex: 0 0 20%;
  width: 20%;
  min-width: 62px;
  height: 100%;
  overflow: hidden;
}
.diwali .diwali-main-swiper,
.diwali .diwali-main-swiper .swiper-wrapper,
.diwali .diwali-main-swiper .swiper-slide {
  width: 100%;
  height: 100% !important;
}
.diwali .diwali-main-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.diwali .diwali-main-swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  border-radius: 10px;
}
.diwali .diwali-thumbs-swiper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.diwali .diwali-thumbs-swiper .swiper-wrapper { align-items: stretch; }
.diwali .diwali-thumbs-swiper .swiper-slide {
  height: calc((100% - 40px) / 5) !important;
  flex-shrink: 0;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid transparent;
  overflow: hidden;
  background: #2c4a1a;
}
.diwali .diwali-thumb-button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.diwali .diwali-thumb-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.diwali .diwali-thumbs-swiper .swiper-slide-thumb-active {
  border: 1px solid #95C93D;
  opacity: 1;
}
.diwali .diwali-step-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}
.diwali .diwali-step-form .diwali-form {
  width: 100%;
  max-width: 42rem;
  padding: 0 1vw;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.diwali .diwali-step-form .diwali-form__title {
  margin: 0 0 3.5rem;
  color: #fff;
  font-family: var(--diwali-font);
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}
.diwali .diwali-step-form .diwali-field { margin: 0 0 2rem; }
.diwali .diwali-step-form .diwali-field label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.diwali .diwali-step-form .diwali-field input {
  width: 100%;
  min-height: 72px;
  margin: 0;
  padding: 1rem 1.25rem;
  border: 0;
  border-radius: 12px;
  background: rgba(73, 73, 73, .7);
  color: #fff;
  font-family: var(--diwali-font);
  font-size: 1.2rem;
  font-style: italic;
  letter-spacing: .5px;
}
.diwali .diwali-step-form .diwali-field input::placeholder { color: rgba(255,255,255,.65); }
.diwali .diwali-step-form .diwali-submit {
  display: block;
  min-width: 12rem;
  margin: 2.5rem auto 0;
  padding: 1rem 2.5rem;
  border: 0;
  border-radius: 10px;
  background: rgba(128,168,43,.85);
  color: #fff;
  font-family: var(--diwali-font);
  font-size: 1.2rem;
  font-style: italic;
  cursor: pointer;
  box-shadow: none;
}
.diwali .diwali-step-form .diwali-submit:hover { background: #80a82b; }

/* The original HTML uses Bootstrap's system font stack; retain it on controls too. */
.diwali input, .diwali button, .diwali a { font-family: var(--diwali-font); }

@media (max-width: 900px) {
  .diwali .diwali-steps-panel {
    width: 94vw !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr) !important;
    gap: 12px !important;
    padding: 2vh 2vw !important;
  }
  .diwali .diwali-step-preview { height: 60vh !important; }
}
@media (max-width: 640px) {
  .diwali .diwali-home-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: 40vh 1fr;
    padding: 2vh 3vw !important;
  }
  .diwali .diwali-hero-img { max-height: 38vh !important; width: 90% !important; }
  .diwali .diwali-home-cards { height: 52vh !important; max-height: 52vh !important; }
  .diwali .diwali-steps-panel {
    display: flex;
    flex-direction: column;
    width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 3vh 5vw !important;
    border-radius: 0;
  }
  .diwali .diwali-step-preview { width: 100%; height: 38vh !important; max-height: 320px; }
  .diwali .diwali-step-form { flex: 1; }
  .diwali .diwali-step-form .diwali-form__title { font-size: 1.7rem; margin: 1rem 0 2rem; }
  .diwali .diwali-step-form .diwali-field { margin-bottom: 1.2rem; }
  .diwali .diwali-step-form .diwali-field input { min-height: 54px; }
  .diwali .diwali-step-form .diwali-submit { margin-top: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .diwali .diwali-home-track { animation: none !important; }
}


/* Position correction: main card on the left, thumbnail rail on its right. */
.diwali .diwali-step-preview {
  flex-direction: row !important;
}


/* FINAL REFERENCE MATCH — step 2 layout, typography and sizing.
   Original HTML reference: main card first, vertical thumbnail strip on its right. */
.diwali .diwali-steps-panel {
  width: min(55vw, 1100px) !important;
  max-width: 1100px !important;
  min-height: 540px !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 2.2vw !important;
  margin: 2vh auto !important;
  padding: 2.5vh 1.8vw !important;
  align-items: center !important;
}
.diwali .diwali-step-preview {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  height: min(77vh, 620px) !important;
  max-height: 620px !important;
  min-width: 0 !important;
}
.diwali .diwali-preview-main {
  order: 1 !important;
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
}
.diwali .diwali-preview-thumbs {
  order: 2 !important;
  position: relative !important;
  inset: auto !important;
  flex: 0 0 82px !important;
  width: 82px !important;
  max-width: 82px !important;
  min-width: 82px !important;
  height: 100% !important;
  overflow: hidden !important;
}
.diwali .diwali-main-swiper,
.diwali .diwali-main-swiper .swiper-wrapper,
.diwali .diwali-main-swiper .swiper-slide {
  width: 100% !important;
  height: 100% !important;
}
.diwali .diwali-main-swiper .swiper-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 10px !important;
}
.diwali .diwali-thumbs-swiper {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
}
.diwali .diwali-thumbs-swiper .swiper-slide {
  width: 100% !important;
  height: calc((100% - 40px) / 5) !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  border-radius: 5px !important;
  background: #2c4a1a !important;
}
.diwali .diwali-thumb-button {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 5px !important;
}
.diwali .diwali-thumb-button img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.diwali .diwali-step-form,
.diwali .diwali-step-form .diwali-form {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}
.diwali .diwali-step-form .diwali-form__title {
  margin: 0 0 2.7rem !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: clamp(2rem, 2.5vw, 3rem) !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
  font-style: italic !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}
.diwali .diwali-step-form .diwali-field {
  width: 100% !important;
  margin: 0 0 1.8rem !important;
}
.diwali .diwali-step-form .diwali-field input {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  height: 75px !important;
  min-height: 75px !important;
  padding: 0.75rem 1.5rem !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: rgba(73, 73, 73, .7) !important;
  color: #fff !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 1.25rem !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: .5px !important;
  line-height: 1.4 !important;
}
.diwali .diwali-step-form .diwali-field input::placeholder {
  color: rgba(255,255,255,.65) !important;
  opacity: 1 !important;
}
.diwali .diwali-step-form .diwali-submit {
  min-width: 12rem !important;
  min-height: 64px !important;
  margin: 2rem auto 0 !important;
  padding: .85rem 2rem !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 500 !important;
  font-style: italic !important;
}
@media (max-width: 1100px) {
  .diwali .diwali-steps-panel {
    width: 90vw !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  .diwali .diwali-step-preview { height: min(68vh, 560px) !important; }
  .diwali .diwali-preview-thumbs {
    flex-basis: 68px !important;
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
  }
}
@media (max-width: 640px) {
  .diwali .diwali-steps-panel {
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }
  .diwali .diwali-step-preview {
    height: 38vh !important;
    max-height: 320px !important;
  }
}


/* Validation messages: match the supplied HTML's system-font styling. */
.diwali .diwali-step-form .diwali-field__error {
  display: block;
  width: 100%;
  margin: 7px 2px 0 !important;
  padding: 0 !important;
  color: #ff8a6b !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.4 !important;
  letter-spacing: .5px !important;
  text-align: left !important;
  text-transform: none !important;
}
.diwali .diwali-step-form .diwali-field__error:empty {
  display: none !important;
}


/* Exact source HTML sparkle treatment: only the two supplied image elements
   are rendered on the landing page. Do not render the additional twinkle spans. */
.diwali .diwali-twinkle {
  display: none !important;
  animation: none !important;
  background: none !important;
}
.diwali .diwali-sparkle-left,
.diwali .diwali-sparkle-right {
  position: absolute !important;
  top: 20% !important;
  width: 151px !important;
  max-width: 100% !important;
  height: auto !important;
  z-index: 1 !important;
  pointer-events: none !important;
  animation: diwaliSourceMoveUpDown 2s ease-in-out infinite !important;
}
.diwali .diwali-sparkle-left { left: 10px !important; right: auto !important; }
.diwali .diwali-sparkle-right { right: 30px !important; left: auto !important; }
@keyframes diwaliSourceMoveUpDown {
  from { transform: translate(10%, 10%) rotate(0deg) translateX(5%) rotate(0deg); }
  to { transform: translate(10%, 10%) rotate(360deg) translateX(5%) rotate(-360deg); }
}
@media screen and (max-width: 767.98px) {
  .diwali .diwali-sparkle-left,
  .diwali .diwali-sparkle-right {
    width: 50px !important;
    top: 0 !important;
  }
  .diwali .diwali-sparkle-left { left: 10px !important; }
  .diwali .diwali-sparkle-right { right: 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .diwali .diwali-sparkle-left,
  .diwali .diwali-sparkle-right { animation: none !important; }
}


/* Loading screen: five-second countdown and original animated sparkle asset. */
.diwali .diwali-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px;
  text-align: center;
}
.diwali .diwali-loading__text {
  width: min(94%, 1100px);
  margin: 0;
  color: #fff !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: clamp(25px, 3.2vw, 48px) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  line-height: 1.2 !important;
  letter-spacing: .2px;
  text-align: center;
  text-transform: uppercase;
  animation: none !important;
}
.diwali .diwali-loading__sparkle {
  display: block;
  width: 151px;
  height: 296px;
  max-width: 35vw;
  object-fit: contain;
  margin: 0 auto;
  animation: diwaliLoadingSparkle 2s ease-in-out infinite;
}
@keyframes diwaliLoadingSparkle {
  from { transform: translate(10%, 10%) rotate(0deg) translateX(5%) rotate(0deg); }
  to { transform: translate(10%, 10%) rotate(360deg) translateX(5%) rotate(-360deg); }
}
@media (max-width: 767.98px) {
  .diwali .diwali-loading__text { font-size: clamp(21px, 5.5vw, 32px) !important; }
  .diwali .diwali-loading__sparkle { width: 110px; height: auto; max-height: 34vh; }
}
@media (prefers-reduced-motion: reduce) {
  .diwali .diwali-loading__sparkle { animation: none !important; }
}


/* Final result screen: match the supplied steps.html step-3 layout. */
.diwali .diwali-screen--result {
  overflow-y: auto !important;
  background-image: var(--diwali-bg-steps) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
.diwali .diwali-result.result-step {
  position: relative !important;
  inset: auto !important;
  width: min(100%, 1120px);
  min-height: 100%;
  margin: 0 auto;
  padding: 2.5vh 3vw 4vh;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2.8vh !important;
  overflow: visible !important;
}
.diwali .diwali-result__title {
  width: 100%;
  margin: 0;
  color: #fff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: clamp(26px, 3.2vw, 46px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}
.diwali .diwali-result__content {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, .9fr);
  align-items: center;
  justify-items: center;
  gap: clamp(28px, 6vw, 88px);
}
.diwali .diwali-result__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}
.diwali .diwali-result-card {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 430px);
  max-height: 68vh;
  object-fit: contain;
  border-radius: 24px;
  box-shadow: none;
  animation: diwali-pop .55s cubic-bezier(.2, .8, .2, 1) both;
}
.diwali .diwali-result__actions {
  width: min(100%, 390px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: clamp(24px, 4vh, 44px);
}
.diwali .diwali-result__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  min-height: 78px;
  padding: 14px 24px;
  border: 0;
  border-radius: 12px;
  background: rgba(128, 168, 43, .72);
  color: #fff !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: clamp(20px, 2.1vw, 29px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.diwali .diwali-result__action:hover,
.diwali .diwali-result__action:focus-visible {
  background: rgba(128, 168, 43, 1);
  color: #fff !important;
  transform: translateY(-2px);
  outline: none;
}
.diwali .diwali-result__action img {
  display: inline-block;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  object-fit: contain;
}
@media (max-width: 767.98px) {
  .diwali .diwali-result.result-step {
    justify-content: flex-start !important;
    padding: 4vh 5vw;
    gap: 3vh !important;
  }
  .diwali .diwali-result__title {
    font-size: clamp(22px, 6vw, 32px);
  }
  .diwali .diwali-result__content {
    grid-template-columns: minmax(0, 1fr);
    gap: 3vh;
  }
  .diwali .diwali-result-card {
    max-height: 48vh;
    max-width: min(76vw, 340px);
  }
  .diwali .diwali-result__actions {
    width: min(100%, 340px);
    gap: 14px;
  }
  .diwali .diwali-result__action {
    min-height: 58px;
    font-size: 20px;
  }
}
/* ============================================================
   CLAUDE PROMPT — RESPONSIVE DESIGN / VISUAL CONSISTENCY UPDATE
   UI typography uses the bundled Inter font; existing card artwork fonts and
   the PNG generation workflow are intentionally unchanged.
   ============================================================ */
.diwali {
  --diwali-font: 'Diwali Sans', 'Inter', sans-serif !important;
  --diwali-step-panel: rgba(0, 0, 0, .72);
  font-family: 'Diwali Sans', 'Inter', sans-serif !important;
}
.diwali, .diwali * { font-family: 'Diwali Sans', 'Inter', sans-serif !important; }

/* Landing: use the available hero area on wide screens and avoid an undersized
   contain box. Keep the existing background artwork unchanged. */
.diwali .diwali-home-layout {
  width: 100% !important; height: 100% !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 1vw !important; padding: 0 1.2vw !important;
  align-items: center !important;
}
.diwali .diwali-home-hero {
  width: 100% !important; height: 100% !important; min-width: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  overflow: hidden;
}
.diwali .diwali-hero-img {
  display: block !important; width: min(100%, 96vh) !important;
  height: min(96vh, 100%) !important; max-width: none !important; max-height: none !important;
  aspect-ratio: 1 / 1; object-fit: contain !important;
  margin: 0 auto !important;
}
.diwali .diwali-home-cards {
  width: 100% !important; min-width: 0 !important; height: 100% !important;
  max-height: 100vh !important; overflow: hidden !important;
}
/* The right-side sparkle sat on top of the moving cards; retain only the
   decorative sparkle beside the hero. */
.diwali .diwali-sparkle-right { display: none !important; }
.diwali .diwali-mobile-cards { display: none !important; }

/* Form step: centered panel, aligned preview/thumbnail rail and compact inputs. */
.diwali .diwali-screen--form {
  display: none; overflow-y: auto !important;
  background-image: var(--diwali-bg-steps) !important;
  background-position: center !important; background-size: cover !important;
}
.diwali .diwali-screen--form.is-active { display: block !important; }
.diwali .diwali-steps-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: center !important; justify-items: stretch !important;
  gap: clamp(18px, 2.5vw, 42px) !important;
  width: min(92vw, 1380px) !important; max-width: 1380px !important;
  min-height: min(84vh, 850px) !important;
  margin: 3vh auto !important; padding: clamp(18px, 2.5vh, 30px) clamp(18px, 2.5vw, 40px) !important;
  border-radius: 28px !important; background: var(--diwali-step-panel) !important;
}
.diwali .diwali-step-preview {
  display: flex !important; flex-direction: row !important; align-items: stretch !important;
  justify-content: center !important; gap: 12px !important;
  width: 100% !important; height: min(72vh, 680px) !important;
  max-height: 680px !important; min-width: 0 !important;
}
.diwali .diwali-preview-main {
  order: 1 !important; flex: 1 1 auto !important; width: auto !important;
  min-width: 0 !important; height: 100% !important; overflow: hidden !important;
}
.diwali .diwali-preview-thumbs {
  order: 2 !important; position: relative !important; inset: auto !important;
  flex: 0 0 clamp(58px, 7vw, 92px) !important;
  width: clamp(58px, 7vw, 92px) !important; min-width: 0 !important;
  max-width: 92px !important; height: 100% !important; overflow: hidden !important;
}
.diwali .diwali-main-swiper, .diwali .diwali-main-swiper .swiper-wrapper,
.diwali .diwali-main-swiper .swiper-slide { width: 100% !important; height: 100% !important; }
.diwali .diwali-main-swiper .swiper-slide { display: flex !important; align-items: center !important; justify-content: center !important; }
.diwali .diwali-main-swiper .swiper-slide img {
  display: block !important; width: 100% !important; height: 100% !important;
  object-fit: contain !important; border-radius: 12px !important;
}
.diwali .diwali-thumbs-swiper { position: relative !important; inset: auto !important; width: 100% !important; height: 100% !important; }
.diwali .diwali-thumbs-swiper .swiper-wrapper { align-items: stretch !important; }
.diwali .diwali-thumbs-swiper .swiper-slide {
  width: 100% !important; height: calc((100% - 40px) / 5) !important;
  flex-shrink: 0 !important; overflow: hidden !important; border-radius: 6px !important;
  background: transparent !important; border: 1px solid transparent !important;
}
.diwali .diwali-thumb-button, .diwali .diwali-thumb-button img {
  display: block !important; width: 100% !important; height: 100% !important;
}
.diwali .diwali-thumb-button { padding: 0 !important; border: 0 !important; background: transparent !important; }
.diwali .diwali-thumb-button img { object-fit: cover !important; }
.diwali .diwali-thumbs-swiper .swiper-slide-thumb-active { border-color: #95c93d !important; }
.diwali .diwali-step-form {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 100% !important; min-width: 0 !important;
}
.diwali .diwali-step-form .diwali-form {
  width: 100% !important; max-width: 620px !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
}
.diwali .diwali-step-form .diwali-form__title {
  margin: 0 0 clamp(22px, 3vh, 38px) !important;
  color: #fff !important; font-family: 'Diwali Sans', 'Inter', sans-serif !important;
  font-size: clamp(22px, 2.1vw, 30px) !important; font-weight: 400 !important;
  font-style: italic !important; line-height: 1.2 !important;
  letter-spacing: 0 !important; text-align: center !important; text-transform: uppercase !important;
}
.diwali .diwali-step-form .diwali-field { width: 100% !important; margin: 0 0 16px !important; }
.diwali .diwali-step-form .diwali-field input {
  box-sizing: border-box !important; display: block !important; width: 100% !important;
  height: 58px !important; min-height: 58px !important; margin: 0 !important;
  padding: 0 20px !important; border: 0 !important; border-radius: 12px !important;
  background: rgba(73, 73, 73, .78) !important; color: #fff !important;
  font-family: 'Diwali Sans', 'Inter', sans-serif !important;
  font-size: 17px !important; font-style: italic !important; font-weight: 400 !important;
  letter-spacing: .2px !important; line-height: 1.2 !important;
}
.diwali .diwali-step-form .diwali-field input::placeholder { color: rgba(255,255,255,.72) !important; opacity: 1 !important; }
.diwali .diwali-step-form .diwali-field__error {
  margin: 5px 2px 0 !important; font-family: 'Diwali Sans', 'Inter', sans-serif !important;
  font-size: 13px !important; line-height: 1.35 !important;
}
.diwali .diwali-step-form .diwali-terms { margin: 8px 0 16px !important; font-size: 13px !important; }
.diwali .diwali-step-form .diwali-submit {
  display: block !important; width: min(100%, 320px) !important; min-height: 54px !important;
  margin: 14px auto 0 !important; padding: 12px 20px !important;
  border: 0 !important; border-radius: 10px !important;
  background: rgba(128, 168, 43, .9) !important; color: #fff !important;
  font-family: 'Diwali Sans', 'Inter', sans-serif !important; font-size: 18px !important;
}

/* Countdown: same centered dark panel, same overall panel height as the form. */
.diwali .diwali-screen--loading {
  overflow: auto !important; background-image: var(--diwali-bg-steps) !important;
  background-position: center !important; background-size: cover !important;
}
.diwali .diwali-loading {
  position: relative !important; inset: auto !important;
  width: min(92vw, 1380px) !important; min-height: min(84vh, 850px) !important;
  margin: 3vh auto !important; padding: clamp(22px, 4vh, 48px) !important;
  display: flex !important; flex-direction: column !important; align-items: center !important;
  justify-content: center !important; gap: 24px !important;
  border-radius: 28px !important; background: var(--diwali-step-panel) !important;
}
.diwali .diwali-loading__text {
  width: min(100%, 1100px) !important; margin: 0 !important; color: #fff !important;
  font-family: 'Diwali Sans', 'Inter', sans-serif !important;
  font-size: clamp(22px, 3vw, 42px) !important; font-weight: 400 !important;
  font-style: italic !important; line-height: 1.2 !important; text-align: center !important;
}
.diwali .diwali-loading__sparkle { width: 125px !important; height: 245px !important; max-width: 28vw !important; max-height: 34vh !important; object-fit: contain !important; }

/* Final result: same panel colour/height, centered card and centered actions. */
.diwali .diwali-screen--result {
  overflow-y: auto !important; background-image: var(--diwali-bg-steps) !important;
  background-position: center !important; background-size: cover !important;
}
.diwali .diwali-result.result-step {
  position: relative !important; inset: auto !important;
  width: min(92vw, 1380px) !important; min-height: min(84vh, 850px) !important;
  margin: 3vh auto !important; padding: clamp(20px, 3vh, 34px) clamp(18px, 3vw, 44px) !important;
  display: flex !important; flex-direction: column !important; align-items: center !important;
  justify-content: center !important; gap: 24px !important; overflow: visible !important;
  border-radius: 28px !important; background: var(--diwali-step-panel) !important;
}
.diwali .diwali-result__title {
  width: 100% !important; margin: 0 !important; color: #fff !important;
  font-family: 'Diwali Sans', 'Inter', sans-serif !important;
  font-size: clamp(22px, 2.7vw, 38px) !important; font-weight: 400 !important;
  font-style: italic !important; line-height: 1.2 !important; text-align: center !important;
}
.diwali .diwali-result__content {
  width: 100% !important; display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(250px, .8fr) !important;
  align-items: center !important; justify-items: center !important;
  gap: clamp(22px, 5vw, 72px) !important;
}
.diwali .diwali-result__preview { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.diwali .diwali-result-card {
  display: block !important; width: auto !important; height: auto !important;
  max-width: min(100%, 390px) !important; max-height: 62vh !important;
  object-fit: contain !important; border-radius: 20px !important; box-shadow: none !important;
}
.diwali .diwali-result__actions {
  width: min(100%, 380px) !important; display: flex !important;
  flex-direction: column !important; align-items: stretch !important;
  justify-content: center !important; gap: clamp(14px, 2.5vh, 26px) !important;
}
.diwali .diwali-result__action {
  width: 100% !important; min-height: 64px !important; padding: 12px 20px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 14px !important; border: 0 !important; border-radius: 12px !important;
  background: rgba(128, 168, 43, .82) !important; color: #fff !important;
  font-family: 'Diwali Sans', 'Inter', sans-serif !important;
  font-size: clamp(18px, 1.8vw, 25px) !important; font-style: italic !important;
  text-decoration: none !important;
}
.diwali .diwali-result__action img { width: 30px !important; height: 30px !important; object-fit: contain !important; }

/* Tablet: preserve the side-by-side preview/form while shrinking the rail and controls. */
@media (min-width: 768px) and (max-width: 1100px) {
  .diwali .diwali-steps-panel { width: 96vw !important; gap: 16px !important; padding: 18px !important; }
  .diwali .diwali-step-preview { height: 58vh !important; }
  .diwali .diwali-preview-thumbs { flex-basis: 58px !important; width: 58px !important; }
  .diwali .diwali-step-form .diwali-form__title { font-size: 21px !important; margin-bottom: 18px !important; }
  .diwali .diwali-step-form .diwali-field input { height: 50px !important; min-height: 50px !important; font-size: 15px !important; }
}

/* Mobile landing: square hero without gutters, then five cards in one
   horizontal right-to-left infinite row. */
@media (max-width: 767.98px) {
  .diwali .diwali-screen--select { overflow: hidden !important; }
  .diwali .diwali-home-layout {
    display: flex !important; flex-direction: column !important; justify-content: flex-start !important;
    align-items: stretch !important; gap: 0 !important; padding: 0 !important;
  }
  .diwali .diwali-home-hero {
    flex: 0 0 auto !important; width: 100vw !important; height: auto !important;
    max-height: 62vh !important; margin: 0 !important; padding: 0 !important;
  }
  .diwali .diwali-hero-img {
    width: 100vw !important; height: auto !important; max-width: none !important;
    max-height: 62vh !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important;
  }
  .diwali .diwali-home-cards { display: none !important; }
  .diwali .diwali-mobile-cards {
    display: block !important; width: 100vw !important; height: 29vh !important;
    max-height: 250px !important; margin: 0 !important; padding: 8px 0 !important;
    overflow: hidden !important; position: relative !important;
  }
  .diwali .diwali-mobile-cards__track {
    display: flex !important; flex-flow: row nowrap !important; align-items: center !important;
    gap: 0 !important; width: max-content !important; height: 100% !important;
    animation: diwaliMobileMarquee 28s linear infinite !important; will-change: transform !important;
  }
  .diwali .diwali-mobile-design {
    display: block !important; flex: 0 0 29vw !important; width: 29vw !important;
    height: 100% !important; max-height: 220px !important; margin: 0 12px 0 0 !important;
    padding: 0 !important; border: 0 !important; border-radius: 12px !important;
    overflow: hidden !important; line-height: 0 !important;
  }
  .diwali .diwali-mobile-design img {
    display: block !important; width: 100% !important; height: 100% !important;
    object-fit: contain !important; border-radius: 12px !important;
  }
  .diwali .diwali-mobile-cards:active .diwali-mobile-cards__track { animation-play-state: paused !important; }
  .diwali .diwali-sparkle-left { width: 42px !important; top: 2% !important; left: 8px !important; }
  .diwali .diwali-steps-panel {
    display: flex !important; flex-direction: column !important; align-items: stretch !important;
    width: 94vw !important; min-height: 0 !important; height: auto !important;
    margin: 10px auto !important; padding: 12px !important; gap: 12px !important;
    border-radius: 18px !important; background: var(--diwali-step-panel) !important;
  }
  .diwali .diwali-step-preview {
    width: 100% !important; height: 27vh !important; max-height: 235px !important;
    min-height: 170px !important; gap: 8px !important;
  }
  .diwali .diwali-preview-main { flex: 1 1 auto !important; width: auto !important; }
  .diwali .diwali-preview-thumbs {
    flex: 0 0 54px !important; width: 54px !important; max-width: 54px !important;
  }
  .diwali .diwali-thumbs-swiper .swiper-slide { height: calc((100% - 32px) / 5) !important; }
  .diwali .diwali-step-form { width: 100% !important; flex: 0 0 auto !important; }
  .diwali .diwali-step-form .diwali-form { width: 100% !important; padding: 0 !important; }
  .diwali .diwali-step-form .diwali-form__title {
    white-space: nowrap !important; font-size: clamp(15px, 4vw, 20px) !important;
    margin: 2px 0 12px !important; line-height: 1.15 !important;
  }
  .diwali .diwali-step-form .diwali-field { margin: 0 0 10px !important; }
  .diwali .diwali-step-form .diwali-field input {
    height: 46px !important; min-height: 46px !important; padding: 0 14px !important;
    border-radius: 9px !important; font-size: 14px !important;
  }
  .diwali .diwali-step-form .diwali-field__error { font-size: 11px !important; margin-top: 3px !important; }
  .diwali .diwali-step-form .diwali-terms { margin: 5px 0 10px !important; font-size: 11px !important; gap: 7px !important; }
  .diwali .diwali-step-form .diwali-terms__input { width: 15px !important; height: 15px !important; }
  .diwali .diwali-step-form .diwali-submit {
    width: 100% !important; min-height: 46px !important; margin: 8px auto 0 !important;
    padding: 9px 14px !important; font-size: 16px !important;
  }
  .diwali .diwali-screen--loading { overflow-y: auto !important; }
  .diwali .diwali-loading {
    width: 94vw !important; min-height: 0 !important; height: 70vh !important;
    margin: 10px auto !important; padding: 18px 14px !important; gap: 16px !important;
    border-radius: 18px !important; background: var(--diwali-step-panel) !important;
  }
  .diwali .diwali-loading__text {
    width: 100% !important; font-size: clamp(17px, 4.8vw, 23px) !important;
    line-height: 1.25 !important;
  }
  .diwali .diwali-loading__sparkle {
    width: 82px !important; height: 160px !important; max-width: 30vw !important; max-height: 25vh !important;
  }
  .diwali .diwali-result.result-step {
    width: 94vw !important; min-height: 0 !important; height: auto !important;
    margin: 10px auto !important; padding: 16px 14px !important; gap: 14px !important;
    border-radius: 18px !important; background: var(--diwali-step-panel) !important;
  }
  .diwali .diwali-result__title { font-size: clamp(17px, 4.5vw, 23px) !important; line-height: 1.2 !important; }
  .diwali .diwali-result__content {
    display: flex !important; flex-direction: column !important; align-items: center !important;
    gap: 14px !important; width: 100% !important;
  }
  .diwali .diwali-result-card { max-width: min(62vw, 260px) !important; max-height: 38vh !important; }
  .diwali .diwali-result__actions { width: min(100%, 300px) !important; gap: 9px !important; }
  .diwali .diwali-result__action { min-height: 46px !important; padding: 8px 14px !important; font-size: 16px !important; gap: 10px !important; }
  .diwali .diwali-result__action img { width: 23px !important; height: 23px !important; }
}
@keyframes diwaliMobileMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .diwali .diwali-mobile-cards__track { animation: none !important; }
}


/* LOGO: use the supplied transparent logo image directly; do not recolour it through a CSS mask. */
.diwali .diwali-mark {
  background-color: transparent !important;
  background-image: var(--diwali-logo) !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: contain !important;
  -webkit-mask: none !important;
  mask: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* STEP 2 — desktop: tighten the panel and bring the thumbnail rail beside the card. */
@media (min-width: 768px) {
  .diwali .diwali-steps-panel {
    width: min(96vw, 1640px) !important;
    max-width: 1640px !important;
    min-height: min(82vh, 760px) !important;
    margin: 2vh auto !important;
    padding: clamp(18px, 2.2vh, 26px) clamp(20px, 2vw, 34px) !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: clamp(18px, 2vw, 32px) !important;
    row-gap: 0 !important;
    align-items: center !important;
  }
  .diwali .diwali-step-preview {
    width: 100% !important;
    height: min(76vh, 650px) !important;
    max-height: 650px !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 10px !important;
    overflow: hidden !important;
  }
  .diwali .diwali-preview-main {
    flex: 0 1 460px !important;
    width: auto !important;
    max-width: calc(100% - 94px) !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .diwali .diwali-preview-thumbs {
    flex: 0 0 82px !important;
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    margin: 0 !important;
  }
  .diwali .diwali-step-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-self: center !important;
    justify-self: stretch !important;
    margin: 0 !important;
  }
  .diwali .diwali-step-form .diwali-form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  .diwali .diwali-step-form .diwali-form__title {
    width: 100% !important;
    margin: 0 0 clamp(20px, 3vh, 34px) !important;
    text-align: center !important;
  }
  .diwali .diwali-step-form .diwali-field {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* STEP 2 — mobile: give the card preview more width and add breathing room above the title. */
@media (max-width: 767.98px) {
  .diwali .diwali-steps-panel {
    width: 96vw !important;
    margin: 12px auto !important;
    padding: 14px 12px 16px !important;
    gap: 10px !important;
  }
  .diwali .diwali-step-preview {
    width: 100% !important;
    height: 31vh !important;
    max-height: 250px !important;
    min-height: 190px !important;
    gap: 6px !important;
    justify-content: flex-start !important;
  }
  .diwali .diwali-preview-main {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  .diwali .diwali-preview-thumbs {
    flex: 0 0 46px !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
  }
  .diwali .diwali-step-form {
    margin-top: 12px !important;
    width: 100% !important;
  }
  .diwali .diwali-step-form .diwali-form__title {
    margin: 0 0 12px !important;
    padding-top: 2px !important;
    text-align: center !important;
  }
}


/* DESKTOP — keep the step screens centered and prevent the content from
   stretching edge-to-edge. The two-column preview/form needs a wider outer
   stage; the editable form column itself is capped at 800px. */
@media (min-width: 768px) {
  .diwali .diwali-screen--form,
  .diwali .diwali-screen--loading,
  .diwali .diwali-screen--result {
    background-position: center center !important;
  }

  .diwali .diwali-steps-panel {
    width: min(94vw, 1400px) !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .diwali .diwali-step-form {
    width: 100% !important;
    max-width: 800px !important;
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .diwali .diwali-step-form .diwali-form {
    width: 100% !important;
    max-width: 800px !important;
  }

  .diwali .diwali-loading {
    width: min(92vw, 1200px) !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .diwali .diwali-result.result-step {
    width: min(92vw, 1400px) !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* MOBILE — keep the background artwork centered from step 2 onward. */
@media (max-width: 767.98px) {
  .diwali {
    background-position: center center !important;
    background-size: cover !important;
  }
  .diwali .diwali-screen--form,
  .diwali .diwali-screen--loading,
  .diwali .diwali-screen--result {
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
}


/* Desktop-only content panel width: exactly capped at 800px from Step 2 onward.
   Tablet and mobile layouts retain their existing responsive widths. */
@media screen and (min-width: 1024px) {
  .diwali .diwali-steps-panel,
  .diwali .diwali-loading,
  .diwali .diwali-result.result-step {
    width: min(94vw, 800px) !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}


/* Landing page: remove the left-side decorative sparkle only.
   The centre sparkle on the countdown/loading screen remains unchanged. */
.diwali .diwali-screen--home .diwali-sparkle-left {
  display: none !important;
}


/* LARGE DESKTOP (1920x1080 and similar): balance the preview rail and vertically
   centre the form while keeping the desktop content panel capped at 800px. */
@media screen and (min-width: 1200px) {
  .diwali .diwali-steps-panel {
    width: min(94vw, 800px) !important;
    max-width: 800px !important;
    min-height: min(82vh, 760px) !important;
    height: min(82vh, 760px) !important;
    margin: 2vh auto !important;
    padding: 28px 24px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 20px !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  /* Main card viewport and vertical thumbnail rail share one identical height. */
  .diwali .diwali-step-preview {
    width: 100% !important;
    height: min(72vh, 650px) !important;
    min-height: 520px !important;
    max-height: 650px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    overflow: hidden !important;
  }
  .diwali .diwali-preview-main {
    flex: 1 1 0 !important;
    width: auto !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .diwali .diwali-main-swiper,
  .diwali .diwali-main-swiper .swiper-wrapper,
  .diwali .diwali-main-swiper .swiper-slide {
    width: 100% !important;
    height: 100% !important;
  }
  .diwali .diwali-main-swiper .swiper-slide {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .diwali .diwali-main-swiper .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  .diwali .diwali-preview-thumbs {
    flex: 0 0 72px !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  .diwali .diwali-thumbs-swiper,
  .diwali .diwali-thumbs-swiper .swiper-wrapper {
    width: 100% !important;
    height: 100% !important;
  }
  .diwali .diwali-thumbs-swiper .swiper-slide {
    height: calc((100% - 40px) / 5) !important;
  }

  /* Centre the whole form group vertically within the same panel height. */
  .diwali .diwali-step-form {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    margin: 0 !important;
  }
  .diwali .diwali-step-form .diwali-form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .diwali .diwali-step-form .diwali-form__title {
    font-size: 24px !important;
    line-height: 1.2 !important;
    margin: 0 0 24px !important;
    text-align: center !important;
  }
  .diwali .diwali-step-form .diwali-field input {
    height: 46px !important;
    min-height: 46px !important;
    font-size: 14px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }
  .diwali .diwali-step-form .diwali-submit {
    min-height: 46px !important;
    height: 46px !important;
    font-size: 14px !important;
    padding: 8px 18px !important;
    margin-top: 14px !important;
  }
}


/* Desktop typography for the countdown and final greeting-card screens. */
@media screen and (min-width: 1024px) {
  .diwali .diwali-loading__text,
  .diwali .diwali-result__title {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }

  .diwali .diwali-result__action {
    font-size: 14px !important;
  }
}


/* Step 2 Back control. */
.diwali .diwali-form__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-height: 38px;
  margin: 0 0 12px;
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 22px;
  background: rgba(0,0,0,.28);
  color: #fff;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.diwali .diwali-form__back:hover,
.diwali .diwali-form__back:focus-visible {
  background: rgba(255,255,255,.16);
  outline: 2px solid rgba(255,255,255,.7);
  outline-offset: 2px;
}

/* Mobile card carousel: native horizontal scrolling is more consistent on iOS Safari
   than a continuously transformed max-content marquee. */
@media screen and (max-width: 767.98px) {
  .diwali .diwali-mobile-cards {
    display: flex !important;
    align-items: center !important;
    width: 100vw !important;
    height: 29vh !important;
    max-height: 250px !important;
    margin: 0 !important;
    padding: 8px 42px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    position: relative !important;
  }
  .diwali .diwali-mobile-cards__viewport {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    touch-action: pan-x;
  }
  .diwali .diwali-mobile-cards__viewport::-webkit-scrollbar {
    display: none !important;
  }
  .diwali .diwali-mobile-cards__track {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 12px !important;
    width: max-content !important;
    min-width: 100% !important;
    height: 100% !important;
    animation: none !important;
    -webkit-animation: none !important;
    transform: translate3d(0,0,0) !important;
    -webkit-transform: translate3d(0,0,0) !important;
    will-change: auto !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .diwali .diwali-mobile-design {
    display: block !important;
    flex: 0 0 29vw !important;
    width: 29vw !important;
    height: 100% !important;
    max-height: 220px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    scroll-snap-align: center;
    line-height: 0 !important;
  }
  .diwali .diwali-mobile-design img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 12px !important;
  }
  .diwali .diwali-mobile-arrow {
    display: inline-flex !important;
    position: absolute !important;
    z-index: 5 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.75) !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,.65) !important;
    color: #fff !important;
    font-size: 15px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    -webkit-appearance: none;
    appearance: none;
  }
  .diwali .diwali-mobile-arrow--prev { left: 5px !important; }
  .diwali .diwali-mobile-arrow--next { right: 5px !important; }
  .diwali .diwali-form__back {
    min-height: 34px !important;
    margin-bottom: 8px !important;
    font-size: 13px !important;
  }
}

/* Hide mobile navigation controls on tablet/desktop where the vertical card columns are used. */
@media screen and (min-width: 768px) {
  .diwali .diwali-mobile-arrow { display: none !important; }
}


/* WIDE DESKTOP OVERRIDE (screens wider than 1440px):
   remove the earlier 800px cap and restore a balanced two-column Step 2 layout. */
@media screen and (min-width: 1441px) {
  .diwali .diwali-steps-panel {
    width: min(92vw, 1400px) !important;
    max-width: 1400px !important;
    min-height: min(82vh, 760px) !important;
    height: auto !important;
    margin: 3vh auto !important;
    padding: clamp(28px, 3vw, 52px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
    column-gap: clamp(36px, 4vw, 64px) !important;
    row-gap: 24px !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  .diwali .diwali-step-preview {
    width: 100% !important;
    height: min(72vh, 650px) !important;
    min-height: 500px !important;
    max-height: 650px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 14px !important;
    min-width: 0 !important;
  }

  .diwali .diwali-preview-main {
    flex: 1 1 0 !important;
    width: auto !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .diwali .diwali-main-swiper,
  .diwali .diwali-main-swiper .swiper-wrapper,
  .diwali .diwali-main-swiper .swiper-slide {
    width: 100% !important;
    height: 100% !important;
  }

  .diwali .diwali-main-swiper .swiper-slide {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .diwali .diwali-main-swiper .swiper-slide img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .diwali .diwali-preview-thumbs {
    flex: 0 0 clamp(76px, 6vw, 100px) !important;
    width: clamp(76px, 6vw, 100px) !important;
    min-width: clamp(76px, 6vw, 100px) !important;
    max-width: clamp(76px, 6vw, 100px) !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  .diwali .diwali-thumbs-swiper,
  .diwali .diwali-thumbs-swiper .swiper-wrapper {
    width: 100% !important;
    height: 100% !important;
  }

  .diwali .diwali-thumbs-swiper .swiper-slide {
    height: calc((100% - 40px) / 5) !important;
  }

  .diwali .diwali-step-form {
    width: 100% !important;
    max-width: 680px !important;
    height: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: center !important;
    margin: 0 !important;
  }

  .diwali .diwali-step-form .diwali-form {
    width: 100% !important;
    max-width: 680px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .diwali .diwali-step-form .diwali-form__title {
    font-size: 24px !important;
    line-height: 1.2 !important;
    margin: 0 0 28px !important;
    text-align: center !important;
  }

  .diwali .diwali-step-form .diwali-field input {
    min-height: 46px !important;
    height: 46px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }

  .diwali .diwali-step-form .diwali-submit {
    min-height: 46px !important;
    height: 46px !important;
    font-size: 14px !important;
  }

  /* The other post-selection screens should also expand beyond the old 800px cap. */
  .diwali .diwali-loading {
    width: min(90vw, 1200px) !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .diwali .diwali-result.result-step {
    width: min(92vw, 1400px) !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}