/* ============ FESTIVE OFFER ============
   Only ever active under body.fest-on, which public/js/offer.js adds while the
   server says the offer is running and removes the moment it ends. Nothing in
   here styles the page outside that window. */

:root { --fest-ribbon-h: 46px; --fest-toran-h: 28px; }

/* The ribbon and the toran hanging from it sit above the fixed navbar; the page
   and the navbar move down by exactly their height, so the garland never falls
   across the logo or the links. */
body.fest-ribbon-shown { padding-top: calc(var(--fest-ribbon-h) + var(--fest-toran-h)); }
body.fest-ribbon-shown .navbar { top: calc(var(--fest-ribbon-h) + var(--fest-toran-h)); }

.fest-ribbon {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--fest-ribbon-h);
  font-family: var(--font-display);
  color: #fff3d6;
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,236,190,.16) 50%, rgba(255,255,255,0) 100%) -60% 0 / 40% 100% no-repeat,
    linear-gradient(90deg, #3d0f0a 0%, #7c2410 22%, #b5410f 50%, #7c2410 78%, #3d0f0a 100%);
  border-bottom: 1px solid rgba(240, 223, 175, .45);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  animation: fest-sheen 6s linear infinite;
}
.fest-ribbon[hidden] { display: none; }
.fest-ribbon-in {
  height: 100%; display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 0 48px 0 16px; font-size: .78rem; letter-spacing: 1.6px; text-transform: uppercase; white-space: nowrap;
}
.fest-ribbon-diya { width: 22px; height: 24px; flex: none; }
.fest-msg strong { color: #ffd27a; font-weight: 700; }
.fest-msg-short { display: none; }
.fest-count { color: #ffe7b0; font-family: var(--font-body); font-size: .95rem; letter-spacing: .5px; text-transform: none; }
.fest-count b { font-family: var(--font-display); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.fest-go {
  color: #1c0a02; text-decoration: none; font-weight: 700; letter-spacing: 1.4px;
  background: linear-gradient(90deg, #ffd27a, #ffb627); padding: 6px 14px; border-radius: 999px;
  box-shadow: 0 0 16px rgba(255, 182, 39, .45);
}
.fest-go:hover { filter: brightness(1.08); }
.fest-x {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0, 0, 0, .25); color: #ffe7b0; font-size: 20px; line-height: 1;
}
.fest-x:hover { background: rgba(0, 0, 0, .45); }

/* The toran hangs from the ribbon's lower edge. Decorative only. */
.fest-toran { position: absolute; left: 0; right: 0; top: 100%; height: var(--fest-toran-h); pointer-events: none; overflow: hidden; }
.fest-toran-svg { display: block; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }

/* Hero chip, above the eyebrow on the homepage. */
.fest-chip {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 auto 22px;
  padding: 8px 18px 8px 10px; border-radius: 999px; text-decoration: none;
  font-family: var(--font-display); font-size: .74rem; letter-spacing: 2px; text-transform: uppercase;
  color: #ffe2a3; background: rgba(181, 65, 15, .18); border: 1px solid rgba(255, 182, 39, .55);
  box-shadow: 0 0 24px rgba(255, 138, 31, .18);
}
.fest-chip:hover { background: rgba(181, 65, 15, .3); }
.fest-chip-diya { width: 20px; height: 22px; display: inline-block; }

/* Package picker while the offer runs. */
.fest-head { position: relative; }
.fest-diya { position: absolute; top: 34px; width: 54px; height: 58px; pointer-events: none; }
.fest-diya-l { left: calc(50% - 360px); }
.fest-diya-r { right: calc(50% - 360px); }
.fest-tag {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-family: var(--font-display); font-size: .72rem; letter-spacing: 2px; text-transform: uppercase;
  color: #ffd27a;
}
.fest-tag-diya { width: 18px; height: 20px; display: inline-block; }
.fest-pz .pz-now { color: #ffd27a; text-shadow: 0 0 22px rgba(255, 160, 40, .35); }
.fest-pz .pz-now sup { color: #ffb627; }
.fest-pz .pz-was { text-decoration-color: rgba(248, 113, 113, .9); }
.fest-pz .pz-buy { border-radius: 16px; }

/* Diya flame. */
.fest-flame { transform-box: fill-box; transform-origin: 50% 90%; animation: fest-flicker 1.7s ease-in-out infinite; }
.fest-glow { animation: fest-glow 2.4s ease-in-out infinite; }

@keyframes fest-flicker {
  0%, 100% { transform: scale(1, 1) rotate(0deg); }
  25% { transform: scale(.94, 1.08) rotate(-3deg); }
  55% { transform: scale(1.05, .95) rotate(2deg); }
  80% { transform: scale(.97, 1.04) rotate(-1deg); }
}
@keyframes fest-glow { 0%, 100% { opacity: .16; } 50% { opacity: .3; } }
@keyframes fest-sheen { 0% { background-position: -60% 0, 0 0; } 100% { background-position: 160% 0, 0 0; } }

@media (max-width: 900px) {
  .fest-msg-long { display: none; }
  .fest-msg-short { display: inline; }
  .fest-diya { display: none; }
}
/* A phone has room for the name, the discount and the clock — nothing else.
   Left-aligned so the text starts where the eye does, and clear of the ×. */
@media (max-width: 560px) {
  .fest-ribbon-in { justify-content: flex-start; gap: 8px; padding: 0 44px 0 12px; font-size: .6rem; letter-spacing: .6px; overflow: hidden; }
  .fest-ribbon-diya, .fest-go, .fest-count-label { display: none; }
  .fest-count { font-size: .74rem; margin-left: auto; }
  .fest-count b { letter-spacing: 0; }
  .fest-x { right: 6px; width: 28px; height: 28px; font-size: 18px; }
  .fest-chip { font-size: .62rem; letter-spacing: 1.2px; }
}
@media (prefers-reduced-motion: reduce) {
  .fest-ribbon, .fest-flame, .fest-glow { animation: none; }
}