@import url("landing-base.css");

/* Saved custom-video prompt naming dialog. */
.ug-recipe-name-dialog {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}
.ug-recipe-name-dialog.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.ug-recipe-name-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ug-recipe-name-box {
  position: relative;
  z-index: 1;
  width: min(440px,100%);
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 26px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0,rgba(255,45,85,.10),transparent 38%),
    rgba(17,17,20,.98);
  color: var(--text);
  box-shadow: 0 28px 90px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.02) inset;
  transform: translateY(10px) scale(.985);
  transition: transform .2s cubic-bezier(.2,.8,.2,1);
}
.ug-recipe-name-dialog.is-open .ug-recipe-name-box { transform: translateY(0) scale(1); }
.ug-recipe-name-box > strong {
  display: block;
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.ug-recipe-name-box > p {
  margin: -3px 0 4px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.5;
}
.ug-recipe-name-box > label {
  margin-top: 2px;
  color: var(--text);
  font-size: .8rem;
  font-weight: 850;
}
#ug-recipe-name-input {
  width: 100%;
  min-width: 0;
  height: 50px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  outline: none;
  background: var(--surface2);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
  transition: border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
#ug-recipe-name-input:hover { border-color: rgba(255,255,255,.22); }
#ug-recipe-name-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,45,85,.16);
}
.ug-recipe-name-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}
.ug-recipe-name-actions .btn { width: 100%; min-height: 46px; }
.ug-recipe-name-cancel {
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.ug-recipe-name-cancel:hover {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
}
html[data-theme="light"] .ug-recipe-name-backdrop { background: rgba(25,29,40,.48); }
html[data-theme="light"] .ug-recipe-name-box {
  border-color: rgba(17,19,26,.10);
  background:
    radial-gradient(circle at 50% 0,rgba(255,45,85,.08),transparent 38%),
    rgba(255,255,255,.99);
  box-shadow: 0 28px 80px rgba(28,35,55,.22);
}
html[data-theme="light"] #ug-recipe-name-input { background: #f5f6fa; }
html[data-theme="light"] .ug-recipe-name-cancel { background: #f2f4f8; }

/* Checkout hierarchy: Popular = static label, Ultimate = restrained hero,
   Mega = premium-volume accent. scenes.js injects its rules later, so these
   hierarchy overrides intentionally use !important. */

/* The base stylesheet staggers cards by 70ms * index. With Popular/Ultimate
   intentionally opting out of that animation, Plus appeared to arrive late.
   A pricing modal should paint as one unit, so disable the stagger for all tiers. */
#checkout-panel.is-open .pack-card { animation: none !important; }

#checkout-panel .pack-card.popular-hero {
  z-index: auto !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  background: linear-gradient(165deg,rgba(255,255,255,.065),rgba(255,255,255,.018) 45%,rgba(0,0,0,.08)) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.25) !important;
  transform: none !important;
}
#checkout-panel .pack-card.popular-hero:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255,255,255,.20) !important;
  box-shadow: 0 20px 42px rgba(0,0,0,.36) !important;
}
#checkout-panel .pack-card.popular-hero::before,
#checkout-panel .pack-card.popular-hero::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
  filter: none !important;
}
#checkout-panel .pack-card.popular-hero .pack-credits { font-size: 1.3rem !important; }
#checkout-panel .pack-card.popular-hero .pack-price,
#checkout-panel .pack-card.popular-hero .pack-price b {
  font-size: 2rem !important;
  text-shadow: none !important;
}
/* Keep Popular's payment controls identical to every other tier, including
   the hover state. The later scenes.js rules otherwise give Popular a bespoke
   CTA hover because of the more-specific popular-hero selector. */
#checkout-panel .pack-card.popular-hero .pack-actions .pay-card-pack {
  min-height: 43px !important;
  background: linear-gradient(135deg,rgba(255,45,85,.92),rgba(205,39,124,.92)) !important;
  border-color: rgba(255,74,116,.48) !important;
  box-shadow: 0 9px 24px rgba(255,45,85,.19) !important;
}
#checkout-panel .pack-card.popular-hero .pack-actions button:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255,91,130,.55) !important;
  background: rgba(255,45,85,.13) !important;
}

#checkout-panel .pack-card.value-anchor {
  z-index: 5 !important;
  border: 1.5px solid rgba(246,196,90,.78) !important;
  background:
    radial-gradient(circle at 50% 0,rgba(246,196,90,.13),transparent 41%),
    linear-gradient(165deg,rgba(246,196,90,.07),rgba(30,26,19,.42) 52%,rgba(17,15,12,.94)) !important;
  box-shadow:
    0 17px 40px rgba(0,0,0,.32),
    0 0 24px rgba(246,196,90,.09) !important;
  transform: translateY(-4px) scale(1.012) !important;
}
#checkout-panel .pack-card.value-anchor:hover {
  transform: translateY(-6px) scale(1.018) !important;
  box-shadow:
    0 22px 48px rgba(0,0,0,.38),
    0 0 30px rgba(246,196,90,.12) !important;
}
#checkout-panel .pack-card.value-anchor::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: -2px !important;
  z-index: -1 !important;
  border-radius: 21px !important;
  background: linear-gradient(135deg,rgba(243,184,63,.42),rgba(255,217,118,.20),rgba(255,172,57,.30)) !important;
  filter: blur(10px) !important;
  opacity: .22 !important;
  animation: none !important;
  pointer-events: none !important;
}
#checkout-panel .pack-card.value-anchor .pack-credits { font-size: 1.34rem !important; }
#checkout-panel .pack-card.value-anchor .pack-price,
#checkout-panel .pack-card.value-anchor .pack-price b {
  font-size: 2.1rem !important;
  text-shadow: 0 0 16px rgba(255,217,118,.08) !important;
}
#checkout-panel .pack-card.value-anchor .pack-actions .pay-card-pack {
  min-height: 45px !important;
  box-shadow: 0 9px 24px rgba(255,23,79,.18) !important;
}

#checkout-panel .pack-card.mega-anchor {
  z-index: 4 !important;
  border: 1.5px solid rgba(151,116,255,.78) !important;
  background:
    radial-gradient(circle at 50% 0,rgba(151,116,255,.21),transparent 42%),
    linear-gradient(165deg,rgba(91,62,160,.24),rgba(28,20,47,.42) 54%,rgba(16,12,27,.95)) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.34),
    0 0 32px rgba(137,102,255,.16) !important;
  transform: translateY(-3px) scale(1.01) !important;
}
#checkout-panel .pack-card.mega-anchor:hover {
  transform: translateY(-6px) scale(1.018) !important;
  border-color: rgba(174,145,255,.92) !important;
  box-shadow:
    0 24px 54px rgba(0,0,0,.40),
    0 0 40px rgba(137,102,255,.22) !important;
}
#checkout-panel .pack-card.mega-anchor::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: -2px !important;
  z-index: -1 !important;
  border-radius: 21px !important;
  background: linear-gradient(135deg,rgba(137,102,255,.48),rgba(180,153,255,.22),rgba(106,75,214,.34)) !important;
  filter: blur(10px) !important;
  opacity: .20 !important;
  animation: none !important;
  pointer-events: none !important;
}
#checkout-panel .pack-card.mega-anchor .pack-plan-name { color: #d6c9ff !important; }
#checkout-panel .pack-card.mega-anchor .pack-price,
#checkout-panel .pack-card.mega-anchor .pack-price b {
  text-shadow: 0 0 18px rgba(151,116,255,.12) !important;
}
#checkout-panel .pack-card.mega-anchor .pack-badge.max {
  box-shadow: 0 9px 26px rgba(124,92,240,.38) !important;
}

html[data-theme="light"] #checkout-panel .pack-card.popular-hero {
  border-color: rgba(17,19,26,.11) !important;
  background: linear-gradient(165deg,#fff,#f7f7fb) !important;
  box-shadow: 0 14px 32px rgba(34,40,60,.09) !important;
}
html[data-theme="light"] #checkout-panel .pack-card.value-anchor {
  border-color: rgba(213,158,38,.72) !important;
  background:
    radial-gradient(circle at 50% 0,rgba(246,196,90,.12),transparent 42%),
    linear-gradient(165deg,#fffdf8,#fff) !important;
  box-shadow: 0 16px 36px rgba(145,109,32,.12),0 0 18px rgba(246,196,90,.06) !important;
}
html[data-theme="light"] #checkout-panel .pack-card.mega-anchor {
  border-color: rgba(119,86,222,.65) !important;
  background:
    radial-gradient(circle at 50% 0,rgba(137,102,255,.15),transparent 42%),
    linear-gradient(165deg,#fbf9ff,#fff) !important;
  box-shadow: 0 18px 40px rgba(70,52,130,.14),0 0 24px rgba(137,102,255,.09) !important;
}

@media (max-width:900px) {
  #checkout-panel .pack-card.value-anchor,
  #checkout-panel .pack-card.value-anchor:hover,
  #checkout-panel .pack-card.mega-anchor,
  #checkout-panel .pack-card.mega-anchor:hover {
    transform: none !important;
  }
}

@media (max-width:520px) {
  .ug-recipe-name-dialog {
    place-items: end center;
    padding: 10px;
    padding-bottom: max(10px,env(safe-area-inset-bottom));
  }
  .ug-recipe-name-box {
    width: 100%;
    padding: 22px 18px 18px;
    border-radius: 20px;
  }
  .ug-recipe-name-actions { grid-template-columns: 1fr; }
  .ug-recipe-name-actions .btn { min-height: 48px; }
}

@media (prefers-reduced-motion:reduce) {
  .ug-recipe-name-dialog,
  .ug-recipe-name-box { transition: none; }
  #checkout-panel .pack-card.value-anchor,
  #checkout-panel .pack-card.value-anchor:hover,
  #checkout-panel .pack-card.mega-anchor,
  #checkout-panel .pack-card.mega-anchor:hover { transform: none !important; }
  #checkout-panel .pack-card.value-anchor::before,
  #checkout-panel .pack-card.mega-anchor::before { display: none !important; }
}