﻿.BottomBar_BoxWrap {
    margin-left: 10px;
    margin-right: 10px;
    width: auto;
}

/* ===========================================================================
   Dark footer (matches Figma target): dark background, "Powered by: Rycor",
   a horizontal row of green links, a thin divider, then address (left) and
   version (right).

   NOTE: runat="server" elements get prefixed IDs at runtime
   (e.g. BottomBar1_footerFullWrapstyle), so these rules are CLASS-BASED to
   stay reliable across pages.
   =========================================================================== */

.site-footer-dark,
.site-footer-dark * {
    box-sizing: border-box;
}

.site-footer-dark {
    float: none !important;
    width: 100% !important;
    max-width: 100%;
    background: #16211f !important;
}

.footer-dark-shell {
    float: none !important;
    width: min(1280px, calc(100% - 64px)) !important;
    max-width: 100%;
    margin: 0 auto !important;
    padding: 40px 0 44px 0 !important;
}

/* Powered by row */
.footer-dark-poweredby {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 34px;
}

.footer-dark-powered-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: .01em;
}

.footer-dark-logo {
    float: none !important;
    clear: none !important;
    display: block;
    width: 78px;
    max-width: 100%;
    height: auto;
}

/* Links row */
.footer-dark-links {
    float: none !important;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 40px;
    margin: 0 0 28px 0;
}

.footer-dark-links .footer-dark-link {
    float: none !important;
    clear: none !important;
    margin: 0;
    text-decoration: none;
    color: #38b878;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    white-space: nowrap;
}

.footer-dark-links .footer-dark-link:hover,
.footer-dark-links .footer-dark-link:focus-visible {
    color: #ffffff;
    text-decoration: underline;
}

/* Google translate (kept, but muted so it doesn't break the dark look) */
.footer-dark-translate {
    float: none !important;
    width: 100%;
    background: transparent !important;
    margin: 0 0 20px 0;
}

/* Divider */
.footer-dark-divider {
    width: 100%;
    height: 1px;
    background: #2b3a37;
    margin: 0 0 22px 0;
}

/* Meta row: address left, version right */
.footer-dark-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.footer-dark-address {
    float: none !important;
    clear: none !important;
    width: auto;
    margin: 0;
    text-align: left !important;
    color: #ffffff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    white-space: normal;
    overflow-wrap: break-word;
}

.footer-dark-version {
    float: none !important;
    width: auto;
    margin: 0;
    color: #8a938f;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: right;
}

#SchoolImageFooter {
    position: static;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    background: transparent;
    overflow-x: hidden;
}

@media only screen and (max-width: 600px) {
    .footer-dark-shell {
        width: calc(100% - 40px) !important;
        padding: 32px 0 36px 0 !important;
    }

    .footer-dark-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .footer-dark-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .footer-dark-version {
        text-align: left;
    }
}

/* ---------------------------------------------------------------------------
   Mobile footer overlap fix (applies to EVERY page that renders this footer).

   Several pages position #SchoolImageFooter absolutely at the bottom and
   reserve a fixed body padding-bottom for it. On phones the redesigned dark
   footer is taller than that reserved space, so it overlaps and cuts off the
   page content (email fields, buttons, etc.). Centralized here so all pages
   using the BottomBar get the fix. Uses !important to override the per-page
   inline <style> rules (absolute stays in effect on larger screens).
   --------------------------------------------------------------------------- */
@media only screen and (max-device-width: 640px), (max-width: 1100px) {
    body {
        padding-bottom: 0 !important;
    }

    #SchoolImageFooter {
        position: static !important;
        bottom: auto !important;
        margin-top: 24px !important;
    }
}
