/* ========================================= */
/*  Base & Global Styles (v6 - Authoritative) */
/* ========================================= */

/*
 * ARCHITECT'S NOTE: Using :root to define the base font size.
 * This is the canonical method for ensuring 'rem' units are calculated
 * consistently across all browsers, locking in the desired appearance.
*/
:root {
    font-size: 14px;
}

@media (min-width: 768px) {
    :root {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

body {
    padding-top: 76px;
    background-color: #f8f9fa;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.btn-icon-text {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.main-content-container {
    margin-top: 2rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

@media (min-width: 992px) {
    .main-content-container {
        margin-top: 3rem !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* ========================================= */
/*  Navbar & Header Styles                   */
/* ========================================= */
.navbar-brand {
    font-size: 1.5rem;
}

.user-avatar {
    width: 38px;
    height: 38px;
    object-fit: cover;
}


/* ========================================= */
/*  DEFINITIVE NAVBAR BUTTON STYLES (v9)     */
/* ========================================= */

/*
 * ARCHITECT'S NOTE: Using absolute pixels (px) and !important to create a
 * definitive, high-specificity rule that will override any conflicting styles
 * from other stylesheets, resolving the cross-browser rendering issue.
*/

/* Target all navigation links within the main navbar for a consistent look */
.navbar .navbar-nav .nav-link {
    /* Set to a precise pixel value reflecting a ~30% increase from the default 16px */
    font-size: 21px !important;
    font-weight: 500 !important;
    padding: 12px 18px !important;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease-in-out;
    margin: 0 0.2rem;
}

    /* Subtle hover effect for visual feedback */
    .navbar .navbar-nav .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

/* Specifically style the Login button to match */
.navbar .btn.btn-outline-light {
    /* Match the font size for consistency */
    font-size: 21px !important;
    font-weight: 500 !important;
    padding: 12px 22px !important;
    border-width: 2px !important;
}


/* ========================================= */
/*  Footer Styles                            */
/* ========================================= */
.footer a {
    color: #ffffff;
    text-decoration: none;
}

    .footer a:hover {
        color: rgba(255, 255, 255, 0.75);
    }

/* ========================================= */
/*  Other Component-Specific Styles          */
/* ========================================= */

.hero-container {
    padding-top: 56px;
    background-color: #f8f9fa;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    min-height: calc(100vh - 56px);
}

@media (min-width: 992px) {
    .hero-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.hero-text-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 4rem;
}

.hero-image-content {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .hero-image-content img {
        width: 100%;
        height: auto;
        max-height: 90vh;
        object-fit: contain;
    }

.service-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    }

.auth-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
    align-items: center;
    justify-content: center;
    background-color: #f4f7f6;
}

#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

    #loading-overlay.visible {
        opacity: 1;
    }

    #loading-overlay .spinner-border {
        width: 4rem;
        height: 4rem;
    }

.progress-container {
    background-color: white;
    padding: 2rem 3rem;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.1);
    width: 90%;
    max-width: 750px;
    text-align: center;
}

    .progress-container h4 {
        font-size: 2.25rem;
        margin-bottom: 1.5rem;
    }

    .progress-container .progress {
        height: 38px;
        font-size: 1.25rem;
    }

    .progress-container #progress-text {
        font-size: 1.5rem;
        margin-top: 1.25rem;
    }

    .progress-container #progress-done-btn {
        font-size: 1.25rem;
        padding: 0.75rem 1.5rem;
    }