/**
 * Skin Video.js adaptat paletei site-ului Hyperuricemia.
 *
 * Se incarca DUPA video-js.min.css si doar suprascrie culorile si formele,
 * nu rescrie layout-ul player-ului.
 *
 * Variabilele --color-* vin din dist/index.css; valorile de rezerva sunt trecute
 * ca fallback in fiecare var(), ca skin-ul sa arate corect si daca bundle-ul lipseste.
 */

/* ---------- Player ---------- */

.video-js {
    width: 100%;
    font-family: inherit;
    background-color: var(--color-red, #3d1e0c);
}

.video-js .vjs-poster img {
    object-fit: cover;
}

/* ---------- Butonul mare de play ---------- */

/*
 * Video.js centreaza butonul cu top/left 50% plus margini negative calculate in em
 * din dimensiunile lui implicite. Fiindca ii dam alte dimensiuni, marginile alea
 * nu mai corespund: le anulam si centram cu transform, care nu depinde de marime.
 * Atentie: orice regula care mai atinge transform trebuie sa repete si translate-ul.
 */
.video-js .vjs-big-play-button {
    width: 90px;
    height: 90px;
    line-height: 90px;
    margin: 0;
    transform: translate(-50%, -50%);
    border: 0;
    border-radius: 50%;
    background-color: var(--color-yellow, #fab818);
    color: var(--color-red, #3d1e0c);
    box-shadow: 0 6px 24px rgba(61, 30, 12, 0.35);
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:focus {
    background-color: var(--color-orange, #fba803);
    transform: translate(-50%, -50%) scale(1.06);
}

.video-js .vjs-big-play-button:focus-visible {
    outline: 3px solid var(--color-white, #ffffff);
    outline-offset: 3px;
}

@media screen and (max-width: 575px) {
    .video-js .vjs-big-play-button {
        width: 64px;
        height: 64px;
        line-height: 64px;
    }
}

/* ---------- Bara de control ---------- */

/*
 * Doar culoare. Inaltimea barei ramane cea implicita (3em): Video.js are reguli
 * care depind de ea (.vjs-time-control { line-height: 3em }), iar schimbarea ei
 * doar aici desincronizeaza pe verticala textele fata de iconuri.
 */
.video-js .vjs-control-bar {
    background-color: rgba(61, 30, 12, 0.85);
    color: var(--color-white, #ffffff);
}

.video-js .vjs-control:focus-visible {
    outline: 2px solid var(--color-yellow, #fab818);
    outline-offset: -2px;
    text-shadow: none;
}

/*
 * Nu punem line-height pe .vjs-svg-icon: iconurile sunt pozitionate absolut si
 * centrate cu transform: translate(-50%,-50%), cu line-height:1 pus intentionat
 * de Video.js. Orice alta valoare le deplaseaza pe verticala.
 */

.video-js .vjs-control:hover {
    color: var(--color-yellow, #fab818);
}

/* ---------- Progres si volum ---------- */

.video-js .vjs-slider {
    background-color: rgba(255, 255, 255, 0.25);
}

.video-js .vjs-load-progress,
.video-js .vjs-load-progress div {
    background: rgba(253, 232, 190, 0.4);
}

.video-js .vjs-play-progress,
.video-js .vjs-volume-level {
    background-color: var(--color-yellow, #fab818);
}

.video-js .vjs-play-progress:before {
    color: var(--color-yellow, #fab818);
}

.video-js .vjs-progress-control:hover .vjs-progress-holder {
    font-size: 1.4em;
}

.video-js .vjs-time-tooltip,
.video-js .vjs-mouse-display .vjs-time-tooltip {
    background-color: var(--color-yellow, #fab818);
    color: var(--color-red, #3d1e0c);
    font-family: inherit;
}

/* ---------- Meniuri (viteza de redare, subtitrari) ---------- */

.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    background-color: rgba(61, 30, 12, 0.92);
    border-radius: 8px;
}

.video-js .vjs-menu li {
    font-size: 13px;
    text-transform: none;
}

.video-js .vjs-menu li.vjs-selected,
.video-js .vjs-menu li.vjs-selected:focus,
.video-js .vjs-menu li.vjs-selected:hover {
    background-color: var(--color-yellow, #fab818);
    color: var(--color-red, #3d1e0c);
}

.video-js .vjs-menu li:focus,
.video-js .vjs-menu li:hover {
    background-color: rgba(250, 184, 24, 0.3);
}

/* ---------- Spinner si erori ---------- */

.video-js .vjs-loading-spinner {
    border-color: var(--color-yellow, #fab818);
}

.video-js .vjs-error-display .vjs-modal-dialog-content {
    font-family: inherit;
    font-size: 16px;
}

/* ---------- Asezare in pagina ---------- */
/*
 * In mod normal astea ar sta in app.scss, dar bundle-ul Parcel nu poate fi
 * recompilat fara Node, asa ca regulile de layout pentru player stau aici.
 * Marginea de 30px o preia de la regula existenta .videoSection iframe din app.scss.
 */

.videoWrapper {
    margin: 30px 0;
}

/*
 * Spatiere intre lista de pasi si videouri.
 * .steps .stepRow are margin-bottom:-40px (si pe ultimul rand), asa ca marginile
 * fratilor se aduna cu cea negativa: 80 - 40 = 40px reali pe desktop.
 * Sub 700px stepRow trece pe margin-bottom:15px, pozitiv, deci marginile se
 * colapseaza la maximul dintre ele: 40px ramane tot 40px.
 */
.whyVideos {
    margin-top: 80px;
}

@media screen and (max-width: 700px) {
    .whyVideos {
        margin-top: 40px;
    }
}

.videoSection .videoWrapper {
    position: relative;
    z-index: 3;
}

.videoTitle {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  min-height: 50px;
}

@media screen and (max-width: 1250px) {
    .videoTitle {
        font-size:16px;
    }
}

@media screen and (max-width: 1000px) {
    .videoTitle {
        min-height:70px;
        font-size:16px;
    }
}

@media screen and (max-width: 767px) {
    .videoTitle {
        min-height:0;
        font-size:18px;
    }
}