/* ============================================================
   LEXNOMIK — Site popup (greeting / newsletter / announcement)
   assets/css/popup.css   — loaded by public/features/site-popup.php
   Themes: .lx-pop--diwali · .lx-pop--navy · .lx-pop--light
   ============================================================ */
.lx-pop {
  position: fixed; inset: 0; z-index: 99000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  font-family: var(--font-ui, 'DM Sans', system-ui, sans-serif);
}
.lx-pop[hidden] { display: none; }
html.lx-pop-lock { overflow: hidden; }

.lx-pop-backdrop {
  position: absolute; inset: 0; background: rgba(8, 14, 28, .66);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .3s ease;
}
.lx-pop.is-open .lx-pop-backdrop { opacity: 1; }

.lx-pop-card {
  position: relative; width: min(440px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  overflow-y: auto; overflow-x: hidden; text-align: center; border-radius: 20px;
  padding: 34px 30px 26px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(18px) scale(.96);
  transition: transform .45s cubic-bezier(.2, .9, .3, 1.15), opacity .3s ease;
  outline: none;
}
.lx-pop.is-open .lx-pop-card { opacity: 1; transform: none; }

/* ---------- content ---------- */
.lx-pop-diya { width: 92px; height: 92px; margin: -8px auto 4px; position: relative; z-index: 1; }
.lx-pop-diya svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lx-pop-emoji { font-size: 54px; line-height: 1; margin: 0 auto 10px; position: relative; z-index: 1; }
.lx-pop-img { display: block; width: 100%; max-height: 190px; object-fit: cover; border-radius: 12px; margin: 0 0 16px; }
.lx-pop-kicker {
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 8px;
  position: relative; z-index: 1;
}
.lx-pop-kicker[hidden] { display: none; }
.lx-pop-title {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-weight: 700;
  font-size: 27px; line-height: 1.2; margin: 0 0 12px; position: relative; z-index: 1; text-wrap: balance;
}
.lx-pop-body { font-size: 15px; line-height: 1.6; position: relative; z-index: 1; }
.lx-pop-body p { margin: 0 0 10px; }
.lx-pop-body p:last-child { margin-bottom: 0; }

.lx-pop-actions { margin-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; z-index: 1; }
.lx-pop-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 26px;
  border: 0; border-radius: 999px; font: 700 15px/1 var(--font-ui, 'DM Sans', system-ui, sans-serif);
  cursor: pointer; text-decoration: none; transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.lx-pop-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.lx-pop-btn:active { transform: none; }
.lx-pop-skip {
  background: none; border: 0; cursor: pointer; font: 500 13.5px var(--font-ui, 'DM Sans', system-ui, sans-serif);
  text-decoration: underline; text-underline-offset: 3px; padding: 8px 12px; opacity: .85;
}
.lx-pop-skip:hover { opacity: 1; }
.lx-pop-x {
  position: absolute; top: 12px; right: 12px; z-index: 3; width: 34px; height: 34px; border-radius: 50%;
  border: 0; cursor: pointer; font-size: 15px; line-height: 1; display: grid; place-items: center;
  transition: background .2s ease, transform .2s ease;
}
.lx-pop-x:hover { transform: rotate(90deg); }
.lx-pop button:focus-visible, .lx-pop a:focus-visible, .lx-pop input:focus-visible { outline: 3px solid #ffc23a; outline-offset: 2px; }

/* ---------- newsletter form ---------- */
.lx-pop-form { margin-top: 18px; position: relative; z-index: 1; text-align: left; }
.lx-pop-row { display: flex; gap: 8px; }
.lx-pop-row input[type=email] {
  flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 16px; border-radius: 999px; font: 400 15px var(--font-ui, 'DM Sans', system-ui, sans-serif);
  border: 1.5px solid transparent; background: #fff; color: #1f2937;
}
.lx-pop-row .lx-pop-btn { flex: 0 0 auto; padding: 0 20px; }
.lx-pop-note { font-size: 12px; margin: 10px 0 0; text-align: center; opacity: .8; }
.lx-pop-msg { font-size: 13.5px; margin: 10px 0 0; text-align: center; min-height: 0; font-weight: 600; }
.lx-pop-msg:empty { display: none; }
.lx-pop-msg.is-ok  { color: #8de0a4; }
.lx-pop-msg.is-err { color: #ffb4b4; }
.lx-pop-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lx-pop-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lx-pop.is-done .lx-pop-row, .lx-pop.is-done .lx-pop-note { display: none; }
.lx-pop.is-done .lx-pop-msg { font-size: 15px; margin-top: 14px; }

/* ====================== THEME: Diwali ====================== */
.lx-pop--diwali {
  color: #fdf3dc;
  background:
    radial-gradient(120% 70% at 50% 0%, #6b2342 0%, rgba(107, 35, 66, 0) 62%),
    linear-gradient(165deg, #3a1340 0%, #1d1646 55%, #0f2240 100%);
  border: 1px solid rgba(232, 201, 122, .6);
}
.lx-pop--diwali::before {            /* thin inner gold frame */
  content: ""; position: absolute; inset: 8px; border-radius: 13px; pointer-events: none;
  border: 1px solid rgba(232, 201, 122, .32);
}
.lx-pop--diwali::after {             /* soft saffron glow behind the lamp */
  content: ""; position: absolute; left: 50%; top: -40px; width: 300px; height: 220px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 170, 60, .32), rgba(255, 170, 60, 0)); pointer-events: none;
  animation: lxPopGlow 3.2s ease-in-out infinite;
}
.lx-pop--diwali .lx-pop-kicker { color: #ffb43a; }
.lx-pop--diwali .lx-pop-title  { color: #ffe9a8; }
.lx-pop--diwali .lx-pop-body   { color: rgba(253, 243, 220, .9); }
.lx-pop--diwali .lx-pop-btn    { background: linear-gradient(135deg, #ffb43a, #e8c97a); color: #2a1030; box-shadow: 0 8px 22px rgba(255, 170, 60, .35); }
.lx-pop--diwali .lx-pop-skip   { color: rgba(253, 243, 220, .85); }
.lx-pop--diwali .lx-pop-x      { background: rgba(255, 255, 255, .12); color: #fdf3dc; }
.lx-pop--diwali .lx-pop-x:hover { background: rgba(255, 255, 255, .22); }
.lx-pop--diwali .lx-pop-row input[type=email] { background: rgba(255, 255, 255, .96); }
.lx-pop--diwali .lx-pop-note { color: rgba(253, 243, 220, .8); }

.lx-pop-spark {
  position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #ffe9a8; pointer-events: none;
  box-shadow: 0 0 10px 3px rgba(255, 200, 90, .7); opacity: .2; animation: lxPopTwinkle 2.8s ease-in-out infinite;
}
.lx-pop-spark--1 { top: 18%; left: 11%; }
.lx-pop-spark--2 { top: 27%; right: 12%; animation-delay: .9s; width: 5px; height: 5px; }
.lx-pop-spark--3 { top: 46%; left: 7%; animation-delay: 1.6s; width: 4px; height: 4px; }

/* the flame flickers (these rules reach inside the <use> symbol) */
.lx-pop-diya .lx-flame    { transform-box: fill-box; transform-origin: 50% 100%; animation: lxFlame 1.5s ease-in-out infinite; }
.lx-pop-diya .lx-flame-in { transform-box: fill-box; transform-origin: 50% 100%; animation: lxFlame 1.1s ease-in-out infinite reverse; }
.lx-pop-diya .lx-glow     { animation: lxPopGlow 2.4s ease-in-out infinite; }

/* ====================== THEME: Brand navy ====================== */
.lx-pop--navy {
  color: #eaf0f8; background: linear-gradient(165deg, #1a3a5c 0%, #0f2240 100%);
  border: 1px solid rgba(200, 168, 75, .55);
}
.lx-pop--navy .lx-pop-kicker { color: #e8c97a; }
.lx-pop--navy .lx-pop-title  { color: #fff; }
.lx-pop--navy .lx-pop-body   { color: rgba(234, 240, 248, .88); }
.lx-pop--navy .lx-pop-btn    { background: #c8a84b; color: #0f2240; }
.lx-pop--navy .lx-pop-skip   { color: rgba(234, 240, 248, .85); }
.lx-pop--navy .lx-pop-x      { background: rgba(255, 255, 255, .12); color: #fff; }
.lx-pop--navy .lx-pop-x:hover { background: rgba(255, 255, 255, .22); }

/* ====================== THEME: Light ====================== */
.lx-pop--light {
  color: #1f2937; background: #fffdf7; border: 1px solid #e8dcb4;
}
.lx-pop--light .lx-pop-kicker { color: #8a6d12; }
.lx-pop--light .lx-pop-title  { color: #0f2240; }
.lx-pop--light .lx-pop-body   { color: #374151; }
.lx-pop--light .lx-pop-btn    { background: #1a3a5c; color: #fff; }
.lx-pop--light .lx-pop-skip   { color: #4b5563; }
.lx-pop--light .lx-pop-x      { background: #f3f4f6; color: #374151; }
.lx-pop--light .lx-pop-x:hover { background: #e5e7eb; }
.lx-pop--light .lx-pop-row input[type=email] { border-color: #d1d5db; }
.lx-pop--light .lx-pop-msg.is-ok  { color: #15803d; }
.lx-pop--light .lx-pop-msg.is-err { color: #b91c1c; }

/* ---------- animations ---------- */
@keyframes lxFlame {
  0%, 100% { transform: scale(1, 1) rotate(0deg); }
  25%      { transform: scale(.94, 1.06) rotate(-2deg); }
  50%      { transform: scale(1.04, .95) rotate(1.5deg); }
  75%      { transform: scale(.97, 1.04) rotate(-1deg); }
}
@keyframes lxPopGlow    { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes lxPopTwinkle { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.25); } }

/* ---------- phones: bottom sheet ---------- */
@media (max-width: 560px) {
  .lx-pop { align-items: flex-end; padding: 0; }
  .lx-pop-card {
    width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 22px 22px 0 0;
    padding: 30px 22px calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); opacity: 1;
    transition: transform .45s cubic-bezier(.2, .9, .3, 1);
  }
  .lx-pop-title { font-size: 24px; }
  .lx-pop-row { flex-direction: column; }
  .lx-pop-row .lx-pop-btn { width: 100%; }
}

/* ---------- inline preview used on the admin page ---------- */
.lx-pop--preview { position: static; display: block; padding: 0; inset: auto; z-index: auto; }
.lx-pop--preview .lx-pop-card { opacity: 1; transform: none; margin: 0 auto; max-height: none; transition: none; }
.lx-pop--preview .lx-pop-x { display: none; }

@media (prefers-reduced-motion: reduce) {
  .lx-pop-card, .lx-pop-backdrop { transition: opacity .2s ease; transform: none; }
  .lx-pop-spark, .lx-pop--diwali::after, .lx-pop-diya .lx-flame, .lx-pop-diya .lx-flame-in, .lx-pop-diya .lx-glow { animation: none; }
}