/*
=========================================================

   HELCU — PUBLIC DOCTOR PROFILE
   DOCTOR CSS

   FILE
   -------------------------------------------------------
   main/static/css/public_profile/doctor/doctor.css

   MOBILE FIRST

   BASE
   0px → 767.98px

   TABLET
   768px → 1199.98px

   DESKTOP
   1200px+

=========================================================
*/


/*
=========================================================
   ROOT VARIABLES
=========================================================
*/

:root {

    --hc-primary: #0F766E;
    --hc-primary-dark: #115E59;
    --hc-primary-soft: #ECFDF5;

    --hc-text: #0F172A;
    --hc-text-soft: #475569;
    --hc-text-muted: #64748B;

    --hc-border: #E2E8F0;
    --hc-border-soft: #EEF2F7;

    --hc-bg: #F8FAFC;
    --hc-white: #FFFFFF;

    --hc-success: #15803D;
    --hc-success-soft: #F0FDF4;

    --hc-danger: #DC2626;
    --hc-danger-soft: #FEF2F2;

    --hc-warning: #D97706;
    --hc-warning-soft: #FFFBEB;

    --hc-rating: #F59E0B;

    --hc-radius-sm: 8px;
    --hc-radius-md: 12px;
    --hc-radius-lg: 18px;
    --hc-radius-xl: 24px;

    --hc-shadow-sm:
        0 2px 8px rgba(15, 23, 42, 0.05);

    --hc-shadow-md:
        0 10px 30px rgba(15, 23, 42, 0.08);

    --hc-shadow-lg:
        0 18px 50px rgba(15, 23, 42, 0.11);

    --hc-transition:
        180ms ease;

}


/*
=========================================================
   GLOBAL RESET
=========================================================
*/

.hc-public-doctor-page,
.hc-public-doctor-page *,
.hc-public-doctor-page *::before,
.hc-public-doctor-page *::after {

    box-sizing: border-box;

}


.hc-public-doctor-page {

    width: 100%;
    min-height: 100vh;

    margin: 0;
    padding: 0;

    background:
        linear-gradient(
            180deg,
            #F8FAFC 0%,
            #FFFFFF 100%
        );

    color:
        var(--hc-text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}


.hc-public-doctor-page button,
.hc-public-doctor-page input,
.hc-public-doctor-page select,
.hc-public-doctor-page textarea {

    font: inherit;

}


.hc-public-doctor-page button {

    cursor: pointer;

}


.hc-public-doctor-page img {

    max-width: 100%;

    display: block;

}


.hc-public-doctor-page a {

    color: inherit;

    text-decoration: none;

}


/*
=========================================================
   PAGE CONTAINER
=========================================================
*/

.hc-public-doctor-page-container {

    width: 100%;
    max-width: 650px;

    margin: 0 auto;

    padding:
        14px
        11px
        32px;

}


/*
=========================================================
   MAIN DOCTOR PROFILE CARD
=========================================================
*/

.hc-public-doctor-profile {

    position: relative;

    width: 100%;

    padding:
        20px
        15px
        20px;

    background:
        var(--hc-white);

    border:
        1px solid
        var(--hc-border-soft);

    border-radius:
        var(--hc-radius-xl);

    box-shadow:
        var(--hc-shadow-md);

    overflow: hidden;

}


/*
=========================================================
   PREMIUM TOP GLOW
=========================================================
*/

.hc-public-doctor-profile::before {

    content: "";

    position: absolute;

    top: -90px;
    left: 50%;

    width: 220px;
    height: 150px;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(15, 118, 110, 0.10) 0%,
            rgba(15, 118, 110, 0.04) 40%,
            transparent 72%
        );

    pointer-events: none;

}


.hc-public-doctor-profile > * {

    position: relative;

    z-index: 1;

}


/*
=========================================================
   PROFILE HEADER
   DP + CLOSE BUTTON
=========================================================
*/

.hc-public-doctor-profile-header {

    position: relative;

    display: flex;

    align-items: flex-start;

    justify-content: center;

    width: 100%;

    min-height: 112px;

    margin-bottom: 15px;

}


/*
=========================================================
   DOCTOR PHOTO
=========================================================
*/

.hc-public-doctor-photo-wrapper {

    display: flex;

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

    width: 112px;
    height: 112px;

    margin: 0;

    cursor: pointer;

    border-radius: 50%;

    -webkit-tap-highlight-color: transparent;

    transition:
        transform var(--hc-transition),
        opacity var(--hc-transition);

}


.hc-public-doctor-photo-wrapper:hover {

    opacity: 0.96;

}


.hc-public-doctor-photo-wrapper:active {

    transform:
        scale(0.98);

}


.hc-public-doctor-photo {

    width: 112px;
    height: 112px;

    object-fit: cover;

    border-radius: 50%;

    border:
        3px solid
        #FFFFFF;

    box-shadow:
        0 5px 18px
        rgba(15, 23, 42, 0.12);

}


.hc-public-doctor-photo-placeholder {

    display: flex;

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

    width: 112px;
    height: 112px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #F0FDFA,
            #E2E8F0
        );

    border:
        3px solid
        #FFFFFF;

    box-shadow:
        0 5px 18px
        rgba(15, 23, 42, 0.10);

    color:
        var(--hc-primary);

    font-size: 34px;

    font-weight: 700;

}


/*
=========================================================
   CLOSE BUTTON
=========================================================
*/

.hc-public-doctor-close-button {

    position: absolute;

    top: 0;
    right: 0;

    display: inline-flex;

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

    width: 34px;
    height: 34px;

    margin: 0;
    padding: 0;

    border:
        1px solid
        var(--hc-border);

    border-radius: 50%;

    background:
        #FFFFFF;

    color:
        var(--hc-text-muted);

    font-size: 20px;

    line-height: 1;

    box-shadow:
        0 3px 10px
        rgba(15, 23, 42, 0.06);

    -webkit-tap-highlight-color: transparent;

    transition:
        background var(--hc-transition),
        color var(--hc-transition),
        border-color var(--hc-transition),
        transform var(--hc-transition);

}


.hc-public-doctor-close-button:hover {

    background:
        var(--hc-danger-soft);

    border-color:
        rgba(220, 38, 38, 0.18);

    color:
        var(--hc-danger);

}


.hc-public-doctor-close-button:active {

    transform:
        scale(0.92);

}


/*
=========================================================
   DOCTOR BASIC INFORMATION
=========================================================
*/

.hc-public-doctor-basic-info {

    width: 100%;

    text-align: center;

}


.hc-public-doctor-name-row {

    display: flex;

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

    flex-wrap: wrap;

    gap: 6px;

}


.hc-public-doctor-name {

    margin: 0;

    color:
        var(--hc-text);

    font-size: 23px;

    line-height: 1.25;

    font-weight: 700;

    letter-spacing: -0.25px;

}


.hc-public-doctor-verified-badge,
.verified-badge {

    display: inline-flex;

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

    flex: 0 0 auto;

    width: 16px;
    height: 16px;

    border-radius: 50%;

    background:
        var(--hc-primary);

    color:
        #FFFFFF;

    font-size: 9px;

    font-weight: 800;

}


/*
=========================================================
   RATING
=========================================================
*/

.hc-public-doctor-rating {

    display: inline-flex;

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

    gap: 5px;

    margin-top: 7px;
    margin-bottom: 8px;

    padding:
        4px
        8px;

    border-radius: 7px;

    cursor: pointer;

    user-select: none;
    -webkit-user-select: none;

    -webkit-tap-highlight-color: transparent;

    touch-action: manipulation;

    transition:
        background var(--hc-transition),
        transform var(--hc-transition),
        opacity var(--hc-transition);

}


.hc-public-doctor-rating:hover {

    background:
        rgba(245, 158, 11, 0.08);

}


.hc-public-doctor-rating:active {

    transform:
        scale(0.97);

}


.hc-public-doctor-rating:focus {

    outline: none;

}


.hc-public-doctor-rating:focus-visible {

    outline:
        2px solid
        var(--hc-primary);

    outline-offset: 2px;

}


.hc-public-doctor-rating-star {

    display: inline-flex;

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

    color:
        var(--hc-rating);

    font-size: 15px;

    line-height: 1;

}


.hc-public-doctor-rating-value {

    color:
        var(--hc-text-soft);

    font-size: 11px;

    font-weight: 700;

    line-height: 1.2;

}


/*
=========================================================
   DEGREE / SPECIALIZATION / DESIGNATION
=========================================================
*/

.hc-public-doctor-degree,
.hc-public-doctor-specialization,
.hc-public-doctor-designation {

    margin:
        5px
        0
        0;

    color:
        var(--hc-text-soft);

    font-size: 11.5px;

    line-height: 1.5;

}


.hc-public-doctor-degree {

    font-weight: 600;

}


.hc-public-doctor-specialization {

    color:
        var(--hc-primary);

    font-weight: 600;

}


.hc-public-doctor-designation {

    color:
        var(--hc-text-muted);

}


/*
=========================================================
   DOCTOR META
   EXPERIENCE + LANGUAGES
=========================================================
*/

.hc-public-doctor-meta {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    width: 100%;

    margin-top: 15px;

    padding-top: 13px;

    border-top:
        1px solid
        var(--hc-border-soft);

}


.hc-public-doctor-meta-item {

    min-width: 0;

    text-align: center;

}


.hc-public-doctor-meta-label {

    display: block;

    margin-bottom: 3px;

    color:
        var(--hc-text-muted);

    font-size: 9.5px;

    font-weight: 600;

}


.hc-public-doctor-meta-value {

    display: block;

    color:
        var(--hc-text-soft);

    font-size: 10.5px;

    font-weight: 600;

    line-height: 1.45;

    overflow-wrap: anywhere;

}


/*
=========================================================
   ABOUT SECTION
=========================================================
*/

.hc-public-doctor-about {

    margin-top: 18px;

    padding:
        15px;

    background:
        #FAFCFD;

    border:
        1px solid
        var(--hc-border-soft);

    border-radius: 15px;

}


.hc-public-doctor-section-title {

    margin:
        0
        0
        8px;

    color:
        var(--hc-text);

    font-size: 15px;

    line-height: 1.3;

    font-weight: 700;

}


.hc-public-doctor-about-text {

    margin: 0;

    color:
        var(--hc-text-soft);

    font-size: 11.5px;

    line-height: 1.7;

    white-space: pre-line;

}


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

.hc-public-doctor-availability {

    margin-top: 21px;

    padding-top: 18px;

    border-top:
        1px solid
        var(--hc-border-soft);

}


.hc-public-doctor-availability-header {

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}


.hc-public-doctor-availability-header > div {

    min-width: 0;

    flex: 1 1 auto;

}


.hc-public-doctor-availability-eyebrow {

    display: block;

    margin-bottom: 3px;

    color:
        var(--hc-primary);

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.6px;

}


.hc-public-doctor-availability-title {

    margin: 0;

    color:
        var(--hc-text);

    font-size: 16px;

    line-height: 1.3;

    font-weight: 700;

}


.hc-public-doctor-availability-header
.hc-public-doctor-section-title {

    margin-bottom: 0;

}


.hc-public-doctor-availability-subtitle {

    max-width: 430px;

    margin:
        4px
        0
        0;

    color:
        var(--hc-text-muted);

    font-size: 10px;

    line-height: 1.5;

}


/*
=========================================================
   CALENDAR TOGGLE
=========================================================
*/

.hc-public-doctor-calendar-toggle {

    display: inline-flex;

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

    flex: 0 0 auto;

    gap: 6px;

    width: 42px;

    min-height: 38px;

    margin: 0;

    padding:
        8px;

    border:
        1px solid
        rgba(15, 118, 110, 0.20);

    border-radius: 9px;

    background:
        var(--hc-primary-soft);

    color:
        var(--hc-primary);

    font-size: 16px;

    line-height: 1;

    font-weight: 700;

    -webkit-tap-highlight-color: transparent;

    transition:
        background var(--hc-transition),
        border-color var(--hc-transition),
        transform var(--hc-transition);

}


.hc-public-doctor-calendar-toggle:hover {

    background:
        #DFF8F2;

    border-color:
        rgba(15, 118, 110, 0.30);

}


.hc-public-doctor-calendar-toggle:active {

    transform:
        scale(0.96);

}


/*
=========================================================
   CALENDAR TOGGLE TEXT
=========================================================
*/

.hc-public-doctor-calendar-toggle
#hc-public-doctor-selected-date {

    display: none;

}


/*
=========================================================
   CALENDAR WRAPPER
=========================================================
*/

.hc-public-doctor-calendar-wrapper {

    width: 100%;

    margin-top: 13px;

    padding:
        13px
        12px;

    background:
        #FFFFFF;

    border:
        1px solid
        var(--hc-border);

    border-radius: 14px;

    box-shadow:
        var(--hc-shadow-sm);

}


/*
=========================================================
   SELECTED DATE PANEL
=========================================================
*/

.hc-public-doctor-selected-date {

    margin-top: 12px;

    padding: 14px;

    background:
        var(--hc-primary-soft);

    border:
        1px solid
        rgba(15, 118, 110, 0.12);

    border-radius: 14px;

}


.hc-public-doctor-selected-date-panel {

    margin-top: 12px;

    padding: 14px;

    background:
        var(--hc-primary-soft);

    border:
        1px solid
        rgba(15, 118, 110, 0.12);

    border-radius: 14px;

}


.hc-public-doctor-selected-date-header {

    margin: 0;

}


.hc-public-doctor-selected-date-eyebrow {

    display: block;

    margin-bottom: 3px;

    color:
        var(--hc-text-muted);

    font-size: 9px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.4px;

}


.hc-public-doctor-selected-date-title {

    margin: 0;

    color:
        var(--hc-primary-dark);

    font-size: 14px;

    line-height: 1.3;

    font-weight: 700;

}


.hc-public-doctor-selected-date-label {

    display: block;

    margin-bottom: 4px;

    color:
        var(--hc-text-muted);

    font-size: 9.5px;

    font-weight: 600;

}


.hc-public-doctor-selected-date-value {

    margin-top: 5px;

    color:
        var(--hc-primary-dark);

    font-size: 12px;

    font-weight: 700;

    line-height: 1.4;

}


/*
=========================================================
   SCHEDULES
=========================================================
*/

.hc-public-doctor-schedules {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 12px;

}


.hc-public-doctor-schedule-card {

    padding: 12px;

    background:
        #FFFFFF;

    border:
        1px solid
        var(--hc-border);

    border-radius: 12px;

    box-shadow:
        0 2px 7px
        rgba(15, 23, 42, 0.04);

}


.hc-public-doctor-schedule-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 8px;

}


.hc-public-doctor-schedule-chamber {

    min-width: 0;

    color:
        var(--hc-text);

    font-size: 12px;

    line-height: 1.35;

    font-weight: 700;

}


.hc-public-doctor-schedule-time {

    flex: 0 0 auto;

    max-width: 48%;

    color:
        var(--hc-primary);

    font-size: 8.5px;

    line-height: 1.4;

    font-weight: 700;

    text-align: right;

}


.hc-public-doctor-schedule-address {

    margin-top: 6px;

    color:
        var(--hc-text-muted);

    font-size: 9.5px;

    line-height: 1.55;

}


.hc-public-doctor-schedule-address a {

    color:
        var(--hc-primary);

    font-weight: 600;

}


/*
=========================================================
   BOOK APPOINTMENT
   REMOVED FROM MAIN PROFILE UI

   Kept only for compatibility if JS-generated
   schedule cards still use this class.
=========================================================
*/

.hc-public-doctor-book-appointment {

    display: inline-flex;

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

    gap: 7px;

    width: 100%;

    min-height: 39px;

    margin-top: 10px;

    padding:
        8px
        14px;

    border:
        1px solid
        var(--hc-primary);

    border-radius: 9px;

    background:
        var(--hc-primary);

    color:
        #FFFFFF;

    font-size: 10px;

    font-weight: 700;

    box-shadow:
        0 4px 10px
        rgba(15, 118, 110, 0.13);

    transition:
        background var(--hc-transition),
        border-color var(--hc-transition),
        box-shadow var(--hc-transition),
        transform var(--hc-transition);

}


.hc-public-doctor-book-appointment:hover {

    background:
        var(--hc-primary-dark);

    border-color:
        var(--hc-primary-dark);

}


.hc-public-doctor-book-appointment:active {

    transform:
        translateY(1px);

}


/*
=========================================================
   TRACK APPOINTMENT ACTION
   -------------------------------------------------------
   Button color is controlled by track.css.
   #6B8E23
=========================================================
*/

.hc-public-doctor-actions {

    display: flex;

    flex-direction: column;

    width: 100%;

    gap: 8px;

    margin-top: 17px;

    padding-top: 14px;

    border-top:
        1px solid
        var(--hc-border-soft);

}


.hc-public-doctor-actions button,
.hc-public-doctor-actions a {

    display: inline-flex;

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

    gap: 7px;

    width: 100%;

    min-height: 40px;

    margin: 0;

    padding:
        9px
        13px;

    border-radius: 9px;

    font-size: 10.5px;

    font-weight: 700;

    text-decoration: none;

    transition:
        background var(--hc-transition),
        border-color var(--hc-transition),
        color var(--hc-transition),
        box-shadow var(--hc-transition),
        transform var(--hc-transition);

}


/*
=========================================================
   NOTE

   .hc-public-doctor-track-appointment
   styling is intentionally NOT defined here.

   It is handled by:

   track.css

   Primary:
   #6B8E23

   Hover:
   #5F7F1F
=========================================================
*/


.hc-public-doctor-action-icon {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    flex:
        0 0 auto;

    font-size: 13px;

    line-height: 1;

}


/*
=========================================================
   NO SCHEDULES
=========================================================
*/

.hc-public-doctor-no-schedules {

    margin-top: 12px;

    padding: 14px;

    background:
        #F8FAFC;

    border:
        1px dashed
        var(--hc-border);

    border-radius: 12px;

    color:
        var(--hc-text-muted);

    font-size: 10px;

    line-height: 1.55;

    text-align: center;

}


.hc-public-doctor-no-schedules-icon {

    margin-bottom: 6px;

    color:
        var(--hc-text-muted);

    font-size: 20px;

}


.hc-public-doctor-no-schedules p {

    margin: 0;

}


/*
=========================================================
   HIDDEN STATE
=========================================================
*/

.hc-public-doctor-hidden {

    display: none !important;

}


.hc-public-doctor-page [hidden] {

    display: none !important;

}


/*
=========================================================
   INTERACTIVE FOCUS
=========================================================
*/

.hc-public-doctor-page button:focus-visible,
.hc-public-doctor-page a:focus-visible,
.hc-public-doctor-page input:focus-visible,
.hc-public-doctor-page select:focus-visible,
.hc-public-doctor-page textarea:focus-visible {

    outline:
        2px solid
        rgba(15, 118, 110, 0.35);

    outline-offset: 2px;

}


/*
=========================================================
   TABLET
   768px → 1199.98px
=========================================================
*/

@media (min-width: 768px) {


    /*
    =====================================================
       PAGE CONTAINER
    =====================================================
    */

    .hc-public-doctor-page-container {

        max-width: 720px;

        padding:
            25px
            20px
            45px;

    }


    /*
    =====================================================
       PROFILE CARD
    =====================================================
    */

    .hc-public-doctor-profile {

        padding:
            27px
            25px
            27px;

        border-radius:
            27px;

    }


    /*
    =====================================================
       PROFILE HEADER
    =====================================================
    */

    .hc-public-doctor-profile-header {

        min-height: 126px;

        margin-bottom: 19px;

    }


    /*
    =====================================================
       PHOTO
    =====================================================
    */

    .hc-public-doctor-photo-wrapper,
    .hc-public-doctor-photo,
    .hc-public-doctor-photo-placeholder {

        width: 126px;

        height: 126px;

    }


    /*
    =====================================================
       CLOSE BUTTON
    =====================================================
    */

    .hc-public-doctor-close-button {

        width: 38px;

        height: 38px;

        font-size: 22px;

    }


    /*
    =====================================================
       BASIC INFO
    =====================================================
    */

    .hc-public-doctor-name {

        font-size: 26px;

    }


    .hc-public-doctor-rating {

        margin-top: 8px;

        margin-bottom: 9px;

    }


    .hc-public-doctor-rating-star {

        font-size: 16px;

    }


    .hc-public-doctor-rating-value {

        font-size: 12px;

    }


    .hc-public-doctor-degree,
    .hc-public-doctor-specialization,
    .hc-public-doctor-designation {

        font-size: 12.5px;

    }


    /*
    =====================================================
       META
    =====================================================
    */

    .hc-public-doctor-meta {

        margin-top: 17px;

        padding-top: 15px;

        gap: 15px;

    }


    .hc-public-doctor-meta-label {

        font-size: 10.5px;

    }


    .hc-public-doctor-meta-value {

        font-size: 11.5px;

    }


    /*
    =====================================================
       ABOUT
    =====================================================
    */

    .hc-public-doctor-about {

        margin-top: 21px;

        padding: 17px;

        border-radius: 16px;

    }


    .hc-public-doctor-section-title {

        font-size: 16px;

    }


    .hc-public-doctor-about-text {

        font-size: 12px;

    }


    /*
    =====================================================
       AVAILABILITY
    =====================================================
    */

    .hc-public-doctor-availability {

        margin-top: 24px;

        padding-top: 22px;

    }


    .hc-public-doctor-availability-header {

        gap: 18px;

    }


    .hc-public-doctor-availability-eyebrow {

        font-size: 9.5px;

    }


    .hc-public-doctor-availability-title,
    .hc-public-doctor-availability-header
    .hc-public-doctor-section-title {

        font-size: 17px;

    }


    .hc-public-doctor-availability-subtitle {

        font-size: 10.5px;

    }


    /*
    =====================================================
       CALENDAR TOGGLE
    =====================================================
    */

    .hc-public-doctor-calendar-toggle {

        width: 48px;

        min-height: 42px;

        font-size: 17px;

        border-radius: 10px;

    }


    /*
    =====================================================
       CALENDAR WRAPPER
    =====================================================
    */

    .hc-public-doctor-calendar-wrapper {

        max-width: 420px;

        margin-left: auto;

        margin-right: auto;

        padding: 16px;

    }


    /*
    =====================================================
       SELECTED DATE
    =====================================================
    */

    .hc-public-doctor-selected-date-panel {

        padding: 17px;

    }


    .hc-public-doctor-selected-date-title {

        font-size: 15px;

    }


    /*
    =====================================================
       SCHEDULE CARD
    =====================================================
    */

    .hc-public-doctor-schedule-card {

        padding: 15px;

    }


    .hc-public-doctor-schedule-chamber {

        font-size: 13px;

    }


    .hc-public-doctor-schedule-time {

        font-size: 9px;

    }


    .hc-public-doctor-schedule-address {

        font-size: 10px;

    }


    /*
    =====================================================
       ACTIONS
    =====================================================
    */

    .hc-public-doctor-actions {

        margin-top: 19px;

        padding-top: 16px;

    }


    .hc-public-doctor-actions button,
    .hc-public-doctor-actions a {

        min-height: 42px;

        font-size: 11px;

    }

}


/*
=========================================================
   DESKTOP
   1200px+
=========================================================
*/

@media (min-width: 1200px) {


    /*
    =====================================================
       PAGE CONTAINER
    =====================================================
    */

    .hc-public-doctor-page-container {

        max-width: 780px;

        padding:
            35px
            20px
            55px;

    }


    /*
    =====================================================
       PROFILE CARD
    =====================================================
    */

    .hc-public-doctor-profile {

        padding:
            32px
            32px
            30px;

        border-radius:
            30px;

        box-shadow:
            var(--hc-shadow-lg);

    }


    /*
    =====================================================
       PROFILE HEADER
    =====================================================
    */

    .hc-public-doctor-profile-header {

        min-height: 138px;

        margin-bottom: 21px;

    }


    /*
    =====================================================
       PHOTO
    =====================================================
    */

    .hc-public-doctor-photo-wrapper,
    .hc-public-doctor-photo,
    .hc-public-doctor-photo-placeholder {

        width: 138px;

        height: 138px;

    }


    /*
    =====================================================
       CLOSE BUTTON
    =====================================================
    */

    .hc-public-doctor-close-button {

        width: 40px;

        height: 40px;

        font-size: 23px;

    }


    /*
    =====================================================
       NAME
    =====================================================
    */

    .hc-public-doctor-name {

        font-size: 29px;

        letter-spacing: -0.5px;

    }


    /*
    =====================================================
       RATING
    =====================================================
    */

    .hc-public-doctor-rating {

        margin-top: 9px;

        margin-bottom: 10px;

    }


    .hc-public-doctor-rating-star {

        font-size: 17px;

    }


    .hc-public-doctor-rating-value {

        font-size: 12.5px;

    }


    /*
    =====================================================
       DEGREE / SPECIALIZATION / DESIGNATION
    =====================================================
    */

    .hc-public-doctor-degree,
    .hc-public-doctor-specialization,
    .hc-public-doctor-designation {

        font-size: 13px;

    }


    /*
    =====================================================
       META
    =====================================================
    */

    .hc-public-doctor-meta {

        margin-top: 18px;

        padding-top: 16px;

        gap: 20px;

    }


    .hc-public-doctor-meta-label {

        font-size: 11px;

    }


    .hc-public-doctor-meta-value {

        font-size: 12px;

        line-height: 1.6;

    }


    /*
    =====================================================
       ABOUT
    =====================================================
    */

    .hc-public-doctor-about {

        margin-top: 23px;

        padding: 19px;

        border-radius: 18px;

    }


    .hc-public-doctor-section-title {

        font-size: 17px;

    }


    .hc-public-doctor-about-text {

        font-size: 12.5px;

        line-height: 1.75;

    }


    /*
    =====================================================
       AVAILABILITY
    =====================================================
    */

    .hc-public-doctor-availability {

        margin-top: 27px;

        padding-top: 24px;

    }


    .hc-public-doctor-availability-header {

        gap: 20px;

    }


    .hc-public-doctor-availability-eyebrow {

        font-size: 10px;

    }


    .hc-public-doctor-availability-title,
    .hc-public-doctor-availability-header
    .hc-public-doctor-section-title {

        font-size: 18px;

    }


    .hc-public-doctor-availability-subtitle {

        font-size: 11px;

    }


    /*
    =====================================================
       CALENDAR TOGGLE
    =====================================================
    */

    .hc-public-doctor-calendar-toggle {

        width: 50px;

        min-height: 44px;

        font-size: 18px;

        border-radius: 10px;

    }


    /*
    =====================================================
       CALENDAR WRAPPER
    =====================================================
    */

    .hc-public-doctor-calendar-wrapper {

        max-width: 440px;

        padding: 17px;

    }


    /*
    =====================================================
       SELECTED DATE
    =====================================================
    */

    .hc-public-doctor-selected-date-panel {

        padding: 19px;

        border-radius: 18px;

    }


    .hc-public-doctor-selected-date-title {

        font-size: 16px;

    }


    /*
    =====================================================
       SCHEDULE CARD
    =====================================================
    */

    .hc-public-doctor-schedule-card {

        padding: 16px;

        border-radius: 14px;

    }


    .hc-public-doctor-schedule-chamber {

        font-size: 14px;

    }


    .hc-public-doctor-schedule-time {

        font-size: 9.5px;

    }


    .hc-public-doctor-schedule-address {

        font-size: 10.5px;

    }


    /*
    =====================================================
       TRACK ACTION
    =====================================================
    */

    .hc-public-doctor-actions {

        margin-top: 21px;

        padding-top: 18px;

    }


    .hc-public-doctor-actions button,
    .hc-public-doctor-actions a {

        min-height: 44px;

        font-size: 11.5px;

    }

}