/* The video message from Moș Crăciun (pages/mesaj-video-de-la-mos-craciun.html), after site.css, produs.css and
   digitala.css: the sample video in the hero's first column, then the child's page in Moș Crăciun's book. */
.mv-player { margin: 0; border-radius: 14px; overflow: hidden; background: #1b1410; box-shadow: 0 20px 40px rgba(20, 30, 60, 0.18); }
.mv-player video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
@media (min-width: 1081px) { .pd-hero:has(.mv-player) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.mv-page { margin: 0; border-radius: 14px; overflow: hidden; }
.mv-page img { display: block; width: 100%; height: auto; }
.mv-page { max-width: 1040px; margin-inline: auto; }
/* The player (assets/js/mesaj-video.js): „Apasă pentru sunet” over the muted start, like direct-response video pages;
   then no browser controls: the big play button while paused (as TrackPlay's player), -15 s / play / +15 s below. */
.mv-player { position: relative; }
.mv-player video { cursor: pointer; }
.mv-sound { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; border: 0; padding: 0;
  background: rgba(10, 14, 30, 0.35); cursor: pointer; font: inherit; }
.mv-sound__card { display: inline-flex; align-items: center; gap: 14px; padding: 18px 28px; border-radius: 18px; background: #ffd83d;
  color: #1b2a5c; font-size: 24px; font-weight: 800; line-height: 1.1; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  animation: mv-nudge 1.8s ease-in-out infinite; }
.mv-sound:hover .mv-sound__card, .mv-sound:focus-visible .mv-sound__card { background: #ffe066; }
.mv-sound:focus-visible { outline: 3px solid #ffd83d; outline-offset: -3px; }
@keyframes mv-nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
/* the big play button while paused (owner, 24 Oct 2026: „still looks bad”): a smaller frosted dark disc with a thin light
   ring, a soft rounded white triangle centred by eye (its box sits a little right of the middle), a gentle lift on hover;
   it reads over light frames as well as dark ones */
.mv-big { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center;
  width: 88px; height: 88px; padding: 0; border: 0; border-radius: 50%; color: #fff; cursor: pointer;
  background: rgba(14, 18, 34, 0.46); -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55), 0 10px 30px rgba(0, 0, 0, 0.28);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s; animation: mv-in 0.22s ease-out; }
.mv-big svg { width: 56px; height: 56px; overflow: visible; }
.mv-big path { fill: currentColor; stroke: currentColor; stroke-width: 2.4; stroke-linejoin: round; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.25)); }
.mv-big:hover { transform: translate(-50%, -50%) scale(1.07); background-color: rgba(14, 18, 34, 0.6); }
.mv-big:focus-visible { outline: 3px solid #ffd83d; outline-offset: 4px; }
@keyframes mv-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); } }
.mv-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 26px 12px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55)); opacity: 0; transition: opacity 0.25s; }
.mv-player:hover .mv-bar, .mv-player.is-paused .mv-bar, .mv-player.is-touched .mv-bar, .mv-bar:focus-within { opacity: 1; }
.mv-bar button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none;
  color: #fff; cursor: pointer; }
.mv-bar button:hover, .mv-bar button:focus-visible { background: rgba(255, 255, 255, 0.18); }
.mv-bar svg { width: 26px; height: 26px; fill: currentColor; }
.mv-bar text { fill: currentColor; font-family: inherit; }
.mv-i-play, .is-paused .mv-i-pause { display: none; }
.is-paused .mv-i-play { display: block; }
.mv-progress { flex: 1; height: 4px; margin-left: 8px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
.mv-progress span { display: block; height: 100%; width: 0; background: #ffd83d; }
@media (prefers-reduced-motion: reduce) { .mv-sound__card, .mv-big { animation: none; transition: none; } .mv-big:hover { transform: translate(-50%, -50%); } }
@media (max-width: 600px) { .mv-sound__card { padding: 12px 18px; gap: 10px; font-size: 18px; } .mv-sound__card svg { width: 30px; height: 30px; }
  .mv-big { width: 68px; height: 68px; } .mv-big svg { width: 44px; height: 44px; } }

/* Festive (owner, 24 Oct 2026: „looks too bland”; T1024-24). The hero, the sleigh band and the last call sit on
   the winter night shared with the other festive pages (festive.css: .fest-night, .fest-drift, .fest-hero, .fest-cta);
   the rest of the page stays the site's white, with the stills from the sample video as the pictures. */
.mv-hero .mv-player { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 90px rgba(255, 190, 100, 0.22); }

/* what is in the message: the four stills, two by two */
.mv-gets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 1080px; margin: 0 auto; padding: 0; list-style: none; }
.mv-card { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), var(--shadow); }
.mv-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.mv-card__text { display: flex; flex-direction: column; gap: 8px; padding: 22px 26px 26px; border-top: 4px solid var(--yellow); }
.mv-card:nth-child(even) .mv-card__text { border-top-color: #c1332f; }
.mv-card__title { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 500; line-height: 1.25; color: var(--navy); }
.mv-card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }

/* the second video, from the sleigh for Christmas night (it arrives with the first) */
.mv-eve { padding: clamp(64px, 7vw, 104px) 0 clamp(84px, 9vw, 136px); }
.mv-eve__in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.mv-eve__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--stack); }
.mv-eve .h2 { margin: 0; color: #fff; }
.mv-eve .sub { color: rgba(255, 255, 255, 0.86); }
.mv-eve__note { margin: 0; padding-left: 14px; border-left: 3px solid var(--yellow); font-size: 15.5px; line-height: 1.55; color: #ffe98a; }
.mv-tag { background: var(--yellow); color: var(--navy); font-weight: 700; }
.mv-eve__art { min-width: 0; }
/* the preview of the sleigh video: the hero's player with the night glow */
.mv-eve__art .mv-player { border-radius: 22px; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.1), 0 26px 60px rgba(0, 0, 0, 0.45), 0 0 90px rgba(255, 190, 100, 0.2); }

/* the four steps in Christmas colours: night, yellow, a warm red, night */
.mv-steps .step:nth-child(1), .mv-steps .step:nth-child(4) { background: #1a2b5e; color: #fff; }
.mv-steps .step:nth-child(1) .step__icon, .mv-steps .step:nth-child(3) .step__icon, .mv-steps .step:nth-child(4) .step__icon { background: rgba(255, 255, 255, 0.14); }
.mv-steps .step:nth-child(3) { background: #c1332f; color: #fff; }
.mv-steps .step:nth-child(1) .step__n, .mv-steps .step:nth-child(3) .step__n, .mv-steps .step:nth-child(4) .step__n { opacity: 0.35; }
/* under the button: Santa says the name before the parent pays */
.mv-hear { margin-top: -10px; }
.mv-hear svg { display: inline-block; width: 16px; height: 16px; margin-right: 5px; vertical-align: -3px; }

/* three cards in a row (the book about grown-ups' three styles) */
.mv-gets--three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1180px; }

@media (max-width: 900px) {
  .mv-gets { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mv-eve__in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .mv-card__text { padding: 18px 20px 22px; }
  .mv-card__title { font-size: 20px; }
}
/* both columns start at the top, so the video sits level with the h1 (owner, 25 Oct 2026: „move video higher”) */
@media (min-width: 1081px) { .mv-hero .pd-hero { align-items: start; } }
/* room above the h1 under the header (owner, 25 Oct 2026: „add more spacing above h1”); the shared .fest-hero keeps 14 px for the product pages, which have crumbs there */
.mv-hero { padding-top: clamp(36px, 5vw, 80px); }

/* the order-by countdown sits under the sample video (owner, 24 Oct 2026) */
.mv-media { min-width: 0; }
.mv-media .pd-date { margin-top: 22px; }

/* „Continuă mesajul pentru <nume>” (assets/js/santa-resume.js, T1025-5): a white card on top of the winter hero for a
   parent with a Santa video started and unpaid, Mio dressed as Moș Crăciun on the left, the whole card one link */
.mv-resume { display: flex; align-items: center; gap: 14px; max-width: 560px; margin: 0 auto 28px; padding: 10px 14px 10px 10px;
  background: #fff; color: var(--navy); border-radius: 18px; text-decoration: none; box-shadow: 0 10px 30px rgba(10, 18, 40, 0.28);
  position: relative; z-index: 2; }
.mv-resume[hidden] { display: none; }
.mv-resume__mio { flex: none; width: 56px; height: 56px; }
.mv-resume__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mv-resume__title { font: 600 18px/1.25 Rubik, 'Helvetica Neue', Arial, sans-serif; }
.mv-resume__line { font-size: 14px; line-height: 1.35; color: #5b6788; }
.mv-resume__go { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sun, #ffdf2d); color: var(--navy); }
.mv-resume:hover .mv-resume__go, .mv-resume:focus-visible .mv-resume__go { transform: translateX(2px); }
.mv-resume:focus-visible { outline: 3px solid var(--sun, #ffdf2d); outline-offset: 3px; }
@media (max-width: 600px) { .mv-resume { margin-bottom: 20px; } .mv-resume__title { font-size: 16px; } }
/* the families' words about the video (T1026-102): approved gift reviews only, in their own block */
.mv-reviews__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.mv-review { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 22px 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.mv-review__stars { display: inline-flex; gap: 2px; margin: 0; font-size: 17px; line-height: 1; color: rgba(36, 59, 121, 0.16); }
.mv-review__stars .is-on { color: #f5a623; }
.mv-review__text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text); white-space: pre-line; }
.mv-review__who { margin-top: auto; font-size: 14px; color: var(--text-3); }
.mv-review__who strong { color: var(--text); }