/*
=========================================================
   HELCU — DOCTOR PROFILE CARD
   PROFILE STATS + CENTER + ADDRESS + ACTIONS
=========================================================
*/


/* =========================================================
   BASE — MOBILE FIRST
   0px → 767.98px
========================================================= */


/*
=========================================================
   PROFILE STATS
=========================================================
*/

.hc-profile-stats {

    width: 100%;

    display: flex;

    align-items: stretch;

    justify-content: space-between;

    padding: 14px 12px;

    box-sizing: border-box;

    border-top: 1px solid rgba(
        0,
        0,
        0,
        0.07
    );

    border-bottom: 1px solid rgba(
        0,
        0,
        0,
        0.07
    );

}


/*
=========================================================
   STAT BOX
=========================================================
*/

.hc-stat-box {

    flex: 1 1 0;

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 3px;

    text-align: center;

}


/*
=========================================================
   STAT ICON
=========================================================
*/

.hc-stat-box i {

    font-size: 16px;

    line-height: 1;

}


/*
=========================================================
   EXPERIENCE ICON
=========================================================
*/

.hc-stat-experience-icon {

    color: #2E6BFF;

}


/*
=========================================================
   STAT VALUE
=========================================================
*/

.hc-stat-box h4 {

    margin: 2px 0 0;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.2;

    color: #1F2937;

}


/*
=========================================================
   STAT LABEL
=========================================================
*/

.hc-stat-box span {

    display: block;

    font-size: 10px;

    font-weight: 600;

    line-height: 1.2;

    white-space: nowrap;

    color: #6B7280;

}


/*
=========================================================
   STAT DIVIDER
=========================================================
*/

.hc-stat-divider {

    width: 1px;

    min-height: 42px;

    flex: 0 0 1px;

    align-self: center;

    background: rgba(
        0,
        0,
        0,
        0.12
    );

}


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

/*
   The existing rating block itself is the
   clickable/touchable rating trigger.
*/

.hc-profile-rating {

    flex: 1 1 0;

    min-width: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    padding: 6px 8px;

    box-sizing: border-box;

    border-radius: 8px;

    cursor: pointer;

    user-select: none;

    -webkit-user-select: none;

    -webkit-tap-highlight-color: transparent;

    touch-action: manipulation;

    text-align: center;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        opacity 0.2s ease,
        box-shadow 0.2s ease;

}


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

.hc-profile-rating > i {

    flex: 0 0 auto;

    font-size: 16px;

    line-height: 1;

    color: #F4B400;

}


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

.hc-profile-rating
.cf-card-rating-value {

    display: inline-block;

    min-width: 24px;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.2;

    color: #1F2937;

}


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

.hc-profile-rating
.hc-rating-label {

    display: inline-block;

    font-size: 10px;

    font-weight: 600;

    line-height: 1.2;

    white-space: nowrap;

    color: #6B7280;

}


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

.hc-profile-rating:hover {

    background: rgba(
        244,
        180,
        0,
        0.08
    );

    opacity: 0.95;

    transform: translateY(-1px);

}


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

.hc-profile-rating:active {

    transform: scale(0.97);

}


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

.hc-profile-rating:focus {

    outline: none;

}


/*
=========================================================
   RATING KEYBOARD FOCUS
=========================================================
*/

.hc-profile-rating:focus-visible {

    outline: 2px solid #0F766E;

    outline-offset: 2px;

}


/*
=========================================================
   CENTER INFORMATION
=========================================================
*/

.hc-profile-center-info {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 3px;

    margin-top: 12px;

    padding: 0 16px;

    box-sizing: border-box;

}


/*
=========================================================
   CENTER LABEL
=========================================================
*/

.hc-profile-center-label {

    display: block;

    font-size: 11px;

    font-weight: 600;

    line-height: 1.2;

    color: #6B7280;

}


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

.hc-profile-center-name {

    display: block;

    width: 100%;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.35;

    color: #0A7EA4;

}


/*
=========================================================
   ADDRESS
=========================================================
*/

.hc-profile-address {

    width: 100%;

    display: flex;

    align-items: flex-start;

    justify-content: flex-start;

    gap: 6px;

    margin-top: 6px;

    padding: 0 16px;

    box-sizing: border-box;

}


/*
=========================================================
   ADDRESS ICON
=========================================================
*/

.hc-profile-address i {

    flex: 0 0 auto;

    margin-top: 2px;

    font-size: 12px;

    line-height: 1;

    color: #E53935;

}


/*
=========================================================
   ADDRESS TEXT
=========================================================
*/

.hc-profile-address span {

    flex: 1 1 auto;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    font-size: 11px;

    font-weight: 500;

    line-height: 1.45;

    color: #6B7280;

}


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

.hc-profile-actions {

    width: 100%;

    display: flex;

    align-items: stretch;

    gap: 10px;

    padding: 14px 16px;

    box-sizing: border-box;

}


/*
=========================================================
   COMMON BUTTON
=========================================================
*/

.hc-profile-view-btn,
.hc-profile-share-btn {

    flex: 1 1 0;

    min-width: 0;

    min-height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 9px 14px;

    border-radius: 10px;

    box-sizing: border-box;

    font-family: inherit;

    font-size: 12px;

    font-weight: 600;

    line-height: 1;

    text-align: center;

    text-decoration: none;

    white-space: nowrap;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;

}


/*
=========================================================
   VIEW PROFILE BUTTON
=========================================================
*/

.hc-profile-view-btn {

    background: #0A7EA4;

    color: #FFFFFF;

    border: 1px solid #0A7EA4;

}


/*
=========================================================
   VIEW PROFILE HOVER
=========================================================
*/

.hc-profile-view-btn:hover {

    background: #086B8B;

    border-color: #086B8B;

    color: #FFFFFF;

}


/*
=========================================================
   SHARE BUTTON
=========================================================
*/

.hc-profile-share-btn {

    appearance: none;

    -webkit-appearance: none;

    background: #6B8E23;

    color: #FFFFFF;

    border: 1px solid #6B8E23;

}


/*
=========================================================
   SHARE BUTTON HOVER
=========================================================
*/

.hc-profile-share-btn:hover {

    background: #5F7F1F;

    border-color: #5F7F1F;

}


/*
=========================================================
   BUTTON ICON
=========================================================
*/

.hc-profile-view-btn i,
.hc-profile-share-btn i {

    flex: 0 0 auto;

    font-size: 15px;

    line-height: 1;

    color: #FFFFFF;

}


/*
=========================================================
   BUTTON TEXT
=========================================================
*/

.hc-profile-view-btn span,
.hc-profile-share-btn span {

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}


/*
=========================================================
   BUTTON HOVER
=========================================================
*/

.hc-profile-view-btn:hover,
.hc-profile-share-btn:hover {

    transform: translateY(-1px);

}


/*
=========================================================
   BUTTON ACTIVE
=========================================================
*/

.hc-profile-view-btn:active,
.hc-profile-share-btn:active {

    transform: translateY(0);

}


/*
=========================================================
   BUTTON FOCUS
=========================================================
*/

.hc-profile-view-btn:focus-visible,
.hc-profile-share-btn:focus-visible {

    outline: 2px solid rgba(
        10,
        126,
        164,
        0.35
    );

    outline-offset: 2px;

}


/*
=========================================================
   DISABLED STATE
=========================================================
*/

.hc-profile-share-btn:disabled,
.hc-profile-view-btn:disabled {

    opacity: 0.65;

    cursor: not-allowed;

    transform: none;

}


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

@media (
    min-width: 768px
) and (
    max-width: 1199.98px
) {


    /*
    =====================================================
       PROFILE STATS
    =====================================================
    */

    .hc-profile-stats {

        padding: 16px 18px;

    }


    .hc-stat-box {

        gap: 4px;

    }


    .hc-stat-box i {

        font-size: 17px;

    }


    .hc-stat-box h4 {

        margin-top: 3px;

        font-size: 18px;

    }


    .hc-stat-box span {

        font-size: 11px;

    }


    .hc-stat-divider {

        min-height: 46px;

    }


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

    .hc-profile-rating {

        gap: 6px;

        padding: 7px 10px;

    }


    .hc-profile-rating > i {

        font-size: 17px;

    }


    .hc-profile-rating
    .cf-card-rating-value {

        font-size: 18px;

    }


    .hc-profile-rating
    .hc-rating-label {

        font-size: 11px;

    }


    /*
    =====================================================
       CENTER INFORMATION
    =====================================================
    */

    .hc-profile-center-info {

        margin-top: 13px;

        padding: 0 20px;

    }


    .hc-profile-center-label {

        font-size: 12px;

    }


    .hc-profile-center-name {

        font-size: 14px;

    }


    /*
    =====================================================
       ADDRESS
    =====================================================
    */

    .hc-profile-address {

        margin-top: 7px;

        padding: 0 20px;

    }


    .hc-profile-address i {

        font-size: 13px;

    }


    .hc-profile-address span {

        font-size: 11px;

    }


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

    .hc-profile-actions {

        gap: 12px;

        padding: 16px 20px;

    }


    .hc-profile-view-btn,
    .hc-profile-share-btn {

        min-height: 44px;

        padding: 10px 16px;

        border-radius: 11px;

        font-size: 13px;

    }


    .hc-profile-view-btn i,
    .hc-profile-share-btn i {

        font-size: 16px;

    }

}


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

@media (min-width: 1200px) {


    /*
    =====================================================
       PROFILE STATS
    =====================================================
    */

    .hc-profile-stats {

        padding: 18px 22px;

    }


    .hc-stat-box {

        gap: 5px;

    }


    .hc-stat-box i {

        font-size: 18px;

    }


    .hc-stat-box h4 {

        margin-top: 3px;

        font-size: 20px;

    }


    .hc-stat-box span {

        font-size: 12px;

    }


    .hc-stat-divider {

        min-height: 50px;

    }


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

    .hc-profile-rating {

        gap: 7px;

        padding: 8px 12px;

    }


    .hc-profile-rating > i {

        font-size: 18px;

    }


    .hc-profile-rating
    .cf-card-rating-value {

        font-size: 20px;

    }


    .hc-profile-rating
    .hc-rating-label {

        font-size: 12px;

    }


    /*
    =====================================================
       CENTER INFORMATION
    =====================================================
    */

    .hc-profile-center-info {

        margin-top: 14px;

        padding: 0 24px;

    }


    .hc-profile-center-label {

        font-size: 12px;

    }


    .hc-profile-center-name {

        font-size: 14px;

    }


    /*
    =====================================================
       ADDRESS
    =====================================================
    */

    .hc-profile-address {

        margin-top: 8px;

        padding: 0 24px;

    }


    .hc-profile-address i {

        font-size: 13px;

    }


    .hc-profile-address span {

        font-size: 12px;

    }


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

    .hc-profile-actions {

        gap: 14px;

        padding: 18px 24px;

    }


    .hc-profile-view-btn,
    .hc-profile-share-btn {

        min-height: 46px;

        padding: 11px 18px;

        border-radius: 12px;

        font-size: 14px;

    }


    .hc-profile-view-btn i,
    .hc-profile-share-btn i {

        font-size: 17px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hc-profile-rating,
    .hc-profile-view-btn,
    .hc-profile-share-btn {

        transition: none;

    }

}