/* ============================================================
   publiek/upload.css - de pagina waar je een video instuurt.
   Hoort bij templates/public/upload.html.
   ============================================================ */

.upload {
    max-width: 1080px;
    margin: 0 auto;
    padding-top: 30px;
}

/* 'hidden' moet ook winnen van display:grid en display:flex hieronder */
.upload [hidden] { display: none !important; }

/* ------------------------------------------------- de titel */
.upload-kop { margin-bottom: 22px; }
.upload-kop h1 {
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    letter-spacing: -.5px;
}
.upload-kop h1 span {
    display: inline-block;
    padding-bottom: .12em;   /* ruimte voor de staart van de g */
    background: linear-gradient(90deg, #8b3dff 0%, #4f6bff 48%, #38bdf8 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.upload-kop p { margin: 6px 0 0; color: #e3e6ff; font-size: 16px; }
.upload-terug {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 13.5px;
    color: var(--paars-licht);
    text-decoration: none;
}
.upload-terug:hover { text-decoration: underline; }

/* -------------------------------- formulier links, uitleg rechts */
.upload-indeling {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
}

.upload-vak {
    padding: 20px 22px;
    border: 1px solid var(--rand-neon);
    border-radius: var(--rond);
    background: linear-gradient(180deg, #0e1238 0%, #090c28 100%);
    box-shadow: var(--gloed);
}

.upload-veld { position: relative; margin-bottom: 16px; min-width: 0; }
.upload-veld label {
    display: block;
    margin-bottom: 5px;
    font-size: 13.5px;
    font-weight: 700;
}
.upload-veld small { display: block; margin-top: 5px; font-size: 12.5px; color: var(--tekst-zacht); }

.upload-veld input[type="text"],
.upload-veld select,
.upload-veld input[type="file"] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--rand);
    border-radius: var(--rond-klein);
    background: var(--vlak-diep);
    color: var(--tekst);
    font: inherit;
    font-size: 14.5px;
    outline: 0;
}
.upload-veld input[type="file"] { height: auto; padding: 8px 10px; }
.upload-veld input::placeholder { color: var(--tekst-dof); }
.upload-veld input:focus,
.upload-veld select:focus { border-color: var(--paars-licht); box-shadow: 0 0 0 2px rgba(124, 58, 237, .3); }
.upload-veld select:disabled { color: var(--tekst-dof); }
.upload-veld input::file-selector-button {
    margin-right: 12px;
    padding: 6px 12px;
    border: 1px solid var(--rand-neon);
    border-radius: 6px;
    background: var(--vlak-hoog);
    color: var(--tekst);
    font: inherit;
    cursor: pointer;
}

/* De knop voor het bestand. Die van de browser staat in de taal van de
   bezoeker ("Bestand kiezen"); met JavaScript aan (.met-js, gezet door
   upload.js) tonen we een eigen Engelse knop en staat de echte er
   onzichtbaar achter. Het toetsenbord komt nog steeds op de echte. */
.upload-veld .upload-bestand-knop,
.upload-veld .upload-bestand-naam { display: none; }
.upload.met-js .upload-bestand {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 6px 10px;
    border: 1px solid var(--rand);
    border-radius: var(--rond-klein);
    background: var(--vlak-diep);
}
.upload.met-js .upload-bestand input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}
.upload.met-js .upload-bestand-knop {
    display: inline-block;
    flex: none;
    margin: 0;
    padding: 6px 12px;
    border: 1px solid var(--rand-neon);
    border-radius: 6px;
    background: var(--vlak-hoog);
    color: var(--tekst);
    font-size: 14.5px;
    font-weight: 400;
}
.upload.met-js .upload-bestand-naam {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14.5px;
    color: var(--tekst-zacht);
}
.upload.met-js .upload-bestand.gekozen .upload-bestand-naam { color: var(--tekst); }
.upload.met-js .upload-bestand:focus-within { border-color: var(--paars-licht); box-shadow: 0 0 0 2px rgba(124, 58, 237, .3); }
.upload.met-js .upload-bestand:hover .upload-bestand-knop { border-color: var(--paars-licht); }

.upload-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* de lijst met spellen die onder het zoekvak verschijnt */
.upload-keuzes {
    position: absolute;
    left: 0; right: 0;
    top: 66px;
    z-index: 20;
    margin: 0;
    padding: 4px;
    list-style: none;
    border: 1px solid var(--rand-neon);
    border-radius: var(--rond-klein);
    background: #0b0f30;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .6);
    max-height: 300px;
    overflow-y: auto;
}
.upload-keuzes li {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}
.upload-keuzes li small { display: inline; margin-left: 8px; color: var(--tekst-zacht); }
.upload-keuzes li:hover,
.upload-keuzes li[aria-selected="true"] { background: rgba(124, 58, 237, .32); }
.upload-keuzes li.geen { color: var(--tekst-zacht); cursor: default; background: none; }

.upload-vink {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 16px;
    font-size: 14px;
    cursor: pointer;
}
.upload-vink input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--paars); }

/* het vinkje "My game is not in the list" onder het zoekvak, en de regel
   die erbij komt als het aan staat. Zonder JavaScript doet het vinkje
   niets (het hele formulier niet), dus dan staat het er niet. */
.upload-veld .upload-nieuw { display: none; margin: 10px 0 0; font-weight: 600; }
.upload.met-js .upload-veld .upload-nieuw { display: flex; }
.upload-geen { margin: 8px 0 0; font-size: 13.5px; color: var(--goud); }
.upload-nieuw-uitleg {
    margin: 8px 0 0;
    padding: 9px 12px;
    border: 1px solid var(--rand-neon);
    border-radius: var(--rond-klein);
    background: rgba(124, 58, 237, .14);
    font-size: 13.5px;
    color: #e3e6ff;
    overflow-wrap: anywhere;
}
.upload-nieuw-uitleg b { color: #fff; }

.upload-knop { width: 100%; padding: 12px; font-size: 15.5px; cursor: pointer; }
.upload-knop:disabled { opacity: .5; cursor: wait; }

.upload-melding {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid rgba(239, 83, 80, .7);
    border-radius: var(--rond-klein);
    background: rgba(239, 83, 80, .13);
    color: #ffd9d7;
    font-size: 14px;
}

/* ---------------------------------------------- de uitleg */
.upload-uitleg {
    padding: 18px 20px;
    border: 1px solid var(--rand);
    border-radius: var(--rond);
    background: rgba(11, 15, 46, .72);
    font-size: 14px;
    color: #e3e6ff;
}
.upload-uitleg h2 { margin-bottom: 8px; font-size: 16.5px; }
.upload-uitleg h2:not(:first-child) { margin-top: 18px; }
.upload-uitleg ol, .upload-uitleg ul { margin: 0; padding-left: 20px; }
.upload-uitleg li { margin-bottom: 7px; }
.upload-uitleg li::marker { color: var(--paars-licht); font-weight: 700; }

/* ------------------------------------------- de voortgang */
.upload-voortgang h2 { font-size: 19px; margin-bottom: 14px; word-break: break-word; }
.upload-balk {
    height: 18px;
    border: 1px solid var(--rand-neon);
    border-radius: 999px;
    background: var(--vlak-diep);
    overflow: hidden;
}
.upload-balk i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #8b3dff, #4f6bff 60%, #38bdf8);
    box-shadow: 0 0 14px rgba(124, 92, 255, .7);
    transition: width .3s;
}
.upload-stand { margin: 10px 0 0; font-size: 15px; }
.upload-stand b { font-size: 20px; margin-right: 8px; font-variant-numeric: tabular-nums; }
.upload-stand span { color: var(--tekst-zacht); }
.upload-let-op { margin: 10px 0 14px; font-size: 13.5px; color: var(--goud); }
.upload-voortgang .upload-knop { width: auto; padding: 10px 22px; }

/* ----------------------------------------------- klaar */
.upload-klaar { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 22px; text-align: center; }
.upload-klaar-icoon { color: var(--goud); filter: drop-shadow(0 0 12px rgba(251, 191, 36, .6)); }
.upload-klaar h2 { font-size: 24px; }
.upload-klaar p { margin: 0 0 12px; color: #e3e6ff; max-width: 460px; }
.upload-klaar .knop-neon { padding: 10px 22px; }
.upload-klaar .upload-terug { margin: 8px 0 0; }

@media (max-width: 860px) {
    .upload-indeling { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
    .upload { padding-top: 20px; }
    .upload-vak { padding: 16px 14px; }
    .upload-rij { grid-template-columns: 1fr; }
}

/* Zelf een uploadcode aanvragen */
.upload-aanvraag { margin-bottom: 22px; }
.upload-aanvraag h2 { margin: 0 0 6px; font-size: 20px; }
.upload-aanvraag p { margin: 0 0 14px; color: var(--tekst-zacht); }
.upload-melding-goed { color: #8dffb3; }
.upload-melding-fout { color: #ff9aa8; }
.niet-invullen { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Wachtwoordmanagers (Bitwarden) zetten hun icoon en menu verkeerd bij 'zoom' op body. Hier zit de vergroting op html. */
html { zoom: 1; }
body { zoom: 1; }