* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


:root {

    --blue: #153f98;
    --blue-dark: #102d6d;

    --text: #142752;
    --muted: #7c8491;

    --border: #ebedf2;

    --background: #ffffff;
    --page: #f5f6f8;

}



/* ======================================================
   BASE
====================================================== */

html,
body {

    margin: 0;
    padding: 0;

    font-family:
        'Poppins',
        Arial,
        sans-serif;

    background:
        var(--page);

    color:
        var(--text);

}


body {

    min-height:
        100vh;

}


a {

    color:
        inherit;

}


.mobile-app {

    width:
        100%;

    max-width:
        390px;

    min-height:
        100vh;

    position:
        relative;

    margin:
        0 auto;

    background:
        #ffffff;

    box-shadow:
        0 0 28px
        rgba(
            20,
            45,
            90,
            0.08
        );

}



/* ======================================================
   ANDROID STATUS BAR
   STICKY DI SEMUA HALAMAN
====================================================== */

.android-status-bar {

    width:
        100%;

    height:
        38px;

    position:
        sticky;

    top:
        0;

    z-index:
        500;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        8px 18px 0;

    background:
        rgba(
            255,
            255,
            255,
            0.99
        );

}


.android-time {

    color:
        #111111;

    font-size:
        11px;

    font-weight:
        600;

    line-height:
        1;

}


.android-status-icons {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    color:
        #111111;

    font-size:
        10px;

}


.android-battery {

    min-width:
        27px;

    height:
        15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 4px;

    border-radius:
        4px;

    background:
        #111111;

    color:
        #ffffff;

    font-size:
        7px;

    font-weight:
        700;

}



/* ======================================================
   HOME HEADER
   HANYA ADA DI HOME
   STICKY DI BAWAH STATUS BAR
====================================================== */

.home-sticky-header {

    width:
        100%;

    position:
        sticky;

    top:
        38px;

    z-index:
        450;

    background:
        rgba(
            255,
            255,
            255,
            0.98
        );

    border-bottom:
        1px solid
        rgba(
            232,
            234,
            239,
            0.8
        );

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

}


.existing-home-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    padding:
        14px
        18px
        16px;

}


.existing-greeting {

    min-width:
        0;

}


.existing-greeting h1 {

    margin-bottom:
        3px;

    color:
        #10295d;

    font-size:
        21px;

    font-weight:
        700;

    line-height:
        1.2;

}


.existing-greeting p {

    color:
        #24395f;

    font-size:
        13px;

    font-weight:
        400;

}


.existing-top-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    flex-shrink:
        0;

}



/* ======================================================
   ESSENTIALS
====================================================== */

.essentials-pill {

    height:
        36px;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        0 12px 0 5px;

    border:
        1px solid
        #d9e0fb;

    border-radius:
        20px;

    background:
        linear-gradient(
            105deg,
            #f6f2ff,
            #dce7ff
        );

    color:
        #293349;

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        400;

    cursor:
        pointer;

}


.essentials-star {

    width:
        25px;

    height:
        25px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #dfe8ff;

    color:
        #3c6ec1;

    font-size:
        12px;

}



/* ======================================================
   SEARCH
====================================================== */

.top-search-btn {

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    border:
        none;

    background:
        transparent;

    color:
        var(--blue);

    font-size:
        23px;

    cursor:
        pointer;

}



/* ======================================================
   MAIN CONTENT
====================================================== */

.phone-shell {

    min-height:
        100vh;

    padding:
        14px
        16px
        125px;

    overflow-x:
        hidden;

    background:
        #ffffff;

}



/* ======================================================
   FEATURE SLIDER
====================================================== */

.feature-slider-section {

    margin-bottom:
        16px;

}


.feature-slider {

    width:
        100%;

    display:
        flex;

    gap:
        12px;

    overflow-x:
        auto;

    scroll-snap-type:
        x mandatory;

    scroll-behavior:
        smooth;

    scrollbar-width:
        none;

    -webkit-overflow-scrolling:
        touch;

}


.feature-slider::-webkit-scrollbar {

    display:
        none;

}


.feature-slide {

    min-width:
        100%;

    flex-shrink:
        0;

    scroll-snap-align:
        start;

}



/* ======================================================
   FEATURE MENU
====================================================== */

.existing-menu-card {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap:
        17px 6px;

    min-height:
        203px;

    padding:
        20px 12px;

    border:
        1px solid
        #f0f1f3;

    border-radius:
        8px;

    background:
        #ffffff;

    box-shadow:
        0 5px 14px
        rgba(
            33,
            53,
            94,
            0.09
        );

}


.second-page-menu {

    align-content:
        start;

}


.existing-menu-item {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        6px;

    color:
        #18294e;

    text-decoration:
        none;

    text-align:
        center;

    font-size:
        8.3px;

    line-height:
        1.25;

    font-weight:
        500;

}


.existing-icon {

    width:
        46px;

    height:
        46px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        13px;

    color:
        #ffffff;

    font-size:
        18px;

}



/* EXISTING ICON COLORS */

.appointment {

    background:
        linear-gradient(
            145deg,
            #ff93b1,
            #f84d90
        );

}


.queue {

    background:
        linear-gradient(
            145deg,
            #ffb664,
            #dd622c
        );

}


.care-plan {

    background:
        linear-gradient(
            145deg,
            #df70d5,
            #aa38cc
        );

}


.medical {

    background:
        linear-gradient(
            145deg,
            #a26fc0,
            #60428a
        );

}


.excellence {

    background:
        linear-gradient(
            145deg,
            #8a73f2,
            #5251df
        );

}


.marketplace {

    background:
        linear-gradient(
            145deg,
            #e2659b,
            #b2256b
        );

}


.mcu {

    background:
        linear-gradient(
            145deg,
            #61cea0,
            #269b68
        );

}


.promotion {

    background:
        linear-gradient(
            145deg,
            #aa75c7,
            #703d9a
        );

}



/* NEW SOLUTION ICONS */

.emergency {

    background:
        linear-gradient(
            145deg,
            #e86f6d,
            #b94645
        );

}


.journal {

    background:
        linear-gradient(
            145deg,
            #6094d8,
            #3560a8
        );

}


.myjourney {

    background:
        linear-gradient(
            145deg,
            #5e91e8,
            #3156b8
        );

}


.careteam {

    background:
        linear-gradient(
            145deg,
            #59cabc,
            #248f88
        );

}


.health360 {

    background:
        linear-gradient(
            145deg,
            #c183de,
            #8153af
        );

}


.healscan {

    background:
        linear-gradient(
            145deg,
            #60c5d2,
            #347ea8
        );

}


.community {

    background:
        linear-gradient(
            145deg,
            #d882b0,
            #9d4a80
        );

}


.homecare {

    background:
        linear-gradient(
            145deg,
            #6acb91,
            #32925e
        );

}



/* ======================================================
   SLIDER INDICATOR
====================================================== */

.slider-indicators {

    height:
        18px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        5px;

    margin-top:
        7px;

}


.slider-dot {

    width:
        6px;

    height:
        6px;

    padding:
        0;

    border:
        0;

    border-radius:
        20px;

    background:
        #d9dde4;

    transition:
        width .22s ease,
        background .22s ease;

    cursor:
        pointer;

}


.slider-dot.active {

    width:
        27px;

    background:
        #1749a5;

}



/* ======================================================
   SERVICE CAROUSEL
====================================================== */

.service-carousel-section {

    margin-bottom:
        22px;

}


.service-carousel {

    display:
        flex;

    gap:
        11px;

    overflow-x:
        auto;

    scroll-snap-type:
        x mandatory;

    scroll-behavior:
        smooth;

    scrollbar-width:
        none;

    -webkit-overflow-scrolling:
        touch;

}


.service-carousel::-webkit-scrollbar {

    display:
        none;

}


.service-slide {

    min-width:
        100%;

    flex-shrink:
        0;

    scroll-snap-align:
        start;

}


.existing-carousel-card {

    min-height:
        101px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        15px 14px;

    border-radius:
        8px;

    background:
        linear-gradient(
            110deg,
            #e8faff,
            #ffffff,
            #f6f3ff
        );

    box-shadow:
        0 4px 12px
        rgba(
            30,
            54,
            95,
            .07
        );

    text-decoration:
        none;

}


.pet-illustration {

    width:
        82px;

    flex:
        0 0 82px;

    display:
        grid;

    place-items:
        center;

}


.pet-ring {

    width:
        65px;

    height:
        65px;

    display:
        grid;

    place-items:
        center;

    border:
        7px solid
        #7a55ee;

    border-radius:
        50%;

    color:
        #7a55ee;

    font-size:
        25px;

}


.pet-content {

    flex:
        1;

    min-width:
        0;

}


.pet-content h3 {

    margin-bottom:
        4px;

    color:
        #10234f;

    font-size:
        12px;

    font-weight:
        700;

}


.pet-content p {

    color:
        #39465e;

    font-size:
        8.5px;

    line-height:
        1.45;

}


.promo-chevron {

    color:
        #b6bdc7;

    font-size:
        12px;

}


.careplus-card {

    background:
        linear-gradient(
            115deg,
            #eaf9ff,
            #ffffff,
            #f3f7ff
        );

}


.careplus-icon,
.heal-carousel-icon {

    width:
        66px;

    height:
        66px;

    flex:
        0 0 66px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        20px;

    background:
        linear-gradient(
            145deg,
            #dff9ff,
            #ebefff
        );

    color:
        #5785d4;

    font-size:
        27px;

}


.heal-carousel-icon {

    color:
        var(--blue);

}


.new-label {

    display:
        block;

    margin-bottom:
        2px;

    color:
        #36a09a;

    font-size:
        8px;

    font-weight:
        600;

}



/* ======================================================
   PROMOTION
====================================================== */

.existing-promo-section {

    margin-bottom:
        27px;

}


.existing-promo-section > h2 {

    margin-bottom:
        12px;

    font-size:
        16px;

    color:
        #112751;

    font-weight:
        700;

}


.promotion-slider {

    display:
        flex;

    gap:
        12px;

    overflow-x:
        auto;

    scroll-snap-type:
        x mandatory;

    scroll-behavior:
        smooth;

    scrollbar-width:
        none;

    -webkit-overflow-scrolling:
        touch;

}


.promotion-slider::-webkit-scrollbar {

    display:
        none;

}


.promotion-slide {

    min-width:
        100%;

    flex-shrink:
        0;

    scroll-snap-align:
        start;

}


.real-promo-card {

    height:
        175px;

    position:
        relative;

    overflow:
        hidden;

    padding:
        14px;

    border-radius:
        8px;

    color:
        #ffffff;

}


.promo-heart {

    background:
        linear-gradient(
            120deg,
            #c8c1b8,
            #f3e7df,
            #f6d0c8
        );

}


.promo-senior {

    background:
        linear-gradient(
            135deg,
            #585456,
            #b79e8e
        );

}


.promo-lung {

    background:
        linear-gradient(
            135deg,
            #0a5887,
            #1595af
        );

}


.promo-mini-brand {

    position:
        relative;

    z-index:
        2;

    margin-bottom:
        10px;

    font-size:
        7px;

    font-weight:
        600;

}


.promo-big-title {

    position:
        relative;

    z-index:
        2;

    max-width:
        215px;

    font-size:
        18px;

    line-height:
        1;

    font-weight:
        700;

    text-shadow:
        0 2px 4px
        rgba(
            0,
            0,
            0,
            .3
        );

}


.promo-small-text {

    position:
        relative;

    z-index:
        2;

    margin-top:
        4px;

    font-size:
        7px;

}


.fake-pricing {

    width:
        230px;

    position:
        absolute;

    z-index:
        2;

    left:
        14px;

    bottom:
        16px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        5px;

}


.fake-pricing > div {

    padding:
        7px;

    border-radius:
        5px;

    background:
        rgba(
            60,
            60,
            60,
            .65
        );

}


.fake-pricing span {

    display:
        block;

    margin-bottom:
        4px;

    font-size:
        5px;

}


.fake-pricing strong {

    font-size:
        9px;

}


.promo-art-heart {

    position:
        absolute;

    right:
        2px;

    top:
        24px;

    color:
        #e54245;

    font-size:
        95px;

    opacity:
        .88;

}


.promo-doctor-art,
.promo-lung-art {

    position:
        absolute;

    right:
        16px;

    bottom:
        15px;

    font-size:
        90px;

    opacity:
        .35;

}


.promo-price-pill {

    width:
        fit-content;

    position:
        relative;

    z-index:
        3;

    margin-top:
        20px;

    padding:
        5px 8px;

    border-radius:
        5px;

    background:
        #e8ab41;

    color:
        #ffffff;

    font-size:
        9px;

    font-weight:
        700;

}



/* ======================================================
   APPOINTMENT
====================================================== */

.appointment-home-section {

    margin-bottom:
        29px;

}


.appointment-home-section > h2 {

    margin-bottom:
        10px;

    font-size:
        15px;

    color:
        #152850;

    font-weight:
        700;

}


.appointment-home-card {

    min-height:
        165px;

    position:
        relative;

    overflow:
        hidden;

    padding:
        17px;

    border:
        1px solid
        #eceef2;

    border-radius:
        8px;

    background:
        #ffffff;

    box-shadow:
        0 5px 13px
        rgba(
            30,
            50,
            90,
            .07
        );

}


.appointment-home-card h3 {

    font-size:
        13px;

    color:
        #152850;

}


.appointment-types {

    display:
        flex;

    gap:
        5px;

    margin:
        3px 0 12px;

    color:
        #52606e;

    font-size:
        8px;

}


.appointment-types i {

    color:
        #23b278;

}


.appointment-home-card > p {

    width:
        75%;

    margin-bottom:
        12px;

    color:
        #687180;

    font-size:
        9px;

    line-height:
        1.5;

}


.find-doctor-button {

    display:
        inline-flex;

    padding:
        7px 12px;

    border-radius:
        6px;

    background:
        var(--blue);

    color:
        #ffffff;

    text-decoration:
        none;

    font-size:
        8px;

    font-weight:
        600;

}


.appointment-decoration {

    position:
        absolute;

    right:
        14px;

    top:
        17px;

    color:
        #eff2f8;

    font-size:
        55px;

}



/* ======================================================
   MANDAYA HEAL
====================================================== */

.mandaya-heal-home-section {

    margin-top:
        6px;

    padding-top:
        20px;

    border-top:
        6px solid
        #f5f6f8;

}


.section-mini-label {

    margin-bottom:
        3px;

    color:
        var(--blue);

    font-size:
        7px;

    letter-spacing:
        .6px;

    font-weight:
        700;

}


.mandaya-heal-home-section > h2 {

    margin-bottom:
        3px;

    color:
        #122a5a;

    font-size:
        19px;

    font-weight:
        700;

}


.heal-section-description {

    margin-bottom:
        15px;

    color:
        #7d8491;

    font-size:
        9px;

    line-height:
        1.5;

}



/* ======================================================
   HEAL ENTRY
====================================================== */

.heal-entry-card {

    min-height:
        155px;

    position:
        relative;

    display:
        block;

    overflow:
        hidden;

    padding:
        17px;

    margin-bottom:
        15px;

    border-radius:
        13px;

    background:
        linear-gradient(
            135deg,
            #f7faff,
            #eaf1ff
        );

    text-decoration:
        none;

}


.heal-entry-copy {

    width:
        72%;

    position:
        relative;

    z-index:
        2;

}


.heal-new-label {

    display:
        inline-block;

    margin-bottom:
        7px;

    padding:
        4px 7px;

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        var(--blue);

    font-size:
        6px;

    font-weight:
        700;

}


.heal-entry-copy h3 {

    margin-bottom:
        5px;

    color:
        var(--blue);

    font-size:
        14px;

    font-weight:
        700;

}


.heal-entry-copy p {

    margin-bottom:
        9px;

    color:
        #6f7784;

    font-size:
        8px;

}


.heal-start-link {

    color:
        var(--blue);

    font-size:
        8px;

    font-weight:
        600;

}


.heal-entry-visual {

    width:
        100px;

    height:
        100px;

    position:
        absolute;

    right:
        -14px;

    bottom:
        -8px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            .65
        );

    color:
        var(--blue);

    font-size:
        43px;

}



/* ======================================================
   JOURNEY
====================================================== */

.health-journey-card {

    padding:
        15px;

    margin-bottom:
        12px;

    border:
        1px solid
        #eceef2;

    border-radius:
        12px;

}


.journey-header {

    display:
        flex;

    justify-content:
        space-between;

}


.journey-status {

    display:
        inline-block;

    margin-bottom:
        5px;

    padding:
        3px 6px;

    border-radius:
        8px;

    background:
        #e7f5ec;

    color:
        #278659;

    font-size:
        6px;

    font-weight:
        700;

}


.journey-header h3 {

    font-size:
        12px;

    color:
        var(--blue);

    font-weight:
        700;

}


.journey-header p {

    font-size:
        7px;

    color:
        #8a9099;

}


.journey-header > strong {

    color:
        var(--blue);

    font-size:
        11px;

}


.journey-progress {

    height:
        5px;

    margin:
        12px 0;

    overflow:
        hidden;

    border-radius:
        10px;

    background:
        #e9edf2;

}


.journey-progress-active {

    height:
        100%;

    background:
        var(--blue);

}


.journey-next {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        9px;

    margin-bottom:
        10px;

    border-radius:
        9px;

    background:
        #f7f8fa;

}


.journey-next-icon {

    width:
        32px;

    height:
        32px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        8px;

    background:
        #eaf0ff;

    color:
        var(--blue);

}


.journey-next small {

    display:
        block;

    font-size:
        6px;

    color:
        #9197a0;

}


.journey-next strong {

    display:
        block;

    font-size:
        8px;

    color:
        #354159;

}


.journey-next p {

    font-size:
        6px;

    color:
        #9197a0;

}


.view-journey {

    display:
        flex;

    justify-content:
        space-between;

    color:
        var(--blue);

    font-size:
        8px;

    font-weight:
        600;

    text-decoration:
        none;

}



/* ======================================================
   HEAL SUMMARY
====================================================== */

.heal-summary-card {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        12px;

    margin-bottom:
        20px;

    border:
        1px solid
        #eceef2;

    border-radius:
        11px;

    text-decoration:
        none;

}


.heal-summary-icon {

    width:
        40px;

    height:
        40px;

    display:
        grid;

    place-items:
        center;

    flex-shrink:
        0;

    border-radius:
        10px;

    background:
        #edf3ff;

    color:
        var(--blue);

}


.heal-summary-card > div:nth-child(2) {

    flex:
        1;

    min-width:
        0;

}


.heal-summary-card span {

    display:
        block;

    color:
        var(--blue);

    font-size:
        6px;

    font-weight:
        600;

}


.heal-summary-card h3 {

    margin:
        2px 0;

    font-size:
        9px;

    font-weight:
        600;

}


.heal-summary-card p {

    color:
        #8a919b;

    font-size:
        7px;

}



/* ======================================================
   SUPPORT
====================================================== */

.heal-support-title h3 {

    margin-bottom:
        10px;

    font-size:
        13px;

    font-weight:
        700;

}


.heal-support-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap:
        8px;

}


.heal-support-grid a {

    text-align:
        center;

    text-decoration:
        none;

    font-size:
        7px;

}


.support-icon {

    width:
        43px;

    height:
        43px;

    display:
        grid;

    place-items:
        center;

    margin:
        0 auto 5px;

    border-radius:
        12px;

    font-size:
        17px;

}


.support-icon.blue {

    background:
        #eaf1ff;

    color:
        #3566be;

}


.support-icon.purple {

    background:
        #f2ebff;

    color:
        #8453af;

}


.support-icon.teal {

    background:
        #e7f6f4;

    color:
        #2a9189;

}


.support-icon.green {

    background:
        #e7f5eb;

    color:
        #2c955c;

}



/* ======================================================
   CARDS DETAIL
====================================================== */

.placeholder-card,
.locked-summary-card,
.feedback-card,
.success-card,
.lucky-card,
.summary-section-card {

    padding:
        20px;

    margin-bottom:
        14px;

    border:
        1px solid
        #eceef2;

    border-radius:
        13px;

    background:
        #ffffff;

    box-shadow:
        0 4px 12px
        rgba(
            30,
            53,
            94,
            .05
        );

}


.placeholder-card {

    text-align:
        center;

}


.placeholder-icon,
.locked-icon,
.success-icon,
.gift-orbit {

    width:
        65px;

    height:
        65px;

    display:
        grid;

    place-items:
        center;

    margin:
        0 auto 15px;

    border-radius:
        19px;

    background:
        #edf3ff;

    color:
        var(--blue);

    font-size:
        27px;

}



/* ======================================================
   BOTTOM NAV
====================================================== */

.bottom-nav {

    width:
        100%;

    max-width:
        390px;

    height:
        88px;

    position:
        fixed;

    left:
        50%;

    bottom:
        0;

    transform:
        translateX(-50%);

    z-index:
        600;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-around;

    padding:
        4px 8px 9px;

    border-top:
        1px solid
        #eceef1;

    background:
        rgba(
            255,
            255,
            255,
            .98
        );

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

}


.nav-item {

    width:
        20%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        4px;

    color:
        #9ba1ab;

    font-size:
        8px;

    text-decoration:
        none;

}


.nav-item i {

    font-size:
        20px;

}


.nav-item.active {

    color:
        var(--blue);

    font-weight:
        600;

}


.scan-button {

    width:
        58px;

    height:
        58px;

    position:
        absolute;

    left:
        50%;

    top:
        -27px;

    transform:
        translateX(-50%);

    display:
        grid;

    place-items:
        center;

    border:
        0;

    border-radius:
        50%;

    background:
        #ffffff;

    color:
        var(--blue);

    box-shadow:
        0 5px 16px
        rgba(
            30,
            50,
            90,
            .16
        );

    font-size:
        20px;

    cursor:
        pointer;

}



/* ======================================================
   RESPONSIVE
====================================================== */

@media (max-width: 340px) {

    .android-status-bar {

        padding-left:
            12px;

        padding-right:
            12px;

    }


    .existing-home-top {

        padding-left:
            12px;

        padding-right:
            12px;

    }


    .phone-shell {

        padding-left:
            12px;

        padding-right:
            12px;

    }


    .existing-greeting h1 {

        font-size:
            18px;

    }


    .essentials-pill {

        padding-right:
            8px;

        font-size:
            9px;

    }

}
/* ======================================================
   FIX - MANDAYA HEAL DETAIL PAGE
====================================================== */

/* WAJIB: menyembunyikan step yang belum aktif */
.hidden {
    display: none !important;
}


/* ======================================================
   HEAL START MAIN CARD
====================================================== */

.heal-chat-card {
    width: 100%;

    padding: 18px;

    margin-bottom: 15px;

    border: 1px solid #e9edf3;

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 5px 16px
        rgba(28, 52, 99, 0.06);
}


/* ======================================================
   AI INTRO
====================================================== */

.ai-intro {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin-bottom: 18px;
}

.ai-avatar {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #edf3ff,
            #e2ebff
        );

    color: #153f98;

    font-size: 19px;
}

.ai-intro > div:last-child {
    flex: 1;
    min-width: 0;
}

.ai-label {
    display: block;

    margin-bottom: 4px;

    color: #153f98;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 0.3px;
}

.ai-intro h2 {
    margin: 0 0 6px;

    color: #17326d;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.4;
}

.ai-intro p {
    margin: 0;

    color: #7d8592;

    font-size: 8px;
    line-height: 1.6;
}


/* ======================================================
   CHAT BUBBLE
====================================================== */

.chat-area {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 9px;

    margin-bottom: 13px;
}

.chat-bubble {
    width: fit-content;
    max-width: 86%;

    padding: 10px 12px;

    border-radius: 13px;

    font-size: 8.5px;
    line-height: 1.55;
}

.chat-bubble p {
    margin: 0;
}

.chat-bubble.ai {
    align-self: flex-start;

    border-bottom-left-radius: 4px;

    background: #f2f5fa;

    color: #45536b;
}

.chat-bubble.user {
    align-self: flex-end;

    border-bottom-right-radius: 4px;

    background: #153f98;

    color: #ffffff;
}


/* ======================================================
   SYMPTOM CHIPS
====================================================== */

.symptom-suggestions {
    width: 100%;

    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 12px;
}

.symptom-chip {
    min-height: 31px;

    padding: 6px 10px;

    border: 1px solid #dce3ef;

    border-radius: 20px;

    background: #ffffff;

    color: #40516d;

    font-family:
        'Poppins',
        Arial,
        sans-serif;

    font-size: 7.5px;
    font-weight: 500;

    cursor: pointer;
}

.symptom-chip:hover,
.symptom-chip:focus {
    border-color: #153f98;

    background: #eef3ff;

    color: #153f98;
}


/* ======================================================
   CHAT INPUT
====================================================== */

.chat-input-wrap {
    width: 100%;

    display: flex;
    align-items: flex-end;

    gap: 8px;

    padding: 9px;

    border: 1px solid #dfe4ec;

    border-radius: 13px;

    background: #fafbfd;
}

.chat-input {
    width: 100%;
    flex: 1;

    min-height: 58px;
    max-height: 110px;

    padding: 4px;

    border: 0;

    outline: none;

    resize: none;

    background: transparent;

    color: #394762;

    font-family:
        'Poppins',
        Arial,
        sans-serif;

    font-size: 9px;

    line-height: 1.5;
}

.chat-input::placeholder {
    color: #a0a6b0;
}

.chat-send-button {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: grid;
    place-items: center;

    border: 0;

    border-radius: 50%;

    background: #153f98;

    color: #ffffff;

    font-size: 13px;

    cursor: pointer;
}


/* ======================================================
   AI QUESTION CARD
====================================================== */

.ai-question-card {
    width: 100%;

    padding: 18px;

    margin-bottom: 15px;

    border: 1px solid #e9edf3;

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 5px 16px
        rgba(28, 52, 99, 0.06);
}


/* PROGRESS */

.question-progress {
    margin-bottom: 17px;
}

.question-progress > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 8px;

    color: #778092;

    font-size: 7.5px;
}

.question-progress strong {
    color: #153f98;

    font-size: 8px;
}

.question-progress-track {
    width: 100%;
    height: 5px;

    overflow: hidden;

    border-radius: 20px;

    background: #e9edf3;
}

.question-progress-active {
    height: 100%;

    border-radius: inherit;

    background: #153f98;

    transition: width 0.25s ease;
}


/* QUESTION */

.ai-question-content {
    margin-bottom: 15px;
}

.small-ai-avatar {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    margin-bottom: 10px;

    border-radius: 10px;

    background: #edf3ff;

    color: #153f98;

    font-size: 13px;
}

.ai-question-content h3 {
    margin: 0 0 6px;

    color: #273b62;

    font-size: 13px;
    font-weight: 700;

    line-height: 1.45;
}

.ai-question-content p {
    margin: 0;

    color: #858d99;

    font-size: 8px;

    line-height: 1.55;
}


/* ======================================================
   ANSWER OPTIONS
====================================================== */

.answer-options {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 8px;
}

.answer-option {
    min-height: 41px;

    padding: 8px;

    border: 1px solid #dfe4ec;

    border-radius: 11px;

    background: #ffffff;

    color: #44536c;

    font-family:
        'Poppins',
        Arial,
        sans-serif;

    font-size: 8px;
    font-weight: 500;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.answer-option:hover,
.answer-option.selected {
    border-color: #153f98;

    background: #edf3ff;

    color: #153f98;
}


/* ======================================================
   STRUCTURED STORY
====================================================== */

.structured-story-card {
    width: 100%;

    padding: 18px;

    margin-bottom: 15px;

    border: 1px solid #e9edf3;

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 5px 16px
        rgba(28, 52, 99, 0.06);
}

.result-title-row {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 14px;
}

.result-title-row h2 {
    margin: 0;

    color: #17326d;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.4;
}

.summary-check {
    width: 33px;
    height: 33px;

    flex: 0 0 33px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #e7f6ed;

    color: #27935d;

    font-size: 12px;
}

.story-list {
    display: flex;
    flex-direction: column;
}

.story-row {
    padding: 11px 0;

    border-bottom: 1px solid #eef0f4;
}

.story-row:last-child {
    border-bottom: 0;
}

.story-row span {
    display: block;

    margin-bottom: 3px;

    color: #8c939e;

    font-size: 7px;
}

.story-row strong {
    display: block;

    color: #37455f;

    font-size: 9px;
    font-weight: 600;

    line-height: 1.45;
}


/* ======================================================
   SECTION SMALL LABEL
====================================================== */

.section-mini-label {
    display: block;

    margin-bottom: 4px;

    color: #153f98;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 0.6px;
}


/* ======================================================
   CARE DIRECTION
====================================================== */

.care-direction-card {
    width: 100%;

    padding: 19px;

    margin-bottom: 15px;

    border: 1px solid #e9edf3;

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 5px 16px
        rgba(28, 52, 99, 0.06);

    text-align: center;
}

.direction-icon {
    width: 66px;
    height: 66px;

    display: grid;
    place-items: center;

    margin: 2px auto 12px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #e9f4ff,
            #edf3ff
        );

    color: #153f98;

    font-size: 28px;
}

.care-direction-card h2 {
    margin: 0 0 7px;

    color: #17326d;

    font-size: 16px;

    font-weight: 700;
}

.care-direction-card > p {
    margin: 0;

    color: #717b8b;

    font-size: 9px;

    line-height: 1.6;
}


/* ======================================================
   RESPONSIBLE AI
====================================================== */

.responsible-ai-note {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin-top: 15px;

    padding: 12px;

    border-radius: 11px;

    background: #f6f8fb;

    text-align: left;
}

.responsible-ai-note i {
    margin-top: 2px;

    color: #153f98;

    font-size: 13px;
}

.responsible-ai-note p {
    margin: 0;

    color: #657185;

    font-size: 7.5px;

    line-height: 1.55;
}


/* ======================================================
   CARE DIRECTION BUTTONS
====================================================== */

.direction-actions {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 8px;

    margin-top: 15px;
}

.secondary-outline-button {
    width: 100%;
    min-height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 9px 12px;

    border: 1px solid #153f98;

    border-radius: 10px;

    background: #ffffff;

    color: #153f98;

    font-family:
        'Poppins',
        Arial,
        sans-serif;

    font-size: 8px;
    font-weight: 600;

    cursor: pointer;
}

.full-primary-button {
    width: 100%;
    min-height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px 12px;

    border: 0;

    border-radius: 10px;

    background: #153f98;

    color: #ffffff;

    font-family:
        'Poppins',
        Arial,
        sans-serif;

    font-size: 8.5px;
    font-weight: 600;

    text-decoration: none;

    cursor: pointer;
}


/* ======================================================
   HUMAN CARE NAVIGATOR MODAL
====================================================== */

.navigator-modal {
    width: 100%;
    max-width: 390px;

    position: fixed;

    top: 0;
    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    z-index: 1000;
}

.navigator-modal-overlay {
    position: absolute;

    inset: 0;

    background:
        rgba(
            13,
            28,
            56,
            0.45
        );
}

.navigator-sheet {
    width: 100%;

    position: absolute;

    left: 0;
    bottom: 0;

    padding:
        10px
        18px
        25px;

    border-radius:
        22px
        22px
        0
        0;

    background: #ffffff;

    box-shadow:
        0 -7px 25px
        rgba(30, 50, 90, 0.12);
}

.sheet-handle {
    width: 41px;
    height: 4px;

    margin:
        0 auto
        18px;

    border-radius: 20px;

    background: #d7dbe1;
}

.navigator-profile {
    display: flex;

    align-items: center;

    gap: 12px;
}

.navigator-avatar {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background: #eaf1ff;

    color: #153f98;

    font-size: 19px;
}

.navigator-profile span {
    display: block;

    color: #153f98;

    font-size: 7px;

    font-weight: 600;
}

.navigator-profile h3 {
    margin: 2px 0;

    color: #283c63;

    font-size: 12px;

    font-weight: 700;
}

.navigator-profile p {
    margin: 0;

    color: #868e99;

    font-size: 7px;
}

.navigator-summary {
    margin-top: 16px;

    padding: 13px;

    border-radius: 11px;

    background: #f7f8fa;
}

.navigator-summary > span {
    color: #606d82;

    font-size: 8px;

    font-weight: 600;
}

.navigator-summary ul {
    margin-top: 7px;

    padding-left: 17px;

    color: #7c8591;

    font-size: 7.5px;

    line-height: 1.9;
}

.modal-close-button {
    width: 100%;

    padding: 10px;

    margin-top: 6px;

    border: 0;

    background: transparent;

    color: #858c97;

    font-family:
        'Poppins',
        Arial,
        sans-serif;

    font-size: 8px;

    cursor: pointer;
}


/* ======================================================
   SMALL PHONE
====================================================== */

@media (max-width: 340px) {

    .heal-chat-card,
    .ai-question-card,
    .structured-story-card,
    .care-direction-card {
        padding: 15px;
    }

    .answer-options {
        gap: 5px;
    }

    .answer-option {
        padding: 6px 4px;

        font-size: 7px;
    }
}
/* ======================================================
   INLINE QUESTION FLOW - HEAL START
====================================================== */

.ai-inline-question-box {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eef1f5;
}

.inline-question-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.inline-question-top span {
    color: #778092;
    font-size: 7.5px;
    font-weight: 500;
}

.inline-question-top strong {
    color: #153f98;
    font-size: 8px;
    font-weight: 700;
}

.inline-question-progress {
    width: 100%;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #e9edf3;
    margin-bottom: 15px;
}

.inline-question-progress-bar {
    height: 100%;
    border-radius: inherit;
    background: #153f98;
    transition: width 0.25s ease;
}

.inline-question-body {
    margin-bottom: 14px;
}

.inline-question-body h3 {
    margin: 0 0 6px;
    color: #273b62;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.inline-question-body p {
    margin: 0;
    color: #858d99;
    font-size: 8px;
    line-height: 1.55;
}

.answer-options {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.answer-option {
    min-height: 41px;
    padding: 8px;
    border: 1px solid #dfe4ec;
    border-radius: 11px;
    background: #ffffff;
    color: #44536c;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 8px;
    font-weight: 500;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.answer-option:hover,
.answer-option.selected {
    border-color: #153f98;
    background: #edf3ff;
    color: #153f98;
}

@media (max-width: 340px) {
    .answer-options {
        gap: 5px;
    }

    .answer-option {
        padding: 6px 4px;
        font-size: 7px;
    }
}
/* ======================================================
   HEAL START - UNIFIED FLOW
====================================================== */

.submitted-complaint {
    margin-top: 4px;
    margin-bottom: 15px;
}

.submitted-complaint > span {
    display: block;
    margin-bottom: 6px;

    color: #8b929e;

    font-size: 7px;
    font-weight: 500;
}

.submitted-complaint-content {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    padding: 11px 12px;

    border-radius: 11px;

    background: #f6f8fb;
}

.submitted-complaint-content i {
    margin-top: 2px;

    color: #153f98;

    font-size: 12px;
}

.submitted-complaint-content p {
    margin: 0;

    color: #43516a;

    font-size: 8.5px;

    line-height: 1.5;
}


/* QUESTION NYATU DENGAN CARD */

.ai-inline-question-box {
    margin-top: 14px;

    padding-top: 15px;

    border-top:
        1px solid #edf0f4;
}


/* ANALYZING */

.analyzing-state {
    display: flex;
    align-items: center;

    gap: 11px;

    padding:
        15px 3px 3px;

    border-top:
        1px solid #edf0f4;
}

.analyzing-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background: #edf3ff;

    color: #153f98;

    font-size: 16px;
}

.analyzing-state span {
    display: block;

    color: #153f98;

    font-size: 6.5px;

    font-weight: 600;
}

.analyzing-state h3 {
    margin: 2px 0;

    color: #283c62;

    font-size: 10px;

    font-weight: 700;
}

.analyzing-state p {
    margin: 0;

    color: #858d99;

    font-size: 7px;

    line-height: 1.45;
}
/* ======================================================
   STACKED AI HEALTH QUESTIONS
====================================================== */

.assessment-flow {
    margin-top: 16px;
    padding-top: 15px;

    border-top:
        1px solid #edf0f4;
}


/* HEADER */

.assessment-header {
    margin-bottom: 15px;
}

.assessment-header > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 8px;
}

.assessment-header span {
    color: #153f98;

    font-size: 7px;
    font-weight: 700;
}

.assessment-header strong {
    color: #7c8593;

    font-size: 7px;
    font-weight: 500;
}


.assessment-progress-track {
    width: 100%;
    height: 5px;

    overflow: hidden;

    border-radius: 999px;

    background: #e9edf3;
}


.assessment-progress-active {
    height: 100%;

    border-radius: inherit;

    background: #153f98;

    transition:
        width .3s ease;
}


/* QUESTION */

.assessment-question {
    padding:
        16px 0;

    border-top:
        1px solid #edf0f4;
}


.assessment-question:first-child {
    padding-top: 4px;
    border-top: 0;
}


.assessment-question-number {
    margin-bottom: 7px;
}


.assessment-question-number span {
    display: inline-block;

    padding:
        4px 7px;

    border-radius: 8px;

    background: #edf3ff;

    color: #153f98;

    font-size: 6.5px;

    font-weight: 700;
}


.assessment-question h3 {
    margin:
        0 0 5px;

    color: #263b63;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.5;
}


.assessment-helper {
    margin:
        0 0 12px;

    color: #858d99;

    font-size: 7.5px;

    line-height: 1.55;
}


/* OPTIONS */

.assessment-options {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 7px;

    margin-bottom: 9px;
}


.assessment-option {
    min-height: 38px;

    padding:
        7px 5px;

    border:
        1px solid #dfe4ec;

    border-radius: 10px;

    background: #ffffff;

    color: #44536c;

    font-family:
        'Poppins',
        Arial,
        sans-serif;

    font-size: 7.5px;

    font-weight: 500;

    cursor: pointer;
}


.assessment-option.selected {
    border-color: #153f98;

    background: #edf3ff;

    color: #153f98;

    font-weight: 600;
}


.assessment-option:disabled {
    cursor: default;
}


/* WRITTEN ANSWER */

.assessment-text-wrap {
    margin-bottom: 9px;
}


.assessment-text-input {
    width: 100%;

    min-height: 63px;

    display: block;

    padding:
        10px 11px;

    border:
        1px solid #dfe4ec;

    border-radius: 11px;

    outline: none;

    resize: vertical;

    background: #fafbfd;

    color: #43516a;

    font-family:
        'Poppins',
        Arial,
        sans-serif;

    font-size: 8px;

    line-height: 1.5;
}


.assessment-text-input::placeholder {
    color: #a1a7b0;
}


.assessment-text-input:focus {
    border-color: #153f98;

    background: #ffffff;
}


/* NEXT */

.assessment-next-button {
    min-height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-left: auto;

    padding:
        8px 13px;

    border: 0;

    border-radius: 9px;

    background: #153f98;

    color: #ffffff;

    font-family:
        'Poppins',
        Arial,
        sans-serif;

    font-size: 7.5px;

    font-weight: 600;

    cursor: pointer;
}


/* ANSWERED QUESTION */

.assessment-question.answered {
    opacity: .78;
}


.assessment-question.answered
.assessment-text-input {
    background: #f5f7fa;
}


.assessment-question.answered
.assessment-option.selected {
    opacity: 1;
}


/* ANALYZING */

.analyzing-state {
    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        16px 2px 3px;

    border-top:
        1px solid #edf0f4;
}


.analyzing-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background: #edf3ff;

    color: #153f98;

    font-size: 16px;
}


.analyzing-state span {
    display: block;

    color: #153f98;

    font-size: 6px;

    font-weight: 700;
}


.analyzing-state h3 {
    margin:
        2px 0;

    color: #283c62;

    font-size: 10px;

    font-weight: 700;
}


.analyzing-state p {
    margin: 0;

    color: #858d99;

    font-size: 7px;

    line-height: 1.45;
}
/* QUESTION 1 = INITIAL COMPLAINT */

.first-assessment-question {
    padding-top: 4px;
    border-top: 0;
}

.first-assessment-question.answered {
    opacity: .78;
}

.first-assessment-question.answered
.chat-input-wrap {
    background: #f5f7fa;
}

.symptom-chip.selected {
    border-color: #153f98;
    background: #edf3ff;
    color: #153f98;
    font-weight: 600;
}

.symptom-chip:disabled {
    cursor: default;
}
/* ======================================================
   SOFTER AI TYPOGRAPHY
====================================================== */

.ai-intro h2 {
    font-family:
        'Poppins',
        Arial,
        sans-serif;

    font-size:
        16px;

    font-weight:
        600;

    line-height:
        1.4;

    color:
        #17326d;
}


.ai-intro p {
    font-family:
        'Poppins',
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        400;

    line-height:
        1.6;

    color:
        #7d8592;
}


.ai-label {
    font-family:
        'Poppins',
        Arial,
        sans-serif;

    font-size:
        7px;

    font-weight:
        600;

    letter-spacing:
        0.2px;

    color:
        #153f98;
}


.assessment-question h3 {
    font-family:
        'Poppins',
        Arial,
        sans-serif;

    font-size:
        12px;

    font-weight:
        600;

    line-height:
        1.5;

    color:
        #273b62;
}


.assessment-helper {
    font-family:
        'Poppins',
        Arial,
        sans-serif;

    font-size:
        7.5px;

    font-weight:
        400;

    line-height:
        1.55;

    color:
        #858d99;
}


.assessment-question-number span {
    font-family:
        'Poppins',
        Arial,
        sans-serif;

    font-size:
        6.5px;

    font-weight:
        600;
}


.assessment-option {
    font-family:
        'Poppins',
        Arial,
        sans-serif;

    font-weight:
        500;
}


.assessment-text-input {
    font-family:
        'Poppins',
        Arial,
        sans-serif;

    font-weight:
        400;
}


/* ======================================================
   AI ICON
====================================================== */

.ai-avatar-intelligent {
    background:
        linear-gradient(
            145deg,
            #edf3ff,
            #e1eaff
        );

    color:
        #153f98;

    box-shadow:
        inset 0 0 0 1px
        rgba(21, 63, 152, 0.05);
}


.ai-avatar-intelligent i {
    font-size:
        18px;
}
/* ======================================================
   CARE RECOMMENDATION
====================================================== */

.recommendation-summary-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 16px;
    margin-bottom: 10px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #f5f8ff,
            #eef4ff
        );
}


.recommendation-summary-icon {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: #ffffff;

    color: #153f98;

    font-size: 16px;
}


.recommendation-summary-copy {
    flex: 1;
    min-width: 0;
}


.recommendation-summary-copy > span {
    display: block;

    margin-bottom: 3px;

    color: #153f98;

    font-size: 6.5px;
    font-weight: 600;
}


.recommendation-summary-copy h2 {
    margin-bottom: 4px;

    color: #17326d;

    font-size: 13px;
    font-weight: 600;
}


.recommendation-summary-copy p {
    color: #768091;

    font-size: 7.5px;

    line-height: 1.55;
}


/* INFO NOTE */

.recommendation-note {
    display: flex;
    align-items: flex-start;

    gap: 8px;

    padding: 10px 11px;

    margin-bottom: 18px;

    border: 1px solid #edf0f4;

    border-radius: 10px;

    background: #ffffff;
}


.recommendation-note i {
    margin-top: 2px;

    color: #5472ad;

    font-size: 11px;
}


.recommendation-note p {
    color: #7d8591;

    font-size: 7px;
    line-height: 1.5;
}


/* SECTION */

.recommendation-section-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 12px;
}


.recommendation-section-title h2 {
    margin-top: 2px;

    color: #172e5d;

    font-size: 15px;
    font-weight: 600;
}


.recommendation-count {
    color: #9299a4;

    font-size: 7px;
}


/* DOCTOR CARD */

.doctor-card {
    position: relative;

    padding: 15px;

    margin-bottom: 12px;

    border: 1px solid #e9edf2;

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 4px 12px
        rgba(30, 53, 94, .05);
}


.recommended-doctor-card {
    border-color: #cfdcf7;
}


.doctor-best-badge {
    width: fit-content;

    display: flex;
    align-items: center;

    gap: 4px;

    margin-bottom: 10px;

    padding: 4px 7px;

    border-radius: 10px;

    background: #edf3ff;

    color: #153f98;

    font-size: 6px;
    font-weight: 600;
}


.doctor-best-badge i {
    color: #e8ac34;
}


.doctor-card-top {
    display: flex;
    align-items: flex-start;

    gap: 11px;
}


.doctor-photo {
    width: 54px;
    height: 54px;

    flex: 0 0 54px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #e8effc,
            #f4f6fa
        );

    color: #5472ad;

    font-size: 25px;
}


.doctor-main-info {
    flex: 1;
    min-width: 0;
}


.doctor-main-info h3 {
    margin-bottom: 2px;

    color: #20375f;

    font-size: 10.5px;

    font-weight: 600;
}


.doctor-specialty {
    margin-bottom: 6px;

    color: #66758c;

    font-size: 7px;
}


.doctor-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}


.doctor-meta span {
    display: flex;
    align-items: center;

    gap: 4px;

    color: #89919d;

    font-size: 6px;
}


.doctor-meta i {
    color: #5472ad;
}


/* WHY */

.why-recommended {
    margin-top: 12px;

    padding: 10px 11px;

    border-radius: 10px;

    background: #f7f8fb;
}


.why-recommended span {
    display: block;

    margin-bottom: 3px;

    color: #4f6488;

    font-size: 6.5px;

    font-weight: 600;
}


.why-recommended p {
    color: #7b8492;

    font-size: 7px;

    line-height: 1.5;
}


/* AVAILABILITY */

.doctor-availability {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 7px;

    margin-top: 10px;
}


.doctor-availability > div {
    padding: 8px;

    border: 1px solid #edf0f4;

    border-radius: 9px;
}


.doctor-availability span {
    display: block;

    margin-bottom: 2px;

    color: #969ca5;

    font-size: 6px;
}


.doctor-availability strong {
    display: block;

    color: #334662;

    font-size: 7.5px;

    font-weight: 600;
}


/* SELECT */

.select-doctor-button {
    width: 100%;

    min-height: 39px;

    margin-top: 10px;

    border: 0;

    border-radius: 9px;

    background: #153f98;

    color: #ffffff;

    font-family:
        'Poppins',
        Arial,
        sans-serif;

    font-size: 8px;

    font-weight: 600;

    cursor: pointer;
}


/* ======================================================
   SELECTED DOCTOR BOTTOM SHEET
====================================================== */

.doctor-selected-modal {
    width: 100%;
    max-width: 390px;

    position: fixed;

    inset: 0;

    left: 50%;

    transform:
        translateX(-50%);

    z-index: 1200;
}


.doctor-selected-overlay {
    position: absolute;

    inset: 0;

    background:
        rgba(13, 28, 56, .43);
}


.doctor-selected-sheet {
    width: 100%;

    position: absolute;

    left: 0;
    bottom: 0;

    padding:
        10px 18px 24px;

    border-radius:
        22px 22px 0 0;

    background: #ffffff;

    text-align: center;
}


.selected-check-icon {
    width: 47px;
    height: 47px;

    display: grid;
    place-items: center;

    margin:
        0 auto 10px;

    border-radius: 50%;

    background: #e7f6ed;

    color: #29915e;

    font-size: 16px;
}


.doctor-selected-sheet h2 {
    margin-bottom: 2px;

    color: #213a67;

    font-size: 14px;

    font-weight: 600;
}


.doctor-selected-sheet > p {
    color: #838c99;

    font-size: 7.5px;
}


.selected-doctor-summary {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;

    margin:
        15px 0;
}


.selected-doctor-summary > div {
    padding: 10px;

    border-radius: 10px;

    background: #f6f8fb;

    text-align: left;
}


.selected-doctor-summary span {
    display: block;

    margin-bottom: 3px;

    color: #979da7;

    font-size: 6px;
}


.selected-doctor-summary strong {
    display: block;

    color: #354760;

    font-size: 7.5px;
}
/* ======================================================
   COST ESTIMATOR
====================================================== */

.cost-doctor-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 15px;

    margin-bottom: 12px;

    border: 1px solid #e9edf2;

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 4px 12px
        rgba(30, 53, 94, .05);
}


.cost-doctor-photo {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background: #edf3ff;

    color: #153f98;

    font-size: 21px;
}


.cost-doctor-info {
    flex: 1;
    min-width: 0;
}


.cost-doctor-info > span {
    display: block;

    margin-bottom: 2px;

    color: #8c949f;

    font-size: 6px;
}


.cost-doctor-info h2 {
    margin-bottom: 2px;

    color: #213963;

    font-size: 11px;

    font-weight: 600;
}


.cost-doctor-info > p {
    margin-bottom: 6px;

    color: #778191;

    font-size: 7px;
}


.cost-doctor-meta {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


.cost-doctor-meta span {
    display: flex;
    align-items: center;

    gap: 4px;

    color: #89919d;

    font-size: 6px;
}


.cost-doctor-meta i {
    color: #5472ad;
}



/* INTRO */

.cost-estimate-intro {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    padding: 15px;

    margin-bottom: 12px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #f5f8ff,
            #edf3ff
        );
}


.cost-estimate-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: #ffffff;

    color: #153f98;

    font-size: 16px;
}


.cost-estimate-intro span {
    display: block;

    margin-bottom: 3px;

    color: #153f98;

    font-size: 6px;

    font-weight: 600;
}


.cost-estimate-intro h2 {
    margin-bottom: 4px;

    color: #17326d;

    font-size: 12px;

    font-weight: 600;
}


.cost-estimate-intro p {
    color: #778191;

    font-size: 7px;

    line-height: 1.5;
}



/* BREAKDOWN */

.cost-breakdown-card {
    padding: 15px;

    margin-bottom: 12px;

    border: 1px solid #e9edf2;

    border-radius: 14px;

    background: #ffffff;
}


.cost-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 7px;
}


.cost-section-heading h3 {
    color: #223a64;

    font-size: 11px;

    font-weight: 600;
}


.cost-section-heading span {
    color: #989fa8;

    font-size: 6px;
}


.cost-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 11px 0;

    border-bottom:
        1px solid #edf0f4;
}


.cost-item:last-child {
    border-bottom: 0;
}


.cost-item-left {
    display: flex;
    align-items: center;

    gap: 9px;

    flex: 1;
}


.cost-item-icon {
    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    font-size: 13px;
}


.cost-item-icon.blue {
    background: #edf3ff;
    color: #3565b9;
}


.cost-item-icon.purple {
    background: #f1ecff;
    color: #7656b2;
}


.cost-item-icon.teal {
    background: #e9f7f8;
    color: #328c97;
}


.cost-item-icon.green {
    background: #e9f6ee;
    color: #2f8d5e;
}


.cost-item h4 {
    margin-bottom: 2px;

    color: #344762;

    font-size: 8px;

    font-weight: 600;
}


.cost-item p {
    color: #9299a4;

    font-size: 6px;
}


.cost-item > strong {
    max-width: 115px;

    color: #263d64;

    font-size: 7px;

    font-weight: 600;

    text-align: right;

    line-height: 1.4;
}



/* TOTAL */

.cost-total-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 16px;

    margin-bottom: 10px;

    border-radius: 14px;

    background: #153f98;

    color: #ffffff;
}


.cost-total-card span {
    display: block;

    margin-bottom: 3px;

    font-size: 6.5px;

    opacity: .75;
}


.cost-total-card h2 {
    margin-bottom: 2px;

    font-size: 16px;

    font-weight: 600;
}


.cost-total-card p {
    font-size: 6.5px;

    opacity: .75;
}


.cost-total-icon {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background:
        rgba(255,255,255,.14);

    font-size: 17px;
}



/* DISCLAIMER */

.cost-disclaimer {
    display: flex;
    align-items: flex-start;

    gap: 8px;

    padding: 11px;

    margin-bottom: 14px;

    border: 1px solid #edf0f4;

    border-radius: 10px;

    background: #f8f9fb;
}


.cost-disclaimer i {
    margin-top: 2px;

    color: #5472ad;

    font-size: 10px;
}


.cost-disclaimer p {
    color: #7d8692;

    font-size: 7px;

    line-height: 1.55;
}
/* ======================================================
   APPOINTMENT PAGE
====================================================== */

.appointment-doctor-card {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 15px;
    margin-bottom: 12px;

    border: 1px solid #e8edf4;
    border-radius: 14px;

    background: #ffffff;
}


.appointment-doctor-photo {
    width: 51px;
    height: 51px;

    flex: 0 0 51px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background: #edf3ff;

    color: #174aa5;

    font-size: 21px;
}


.appointment-doctor-info {
    flex: 1;
}


.appointment-doctor-info > span {
    display: block;

    color: #9199a5;

    font-size: 6.5px;
}


.appointment-doctor-info h2 {
    margin: 2px 0;

    color: #213963;

    font-size: 11px;
    font-weight: 600;
}


.appointment-doctor-info > p {
    color: #758093;

    font-size: 7px;
}


.appointment-doctor-location {
    display: flex;
    align-items: center;
    gap: 4px;

    margin-top: 5px;

    color: #8b939f;

    font-size: 6px;
}


.appointment-doctor-location i {
    color: #5472ad;
}



/* FORM */

.appointment-form-card {
    padding: 16px;

    border: 1px solid #e9edf3;
    border-radius: 14px;

    background: #ffffff;
}


.appointment-section-heading {
    margin-bottom: 11px;
}


.appointment-section-heading h2 {
    color: #243b63;

    font-size: 12px;
    font-weight: 600;
}


.appointment-section-heading p {
    margin-top: 2px;

    color: #9299a4;

    font-size: 7px;
}


.appointment-time-heading,
.appointment-type-heading {
    margin-top: 19px;
}


/* DATE */

.appointment-date-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 7px;
}


.appointment-date-option {
    min-height: 70px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 2px;

    border: 1px solid #e0e5ed;
    border-radius: 11px;

    background: #ffffff;

    color: #67748a;

    font-family: 'Poppins', Arial, sans-serif;

    cursor: pointer;
}


.appointment-date-option span {
    font-size: 6px;
}


.appointment-date-option strong {
    color: #263e65;

    font-size: 14px;
    font-weight: 600;
}


.appointment-date-option small {
    font-size: 6px;
}


.appointment-date-option.selected {
    border-color: #174aa5;

    background: #edf3ff;

    color: #174aa5;
}


.appointment-date-option.selected strong {
    color: #174aa5;
}


/* TIME */

.appointment-time-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 7px;
}


.appointment-time-option {
    min-height: 38px;

    border: 1px solid #e0e5ed;
    border-radius: 9px;

    background: #ffffff;

    color: #43516c;

    font-family: 'Poppins', Arial, sans-serif;

    font-size: 7.5px;
    font-weight: 500;

    cursor: pointer;
}


.appointment-time-option.selected {
    border-color: #174aa5;

    background: #edf3ff;

    color: #174aa5;
}


/* TYPE */

.appointment-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 8px;
}


.appointment-type-option {
    min-height: 77px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 10px;

    border: 1px solid #e0e5ed;
    border-radius: 11px;

    background: #ffffff;

    color: #45546d;

    text-align: left;

    font-family: 'Poppins', Arial, sans-serif;

    cursor: pointer;
}


.appointment-type-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background: #f1f4f8;

    color: #60759a;

    font-size: 13px;
}


.appointment-type-option strong {
    display: block;

    margin-bottom: 2px;

    font-size: 7.5px;
    font-weight: 600;
}


.appointment-type-option span {
    display: block;

    color: #9097a2;

    font-size: 6px;

    line-height: 1.4;
}


.appointment-type-option.selected {
    border-color: #174aa5;

    background: #f4f7ff;
}


.appointment-type-option.selected
.appointment-type-icon {
    background: #e4edff;

    color: #174aa5;
}


/* SUMMARY */

.appointment-selection-summary {
    margin: 19px 0 14px;

    padding: 12px;

    border-radius: 11px;

    background: #f7f8fa;
}


.appointment-summary-label {
    display: block;

    margin-bottom: 7px;

    color: #536685;

    font-size: 7px;
    font-weight: 600;
}


.appointment-summary-row {
    display: flex;
    justify-content: space-between;

    gap: 10px;

    padding: 6px 0;

    border-bottom: 1px solid #e9ecf0;
}


.appointment-summary-row:last-child {
    border-bottom: 0;
}


.appointment-summary-row span {
    color: #949ba5;

    font-size: 6.5px;
}


.appointment-summary-row strong {
    color: #374963;

    font-size: 7px;
    font-weight: 600;

    text-align: right;
}



/* ======================================================
   SUCCESS
====================================================== */

.appointment-success-card {
    padding: 24px 18px;

    border: 1px solid #e9edf3;
    border-radius: 15px;

    background: #ffffff;

    text-align: center;
}


.appointment-success-icon {
    width: 56px;
    height: 56px;

    display: grid;
    place-items: center;

    margin: 0 auto 11px;

    border-radius: 50%;

    background: #e8f6ee;

    color: #2c915f;

    font-size: 19px;
}


.appointment-success-label {
    color: #2c915f;

    font-size: 6.5px;
    font-weight: 600;

    letter-spacing: .4px;
}


.appointment-success-card > h2 {
    margin: 5px 0 4px;

    color: #213963;

    font-size: 15px;
    font-weight: 600;
}


.appointment-success-card > p {
    margin: 0 auto 16px;

    max-width: 280px;

    color: #828b98;

    font-size: 7.5px;
    line-height: 1.55;
}


/* CONFIRMED */

.confirmed-appointment-card {
    padding: 12px;

    margin-bottom: 12px;

    border-radius: 11px;

    background: #f7f9fc;

    text-align: left;
}


.confirmed-appointment-top {
    display: flex;
    align-items: center;

    gap: 10px;
}


.confirmed-calendar-icon {
    width: 39px;
    height: 39px;

    display: grid;
    place-items: center;

    flex: 0 0 39px;

    border-radius: 10px;

    background: #eaf1ff;

    color: #174aa5;

    font-size: 15px;
}


.confirmed-appointment-top span {
    color: #939aa5;

    font-size: 6px;
}


.confirmed-appointment-top h3 {
    margin: 2px 0;

    color: #344863;

    font-size: 9px;
    font-weight: 600;
}


.confirmed-appointment-top p {
    color: #66758a;

    font-size: 7px;
}


.confirmed-location {
    display: flex;
    align-items: center;

    gap: 6px;

    padding-top: 9px;
    margin-top: 9px;

    border-top: 1px solid #e8ebef;

    color: #798493;

    font-size: 6.5px;
}


.confirmed-location i {
    color: #5472ad;
}


.appointment-journey-button {
    margin-bottom: 8px;
}


.appointment-reschedule-button {
    width: 100%;
    min-height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    border: 1px solid #174aa5;
    border-radius: 10px;

    background: #ffffff;

    color: #174aa5;

    font-family: 'Poppins', Arial, sans-serif;

    font-size: 8px;
    font-weight: 600;

    cursor: pointer;
}



/* ======================================================
   RESCHEDULE
====================================================== */

.reschedule-modal {
    width: 100%;
    max-width: 390px;

    position: fixed;
    inset: 0;
    left: 50%;

    transform: translateX(-50%);

    z-index: 1300;
}


.reschedule-overlay {
    position: absolute;
    inset: 0;

    background: rgba(13, 28, 56, .43);
}


.reschedule-sheet {
    width: 100%;

    position: absolute;
    left: 0;
    bottom: 0;

    padding: 10px 18px 24px;

    border-radius: 22px 22px 0 0;

    background: #ffffff;
}


.reschedule-header {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin-bottom: 17px;
}


.reschedule-header-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background: #edf3ff;

    color: #174aa5;

    font-size: 15px;
}


.reschedule-header span {
    color: #174aa5;

    font-size: 6px;
    font-weight: 600;
}


.reschedule-header h2 {
    margin: 2px 0;

    color: #2d4262;

    font-size: 12px;
    font-weight: 600;
}


.reschedule-header p {
    color: #89919d;

    font-size: 7px;

    line-height: 1.45;
}


.reschedule-section-title {
    margin-bottom: 7px;
}


.reschedule-section-title span {
    color: #495c78;

    font-size: 7.5px;

    font-weight: 600;
}


.reschedule-date-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 8px;

    margin-bottom: 16px;
}


.reschedule-date-option {
    min-height: 54px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    border: 1px solid #dfe4ec;
    border-radius: 10px;

    background: #ffffff;

    color: #596981;

    font-family: 'Poppins', Arial, sans-serif;

    cursor: pointer;
}


.reschedule-date-option strong {
    color: #344965;

    font-size: 12px;
}


.reschedule-date-option span {
    font-size: 6.5px;
}


.reschedule-date-option.selected {
    border-color: #174aa5;

    background: #edf3ff;

    color: #174aa5;
}


.reschedule-time-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 8px;

    margin-bottom: 16px;
}


.reschedule-time-option {
    min-height: 38px;

    border: 1px solid #dfe4ec;
    border-radius: 9px;

    background: #ffffff;

    color: #52637b;

    font-family: 'Poppins', Arial, sans-serif;

    font-size: 7.5px;

    cursor: pointer;
}


.reschedule-time-option.selected {
    border-color: #174aa5;

    background: #edf3ff;

    color: #174aa5;
}
/* ======================================================
   MY JOURNEY
====================================================== */

.journey-overview-card {
    padding: 16px;
    margin-bottom: 18px;

    border: 1px solid #e8edf4;
    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #f8faff,
            #eef4ff
        );
}


.journey-overview-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}


.journey-overview-top span {
    display: block;

    margin-bottom: 3px;

    color: #174aa5;

    font-size: 6px;
    font-weight: 600;

    letter-spacing: .3px;
}


.journey-overview-top h2 {
    margin-bottom: 2px;

    color: #203a67;

    font-size: 14px;
    font-weight: 600;
}


.journey-overview-top p {
    color: #7b8594;

    font-size: 7px;
}


.journey-overview-icon {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background: #ffffff;

    color: #174aa5;

    font-size: 17px;
}


/* PROGRESS */

.journey-overall-progress {
    margin-top: 15px;
}


.journey-overall-progress-top {
    display: flex;
    justify-content: space-between;

    margin-bottom: 6px;
}


.journey-overall-progress-top span {
    color: #848d99;

    font-size: 6.5px;
}


.journey-overall-progress-top strong {
    color: #174aa5;

    font-size: 7px;

    font-weight: 600;
}


.journey-overall-progress-track {
    width: 100%;
    height: 5px;

    overflow: hidden;

    border-radius: 99px;

    background: #dce4ef;
}


.journey-overall-progress-active {
    height: 100%;

    border-radius: inherit;

    background: #174aa5;
}


/* NEXT APPOINTMENT */

.journey-next-appointment {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-top: 14px;

    padding: 10px;

    border-radius: 10px;

    background: rgba(255,255,255,.75);
}


.journey-next-icon {
    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background: #e9f0ff;

    color: #174aa5;

    font-size: 13px;
}


.journey-next-appointment span {
    display: block;

    color: #939aa5;

    font-size: 6px;
}


.journey-next-appointment strong {
    display: block;

    margin: 1px 0;

    color: #354a68;

    font-size: 8px;

    font-weight: 600;
}


.journey-next-appointment p {
    color: #858e9b;

    font-size: 6px;
}



/* ======================================================
   TIMELINE
====================================================== */

.journey-section-title {
    margin-bottom: 14px;
}


.journey-section-title h2 {
    color: #243b64;

    font-size: 14px;

    font-weight: 600;
}


.journey-section-title p {
    margin-top: 2px;

    color: #8a929e;

    font-size: 7px;
}


.journey-timeline {
    position: relative;
}


.journey-step {
    display: grid;

    grid-template-columns:
        31px 1fr;

    gap: 10px;

    position: relative;
}


.journey-step-line {
    position: relative;

    display: flex;
    justify-content: center;
}


.journey-step-line::after {
    content: '';

    width: 2px;

    position: absolute;

    top: 31px;
    bottom: 0;

    background: #e4e8ee;
}


.journey-step.final-step
.journey-step-line::after {
    display: none;
}


.journey-step-dot {
    width: 27px;
    height: 27px;

    position: relative;

    z-index: 2;

    display: grid;
    place-items: center;

    border-radius: 50%;

    border: 2px solid #dfe5ed;

    background: #ffffff;

    color: #9ba3ad;

    font-size: 9px;
}


.journey-step.completed
.journey-step-dot {
    border-color: #35a46c;

    background: #35a46c;

    color: #ffffff;
}


.journey-step.active
.journey-step-dot {
    border-color: #174aa5;

    background: #174aa5;

    color: #ffffff;

    box-shadow:
        0 0 0 5px
        #e9f0ff;
}


.journey-step-content {
    padding: 0 0 21px;
}


.journey-step-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;
}


.journey-status {
    display: inline-block;

    margin-bottom: 4px;

    padding: 3px 6px;

    border-radius: 99px;

    font-size: 5.5px;

    font-weight: 600;
}


.journey-status.completed {
    background: #e7f6ed;

    color: #2f9663;
}


.journey-status.active {
    background: #e9f0ff;

    color: #174aa5;
}


.journey-status.upcoming {
    background: #f1f3f6;

    color: #8d95a0;
}


.journey-step-header h3 {
    color: #2c4264;

    font-size: 11px;

    font-weight: 600;
}


.journey-step-number {
    color: #c0c6ce;

    font-size: 10px;

    font-weight: 600;
}


.journey-step-summary {
    margin-top: 4px;

    color: #858e9a;

    font-size: 7px;

    line-height: 1.5;
}


/* CURRENT HIGHLIGHT */

.journey-highlight-card {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 9px;

    margin-top: 9px;

    border-radius: 9px;

    background: #f5f8ff;

    color: #174aa5;
}


.journey-highlight-card > i {
    font-size: 13px;
}


.journey-highlight-card span {
    display: block;

    color: #8992a0;

    font-size: 6px;
}


.journey-highlight-card strong {
    display: block;

    margin-top: 1px;

    color: #354a68;

    font-size: 7.5px;

    font-weight: 600;
}


/* TOGGLE */

.journey-detail-toggle {
    display: flex;
    align-items: center;

    gap: 5px;

    margin-top: 9px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #174aa5;

    font-family:
        'Poppins',
        Arial,
        sans-serif;

    font-size: 7px;

    font-weight: 600;

    cursor: pointer;
}


.journey-detail-toggle i {
    font-size: 6px;

    transition:
        transform .2s ease;
}


.journey-detail-toggle.open i {
    transform:
        rotate(180deg);
}


/* DETAIL */

.journey-detail-panel {
    margin-top: 9px;

    padding: 11px;

    border-radius: 10px;

    background: #f7f8fa;
}


.journey-detail-item {
    padding: 7px 0;

    border-bottom:
        1px solid #e8ebef;
}


.journey-detail-item:first-child {
    padding-top: 0;
}


.journey-detail-item:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}


.journey-detail-item > span {
    display: block;

    margin-bottom: 3px;

    color: #174aa5;

    font-size: 6px;

    font-weight: 600;
}


.journey-detail-item p,
.journey-detail-item li {
    color: #727d8e;

    font-size: 6.8px;

    line-height: 1.6;
}


.journey-detail-item ul {
    padding-left: 14px;
}



/* ======================================================
   CARE SUMMARY PREVIEW
====================================================== */

.journey-summary-preview {
    display: flex;
    align-items: center;

    gap: 10px;

    position: relative;

    padding: 13px;

    margin-top: 3px;

    border: 1px solid #e8edf3;
    border-radius: 12px;

    background: #f8f9fb;
}


.journey-summary-preview-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #edf1f6;

    color: #728198;
}


.journey-summary-preview > div:nth-child(2) {
    flex: 1;
}


.journey-summary-preview span {
    display: block;

    color: #969da7;

    font-size: 5.8px;
}


.journey-summary-preview h3 {
    margin: 1px 0;

    color: #4d5d75;

    font-size: 9px;

    font-weight: 600;
}


.journey-summary-preview p {
    color: #8d95a0;

    font-size: 6px;

    line-height: 1.4;
}


.journey-summary-lock {
    color: #a4abb4;

    font-size: 10px;
}
/* ======================================================
   MY JOURNEY - HUMAN CARE VISUAL UPDATE
====================================================== */

.journey-overview-card {
    background: #ffffff;

    border: 1px solid #e6eaf0;

    box-shadow:
        0 3px 10px
        rgba(38, 56, 87, .04);
}


.journey-overview-top span {
    color: #718098;

    font-size: 6px;

    letter-spacing: .4px;
}


.journey-overview-top h2 {
    color: #243b63;

    font-size: 14px;

    font-weight: 600;
}


.journey-overview-top p {
    color: #858e9b;
}


.journey-overview-icon {
    background: #f2f5fa;

    color: #466a9f;

    border-radius: 50%;
}


.journey-overall-progress-top span {
    color: #7e8998;
}


.journey-overall-progress-top strong {
    color: #4b6488;
}


.journey-overall-progress-track {
    background: #e8ebef;
}


.journey-overall-progress-active {
    background: #5578a9;
}


.journey-next-appointment {
    background: #f7f8fa;

    border: 1px solid #edf0f3;
}


.journey-next-icon {
    background: #edf1f6;

    color: #5472a0;
}


/* TIMELINE */

.journey-step.completed
.journey-step-dot {
    border-color: #52a57b;

    background: #52a57b;
}


.journey-step.active
.journey-step-dot {
    border-color: #5578a9;

    background: #5578a9;

    box-shadow:
        0 0 0 4px
        #edf2f8;
}


.journey-step-dot {
    color: #8793a3;
}


.journey-step-line::after {
    background: #e7eaee;
}


/* STATUS */

.journey-status.completed {
    background: #edf7f1;

    color: #468963;
}


.journey-status.active {
    background: #eef3f8;

    color: #506e96;
}


.journey-status.upcoming {
    background: #f3f4f6;

    color: #7e8793;
}


.journey-step-header h3 {
    color: #30445f;
}


.journey-step-summary {
    color: #7f8996;
}


/* CURRENT STEP */

.journey-highlight-card {
    background: #f7f8fa;

    color: #536f95;

    border: 1px solid #eceff3;
}


/* DETAIL */

.journey-detail-toggle {
    color: #506f9a;
}


.journey-detail-panel {
    background: #f8f9fa;

    border: 1px solid #edf0f2;
}


.journey-detail-item > span {
    color: #536f95;
}


.journey-detail-item p,
.journey-detail-item li {
    color: #707b89;
}


/* SUMMARY */

.journey-summary-preview {
    background: #fafafa;

    border-color: #e8eaed;
}


.journey-summary-preview-icon {
    background: #f0f2f4;

    color: #7a8796;
}
/* ======================================================
   FEEDBACK
====================================================== */

.feedback-card {
    padding: 24px 18px;

    border: 1px solid #e7ebf0;
    border-radius: 16px;

    background: #ffffff;

    text-align: center;

    box-shadow:
        0 3px 12px
        rgba(31, 51, 83, .04);
}


.feedback-icon {
    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    margin: 0 auto 12px;

    border-radius: 50%;

    background: #eef3f8;

    color: #52709a;

    font-size: 20px;
}


.feedback-label {
    display: block;

    margin-bottom: 4px;

    color: #6680a2;

    font-size: 6px;
    font-weight: 600;

    letter-spacing: .5px;
}


.feedback-card > h2 {
    margin: 0;

    color: #253c61;

    font-size: 16px;
    font-weight: 600;
}


.feedback-description {
    max-width: 280px;

    margin: 5px auto 20px;

    color: #838d9b;

    font-size: 7.5px;

    line-height: 1.55;
}


.feedback-question {
    padding: 20px 12px;

    margin-bottom: 18px;

    border-radius: 13px;

    background: #f8f9fb;
}


.feedback-question h3 {
    max-width: 260px;

    margin: 0 auto 14px;

    color: #344964;

    font-size: 11px;
    font-weight: 600;

    line-height: 1.5;
}


.feedback-stars {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    margin-bottom: 9px;
}


.feedback-star {
    padding: 0;

    border: none;

    background: transparent;

    color: #d9dde4;

    font-size: 27px;

    cursor: pointer;

    transition:
        transform .15s ease,
        color .15s ease;
}


.feedback-star:hover {
    transform: scale(1.08);
}


.feedback-star.selected {
    color: #f3b73f;
}


.feedback-rating-text {
    min-height: 18px;

    color: #89929e;

    font-size: 7px;
    font-weight: 500;
}


.feedback-submit-button.disabled {
    opacity: .45;

    cursor: not-allowed;
}


/* ======================================================
   FEEDBACK SUCCESS
====================================================== */

.feedback-success {
    padding: 26px 18px;

    border: 1px solid #e7ebf0;
    border-radius: 16px;

    background: #ffffff;

    text-align: center;
}


.feedback-success-icon {
    width: 57px;
    height: 57px;

    display: grid;
    place-items: center;

    margin: 0 auto 11px;

    border-radius: 50%;

    background: #e9f6ef;

    color: #3e9667;

    font-size: 20px;
}


.feedback-success > span {
    display: block;

    color: #3e9667;

    font-size: 6px;
    font-weight: 600;

    letter-spacing: .4px;
}


.feedback-success > h2 {
    margin: 4px 0;

    color: #293e5f;

    font-size: 16px;
    font-weight: 600;
}


.feedback-success > p {
    max-width: 270px;

    margin: 0 auto 18px;

    color: #818b98;

    font-size: 7.5px;

    line-height: 1.55;
}


.feedback-reward-preview {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 13px;

    margin-bottom: 15px;

    border-radius: 12px;

    background: #f7f8fa;

    text-align: left;
}


.feedback-reward-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background: #edf1f6;

    color: #55749c;

    font-size: 15px;
}


.feedback-reward-preview > div:last-child {
    flex: 1;
}


.feedback-reward-preview span {
    display: block;

    color: #9098a3;

    font-size: 6px;
}


.feedback-reward-preview strong {
    display: block;

    margin: 2px 0;

    color: #344a68;

    font-size: 8px;
    font-weight: 600;

    line-height: 1.4;
}


.feedback-reward-preview p {
    color: #89929e;

    font-size: 6px;

    line-height: 1.4;
}
/* ======================================================
   HEAL SUMMARY LOCKED - CLEAN UPDATE
====================================================== */

.summary-locked-card {
    padding: 22px 18px;

    border: 1px solid #e7ebf0;
    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 3px 12px
        rgba(28, 47, 78, .04);
}


.summary-locked-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    margin: 0 auto 17px;

    border-radius: 15px;

    background: #edf3ff;

    color: #174aa5;

    font-size: 21px;
}


.summary-locked-label {
    display: block;

    margin-bottom: 5px;

    color: #61799d;

    font-size: 6px;
    font-weight: 600;

    letter-spacing: .45px;
}


.summary-locked-card h2 {
    margin: 0 0 7px;

    color: #243b63;

    font-size: 15px;
    font-weight: 600;

    line-height: 1.35;
}


.summary-locked-description {
    margin: 0 0 10px;

    color: #778291;

    font-size: 8px;
    font-weight: 400;

    line-height: 1.6;
}


.summary-locked-note {
    display: flex;
    align-items: flex-start;

    gap: 6px;

    margin-bottom: 16px;

    color: #53657f;

    font-size: 7.5px;

    line-height: 1.5;
}


.summary-locked-note i {
    margin-top: 2px;

    color: #174aa5;

    font-size: 9px;
}


.summary-feedback-button {
    min-height: 43px;

    font-size: 7.5px;
    font-weight: 600;
}
/* ======================================================
   LUCKY DRAW - CLEAN UPDATE
====================================================== */

.lucky-draw-card {
    padding: 24px 18px;

    border: 1px solid #e7ebf0;
    border-radius: 16px;

    background: #ffffff;

    text-align: center;

    box-shadow:
        0 3px 12px
        rgba(30, 49, 80, .04);
}


.lucky-draw-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    margin: 0 auto 14px;

    border-radius: 16px;

    background: #eef3f9;

    color: #174aa5;

    font-size: 21px;
}


.lucky-draw-label {
    display: block;

    margin-bottom: 5px;

    color: #687d9c;

    font-size: 6px;
    font-weight: 600;

    letter-spacing: .45px;
}


.lucky-draw-card > h2 {
    max-width: 270px;

    margin: 0 auto 7px;

    color: #263d61;

    font-size: 15px;
    font-weight: 600;

    line-height: 1.4;
}


.lucky-draw-description {
    max-width: 270px;

    margin: 0 auto 18px;

    color: #7f8997;

    font-size: 7.5px;
    font-weight: 400;

    line-height: 1.55;
}


.lucky-draw-button {
    min-height: 43px;

    font-size: 7.5px;
    font-weight: 600;
}



/* ======================================================
   REWARD RESULT
====================================================== */

.lucky-reward-result {
    margin-top: 18px;

    padding-top: 18px;

    border-top: 1px solid #edf0f3;
}


.lucky-reward-success-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin: 0 auto 10px;

    border-radius: 50%;

    background: #eaf6ef;

    color: #3d9566;

    font-size: 16px;
}


.lucky-reward-label {
    display: block;

    margin-bottom: 4px;

    color: #3d9566;

    font-size: 6px;
    font-weight: 600;

    letter-spacing: .4px;
}


.lucky-reward-result h3 {
    margin: 0 0 5px;

    color: #2d4262;

    font-size: 13px;
    font-weight: 600;
}


.lucky-reward-result > p {
    max-width: 260px;

    margin: 0 auto 14px;

    color: #7f8996;

    font-size: 7px;

    line-height: 1.5;
}


.lucky-reward-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 8px;

    padding: 11px;

    margin-bottom: 14px;

    border-radius: 11px;

    background: #f7f8fa;
}


.lucky-reward-detail > div {
    text-align: left;
}


.lucky-reward-detail span {
    display: block;

    margin-bottom: 2px;

    color: #9299a3;

    font-size: 6px;
}


.lucky-reward-detail strong {
    color: #3d506c;

    font-size: 7.5px;
    font-weight: 600;
}


.lucky-summary-button {
    min-height: 43px;

    font-size: 7.5px;
    font-weight: 600;
}

/* ======================================================
   PAGE HEADER - FINAL CLEAN VERSION
====================================================== */

.page-header {
    width: 100%;

    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin: 0 0 18px;
    padding: 0;

    background: transparent;
}

.page-back-button {
    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #edf3ff;
    color: #153f98;

    text-decoration: none;
    line-height: 1;
}

.page-back-button i {
    display: block;

    margin: 0;
    padding: 0;

    font-size: 13px;
    line-height: 1;

    transform: translateX(-1px);
}

.page-header-copy {
    flex: 1;
    min-width: 0;

    padding-top: 1px;
}

.page-header-copy h1 {
    margin: 0 0 3px;
    padding: 0;

    color: #153f98;

    font-family: 'Poppins', Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;

    line-height: 1.3;
}

.page-header-copy p {
    margin: 0;
    padding: 0;

    color: #858c99;

    font-family: 'Poppins', Arial, sans-serif;
    font-size: 7px;
    font-weight: 400;

    line-height: 1.45;
}
/* ======================================================
   HEAL SUMMARY - CLEAN VERSION
====================================================== */

.heal-summary-overview-card {
    padding: 16px;

    margin-bottom: 12px;

    border: 1px solid #e7ebf1;

    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 3px 12px
        rgba(27, 48, 82, .04);
}


.heal-summary-overview-top {
    display: flex;
    align-items: flex-start;

    gap: 11px;
}


.heal-summary-overview-icon {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: #eef3fa;

    color: #174a9e;

    font-size: 16px;
}


.heal-summary-overview-copy {
    flex: 1;
}


.heal-summary-overview-copy > span {
    display: block;

    margin-bottom: 3px;

    color: #6e809b;

    font-size: 6px;
    font-weight: 600;

    letter-spacing: .35px;
}


.heal-summary-overview-copy h2 {
    margin: 0 0 4px;

    color: #263d61;

    font-size: 13px;
    font-weight: 600;

    line-height: 1.4;
}


.heal-summary-overview-copy p {
    margin: 0;

    color: #828c99;

    font-size: 7px;

    line-height: 1.5;
}


.heal-summary-status {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 8px;

    margin-top: 14px;
    padding-top: 12px;

    border-top: 1px solid #edf0f4;
}


.heal-summary-status span {
    display: block;

    margin-bottom: 2px;

    color: #9299a4;

    font-size: 6px;
}


.heal-summary-status strong {
    color: #40516c;

    font-size: 7.5px;
    font-weight: 600;
}


.summary-status-good {
    color: #39865e !important;
}



/* ======================================================
   SUMMARY SECTIONS
====================================================== */

.heal-summary-section {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    padding: 14px;

    margin-bottom: 10px;

    border: 1px solid #e8ecf1;

    border-radius: 13px;

    background: #ffffff;
}


.heal-summary-section-icon {
    width: 37px;
    height: 37px;

    flex: 0 0 37px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    font-size: 13px;
}


.heal-summary-section-icon.blue {
    background: #edf3ff;
    color: #3567b7;
}


.heal-summary-section-icon.green {
    background: #eaf6ef;
    color: #3b9162;
}


.heal-summary-section-icon.purple {
    background: #f2edfb;
    color: #7a5daf;
}


.heal-summary-section-icon.teal {
    background: #eaf6f6;
    color: #398b92;
}


.heal-summary-section-content {
    flex: 1;
}


.heal-summary-section-label {
    display: block;

    margin-bottom: 3px;

    color: #7d8ca1;

    font-size: 5.8px;
    font-weight: 600;

    letter-spacing: .35px;
}


.heal-summary-section-content h3 {
    margin: 0 0 4px;

    color: #304560;

    font-size: 10px;
    font-weight: 600;

    line-height: 1.4;
}


.heal-summary-section-content > p {
    margin: 0;

    color: #7b8593;

    font-size: 7px;

    line-height: 1.55;
}



/* CHECKLIST */

.heal-summary-checklist {
    display: flex;
    flex-direction: column;

    gap: 7px;

    margin-top: 8px;
}


.heal-summary-check-item {
    display: flex;
    align-items: flex-start;

    gap: 7px;
}


.heal-summary-check-item i {
    width: 17px;
    height: 17px;

    flex: 0 0 17px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #eaf6ef;

    color: #3d9162;

    font-size: 6px;
}


.heal-summary-check-item span {
    color: #6f7b8b;

    font-size: 6.8px;

    line-height: 1.45;
}



/* ======================================================
   FOLLOW UP
====================================================== */

.heal-summary-followup-card {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 13px;

    margin-bottom: 10px;

    border-radius: 13px;

    background: #f5f8fd;

    border: 1px solid #e7edf5;
}


.heal-summary-followup-icon {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #e8f0fb;

    color: #4d6f9e;

    font-size: 14px;
}


.heal-summary-followup-card > div:nth-child(2) {
    flex: 1;
}


.heal-summary-followup-card span {
    display: block;

    margin-bottom: 2px;

    color: #7889a0;

    font-size: 5.8px;
    font-weight: 600;
}


.heal-summary-followup-card h3 {
    margin: 0;

    color: #354b68;

    font-size: 9px;
    font-weight: 600;
}


.heal-summary-followup-card p {
    margin: 2px 0 0;

    color: #85909c;

    font-size: 6px;

    line-height: 1.4;
}


.heal-summary-followup-link {
    display: flex;
    align-items: center;

    gap: 4px;

    color: #174a9e;

    font-size: 6.5px;
    font-weight: 600;

    text-decoration: none;
}



/* ======================================================
   TAGS
====================================================== */

.heal-summary-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 7px;
}


.heal-summary-tags span {
    padding: 4px 7px;

    border-radius: 20px;

    background: #f2f4f7;

    color: #68778c;

    font-size: 5.8px;
}



/* ======================================================
   QUESTIONS
====================================================== */

.heal-summary-question-card {
    padding: 14px;

    margin-bottom: 18px;

    border: 1px solid #e8ecf1;

    border-radius: 13px;

    background: #ffffff;
}


.heal-summary-question-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 9px;
}


.heal-summary-question-header span {
    display: block;

    margin-bottom: 3px;

    color: #7d8ca1;

    font-size: 5.8px;
    font-weight: 600;
}


.heal-summary-question-header h3 {
    margin: 0;

    color: #304560;

    font-size: 10px;
    font-weight: 600;
}


.heal-summary-question-header > i {
    color: #6c82a1;

    font-size: 14px;
}


.heal-summary-question-list {
    display: flex;
    flex-direction: column;
}


.heal-summary-question-item {
    display: flex;
    align-items: flex-start;

    gap: 8px;

    padding: 8px 0;

    border-bottom: 1px solid #edf0f3;
}


.heal-summary-question-item:last-child {
    border-bottom: 0;
}


.heal-summary-question-item span {
    width: 21px;

    flex: 0 0 21px;

    color: #174a9e;

    font-size: 6px;
    font-weight: 600;
}


.heal-summary-question-item p {
    margin: 0;

    color: #687688;

    font-size: 7px;

    line-height: 1.45;
}
/* ======================================================
   HEAL SUMMARY - HUMAN CARE VERSION
====================================================== */

.care-summary-main-card {
    padding: 17px;

    margin-bottom: 12px;

    border: 1px solid #e8ecf1;
    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 3px 12px
        rgba(29, 49, 81, .04);
}


.care-summary-main-top {
    display: flex;
    align-items: flex-start;

    gap: 12px;
}


.care-summary-main-top > div:first-child {
    flex: 1;
}


.care-summary-small-label {
    display: block;

    margin-bottom: 4px;

    color: #718096;

    font-size: 6.5px;
    font-weight: 500;
}


.care-summary-main-card h2 {
    margin: 0 0 6px;

    color: #263d61;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.4;
}


.care-summary-main-card p {
    margin: 0;

    color: #788392;

    font-size: 7.2px;

    line-height: 1.6;
}


.care-summary-main-icon {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #edf5f1;

    color: #438b68;

    font-size: 15px;
}



/* DOCTOR INFO */

.care-summary-doctor-info {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 8px;

    margin-top: 14px;
    padding-top: 12px;

    border-top: 1px solid #edf0f3;
}


.care-summary-doctor-info span {
    display: block;

    margin-bottom: 2px;

    color: #949ba5;

    font-size: 6px;
}


.care-summary-doctor-info strong {
    color: #42536c;

    font-size: 7.5px;
    font-weight: 600;
}


.care-summary-status {
    color: #3d8b61 !important;
}



/* ======================================================
   ACTION CARD
====================================================== */

.care-summary-action-card {
    padding: 15px;

    margin-bottom: 12px;

    border: 1px solid #e8ecf1;
    border-radius: 14px;

    background: #ffffff;
}


.care-summary-card-heading span {
    display: block;

    margin-bottom: 2px;

    color: #7c8a9e;

    font-size: 6px;
}


.care-summary-card-heading h3 {
    margin: 0;

    color: #30445f;

    font-size: 11px;
    font-weight: 600;
}


.care-summary-action-list {
    display: flex;
    flex-direction: column;

    gap: 12px;

    margin-top: 13px;
}


.care-summary-action-item {
    display: flex;
    align-items: flex-start;

    gap: 9px;
}


.care-summary-check {
    width: 24px;
    height: 24px;

    flex: 0 0 24px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #edf7f1;

    color: #458e68;

    font-size: 7px;
}


.care-summary-action-item strong {
    display: block;

    margin-bottom: 2px;

    color: #42526a;

    font-size: 7.5px;
    font-weight: 600;
}


.care-summary-action-item p {
    margin: 0;

    color: #89919d;

    font-size: 6.5px;

    line-height: 1.5;
}



/* ======================================================
   NEXT CONTROL
====================================================== */

.care-summary-next-card {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 13px;

    margin-bottom: 12px;

    border: 1px solid #e7ecf2;
    border-radius: 13px;

    background: #f7f9fc;
}


.care-summary-next-icon {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #e9eff8;

    color: #597397;

    font-size: 14px;
}


.care-summary-next-copy {
    flex: 1;
}


.care-summary-next-copy span {
    display: block;

    margin-bottom: 2px;

    color: #8591a0;

    font-size: 6px;
}


.care-summary-next-copy h3 {
    margin: 0;

    color: #354a67;

    font-size: 8.5px;
    font-weight: 600;
}


.care-summary-next-copy p {
    margin: 2px 0 0;

    color: #9098a3;

    font-size: 6px;
}


.care-summary-next-button {
    display: flex;
    align-items: center;

    gap: 4px;

    color: #315d9c;

    font-size: 6.5px;
    font-weight: 600;

    text-decoration: none;
}



/* ======================================================
   TOPICS
====================================================== */

.care-summary-topic-card {
    padding: 14px;

    margin-bottom: 12px;

    border: 1px solid #e8ecf1;
    border-radius: 13px;

    background: #ffffff;
}


.care-summary-topic-card h3 {
    margin: 0;

    color: #30445f;

    font-size: 10px;
    font-weight: 600;
}


.care-summary-topic-list {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 9px;
}


.care-summary-topic-list span {
    padding: 5px 8px;

    border-radius: 20px;

    background: #f2f4f7;

    color: #69788b;

    font-size: 5.8px;
}



/* ======================================================
   QUESTIONS
====================================================== */

.care-summary-question-card {
    padding: 14px;

    margin-bottom: 18px;

    border: 1px solid #e8ecf1;
    border-radius: 13px;

    background: #ffffff;
}


.care-summary-question-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 9px;
}


.care-summary-question-heading h3 {
    margin: 0;

    color: #30445f;

    font-size: 10px;
    font-weight: 600;
}


.care-summary-question-icon {
    color: #75859a;

    font-size: 14px;
}


.care-summary-question-list {
    display: flex;
    flex-direction: column;
}


.care-summary-question-row {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    padding: 8px 0;

    border-bottom: 1px solid #edf0f3;
}


.care-summary-question-row:last-child {
    border-bottom: none;
}


.care-summary-question-row span {
    width: 22px;

    flex: 0 0 22px;

    color: #6d7f98;

    font-size: 6px;
    font-weight: 600;
}


.care-summary-question-row p {
    margin: 0;

    color: #68778a;

    font-size: 7px;

    line-height: 1.45;
}
/* ======================================================
   MEDICATION
====================================================== */

.medication-overview-card {
    padding: 16px;
    margin-bottom: 15px;

    border: 1px solid #e8ecf1;
    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 3px 12px
        rgba(31, 50, 82, .04);
}


.medication-overview-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}


.medication-overview-top span {
    display: block;

    margin-bottom: 3px;

    color: #718097;

    font-size: 6px;
    font-weight: 600;

    letter-spacing: .4px;
}


.medication-overview-top h2 {
    margin: 0 0 4px;

    color: #29405f;

    font-size: 13px;
    font-weight: 600;
}


.medication-overview-top p {
    color: #838d99;

    font-size: 7px;
}


.medication-overview-icon {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: #eef3f8;

    color: #4e709c;

    font-size: 16px;
}


.medication-progress {
    width: 100%;
    height: 5px;

    margin-top: 13px;

    overflow: hidden;

    border-radius: 99px;

    background: #e8ebef;
}


.medication-progress-active {
    height: 100%;

    border-radius: inherit;

    background: #55a377;
}



/* LIST */

.medication-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 9px;
}


.medication-section-heading h2 {
    color: #2d4260;

    font-size: 12px;
    font-weight: 600;
}


.medication-section-heading span {
    color: #929aa5;

    font-size: 6.5px;
}


.medication-card {
    padding: 13px;

    margin-bottom: 9px;

    border: 1px solid #e8ecf1;
    border-radius: 13px;

    background: #ffffff;
}


.medication-card.completed {
    background: #fbfcfc;
}


.medication-card.active {
    border-color: #d9e4f2;

    background: #ffffff;
}


.medication-card-top {
    display: flex;
    align-items: center;

    gap: 10px;
}


.medication-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    font-size: 14px;
}


.medication-icon.green {
    background: #edf7f1;
    color: #478d68;
}


.medication-icon.blue {
    background: #edf3fa;
    color: #4c70a0;
}


.medication-info {
    flex: 1;
}


.medication-info > span {
    display: block;

    margin-bottom: 2px;

    color: #78907f;

    font-size: 5.8px;
    font-weight: 500;
}


.medication-info h3 {
    margin: 0;

    color: #354b68;

    font-size: 9px;
    font-weight: 600;
}


.medication-info p {
    margin-top: 2px;

    color: #8b949f;

    font-size: 6.5px;
}


.medication-time {
    text-align: right;
}


.medication-time strong {
    display: block;

    color: #465a76;

    font-size: 8px;
    font-weight: 600;
}


.medication-time i {
    margin-top: 4px;

    color: #4b996d;

    font-size: 9px;
}



/* REMINDER */

.medication-reminder {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 9px;

    margin: 11px 0;

    border-radius: 9px;

    background: #f7f8fa;
}


.medication-reminder > i {
    color: #5d7699;

    font-size: 12px;
}


.medication-reminder span {
    display: block;

    color: #9098a3;

    font-size: 5.8px;
}


.medication-reminder strong {
    display: block;

    margin-top: 1px;

    color: #42546e;

    font-size: 7px;
    font-weight: 600;
}


.medication-take-button {
    min-height: 39px;

    font-size: 7px;
}



/* DOCTOR NOTE */

.medication-note-card {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    padding: 12px;

    margin: 13px 0;

    border-radius: 11px;

    background: #f7f8fa;
}


.medication-note-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background: #edf1f6;

    color: #59708f;

    font-size: 12px;
}


.medication-note-card span {
    display: block;

    margin-bottom: 2px;

    color: #596b85;

    font-size: 6.2px;
    font-weight: 600;
}


.medication-note-card p {
    color: #7d8794;

    font-size: 6.5px;

    line-height: 1.5;
}



/* NEXT */

.medication-next-card {
    display: flex;
    align-items: center;

    gap: 9px;

    padding: 13px;

    margin-bottom: 18px;

    border: 1px solid #e7ecf2;
    border-radius: 12px;

    background: #ffffff;

    text-decoration: none;
}


.medication-next-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #edf6f1;

    color: #438c66;

    font-size: 14px;
}


.medication-next-card > div:nth-child(2) {
    flex: 1;
}


.medication-next-card span {
    display: block;

    color: #929aa5;

    font-size: 5.8px;
}


.medication-next-card strong {
    display: block;

    margin: 1px 0;

    color: #394e6a;

    font-size: 8px;
    font-weight: 600;
}


.medication-next-card p {
    color: #87919d;

    font-size: 6px;
}


.medication-next-card > i {
    color: #8290a3;

    font-size: 9px;
}
/* ======================================================
   HEAL SUMMARY - MEDICATION ACCESS
====================================================== */

.care-summary-medication-card {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 13px;

    margin-bottom: 12px;

    border: 1px solid #e7ecf2;
    border-radius: 13px;

    background: #f8fafc;

    text-decoration: none;

    transition:
        transform .2s ease,
        background .2s ease;
}


.care-summary-medication-card:hover {
    background: #f3f7fb;
}


.care-summary-medication-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background: #edf3fa;

    color: #4f70a0;

    font-size: 14px;
}


.care-summary-medication-copy {
    flex: 1;
    min-width: 0;
}


.care-summary-medication-copy span {
    display: block;

    margin-bottom: 2px;

    color: #8a95a3;

    font-size: 6px;
    font-weight: 400;
}


.care-summary-medication-copy strong {
    display: block;

    margin-bottom: 2px;

    color: #344b69;

    font-size: 8.5px;
    font-weight: 600;
}


.care-summary-medication-copy p {
    margin: 0;

    color: #87919d;

    font-size: 6.2px;

    line-height: 1.45;
}


.care-summary-medication-arrow {
    width: 24px;
    height: 24px;

    flex: 0 0 24px;

    display: grid;
    place-items: center;

    color: #7d8ca0;

    font-size: 8px;
}
/* ======================================================
   RECOVERY PROGRESS
====================================================== */

.recovery-overview-card {
    padding: 16px;
    margin-bottom: 12px;

    border: 1px solid #e8ecf1;
    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 3px 12px
        rgba(30, 50, 82, .04);
}


.recovery-overview-top {
    display: flex;
    align-items: flex-start;

    gap: 12px;
}


.recovery-overview-top > div:first-child {
    flex: 1;
}


.recovery-small-label {
    display: block;

    margin-bottom: 4px;

    color: #718096;

    font-size: 6.3px;
    font-weight: 500;
}


.recovery-overview-top h2 {
    margin: 0 0 5px;

    color: #29405f;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.4;
}


.recovery-overview-top p {
    margin: 0;

    color: #808a97;

    font-size: 7px;

    line-height: 1.55;
}


.recovery-overview-icon {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #edf6f1;

    color: #438c67;

    font-size: 15px;
}



/* PROGRESS */

.recovery-progress-wrap {
    margin-top: 14px;
    padding-top: 12px;

    border-top: 1px solid #edf0f3;
}


.recovery-progress-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 7px;
}


.recovery-progress-heading span {
    color: #7d8897;

    font-size: 6.5px;
}


.recovery-progress-heading strong {
    color: #3f8b64;

    font-size: 8px;
    font-weight: 600;
}


.recovery-progress-track {
    width: 100%;
    height: 6px;

    overflow: hidden;

    border-radius: 99px;

    background: #e8ecef;
}


.recovery-progress-active {
    height: 100%;

    border-radius: inherit;

    background: #58a77a;
}



/* ======================================================
   CONDITION
====================================================== */

.recovery-condition-card,
.recovery-milestone-card {
    padding: 15px;

    margin-bottom: 12px;

    border: 1px solid #e8ecf1;
    border-radius: 14px;

    background: #ffffff;
}


.recovery-section-heading span {
    display: block;

    margin-bottom: 2px;

    color: #7e8c9f;

    font-size: 6px;
}


.recovery-section-heading h3 {
    margin: 0;

    color: #30445f;

    font-size: 10.5px;
    font-weight: 600;
}


.recovery-condition-list {
    display: flex;
    flex-direction: column;

    gap: 12px;

    margin-top: 13px;
}


.recovery-condition-item {
    display: flex;
    align-items: flex-start;

    gap: 9px;
}


.recovery-condition-icon {
    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    font-size: 12px;
}


.recovery-condition-icon.green {
    background: #edf7f1;
    color: #478f68;
}


.recovery-condition-icon.blue {
    background: #edf3fa;
    color: #5273a0;
}


.recovery-condition-icon.soft {
    background: #f3f4f7;
    color: #6f7e91;
}


.recovery-condition-item span {
    display: block;

    margin-bottom: 1px;

    color: #929aa5;

    font-size: 5.8px;
}


.recovery-condition-item strong {
    display: block;

    margin-bottom: 2px;

    color: #40536d;

    font-size: 7.5px;
    font-weight: 600;
}


.recovery-condition-item p {
    margin: 0;

    color: #89929e;

    font-size: 6.3px;

    line-height: 1.45;
}



/* ======================================================
   MILESTONE
====================================================== */

.recovery-milestone-list {
    margin-top: 14px;
}


.recovery-milestone-item {
    display: flex;
    align-items: center;

    gap: 9px;
}


.recovery-milestone-dot {
    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    display: grid;
    place-items: center;

    border: 1px solid #dfe4ea;
    border-radius: 50%;

    background: #ffffff;

    color: #9ba3ae;

    font-size: 7px;
}


.recovery-milestone-item.completed
.recovery-milestone-dot {
    border-color: #dcefe3;

    background: #edf7f1;

    color: #478f68;
}


.recovery-milestone-item.active
.recovery-milestone-dot {
    border-color: #dbe6f3;

    background: #edf3fa;

    color: #5273a0;
}


.recovery-milestone-item strong {
    display: block;

    color: #42536b;

    font-size: 7.2px;
    font-weight: 600;
}


.recovery-milestone-item p {
    margin-top: 1px;

    color: #9199a4;

    font-size: 5.8px;
}


.recovery-milestone-line {
    width: 1px;
    height: 16px;

    margin-left: 13.5px;

    background: #e0e4e9;
}


.recovery-milestone-line.completed {
    background: #b9ddc8;
}


.recovery-milestone-line.active {
    background: #c4d5ea;
}



/* ======================================================
   TODAY ACTIVITY
====================================================== */

.recovery-today-card {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    padding: 13px;

    margin-bottom: 12px;

    border-radius: 12px;

    background: #f7f9fb;
}


.recovery-today-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #edf3f7;

    color: #56728f;

    font-size: 13px;
}


.recovery-today-card span {
    display: block;

    margin-bottom: 2px;

    color: #8190a1;

    font-size: 6px;
}


.recovery-today-card h3 {
    margin: 0 0 3px;

    color: #3b506a;

    font-size: 8.5px;
    font-weight: 600;
}


.recovery-today-card p {
    margin: 0;

    color: #838e9b;

    font-size: 6.5px;

    line-height: 1.5;
}



/* ======================================================
   NEXT STEP
====================================================== */

.recovery-next-card {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 13px;

    margin-bottom: 18px;

    border: 1px solid #e7ecf2;
    border-radius: 13px;

    background: #ffffff;

    text-decoration: none;
}


.recovery-next-icon {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #edf3fa;

    color: #50709b;

    font-size: 13px;
}


.recovery-next-copy {
    flex: 1;
}


.recovery-next-copy span {
    display: block;

    color: #929aa5;

    font-size: 5.8px;
}


.recovery-next-copy strong {
    display: block;

    margin: 1px 0;

    color: #394e6a;

    font-size: 8px;
    font-weight: 600;
}


.recovery-next-copy p {
    color: #87919d;

    font-size: 6px;
}


.recovery-next-card > i {
    color: #8290a3;

    font-size: 9px;
}
/* ======================================================
   RETURN TO ACTIVITY
====================================================== */

.activity-readiness-card {
    padding: 16px;
    margin-bottom: 12px;

    border: 1px solid #e8ecf1;
    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 3px 12px
        rgba(30, 50, 82, .04);
}


.activity-readiness-top {
    display: flex;
    align-items: flex-start;

    gap: 12px;
}


.activity-readiness-top > div:first-child {
    flex: 1;
}


.activity-small-label {
    display: block;

    margin-bottom: 4px;

    color: #758397;

    font-size: 6.2px;
    font-weight: 500;
}


.activity-readiness-top h2 {
    margin: 0 0 5px;

    color: #29405f;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.4;
}


.activity-readiness-top p {
    margin: 0;

    color: #808a97;

    font-size: 7px;

    line-height: 1.55;
}


.activity-readiness-icon {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #edf6f1;

    color: #458d68;

    font-size: 15px;
}


.activity-readiness-status {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 8px;

    margin-top: 14px;
    padding-top: 12px;

    border-top: 1px solid #edf0f3;
}


.activity-readiness-status span {
    display: block;

    margin-bottom: 2px;

    color: #929aa5;

    font-size: 6px;
}


.activity-readiness-status strong {
    color: #42536d;

    font-size: 7.5px;
    font-weight: 600;
}


.activity-status-good {
    color: #438b65 !important;
}



/* ======================================================
   ACTIVITY SECTIONS
====================================================== */

.activity-section-card {
    padding: 15px;

    margin-bottom: 12px;

    border: 1px solid #e8ecf1;
    border-radius: 14px;

    background: #ffffff;
}


.activity-section-heading {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 13px;
}


.activity-heading-icon {
    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    font-size: 9px;
}


.activity-heading-icon.safe {
    background: #edf7f1;
    color: #468f68;
}


.activity-heading-icon.gradual {
    background: #eef3f9;
    color: #52729c;
}


.activity-heading-icon.wait {
    background: #f5f2ec;
    color: #9a7a45;
}


.activity-section-heading span {
    display: block;

    margin-bottom: 2px;

    color: #858f9c;

    font-size: 6px;
}


.activity-section-heading h3 {
    margin: 0;

    color: #354a65;

    font-size: 9.5px;
    font-weight: 600;
}


.activity-list {
    display: flex;
    flex-direction: column;

    gap: 11px;
}


.activity-item {
    display: flex;
    align-items: flex-start;

    gap: 9px;
}


.activity-item-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #edf7f1;

    color: #478f68;

    font-size: 11px;
}


.activity-item-icon.gradual {
    background: #eef3f9;
    color: #52739c;
}


.activity-item-icon.wait {
    background: #f5f2ec;
    color: #967747;
}


.activity-item strong {
    display: block;

    margin-bottom: 2px;

    color: #42536c;

    font-size: 7.5px;
    font-weight: 600;
}


.activity-item p {
    margin: 0;

    color: #89929d;

    font-size: 6.3px;

    line-height: 1.45;
}



/* ======================================================
   STOP SIGNAL
====================================================== */

.activity-stop-card {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    padding: 13px;

    margin-bottom: 12px;

    border-radius: 12px;

    background: #faf7f3;
}


.activity-stop-icon {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #f2ebe1;

    color: #9a7445;

    font-size: 12px;
}


.activity-stop-card span {
    display: block;

    margin-bottom: 2px;

    color: #8d806f;

    font-size: 6px;
}


.activity-stop-card h3 {
    margin: 0 0 3px;

    color: #5e554a;

    font-size: 8.5px;
    font-weight: 600;
}


.activity-stop-card p {
    margin: 0;

    color: #8a8177;

    font-size: 6.5px;

    line-height: 1.5;
}



/* ======================================================
   FOLLOW UP
====================================================== */

.activity-followup-card {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 13px;

    margin-bottom: 12px;

    border: 1px solid #e7ecf2;
    border-radius: 12px;

    background: #f7f9fb;
}


.activity-followup-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #eaf0f7;

    color: #587496;

    font-size: 13px;
}


.activity-followup-copy {
    flex: 1;
}


.activity-followup-copy span {
    display: block;

    color: #8b95a2;

    font-size: 5.8px;
}


.activity-followup-copy strong {
    display: block;

    margin: 1px 0;

    color: #40526b;

    font-size: 7.5px;
    font-weight: 600;
}


.activity-followup-copy p {
    margin: 0;

    color: #87919c;

    font-size: 6px;

    line-height: 1.4;
}



/* ======================================================
   NEXT
====================================================== */

.activity-next-card {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 13px;

    margin-bottom: 18px;

    border: 1px solid #e7ecf2;
    border-radius: 13px;

    background: #ffffff;

    text-decoration: none;
}


.activity-next-icon {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #edf3fa;

    color: #52719b;

    font-size: 13px;
}


.activity-next-copy {
    flex: 1;
}


.activity-next-copy span {
    display: block;

    color: #929aa5;

    font-size: 5.8px;
}


.activity-next-copy strong {
    display: block;

    margin: 1px 0;

    color: #394e6a;

    font-size: 8px;
    font-weight: 600;
}


.activity-next-copy p {
    margin: 0;

    color: #87919d;

    font-size: 6px;
}


.activity-next-card > i {
    color: #8290a3;

    font-size: 9px;
}
/* ======================================================
   RETURN TO ACTIVITY - HUMAN VERSION
====================================================== */

.return-activity-intro {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    padding: 17px;

    margin-bottom: 14px;

    border: 1px solid #e8ecf1;
    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 3px 12px
        rgba(30, 50, 82, .04);
}


.return-activity-intro > div:first-child {
    flex: 1;
}


.return-activity-intro span {
    display: block;

    margin-bottom: 4px;

    color: #7e8996;

    font-size: 6.2px;
    font-weight: 500;
}


.return-activity-intro h2 {
    margin: 0 0 6px;

    color: #29405f;

    font-size: 13.5px;
    font-weight: 600;

    line-height: 1.45;
}


.return-activity-intro p {
    margin: 0;

    color: #7f8996;

    font-size: 7px;

    line-height: 1.6;
}


.return-activity-intro-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #edf6f1;

    color: #4b8d69;

    font-size: 15px;
}



/* ======================================================
   SECTIONS
====================================================== */

.return-activity-block {
    padding: 15px;

    margin-bottom: 12px;

    border: 1px solid #e8ecf1;
    border-radius: 14px;

    background: #ffffff;
}


.return-activity-heading {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 14px;
}


.return-heading-icon {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    font-size: 8px;
}


.return-heading-icon.safe {
    background: #edf7f1;
    color: #458f68;
}


.return-heading-icon.gradual {
    background: #edf3f8;
    color: #58749a;
}


.return-heading-icon.wait {
    background: #f5f2ec;
    color: #997a49;
}


.return-activity-heading span {
    display: block;

    margin-bottom: 2px;

    color: #89929e;

    font-size: 6px;
}


.return-activity-heading h3 {
    margin: 0;

    color: #354a65;

    font-size: 9.5px;
    font-weight: 600;

    line-height: 1.4;
}



/* ======================================================
   ACTIVITY LIST
====================================================== */

.return-simple-list {
    display: flex;
    flex-direction: column;
}


.return-simple-item {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    padding: 10px 0;

    border-bottom: 1px solid #edf0f3;
}


.return-simple-item:first-child {
    padding-top: 0;
}


.return-simple-item:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}


.return-simple-item > i {
    width: 25px;

    flex: 0 0 25px;

    margin-top: 1px;

    color: #6d8097;

    font-size: 11px;

    text-align: center;
}


.return-simple-item strong {
    display: block;

    margin-bottom: 2px;

    color: #42536c;

    font-size: 7.5px;
    font-weight: 600;
}


.return-simple-item p {
    margin: 0;

    color: #8b949f;

    font-size: 6.4px;

    line-height: 1.5;
}



/* ======================================================
   BODY NOTE
====================================================== */

.return-body-note {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    padding: 13px;

    margin-bottom: 12px;

    border-radius: 12px;

    background: #faf8f4;
}


.return-body-note-icon {
    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #f2ece2;

    color: #957348;

    font-size: 12px;
}


.return-body-note span {
    display: block;

    margin-bottom: 2px;

    color: #8b8071;

    font-size: 6px;
}


.return-body-note h3 {
    margin: 0 0 3px;

    color: #5a544b;

    font-size: 8.5px;
    font-weight: 600;
}


.return-body-note p {
    margin: 0;

    color: #898177;

    font-size: 6.4px;

    line-height: 1.5;
}



/* ======================================================
   NEXT CHECK
====================================================== */

.return-next-check {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    padding: 13px;

    margin-bottom: 12px;

    border: 1px solid #e7ecf2;
    border-radius: 12px;

    background: #f7f9fb;
}


.return-next-check-icon {
    width: 37px;
    height: 37px;

    flex: 0 0 37px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #eaf0f7;

    color: #587495;

    font-size: 13px;
}


.return-next-check span {
    display: block;

    margin-bottom: 2px;

    color: #8b95a2;

    font-size: 5.8px;
}


.return-next-check strong {
    display: block;

    margin-bottom: 2px;

    color: #40526b;

    font-size: 7.5px;
    font-weight: 600;
}


.return-next-check p {
    margin: 0;

    color: #87919c;

    font-size: 6.2px;

    line-height: 1.45;
}



/* ======================================================
   JOURNEY LINK
====================================================== */

.return-journey-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 13px;

    margin-bottom: 18px;

    border: 1px solid #e7ecf2;
    border-radius: 12px;

    background: #ffffff;

    text-decoration: none;
}


.return-journey-link span {
    display: block;

    margin-bottom: 1px;

    color: #929aa5;

    font-size: 5.8px;
}


.return-journey-link strong {
    color: #3b506b;

    font-size: 8px;
    font-weight: 600;
}


.return-journey-link > i {
    color: #8290a3;

    font-size: 9px;
}
/* ======================================================
   RECOVERY - NUTRITION SUPPORT
====================================================== */

.recovery-nutrition-card {
    padding: 15px;

    margin-bottom: 12px;

    border: 1px solid #e8ecf1;
    border-radius: 14px;

    background: #ffffff;
}


.recovery-nutrition-head {
    display: flex;
    align-items: center;

    gap: 10px;
}


.recovery-nutrition-icon {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #eef6ef;

    color: #4d8c66;

    font-size: 13px;
}


.recovery-nutrition-head h3 {
    margin: 0;

    color: #344a65;

    font-size: 10px;
    font-weight: 600;

    line-height: 1.4;
}


.recovery-nutrition-description {
    margin: 11px 0 0;

    color: #7f8996;

    font-size: 6.6px;

    line-height: 1.55;
}


.recovery-nutrition-list {
    display: flex;
    flex-direction: column;

    gap: 8px;

    margin-top: 12px;
}


.recovery-nutrition-item {
    display: flex;
    align-items: flex-start;

    gap: 8px;
}


.recovery-nutrition-item i {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #eef7f1;

    color: #4a9169;

    font-size: 6px;
}


.recovery-nutrition-item span {
    color: #74808f;

    font-size: 6.5px;

    line-height: 1.5;
}



/* ASSISTANCE */

.recovery-nutrition-assistance {
    margin-top: 13px;
    padding-top: 12px;

    border-top: 1px solid #edf0f3;
}


.recovery-nutrition-assistance span {
    display: block;

    margin-bottom: 2px;

    color: #8b95a1;

    font-size: 5.8px;
}


.recovery-nutrition-assistance strong {
    display: block;

    margin-bottom: 3px;

    color: #354b67;

    font-size: 8px;
    font-weight: 600;
}


.recovery-nutrition-assistance p {
    margin: 0;

    color: #858f9b;

    font-size: 6.3px;

    line-height: 1.5;
}


.recovery-nutrition-button {
    width: 100%;

    min-height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    margin-top: 10px;

    border: 1px solid #dbe5df;
    border-radius: 9px;

    background: #f7faf8;

    color: #49775c;

    font-size: 6.8px;
    font-weight: 600;

    text-decoration: none;
}


.recovery-nutrition-button i {
    font-size: 7px;
}
/* ======================================================
   CARE TEAM
====================================================== */

.careteam-intro-card {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    padding: 16px;

    margin-bottom: 12px;

    border: 1px solid #e7ecf2;
    border-radius: 15px;

    background: #ffffff;
}


.careteam-intro-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: #edf3fa;

    color: #52739f;

    font-size: 15px;
}


.careteam-intro-copy {
    flex: 1;
}


.careteam-intro-copy span {
    display: block;

    margin-bottom: 3px;

    color: #7f8d9f;

    font-size: 6px;
}


.careteam-intro-copy h2 {
    margin: 0 0 5px;

    color: #304660;

    font-size: 12px;
    font-weight: 600;

    line-height: 1.4;
}


.careteam-intro-copy p {
    margin: 0;

    color: #828c99;

    font-size: 6.7px;

    line-height: 1.55;
}


/* FORM CARD */

.careteam-form-card {
    padding: 15px;

    margin-bottom: 12px;

    border: 1px solid #e8ecf1;
    border-radius: 14px;

    background: #ffffff;
}


.careteam-section-heading {
    margin-bottom: 12px;
}


.careteam-section-heading > span {
    display: block;

    margin-bottom: 2px;

    color: #8793a2;

    font-size: 6px;
}


.careteam-section-heading h3 {
    margin: 0;

    color: #344a65;

    font-size: 10px;
    font-weight: 600;

    line-height: 1.4;
}


.careteam-section-heading p {
    margin: 3px 0 0;

    color: #929aa5;

    font-size: 6px;
}


/* PERSON */

.careteam-person-options {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 8px;

    margin-bottom: 12px;
}


.careteam-person-option {
    min-height: 54px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 5px;

    padding: 8px;

    border: 1px solid #e0e5ec;
    border-radius: 11px;

    background: #ffffff;

    color: #687990;

    font-family: inherit;

    font-size: 6.5px;

    cursor: pointer;
}


.careteam-person-option i {
    font-size: 13px;
}


.careteam-person-option.selected {
    border-color: #bccde5;

    background: #f2f6fb;

    color: #315f9e;
}


/* FIELD */

.careteam-field label {
    display: block;

    margin-bottom: 5px;

    color: #67788f;

    font-size: 6.5px;
    font-weight: 500;
}


.careteam-input,
.careteam-textarea {
    width: 100%;

    border: 1px solid #dfe5ec;
    border-radius: 10px;

    background: #fafbfd;

    color: #3f506a;

    font-family: inherit;

    font-size: 7px;

    outline: none;
}


.careteam-input {
    height: 39px;

    padding: 0 11px;
}


.careteam-textarea {
    min-height: 95px;

    padding: 10px 11px;

    resize: vertical;

    line-height: 1.55;
}


/* ASSISTANCE */

.careteam-assistance-list {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


.careteam-assistance-option {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 10px;

    border: 1px solid #e4e8ee;
    border-radius: 11px;

    background: #ffffff;

    text-align: left;

    font-family: inherit;

    cursor: pointer;
}


.careteam-assistance-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background: #f2f5f8;

    color: #617690;

    font-size: 12px;
}


.careteam-assistance-option > div:nth-child(2) {
    flex: 1;
}


.careteam-assistance-option strong {
    display: block;

    margin-bottom: 2px;

    color: #42536c;

    font-size: 7px;
    font-weight: 600;
}


.careteam-assistance-option span {
    display: block;

    color: #9098a3;

    font-size: 6px;

    line-height: 1.4;
}


.careteam-option-check {
    display: none;

    color: #448a65;

    font-size: 9px;
}


.careteam-assistance-option.selected {
    border-color: #c9d9d0;

    background: #f6faf7;
}


.careteam-assistance-option.selected
.careteam-option-check {
    display: block;
}


/* EXTRA */

.careteam-extra-options {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}


.careteam-extra-option {
    display: flex;
    align-items: center;

    gap: 6px;

    min-height: 32px;

    padding: 6px 9px;

    border: 1px solid #dfe5ec;
    border-radius: 18px;

    background: #ffffff;

    color: #63758d;

    font-family: inherit;

    font-size: 6.2px;

    cursor: pointer;
}


.careteam-extra-option i {
    font-size: 9px;
}


.careteam-extra-option.selected {
    border-color: #c9d9d0;

    background: #eff7f2;

    color: #477c5d;
}


/* SUMMARY */

.careteam-summary-card {
    padding: 15px;

    margin-bottom: 12px;

    border: 1px solid #e7ecf2;
    border-radius: 14px;

    background: #f8fafc;
}


.careteam-summary-label {
    display: block;

    margin-bottom: 3px;

    color: #7c8ca1;

    font-size: 6px;
}


.careteam-summary-card h3 {
    margin: 0 0 11px;

    color: #334963;

    font-size: 10px;
    font-weight: 600;
}


.careteam-summary-row {
    display: flex;
    justify-content: space-between;

    gap: 12px;

    padding: 7px 0;

    border-bottom: 1px solid #e7ebef;
}


.careteam-summary-row span {
    color: #8e97a2;

    font-size: 6px;
}


.careteam-summary-row strong {
    max-width: 65%;

    color: #46566d;

    font-size: 6.5px;
    font-weight: 600;

    text-align: right;
}


.careteam-summary-note {
    padding-top: 8px;
}


.careteam-summary-note span {
    display: block;

    margin-bottom: 3px;

    color: #8e97a2;

    font-size: 6px;
}


.careteam-summary-note p {
    margin: 0;

    color: #5d6c80;

    font-size: 6.5px;

    line-height: 1.5;
}


/* SUBMIT */

.careteam-submit-button {
    min-height: 42px;

    margin-bottom: 18px;

    font-size: 7px;
}


/* SUCCESS */

.careteam-success-card {
    padding: 21px 16px;

    margin-bottom: 18px;

    border: 1px solid #e6ece8;
    border-radius: 15px;

    background: #ffffff;

    text-align: center;
}


.careteam-success-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin: 0 auto 10px;

    border-radius: 50%;

    background: #eaf6ef;

    color: #468e67;

    font-size: 15px;
}


.careteam-success-card h2 {
    margin: 0 0 5px;

    color: #334a65;

    font-size: 12px;
    font-weight: 600;
}


.careteam-success-card > p {
    max-width: 280px;

    margin: 0 auto 12px;

    color: #838d99;

    font-size: 6.7px;

    line-height: 1.55;
}


.careteam-success-info {
    display: flex;
    align-items: flex-start;

    gap: 7px;

    padding: 9px;

    margin-bottom: 12px;

    border-radius: 9px;

    background: #f6f8fa;

    color: #6f7d90;

    font-size: 6.3px;

    line-height: 1.45;

    text-align: left;
}
/* ======================================================
   HOME CARE
====================================================== */

.homecare-intro-card {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    padding: 16px;
    margin-bottom: 12px;

    border: 1px solid #e7ecf2;
    border-radius: 15px;

    background: #ffffff;
}


.homecare-intro-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: #edf5f1;
    color: #4d8b68;

    font-size: 15px;
}


.homecare-intro-card > div:last-child {
    flex: 1;
}


.homecare-intro-card span {
    display: block;
    margin-bottom: 3px;

    color: #7f8d9f;
    font-size: 6px;
}


.homecare-intro-card h2 {
    margin: 0 0 5px;

    color: #304660;
    font-size: 12px;
    font-weight: 600;

    line-height: 1.4;
}


.homecare-intro-card p {
    margin: 0;

    color: #828c99;
    font-size: 6.7px;

    line-height: 1.55;
}


/* FORM CARD */

.homecare-form-card {
    padding: 15px;

    margin-bottom: 12px;

    border: 1px solid #e8ecf1;
    border-radius: 14px;

    background: #ffffff;
}


.homecare-section-heading {
    margin-bottom: 12px;
}


.homecare-section-heading > span {
    display: block;

    margin-bottom: 2px;

    color: #8793a2;
    font-size: 6px;
}


.homecare-section-heading h3 {
    margin: 0;

    color: #344a65;
    font-size: 10px;
    font-weight: 600;
}


.homecare-section-heading p {
    margin: 3px 0 0;

    color: #929aa5;
    font-size: 6px;
}


/* SERVICE */

.homecare-service-list {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


.homecare-service-option {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 10px;

    border: 1px solid #e4e8ee;
    border-radius: 11px;

    background: #ffffff;

    text-align: left;

    font-family: inherit;

    cursor: pointer;
}


.homecare-service-icon {
    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #f1f5f4;

    color: #587567;

    font-size: 12px;
}


.homecare-service-option > div:nth-child(2) {
    flex: 1;
}


.homecare-service-option strong {
    display: block;

    margin-bottom: 2px;

    color: #42536c;
    font-size: 7px;
    font-weight: 600;
}


.homecare-service-option span {
    display: block;

    color: #9098a3;
    font-size: 6px;

    line-height: 1.4;
}


.homecare-check {
    display: none;

    color: #468e67;
    font-size: 9px;
}


.homecare-service-option.selected {
    border-color: #c6d9ce;

    background: #f5faf7;
}


.homecare-service-option.selected .homecare-check {
    display: block;
}


/* DATE */

.homecare-date-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 7px;

    margin-bottom: 10px;
}


.homecare-date-option {
    min-height: 62px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: 1px solid #e0e5ec;
    border-radius: 10px;

    background: #ffffff;

    color: #65768c;

    font-family: inherit;

    cursor: pointer;
}


.homecare-date-option span,
.homecare-date-option small {
    font-size: 5.8px;
}


.homecare-date-option strong {
    margin: 2px 0;

    font-size: 11px;
    font-weight: 600;
}


.homecare-date-option.selected {
    border-color: #bfcfe5;

    background: #f0f5fb;
    color: #315f9e;
}


.homecare-time-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 7px;
}


.homecare-time-option {
    min-height: 34px;

    padding: 6px;

    border: 1px solid #e0e5ec;
    border-radius: 9px;

    background: #ffffff;

    color: #69798d;

    font-family: inherit;
    font-size: 6px;

    cursor: pointer;
}


.homecare-time-option.selected {
    border-color: #c4d2e3;

    background: #f1f5fa;

    color: #315d97;
}


/* INPUT */

.homecare-field label {
    display: block;

    margin-bottom: 5px;

    color: #687991;
    font-size: 6.5px;
}


.homecare-textarea {
    width: 100%;

    min-height: 92px;

    padding: 10px 11px;

    border: 1px solid #dfe5ec;
    border-radius: 10px;

    background: #fafbfd;

    color: #3f506a;

    font-family: inherit;
    font-size: 7px;

    line-height: 1.55;

    resize: vertical;
    outline: none;
}


.homecare-textarea.address {
    min-height: 75px;
}


/* SUMMARY */

.homecare-summary-card {
    padding: 15px;

    margin-bottom: 12px;

    border: 1px solid #e7ecf2;
    border-radius: 14px;

    background: #f8fafc;
}


.homecare-summary-card > span {
    display: block;

    margin-bottom: 3px;

    color: #7c8ca1;
    font-size: 6px;
}


.homecare-summary-card h3 {
    margin: 0 0 11px;

    color: #334963;
    font-size: 10px;
    font-weight: 600;
}


.homecare-summary-row {
    display: flex;
    justify-content: space-between;

    gap: 12px;

    padding: 7px 0;

    border-bottom: 1px solid #e7ebef;
}


.homecare-summary-row span {
    color: #8e97a2;
    font-size: 6px;
}


.homecare-summary-row strong {
    max-width: 65%;

    color: #46566d;
    font-size: 6.5px;
    font-weight: 600;

    text-align: right;
}


.homecare-summary-note {
    padding-top: 8px;
}


.homecare-summary-note span {
    display: block;

    margin-bottom: 3px;

    color: #8e97a2;
    font-size: 6px;
}


.homecare-summary-note p {
    margin: 0;

    color: #5d6c80;
    font-size: 6.5px;

    line-height: 1.5;
}


/* BUTTON */

.homecare-submit-button {
    min-height: 42px;

    margin-bottom: 18px;

    font-size: 7px;
}


/* SUCCESS */

.homecare-success-card {
    padding: 21px 16px;

    margin-bottom: 18px;

    border: 1px solid #e6ece8;
    border-radius: 15px;

    background: #ffffff;

    text-align: center;
}


.homecare-success-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin: 0 auto 10px;

    border-radius: 50%;

    background: #eaf6ef;

    color: #468e67;

    font-size: 15px;
}


.homecare-success-card h2 {
    margin: 0 0 5px;

    color: #334a65;

    font-size: 12px;
    font-weight: 600;
}


.homecare-success-card > p {
    max-width: 280px;

    margin: 0 auto 12px;

    color: #838d99;

    font-size: 6.7px;

    line-height: 1.55;
}


.homecare-success-note {
    display: flex;
    align-items: flex-start;

    gap: 7px;

    padding: 9px;

    margin-bottom: 12px;

    border-radius: 9px;

    background: #f6f8fa;

    color: #6f7d90;

    font-size: 6.3px;

    line-height: 1.45;

    text-align: left;
}
/* ======================================================
   HOME CARE - DATE & TIME FINAL FIX
====================================================== */

.homecare-schedule-heading {
    margin-bottom: 12px;
}


.homecare-schedule-heading h3 {
    margin: 0;

    color: #304660;

    font-size: 11px;
    font-weight: 600;

    line-height: 1.4;
}


/* DATE */

.homecare-date-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 8px;

    margin-bottom: 16px;
}


.homecare-date-option {
    min-height: 68px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 2px;

    padding: 8px 4px;

    border: 1px solid #e0e5ec;
    border-radius: 11px;

    background: #ffffff;

    color: #68788d;

    font-family: 'Poppins', Arial, sans-serif;

    cursor: pointer;
}


.homecare-date-option span {
    font-size: 7px;
    font-weight: 500;

    line-height: 1.2;
}


.homecare-date-option strong {
    margin: 2px 0;

    color: #394e6a;

    font-size: 13px;
    font-weight: 600;

    line-height: 1.1;
}


.homecare-date-option small {
    font-size: 6.5px;
    font-weight: 400;

    line-height: 1.2;
}


.homecare-date-option.selected {
    border-color: #9db8dd;

    background: #eef4fc;

    color: #174a9e;
}


.homecare-date-option.selected strong {
    color: #174a9e;
}


/* TIME */

.homecare-time-title {
    margin-bottom: 8px;

    color: #304660;

    font-size: 9px;
    font-weight: 600;
}


.homecare-time-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 8px;
}


.homecare-time-option {
    min-height: 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 7px 5px;

    border: 1px solid #e0e5ec;
    border-radius: 9px;

    background: #ffffff;

    color: #64758b;

    font-family: 'Poppins', Arial, sans-serif;

    font-size: 7.3px;
    font-weight: 500;

    line-height: 1.2;

    cursor: pointer;
}


.homecare-time-option.selected {
    border-color: #a9bfdd;

    background: #eef4fb;

    color: #174a9e;

    font-weight: 600;
}
/* ======================================================
   HEALTH360
====================================================== */

.health360-hero-card {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    padding: 16px;

    margin-bottom: 14px;

    border: 1px solid #e7ecf2;
    border-radius: 15px;

    background: #ffffff;
}


.health360-hero-copy {
    flex: 1;
}


.health360-hero-copy > span {
    display: block;

    margin-bottom: 3px;

    color: #7d8c9f;

    font-size: 6px;
}


.health360-hero-copy h2 {
    margin: 0 0 5px;

    color: #304660;

    font-size: 12px;
    font-weight: 600;

    line-height: 1.45;
}


.health360-hero-copy p {
    margin: 0;

    color: #818c99;

    font-size: 6.7px;

    line-height: 1.55;
}


.health360-hero-icon {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: #f1edf8;

    color: #765aa1;

    font-size: 15px;
}



/* ======================================================
   SECTION
====================================================== */

.health360-profile-section {
    margin-bottom: 15px;
}


.health360-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 9px;
}


.health360-section-heading span {
    display: block;

    margin-bottom: 2px;

    color: #8994a1;

    font-size: 6px;
}


.health360-section-heading h3 {
    margin: 0;

    color: #304660;

    font-size: 11px;
    font-weight: 600;
}


.health360-profile-count {
    padding: 4px 7px;

    border-radius: 20px;

    background: #f2f4f7;

    color: #718096 !important;

    font-size: 6px !important;
}



/* ======================================================
   PROFILE CARD
====================================================== */

.health360-profile-card {
    padding: 13px;

    margin-bottom: 9px;

    border: 1px solid #e7ebf0;
    border-radius: 13px;

    background: #ffffff;
}


.health360-profile-card.main-profile {
    border-color: #dce5f2;

    background: #fbfcfe;
}


.health360-profile-top {
    display: flex;
    align-items: center;

    gap: 10px;
}


.health360-avatar {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #f0f2f6;

    color: #61718a;

    font-size: 12px;
    font-weight: 600;
}


.health360-avatar.self {
    background: #edf3fa;

    color: #315f9e;
}


.health360-profile-info {
    flex: 1;
}


.health360-relation-label {
    display: block;

    margin-bottom: 1px;

    color: #8490a0;

    font-size: 5.8px;
}


.health360-profile-info h3 {
    margin: 0;

    color: #344a65;

    font-size: 9px;
    font-weight: 600;
}


.health360-profile-info p {
    margin: 2px 0 0;

    color: #9199a4;

    font-size: 6px;
}


.health360-active-badge {
    display: flex;
    align-items: center;

    gap: 3px;

    padding: 4px 6px;

    border-radius: 20px;

    background: #edf7f1;

    color: #438c65;

    font-size: 5.5px;
    font-weight: 600;
}


.health360-active-badge i {
    font-size: 5px;
}


.health360-profile-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 8px;

    margin-top: 11px;
    padding-top: 10px;

    border-top: 1px solid #edf0f3;
}


.health360-profile-meta span {
    display: block;

    margin-bottom: 2px;

    color: #939ba5;

    font-size: 5.5px;
}


.health360-profile-meta strong {
    display: block;

    color: #4b5b71;

    font-size: 6.5px;
    font-weight: 600;
}


.health360-view-record {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 11px;
    padding: 8px 0 0;

    border: 0;
    border-top: 1px solid #edf0f3;

    background: transparent;

    color: #315f9e;

    font-family: inherit;

    font-size: 6.5px;
    font-weight: 600;

    cursor: pointer;
}


.health360-view-record i {
    font-size: 7px;
}



/* ======================================================
   ADD PROFILE
====================================================== */

.health360-add-profile {
    width: 100%;

    min-height: 47px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border: 1px dashed #cfd8e4;
    border-radius: 12px;

    background: #fafbfd;

    color: #48698f;

    font-family: inherit;

    font-size: 7px;
    font-weight: 600;

    cursor: pointer;
}


.health360-add-profile > div {
    width: 24px;
    height: 24px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #edf3fa;

    font-size: 8px;
}



/* ======================================================
   FEATURES
====================================================== */

.health360-feature-card {
    padding: 14px;

    margin-bottom: 18px;

    border: 1px solid #e8ecf1;
    border-radius: 14px;

    background: #ffffff;
}


.health360-feature-list {
    display: flex;
    flex-direction: column;
}


.health360-feature-item {
    display: flex;
    align-items: center;

    gap: 9px;

    padding: 9px 0;

    border-bottom: 1px solid #edf0f3;

    text-decoration: none;
}


.health360-feature-item:last-child {
    border-bottom: 0;
}


.health360-feature-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    font-size: 11px;
}


.health360-feature-icon.blue {
    background: #edf3fa;
    color: #52719a;
}


.health360-feature-icon.purple {
    background: #f2edf8;
    color: #765ba0;
}


.health360-feature-icon.green {
    background: #edf7f1;
    color: #478e68;
}


.health360-feature-icon.teal {
    background: #edf6f5;
    color: #478985;
}


.health360-feature-item > div:nth-child(2) {
    flex: 1;
}


.health360-feature-item strong {
    display: block;

    margin-bottom: 2px;

    color: #40536c;

    font-size: 7px;
    font-weight: 600;
}


.health360-feature-item span {
    display: block;

    color: #9098a3;

    font-size: 6px;
}


.health360-feature-item > i {
    color: #8794a5;

    font-size: 8px;
}



/* ======================================================
   RECORD DETAIL
====================================================== */

.health360-record-detail {
    position: fixed;

    z-index: 700;

    inset: 38px auto 88px 50%;

    width: 100%;
    max-width: 390px;

    transform: translateX(-50%);

    overflow-y: auto;

    padding: 18px 16px 25px;

    background: #ffffff;
}


.health360-record-header {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 15px;
}


.health360-record-header button {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 50%;

    background: #edf3fa;

    color: #315f9e;

    font-size: 10px;

    cursor: pointer;
}


.health360-record-header span {
    display: block;

    color: #8b96a5;

    font-size: 6px;
}


.health360-record-header h2 {
    margin: 1px 0 0;

    color: #304660;

    font-size: 13px;
    font-weight: 600;
}


.health360-record-profile {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 8px;

    padding: 12px;

    margin-bottom: 12px;

    border-radius: 11px;

    background: #f7f9fb;
}


.health360-record-profile span {
    display: block;

    margin-bottom: 2px;

    color: #9099a5;

    font-size: 5.8px;
}


.health360-record-profile strong {
    color: #475972;

    font-size: 6.8px;
    font-weight: 600;
}


.health360-record-active {
    color: #438b65 !important;
}


.health360-record-menu {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


.health360-record-menu-item {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    padding: 11px;

    border: 1px solid #e7ecf1;
    border-radius: 11px;

    background: #ffffff;
}


.health360-record-menu-item > div {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background: #f1f4f8;

    color: #58718f;

    font-size: 11px;
}


.health360-record-menu-item section {
    flex: 1;
}


.health360-record-menu-item span {
    display: block;

    color: #9199a5;

    font-size: 5.6px;
}


.health360-record-menu-item strong {
    display: block;

    margin: 2px 0;

    color: #42536c;

    font-size: 7px;
    font-weight: 600;
}


.health360-record-menu-item p {
    margin: 0;

    color: #89929e;

    font-size: 6px;

    line-height: 1.45;
}



/* ======================================================
   MODAL
====================================================== */

.health360-modal {
    position: fixed;

    z-index: 800;

    inset: 0;

    display: flex;
    align-items: flex-end;
    justify-content: center;
}


.health360-modal-overlay {
    position: absolute;

    inset: 0;

    background: rgba(23, 35, 56, .32);
}


.health360-modal-sheet {
    width: 100%;
    max-width: 390px;

    position: relative;

    z-index: 2;

    padding: 10px 16px 22px;

    border-radius: 20px 20px 0 0;

    background: #ffffff;
}


.health360-modal-handle {
    width: 42px;
    height: 4px;

    margin: 0 auto 12px;

    border-radius: 99px;

    background: #dfe3e8;
}


.health360-modal-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 14px;
}


.health360-modal-heading span {
    display: block;

    color: #8995a3;

    font-size: 6px;
}


.health360-modal-heading h2 {
    margin: 2px 0 0;

    color: #304660;

    font-size: 12px;
    font-weight: 600;
}


.health360-modal-heading button {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 50%;

    background: #f2f4f7;

    color: #69798d;

    cursor: pointer;
}


.health360-form-field {
    margin-bottom: 12px;
}


.health360-form-field label {
    display: block;

    margin-bottom: 5px;

    color: #66788e;

    font-size: 6.5px;
}


.health360-form-field input {
    width: 100%;
    height: 39px;

    padding: 0 10px;

    border: 1px solid #dfe5ec;
    border-radius: 9px;

    background: #fafbfd;

    color: #3f506a;

    font-family: inherit;
    font-size: 7px;

    outline: none;
}


.health360-relation-options {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}


.health360-relation-option {
    padding: 6px 9px;

    border: 1px solid #dfe4eb;
    border-radius: 18px;

    background: #ffffff;

    color: #64758b;

    font-family: inherit;
    font-size: 6.2px;

    cursor: pointer;
}


.health360-relation-option.selected {
    border-color: #bacbe2;

    background: #eef4fb;

    color: #315f9e;
}


.health360-consent-note {
    display: flex;
    align-items: flex-start;

    gap: 7px;

    padding: 9px;

    margin-bottom: 12px;

    border-radius: 9px;

    background: #f7f8fa;
}


.health360-consent-note i {
    margin-top: 1px;

    color: #58749a;

    font-size: 10px;
}


.health360-consent-note p {
    margin: 0;

    color: #737f90;

    font-size: 6.2px;

    line-height: 1.5;
}
/* ======================================================
   HEALTH360 FAMILY PROFILE FLOW
====================================================== */

.health360-profile-flow {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 390px;

    max-height: calc(100vh - 55px);

    overflow-y: auto;

    padding: 17px 16px 22px;

    border-radius: 20px 20px 0 0;

    background: #ffffff;
}


.health360-profile-flow-header {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 15px;
}


.health360-flow-back {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 50%;

    background: #edf3fa;

    color: #315f9e;

    font-size: 9px;
}


.health360-profile-flow-header span {
    display: block;

    color: #8c96a3;

    font-size: 6px;
}


.health360-profile-flow-header h2 {
    margin: 1px 0 0;

    color: #304660;

    font-size: 12px;
    font-weight: 600;
}



/* PROGRESS */

.health360-flow-progress {
    padding: 10px 11px;

    margin-bottom: 16px;

    border-radius: 10px;

    background: #f7f9fb;
}


.health360-flow-progress-top {
    display: flex;
    justify-content: space-between;

    margin-bottom: 7px;
}


.health360-flow-progress-top span {
    color: #7b899a;

    font-size: 6.2px;
}


.health360-flow-progress-top strong {
    color: #315f9e;

    font-size: 6.5px;
}


.health360-flow-progress-track {
    width: 100%;
    height: 5px;

    overflow: hidden;

    border-radius: 99px;

    background: #e5eaf0;
}


.health360-flow-progress-active {
    height: 100%;

    border-radius: inherit;

    background: #315f9e;

    transition: width .3s ease;
}



/* STEP */

.health360-flow-section-heading {
    margin-bottom: 14px;
}


.health360-flow-section-heading span {
    display: block;

    margin-bottom: 2px;

    color: #8c97a4;

    font-size: 6px;
}


.health360-flow-section-heading h3 {
    margin: 0;

    color: #344a65;

    font-size: 10.5px;
    font-weight: 600;
}



/* SELECT */

.health360-form-field select {
    width: 100%;
    height: 39px;

    padding: 0 10px;

    border: 1px solid #dfe5ec;
    border-radius: 9px;

    background: #fafbfd;

    color: #53647a;

    font-family: inherit;

    font-size: 7px;
}



/* GENDER */

.health360-gender-options {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 8px;
}


.health360-gender-option {
    display: flex;
    align-items: center;

    gap: 7px;

    min-height: 37px;

    padding: 7px 9px;

    border: 1px solid #e0e5ec;
    border-radius: 9px;

    background: #ffffff;

    color: #64758b;

    font-family: inherit;

    font-size: 6.5px;
}


.health360-gender-option span {
    width: 15px;
    height: 15px;

    border: 1px solid #9caaba;
    border-radius: 50%;
}


.health360-gender-option.selected {
    border-color: #b9cce4;

    background: #eef4fb;

    color: #315f9e;
}


.health360-gender-option.selected span {
    border: 4px solid #315f9e;
}



/* UPLOAD */

.health360-upload-field {
    margin-bottom: 14px;
}


.health360-upload-label {
    display: flex;
    justify-content: space-between;

    margin-bottom: 6px;

    color: #677991;

    font-size: 6.5px;
}


.health360-upload-label i {
    color: #8996a7;
}


.health360-photo-upload {
    width: 100%;

    min-height: 100px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 4px;

    border: 1px dashed #cad3df;
    border-radius: 11px;

    background: #fafbfd;

    color: #667991;

    font-family: inherit;
}


.health360-photo-upload > i {
    color: #315f9e;

    font-size: 16px;
}


.health360-photo-upload strong {
    color: #40536c;

    font-size: 7.5px;
}


.health360-photo-upload span {
    color: #9099a5;

    font-size: 6px;
}


.health360-photo-upload.uploaded {
    border-color: #bdd6c7;

    background: #f4faf6;
}


.health360-photo-upload.uploaded > i {
    color: #458d67;
}



/* CONSENT */

.health360-consent-warning {
    display: flex;
    align-items: flex-start;

    gap: 8px;

    padding: 10px;

    margin-bottom: 13px;

    border-radius: 9px;

    background: #fff9e9;
}


.health360-consent-warning i {
    color: #c9952d;

    font-size: 11px;
}


.health360-consent-warning p {
    margin: 0;

    color: #776b50;

    font-size: 6.4px;

    line-height: 1.5;
}


.health360-consent-document {
    display: flex;
    align-items: center;

    gap: 9px;

    padding: 10px;

    margin-bottom: 12px;

    border: 1px solid #e1e6ed;
    border-radius: 10px;
}


.health360-consent-doc-icon {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background: #eef3fa;

    color: #315f9e;
}


.health360-consent-document > div:nth-child(2) {
    flex: 1;
}


.health360-consent-document span {
    display: block;

    color: #9099a4;

    font-size: 5.7px;
}


.health360-consent-document strong {
    display: block;

    margin: 1px 0;

    color: #42536c;

    font-size: 6.8px;
}


.health360-consent-document p {
    margin: 0;

    color: #9199a5;

    font-size: 5.7px;
}


.health360-consent-document button {
    border: 0;

    background: transparent;

    color: #526a8d;

    font-size: 11px;
}


.health360-consent-instruction {
    margin-bottom: 13px;
}


.health360-consent-instruction strong {
    color: #45566d;

    font-size: 7px;
}


.health360-consent-instruction ol {
    margin: 6px 0 0;

    padding-left: 16px;

    color: #7d8794;

    font-size: 6.2px;

    line-height: 1.55;
}


.health360-upload-consent {
    width: 100%;

    min-height: 58px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 2px;

    border: 1px dashed #cbd5e1;
    border-radius: 10px;

    background: #fafbfd;

    color: #315f9e;

    font-family: inherit;
}


.health360-upload-consent i {
    font-size: 13px;
}


.health360-upload-consent span {
    font-size: 6.8px;
    font-weight: 600;
}


.health360-upload-consent small {
    color: #949ca7;

    font-size: 5.7px;
}


.health360-upload-consent.uploaded {
    border-color: #bdd6c7;

    background: #f4faf6;

    color: #458d67;
}



/* ACTION */

.health360-flow-actions {
    display: grid;
    grid-template-columns: auto 1fr;

    gap: 8px;

    margin-top: 16px;
}


.health360-flow-actions
.full-primary-button {
    min-height: 40px;

    font-size: 7px;
}


.health360-secondary-button {
    min-height: 40px;

    padding: 0 13px;

    border: 1px solid #dce3eb;
    border-radius: 9px;

    background: #ffffff;

    color: #63758c;

    font-family: inherit;

    font-size: 6.5px;
}



/* SUCCESS */

.health360-profile-success {
    padding: 22px 17px;

    text-align: center;
}


.health360-profile-success-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin: 0 auto 10px;

    border-radius: 50%;

    background: #eaf6ef;

    color: #468e67;

    font-size: 15px;
}


.health360-profile-success > span {
    color: #82909f;

    font-size: 6px;
}


.health360-profile-success h2 {
    margin: 3px 0 5px;

    color: #344a65;

    font-size: 12px;
    font-weight: 600;
}


.health360-profile-success p {
    max-width: 270px;

    margin: 0 auto 14px;

    color: #828d99;

    font-size: 6.6px;

    line-height: 1.5;
}
/* ======================================================
   HEALTH360 - SELECT / DROPDOWN FIX
====================================================== */

.health360-form-field select {
    width: 100%;
    height: 42px;

    padding: 0 38px 0 12px;

    border: 1px solid #dfe5ec;
    border-radius: 10px;

    background-color: #fafbfd;

    color: #475972;

    font-family: 'Poppins', Arial, sans-serif;
    font-size: 7px;
    font-weight: 500;

    line-height: 1;

    outline: none;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    cursor: pointer;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #60748f 50%
        ),
        linear-gradient(
            135deg,
            #60748f 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 15px) 17px,
        calc(100% - 11px) 17px;

    background-size:
        4px 4px,
        4px 4px;

    background-repeat: no-repeat;
}


.health360-form-field select:focus {
    border-color: #9fb8dc;

    background-color: #ffffff;

    box-shadow:
        0 0 0 2px
        rgba(49, 95, 158, .06);
}


.health360-form-field select option {
    color: #40536c;

    background: #ffffff;

    font-family: 'Poppins', Arial, sans-serif;
    font-size: 12px;
}


/* SAMAKAN INPUT & SELECT */

.health360-form-field input,
.health360-form-field select {
    box-sizing: border-box;

    min-height: 42px;
}


/* LABEL */

.health360-form-field label {
    display: block;

    margin-bottom: 6px;

    color: #687991;

    font-size: 6.5px;
    font-weight: 400;
}
/* ======================================================
   HEAL SCAN
====================================================== */

.healscan-intro-card {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    padding: 16px;
    margin-bottom: 12px;

    border: 1px solid #e7ecf2;
    border-radius: 15px;

    background: #ffffff;
}


.healscan-intro-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: #edf3fa;

    color: #52719b;

    font-size: 14px;
}


.healscan-intro-card > div:last-child {
    flex: 1;
}


.healscan-intro-card span {
    display: block;
    margin-bottom: 3px;

    color: #8390a0;

    font-size: 6px;
}


.healscan-intro-card h2 {
    margin: 0 0 5px;

    color: #304660;

    font-size: 12px;
    font-weight: 600;

    line-height: 1.4;
}


.healscan-intro-card p {
    margin: 0;

    color: #818c99;

    font-size: 6.6px;

    line-height: 1.55;
}


/* FORM */

.healscan-form-card {
    padding: 15px;

    margin-bottom: 18px;

    border: 1px solid #e7ecf2;
    border-radius: 14px;

    background: #ffffff;
}


.healscan-section-heading {
    margin-bottom: 11px;
}


.healscan-section-heading > span {
    display: block;

    margin-bottom: 2px;

    color: #8894a2;

    font-size: 6px;
}


.healscan-section-heading h3 {
    margin: 0;

    color: #344a65;

    font-size: 10px;
    font-weight: 600;

    line-height: 1.4;
}


.healscan-section-heading p {
    margin: 3px 0 0;

    color: #929aa5;

    font-size: 6px;

    line-height: 1.45;
}


/* PHOTO */

.healscan-photo-box {
    width: 100%;
    min-height: 125px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 4px;

    padding: 15px;

    border: 1px dashed #cbd5e1;
    border-radius: 12px;

    background: #fafbfd;

    color: #687990;

    font-family: inherit;

    cursor: pointer;
}


.healscan-photo-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    margin-bottom: 3px;

    border-radius: 50%;

    background: #edf3fa;

    color: #315f9e;

    font-size: 13px;
}


.healscan-photo-box strong {
    color: #42536c;

    font-size: 7.5px;
    font-weight: 600;
}


.healscan-photo-box > span {
    color: #929aa5;

    font-size: 6px;
}


.healscan-photo-box.uploaded {
    border-color: #bed6c7;

    background: #f4faf6;
}


.healscan-photo-box.uploaded
.healscan-photo-icon {
    background: #e9f5ee;

    color: #478e68;
}


/* DESCRIPTION */

.healscan-description-block {
    margin-top: 15px;
}


.healscan-textarea {
    width: 100%;
    min-height: 100px;

    padding: 11px;

    border: 1px solid #dfe5ec;
    border-radius: 10px;

    background: #fafbfd;

    color: #42536b;

    font-family: inherit;

    font-size: 7px;

    line-height: 1.55;

    outline: none;

    resize: vertical;
}


.healscan-submit-button {
    min-height: 42px;

    margin-top: 12px;

    font-size: 7px;
}


/* ANALYZING */

.healscan-analyzing {
    padding: 28px 17px;

    border: 1px solid #e7ecf2;
    border-radius: 15px;

    background: #ffffff;

    text-align: center;
}


.healscan-loading-icon {
    width: 45px;
    height: 45px;

    display: grid;
    place-items: center;

    margin: 0 auto 10px;

    border-radius: 50%;

    background: #edf3fa;

    color: #315f9e;

    font-size: 15px;
}


.healscan-analyzing h2 {
    margin: 0 0 5px;

    color: #344a65;

    font-size: 11px;
    font-weight: 600;
}


.healscan-analyzing p {
    max-width: 260px;

    margin: 0 auto;

    color: #838e9a;

    font-size: 6.5px;

    line-height: 1.5;
}


/* RESULT */

.healscan-result-card,
.healscan-findings-card,
.healscan-next-card {
    padding: 15px;

    margin-bottom: 12px;

    border: 1px solid #e7ecf2;
    border-radius: 14px;

    background: #ffffff;
}


.healscan-result-top {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    margin-bottom: 7px;
}


.healscan-result-top > div:first-child {
    flex: 1;
}


.healscan-result-label {
    display: block;

    margin-bottom: 3px;

    color: #8491a0;

    font-size: 6px;
}


.healscan-result-card h2 {
    margin: 0;

    color: #2f4560;

    font-size: 13px;
    font-weight: 600;
}


.healscan-result-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #edf3fa;

    color: #5273a0;

    font-size: 14px;
}


.healscan-result-card > p {
    margin: 0;

    color: #7d8896;

    font-size: 6.7px;

    line-height: 1.6;
}


/* FINDINGS */

.healscan-findings-list {
    display: flex;
    flex-direction: column;

    gap: 9px;
}


.healscan-finding-item {
    display: flex;
    align-items: center;

    gap: 8px;
}


.healscan-finding-item > div {
    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #edf7f1;

    color: #478f68;

    font-size: 6px;
}


.healscan-finding-item span {
    color: #647388;

    font-size: 6.5px;
}


/* WARNING */

.healscan-warning-card,
.healscan-urgent-card {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    padding: 12px;

    margin-bottom: 12px;

    border-radius: 11px;
}


.healscan-warning-card {
    background: #f7f9fb;
}


.healscan-warning-icon,
.healscan-urgent-icon {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    font-size: 10px;
}


.healscan-warning-icon {
    background: #eaf0f7;

    color: #587495;
}


.healscan-warning-card span {
    display: block;

    color: #7c8998;

    font-size: 5.8px;
}


.healscan-warning-card h3 {
    margin: 2px 0 3px;

    color: #44566e;

    font-size: 8px;
    font-weight: 600;
}


.healscan-warning-card p {
    margin: 0;

    color: #7e8995;

    font-size: 6.2px;

    line-height: 1.5;
}


/* URGENT */

.healscan-urgent-card {
    background: #faf6f2;
}


.healscan-urgent-icon {
    background: #f3e9df;

    color: #a27748;
}


.healscan-urgent-card span {
    display: block;

    margin-bottom: 2px;

    color: #8a7865;

    font-size: 5.8px;
}


.healscan-urgent-card p {
    margin: 0;

    color: #83776a;

    font-size: 6.2px;

    line-height: 1.5;
}


/* NEXT */

.healscan-next-copy {
    margin-bottom: 12px;
}


.healscan-next-copy span {
    display: block;

    margin-bottom: 2px;

    color: #8994a1;

    font-size: 6px;
}


.healscan-next-copy h3 {
    margin: 0 0 4px;

    color: #344a65;

    font-size: 10px;
    font-weight: 600;
}


.healscan-next-copy p {
    margin: 0;

    color: #838d99;

    font-size: 6.4px;

    line-height: 1.5;
}


.healscan-next-card
.full-primary-button {
    min-height: 41px;

    font-size: 7px;
}


/* RESTART */

.healscan-restart-button {
    width: 100%;

    min-height: 39px;

    margin-bottom: 18px;

    border: 1px solid #dfe5ec;
    border-radius: 9px;

    background: #ffffff;

    color: #64758b;

    font-family: inherit;

    font-size: 6.7px;

    cursor: pointer;
}


.healscan-restart-button i {
    margin-right: 5px;
}
/* ======================================================
   HEALTH360 HERO ICON POSITION FIX
====================================================== */

.health360-hero-icon {
    margin-top: 8px !important;
}
.health360-hero-icon {
    margin-top: 10px !important;
}
/* ======================================================
   COMMUNITY
====================================================== */

.community-welcome-card {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    padding: 16px;
    margin-bottom: 16px;

    border: 1px solid #e7ecf2;
    border-radius: 15px;

    background: #ffffff;
}


.community-welcome-copy {
    flex: 1;
}


.community-welcome-copy > span {
    display: block;
    margin-bottom: 3px;

    color: #8793a2;
    font-size: 6px;
}


.community-welcome-copy h2 {
    margin: 0 0 5px;

    color: #304660;

    font-size: 12px;
    font-weight: 600;

    line-height: 1.4;
}


.community-welcome-copy p {
    margin: 0;

    color: #818c99;

    font-size: 6.6px;
    line-height: 1.55;
}


.community-welcome-icon {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    display: grid;
    place-items: center;

    margin-top: 7px;

    border-radius: 13px;

    background: #f2eef8;

    color: #765da1;

    font-size: 14px;
}


/* ======================================================
   SECTION
====================================================== */

.community-section {
    margin-bottom: 18px;
}


.community-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    margin-bottom: 9px;
}


.community-section-heading span {
    display: block;

    margin-bottom: 2px;

    color: #8a95a2;

    font-size: 6px;
}


.community-section-heading h3 {
    margin: 0;

    color: #304660;

    font-size: 11px;
    font-weight: 600;
}


/* ======================================================
   FEATURED COMMUNITY
====================================================== */

.community-featured-card {
    padding: 14px;

    border: 1px solid #e1e8f1;
    border-radius: 14px;

    background: #ffffff;
}


.community-featured-top {
    display: flex;
    align-items: flex-start;

    gap: 10px;
}


.community-featured-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    font-size: 14px;
}


.community-featured-icon.respiratory {
    background: #edf3fa;

    color: #4f72a0;
}


.community-featured-copy {
    flex: 1;
}


.community-featured-copy > span {
    display: block;

    margin-bottom: 2px;

    color: #8090a4;

    font-size: 5.8px;
}


.community-featured-copy h3 {
    margin: 0 0 4px;

    color: #344a65;

    font-size: 10px;
    font-weight: 600;
}


.community-featured-copy p {
    margin: 0;

    color: #838d99;

    font-size: 6.3px;

    line-height: 1.5;
}


.community-featured-meta {
    display: flex;
    gap: 15px;

    padding-top: 10px;
    margin-top: 10px;

    border-top: 1px solid #edf0f3;
}


.community-featured-meta > div {
    display: flex;
    align-items: center;

    gap: 4px;

    color: #7d8998;

    font-size: 5.8px;
}


.community-featured-meta i {
    color: #607995;

    font-size: 7px;
}


.community-join-button {
    width: 100%;
    min-height: 38px;

    margin-top: 11px;

    border: 0;
    border-radius: 9px;

    background: #174a9e;

    color: #ffffff;

    font-family: inherit;

    font-size: 6.8px;
    font-weight: 600;

    cursor: pointer;
}


.community-join-button.joined {
    border: 1px solid #c4d9cd;

    background: #f1f8f4;

    color: #468b66;
}


/* ======================================================
   COMMUNITY LIST
====================================================== */

.community-list {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


.community-card {
    display: flex;
    align-items: center;

    gap: 9px;

    padding: 11px;

    border: 1px solid #e7ebf0;
    border-radius: 12px;

    background: #ffffff;
}


.community-card-icon {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    font-size: 11px;
}


.community-card-icon.recovery {
    background: #edf6f1;
    color: #4f8e6a;
}


.community-card-icon.aging {
    background: #faf1ef;
    color: #a36e65;
}


.community-card-icon.family {
    background: #f1eef7;
    color: #765c99;
}


.community-card-copy {
    flex: 1;
}


.community-card-copy h3 {
    margin: 0 0 3px;

    color: #40536c;

    font-size: 7.5px;
    font-weight: 600;
}


.community-card-copy > p {
    margin: 0;

    color: #8a939e;

    font-size: 5.8px;

    line-height: 1.4;
}


.community-card-members {
    display: flex;
    align-items: center;

    gap: 4px;

    margin-top: 4px;

    color: #8490a0;

    font-size: 5.5px;
}


.community-card-members i {
    font-size: 6px;
}


.community-small-join {
    min-width: 51px;
    min-height: 29px;

    padding: 0 8px;

    border: 1px solid #d9e1eb;
    border-radius: 8px;

    background: #ffffff;

    color: #426692;

    font-family: inherit;

    font-size: 6px;
    font-weight: 600;

    cursor: pointer;
}


.community-small-join.joined {
    border-color: #c5d9cd;

    background: #f1f8f4;

    color: #478c67;
}


/* ======================================================
   STORIES
====================================================== */

.community-story-card {
    padding: 13px;

    margin-bottom: 8px;

    border: 1px solid #e7ebf0;
    border-radius: 13px;

    background: #ffffff;
}


.community-story-user {
    display: flex;
    align-items: center;

    gap: 8px;
}


.community-story-avatar {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #edf3fa;

    color: #456998;

    font-size: 8px;
    font-weight: 600;
}


.community-story-user strong {
    display: block;

    color: #42536b;

    font-size: 7px;
    font-weight: 600;
}


.community-story-user span {
    display: block;

    color: #9099a5;

    font-size: 5.5px;
}


.community-story-text {
    margin: 10px 0;

    color: #647388;

    font-size: 6.5px;

    line-height: 1.65;
}


.community-story-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-top: 8px;

    border-top: 1px solid #edf0f3;

    color: #949da7;

    font-size: 5.5px;
}


.community-like-button {
    display: flex;
    align-items: center;

    gap: 4px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #748398;

    font-family: inherit;

    font-size: 6px;

    cursor: pointer;
}


.community-like-button.liked {
    color: #a95f6e;
}


/* ======================================================
   EDUCATION
====================================================== */

.community-education-card {
    display: flex;
    align-items: center;

    gap: 9px;

    padding: 11px;

    margin-bottom: 8px;

    border: 1px solid #e7ebf0;
    border-radius: 12px;

    background: #ffffff;
}


.community-education-icon {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #edf3fa;

    color: #52719a;

    font-size: 11px;
}


.community-education-icon.green {
    background: #edf6f1;

    color: #4b8b68;
}


.community-education-card > div:nth-child(2) {
    flex: 1;
}


.community-education-card span {
    display: block;

    color: #8995a3;

    font-size: 5.4px;
}


.community-education-card h3 {
    margin: 2px 0;

    color: #41536c;

    font-size: 7px;
    font-weight: 600;
}


.community-education-card p {
    margin: 0;

    color: #8b94a0;

    font-size: 5.6px;

    line-height: 1.4;
}


.community-education-card > i {
    color: #8492a3;

    font-size: 7px;
}


/* ======================================================
   EVENT
====================================================== */

.community-event-card {
    padding: 14px;

    margin-bottom: 12px;

    border: 1px solid #e3e9f0;
    border-radius: 14px;

    background: #ffffff;
}


.community-event-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 10px;
}


.community-event-top > div:first-child > span {
    display: block;

    margin-bottom: 2px;

    color: #7f8da0;

    font-size: 5.8px;
}


.community-event-top h3 {
    margin: 0;

    color: #344a65;

    font-size: 10px;
    font-weight: 600;
}


.community-event-date {
    width: 42px;
    height: 42px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #edf3fa;

    color: #315f9e;
}


.community-event-date strong {
    font-size: 11px;
    line-height: 1;
}


.community-event-date span {
    margin-top: 2px;

    font-size: 5.5px;
    font-weight: 600;
}


.community-event-card > p {
    margin: 9px 0;

    color: #7f8996;

    font-size: 6.2px;

    line-height: 1.5;
}


.community-event-detail {
    display: flex;

    gap: 14px;

    margin-bottom: 10px;

    color: #77869a;

    font-size: 5.8px;
}


.community-event-detail span {
    display: flex;
    align-items: center;

    gap: 4px;
}


.community-event-button {
    width: 100%;
    min-height: 37px;

    border: 1px solid #cbd8e8;
    border-radius: 9px;

    background: #f6f9fd;

    color: #315f9e;

    font-family: inherit;

    font-size: 6.6px;
    font-weight: 600;

    cursor: pointer;
}


.community-event-button.registered {
    border-color: #c6d9ce;

    background: #f1f8f4;

    color: #478c67;
}


/* ======================================================
   NOTICE
====================================================== */

.community-notice {
    display: flex;
    align-items: flex-start;

    gap: 7px;

    padding: 10px;

    margin-bottom: 20px;

    border-radius: 10px;

    background: #f7f8fa;

    color: #768394;
}


.community-notice i {
    margin-top: 1px;

    color: #5f7592;

    font-size: 9px;
}


.community-notice p {
    margin: 0;

    font-size: 5.8px;

    line-height: 1.5;
}

/* ======================================================
   FINAL ANDROID STATUS BAR + STICKY HOME HEADER
====================================================== */

/* make sure any old iPhone status classes never render */
.ios-status-bar,
.ios-time,
.ios-status-right,
.ios-battery,
.ios-battery-cap,
.ios-battery-text {
    display: none !important;
}

/* ANDROID STATUS BAR */
.android-status-bar {
    width: 100% !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 18px 7px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
}

.android-time {
    display: block !important;
    color: #111111 !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

.android-status-icons {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #111111 !important;
}

.android-status-icons > i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #111111 !important;
    line-height: 1 !important;
}

.android-status-icons .fa-signal {
    font-size: 10px !important;
}

.android-status-icons .fa-wifi {
    font-size: 10px !important;
}

.android-battery {
    min-width: 27px !important;
    height: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 5px !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
    background: #111111 !important;
    color: #ffffff !important;
    font-family: Arial, sans-serif !important;
    font-size: 7px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.android-battery span {
    display: block !important;
    line-height: 1 !important;
}

/* HOME HEADER STICKY BELOW STATUS BAR */
.home-sticky-header {
    width: 100% !important;
    position: sticky !important;
    top: 42px !important;
    z-index: 1100 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #eef1f4 !important;
    box-shadow: 0 3px 8px rgba(31, 54, 88, .04) !important;
}

.existing-home-top {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 18px 13px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
}

.existing-greeting {
    flex: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.existing-greeting h1 {
    margin: 0 !important;
    color: #17376f !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.existing-greeting p {
    margin: 3px 0 0 !important;
    color: #415777 !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
}

.existing-top-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.essentials-pill {
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 10px 4px 5px !important;
    box-sizing: border-box !important;
    border: 1px solid #d9e2f7 !important;
    border-radius: 18px !important;
    background: #eef2ff !important;
    color: #53627b !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    font-size: 7px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
}

.essentials-star {
    width: 25px !important;
    height: 25px !important;
    flex: 0 0 25px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: #dfe8ff !important;
    color: #416bb2 !important;
    font-size: 8px !important;
}

.top-search-btn {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #174a9e !important;
    font-size: 19px !important;
    cursor: pointer !important;
}

/* important: do not create a stacking context that traps fixed modals */
.phone-shell {
    position: relative !important;
    z-index: auto !important;
}

/* ======================================================
   CARE NAVIGATOR MODAL - FIXED INSIDE PHONE FRAME
====================================================== */

#navigatorModal.navigator-modal {
    width: 100% !important;
    max-width: 390px !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 3000 !important;
    overflow: hidden !important;
}

#navigatorModal.hidden {
    display: none !important;
}

#navigatorOverlay.navigator-modal-overlay {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(20, 35, 58, .42) !important;
    z-index: 1 !important;
}

#navigatorModal .navigator-sheet {
    width: 100% !important;
    max-width: none !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
    max-height: calc(100vh - 90px) !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 10px 18px 24px !important;
    box-sizing: border-box !important;
    border-radius: 22px 22px 0 0 !important;
    background: #ffffff !important;
    box-shadow: 0 -8px 28px rgba(28, 45, 72, .14) !important;
    z-index: 2 !important;
}

#navigatorModal .sheet-handle {
    margin: 0 auto 14px !important;
}

#navigatorModal .navigator-profile {
    align-items: flex-start !important;
}

#navigatorModal .navigator-summary {
    margin-top: 14px !important;
}

#connectNavigator {
    width: 100% !important;
    min-height: 42px !important;
    margin: 12px 0 0 !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

#closeNavigator {
    width: 100% !important;
    margin-top: 5px !important;
}

.bottom-nav {
    z-index: 600 !important;
}