/* ================================================================
   YouTube Converter
   MY-Y5.ORG

   Main stylesheet
================================================================ */


/* ================================================================
   Theme
================================================================ */

:root {

    --bg: #090711;

    --panel: #151122;
    --panel2: #1b162b;

    --purple: #6f4bd8;
    --purple2: #8b6be8;

    --text: #f5f2ff;
    --muted: #aaa1bd;

    --border: #2d2540;

    --danger: #ef4f63;
    --danger-dark: #3a1820;
    --danger-border: #6b2634;

}


/* ================================================================
   Global
================================================================ */

* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;
}


body {

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% -10%,
            #2a1c50 0,
            #120d20 38%,
            var(--bg) 72%
        );

    color: var(--text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* ================================================================
   Page
================================================================ */

.page {

    min-height: 100vh;

    display: flex;
    flex-direction: column;

}


/* ================================================================
   Main card
================================================================ */

.card {

    width: min(
        620px,
        calc(100% - 30px)
    );

    margin:
        8vh auto
        30px;

    padding: 32px;

    background:
        rgba(21, 17, 34, 0.92);

    border:
        1px solid var(--border);

    border-radius: 20px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.35);

}


/* ================================================================
   Icon
================================================================ */

.icon {

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    background:
        rgba(111, 75, 216, 0.16);

    color: var(--purple2);

    font-size: 25px;

    border-radius: 14px;

}


/* ================================================================
   Heading
================================================================ */

h1 {

    margin:
        18px 0
        6px;

    font-size: 29px;

}


.sub {

    margin:
        0 0
        28px;

    color: var(--muted);

}


/* ================================================================
   Labels
================================================================ */

label {

    display: block;

    margin-bottom: 8px;

    color: #d9d2e7;

    font-size: 13px;

}


/* ================================================================
   URL input
================================================================ */

input[type="url"] {

    width: 100%;

    padding:
        14px 15px;

    background: #0e0b17;

    color: #ffffff;

    border:
        1px solid var(--border);

    border-radius: 11px;

    outline: none;

    font-size: 14px;

}


input[type="url"]:focus {

    border-color:
        var(--purple);

}


/* ================================================================
   MP4 / MP3 options
================================================================ */

.options {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

    margin:
        16px 0;

}


.option {

    margin: 0;

    padding: 14px;

    display: flex;

    align-items: flex-start;

    gap: 10px;

    background:
        var(--panel2);

    border:
        1px solid var(--border);

    border-radius: 12px;

    cursor: pointer;

}


.option:has(input:checked) {

    border-color:
        var(--purple);

    box-shadow:
        0 0 0 1px
        rgba(111, 75, 216, 0.25)
        inset;

}


.option input {

    margin-top: 3px;

    accent-color:
        var(--purple);

}


.option span {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.option small {

    color:
        var(--muted);

}


/* ================================================================
   MP4 quality panel
================================================================ */

.quality-panel {

    margin:
        0 0
        16px;

    padding: 14px;

    background:
        #100d19;

    border:
        1px solid var(--border);

    border-radius: 12px;

}


.quality-head {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 10px;

}


.quality-head label {

    margin-bottom: 3px;

}


.quality-head small {

    color:
        var(--muted);

    font-size: 11px;

}


/* ================================================================
   Select
================================================================ */

select {

    width: 100%;

    padding: 12px;

    background:
        #0e0b17;

    color:
        #ffffff;

    border:
        1px solid var(--border);

    border-radius: 10px;

    outline: none;

    font-size: 14px;

}


select:focus {

    border-color:
        var(--purple);

}


/* ================================================================
   General buttons
================================================================ */

button {

    width: 100%;

    padding: 14px;

    background:
        var(--purple);

    color:
        #ffffff;

    border: 0;

    border-radius: 11px;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

}


button:hover {

    background:
        var(--purple2);

}


button:disabled {

    opacity: 0.55;

    cursor: not-allowed;

}


/* ================================================================
   Secondary button
================================================================ */

button.secondary {

    width: auto;

    padding:
        9px 12px;

    background:
        #241c39;

    border:
        1px solid var(--border);

    border-radius: 10px;

    font-size: 12px;

    white-space: nowrap;

}


button.secondary:hover {

    background:
        #30234c;

}


/* ================================================================
   Conversion status
================================================================ */

.status {

    margin-top: 18px;

    padding: 15px;

    display: flex;

    align-items: center;

    gap: 12px;

    background:
        #100d19;

    border:
        1px solid var(--border);

    border-radius: 12px;

}


.status-main {

    flex: 1;

    min-width: 0;

}


.status-row {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 10px;

}


.status-row strong {

    font-size: 14px;

}


.status-row p {

    margin:
        5px 0 0;

    color:
        var(--muted);

    font-size: 13px;

}


/* ================================================================
   Percentage
================================================================ */

#percent {

    color:
        #c6b7ff;

    font-size: 12px;

    font-weight: 700;

}


/* ================================================================
   Progress
================================================================ */

.progress {

    height: 8px;

    margin-top: 12px;

    overflow: hidden;

    background:
        #29213a;

    border-radius: 999px;

}


#progressBar {

    width: 0;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--purple),
            var(--purple2)
        );

    transition:
        width 0.35s ease;

}


/* ================================================================
   Speed / ETA
================================================================ */

.eta {

    height: 16px;

    margin-top: 7px;

    color:
        #817791;

    font-size: 11px;

}


/* ================================================================
   Cancel button
================================================================ */

button.cancel {

    width: auto;

    min-width: 82px;

    padding:
        9px 12px;

    background:
        #251a2a;

    color:
        #efb4bd;

    border:
        1px solid #5a3040;

    border-radius: 10px;

    font-size: 12px;

}


button.cancel:hover {

    background:
        #35202e;

}


/* ================================================================
   Conversion result
================================================================ */

.result {

    margin-top: 18px;

    padding: 15px;

    display: block;

    background:
        #100d19;

    border:
        1px solid var(--border);

    border-radius: 12px;

}


.result a {

    color:
        #b8a4ff;

    text-decoration:
        none;

    font-weight: 700;

}


.result a:hover {

    text-decoration:
        underline;

}


/* ================================================================
   Clear button
================================================================ */

.clear-wrap {

    width: 100%;

    margin-top: 12px;

}


button.btn-clear {

    width: 100%;

    padding:
        12px 18px;

    background:
        var(--danger);

    color:
        #ffffff;

    border:
        1px solid var(--danger);

    border-radius: 11px;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

}


button.btn-clear:hover {

    background:
        #ff6878;

    border-color:
        #ff6878;

}


/*
 * Disabled Clear button.
 *
 * It remains visibly red but muted
 * until a video has been loaded.
 */

button.btn-clear:disabled {

    background:
        var(--danger-dark);

    color:
        #9b626c;

    border-color:
        var(--danger-border);

    opacity: 0.65;

    cursor:
        not-allowed;

}


/* ================================================================
   Hidden
================================================================ */

.hidden {

    display:
        none !important;

}


/* ================================================================
   Note
================================================================ */

.note {

    margin:
        22px 0 0;

    color:
        #8f879f;

    font-size: 11px;

    line-height:
        1.55;

}


.note strong {

    color:
        #c0b4d2;

}


/* ================================================================
   Error
================================================================ */

.error {

    color:
        var(--danger);

}


.cancelled {

    color:
        #c7b8df;

}


/* ================================================================
   Mobile
================================================================ */

@media (max-width: 520px) {

    .card {

        padding:
            22px;

    }


    .options {

        grid-template-columns:
            1fr;

    }


    h1 {

        font-size:
            25px;

    }


    .quality-head {

        align-items:
            stretch;

        flex-direction:
            column;

    }


    button.secondary {

        width:
            100%;

    }


    .status {

        align-items:
            stretch;

        flex-direction:
            column;

    }


    button.cancel {

        width:
            100%;

    }

}