/* Playerul Vocea Inimii: clipuri verticale 9:16, comenzi proprii (desktop + telefon), în culorile site-ului. */
.vp { position: relative; width: 100%; aspect-ratio: 9 / 16; background: #1a0509; overflow: hidden; outline: none; user-select: none;
  -webkit-user-select: none; -webkit-tap-highlight-color: transparent; color: #fff; font-family: var(--f-text); }
.vp video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #1a0509; }
.vp:fullscreen, .vp:-webkit-full-screen { aspect-ratio: auto; width: 100%; height: 100%; background: #000; }
.vp:fullscreen video, .vp:-webkit-full-screen video { object-fit: contain; background: #000; }
.vp-strat { position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.vp:focus-visible { box-shadow: inset 0 0 0 3px var(--rosu-2); }

/* butonul mare din mijloc (pornire / reluare), cu un puls ca de inimă */
.vp-mare { position: absolute; left: 50%; top: 50%; z-index: 3; width: 76px; height: 76px; margin: -38px 0 0 -38px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: #c8102e; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35); transition: transform .18s, opacity .2s; }
.vp-mare::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); animation: vp-puls 2s ease-out infinite; }
@keyframes vp-puls { 0% { transform: scale(.92); opacity: .9; } 70%, 100% { transform: scale(1.25); opacity: 0; } }
.vp-mare:hover { transform: scale(1.06); }
.vp-mare svg { width: 32px; height: 32px; }
.vp-mare .i-reia { display: none; }
.vp.gata .vp-mare .i-play { display: none; }
.vp.gata .vp-mare .i-reia { display: block; }
.vp.ruleaza .vp-mare { opacity: 0; pointer-events: none; transform: scale(.85); }

/* încărcare */
.vp-incarca { position: absolute; left: 50%; top: 50%; z-index: 3; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: vp-roata .8s linear infinite; pointer-events: none; }
@keyframes vp-roata { to { transform: rotate(360deg); } }

/* bara de jos */
.vp-bara { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 40px 12px 10px;
  background: linear-gradient(transparent, rgba(20, 3, 8, .82)); transition: opacity .25s, transform .25s; }
.vp.ruleaza.liniste .vp-bara { opacity: 0; transform: translateY(8px); pointer-events: none; }
.vp.ruleaza.liniste { cursor: none; }
.vp-progres { position: relative; height: 22px; display: flex; align-items: center; cursor: pointer; touch-action: none; margin: 0 4px; }
.vp-progres::before { content: ""; position: absolute; left: 0; right: 0; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .28); transition: height .15s; }
.vp-tampon, .vp-umplut { position: absolute; left: 0; height: 5px; border-radius: 5px; transition: height .15s; }
.vp-tampon { background: rgba(255, 255, 255, .45); width: 0; }
.vp-umplut { background: linear-gradient(90deg, #ff6b81, #e23a55 40%, #c8102e); width: 0; box-shadow: 0 0 10px rgba(255, 80, 110, .6); }
.vp-buton { position: absolute; left: 0; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4), 0 0 0 4px rgba(226, 58, 85, .45); transform: scale(.8); transition: transform .15s; }
.vp-progres:hover::before, .vp-progres:hover .vp-tampon, .vp-progres:hover .vp-umplut, .vp.trage .vp-progres::before, .vp.trage .vp-tampon, .vp.trage .vp-umplut { height: 7px; }
.vp-progres:hover .vp-buton, .vp.trage .vp-buton { transform: scale(1.1); }
.vp-rand { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.vp-rand button, .vp-rand a { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: #fff; display: grid; place-items: center;
  cursor: pointer; transition: background .15s; text-decoration: none; flex: none; }
.vp-rand button:hover, .vp-rand a:hover { background: rgba(255, 255, 255, .16); }
.vp-rand svg { width: 22px; height: 22px; }
.vp-timp { font: 700 13px/1 var(--f-text); letter-spacing: .02em; font-variant-numeric: tabular-nums; opacity: .95; margin-left: 2px; white-space: nowrap; }
.vp-spatiu { flex: 1; }
.vp .i-pauza, .vp .i-mut { display: none; }
.vp.ruleaza .vp-pp .i-play { display: none; }
.vp.ruleaza .vp-pp .i-pauza { display: block; }
.vp.mut .vp-sunet .i-sunet { display: none; }
.vp.mut .vp-sunet .i-mut { display: block; }
@media (max-width: 380px) { .vp-rand button, .vp-rand a { width: 36px; height: 36px; } .vp-timp { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .vp-mare::before { animation: none; } }