/*
 * =========================================================
 * HC_ECO_PERSON_CONTACT_UI_V1
 * =========================================================
 *
 * Shared paid contact UI:
 *
 * worker
 * designer
 * construction_manager
 * supervisor
 *
 * No supplier.
 * =========================================================
 */

.hc-contact-unlock-root{
    width:100%;
    margin-top:14px;
    box-sizing:border-box;
}


.hc-contact-card{
    width:100%;
    box-sizing:border-box;

    border:
        1px solid
        rgba(15,23,42,.10);

    border-radius:14px;

    padding:14px 16px;

    background:#fff;
}


.hc-contact-label{
    font-size:13px;
    color:#64748b;
    margin-bottom:5px;
}


.hc-contact-phone{
    font-size:22px;
    line-height:1.35;
    font-weight:700;
    letter-spacing:.5px;
    color:#111827;
    word-break:break-all;
}


.hc-contact-note{
    margin-top:7px;
    font-size:12px;
    line-height:1.6;
    color:#64748b;
}


.hc-contact-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:12px;
}


.hc-contact-button{
    appearance:none;

    border:0;
    border-radius:10px;

    min-height:42px;

    padding:0 18px;

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

    cursor:pointer;

    background:#111827;
    color:#fff;
}


.hc-contact-button:hover{
    opacity:.90;
}


.hc-contact-button:disabled{
    opacity:.55;
    cursor:not-allowed;
}


.hc-contact-call{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:42px;

    padding:0 18px;

    border-radius:10px;

    text-decoration:none;

    background:#111827;
    color:#fff;

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


.hc-contact-own{
    display:inline-flex;
    align-items:center;

    min-height:36px;

    padding:0 12px;

    border-radius:999px;

    font-size:13px;

    background:#f1f5f9;
    color:#475569;
}


/*
 * =========================================================
 * CHECKOUT MODAL
 * =========================================================
 */

.hc-contact-pay-mask{
    position:fixed;
    inset:0;

    z-index:100000;

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

    padding:18px;

    box-sizing:border-box;

    background:
        rgba(
            15,
            23,
            42,
            .56
        );
}


.hc-contact-pay-dialog{
    width:min(
        430px,
        100%
    );

    max-height:
        calc(
            100vh
            -
            36px
        );

    overflow:auto;

    box-sizing:border-box;

    background:#fff;

    border-radius:18px;

    padding:22px;

    box-shadow:
        0
        24px
        70px
        rgba(
            15,
            23,
            42,
            .24
        );

    position:relative;
}


.hc-contact-pay-close{
    position:absolute;

    top:12px;
    right:12px;

    width:34px;
    height:34px;

    border:0;
    border-radius:50%;

    cursor:pointer;

    font-size:22px;
    line-height:34px;

    background:#f1f5f9;
    color:#475569;
}


.hc-contact-pay-title{
    padding-right:42px;

    font-size:20px;
    font-weight:800;

    color:#111827;
}


.hc-contact-pay-desc{
    margin-top:9px;

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

    color:#64748b;
}


.hc-contact-pay-price{
    margin-top:18px;

    padding:14px;

    border-radius:12px;

    background:#f8fafc;
}


.hc-contact-pay-price span{
    display:block;

    color:#64748b;

    font-size:12px;

    margin-bottom:3px;
}


.hc-contact-pay-price strong{
    font-size:28px;
    line-height:1.2;

    color:#111827;
}


.hc-contact-channel-grid{
    display:grid;

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

    gap:10px;

    margin-top:18px;
}


.hc-contact-channel{
    min-height:48px;

    border:
        1px solid
        #e2e8f0;

    border-radius:12px;

    background:#fff;

    cursor:pointer;

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

    color:#111827;
}


.hc-contact-channel:hover{
    border-color:#94a3b8;
    background:#f8fafc;
}


.hc-contact-channel:disabled{
    opacity:.55;
    cursor:not-allowed;
}


.hc-contact-pay-body{
    margin-top:18px;
}


.hc-contact-pay-loading,
.hc-contact-pay-error,
.hc-contact-pay-state{
    padding:14px;

    border-radius:12px;

    font-size:13px;
    line-height:1.7;
}


.hc-contact-pay-loading,
.hc-contact-pay-state{
    background:#f8fafc;
    color:#475569;
}


.hc-contact-pay-error{
    background:#fef2f2;
    color:#991b1b;
}


.hc-contact-qr-wrap{
    text-align:center;

    padding:8px 0 2px;
}


.hc-contact-qr-title{
    margin-bottom:12px;

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

    color:#111827;
}


.hc-contact-qr-image{
    display:block;

    width:220px;
    height:220px;

    max-width:100%;

    margin:0 auto;

    border-radius:10px;
}


.hc-contact-qr-state{
    margin-top:12px;

    font-size:13px;

    color:#64748b;
}


.hc-contact-pay-success{
    padding:16px;

    border-radius:12px;

    background:#f0fdf4;

    color:#166534;

    font-size:14px;
    line-height:1.7;
    text-align:center;
}


@media(max-width:640px){

    .hc-contact-phone{
        font-size:20px;
    }


    .hc-contact-pay-mask{
        align-items:flex-end;
        padding:0;
    }


    .hc-contact-pay-dialog{
        width:100%;
        max-height:88vh;

        border-radius:
            18px
            18px
            0
            0;

        padding:
            20px
            18px
            24px;
    }


    .hc-contact-channel-grid{
        grid-template-columns:1fr;
    }
}