/* Festival wish strip: customer pages and the preview in Admin → Wishes. */
.wish {
  --wish-bg: #fff;
  --wish-title: var(--ink);
  --wish-text: var(--muted);
  --wish-close-bg: #F1F2F6;
  --wish-close-fg: var(--ink);
  --wish-frame: #fff;
  position: relative;
  background: var(--wish-bg);
  color: var(--wish-text);
}
.wish-in {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 78px; padding: 11px 46px 11px 0;
}
.wish-art { flex: none; width: 54px; height: 54px; }
.wish-art svg { display: block; width: 100%; height: 100%; }
.wish-text { min-width: 0; }
.wish-title {
  margin: 0;
  font-family: var(--display); font-weight: 800; font-size: 1.22rem; line-height: 1.15;
  color: var(--wish-title);
  overflow-wrap: anywhere;
}
.wish-line { margin: 3px 0 0; font-size: .93rem; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }

/* Poster photo next to the wish (tap to see it big) */
.wish-photo {
  position: relative; flex: none; display: block;
  width: 74px; height: 74px; border-radius: 12px; overflow: hidden;
  background: rgba(255, 255, 255, .25);
  box-shadow: 0 0 0 3px var(--wish-frame), 0 8px 16px -8px rgba(0, 0, 0, .55);
}
.wish-photo img { width: 100%; height: 100%; object-fit: cover; }
.wish-zoom {
  position: absolute; right: 4px; bottom: 4px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(10, 16, 40, .62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6' fill='none' stroke='white' stroke-width='2.4'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5' stroke='white' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.wish-close {
  position: absolute; top: 9px; right: 0;
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: var(--wish-close-bg); color: var(--wish-close-fg);
  cursor: pointer;
}
.wish-close svg { width: 16px; height: 16px; }

/* A wide banner photo (like 1200 × 400) fills the whole strip */
.wish--wide .wish-in { justify-content: center; min-height: 0; padding: 10px 0; }
.wish--wide .wish-photo { width: auto; max-width: 100%; height: auto; border-radius: 12px; background: none; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .55); }
.wish--wide .wish-photo img { width: auto; max-width: 100%; height: auto; max-height: 320px; }
.wish--wide .wish-zoom { display: none; }
.wish--wide .wish-close { top: 18px; right: 8px; background: rgba(10, 16, 40, .55); color: #fff; }

@media (min-width: 720px) {
  .wish-in { gap: 18px; min-height: 96px; padding: 14px 58px 14px 0; }
  .wish-art { width: 70px; height: 70px; }
  .wish-title { font-size: 1.6rem; }
  .wish-line { font-size: 1.04rem; }
  .wish-photo { width: 104px; height: 104px; }
  .wish-close { top: 50%; transform: translateY(-50%); width: 38px; height: 38px; }
  .wish--wide .wish-close { top: 20px; transform: none; }
}

/* Styles */
.wish--dashain {
  --wish-bg: linear-gradient(115deg, #9C0D26 0%, #D7192F 55%, #E8432C 100%);
  --wish-title: #FFE07A; --wish-text: #FFF1F2;
  --wish-close-bg: rgba(255, 255, 255, .18); --wish-close-fg: #fff; --wish-frame: #FFE07A;
}
.wish--tihar {
  --wish-bg: radial-gradient(circle at 14% 130%, rgba(255, 196, 0, .35), transparent 45%), linear-gradient(115deg, #1E0B4B 0%, #3F1677 55%, #65207F 100%);
  --wish-title: #FFD54A; --wish-text: #F3E9FF;
  --wish-close-bg: rgba(255, 255, 255, .16); --wish-close-fg: #fff; --wish-frame: #FFD54A;
}
.wish--holi {
  --wish-bg: radial-gradient(circle at 6% 15%, #FFD3E6 0 34px, transparent 35px), radial-gradient(circle at 96% 85%, #CFF1DE 0 46px, transparent 47px), radial-gradient(circle at 72% 0%, #FFF0B8 0 30px, transparent 31px), radial-gradient(circle at 40% 110%, #D6E4FF 0 36px, transparent 37px), #FFFDF7;
  --wish-title: #B0125F; --wish-text: #3E3550;
  --wish-close-bg: rgba(176, 18, 95, .1); --wish-close-fg: #B0125F; --wish-frame: #fff;
  border-bottom: 1px solid #F3D7E6;
}
.wish--chhath {
  --wish-bg: linear-gradient(180deg, #FFB547 0%, #FF8A3D 62%, #F0663A 100%);
  --wish-title: #3A0D00; --wish-text: #4A1A05;
  --wish-close-bg: rgba(58, 13, 0, .12); --wish-close-fg: #3A0D00; --wish-frame: #FFF0A8;
}
.wish--celebrate {
  --wish-bg: linear-gradient(115deg, #0B2D72 0%, #1D4BA8 60%, #3159C9 100%);
  --wish-title: #FFD21F; --wish-text: #E9EEFF;
  --wish-close-bg: rgba(255, 255, 255, .16); --wish-close-fg: #fff; --wish-frame: #FFD21F;
}
.wish--simple { border-bottom: 3px solid var(--orange); }

/* Popup when the website opens (and when the poster in the strip is tapped) */
.wish-pop {
  width: min(92vw, 460px); max-width: none; max-height: 92vh; padding: 0;
  border: 0; border-radius: 22px; overflow: hidden auto;
  background: var(--wish-bg); color: var(--wish-text);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .65);
}
.wish-pop::backdrop { background: rgba(8, 20, 50, .72); }
.wish-pop:focus { outline: none; } /* the card itself takes focus when it opens */
.wish-pop[open] { animation: wish-pop-in .3s ease-out; }
@keyframes wish-pop-in {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.wish-pop-img { display: block; width: 100%; height: auto; max-height: 62vh; object-fit: contain; background: rgba(0, 0, 0, .2); }
.wish-pop-art { display: grid; place-items: center; padding: 30px 0 4px; }
.wish-pop-art svg { width: 120px; height: 120px; }
.wish-pop-body { padding: 16px 22px 22px; text-align: center; }
.wish-pop-body h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.7rem; line-height: 1.15; color: var(--wish-title); overflow-wrap: anywhere; }
.wish-pop-body p { margin: 8px 0 0; font-size: 1.03rem; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.wish-pop-go { width: 100%; margin-top: 18px; }
.wish-pop-x {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: rgba(10, 16, 40, .62); color: #fff; cursor: pointer;
}
.wish-pop-x svg { width: 18px; height: 18px; }