/* Modern styles for voting page */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

:root{
    --accent: #d63384;
    --muted: #6c757d;
}

body, html {
    font-family: 'Ubuntu', sans-serif !important;
}

.intro h1{font-weight:600}
.intro p{max-width:100%; font-weight: 500; font-size:1.36rem; line-height: 1.4; text-align: justify;}

.card-hover{transition: transform .18s ease, box-shadow .18s ease; border-radius: .6rem}
.card-hover:hover{transform: translateY(-6px) scale(1.01); box-shadow:0 8px 24px rgba(0,0,0,.08)}

.list-group-item input[type=radio]{transform:scale(1.02)}

.detail-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1040;opacity:0;transition:opacity .22s ease;display:none}
.detail-backdrop.show{display:block;opacity:1}

.detail-panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.98);opacity:0;max-width:760px;width:82%;background:#fff;border-radius:12px;box-shadow:0 12px 48px rgba(0,0,0,.18);transition:opacity .22s ease, transform .22s cubic-bezier(.2,.9,.2,1);z-index:1050;padding-top:1.1rem;max-height:86vh;overflow:auto;padding-bottom:1rem}
.detail-panel.open{opacity:1;transform:translate(-50%,-50%) scale(1)}
.detail-panel.d-none{display:none}
.detail-panel .btn-close{position:absolute;right:12px;top:12px}
.detail-panel h4{margin-top:10px; font-size:1.28rem; margin-bottom:1rem; color: Red; font-weight: bold;}

.detail-panel{font-size:1.15rem;line-height:1.6}

.detail-panel .p-3{font-size:1.22rem}

@media (max-width: 991px){
    /* keep a lateral margin on small screens so the popup doesn't touch edges */
    .detail-panel{width:calc(100% - 32px);max-width:none;left:50%;top:50%;transform:translate(-50%,-50%) scale(.98);box-sizing:border-box}
    .detail-panel.open{transform:translate(-50%,-50%) scale(1)}
}

.vote-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:28px;z-index:1060;opacity:0;transition:opacity .3s ease;pointer-events:none}
.vote-toast .toast-body{background:#0d6efd;color:#fff;padding:12px 18px;border-radius:8px;box-shadow:0 6px 20px rgba(13,110,253,.18)}
.vote-toast.show{display:block;opacity:1;pointer-events:auto;animation:toastIn .35s ease}
@keyframes toastIn{from{transform:translateX(-50%) translateY(8px) scale(.98);opacity:0}to{transform:translateX(-50%) translateY(0) scale(1);opacity:1}}

/* Error popup list - horizontal on desktop */
#errorPanel ul{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:15px}
@media (max-width: 991px){
    #errorPanel ul{display:block}
    #errorPanel li{margin-bottom:10px}
}

/* small improvements */
.badge{font-size:.75rem}

/* Hide elements after voting */
body.voted input[type=radio]{display:none}
body.voted .info-btn{display:none}
body.voted label{cursor:default}
body.voted .voted-item span.ms-2{font-weight:bold}