/* ==========================================================================
   Galanor site-theme glue for the vote app front-end.
   The shared site stylesheet (/css/main.min.css) provides .card, .card-header,
   .button, .form-control, .main-container, etc. This only adds page-level and
   vote-specific tweaks. Paths are absolute from the domain root (the site is
   served at /, the vote app at /vote/).
   ========================================================================== */

/* Page background, header, navigation and sticky footer come from the shared
   site partials (/includes/partials/) and /css/galanor-theme.css. */

/* Vote entry form: username field + Continue button on one row. */
.vote-form {
    max-width: 620px;
    margin: 0 auto;
}
.vote-form .form-control {
    margin-bottom: 0;
}
.vote-form .button {
    white-space: nowrap;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Vote-link buttons (injected by AJAX into #buttons). */
#buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    align-items: stretch;
}
#buttons .button {
    min-width: 170px;
    flex-direction: column;
    line-height: 1.25;
    padding: .7rem 1.25rem;
}
#buttons .button small {
    font-size: .7rem;
    opacity: .8;
}
.vote-btn--cooldown {
    opacity: .5;
    pointer-events: none;
}

/* Top voters list. */
.top-voters .rank {
    color: #f90;
}

a.btn-change-user {
    display: inline-block;
    padding: 10px 24px;
    font-weight: 700;
    letter-spacing: .3px;
    text-decoration: none;
    color: #f90 !important;
    background: transparent !important;
    border: 1px solid #7a5a2e !important;
    border-radius: 4px;
    transition: background .15s, border-color .15s, color .15s;
}
a.btn-change-user:hover,
a.btn-change-user:focus {
    color: #ffb033 !important;
    background: rgba(255, 153, 0, .12) !important;
    border-color: #f90 !important;
}