/*
 * Głosowanie: formularz na karcie finalisty i ekran po kliknięciu w link z maila.
 *
 * Mobile-first — większość głosów przyjdzie z telefonu. Kolory z motywu przez zmienne,
 * każda z wartością zapasową, żeby wtyczka wyglądała znośnie także pod innym motywem.
 */
.dr-vote {
    --v-ink:    var(--dr-ink, #16202F);
    --v-soft:   var(--dr-ink-soft, #5A6B7F);
    --v-line:   var(--dr-line, #C8CFD6);
    --v-accent: var(--dr-accent, #2989CE);
    --v-accent-d: #1F6FA8;
    --v-forest: var(--dr-forest, #2C5E3A);
    --v-err:    var(--dr-cinnabar, #B03A2E);
    --v-note:   var(--dr-note, "Arial Narrow", sans-serif);

    max-width: 34rem;
    margin: 3rem 0 0;
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--v-line);
    border-radius: 6px;
    color: var(--v-ink);
}

.dr-vote__title {
    margin: 0 0 .75rem;
    font-size: 1.25rem;
    line-height: 1.3;
}

/* Nazwa drzewa: to jest ostatni moment, w którym człowiek może zauważyć pomyłkę. */
/* Nazwa drzewa pochodzi ze zgłoszenia — może być jednym ciągiem bez spacji. Bez tego
   wychodzi poza ramkę i rozpycha formularz na telefonie (patrz theme.css, siatka kandydatur). */
.dr-vote__tree {
    overflow-wrap: anywhere;
    margin: 0 0 1.25rem;
    padding: .7rem .9rem;
    background: rgba(41, 137, 206, .08);
    border-left: 3px solid var(--v-accent);
    font-size: 1.0625rem;
    font-weight: 600;
}

.dr-vote p { line-height: 1.6; margin: 0 0 1rem; }

.dr-vote__label {
    display: block;
    margin: 0 0 .4rem;
    font-weight: 600;
}

/* Bez `border-box` padding i ramka dochodzą do 100% szerokości NA ZEWNĄTRZ — pole wychodziło
   poza ramkę głosowania i poza ekran telefonu. Ten sam błąd był w formularzu zgłoszenia. */
.dr-vote__input {
    box-sizing: border-box;
    width: 100%;
    padding: .8rem .85rem;
    font: inherit;
    color: inherit;
    border: 1px solid var(--v-line);
    border-radius: 4px;
    background: #fff;
}
.dr-vote__input:focus-visible {
    outline: 2px solid var(--v-accent);
    outline-offset: 1px;
}

.dr-vote__note,
.dr-vote__gdpr,
.dr-vote__hint {
    font-size: .875rem;
    line-height: 1.55;
    color: var(--v-soft);
}
.dr-vote__note { margin: .75rem 0 1.25rem; }
.dr-vote__gdpr { margin: 1.25rem 0 0; }

/* Bardziej szczegółowo niż zwykły przycisk motywu — inaczej motyw wygrywa specyficznością. */
.dr-vote .dr-vote__submit {
    display: block;
    width: 100%;
    padding: .9rem 1.25rem;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--v-forest);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}
.dr-vote .dr-vote__submit:hover { background: #244C2F; }
.dr-vote .dr-vote__submit:disabled { background: #9AA59C; cursor: not-allowed; }
.dr-vote__czeka { margin: 0 0 .5rem; font-weight: 600; }
.dr-vote .dr-vote__submit:focus-visible {
    outline: 2px solid var(--v-accent);
    outline-offset: 2px;
}

.dr-vote__error {
    padding: .7rem .9rem;
    margin: 0 0 1rem;
    border-left: 3px solid var(--v-err);
    background: rgba(176, 58, 46, .07);
    color: var(--v-err);
    font-size: .9375rem;
}

/* Pułapka na boty. `display:none` bywa przez nie pomijane, więc wynosimy pole poza ekran. */
.dr-vote__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.dr-vote--result { border-left: 3px solid var(--v-forest); }

@media (min-width: 40rem) {
    .dr-vote { padding: 2rem; }
    .dr-vote .dr-vote__submit { width: auto; }
}

/* ————— Głosowanie z listy finalistów *(user, 2026-10-05)* ————— */

/* Pole „Wybieram to drzewo" na dole kafelka. Kafelek jest kolumną, żeby pole stało na tej
   samej wysokości we wszystkich kafelkach wiersza, niezależnie od długości opisu. */
.dr-wybor .dr-card { display: flex; flex-direction: column; }
.dr-wybor .dr-card__link { flex: 1 0 auto; }

.dr-wybierz {
    --w-forest: var(--dr-forest, #2C5E3A);
    --w-line:   var(--dr-line, #C8CFD6);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin: .5rem 1.25rem 1.25rem;
    min-height: 2.9rem;           /* palec, nie kursor */
    padding: .55rem 1rem;
    border: 2px solid var(--w-forest);
    border-radius: 4px;
    color: var(--w-forest);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.dr-wybierz__pole {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--w-forest);
}
/* Zaznaczone: pełne tło — widać z daleka, które kafelki są w wyborze. */
.dr-wybierz:has(.dr-wybierz__pole:checked),
.dr-wybierz--wlaczony {
    background: var(--w-forest);
    color: #fff;
}
.dr-wybierz__wybrane { display: none; }
.dr-wybierz:has(.dr-wybierz__pole:checked) .dr-wybierz__napis { display: none; }
.dr-wybierz:has(.dr-wybierz__pole:checked) .dr-wybierz__wybrane { display: inline; }
.dr-wybierz:has(.dr-wybierz__pole:disabled) { opacity: .45; cursor: not-allowed; }
.dr-wybierz:focus-within,
.dr-wybierz--karta:focus-visible { outline: 2px solid var(--dr-accent, #2989CE); outline-offset: 2px; }

.dr-card--wybrana { outline: 3px solid var(--dr-forest, #2C5E3A); outline-offset: -1px; }

.dr-wybierz--karta { display: inline-flex; margin: .25rem 0 0; }

/* Po wysłaniu: ten ekran jest jedynym znakiem, że trzeba jeszcze zajrzeć do poczty —
   nie może wyglądać jak kolejny akapit pod listą *(user, 2026-10-09)*. */
.dr-vote__done {
    padding: 1.25rem 1.5rem;
    background: var(--dr-moss, #DCEDD3);
    border-left: .4rem solid var(--dr-forest, #2C5E3A);
    border-radius: .25rem;
    scroll-margin-top: 5rem;
}
.dr-vote__done .dr-vote__title {
    margin-top: 0;
    /* Krój tekstu, nie cienki krój nagłówków — ten tytuł ma być widoczny od pierwszego rzutu oka. */
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dr-forest, #2C5E3A);
}
/* Akapity mają grubość 300, więc `bolder` dałoby ledwie 400. */
.dr-vote__done strong { font-weight: 700; }
.dr-vote__done p:last-child { margin-bottom: 0; }
/* Adres w osobnej linii, duży — część głosujących słabo widzi *(user, 2026-10-11)*. */
.dr-vote__adres-opis { margin: 0 0 .15rem; }
.dr-vote__adres {
    margin: 0 0 .35rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--v-ink);
    overflow-wrap: anywhere;
}
.dr-vote__adres-blad { margin: 0 0 1.25rem; }
.dr-vote__adres-blad a { font-weight: 700; }
.dr-vote__foldery { margin-top: 1rem; }
@media (max-width: 40rem) {
    .dr-vote__done { padding: 1rem 1.1rem; }
}

.dr-vote--krok { max-width: none; }
.dr-vote--krok > * { max-width: 34rem; }
.dr-vote__wybrane { font-weight: 600; }
.dr-vote__lista { margin: -.5rem 0 1rem; padding-left: 1.25rem; overflow-wrap: anywhere; }
.dr-vote__drzewa { margin: 0 0 1rem; padding: 0; list-style: none; font-weight: 600; overflow-wrap: anywhere; }

/* Pasek „Wybrane: X z N → Głosuj" przyklejony do dołu ekranu. */
.dr-pasek {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* Treść paska wyrównana z kolumną strony, nie przy krawędziach ekranu (desktop).
       Krawędzie kolumny podaje wybor.js; bez skryptu paska i tak nie widać. */
    padding: .7rem max(1rem, var(--pasek-prawa, 1rem)) calc(.7rem + env(safe-area-inset-bottom, 0px))
             max(1rem, var(--pasek-lewa, 1rem));
    background: var(--dr-forest, #2C5E3A);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .15);
}
.dr-pasek[hidden],
.dr-krok-widoczny .dr-pasek { display: none; }
.dr-pasek__dalej {
    padding: .5rem 1.1rem;
    border-radius: 4px;
    background: #fff;
    color: var(--dr-forest, #2C5E3A);
    text-decoration: none;
}
.dr-pasek__dalej::after { content: " →"; }
/* Miejsce na pasek, żeby nie zasłaniał stopki. */
.dr-z-paskiem { padding-bottom: 4rem; }