/* ============================================================
   UPDATED CSS VARIABLES (Green Theme)
   ============================================================ */

:root
{
    --primary-green:    #00ff88;
    --secondary-green:  #2d5a27;
    --deep-forest:      #0a1a0a;
    --light-mint:       #e8fff0;
    --modal-white:      #ffffff;
    --modal-off-white:  #f8fffb;
    --glow-green:       rgba(0, 255, 136, 0.3);
}

/* ============================================================
   EXISTING LOGIN MODAL STYLES (Updated Colors)
   ============================================================ */

.modal { background-color: transparent; }
.modal-division1 { float: left; width: 50%; }
.modal-division2 { float: left; width: 50%; }
.modal-division1 img { width: 100%; height: 70%; margin-top: 35px; }

#my-login
{
    width: 120px;
    padding: 0.75rem 1.6875rem 0.6875rem;
    font-size: 1.2rem;
    line-height: 1.6;
    background-color: var(--secondary-green);
    color: #fff;
    box-shadow: 0 4px 9px -4px var(--secondary-green);
    font-family: inherit;
    cursor: pointer !important;
    border-radius: 10px;
    border: none;
}

.form-group input
{
    margin-top: 10px;
    border-radius: 10px;
    font-family: inherit !important;
    font-size: 16px !important;
    height: 40px;
    border: 1px solid #ddd;
}

.form-group { font-size: 16px !important; }
.modal-title { font-size: 25px; }
.modal-dialog { max-width: 600px; }

.modal-content
{
    padding: 50px;
    flex-direction: unset;
    background-color: rgba(255, 255, 255, 0.9);
    min-height: 450px;
    border: none;
}

#back_logo
{
    opacity: 0.2;
    width: 350px;
    height: 350px;
    position: absolute;
    z-index: -1;
    margin-left: 13%;
    margin-right: 13%;
}

/* ============================================================
   SHARED ELECTION MODAL BASE
   ============================================================ */

/* card */
#logoutalert .modal-content,
#guidelines .modal-content,
#preview_modal .modal-content,
#submit_alert .modal-content,
#platform .modal-content,
#view .modal-content,
#skipalert .modal-content
{
    padding: 0;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    background: var(--modal-white);
    box-shadow: 0 24px 60px rgba(10, 26, 10, .2), 0 0 0 1px rgba(0, 255, 136, .15);
    flex-direction: column;
    min-height: unset;
}

/* gradient top stripe */
#logoutalert .modal-content::before,
#guidelines .modal-content::before,
#preview_modal .modal-content::before,
#submit_alert .modal-content::before,
#platform .modal-content::before,
#view .modal-content::before,
#skipalert .modal-content::before
{
    content: '';
    display: block;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-green), var(--secondary-green));
}

/* header */
#logoutalert .modal-header,
#guidelines .modal-header,
#preview_modal .modal-header,
#submit_alert .modal-header,
#platform .modal-header,
#view .modal-header,
#skipalert .modal-header
{
    background: linear-gradient(135deg, var(--secondary-green) 0%, var(--deep-forest) 100%);
    border: none;
    padding: 22px 28px 20px;
}

/* modal title */
#logoutalert .modal-title,
#guidelines .modal-title,
#preview_modal .modal-title,
#submit_alert .modal-title,
#platform .modal-title,
#view .modal-title,
#skipalert .modal-title
{
    font-family: 'Jost', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: #ffffff;
    margin: 0;
}

/* icon wrap */
#logoutalert .icon-wrap,
#guidelines .icon-wrap,
#preview_modal .icon-wrap,
#submit_alert .icon-wrap,
#platform .icon-wrap,
#view .icon-wrap,
#skipalert .icon-wrap
{
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--light-mint);
    border: 2px solid var(--primary-green);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    animation: iconPulse 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* intro text */
#logoutalert .intro-text,
#guidelines .intro-text,
#preview_modal .intro-text,
#submit_alert .intro-text,
#platform .intro-text,
#view .intro-text,
#skipalert .intro-text
{
    font-size: .95rem;
    color: var(--secondary-green);
    text-align: center;
    line-height: 1.6;
    margin: 0 0 12px 0;
}

/* footer */
#logoutalert .modal-footer,
#guidelines .modal-footer,
#preview_modal .modal-footer,
#submit_alert .modal-footer,
#platform .modal-footer,
#view .modal-footer,
#skipalert .modal-footer
{
    border: none;
    background: var(--modal-off-white);
    padding: 18px 28px 24px;
    justify-content: center;
    gap: 12px;
}

/* ============================================================
   SHARED BUTTONS
   ============================================================ */

/* filled green — primary action */
.btn-dismiss
{
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 8px;
    padding: 11px 30px;
    background: linear-gradient(135deg, var(--secondary-green), var(--deep-forest));
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px var(--glow-green);
    transition: all 0.2s;
}

.btn-dismiss:hover
{
    box-shadow: 0 6px 20px var(--glow-green);
    transform: translateY(-2px);
    filter: brightness(1.2);
    color: #fff;
}

/* outlined — secondary action */
.btn-dismiss-outline
{
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 8px;
    padding: 11px 30px;
    background: transparent;
    color: var(--secondary-green);
    border: 2px solid var(--secondary-green);
    transition: all 0.2s;
}

.btn-dismiss-outline:hover
{
    background: var(--light-mint);
    color: var(--deep-forest);
}

/* ============================================================
   GUIDELINES MODAL — numbered items
   ============================================================ */

#guidelines .guideline-item
{
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 8px;
    background: var(--light-mint);
    border-left: 3px solid var(--primary-green);
}

#guidelines .guideline-num
{
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--secondary-green);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

#guidelines .guideline-text, 
#guidelines .guideline-text strong
{
    font-size: .88rem;
    color: var(--secondary-green);
}

/* ============================================================
   PREVIEW & VIEW MODAL
   ============================================================ */

.preview-position-label
{
    background: linear-gradient(135deg, var(--secondary-green), var(--deep-forest));
    color: #ffffff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 7px 14px;
}

.preview-candidate
{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: .9rem;
    color: var(--secondary-green);
    background: var(--modal-off-white);
    border-top: 1px solid rgba(0, 255, 136, 0.1);
}

.preview-candidate i
{
    color: var(--primary-green);
}

/* ============================================================
   PLATFORM & SKIP MODALS
   ============================================================ */

#platform .platform-body
{
    background: var(--light-mint);
    border-left: 3px solid var(--primary-green);
    border-radius: 8px;
    padding: 14px 16px;
}

.skip-label, .skip-input-wrap i, #logoutalert #msg
{
    color: var(--secondary-green);
}

.skip-input-wrap .skip-input
{
    border: 2px solid var(--light-mint);
    color: var(--deep-forest);
}

.skip-input-wrap .skip-input:focus
{
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px var(--glow-green);
}

#guidelines .modal-body::-webkit-scrollbar-thumb
{
    background: var(--secondary-green);
}