/* =========================
   1) CSS Variables
   ========================= */
:root {
    --wizard-gap: 16px; /* distance from screen edges */
    --wizard-height: 64px; /* expected height of the button area */
    --topbar-height: 124px;
}

/* =========================
   2) Feature Queries
   ========================= */
@supports (height: 100svh) {
    .app {
        min-height: 100svh;
    }
    /* “small” viewport */
}

@supports (height: 100dvh) {
    .app {
        min-height: 100dvh;
    }
    /* “dynamic” viewport */
}

/* =========================
   3) Elements
   ========================= */
body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 300;
}

form {
    /* max-height: 100% !important; */
    min-height: 100%;
}

html {
    height: 100%;
}

body {
    height: 100%;
}

/* Form controls (elements/pseudos) */
input:not([type="checkbox"]):not([type="radio"]),
textarea {
    caret-color: currentColor;
    color: inherit !important;
}

::placeholder {
    color: color-mix(in srgb, currentColor 60%, transparent);
    opacity: 1;
}

/* Compound selector with element types */
.formRadio td,
.formRadio th,
.formRadio label {
    font-weight: normal !important;
    padding-right: 7px !important;
}

/* =========================
   4) IDs
   ========================= */
#map_canvas {
    width: 100% !important;
    height: auto !important; /* defeats the inline 100% */
    flex: 1 1 auto; /* takes remaining height */
    min-height: 0; /* allows flexbox to actually shrink */
    display: block; /* avoid any inline-block quirks */
}

#map_div {
    display: none;
    position: fixed;
    top: 10px;
    left: 10px;
    width: 400px;
    height: 550px;
    z-index: 2000;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    /* key: turn it into a column and clip overflow */
       flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

    /* when opened */
    #map_div.is-open {
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow: hidden;
    }

/* =========================
   5) Classes
   ========================= */
.app {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* fallback */
}

.app-main {
    padding-top: calc(var(--topbar-height) + env(safe-area-inset-top, 0px));
    /* let the content end above the buttons */
    min-height: 0; /* important when parent is flex */
    overflow: auto; /* allow scrolling if content is long */
    padding-bottom:0px;
    padding-left:15px;

}

/* (kept) later override of .app-main from your original */
.app-main {
    overflow-y: auto; /* tweak as needed */
    padding-bottom: 110px; /* tweak as needed */
}

.form-label {
    font-weight: 500 !important;
}

.loading {
    background-color: White;
    border: 3px solid #18195a;
    display: none;
    font-size: 14pt;
    height: 250px;
    margin: 0 auto;
    padding-top: 50px;
    position: fixed;
    text-align: center;
    width: 400px;
    z-index: 999;
}

.navbar-logo {
    height: 60px;
    max-height: 60px;
    width: auto;
}

.rbl-wrap {
    color: inherit !important; /* normal page text color */
    font-weight: 400;
    text-transform: none !important; /* stop ALL-CAPS */
}

    .rbl-wrap input[type="radio"] {
        margin-right: 0.6rem;
    }

    .rbl-wrap label {
        color: inherit !important;
        margin-right: 1.25rem;
        text-transform: none !important;
    }

    .rbl-wrap td {
        padding-right: 1rem !important;
    }

.step-scroll {
    display: flex;
    flex-direction: column;
    min-height: auto; /* fills .app-main */
    overflow:visible;   
    margin-top: var(--topbar-height) ;
}

.step-content {
    flex: 1 1 auto;
}

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-height);
    z-index: 1000;
    box-shadow: 0 10px 24px rgba(0,0,0,.20); /* elevation */
    height: var(--topbar-height); /* lock the height */
    max-height: var(--topbar-height);
    min-height: var(--topbar-height);
    overflow: hidden; /* prevent overlay bleed */
}


.hidden {
    display:none;
}

    /* Ensure the actual content sits above the overlays */
    .topbar > *,
    .topbar .row {
        position: relative;
        z-index: 1;
    }

    /* Optional: nicer title styling */
    .topbar h3 {
        font-weight: 500;
        letter-spacing: .2px;
        margin: 0;
    }

/* sticky toolbar under the fixed topbar */
.wizard-toolbar {
    position: sticky;
    top: var(--topbar-h); /* sits just under your fixed topbar */
    z-index: 1030;
    background: var(--bs-body-bg, #fff); /* solid bg so content doesn't show through */
    border-bottom: 1px solid rgba(0,0,0,.08);
    padding: .75rem;
    display: flex;
    gap: .5rem;
    justify-content: center; /* ⬅ centers the buttons */
    flex-wrap: wrap;
    background-color:transparent ;
}

/* if you have a notch/safe-area */
@supports (top: max(0px)) {
    .wizard-toolbar {
        top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
    }
}

    .wizard-nav-sticky{
position: sticky;
bottom: 0;
z-index: 5;
display: flex;
gap: .5rem;
justify-content: flex-end;
padding: .75rem;
padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
background: linear-gradient(to top, rgba(248,249,250,.98) 65%, /* ~Bootstrap bg-light */
rgba(248,249,250,0));
border-top: 1px solid rgba(0,0,0,.08);
backdrop-filter: saturate(180%) blur(6px); /* optional nicety */}

.wizard-nav-fixed {
    align-items: center;
    bottom: calc(var(--wizard-gap) + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-wrap: wrap; /* allows wrap on small screens */
    gap: .5rem;
    position: fixed;
    right: var(--wizard-gap);
    z-index: 1040;
}

/* =========================
   6) Component Pseudos
   ========================= */
.topbar::before {
    background: linear-gradient( 180deg, rgba(0,0,0,.6) 0%, /* darkest at the very top */
    rgba(0,0,0,.3) 40%, /* soften by ~40% down */
    rgba(0,0,0,0) 100% /* fully transparent at bottom */
    );
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

/* =========================
   7) Media Queries
   ========================= */
@media (max-width: 576px) {
    :root {
        --wizard-gap: 12px;
        --wizard-height: 104px;
        --topbar-height: 100px;
    }

    h4 {
        font-size: 1.3em;
    }

    .form-label {
        font-size:.8em;
    }

    .navbar-logo {
        height: 40px;
        max-height: 40px;
        width: auto;
    }


    /* Optional: nicer title styling */
    .topbar h3 {
        font-weight: 400;
        letter-spacing: .2px;
        margin: 0;
        font-size: 1.2em;
    }
    .app-main {
        padding-left: 5px;
    }

}