/* HSA eVote — Shareholder voting portal */

.vote-body {
    background: linear-gradient(165deg, var(--hsa-gold-light) 0%, var(--evote-bg) 45%, #FAFAF8 100%);
    padding-top: var(--evote-safe-top);
    padding-bottom: calc(1rem + var(--evote-safe-bottom));
}

.vote-wrapper {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 1rem 1rem 2rem;
}

@media (min-width: 768px) {
    .vote-wrapper {
        max-width: 640px;
        padding: 2rem 1.5rem 3rem;
    }
}

@media (min-width: 992px) {
    .vote-wrapper { max-width: 720px; }
}

/* Wide layout — ballot page (iPad / laptop) */
.vote-wrapper--wide {
    max-width: 560px;
}

@media (min-width: 768px) {
    .vote-wrapper--wide {
        max-width: 880px;
        padding: 2rem 2rem 3rem;
    }
}

@media (min-width: 992px) {
    .vote-wrapper--wide { max-width: 960px; }
}

@media (min-width: 1200px) {
    .vote-wrapper--wide { max-width: 1080px; }
}

@media (min-width: 768px) {
    .vote-wrapper--wide .vote-header .hsa-logo-full {
        max-width: 380px;
    }
}

.vote-header {
    text-align: center;
    margin-bottom: 1rem;
    padding: 0.75rem 0 0.5rem;
}

/* ── Stepper ── */
.vote-stepper {
    margin-bottom: 1.25rem;
}

.vote-stepper-list {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0.75rem 0.5rem;
    background: var(--hsa-white);
    border-radius: 0.75rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(245, 184, 0, 0.25);
}

.vote-stepper-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    min-width: 0;
}

.vote-stepper-marker {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    background: #eee;
    color: var(--hsa-gray);
    border: 2px solid #ddd;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.vote-stepper-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--hsa-gray);
    text-align: center;
    line-height: 1.2;
    max-width: 4.5rem;
}

.vote-stepper-connector {
    flex: 1 1 auto;
    height: 2px;
    min-width: 0.75rem;
    max-width: 2.5rem;
    background: #ddd;
    margin: 0 0.25rem;
    margin-bottom: 1.1rem;
    border-radius: 1px;
}

.vote-stepper-connector.is-done {
    background: var(--hsa-gold);
}

.vote-stepper-item.is-active .vote-stepper-marker {
    background: var(--hsa-gold);
    border-color: var(--hsa-gold-dark);
    color: var(--hsa-black);
    box-shadow: 0 0 0 3px var(--hsa-gold-muted);
}

.vote-stepper-item.is-active .vote-stepper-label {
    color: var(--hsa-black);
}

.vote-stepper-item.is-done .vote-stepper-marker {
    background: var(--hsa-black);
    border-color: var(--hsa-black);
    color: var(--hsa-gold);
}

.vote-stepper-item.is-done .vote-stepper-label {
    color: var(--hsa-black-soft);
}

@media (min-width: 576px) {
    .vote-stepper-label {
        font-size: 0.75rem;
        max-width: none;
    }

    .vote-stepper-marker {
        width: 2.25rem;
        height: 2.25rem;
    }

    .vote-stepper-connector {
        max-width: 4rem;
    }
}

/* ── Help accordion ── */
.vote-help {
    margin-bottom: 1.25rem;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid rgba(245, 184, 0, 0.35);
}

.vote-help-item {
    border: none;
    background: var(--hsa-gold-light);
}

.vote-help-toggle {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--hsa-gold-darker) !important;
    background: var(--hsa-gold-light) !important;
    box-shadow: none !important;
    padding: 0.75rem 1rem;
}

.vote-help-toggle:not(.collapsed) {
    color: var(--hsa-black) !important;
    background: #fff !important;
}

.vote-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--hsa-gold);
    color: var(--hsa-black);
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 0.5rem;
    flex-shrink: 0;
}

.vote-help-body {
    font-size: 0.875rem;
    color: var(--hsa-black-soft);
    background: #fff;
    padding: 1rem 1.25rem !important;
}

.vote-help-steps,
.vote-help-list {
    padding-right: 1.25rem;
    margin-bottom: 0.75rem;
}

.vote-help-steps li,
.vote-help-list li {
    margin-bottom: 0.35rem;
    line-height: 1.55;
}

.vote-help-note {
    font-size: 0.8125rem;
    color: var(--hsa-gray);
    padding: 0.65rem 0.75rem;
    background: var(--hsa-gold-light);
    border-radius: 0.5rem;
    border-right: 3px solid var(--hsa-gold);
}

/* ── Ballot progress ── */
.vote-ballot-progress {
    margin-bottom: 1rem;
}

.vote-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.vote-progress-count {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--hsa-black);
}

.vote-progress-remaining {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--hsa-gold-darker);
}

.vote-progress-remaining.is-complete {
    color: var(--hsa-black);
}

.vote-progress-bar {
    height: 0.5rem;
    background: #e9ecef;
    border-radius: 1rem;
    overflow: hidden;
}

.vote-progress-bar .progress-bar {
    background: linear-gradient(90deg, var(--hsa-gold-dark), var(--hsa-gold));
    border-radius: 1rem;
    transition: width 0.35s ease;
}

.vote-jump-btn {
    margin-top: 0.75rem;
    min-height: 42px;
    font-weight: 600;
    border-color: var(--hsa-gold);
    color: var(--hsa-gold-darker);
}

.vote-jump-btn:hover {
    background: var(--hsa-gold-light);
    border-color: var(--hsa-gold-dark);
    color: var(--hsa-black);
}

/* Candidates grid — tablet / laptop */
.vote-candidates-grid {
    display: grid;
    gap: 0.875rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .vote-candidates-grid--multi {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .vote-ballot-card .vote-meeting-info {
        margin-bottom: 1.5rem;
    }
}

@media (min-width: 1200px) {
    .vote-candidates-grid--many {
        grid-template-columns: repeat(3, 1fr);
    }
}

.vote-candidate-pending.is-highlight {
    border-color: var(--hsa-gold) !important;
    animation: candidate-pulse 0.7s ease;
}

@keyframes candidate-pulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--hsa-gold-muted); }
    50% { box-shadow: 0 0 0 6px rgba(245, 184, 0, 0.35); }
}

@media (prefers-reduced-motion: reduce) {
    .vote-candidate-pending.is-highlight {
        animation: none;
        box-shadow: 0 0 0 3px var(--hsa-gold);
    }
}

/* ── Candidate states ── */
.vote-candidate-pending {
    border-style: dashed;
    border-color: #ced4da;
}

.vote-candidate-done {
    border-style: solid;
}

.vote-candidate-done::after {
    content: '✓';
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    width: 1.35rem;
    height: 1.35rem;
    background: var(--hsa-gold);
    color: var(--hsa-black);
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vote-candidate-collapsed::after {
    display: none;
}

.vote-candidate-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
}

.vote-candidate-identity {
    flex: 1 1 auto;
    min-width: 0;
}

.vote-candidate-choice-badge {
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 2rem;
    flex-shrink: 0;
    align-self: center;
}

.vote-candidate-choice-badge[hidden] {
    display: none !important;
}

.vote-choice-badge--agree {
    background: #d1e7dd;
    color: #0f5132;
    border: 1px solid #a3cfbb;
}

.vote-choice-badge--disagree {
    background: #fde8ea;
    color: #842029;
    border: 1px solid #f5c2c7;
}

.vote-candidate-collapsed-actions {
    display: none;
    flex-shrink: 0;
}

.vote-candidate-edit-btn {
    min-height: 2.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.vote-candidate-collapsed {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    min-height: auto;
    height: auto;
    align-self: start;
}

.vote-candidate-collapsed .vote-candidate-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

.vote-candidate-collapsed .vote-candidate-header {
    margin-bottom: 0;
    flex: 1 1 auto;
    align-items: center;
}

.vote-candidate-collapsed .vote-candidate-name {
    margin-bottom: 0;
    font-size: 0.9375rem;
}

.vote-candidate-collapsed .vote-candidate-title {
    font-size: 0.75rem;
    margin-bottom: 0.15rem;
}

.vote-candidate-collapsed .vote-choice-group {
    display: none !important;
}

.vote-candidate-collapsed .vote-candidate-collapsed-actions {
    display: block;
}

/* Editing — same visual as pending (full vote card), choice stays in radios */
.vote-candidate-editing:not(.vote-candidate-collapsed) {
    border-style: dashed !important;
    border-color: #ced4da !important;
    background: #fafbfc !important;
    box-shadow: none !important;
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
    padding-top: 1.25rem;
    height: 100%;
}

.vote-candidate-editing:not(.vote-candidate-collapsed)::after {
    display: none !important;
}

.vote-candidate-editing:has(input:checked) {
    border-color: #ced4da !important;
    box-shadow: none !important;
    background: #fafbfc !important;
}

.vote-candidate-editing .vote-candidate-choice-badge {
    display: none !important;
}

.vote-candidate-editing .vote-candidate-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.vote-candidate-editing .vote-candidate-header {
    margin-bottom: 0.875rem;
}

.vote-candidate-editing .vote-candidate-name {
    font-size: 1rem;
}

.vote-candidate-editing .vote-candidate-title {
    font-size: 0.8125rem;
}

.vote-candidate-editing .vote-candidate-collapsed-actions {
    display: none !important;
}

.vote-candidate-editing .vote-choice-group {
    display: grid !important;
}

.vote-candidate-current-hint {
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    margin: 0 0 0.75rem;
    padding: 0.45rem 0.75rem;
    border-radius: 0.5rem;
    line-height: 1.4;
}

.vote-candidate-current-hint[hidden] {
    display: none !important;
}

.vote-current-hint--agree {
    color: #0f5132;
    background: #f4fbf7;
    border: 1px solid #c3e6cb;
}

.vote-current-hint--disagree {
    color: #842029;
    background: #fff5f5;
    border: 1px solid #f5c2c7;
}

.vote-review-item--clickable {
    cursor: pointer;
    border-radius: 0.5rem;
    margin: 0 -0.35rem;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
    transition: background-color 0.15s ease;
}

.vote-review-item--clickable:hover,
.vote-review-item--clickable:focus-visible {
    background: var(--hsa-gold-light);
    outline: none;
}

.vote-review-item-hint {
    display: block;
    width: 100%;
    font-size: 0.75rem;
    color: var(--hsa-gray);
    margin-top: 0.15rem;
}

.vote-candidate {
    position: relative;
    padding-top: 1.25rem;
}

.vote-choice-group .btn-check + .btn span[aria-hidden="true"] {
    margin-left: 0.25rem;
    font-weight: 700;
}

/* ── Sticky footer ── */
.vote-ballot-card {
    overflow: visible;
}

.vote-card.vote-ballot-card {
    overflow: visible;
}

.vote-ballot-card .card-body {
    padding-bottom: 1.25rem !important;
}

@media (max-width: 767.98px) {
    .vote-ballot-card .card-body {
        padding-bottom: 0.5rem !important;
    }

    #ballotForm {
        padding-bottom: 0;
    }

    .vote-sticky-footer-spacer {
        height: calc(var(--vote-sticky-footer-offset) + var(--vote-sticky-footer-buffer));
        min-height: calc(9rem + var(--vote-sticky-footer-buffer));
        flex-shrink: 0;
        pointer-events: none;
    }

    .vote-body:has(.vote-ballot-card) {
        padding-bottom: calc(0.5rem + var(--evote-safe-bottom));
    }
}

.vote-sticky-hint {
    font-size: 0.8125rem;
    color: var(--hsa-gray);
    text-align: center;
    margin: 0 0 0.625rem;
    line-height: 1.4;
}

.vote-sticky-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    padding: 0.75rem 1rem calc(0.75rem + var(--evote-safe-bottom));
    margin-top: 0;
    border-top: 1px solid rgba(245, 184, 0, 0.4);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    max-height: 45vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
    .vote-sticky-footer-spacer {
        display: none;
    }
}

@media (min-width: 768px) {
    .vote-sticky-footer {
        position: sticky;
        left: auto;
        right: auto;
        backdrop-filter: none;
        background: linear-gradient(to top, #fff 90%, transparent);
        border-top: none;
        box-shadow: none;
        padding: 1rem 0 0;
        max-height: none;
        overflow: visible;
    }
}

#submitBtn.vote-btn-incomplete,
#submitBtn.vote-btn-incomplete:disabled {
    background-color: #fff;
    border: 2px solid var(--evote-danger);
    color: var(--evote-danger);
    opacity: 1;
    cursor: not-allowed;
}

#submitBtn.vote-btn-ready:not(:disabled) {
    background-color: var(--evote-success);
    border-color: var(--evote-success);
    color: #fff;
    box-shadow: 0 4px 14px rgba(25, 135, 84, 0.4);
}

#submitBtn.vote-btn-ready:not(:disabled):hover,
#submitBtn.vote-btn-ready:not(:disabled):focus {
    background-color: #157347;
    border-color: #146c43;
    color: #fff;
}

.vote-ballot-nudge {
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    color: #842029;
    background: #fde8ea;
    border: 1px solid #f5c2c7;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.vote-ballot-nudge[hidden] {
    display: none !important;
}

.vote-review-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding: 0.65rem 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
}

.vote-review-stat--agree {
    color: #0f5132;
}

.vote-review-stat--disagree {
    color: #842029;
}

/* ── Review modal (must be direct child of body, above backdrop) ── */
body.vote-modal-open {
    overflow: hidden;
}

body.vote-modal-open .vote-sticky-footer {
    visibility: hidden;
    pointer-events: none;
    z-index: 0 !important;
}

.modal-backdrop.show {
    z-index: 1055 !important;
}

#reviewModal.modal {
    z-index: 1065 !important;
}

#reviewModal.modal.show {
    pointer-events: auto;
}

#reviewModal .modal-dialog,
#reviewModal .modal-content,
#reviewModal .modal-footer .btn {
    pointer-events: auto;
}

#reviewModal .vote-review-dialog {
    max-height: calc(100dvh - 1.5rem);
    margin: 0.75rem auto;
}

.vote-review-modal {
    border-top: 3px solid var(--hsa-gold);
    border-radius: var(--evote-card-radius);
    max-height: calc(100dvh - 1.5rem);
    display: flex;
    flex-direction: column;
}

.vote-review-modal .modal-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 0.75rem;
}

.vote-review-list-wrap {
    flex: 1 1 auto;
    min-height: 8rem;
    max-height: min(42dvh, 22rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin-bottom: 0.75rem;
    padding: 0 0.35rem;
    border: 1px solid #e9ecef;
    border-radius: 0.625rem;
    background: #fafbfc;
    scrollbar-gutter: stable;
    box-shadow: inset 0 -10px 12px -12px rgba(0, 0, 0, 0.18);
}

.vote-review-list-wrap:focus-visible {
    outline: 2px solid var(--hsa-gold);
    outline-offset: 2px;
}

@media (min-width: 576px) {
    .vote-review-list-wrap {
        max-height: min(50dvh, 26rem);
    }
}

.vote-review-modal .modal-header {
    background: var(--hsa-gold-light);
    border-bottom: 1px solid rgba(245, 184, 0, 0.3);
}

.vote-review-modal .modal-title {
    font-weight: 700;
    color: var(--hsa-black);
}

.vote-review-intro {
    font-size: 0.9rem;
    color: var(--hsa-gray);
    margin-bottom: 1rem;
}

.vote-review-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vote-review-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
}

.vote-review-item:last-child {
    border-bottom: none;
}

.vote-review-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--hsa-black);
    flex: 1 1 auto;
    min-width: 0;
}

.vote-review-title {
    color: var(--hsa-gold-darker);
    font-weight: 600;
}

.vote-review-badge {
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 2rem;
    flex-shrink: 0;
}

.vote-review-agree {
    background: var(--hsa-gold-light);
    color: var(--hsa-black);
    border: 1px solid var(--hsa-gold);
}

.vote-review-disagree {
    background: #fde8ea;
    color: #842029;
    border: 1px solid #f5c2c7;
}

.vote-review-warning {
    font-size: 0.8125rem;
    color: var(--hsa-gray);
    padding: 0.65rem 0.75rem;
    background: #fff8e1;
    border-radius: 0.5rem;
}

.vote-review-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
    flex-shrink: 0;
    border-top: 1px solid #eee;
    background: #fff;
}

.vote-review-actions .btn {
    flex: 1 1 auto;
    min-height: var(--evote-touch-min);
}

@media (prefers-reduced-motion: reduce) {
    .vote-progress-bar .progress-bar {
        transition: none;
    }
}

.vote-app-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--hsa-gray);
    margin: 0.75rem 0 0;
    letter-spacing: 0.01em;
}

.vote-card {
    background: var(--hsa-white);
    border-radius: var(--evote-card-radius);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
    border: none;
    border-top: 3px solid var(--hsa-gold);
    overflow: hidden;
}

.vote-card .card-body {
    padding: 1.25rem;
}

@media (min-width: 576px) {
    .vote-card .card-body { padding: 1.75rem 2rem; }
}

.vote-code-input {
    font-size: 1.5rem !important;
    letter-spacing: 0.15em;
    font-weight: 600;
    min-height: var(--evote-touch-min);
    border-radius: 0.75rem;
    border: 2px solid #dee2e6;
    transition: border-color 0.2s;
}

.vote-code-input:focus {
    border-color: var(--hsa-gold);
    box-shadow: 0 0 0 0.2rem rgba(245, 184, 0, 0.25);
}

/* ── OTP code entry ── */
.vote-code-card .card-body {
    padding-bottom: 1.5rem;
}

.vote-otp-section {
    max-width: 100%;
    margin: 0 auto;
}

.vote-otp-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0.3rem, 2vw, 0.65rem);
    direction: rtl;
    margin: 0 auto 0.35rem;
    max-width: 24rem;
    padding: 0 0.25rem;
}

.vote-otp-start-hint {
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--hsa-gold-darker);
    margin: 0 0 0.85rem;
}

.vote-otp-start-hint[hidden] {
    display: none !important;
}

.vote-otp-cell--start:not(.is-filled):not(:focus) {
    border-color: var(--hsa-gold);
    animation: vote-otp-start-pulse 2s ease-in-out infinite;
}

@keyframes vote-otp-start-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 184, 0, 0.35);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(245, 184, 0, 0.22);
    }
}

@media (min-width: 576px) {
    .vote-otp-group {
        gap: 0.5rem;
        max-width: 30rem;
    }
}

@media (min-width: 992px) {
    .vote-otp-group {
        gap: 0.625rem;
        max-width: 32rem;
    }
}

.vote-otp-cell {
    flex: 1 1 0;
    min-width: 0;
    width: clamp(2.75rem, 13vw, 3.5rem);
    max-width: 3.75rem;
    height: clamp(3.25rem, 15vw, 4rem);
    padding: 0;
    text-align: center;
    font-size: clamp(1.35rem, 5.5vw, 1.85rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--hsa-black);
    background: #fff;
    border: 2px solid #dee2e6;
    border-radius: 0.75rem;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, transform 0.15s;
    caret-color: var(--hsa-gold-dark);
}

.vote-otp-cell:hover:not(:focus) {
    border-color: #ced4da;
}

.vote-otp-cell:focus {
    outline: none;
    border-color: var(--hsa-gold);
    box-shadow: 0 0 0 0.2rem rgba(245, 184, 0, 0.3);
    transform: scale(1.03);
}

.vote-otp-cell.is-filled {
    border-color: var(--hsa-gold-dark);
    background: var(--hsa-gold-light);
}

.vote-otp-cell.is-active {
    border-color: var(--hsa-gold);
}

.vote-otp-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
    direction: rtl;
}

.vote-otp-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #dee2e6;
    transition: background 0.2s, transform 0.2s;
}

.vote-otp-dot.is-filled {
    background: var(--hsa-gold);
    transform: scale(1.15);
}

.vote-otp-status {
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--hsa-gray);
    margin: 0 0 0.875rem;
}

.vote-otp-status.is-complete {
    color: var(--hsa-gold-darker);
}

.vote-otp-hints {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--hsa-gold-light);
    border-radius: 0.625rem;
    border-right: 3px solid var(--hsa-gold);
}

@media (min-width: 576px) {
    .vote-otp-hints {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem 1.25rem;
    }
}

.vote-otp-hint-item {
    font-size: 0.8125rem;
    color: var(--hsa-black-soft);
    text-align: center;
}

#continueBtn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

#continueBtn.vote-btn-ready:not(:disabled) {
    box-shadow: 0 4px 14px rgba(245, 184, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    .vote-otp-cell:focus {
        transform: none;
    }

    .vote-otp-cell--start:not(.is-filled):not(:focus) {
        animation: none;
        box-shadow: 0 0 0 2px rgba(245, 184, 0, 0.28);
    }

    .vote-otp-dot.is-filled {
        transform: none;
    }
}

.vote-welcome-banner {
    background: linear-gradient(135deg, rgba(245, 184, 0, 0.14) 0%, rgba(255, 255, 255, 0.95) 100%);
    border: 1px solid rgba(245, 184, 0, 0.35);
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    text-align: center;
}

.vote-welcome-greeting {
    font-size: 1.05rem;
    color: #212529;
    line-height: 1.5;
}

.vote-welcome-name {
    color: var(--hsa-gold-darker, #9a7200);
    font-weight: 700;
}

.vote-welcome-weight {
    display: inline-block;
    margin-inline-start: 0.35rem;
    font-size: 0.92em;
    font-weight: 600;
    color: var(--hsa-navy, #1a365d);
    white-space: nowrap;
}

.vote-welcome-hint {
    font-size: 0.875rem;
    color: #6c757d;
    line-height: 1.5;
}

.vote-success-card .vote-welcome-banner {
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.25rem;
}

.vote-meeting-info {
    background: var(--hsa-gold-light);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1.25rem;
    border-right: 4px solid var(--hsa-gold);
}

.vote-meeting-info .company-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.vote-meeting-info .meeting-title {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0;
}

.vote-candidate {
    position: relative;
    background: #fafbfc;
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    padding: 1rem;
    padding-top: 1.25rem;
    margin-bottom: 0;
    transition: box-shadow 0.2s, border-color 0.2s;
    scroll-margin-top: 1rem;
    scroll-margin-bottom: calc(var(--vote-sticky-footer-offset) + var(--vote-sticky-footer-buffer) + 0.5rem);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.vote-candidate .vote-choice-group {
    margin-top: auto;
}

.vote-candidate-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.vote-candidate:not(.vote-candidate-collapsed) .vote-candidate-body .vote-choice-group {
    margin-top: auto;
}

.vote-candidate:has(input:checked) {
    border-color: var(--hsa-gold);
    box-shadow: 0 0 0 1px var(--hsa-gold);
    background: var(--hsa-gold-light);
}

.vote-candidate-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--hsa-gold-darker);
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.vote-candidate-name {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0;
    color: #212529;
    line-height: 1.5;
    word-break: break-word;
}

.vote-choice-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
}

.vote-choice-group .btn-check + .btn {
    min-height: var(--evote-touch-min);
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 0.5rem;
}

.vote-choice-group .btn-outline-vote-agree {
    color: var(--hsa-gold-darker);
    border-color: var(--hsa-gold);
}

.vote-choice-group .btn-outline-vote-agree:hover {
    background-color: var(--hsa-gold-light);
    border-color: var(--hsa-gold-dark);
    color: var(--hsa-black);
}

.vote-choice-group .btn-check:checked + .btn-outline-vote-agree {
    background-color: var(--hsa-gold);
    border-color: var(--hsa-gold-dark);
    color: var(--hsa-black);
}

.vote-choice-group .btn-check:checked + .btn-outline-danger {
    background-color: var(--evote-danger);
    border-color: var(--evote-danger);
    color: #fff;
}

.vote-btn-primary {
    min-height: var(--evote-touch-min);
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 0.75rem;
    width: 100%;
}

.vote-success-card {
    border-top: 4px solid var(--hsa-gold);
    box-shadow: 0 4px 24px rgba(245, 184, 0, 0.14);
}

.vote-success-icon {
    width: 88px;
    height: 88px;
    background: var(--hsa-gold);
    color: var(--hsa-black);
    border: 3px solid var(--hsa-gold-dark);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 16px rgba(245, 184, 0, 0.35);
}

.vote-success-title {
    color: var(--hsa-black);
    font-weight: 700;
}

.vote-success-message {
    color: var(--hsa-gray);
    line-height: 1.7;
}

.vote-progress-hint strong {
    color: var(--hsa-gold-darker);
}

.vote-page-title {
    color: var(--hsa-black);
    font-weight: 700;
}

.vote-progress-hint {
    font-size: 0.8rem;
    color: #6c757d;
    text-align: center;
    margin-bottom: 1rem;
}

.vote-card .validation-summary-valid {
    display: none;
}

/* ── Phase 3: Animations & success polish ── */
@keyframes vote-fade-in-up {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes vote-success-pop {
    0% {
        opacity: 0;
        transform: scale(0.85);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes stepper-active-glow {
    0%, 100% { box-shadow: 0 0 0 3px var(--hsa-gold-muted); }
    50% { box-shadow: 0 0 0 6px rgba(245, 184, 0, 0.28); }
}

.vote-animate-in {
    animation: vote-fade-in-up 0.4s ease forwards;
}

.vote-success-pop {
    animation: vote-success-pop 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) 0.15s both;
}

.vote-stepper-item.is-active .vote-stepper-marker {
    animation: stepper-active-glow 2.5s ease-in-out infinite;
}

.vote-help-custom {
    font-size: 0.875rem;
    color: var(--hsa-black-soft);
    padding: 0.65rem 0.75rem;
    background: #fffbeb;
    border-radius: 0.5rem;
    border-right: 3px solid var(--hsa-gold);
    line-height: 1.55;
}

.vote-success-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--hsa-gold-darker);
    background: var(--hsa-gold-light);
    border: 1px solid rgba(245, 184, 0, 0.45);
    border-radius: 2rem;
    padding: 0.35rem 0.85rem;
}

.vote-success-closing {
    font-size: 0.8125rem;
    color: var(--hsa-gray);
}

@media (prefers-reduced-motion: reduce) {
    .vote-animate-in,
    .vote-success-pop,
    .vote-stepper-item.is-active .vote-stepper-marker {
        animation: none !important;
    }

    .vote-success-pop {
        opacity: 1;
        transform: none;
    }
}