/* Cântecul tău · 30.10.2026 (planul E1): primul ecran, fereastra ghidului și bara de jos, ca la Mesajul de la Moș Crăciun
   (assets/mos-pas1.css, assets/mos-modal.css), în culorile paginii: noaptea prunei, zmeura butoanelor, aurul etichetelor. */

/* ---------- primul ecran: ce primești, pe sigilii de ceară ---------- */
.cn-erou .cn-sigilii{display:grid;gap:12px;max-width:34em;margin:6px 0 4px;padding:0;list-style:none}
.cn-erou .cn-sigilii li{position:relative;min-height:28px;padding-left:40px;font:500 17px/1.45 var(--font-body);color:rgba(255,243,227,.9);text-align:left}
.cn-erou .cn-sigilii b{font-weight:700;color:#F3C969}
.cn-erou .cn-sigilii li::before{content:"";position:absolute;left:0;top:-1px;width:28px;height:28px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ef5a74 0 18%,#d1314f 46%,#a8173a 78%,#8a0f2e 100%);
  box-shadow:inset 0 0 0 3px #b61f40,inset 0 0 0 4.5px #ffb3c066,inset 0 -2px 3px #5c051c80,0 3px 6px #00000080;
  -webkit-mask:radial-gradient(circle,#000 62%,#0000 63%) 0 0/100% 100%,conic-gradient(from 0deg,#000 0 8deg,#0000 8deg 15deg,#000 15deg 30deg,#0000 30deg 36deg,#000 36deg 52deg,#0000 52deg 58deg,#000 58deg 75deg,#0000 75deg 81deg,#000 81deg 98deg,#0000 98deg 104deg,#000 104deg 121deg,#0000 121deg 127deg,#000 127deg 144deg,#0000 144deg 150deg,#000 150deg 167deg,#0000 167deg 173deg,#000 173deg 190deg,#0000 190deg 196deg,#000 196deg 213deg,#0000 213deg 219deg,#000 219deg 236deg,#0000 236deg 242deg,#000 242deg 259deg,#0000 259deg 265deg,#000 265deg 282deg,#0000 282deg 288deg,#000 288deg 305deg,#0000 305deg 311deg,#000 311deg 328deg,#0000 328deg 334deg,#000 334deg 360deg);
  mask:radial-gradient(circle,#000 62%,#0000 63%) 0 0/100% 100%,conic-gradient(from 0deg,#000 0 8deg,#0000 8deg 15deg,#000 15deg 30deg,#0000 30deg 36deg,#000 36deg 52deg,#0000 52deg 58deg,#000 58deg 75deg,#0000 75deg 81deg,#000 81deg 98deg,#0000 98deg 104deg,#000 104deg 121deg,#0000 121deg 127deg,#000 127deg 144deg,#0000 144deg 150deg,#000 150deg 167deg,#0000 167deg 173deg,#000 173deg 190deg,#0000 190deg 196deg,#000 196deg 213deg,#0000 213deg 219deg,#000 219deg 236deg,#0000 236deg 242deg,#000 242deg 259deg,#0000 259deg 265deg,#000 265deg 282deg,#0000 282deg 288deg,#000 288deg 305deg,#0000 305deg 311deg,#000 311deg 328deg,#0000 328deg 334deg,#000 334deg 360deg);
  rotate:-10deg}
.cn-erou .cn-sigilii li::after{content:"";position:absolute;left:10px;top:5px;width:7px;height:12px;border:solid #fff3e3;border-width:0 2.6px 2.6px 0;border-radius:0 0 1px 0;transform:rotate(42deg);filter:drop-shadow(0 1px 0 #6a0a24)}

/* ---------- capsula „Pentru [nume] [Creează-i cântecul]” ---------- */
.cn-erou .cn-tichet{width:100%;max-width:600px;margin-top:10px}
.cn-tichet__capsula{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cn-tichet__pentru{display:none}
.cn-tichet__in{min-height:52px;padding:0 18px;border:1.5px solid rgba(255,243,227,.4);border-radius:999px;background:rgba(255,243,227,.08);color:#fff;font:600 18px/1 var(--font-body)}
.cn-tichet.is-activ .cn-tichet__capsula{flex-wrap:nowrap;gap:4px;padding:7px 7px 7px 22px;border-radius:999px;background:#fffaf1;
  box-shadow:0 0 0 1px #ffffff40,0 22px 44px -22px #000;transition:box-shadow .25s}
.cn-tichet.is-activ .cn-tichet__capsula:focus-within{box-shadow:0 0 0 2px var(--cn-zm),0 0 0 7px rgba(243,201,105,.3),0 22px 44px -22px #000}
.cn-tichet.is-activ .cn-tichet__pentru{display:block;flex:none;font:700 12px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:#a0877a}
.cn-tichet.is-activ .cn-tichet__in{flex:1 1 120px;min-width:0;height:56px;min-height:0;padding:8px 8px 0;border:0;border-radius:0;background:none;
  color:#4a1030;font:600 31px/1 "hooo Scris","Segoe Script",cursive;letter-spacing:0}
.cn-tichet.is-activ .cn-tichet__in::placeholder{font:600 31px/1 "hooo Scris","Segoe Script",cursive;color:#4a1030;opacity:.3}
.cn-tichet.is-activ .cn-tichet__in:focus{outline:0}
.cn-erou .cn-tichet .cn-tichet__cta{display:inline-flex;flex:none;min-height:56px;margin:0;padding:0 26px;font-size:17px} /* cantec.css ascunde .cn-erou .cn-cta din 24.10 */
@media (max-width:899px){
  .cn-erou .cn-sigilii{gap:10px;max-width:400px;margin-inline:auto}
  .cn-erou .cn-sigilii li{padding-left:34px;font-size:15.5px;min-height:24px}
  .cn-erou .cn-sigilii li::before{width:24px;height:24px}
  .cn-erou .cn-sigilii li::after{left:8.5px;top:4px;width:6px;height:11px;border-width:0 2.3px 2.3px 0}
  .cn-erou .cn-tichet{max-width:440px;margin-inline:auto}
  .cn-tichet.is-activ .cn-tichet__capsula{flex-wrap:wrap;gap:6px 4px;padding:6px 6px 6px 18px;border-radius:26px}
  .cn-tichet.is-activ .cn-tichet__in{height:52px;font-size:29px}
  .cn-tichet.is-activ .cn-tichet__in::placeholder{font-size:29px}
  .cn-tichet.is-activ .cn-tichet__cta{flex:1 1 100%;width:100%}
}

/* ---------- prețul: pe calculator, eticheta legănată în colțul discului; pe telefon, sus ---------- */
.cn-erou__dreapta{display:grid;justify-items:center;gap:16px;min-width:0}
.cn-disc__scena .cn-pret-colt{position:absolute;top:-6px;right:-34px;z-index:3;margin:0;transform-origin:22px 14px;rotate:8deg}
@media (prefers-reduced-motion:no-preference){.cn-disc__scena .cn-pret-colt{animation:cn-eticheta-leagan 4.8s ease-in-out infinite}}
@keyframes cn-eticheta-leagan{0%,100%{rotate:8deg}50%{rotate:3deg}}
@media (min-width:1024px){.cn-erou__offre--sus{display:none}}
@media (max-width:1023.98px){
  .cn-disc__scena .cn-pret-colt{display:none!important}
  /* ordinea pe telefon și tabletă: eticheta prețului sus, apoi eticheta produsului, titlul, ce primești, capsula */
  .cn-erou__text>.cn-erou__offre--sus{order:0}
  .cn-erou__text>.cn-eticheta{order:1}
  .cn-erou__text>.cn-titlu{order:2}
  .cn-erou__text>.cn-sigilii{order:3}
  .cn-erou__text>.cn-tichet{order:4}
}

/* ---------- sub disc: ceasul și garanția, într-un singur bloc (timer-lansare îl face .hooo-subcta) ---------- */
.cn-erou__sub-disc{display:grid;justify-items:center;gap:8px;width:100%;max-width:460px}
.cn-erou__sub-disc .cn-garantie{justify-content:center;margin:0}

/* ---------- butoanele din pagină pulsează (ca la Moș): respiră, inel care se stinge, lumină care trece ---------- */
.cn-cta-mijloc{display:flex;justify-content:center;margin:clamp(30px,4vw,48px) auto 0}
.cn-cta-mijloc .cn-cta{min-width:min(100%,340px)}
.cn-tichet__cta,.cn-cta-mijloc .cn-cta,.cn-bj__btn{overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .cn-tichet__cta,.cn-cta-mijloc .cn-cta{animation:cm-cta-puls 2.4s cubic-bezier(.4,0,.3,1) infinite!important}
  .cn-tichet__cta::after,.cn-cta-mijloc .cn-cta::after{content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;border-radius:inherit;
    background:linear-gradient(105deg,#fff0 30%,#ffffff70 48%,#fff0 64%);transform:translateX(-130%);animation:cm-cta-luciu 3.6s ease-in-out infinite}
  .cn-cta-mijloc .cn-cta,.cn-cta-mijloc .cn-cta::after{animation-delay:.6s!important}
  .cn-tichet__cta:hover,.cn-tichet__cta:focus-visible,.cn-cta-mijloc .cn-cta:hover,.cn-cta-mijloc .cn-cta:focus-visible{animation:none!important;transform:translateY(-3px) scale(1.03)}
}
@keyframes cm-cta-puls{
  0%{transform:scale(1);box-shadow:0 15px 38px -16px #c92a48cc,0 0 0 0 #e34261a6,inset 0 1px #fff4}
  38%{transform:scale(1.04);box-shadow:0 22px 48px -14px #c92a48f2,0 0 0 16px #e3426100,inset 0 1px #fff4}
  70%,100%{transform:scale(1);box-shadow:0 15px 38px -16px #c92a48cc,0 0 0 0 #e3426100,inset 0 1px #fff4}
}
@keyframes cm-cta-luciu{0%,52%{transform:translateX(-130%)}82%,100%{transform:translateX(130%)}}

/* ---------- fereastra ghidului ---------- */
html.cm-modal-deschis,html.cm-modal-deschis body{overflow:hidden}
.cn dialog.cm-modal{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;color:var(--cn-crem);
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:radial-gradient(1100px 560px at 15% 0%,#5b1838 0%,#5b183800 70%),radial-gradient(900px 600px at 100% 100%,#3a1630cc,#3a163000 70%),linear-gradient(180deg,#24101f,#171219);
  opacity:0;transform:translateY(22px) scale(.985);transition:opacity .3s ease-out,transform .45s cubic-bezier(.2,.7,.2,1)}
.cn dialog.cm-modal.is-vizibil{opacity:1;transform:none}
.cn dialog.cm-modal.is-iese{opacity:0;transform:translateY(16px);transition:opacity .22s ease-in,transform .26s ease-in}
.cn dialog.cm-modal::backdrop{background:#171219e6}
@media (prefers-reduced-motion:reduce){.cn dialog.cm-modal{transition:none;transform:none}}
.cn .cm-modal__bara{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px max(20px,calc((100% - 1160px) / 2)) 12px;background:linear-gradient(180deg,#24101ff2 60%,#24101f00)}
.cn .cm-modal__t{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px;min-width:0;margin:0}
.cn .cm-modal__t>span:first-child{font:700 11px/1.4 var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:#F3C969}
.cn .cm-modal__pentru{font:600 25px/1 "hooo Scris","Segoe Script",cursive;color:#EFC654;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}
.cn .cm-modal__pentru b{font-weight:inherit}
.cn .cm-modal__x{flex:none;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid #F3C96966;border-radius:50%;background:#ffffff12;color:var(--cn-crem);cursor:pointer;
  backdrop-filter:blur(6px);transition:background .2s,border-color .2s,transform .25s}
.cn .cm-modal__x svg{width:20px;height:20px}
.cn .cm-modal__x:hover{background:var(--cn-zm);border-color:var(--cn-zm);transform:rotate(90deg)}
.cn .cm-modal__x:focus-visible{outline:3px solid #F3C969;outline-offset:3px}
.cn dialog.cm-modal .cn-atelier{margin:0;padding:4px 0 48px;background:none}
.cn dialog.cm-modal .cn-atelier__ecou{display:none}
.cn dialog.cm-modal .cn-ghid{scroll-margin-top:76px}
@media (min-width:900px){
  .cn dialog.cm-modal[open]{display:flex;flex-direction:column}
  .cn dialog.cm-modal .cn-atelier{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;padding-bottom:6vh}
}
@media (max-width:899px){
  .cn .cm-modal__bara{padding:10px 14px 10px 18px}
  .cn .cm-modal__t{flex-direction:column;gap:0}
  .cn .cm-modal__t>span:first-child{font-size:10px}
  .cn .cm-modal__pentru{font-size:22px;max-width:70vw}
  .cn .cm-modal__x{width:42px;height:42px}
  .cn dialog.cm-modal .cn-atelier{padding:0}
  .cn dialog.cm-modal .cn-atelier__cap{display:none}
  .cn dialog.cm-modal .cn-ghid{scroll-margin-top:66px}
}
/* în pagină: fără locul gol de sub primul ecran, unde stătea ghidul */
.cn.cm-cu-modal .cn-scena{padding-bottom:clamp(8px,2vw,24px)}

/* ---------- bara de jos: roșie, cu discul, numele scris de mână, prețul și butonul alb ---------- */
.cn .cn-bj{position:fixed;left:50%;bottom:16px;z-index:40;display:flex;align-items:center;gap:14px;width:min(920px,calc(100% - 32px));
  padding:9px 9px 9px 12px;border-radius:999px;color:#fff;
  background:linear-gradient(180deg,#e34261,#c92a48 55%,#ac203e);box-shadow:0 26px 56px -20px #000d,0 0 0 1px #ffffff30 inset,0 1px 0 #ffffff55 inset;
  transform:translateX(-50%);transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .35s}
.cn .cn-bj[hidden]{display:none}
.cn .cn-bj.is-ascunsa{transform:translate(-50%,150%);opacity:0;pointer-events:none}
.cn .cn-bj__disc{flex:none;position:relative;display:block;width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle,#EFD05E 0 17%,#1b1418 18% 21%,#2a2026 22% 100%);box-shadow:0 4px 10px #3a0812aa,inset 0 0 0 2px #ffffff22}
.cn .cn-bj__disc i{position:absolute;inset:6px;border-radius:50%;background:repeating-radial-gradient(circle,#ffffff0d 0 1px,#0000 1px 3px)}
@media (prefers-reduced-motion:no-preference){.cn .cn-bj__disc{animation:cm-disc-roteste 6s linear infinite}}
@keyframes cm-disc-roteste{to{rotate:360deg}}
.cn .cn-bj__text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;margin:0}
.cn .cn-bj__t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:750 16px/1.2 var(--font-display);color:#fff}
.cn .cn-bj__pentru{font:600 26px/1 "hooo Scris","Segoe Script",cursive;color:#fff6e2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn .cn-bj__pentru b{font-weight:inherit}
.cn .cn-bj__pret{display:flex;align-items:baseline;gap:8px;margin:0;line-height:1}
.cn .cn-bj__pret s{font-size:13px;color:#ffd3db}
.cn .cn-bj__pret b{font:800 18px/1 var(--font-display);color:#fff}
.cn .cn-bj__btn{position:relative;isolation:isolate;flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;
  background:#fff;color:var(--cn-zm);font:800 16px/1 var(--font-display);text-decoration:none;white-space:nowrap;box-shadow:0 10px 24px -10px #3a0812cc}
.cn .cn-bj__btn:hover{color:var(--cn-zm-d)}
.cn .cn-bj__btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .cn .cn-bj__btn{animation:cm-bara-puls 2.8s cubic-bezier(.4,0,.3,1) infinite}
  .cn .cn-bj__btn::before{content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;background:linear-gradient(105deg,#fff0 30%,#ffd7df 48%,#fff0 64%);
    transform:translateX(-130%);animation:cm-cta-luciu 4.2s ease-in-out infinite}
  .cn .cn-bj__btn:hover{animation:none}
}
@keyframes cm-bara-puls{
  0%{transform:scale(1);box-shadow:0 10px 24px -10px #3a0812cc,0 0 0 0 #ffffffb3}
  40%{transform:scale(1.035);box-shadow:0 12px 26px -10px #3a0812cc,0 0 0 12px #fff0}
  70%,100%{transform:scale(1);box-shadow:0 10px 24px -10px #3a0812cc,0 0 0 0 #fff0}
}
@media (max-width:899px){
  .cn .cn-bj{left:0;right:0;bottom:0;width:auto;gap:10px;padding:9px 10px calc(9px + env(safe-area-inset-bottom)) 12px;border-radius:20px 20px 0 0;transform:none}
  .cn .cn-bj.is-ascunsa{transform:translateY(120%)}
  .cn .cn-bj__disc{width:38px;height:38px}
  .cn .cn-bj__t{font-size:14px}
  .cn .cn-bj__pentru{font-size:23px}
  .cn .cn-bj__pret b{font-size:16px}
  .cn .cn-bj__btn{min-height:46px;padding:0 16px;font-size:14px}
}
@media (max-width:420px){.cn .cn-bj__disc{display:none}.cn .cn-bj{padding-left:16px}.cn .cn-bj__t{font-size:12.5px}.cn .cn-bj__btn{padding:0 13px;font-size:13px}}
/* garanția de lângă ceas: cantec.css o ascundea pe calculator (banda îngustă din 24.10); acum stă sub disc, ca la Moș sub video.
   Pe telefon o ascunde timer-lansare.css, pe tot site-ul. */
@media (min-width:761px){.cn-erou .cn-erou__sub-disc .hooo-subcta .hooo-prom{display:flex!important}}
/* butonul de după „Cum arată cadoul”: pe toată lățimea grilei, centrat */
.cn-cadoul .cn-cta-mijloc{grid-column:1/-1;width:100%}
/* bara pe telefon: prețul pe un rând, fără prețul tăiat sub 480 px, ca numele să încapă */
.cn .cn-bj__pret{white-space:nowrap}
@media (max-width:479.98px){
  .cn .cn-bj__pret s{display:none}
  .cn .cn-bj__pentru{font-size:21px}
}

/* ---------- „Unde îți trimitem refrenul?” (30.10.2026, E1): caseta de pe cardul refrenului, înaintea primului refren ---------- */
.cn-refren__poarta{position:relative;z-index:1;display:grid;gap:10px;padding:14px;border-radius:14px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.cn-refren__poarta[hidden]{display:none}
.cn-refren__poarta-t{margin:0;font:780 16px/1.25 var(--font-display);color:#fff}
.cn-refren__poarta-rand{display:flex;flex-wrap:wrap;gap:8px}
.cn-refren__poarta-rand input{flex:1 1 200px;min-width:0;min-height:46px;padding:0 16px;border:1.5px solid rgba(255,255,255,.3);border-radius:999px;background:#fff;color:var(--cn-ink);font:500 16px/1 var(--font-body)}
.cn-refren__poarta-rand input:focus{outline:0;border-color:#F3C969;box-shadow:0 0 0 3px rgba(243,201,105,.35)}
.cn-refren .cn-refren__poarta-btn{flex:none;min-height:46px;padding:0 20px;border:0;border-radius:999px;background:#fff;color:var(--cn-zm-d);font-weight:760;font-size:15px;box-shadow:0 8px 20px -10px rgba(0,0,0,.45)}
.cn-refren .cn-refren__poarta-btn:disabled{opacity:.6}
.cn-refren__opt{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.45;color:rgba(255,236,240,.88);cursor:pointer}
.cn-refren__opt input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:#F3C969}
.cn-refren__poarta-nota{margin:0;font-size:12.5px;color:rgba(255,236,240,.7)}
.cn-refren__poarta-nota a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.cn-refren__poarta-err{margin:0;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.12);font-size:13.5px;color:#FFE9EE}
@media (max-width:479.98px){.cn-refren .cn-refren__poarta-btn{flex:1 1 100%}}
/* 31.10.2026: pe telefon, capsula pe două rânduri: butonul la fel de departe de ambele margini (era 18 px în stânga, 6 px în dreapta) */
@media (max-width:899px){
  .cn-tichet.is-activ .cn-tichet__capsula{padding:6px}
  .cn-tichet.is-activ .cn-tichet__pentru{margin-left:12px}
}