/* Doctor.bd unified frontend header, footer and sticky sidebars v12 */
:root {
    --db-shell-max: 1360px;
    --db-shell-gap: 20px;
    --db-sidebar-size: 260px;
    --db-left-rail: var(--db-sidebar-size);
    --db-right-rail: var(--db-sidebar-size);
    --db-sticky-offset: calc(var(--db-header-height, 66px) + 16px);
    --db-sticky-height: calc(100dvh - var(--db-header-height, 66px) - 32px);
}

body.frontend-unified-shell-v12 {
    min-height: 100vh;
    background: #f5f8fc;
}

body.frontend-unified-shell-v12 .doctorbd-header,
body.frontend-unified-shell-v12 .doctorbd-footer {
    width: 100%;
}

body.frontend-unified-shell-v12 .doctorbd-header .container-xl,
body.frontend-unified-shell-v12 .doctorbd-footer .container-xl,
body.frontend-unified-shell-v12 .doctorbd-footer-bottom .container-xl,
body.frontend-unified-shell-v12 .doctorbd-main > .container-xl,
body.frontend-unified-shell-v12 .db-page-shell > .container-xl {
    width: 100%;
    max-width: var(--db-shell-max) !important;
}


body.frontend-unified-shell-v12 .doctor-directory-container,
body.frontend-unified-shell-v12 .hospital-directory-container,
body.frontend-unified-shell-v12 .blood-directory-container,
body.frontend-unified-shell-v12 .blog-directory-container,
body.frontend-unified-shell-v12 .community-directory-container,
body.frontend-unified-shell-v12 .doctor-profile-shell,
body.frontend-unified-shell-v12 .hospital-profile-shell,
body.frontend-unified-shell-v12 .linkedin-editorial-shell {
    width: 100%;
    max-width: var(--db-shell-max) !important;
    margin-right: auto;
    margin-left: auto;
    padding-right: 12px;
    padding-left: 12px;
}

body.frontend-unified-shell-v12 .doctorbd-header {
    position: sticky !important;
    top: 0;
    z-index: 2100 !important;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid rgba(220, 227, 238, .9);
    box-shadow: 0 5px 22px rgba(15, 38, 75, .055);
    backdrop-filter: blur(16px);
}

body.frontend-unified-shell-v12 .doctorbd-footer {
    position: relative;
    z-index: 30;
    margin-top: auto;
}

body.frontend-unified-shell-v12 .doctorbd-main {
    min-height: calc(100vh - var(--db-header-height, 66px));
}

body.frontend-unified-shell-v12 .frontend-main-column,
body.frontend-unified-shell-v12 .frontend-sidebar {
    min-width: 0;
}

body.frontend-unified-shell-v12 .frontend-sidebar {
    align-self: stretch !important;
}

body.frontend-unified-shell-v12 .frontend-three-column-row,
body.frontend-unified-shell-v12 .frontend-two-column-row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

@media (min-width: 1200px) {
    body.frontend-unified-shell-v12 .frontend-three-column-layout,
    body.frontend-unified-shell-v12 .frontend-three-column-row {
        display: grid !important;
        grid-template-columns: var(--db-sidebar-size) minmax(0, 1fr) var(--db-sidebar-size) !important;
        grid-template-areas: "left main right";
        gap: var(--db-shell-gap) !important;
        align-items: start !important;
    }

    body.frontend-unified-shell-v12 .frontend-two-column-layout,
    body.frontend-unified-shell-v12 .frontend-two-column-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) var(--db-sidebar-size) !important;
        grid-template-areas: "main right";
        gap: var(--db-shell-gap) !important;
        align-items: start !important;
    }

    body.frontend-unified-shell-v12 .frontend-two-column-layout-left {
        grid-template-columns: var(--db-sidebar-size) minmax(0, 1fr) !important;
        grid-template-areas: "left main";
    }

    body.frontend-unified-shell-v12 .frontend-three-column-row > *,
    body.frontend-unified-shell-v12 .frontend-two-column-row > * {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body.frontend-unified-shell-v12 .frontend-sidebar-left { grid-area: left; }
    body.frontend-unified-shell-v12 .frontend-sidebar-right { grid-area: right; display: block !important; }
    body.frontend-unified-shell-v12 .frontend-main-column { grid-area: main; }

    body.frontend-unified-shell-v12 .frontend-sticky-sidebar {
        position: sticky !important;
        top: var(--db-sticky-offset) !important;
        max-height: var(--db-sticky-height) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
        z-index: 20;
    }

    body.frontend-unified-shell-v12 .frontend-sticky-sidebar:hover,
    body.frontend-unified-shell-v12 .frontend-sticky-sidebar:focus-within {
        scrollbar-color: #b8c3d1 transparent;
    }

    body.frontend-unified-shell-v12 .frontend-sticky-sidebar::-webkit-scrollbar { width: 5px; }
    body.frontend-unified-shell-v12 .frontend-sticky-sidebar::-webkit-scrollbar-track { background: transparent; }
    body.frontend-unified-shell-v12 .frontend-sticky-sidebar::-webkit-scrollbar-thumb { border-radius: 999px; background: transparent; }
    body.frontend-unified-shell-v12 .frontend-sticky-sidebar:hover::-webkit-scrollbar-thumb,
    body.frontend-unified-shell-v12 .frontend-sticky-sidebar:focus-within::-webkit-scrollbar-thumb { background: #b8c3d1; }

    /* The shared sticky wrapper owns scrolling; older page-specific wrappers must not create another sticky context. */
    body.frontend-unified-shell-v12 .frontend-sticky-sidebar.db-sticky,
    body.frontend-unified-shell-v12 .frontend-sticky-sidebar.doctor-directory-sticky-rail,
    body.frontend-unified-shell-v12 .frontend-sticky-sidebar.blood-directory-sticky-rail,
    body.frontend-unified-shell-v12 .frontend-sticky-sidebar.blog-directory-sticky-rail,
    body.frontend-unified-shell-v12 .frontend-sticky-sidebar.community-directory-sticky-rail,
    body.frontend-unified-shell-v12 .frontend-sticky-sidebar.patient-dashboard-left-sticky,
    body.frontend-unified-shell-v12 .frontend-sticky-sidebar.patient-dashboard-right-sticky {
        position: sticky !important;
        top: var(--db-sticky-offset) !important;
    }

    /* Parent rails must stay open so CSS sticky can calculate against the full centre content height. */
    body.frontend-unified-shell-v12 .frontend-sidebar {
        position: relative !important;
        top: auto !important;
        max-height: none !important;
        overflow: visible !important;
        z-index: auto !important;
    }

    body.frontend-unified-shell-v12 .frontend-sidebar,
    body.frontend-unified-shell-v12 .frontend-three-column-row,
    body.frontend-unified-shell-v12 .frontend-two-column-row,
    body.frontend-unified-shell-v12 .frontend-three-column-layout,
    body.frontend-unified-shell-v12 .frontend-two-column-layout {
        overflow: visible !important;
        transform: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    :root {
        --db-sidebar-size: 244px;
    }

    body.frontend-unified-shell-v12 .frontend-three-column-layout,
    body.frontend-unified-shell-v12 .frontend-three-column-row,
    body.frontend-unified-shell-v12 .frontend-two-column-layout-left {
        display: grid !important;
        grid-template-columns: var(--db-sidebar-size) minmax(0, 1fr) !important;
        grid-template-areas: "left main";
        gap: 18px !important;
        align-items: start !important;
    }

    body.frontend-unified-shell-v12 .frontend-two-column-row,
    body.frontend-unified-shell-v12 .frontend-two-column-layout:not(.frontend-two-column-layout-left) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) var(--db-sidebar-size) !important;
        grid-template-areas: "main right";
        gap: 18px !important;
        align-items: start !important;
    }

    body.frontend-unified-shell-v12 .frontend-three-column-row > *,
    body.frontend-unified-shell-v12 .frontend-two-column-row > * {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body.frontend-unified-shell-v12 .frontend-sidebar-left { grid-area: left; }
    body.frontend-unified-shell-v12 .frontend-sidebar-right { grid-area: right; }
    body.frontend-unified-shell-v12 .frontend-main-column { grid-area: main; }
    body.frontend-unified-shell-v12 .frontend-three-column-layout > .frontend-sidebar-right,
    body.frontend-unified-shell-v12 .frontend-three-column-row > .frontend-sidebar-right { display: none !important; }

    body.frontend-unified-shell-v12 .frontend-sidebar {
        position: relative !important;
        top: auto !important;
        max-height: none !important;
        overflow: visible !important;
        z-index: auto !important;
    }

    body.frontend-unified-shell-v12 .frontend-sticky-sidebar {
        position: sticky !important;
        top: var(--db-sticky-offset) !important;
        max-height: var(--db-sticky-height) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-width: thin;
        z-index: 20;
    }
}

@media (max-width: 991.98px) {
    body.frontend-unified-shell-v12 .frontend-three-column-layout,
    body.frontend-unified-shell-v12 .frontend-three-column-row,
    body.frontend-unified-shell-v12 .frontend-two-column-layout,
    body.frontend-unified-shell-v12 .frontend-two-column-row {
        display: block !important;
    }

    body.frontend-unified-shell-v12 .frontend-sticky-sidebar {
        position: static !important;
        top: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* Authentication pages now use the same site header and footer. */
body.frontend-auth-page .patient-auth-shell {
    min-height: calc(100vh - var(--db-header-height, 66px));
    padding: 34px 16px 44px;
}

body.frontend-auth-page .patient-auth-card {
    box-shadow: 0 24px 70px rgba(15, 38, 75, .13);
}

@media (max-width: 575.98px) {
    body.frontend-auth-page .patient-auth-shell { padding: 14px 10px 28px; }
    body.frontend-auth-page .patient-auth-card { min-height: 0 !important; border-radius: 16px !important; }
}