/* MODIFICARE 9 — glisoare și comportament potrivite pentru telefon (și desktop). */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Glisoare desenate de noi, ca să arate la fel în Chrome, Safari și Firefox.
   --fill (setat de mobil.js) = cât din bară este colorat. */
input[type='range'] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 30px;
    margin: 8px 0 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    /* mișcarea în sus/jos derulează pagina; cea stânga/dreapta mută glisorul */
    touch-action: pan-y;
    --fill: 50%;
}
input[type='range']::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(
        to right,
        var(--orange) 0,
        var(--orange) var(--fill),
        #c9c8bd var(--fill),
        #c9c8bd 100%
    );
}
input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin-top: -8px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: var(--orange);
    box-shadow: 0 1px 4px rgba(41, 46, 43, 0.35);
    transition: transform 0.12s;
}
input[type='range']:active::-webkit-slider-thumb {
    transform: scale(1.15);
}
input[type='range']::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: #c9c8bd;
}
input[type='range']::-moz-range-progress {
    height: 4px;
    border-radius: 2px;
    background: var(--orange);
}
input[type='range']::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: var(--orange);
    box-shadow: 0 1px 4px rgba(41, 46, 43, 0.35);
}
input[type='range']:focus {
    outline: none;
}
input[type='range']:focus-visible::-webkit-slider-thumb {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}
input[type='range']:focus-visible::-moz-range-thumb {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}
.hero-art-bottom input[type='range'] {
    margin: 0;
}

/* Pe ecrane tactile: zonă de atingere mai mare și mâner mai mare. */
@media (pointer: coarse) {
    input[type='range'] {
        height: 44px;
        margin-top: 2px;
    }
    input[type='range']::-webkit-slider-runnable-track {
        height: 6px;
        border-radius: 3px;
    }
    input[type='range']::-webkit-slider-thumb {
        width: 28px;
        height: 28px;
        margin-top: -11px;
    }
    input[type='range']::-moz-range-track,
    input[type='range']::-moz-range-progress {
        height: 6px;
        border-radius: 3px;
    }
    input[type='range']::-moz-range-thumb {
        width: 22px;
        height: 22px;
    }
    .range-limits {
        margin-top: 0;
    }
    /* În Safari pe iPhone, un câmp cu text mai mic de 16px face zoom pe toată pagina. */
    .cpp-editor,
    select {
        font-size: 16px;
    }
}

/* Pe telefon nu există „hover”: butoanele nu mai rămân ridicate după atingere. */
@media (hover: none) {
    .button:hover {
        transform: none;
    }
    .button:not(.primary):hover,
    .icon-button:hover,
    .zoom-controls button:hover,
    .quiz-options button:hover,
    .dim-presets button:hover {
        background: transparent;
    }
    .button.primary:hover {
        background: var(--orange);
    }
}