/* ============================================================
   1. POPUP SYSTEM (The restored logic)
   ============================================================ */
#sys-msg-container {
    display: none;
    position: fixed;
    top: 20px;
    left: 0;
    width: 100%;
    z-index: 100000;
    pointer-events: none;
}

.ohc-popup-center {
    max-width: 960px;
    margin: 0 auto;
    position: relative;
    height: 0;
    pointer-events: none;
}

#sys-msg-inner {
    position: absolute;
    top: 19px !important;
    right: 27px !important; /* Base position */
    width: 310px !important;
    background: #f9f9f9 !important;
    border: 2px solid #005a87 !important;
    padding: 20px !important;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
    border-radius: 8px !important;
    pointer-events: auto !important;
}

/* The successful wide-screen nudge for right margin of popup */
@media screen and (min-width: 1200px) {
    #sys-msg-inner {
        transform: translateX(117px) !important;
    }
}



/* --- POPUP BUTTON STYLING (Mapped to your original IDs) --- */

/* Shared styles for both buttons */
#btn-sys-ok, #btn-sys-no {
    flex: 1; /* Keeps them equal width in your flex container */
    padding: 10px !important;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
    font-size: 12px;
    border: none !important;
    transition: all 0.2s ease; /* Enables the hover animation */
    display: inline-block;
}

/* YES Button: Forest Green */
#btn-sys-ok {
    background-color: #2e7d32 !important;
    color: white !important;
}

#btn-sys-ok:hover {
    background-color: #1b5e20 !important; /* Darker green on hover */
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transform: translateY(-1px);
}

/* NO Button: Slate Gray */
#btn-sys-no {
    background-color: #757575 !important;
    color: white !important;
}

#btn-sys-no:hover {
    background-color: #424242 !important; /* Darker gray on hover */
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transform: translateY(-1px);
}



/* ============================================================
   FOOTER BUTTON - CLEAN ALIGNMENT
   ============================================================ */

.footer-utility-box {
    /* We keep only the alignment and padding */
    text-align: right;
    padding-top: 20px;
}

.site-utility-link {
    display: inline-block !important;
    width: 160px !important;
    background-color: #067a85 !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
    padding: 10px !important;
    text-align: center !important;
    text-decoration: none !important;
    font-size: 15px !important;
    border-radius: 2px !important;
    font-weight: normal !important;
    transition: background-color 0.3s ease;
    
    /* Use this to nudge the button away from the edge on desktop */
    margin-right: 20px !important; 
}

/* MOBILE RESET: Force it left when the screen narrows */
@media screen and (max-width: 767px) {
    .footer-utility-box {
        text-align: left !important;
        padding-left: 15px; /* Matches standard mobile padding */
    }
    
    .site-utility-link {
        margin-right: 0 !important;
        margin-top: -20px !important;
        padding-top: 10px !important;
    }
}

.site-utility-link:hover {
    background-color: #d4a017 !important;
    color: #ffffff !important;
    text-decoration: none;
}