/*
=========================================================
   HELCU — PUBLIC PROFILE
   INFORMATION + DISTANCE + MAP + ROUTE
   COMMON CSS

   Used by:
   -------------------------------------------------------
   Pharmacy
   Clinic
   Hospital
   Diagnostic
   Laboratory
   Other Healthcare Profiles

   RESPONSIVE BEHAVIOUR
   -------------------------------------------------------
   Mobile:
       Distance   → SHOW
       Map        → SHOW
       View Route → SHOW

   Tablet:
       Distance   → SHOW
       Map        → SHOW
       View Route → SHOW

   Desktop 1200px+:
       Distance   → HIDE
       Map        → SHOW
       View Route → HIDE
=========================================================
*/


/* =========================================================
   INFORMATION LIST
========================================================= */

.hc-public-pharmacy-information-list {

    width: 100%;

    display: flex;

    flex-direction: column;

    box-sizing: border-box;

}


/* =========================================================
   INFORMATION ROW
========================================================= */

.hc-public-pharmacy-information-row {

    width: 100%;

    display: flex;

    align-items: flex-start;

    justify-content: flex-start;

    gap: 8px;

    padding: 8px 0;

    box-sizing: border-box;

}


/* =========================================================
   INFORMATION LABEL
========================================================= */

.hc-public-pharmacy-information-label {

    flex: 0 0 auto;

    min-width: 72px;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.45;

    color: #0A7EA4;

}


/* =========================================================
   INFORMATION VALUE
========================================================= */

.hc-public-pharmacy-information-value {

    flex: 1 1 auto;

    min-width: 0;

    font-size: 13px;

    font-weight: 500;

    line-height: 1.45;

    color: #6B7280;

    overflow-wrap: anywhere;

}


/* =========================================================
   DISTANCE ROW
   Mobile + Tablet
   Visible by default
========================================================= */

.hc-profile-distance-row {

    width: 100%;

    display: flex;

    align-items: flex-start;

    justify-content: flex-start;

    gap: 8px;

    margin-top: 0;

}


/* =========================================================
   DISTANCE CONTENT
========================================================= */

.hc-profile-distance {

    display: inline-flex;

    align-items: center;

    justify-content: flex-start;

    gap: 6px;

    min-width: 0;

}


/* =========================================================
   DISTANCE ICON
========================================================= */

.hc-profile-distance i {

    flex: 0 0 auto;

    font-size: 13px;

    line-height: 1;

    color: #0A9396;

}


/* =========================================================
   DISTANCE TEXT
========================================================= */

.hc-profile-distance span {

    display: inline-block;

    min-width: 0;

    font-size: 13px;

    font-weight: 500;

    line-height: 1.45;

    color: #6B7280;

    white-space: nowrap;

}


/* =========================================================
   GOOGLE MAP
========================================================= */

.hc-profile-map {

    width: 100%;

    display: block;

    margin-top: 12px;

    overflow: hidden;

    border-radius: 12px;

    border: 1px solid rgba(0, 0, 0, 0.08);

    background: #F3F4F6;

    box-sizing: border-box;

}


/* =========================================================
   GOOGLE MAP IFRAME
========================================================= */

.hc-profile-map iframe {

    display: block;

    width: 100%;

    height: 260px;

    border: 0;

}


/* =========================================================
   ROUTE CONTAINER
   Mobile + Tablet
   Visible by default
========================================================= */

.hc-profile-route {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    margin-top: 10px;

    box-sizing: border-box;

}


/* =========================================================
   VIEW ROUTE BUTTON
========================================================= */

.hc-profile-route-btn {

    width: 100%;

    min-height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 9px 14px;

    border: 1px solid #0A7EA4;

    border-radius: 10px;

    box-sizing: border-box;

    background: #0A7EA4;

    color: #FFFFFF;

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    line-height: 1;

    text-align: center;

    text-decoration: none;

    white-space: nowrap;

    cursor: pointer;

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

}


/* =========================================================
   VIEW ROUTE ICON
========================================================= */

.hc-profile-route-btn i {

    flex: 0 0 auto;

    font-size: 15px;

    line-height: 1;

    color: #FFFFFF;

}


/* =========================================================
   VIEW ROUTE TEXT
========================================================= */

.hc-profile-route-btn span {

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}


/* =========================================================
   VIEW ROUTE — HOVER
========================================================= */

.hc-profile-route-btn:hover {

    background: #086B8B;

    border-color: #086B8B;

    color: #FFFFFF;

    transform: translateY(-1px);

    box-shadow:
        0 4px 10px rgba(10, 126, 164, 0.18);

}


/* =========================================================
   VIEW ROUTE — ACTIVE
========================================================= */

.hc-profile-route-btn:active {

    transform: translateY(0);

    box-shadow: none;

}


/* =========================================================
   VIEW ROUTE — FOCUS
========================================================= */

.hc-profile-route-btn:focus-visible {

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

    outline-offset: 2px;

}


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

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


    /* -----------------------------------------------
       INFORMATION ROW
    ----------------------------------------------- */

    .hc-public-pharmacy-information-row {

        gap: 10px;

        padding: 9px 0;

    }


    /* -----------------------------------------------
       LABEL
    ----------------------------------------------- */

    .hc-public-pharmacy-information-label {

        min-width: 82px;

        font-size: 13px;

    }


    /* -----------------------------------------------
       VALUE
    ----------------------------------------------- */

    .hc-public-pharmacy-information-value {

        font-size: 13px;

    }


    /* -----------------------------------------------
       DISTANCE
    ----------------------------------------------- */

    .hc-profile-distance-row {

        display: flex;

        gap: 10px;

    }


    .hc-profile-distance {

        gap: 6px;

    }


    .hc-profile-distance i {

        font-size: 14px;

    }


    .hc-profile-distance span {

        font-size: 13px;

    }


    /* -----------------------------------------------
       MAP
    ----------------------------------------------- */

    .hc-profile-map {

        margin-top: 14px;

        border-radius: 13px;

    }


    .hc-profile-map iframe {

        height: 300px;

    }


    /* -----------------------------------------------
       ROUTE
    ----------------------------------------------- */

    .hc-profile-route {

        display: flex;

        margin-top: 12px;

    }


    .hc-profile-route-btn {

        min-height: 44px;

        padding: 10px 16px;

        border-radius: 11px;

        font-size: 13px;

    }


    .hc-profile-route-btn i {

        font-size: 16px;

    }

}


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

   Distance → HIDDEN
   Map      → VISIBLE
   Route    → HIDDEN
========================================================= */

@media (min-width: 1200px) {


    /* -----------------------------------------------
       INFORMATION ROW
    ----------------------------------------------- */

    .hc-public-pharmacy-information-row {

        gap: 12px;

        padding: 10px 0;

    }


    /* -----------------------------------------------
       LABEL
    ----------------------------------------------- */

    .hc-public-pharmacy-information-label {

        min-width: 90px;

        font-size: 14px;

    }


    /* -----------------------------------------------
       VALUE
    ----------------------------------------------- */

    .hc-public-pharmacy-information-value {

        font-size: 14px;

    }


    /* -----------------------------------------------
       HIDE DISTANCE
    ----------------------------------------------- */

    .hc-profile-distance-row {

        display: none;

    }


    /* -----------------------------------------------
       MAP — KEEP VISIBLE
    ----------------------------------------------- */

    .hc-profile-map {

        display: block;

        margin-top: 16px;

        border-radius: 14px;

    }


    .hc-profile-map iframe {

        height: 340px;

    }


    /* -----------------------------------------------
       HIDE VIEW ROUTE
    ----------------------------------------------- */

    .hc-profile-route {

        display: none;

    }

}

.hc-profile-open-map-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-height: 42px;

    margin-top: 10px;

    padding: 9px 16px;

    box-sizing: border-box;

    border: 1px solid #0A7EA4;

    border-radius: 10px;

    background: #FFFFFF;

    color: #0A7EA4;

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    line-height: 1;

    text-decoration: none;

    white-space: nowrap;

    cursor: pointer;

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

}


.hc-profile-open-map-btn i {

    font-size: 15px;

    line-height: 1;

}


.hc-profile-open-map-btn:hover {

    background: #0A7EA4;

    border-color: #0A7EA4;

    color: #FFFFFF;

    transform: translateY(-1px);

}


.hc-profile-open-map-btn:active {

    transform: translateY(0);

}


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

@media (min-width: 1200px) {

    .hc-profile-distance-row {
        display: none;
    }

    .hc-profile-route {
        display: none;
    }

    .hc-profile-map {
        display: block;
    }

    .hc-profile-open-map-btn {
        display: inline-flex;
    }

}