:root {
  --brand-red: #bb0000;
  --ink: #1f1f1f;
  --muted: #6d6d6d;
  --line: #e5e5e5;
  --soft: #f6f6f6;
  --paper: #ffffff;
  --max: 1232px;
  --radius: 8px;
  --text: #4a4a4a;
  --border: #d6d6d6;
  --bn-party: #0168b7;
  --ph-party: #F13F21;
  --pn-party: #9845B7;
  --ind-party: #939393;
  --yellow: #FFB753;
}

.party-bn, .bar-blue, .seat-top-bar.party-bn, .historical-progress-fill.party-bn {
     background-color: var(--bn-party) !important;
}
 .party-ph, .bar-orange, .seat-top-bar.party-ph, .historical-progress-fill.party-ph {
     background-color: var(--ph-party) !important;
}
 .party-pn, .bar-purple, .seat-top-bar.party-pn, .historical-progress-fill.party-pn {
     background-color: var(--pn-party) !important;
}
 .party-gps, .party-gta, .party-grs, .bar-green {
     background-color: #1ba492 !important;
}
 .party-ind, .bar-others {
     background-color: var(--ind-party) !important;
}
 .seat-progress {
     display: flex;
     height: 30px;
     overflow: hidden;
     border-radius: 100px;
     background: #dcdcdc;
}
 .seat-progress > div {
     height: 100%;
     min-width: 0;
}
 .demographics-population {
     margin: -8px 0 24px;
     font-size: 16px;
     color: var(--text, #4a4a4a);
}
 .demographics-note {
     margin-top: 24px;
     font-size: 14px;
     color: var(--muted, #6d6d6d);
}
 .historical-section.no-demographics-spacer {
     padding-bottom: 56px;
}

.share-btn {
    text-align: center;
    margin: 12px 0;
}
.candidate-seat-label {
    color: #939393;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}
.candidate-avatar {
  flex-shrink: 0;
}

/* -------------------------
        Share modal 
    -------------------------*/
.custom-modal-overlay{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.6);
    z-index:9999;
    align-items:center;
    justify-content:center;
}
 .custom-modal-overlay.is-open{
    display:flex;
}
 .custom-modal-box{
    background:#fff;
    padding:40px 24px 24px;
    border-radius:8px;
    max-width:450px;
    width:90%;
    position:relative;
    box-shadow:0 4px 15px rgba(0,0,0,0.2);
    text-align:center;
}
 .custom-modal-close{
    position:absolute;
    top:8px;
    right:14px;
    font-size:28px;
    color:#4a4a4a;
    background:none;
    border:none;
    cursor:pointer;
}
 .seat-share-preview{
    margin-bottom:20px;
}
 .seat-share-image{
    max-width:100%;
    height:auto;
    border-radius:8px;
    border:1px solid #ececec;
}
.result-tag-row {
    display: flex;
    justify-content: flex-end;
}