/*
=========================================================
   HELCU — PUBLIC DOCTOR CARD
   PROFILE SHARE POPUP

   FILE:
   css/card/doctor/doctor_card_share.css

   RESPONSIBILITY:
   -------------------------------------------------------
   SweetAlert2 Doctor Card Share Popup
   WhatsApp / Email / Copy Link / Native Share

   BREAKPOINTS:
   -------------------------------------------------------
   Mobile  : 0px → 767.98px
   Tablet  : 768px → 1199.98px
   Desktop : 1200px+
=========================================================
*/


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


/*
=========================================================
   SWEETALERT POPUP
=========================================================
*/

.hc-doctor-share-swal {
    width: min(
        calc(100% - 24px),
        420px
    ) !important;

    max-width: 420px;

    margin: 12px;

    padding: 20px !important;

    border-radius: 16px !important;

    box-sizing: border-box;

    background: #FFFFFF !important;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.16) !important;

    font-family: inherit;
}


/*
=========================================================
   SWEETALERT TITLE
=========================================================
*/

.hc-doctor-share-swal .swal2-title {
    margin: 0 0 16px;

    padding: 0;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.3;

    color: #1F2937;
}


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

.hc-doctor-share-swal .swal2-close {
    width: 34px;

    height: 34px;

    margin: 6px 6px 0 0;

    font-size: 25px;

    font-weight: 400;

    line-height: 34px;

    color: #6B7280;

    border-radius: 50%;

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

.hc-doctor-share-swal .swal2-close:hover {
    color: #1F2937;

    background: rgba(
        0,
        0,
        0,
        0.05
    );
}


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

.hc-doctor-share-popup {
    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    box-sizing: border-box;
}


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

.hc-doctor-share-name {
    width: 100%;

    margin: 0;

    padding: 10px 12px;

    box-sizing: border-box;

    border-radius: 10px;

    background: rgba(
        10,
        126,
        164,
        0.08
    );

    color: #0A7EA4;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.4;

    text-align: left;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/*
=========================================================
   PROFILE URL
=========================================================
*/

.hc-doctor-share-url {
    width: 100%;

    margin-top: 8px;

    padding: 9px 11px;

    box-sizing: border-box;

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

    border-radius: 9px;

    background: #F8FAFC;

    color: #6B7280;

    font-size: 10px;

    font-weight: 500;

    line-height: 1.4;

    text-align: left;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


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

.hc-doctor-share-actions {
    width: 100%;

    display: grid;

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

    gap: 10px;

    margin-top: 16px;

    box-sizing: border-box;
}


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

.hc-doctor-share-option {
    width: 100%;

    min-width: 0;

    min-height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 10px 9px;

    box-sizing: border-box;

    appearance: none;

    -webkit-appearance: none;

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

    border-radius: 10px;

    outline: none;

    background: #FFFFFF;

    color: #374151;

    font-family: inherit;

    font-size: 12px;

    font-weight: 600;

    line-height: 1;

    text-align: center;

    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,
        color 0.2s ease;
}


/*
=========================================================
   SHARE ICON
=========================================================
*/

.hc-doctor-share-option i {
    flex: 0 0 auto;

    font-size: 17px;

    line-height: 1;
}


/*
=========================================================
   SHARE TEXT
=========================================================
*/

.hc-doctor-share-option span {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/*
=========================================================
   WHATSAPP
=========================================================
*/

.hc-doctor-share-option[data-share-action="whatsapp"] {
    color: #25D366;

    border-color: rgba(
        37,
        211,
        102,
        0.25
    );

    background: rgba(
        37,
        211,
        102,
        0.06
    );
}

.hc-doctor-share-option[data-share-action="whatsapp"]:hover {
    background: rgba(
        37,
        211,
        102,
        0.12
    );

    border-color: rgba(
        37,
        211,
        102,
        0.4
    );
}


/*
=========================================================
   EMAIL
=========================================================
*/

.hc-doctor-share-option[data-share-action="email"] {
    color: #0A7EA4;

    border-color: rgba(
        10,
        126,
        164,
        0.25
    );

    background: rgba(
        10,
        126,
        164,
        0.06
    );
}

.hc-doctor-share-option[data-share-action="email"]:hover {
    background: rgba(
        10,
        126,
        164,
        0.12
    );

    border-color: rgba(
        10,
        126,
        164,
        0.4
    );
}


/*
=========================================================
   COPY LINK
=========================================================
*/

.hc-doctor-share-option[data-share-action="copy"] {
    color: #6B8E23;

    border-color: rgba(
        107,
        142,
        35,
        0.25
    );

    background: rgba(
        107,
        142,
        35,
        0.06
    );
}

.hc-doctor-share-option[data-share-action="copy"]:hover {
    background: rgba(
        107,
        142,
        35,
        0.12
    );

    border-color: rgba(
        107,
        142,
        35,
        0.4
    );
}


/*
=========================================================
   NATIVE SHARE
=========================================================
*/

.hc-doctor-share-option[data-share-action="native"] {
    color: #7C3AED;

    border-color: rgba(
        124,
        58,
        237,
        0.25
    );

    background: rgba(
        124,
        58,
        237,
        0.06
    );
}

.hc-doctor-share-option[data-share-action="native"]:hover {
    background: rgba(
        124,
        58,
        237,
        0.12
    );

    border-color: rgba(
        124,
        58,
        237,
        0.4
    );
}


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

.hc-doctor-share-option:hover {
    transform: translateY(-1px);

    box-shadow:
        0 5px 14px rgba(
            0,
            0,
            0,
            0.08
        );
}


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

.hc-doctor-share-option:active {
    transform: translateY(0);

    box-shadow: none;
}


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

.hc-doctor-share-option:focus-visible {
    outline: 2px solid rgba(
        10,
        126,
        164,
        0.35
    );

    outline-offset: 2px;
}


/*
=========================================================
   SWEETALERT BACKDROP
=========================================================
*/

.swal2-container.swal2-backdrop-show {
    background: rgba(
        15,
        23,
        42,
        0.45
    ) !important;
}


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

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


    /*
    =====================================================
       POPUP
    =====================================================
    */

    .hc-doctor-share-swal {
        width: min(
            calc(100% - 32px),
            440px
        ) !important;

        max-width: 440px;

        margin: 16px;

        padding: 23px !important;

        border-radius: 17px !important;
    }


    /*
    =====================================================
       TITLE
    =====================================================
    */

    .hc-doctor-share-swal .swal2-title {
        margin-bottom: 18px;

        font-size: 19px;
    }


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

    .hc-doctor-share-name {
        padding: 11px 13px;

        border-radius: 10px;

        font-size: 15px;
    }


    /*
    =====================================================
       URL
    =====================================================
    */

    .hc-doctor-share-url {
        margin-top: 9px;

        padding: 10px 12px;

        font-size: 11px;
    }


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

    .hc-doctor-share-actions {
        gap: 11px;

        margin-top: 18px;
    }


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

    .hc-doctor-share-option {
        min-height: 50px;

        padding: 11px 12px;

        border-radius: 11px;

        font-size: 13px;
    }


    .hc-doctor-share-option i {
        font-size: 18px;
    }

}


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

@media (
    min-width: 1200px
) {


    /*
    =====================================================
       POPUP
    =====================================================
    */

    .hc-doctor-share-swal {
        width: 460px !important;

        max-width: 460px;

        padding: 26px !important;

        border-radius: 18px !important;
    }


    /*
    =====================================================
       TITLE
    =====================================================
    */

    .hc-doctor-share-swal .swal2-title {
        margin-bottom: 20px;

        font-size: 20px;
    }


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

    .hc-doctor-share-name {
        padding: 12px 14px;

        border-radius: 11px;

        font-size: 15px;
    }


    /*
    =====================================================
       URL
    =====================================================
    */

    .hc-doctor-share-url {
        margin-top: 10px;

        padding: 10px 13px;

        border-radius: 10px;

        font-size: 11px;
    }


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

    .hc-doctor-share-actions {
        gap: 12px;

        margin-top: 20px;
    }


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

    .hc-doctor-share-option {
        min-height: 52px;

        padding: 12px 14px;

        border-radius: 12px;

        font-size: 13px;
    }


    .hc-doctor-share-option i {
        font-size: 19px;
    }

}


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

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

    .hc-doctor-share-option,
    .hc-doctor-share-swal .swal2-close {
        transition: none;
    }

}