/* kill any underline/line on brand link/text */
/* Reusable helper for dark blocks */
.on-dark {
    --default-color: #fff;
    --heading-color: #fff;
    --bs-body-color: var(--default-color);
    --bs-heading-color: var(--heading-color);
}

/* Quick fix for your Steps cards (no HTML changes needed) */
.steps .step-content {
    --default-color: #fff;
    --heading-color: #fff;
    --bs-body-color: var(--default-color);
    --bs-heading-color: var(--heading-color);
}

/* Make sure links/icons inside inherit */
.steps .step-content a,
.steps .step-content .bi {
    color: inherit;
}

/* (Only if something is still stubborn) */
.steps .step-content h1,
.steps .step-content h2,
.steps .step-content h3,
.steps .step-content h4,
.steps .step-content h5,
.steps .step-content h6 {
    color: #fff;
}

/* 1) Global defaults (light page) */
:root {
    --default-color: #333;
    --heading-color: #111;

    /* keep Bootstrap vars in sync */
    --bs-body-color: var(--default-color);
    --bs-heading-color: var(--heading-color);
}

/* 2) Navbar/header (dark background) */
.header {
    --default-color: #fff;
    --heading-color: #fff;
    --bs-body-color: var(--default-color);
    --bs-heading-color: var(--heading-color);
}

/* Ensure links in header inherit the white */
.header a {
    color: inherit;
    text-decoration: none;
}

/* (optional) explicitly style the site name */
.header .sitename {
    color: var(--heading-color);
}

/* 3) Hero on white (if your template ever flips it) */
.hero,
.index-page .hero {
    --default-color: #333;
    --heading-color: #111;
    --bs-body-color: var(--default-color);
    --bs-heading-color: var(--heading-color);
}

.header .logo,
.header .logo * {
    text-decoration: none !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
    outline: 0 !important;
}

.header .logo::before,
.header .logo::after,
.header .logo *::before,
.header .logo *::after {
    content: none !important;
    display: none !important;
}

/* Footer brand: remove underline/line effects */
.footer .footer-about .logo a,
.footer .footer-about .logo a:link,
.footer .footer-about .logo a:visited,
.footer .footer-about .logo a:hover,
.footer .footer-about .logo a:active,
.footer .footer-about .logo .sitename {
    text-decoration: none !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
    color: inherit;
    /* keep footer color */
}

/* If the template draws a line with pseudo-elements, nuke them */
.footer .footer-about .logo a::before,
.footer .footer-about .logo a::after,
.footer .footer-about .logo .sitename::before,
.footer .footer-about .logo .sitename::after {
    content: none !important;
    display: none !important;
}

.btn.btn-upload {
    background-color: #04316a;
    /* base bg */
    color: #fff;
    /* text */
    border: 1px solid #04316a;
    background-image: none;
    /* kill gradients */
    box-shadow: none;
    transition: background-color .2s ease, border-color .2s ease, transform .05s ease;
}

.btn.btn-upload:hover,
.btn.btn-upload:focus {
    background-color: #bbd9ff;
    border-color: #bbd9ff;
    color: #fff;
}

.btn.btn-upload:active {
    background-color: #0369a1;
    border-color: #0369a1;
    transform: translateY(1px);
}

.btn.btn-upload:disabled,
.btn.btn-upload.disabled {
    background-color: #7dd3fc;
    border-color: #7dd3fc;
    color: #fff;
    opacity: .65;
    /* optional */
    pointer-events: none;
}

/* Dark styling for the file input in the Upload section */
#upload input[type="file"].form-control {
    background-color: #bbd9ff !important;
    /* the area that shows “X files selected” */
    color: #ffffff !important;
    /* text color for the selected files label */
    border: 1px solid #444 !important;
    /* helps Safari/WebKit render the text color correctly */
    -webkit-text-fill-color: #ffffff;
}

/* The “Choose files” button */
#upload input[type="file"]::file-selector-button {
    background-color: #04316a;
    color: #f8f9fa;
    border: none;
    padding: 8px 14px;
    border-radius: 4px;
    margin-right: 12px;
    cursor: pointer;
}

#upload input[type="file"]::file-selector-button:hover {
    background-color: #04316a;
}

/* Fallback for older WebKit */
#upload input[type="file"]::-webkit-file-upload-button {
    background-color: #04316a;
    color: #f8f9fa;
    border: none;
    padding: 8px 14px;
    border-radius: 4px;
    margin-right: 12px;
    cursor: pointer;
}

/* Make icons/text inside dark blocks white */
.on-dark,
.on-dark .bi,
.on-dark i.bi {
    color: #bbd9ff !important;
}

/* If you ever switch to inline SVG icons, make them follow text color too */
.on-dark svg {
    fill: currentColor !important;
}

/* Specifically for the steps cards */
.steps-wrapper.on-dark .step-icon,
.steps-wrapper.on-dark .step-icon .bi,
.steps-wrapper.on-dark .step-number {
    color: #bbd9ff !important;
}

/* Optional: lighten the circle border/glow if your theme sets them dark */
.steps-wrapper.on-dark .step-icon {
    border-color: rgba(255, 255, 255, .35);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .12);
}

/* Bigger, text-friendly step chips */
.wizard-progress .badge {
    /* kill any fixed circle sizing from older styles */
    width: auto !important;
    height: auto !important;
    border-radius: 9999px !important;

    /* make them roomy */
    display: inline-flex;
    align-items: center;
    padding: .5rem 1rem !important;
    /* tweak as you like */
    font-size: 1rem !important;
    /* fs-6 ≈ 1rem, use 1.125rem for larger */
    line-height: 1.2;
    white-space: nowrap;
    /* keep label on one line */
}

/* Restore navbar spacing */
.header {
    padding: 20px 0;
    /* brings back top/bottom gap */
    overflow: visible;
    /* allow logo to hang out */
}

/* Keep navbar box slim */
.header .header-container {
    height: 70px;
    /* fix only the inner bar height */
    overflow: visible;
}

/* Logo positioning */
.logo {
    position: relative;
}

.logo-overflow {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-45%);

    height: 120px;
    /* your desired logo size */
    width: auto;
    max-height: none !important;
    z-index: 10;
    margin-left: 10px;
}


@media (max-width: 576px) {
    .wizard-progress .badge {
        padding: .4rem .8rem;
        font-size: .95rem;
    }
}