/* ==========================================================================
   AABPS Election Plugin - Premium Modern Frontend Styles
   Brand Palette: Royal Navy (#094F83), Sky Azure (#1D7FC8), Coral Amber (#E94F1D), Emerald (#10B981)
   Typography: Quicksand (Google Font)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700;800&display=swap');

:root {
    --aabps-primary: #094F83;
    --aabps-primary-dark: #06375C;
    --aabps-primary-deep: #04243D;
    --aabps-secondary: #1D7FC8;
    --aabps-secondary-light: #EBF5FC;
    --aabps-accent: #E94F1D;
    --aabps-accent-hover: #D03E0F;
    --aabps-accent-light: #FEF3EE;
    --aabps-gold: #F59E0B;
    --aabps-gold-light: #FEF3C7;
    --aabps-green: #10B981;
    --aabps-green-dark: #059669;
    --aabps-green-light: #ECFDF5;
    --aabps-bg-light: #F8FAFC;
    --aabps-border: #E2E8F0;
    --aabps-border-hover: #CBD5E1;
    --aabps-border-focus: #93C5FD;
    --aabps-text-dark: #0F172A;
    --aabps-text-body: #334155;
    --aabps-text-muted: #64748B;
    --aabps-radius: 14px;
    --aabps-radius-sm: 8px;
    --aabps-radius-lg: 18px;
    --aabps-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --aabps-shadow-sm: 0 2px 8px rgba(9, 79, 131, 0.05);
    --aabps-shadow: 0 6px 18px rgba(9, 79, 131, 0.07);
    --aabps-shadow-hover: 0 12px 28px -4px rgba(9, 79, 131, 0.12);
    --aabps-shadow-modal: 0 25px 60px -10px rgba(0, 0, 0, 0.3);
    --aabps-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base Wrapper & Resets */
.aabps-election-container {
    font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    max-width: 980px;
    margin: 18px auto 36px;
    padding: 0 12px;
    color: var(--aabps-text-dark);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.aabps-election-container * {
    box-sizing: border-box;
}

.aabps-election-container h1,
.aabps-election-container h2,
.aabps-election-container h3,
.aabps-election-container h4,
.aabps-election-container h5,
.aabps-election-container p,
.aabps-election-container span,
.aabps-election-container strong,
.aabps-election-container label,
.aabps-election-container button,
.aabps-election-container input {
    font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* ==========================================================================
   1. GRAND HERO BANNER
   ========================================================================== */
.aabps-election-hero {
    background: linear-gradient(135deg, var(--aabps-primary-dark) 0%, var(--aabps-primary) 50%, var(--aabps-secondary) 100%);
    color: #ffffff;
    padding: 42px 32px;
    border-radius: var(--aabps-radius-lg);
    text-align: center;
    margin-bottom: 22px;
    box-shadow: 0 18px 40px -10px rgba(9, 79, 131, 0.38);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.aabps-election-hero::before {
    content: '';
    position: absolute;
    top: -70px;
    right: -60px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(233, 79, 29, 0.28) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.aabps-election-hero::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -50px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(29, 127, 200, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.aabps-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    margin-bottom: 14px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.aabps-hero-badge.bg-closed {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.55);
}

.aabps-hero-badge.bg-gold {
    background: rgba(245, 158, 11, 0.32);
    border-color: rgba(245, 158, 11, 0.65);
    color: #FEF3C7;
}

.aabps-election-hero h2 {
    font-size: 2.15rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 12px !important;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
    line-height: 1.22 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.aabps-hero-desc {
    font-size: 1.02rem;
    color: rgba(255, 255, 255, 0.94);
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    font-weight: 500;
}

/* ==========================================================================
   2. GLOBAL ALERT BOX
   ========================================================================== */
.aabps-ballot-alert {
    padding: 12px 18px;
    border-radius: var(--aabps-radius-sm);
    margin-bottom: 14px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.45;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: fadeInSlide 0.25s ease;
}

.aabps-ballot-alert.error {
    background: #FEF2F2;
    border: 1.5px solid #FCA5A5;
    color: #991B1B;
}

.aabps-ballot-alert.success {
    background: #ECFDF5;
    border: 1.5px solid #6EE7B7;
    color: #065F46;
}

/* ==========================================================================
   3. VOTER ACCREDITATION PORTAL CARD
   ========================================================================== */
.aabps-voter-compact-card {
    background: #ffffff;
    border: 1.5px solid var(--aabps-border);
    border-radius: var(--aabps-radius);
    padding: 14px 20px;
    margin-bottom: 14px;
    box-shadow: var(--aabps-shadow);
    position: relative;
    overflow: hidden;
    transition: var(--aabps-ease);
}

.aabps-voter-compact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--aabps-primary), var(--aabps-secondary), var(--aabps-accent));
}

.aabps-voter-input-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.voter-label-col {
    display: flex;
    align-items: center;
    gap: 12px;
}

.voter-badge-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--aabps-secondary-light);
    color: var(--aabps-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(29, 127, 200, 0.2);
}

.voter-label-text {
    display: flex;
    flex-direction: column;
}

.voter-label-text strong {
    color: var(--aabps-primary);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: -0.2px;
}

.voter-label-text span {
    color: var(--aabps-text-muted);
    font-size: 0.8rem;
    font-weight: 500;
}

.voter-field-col {
    flex-grow: 1;
    max-width: 520px;
}

.aabps-input-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.input-icon-wrap {
    position: relative;
    flex-grow: 1;
}

.input-leading-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    font-size: 0.9rem;
    pointer-events: none;
    transition: color 0.2s;
}

.input-icon-wrap input {
    width: 100%;
    padding: 9px 14px 9px 36px;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 0.92rem;
    font-weight: 600;
    border: 1.5px solid var(--aabps-border);
    border-radius: 10px;
    outline: none;
    background: #FAFAFA;
    transition: all 0.2s ease;
    color: var(--aabps-text-dark);
}

.input-icon-wrap input:focus {
    background: #ffffff;
    border-color: var(--aabps-secondary);
    box-shadow: 0 0 0 4px rgba(29, 127, 200, 0.12);
}

.input-icon-wrap input:focus + .input-leading-icon,
.input-icon-wrap:focus-within .input-leading-icon {
    color: var(--aabps-secondary);
}

/* Verify Button */
.aabps-verify-btn {
    background: linear-gradient(135deg, var(--aabps-primary) 0%, var(--aabps-secondary) 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 9px 20px !important;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    box-shadow: 0 4px 14px rgba(9, 79, 131, 0.25) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.aabps-verify-btn:hover:not(:disabled) {
    transform: translateY(-1.5px);
    box-shadow: 0 6px 18px rgba(9, 79, 131, 0.35) !important;
    filter: brightness(1.06);
}

.aabps-verify-btn:active:not(:disabled) {
    transform: translateY(0);
}

.aabps-verify-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Feedback Messages */
.aabps-feedback-msg {
    margin-top: 10px;
    font-size: 0.86rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    animation: fadeInSlide 0.2s ease;
}

.aabps-feedback-msg.error {
    background: #FEF2F2;
    color: #B91C1C;
    border: 1px solid #FCA5A5;
}

.aabps-feedback-msg.success {
    background: #ECFDF5;
    color: #065F46;
    border: 1px solid #A7F3D0;
}

/* Verified Member Details Banner */
.aabps-verified-strip {
    background: linear-gradient(135deg, #ECFDF5 0%, #F0FDF4 100%);
    border: 1.5px solid #10B981;
    border-radius: 10px;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #065F46;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.1);
    animation: fadeInSlide 0.25s ease;
}

.verified-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.verified-icon-bubble {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #10B981;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
    flex-shrink: 0;
}

.verified-text {
    display: flex;
    flex-direction: column;
}

.verified-title {
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #059669;
}

.verified-details-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.92rem;
}

.verified-details-line strong {
    color: #064E3B;
    font-weight: 800;
}

.verified-id-pill {
    background: #ffffff;
    color: #065F46;
    border: 1px solid #A7F3D0;
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
}

.verified-unlock-badge {
    background: rgba(16, 185, 129, 0.15);
    color: #047857;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.74rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.aabps-change-btn {
    background: #ffffff;
    border: 1.5px solid #A7F3D0;
    color: #065F46;
    padding: 4px 12px;
    border-radius: 8px;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.aabps-change-btn:hover {
    background: #065F46;
    border-color: #065F46;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(6, 95, 70, 0.2);
}

/* ==========================================================================
   4. EX-OFFICIO NOTICE STRIP
   ========================================================================== */
.aabps-slim-notice {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border: 1px solid #BAE6FD;
    border-left: 4px solid var(--aabps-secondary);
    border-radius: 10px;
    padding: 8px 16px;
    margin-bottom: 16px;
    font-size: 0.84rem;
    color: #0369A1;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.35;
    box-shadow: var(--aabps-shadow-xs);
}

.notice-badge {
    background: #0284C7;
    color: #ffffff;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.notice-text {
    font-weight: 500;
}

.notice-text strong {
    color: #0C4A6E;
    font-weight: 700;
}

/* ==========================================================================
   5. BALLOT FORM & LOCKED STATE (LOCKED UNTIL VOTER VERIFICATION)
   ========================================================================== */
.aabps-ballot-form {
    position: relative;
}

/* While form is locked, hide the elective positions grid and footer bar */
.aabps-locked-form .aabps-positions-ballot-grid,
.aabps-locked-form .aabps-ballot-footer-bar {
    display: none !important;
}

/* Beautiful, Compact Locked Ballot State Card */
.aabps-ballot-locked-box {
    background: #ffffff;
    border: 1.5px dashed #CBD5E1;
    border-radius: 16px;
    padding: 38px 24px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: 0 4px 18px rgba(9, 79, 131, 0.04);
    animation: fadeInSlide 0.3s ease;
}

.lock-shield-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #EBF5FC;
    color: #1D7FC8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
    margin: 0 auto 16px;
    box-shadow: 0 4px 14px rgba(29, 127, 200, 0.18);
}

.aabps-ballot-locked-box h3 {
    margin: 0 0 8px 0 !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #094F83 !important;
    letter-spacing: -0.2px;
}

.aabps-ballot-locked-box p {
    margin: 0 auto !important;
    max-width: 540px;
    font-size: 0.94rem !important;
    color: #64748B !important;
    line-height: 1.55 !important;
}

.aabps-ballot-locked-box p strong {
    color: #094F83 !important;
}

/* ==========================================================================
   6. TWO-COLUMN RESPONSIVE POSITIONS GRID (EXACT MATCH TO DESIGN IMAGE)
   ========================================================================== */
.aabps-positions-ballot-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
}

/* Pure White Card with Delicate Border */
.position-ballot-card {
    background: #ffffff !important;
    border: 1.5px solid #E1EDF6 !important;
    border-radius: 16px !important;
    padding: 22px 24px 22px 24px !important;
    box-shadow: 0 4px 20px rgba(10, 88, 140, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
}

.position-ballot-card:hover {
    border-color: #BFDAF0 !important;
    box-shadow: 0 6px 22px rgba(10, 88, 140, 0.08) !important;
}

/* Position Header (Seamless, clean, no dividing line) */
.compact-pos-header {
    background: transparent !important;
    border: none !important;
    padding: 0 0 18px 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.pos-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    overflow: hidden !important;
}

/* Squircle Icon Badge */
.aabps-card-icon.pos-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: #E3EFF8 !important;
    color: #0A588C !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
}

.pos-header-info {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Eyebrow Label */
.aabps-card-number {
    display: block !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    color: #0077B6 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    line-height: 1 !important;
    margin: 0 0 3px 0 !important;
}

/* Position Title */
.compact-pos-header h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.18rem !important;
    font-weight: 800 !important;
    color: #083E66 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.25 !important;
    letter-spacing: -0.2px;
}

/* Position Selection Indicator Pill (Top Right) */
.pos-selection-indicator {
    flex-shrink: 0 !important;
}

.pos-selection-indicator .badge-unselected {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #78909C !important;
    background: #F4F8FC !important;
    padding: 5px 14px !important;
    border-radius: 50px !important;
    border: 1.5px solid #D5E4F0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    letter-spacing: 0.1px !important;
    line-height: 1.3 !important;
}

.pos-selection-indicator .badge-unselected i {
    font-size: 0.82rem !important;
    color: #8BA4B7 !important;
}

.pos-selection-indicator .badge-selected {
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    padding: 5px 14px !important;
    border-radius: 50px !important;
    background: #ECFDF5 !important;
    color: #065F46 !important;
    border: 1.5px solid #6EE7B7 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15) !important;
    animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pos-selection-indicator .badge-selected.abstain-badge {
    background: #FEF2F2 !important;
    color: #991B1B !important;
    border-color: #FECACA !important;
}

.compact-pos-body {
    padding: 0 !important;
    flex-grow: 1 !important;
}

.no-candidates-alert {
    padding: 14px;
    text-align: center;
    font-size: 0.86rem;
    color: #64748B;
    background: #F8FAFC;
    border-radius: 10px;
    border: 1.5px dashed #CBD5E1;
}

/* ==========================================================================
   7. CANDIDATE SELECTABLE ROWS (EXACT MATCH TO DESIGN IMAGE)
   ========================================================================== */
.compact-cand-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.compact-cand-option {
    display: block !important;
    cursor: pointer !important;
    position: relative !important;
    user-select: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Completely hide native radio button without layout displacement */
.aabps-candidate-radio {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Candidate Row Card Surface */
.compact-cand-option .candidate-option-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    background: #ffffff !important;
    border: 1.5px solid #E1EDF5 !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.compact-cand-option:hover .candidate-option-content {
    border-color: #B4D3EB !important;
    background: #F9FBFE !important;
}

/* Selected State for Standard Candidate */
.aabps-candidate-radio:checked + .candidate-option-content {
    border-color: #1D7FC8 !important;
    background: #F0F7FF !important;
    box-shadow: 0 0 0 1px #1D7FC8 !important;
}

/* Left part of candidate row */
.candidate-option-content .candidate-avatar,
.candidate-option-content .candidate-text {
    display: flex !important;
    align-items: center !important;
}

.candidate-option-content .candidate-text {
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    margin-left: 14px !important;
    overflow: hidden !important;
    min-width: 0 !important;
}

/* Candidate Circular Avatar (Fixed 38px x 38px - never expands or distorts) */
.compact-avatar,
.candidate-avatar.compact-avatar {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    box-sizing: border-box !important;
}

.compact-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    border: 1px solid #E2E8F0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Default Avatar when no photo */
.avatar-default {
    width: 100% !important;
    height: 100% !important;
    background: #E8F1F8 !important;
    color: #8CA9C1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.98rem !important;
    border-radius: 50% !important;
}

/* Abstain Avatar - strictly inside 38px circle container */
.avatar-abstain,
.compact-avatar .avatar-abstain,
.compact-avatar.abstain-avatar,
.abstain-avatar {
    width: 100% !important;
    height: 100% !important;
    background: #FEE8E8 !important;
    color: #EF4444 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.98rem !important;
    border-radius: 50% !important;
}

/* Candidate Name */
.cand-name-title {
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.cand-name-title strong {
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

.abstain-option .cand-name-title strong {
    color: #334155 !important;
    font-weight: 600 !important;
}

.cand-id-tag {
    display: none !important;
}

/* Custom Radio Circle Pill (Right side) */
.candidate-check-pill {
    flex-shrink: 0 !important;
    margin-left: 14px !important;
    display: flex !important;
    align-items: center !important;
}

.radio-pill-circle {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    border-radius: 50% !important;
    border: 2px solid #C4D7E6 !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
}

/* Empty circle when unselected - NEVER show checkmark */
.radio-pill-circle i {
    display: none !important;
}

/* Selected state for candidate: solid blue circle with white check */
.aabps-candidate-radio:checked + .candidate-option-content .radio-pill-circle {
    background: #1D7FC8 !important;
    border-color: #1D7FC8 !important;
    box-shadow: 0 2px 6px rgba(29, 127, 200, 0.35) !important;
}

.aabps-candidate-radio:checked + .candidate-option-content .radio-pill-circle i {
    display: block !important;
    color: #ffffff !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
}

/* Selected state for Abstain option: solid red circle with white check */
.abstain-option .aabps-candidate-radio:checked + .candidate-option-content {
    border-color: #F87171 !important;
    background: #FEF2F2 !important;
    box-shadow: 0 0 0 1px #F87171 !important;
}

.abstain-option .aabps-candidate-radio:checked + .candidate-option-content .radio-pill-circle {
    background: #EF4444 !important;
    border-color: #EF4444 !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important;
}

.abstain-option .aabps-candidate-radio:checked + .candidate-option-content .radio-pill-circle i {
    display: block !important;
    color: #ffffff !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
}

/* ==========================================================================
   8. COMPACT STICKY ACTION FOOTER BAR
   ========================================================================== */
.aabps-ballot-footer-bar {
    position: sticky;
    bottom: 16px;
    z-index: 100;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1.5px solid var(--aabps-border);
    border-radius: 14px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    box-shadow: 0 12px 34px -4px rgba(9, 79, 131, 0.2);
    margin-top: 20px;
    transition: var(--aabps-ease);
}

.footer-progress {
    flex-grow: 1;
    max-width: 420px;
}

.progress-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.progress-text {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--aabps-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.progress-percent {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--aabps-secondary);
}

.progress-track {
    width: 100%;
    height: 7px;
    background: #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--aabps-secondary), var(--aabps-green));
    border-radius: 10px;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Review & Submit Button */
.aabps-submit-btn {
    background: linear-gradient(135deg, var(--aabps-accent) 0%, #D93B09 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 22px !important;
    border-radius: 10px !important;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 0.94rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(233, 79, 29, 0.3) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

.aabps-submit-btn:hover:not(:disabled) {
    transform: translateY(-1.5px);
    box-shadow: 0 8px 22px rgba(233, 79, 29, 0.42) !important;
    filter: brightness(1.05);
}

.aabps-submit-btn:active:not(:disabled) {
    transform: translateY(0);
}

.aabps-submit-btn:disabled {
    background: #CBD5E1 !important;
    color: #94A3B8 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 0.75;
}

.btn-badge {
    background: rgba(0, 0, 0, 0.15);
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 0.74rem;
    font-weight: 700;
}

.btn-badge.badge-ready {
    background: #ffffff;
    color: #059669;
}

/* Pulsating Animation when All Positions Filled */
.btn-ready-pulse {
    animation: readyPulse 2s infinite;
}

@keyframes readyPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(233, 79, 29, 0.45);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(233, 79, 29, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(233, 79, 29, 0);
    }
}

/* ==========================================================================
   9. REVIEW & CONFIRMATION MODAL
   ========================================================================== */
.aabps-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.aabps-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.aabps-modal-content {
    position: relative;
    z-index: 2;
    background: #ffffff;
    border-radius: var(--aabps-radius-lg);
    width: 100%;
    max-width: 600px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--aabps-shadow-modal);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: modalSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.aabps-modal-header {
    padding: 16px 22px;
    border-bottom: 1.5px solid var(--aabps-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F8FAFC;
    border-radius: var(--aabps-radius-lg) var(--aabps-radius-lg) 0 0;
}

.modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-header-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--aabps-secondary-light);
    color: var(--aabps-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.aabps-modal-header h3 {
    margin: 0 !important;
    font-size: 1.18rem !important;
    font-weight: 800 !important;
    color: var(--aabps-primary) !important;
    line-height: 1.2 !important;
}

.modal-subtitle {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--aabps-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.modal-close-btn {
    background: transparent;
    border: none;
    font-size: 1.6rem;
    color: #94A3B8;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    transition: color 0.15s;
}

.modal-close-btn:hover {
    color: #0F172A;
}

.aabps-modal-body {
    padding: 18px 24px;
    overflow-y: auto;
    flex-grow: 1;
}

.aabps-modal-body::-webkit-scrollbar {
    width: 6px;
}
.aabps-modal-body::-webkit-scrollbar-track {
    background: #F1F5F9;
}
.aabps-modal-body::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 6px;
}

.voter-modal-summary {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border: 1px solid #BAE6FD;
    padding: 10px 16px;
    border-radius: 10px;
    color: #0369A1;
    font-size: 0.9rem;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.voter-modal-summary strong {
    color: #0C4A6E;
}

.voter-modal-id-pill {
    background: #ffffff;
    border: 1px solid #BAE6FD;
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
}

.modal-instruction {
    font-size: 0.86rem;
    color: var(--aabps-text-muted);
    margin-bottom: 12px;
    line-height: 1.45;
}

.review-selections-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 16px;
}

.review-row-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    font-size: 0.9rem;
    gap: 12px;
}

.review-pos-title {
    font-weight: 700;
    color: var(--aabps-primary);
}

.review-cand-chosen {
    font-weight: 800;
    color: #0F172A;
    background: #ffffff;
    padding: 2px 10px;
    border-radius: 6px;
    border: 1px solid #CBD5E1;
    font-size: 0.85rem;
    white-space: nowrap;
}

.review-cand-chosen.abstain {
    color: #DC2626;
    background: #FEF2F2;
    border-color: #FECACA;
}

.declaration-checkbox-group {
    background: #FFFBEB;
    border: 1.5px solid #FDE68A;
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 14px;
}

.aabps-checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    margin: 0;
}

.aabps-checkbox-container input {
    margin-top: 3px;
    width: 17px;
    height: 17px;
    accent-color: var(--aabps-secondary);
    flex-shrink: 0;
}

.aabps-checkbox-container .label-text {
    font-size: 0.84rem;
    line-height: 1.4;
    color: #78350F;
}

.aabps-checkbox-container .label-text strong {
    color: #92400E;
}

.aabps-checkbox-container .label-text small {
    color: #B45309;
}

.aabps-modal-footer {
    padding: 14px 22px;
    border-top: 1.5px solid var(--aabps-border);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: #F8FAFC;
    border-radius: 0 0 var(--aabps-radius-lg) var(--aabps-radius-lg);
}

.aabps-modal-back-btn {
    background: #ffffff !important;
    border: 1.5px solid #CBD5E1 !important;
    color: #475569 !important;
    padding: 9px 18px !important;
    border-radius: 10px !important;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s;
}

.aabps-modal-back-btn:hover {
    background: #F1F5F9 !important;
    color: #0F172A !important;
    border-color: #94A3B8 !important;
}

.aabps-final-submit-btn {
    background: linear-gradient(135deg, var(--aabps-green) 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 24px !important;
    border-radius: 10px !important;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 0.94rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.2s;
}

.aabps-final-submit-btn:hover:not(:disabled) {
    transform: translateY(-1.5px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45) !important;
    filter: brightness(1.05);
}

/* ==========================================================================
   10. SUCCESS CELEBRATION CARD
   ========================================================================== */
.aabps-success-screen {
    text-align: center;
    padding: 44px 28px;
    background: #ffffff;
    border: 1.5px solid var(--aabps-border);
    border-radius: var(--aabps-radius-lg);
    box-shadow: var(--aabps-shadow-hover);
    position: relative;
    overflow: hidden;
}

.aabps-success-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #10B981, #059669, #1D7FC8);
}

.success-icon-wrapper {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #D1FAE5, #A7F3D0);
    color: #059669;
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0.14);
    animation: successPulse 2s infinite;
}

.aabps-success-screen h2 {
    font-size: 1.85rem !important;
    font-weight: 800 !important;
    color: #064E3B !important;
    margin: 0 0 8px !important;
    letter-spacing: -0.02em;
}

.success-sub {
    font-size: 1rem;
    color: var(--aabps-text-muted);
    max-width: 520px;
    margin: 0 auto 24px;
    line-height: 1.55;
}

.ballot-receipt-box {
    background: #F8FAFC;
    border: 2px dashed #94A3B8;
    border-radius: 12px;
    padding: 18px;
    max-width: 420px;
    margin: 0 auto 24px;
}

.receipt-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 6px;
    color: #64748B;
}

.receipt-label {
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.receipt-code {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: 2.2px;
    color: var(--aabps-primary);
    margin: 8px 0 12px;
    font-family: 'Courier New', Courier, monospace !important;
    background: #ffffff;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #CBD5E1;
    display: inline-block;
}

.receipt-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 0.8rem;
    color: #475569;
    flex-wrap: wrap;
}

.receipt-meta .text-green {
    color: #059669;
}

.success-footer-note {
    font-size: 0.86rem;
    color: #94A3B8;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ==========================================================================
   11. RESULTS SHOWCASE STYLES
   ========================================================================== */
.aabps-results-container .aabps-results-hero {
    margin-bottom: 20px;
}

.results-turnout-pill {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.88rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    backdrop-filter: blur(6px);
}

.aabps-results-showcase-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
}

.aabps-result-showcase-card {
    background: #ffffff;
    border: 1.5px solid var(--aabps-border);
    border-radius: var(--aabps-radius);
    padding: 16px 18px;
    box-shadow: var(--aabps-shadow-sm);
    transition: var(--aabps-ease);
}

.aabps-result-showcase-card:hover {
    border-color: #BFDBFE;
    box-shadow: var(--aabps-shadow-hover);
}

.showcase-card-header {
    margin-bottom: 14px;
}

.showcase-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pos-icon-badge {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--aabps-secondary-light);
    color: var(--aabps-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.showcase-header-left h3 {
    margin: 0 !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: var(--aabps-primary) !important;
}

.showcase-total-votes {
    font-size: 0.78rem;
    color: var(--aabps-text-muted);
}

.winner-highlight-banner {
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    border: 1.5px solid #F59E0B;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    position: relative;
}

.winner-crown-icon {
    position: absolute;
    top: -10px;
    left: 14px;
    background: #F59E0B;
    color: #ffffff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4);
}

.winner-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #F59E0B;
    background: #ffffff;
    flex-shrink: 0;
}

.winner-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.winner-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F59E0B;
    font-size: 1.1rem;
}

.winner-text {
    flex-grow: 1;
}

.winner-status-tag {
    font-size: 0.68rem;
    font-weight: 800;
    color: #B45309;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    display: block;
}

.winner-name {
    margin: 1px 0 0;
    font-size: 1rem;
    font-weight: 800;
    color: #78350F;
}

.winner-tally {
    text-align: right;
    font-size: 0.85rem;
    color: #78350F;
}

.winner-pct {
    display: block;
    font-size: 1.08rem;
    font-weight: 800;
    color: #B45309;
}

.showcase-tally-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.tally-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tally-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
}

.tally-name {
    font-weight: 700;
    color: var(--aabps-text-dark);
}

.tally-numbers {
    font-size: 0.8rem;
    color: var(--aabps-text-muted);
}

.tally-bar {
    width: 100%;
    height: 8px;
    background: #F1F5F9;
    border-radius: 6px;
    overflow: hidden;
}

.tally-fill {
    height: 100%;
    background: var(--aabps-secondary);
    border-radius: 6px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.tally-fill.fill-winner {
    background: linear-gradient(90deg, #F59E0B, #FBBF24);
}

.tally-fill.fill-abstain {
    background: #CBD5E1;
}

/* ==========================================================================
   12. KEYFRAME ANIMATIONS
   ========================================================================== */
@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes popIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes successPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.3);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* ==========================================================================
   13. RESPONSIVE DESIGN FOR MOBILE & TABLET
   ========================================================================== */
@media (max-width: 768px) {
    .aabps-election-hero {
        padding: 28px 18px;
    }
    .aabps-election-hero h2 {
        font-size: 1.65rem !important;
    }
    .aabps-voter-input-row {
        flex-direction: column;
        align-items: stretch;
    }
    .voter-field-col {
        max-width: 100%;
        width: 100%;
    }
    .aabps-input-group {
        flex-direction: column;
        width: 100%;
    }
    .input-icon-wrap {
        width: 100%;
    }
    .aabps-verify-btn {
        width: 100%;
        justify-content: center;
    }
    .aabps-positions-ballot-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .aabps-results-showcase-grid {
        grid-template-columns: 1fr !important;
    }
    .aabps-ballot-footer-bar {
        flex-direction: column;
        align-items: stretch;
        bottom: 8px;
        padding: 10px 14px;
        gap: 12px;
    }
    .footer-btn-wrapper {
        width: 100%;
    }
    .aabps-submit-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    .aabps-modal-footer {
        flex-direction: column-reverse;
    }
    .aabps-modal-back-btn,
    .aabps-final-submit-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}