/* =====================================================
BUSINESSBRIDGE CHINA
SHARED INQUIRY SYSTEM
===================================================== */


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

.inquiry-modal{
    position:fixed;
    inset:0;

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

    padding:24px;

    background:
        rgba(12,18,36,.58);

    backdrop-filter:
        blur(4px);

    opacity:0;
    visibility:hidden;

    transition:
        opacity .22s ease,
        visibility .22s ease;

    z-index:5000;
}


.inquiry-modal.open{
    opacity:1;
    visibility:visible;
}


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

.inquiry-box{
    position:relative;

    width:100%;
    max-width:560px;
    max-height:
        calc(100dvh - 48px);

    overflow:hidden;

    padding:30px;

    border:
        1px solid #e5e7eb;

    border-radius:14px;

    background:#ffffff;

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

    box-sizing:border-box;
}


/* =====================================================
SCROLLABLE CONTENT

Scrollbar is pushed to the outer edge while
the form content keeps its normal width.
===================================================== */

#inquiryContent{
    max-height:
        calc(100dvh - 108px);

    overflow-y:auto;

    width:
        calc(100% + 30px);

    margin-right:-30px;

    padding-right:30px;

    box-sizing:border-box;
}


#inquiryContent::-webkit-scrollbar{
    width:6px;
}


#inquiryContent::-webkit-scrollbar-thumb{
    background:#cbd5e1;
    border-radius:10px;
}


#inquiryContent::-webkit-scrollbar-track{
    background:transparent;
}


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

.inquiry-close{
    position:absolute;

    top:16px;
    right:16px;

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

    width:34px;
    height:34px;

    padding:0;

    border:
        1px solid #e5e7eb;

    border-radius:8px;

    background:#ffffff;

    color:#64748b;

    font-family:inherit;
    font-size:14px;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;

    z-index:200;
}


.inquiry-close:hover{
    background:#f8fafc;
    border-color:#cbd5e1;

    color:
        var(--navy,#0f172a);
}


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

.inquiry-header{
    padding-right:48px;
    margin-bottom:20px;
}


.inquiry-header h2{
    margin:0 0 8px;

    color:
        var(--navy,#0f172a);

    font-size:24px;
    font-weight:800;
    line-height:1.25;
}


.inquiry-header p{
    margin:0;

    color:#64748b;

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


/* =====================================================
SELECTED PRODUCT
===================================================== */

.selected-product{
    margin-bottom:18px;

    padding:12px 15px;

    border-left:
        4px solid
        var(--green,#4c8414);

    border-radius:8px;

    background:#f8fafc;
}


.selected-product[hidden]{
    display:none !important;
}


.selected-product span{
    display:block;

    color:#64748b;

    font-size:11px;
    font-weight:600;

    text-transform:uppercase;
    letter-spacing:.04em;
}


.selected-product strong{
    display:block;

    margin-top:4px;

    color:
        var(--navy,#0f172a);

    font-size:14px;
    font-weight:700;
    line-height:1.45;
}


/* =====================================================
ACCOUNT NOTICE
===================================================== */

.inquiry-account-notice{
    display:flex;
    align-items:flex-start;

    gap:8px;

    margin-bottom:18px;

    padding:10px 12px;

    border-radius:8px;

    background:#f8fafc;

    color:#64748b;

    font-size:12px;
    line-height:1.5;
}


.inquiry-account-notice[hidden]{
    display:none !important;
}


.inquiry-account-notice i{
    margin-top:2px;

    color:
        var(--green,#4c8414);
}


/* =====================================================
FORM
===================================================== */

#inquiryForm{
    display:flex;
    flex-direction:column;

    gap:15px;
}


.inquiry-field{
    display:flex;
    flex-direction:column;

    gap:6px;
}


.inquiry-field label{
    color:#334155;

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


.inquiry-field label span{
    color:#dc2626;
}


.inquiry-field input,
.inquiry-field textarea{
    width:100%;

    box-sizing:border-box;

    border:
        1px solid #d9dee8;

    border-radius:8px;

    padding:10px 13px;

    background:#ffffff;

    color:#0f172a;

    font-family:inherit;
    font-size:14px;

    outline:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.inquiry-field input:focus,
.inquiry-field textarea:focus{
    border-color:
        var(--green,#4c8414);

    box-shadow:
        0 0 0 3px
        rgba(76,132,20,.12);
}


.inquiry-field input[readonly],
.inquiry-field textarea[readonly]{
    background:#f8fafc;
    color:#475569;

    cursor:default;
}


.inquiry-form-row{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:15px;
}


.inquiry-field textarea{
    min-height:100px;

    resize:vertical;

    line-height:1.55;
}


/* =====================================================
FORM MESSAGE
===================================================== */

.inquiry-form-message{
    padding:10px 12px;

    border-radius:8px;

    font-size:12px;
    line-height:1.5;
}


.inquiry-form-message[hidden]{
    display:none !important;
}


.inquiry-form-message.is-error{
    border:
        1px solid #fecaca;

    background:#fef2f2;

    color:#b91c1c;
}


.inquiry-form-message.is-info{
    border:
        1px solid #bfdbfe;

    background:#eff6ff;

    color:#1d4ed8;
}


/* =====================================================
SUBMIT
===================================================== */

.inquiry-submit{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    width:100%;

    min-height:44px;

    margin-top:5px;

    padding:12px 18px;

    border:none;
    border-radius:8px;

    background:
        var(--green,#4c8414);

    color:#ffffff;

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

    cursor:pointer;

    transition:
        background .2s ease,
        opacity .2s ease;
}


.inquiry-submit:hover{
    background:
        var(--green-dark,#396410);
}


.inquiry-submit:disabled{
    opacity:.65;

    cursor:not-allowed;
}


/* =====================================================
SUCCESS
===================================================== */

.inquiry-success{
    display:none;
}


.inquiry-success.active{
    position:absolute;
    inset:0;

    display:flex !important;

    flex-direction:column;

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

    width:100%;
    height:100%;

    box-sizing:border-box;

    padding:40px;

    border-radius:14px;

    background:#ffffff;

    text-align:center;

    overflow-y:auto;

    z-index:100;
}


/* Preserve form height behind success screen */

.inquiry-box:
has(.inquiry-success.active){
    overflow:hidden;
}


.inquiry-box:
has(.inquiry-success.active)
#inquiryContent{
    visibility:hidden;
}


/* Keep original X visible */

.inquiry-box:
has(.inquiry-success.active)
.inquiry-close{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;

    z-index:200;
}


/* =====================================================
SUCCESS ICON
===================================================== */

.inquiry-success .success-icon{
    position:static !important;

    display:flex;

    flex:0 0 auto;

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

    margin:0 0 18px;

    color:
        var(--green,#4c8414);

    font-size:52px;
    line-height:1;

    transform:none !important;
}


.inquiry-success .success-icon i{
    position:static !important;

    transform:none !important;
}


/* =====================================================
SUCCESS TEXT
===================================================== */

.inquiry-success h3{
    margin:0 0 12px;

    color:
        var(--navy,#0f172a);

    font-size:24px;
    font-weight:700;
    line-height:1.3;
}


.inquiry-success > p{
    max-width:430px;

    margin:0;

    color:#64748b;

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


/* =====================================================
ACCOUNT CONVERSION OFFER
Hidden until real guest inquiry succeeds.
===================================================== */

.inquiry-account-offer{
    width:100%;
    max-width:430px;

    margin-top:20px;
}


.inquiry-account-offer[hidden]{
    display:none !important;
}


.inquiry-account-offer-divider{
    width:100%;

    margin-bottom:18px;

    border-top:
        1px solid #e5e7eb;
}


.inquiry-account-offer h4{
    margin:0 0 8px;

    color:
        var(--navy,#0f172a);

    font-size:16px;
    font-weight:700;
    line-height:1.4;
}


.inquiry-account-offer p{
    margin:0 0 14px;

    color:#64748b;

    font-size:12px;
    line-height:1.6;
}


.inquiry-create-account{
    width:100%;

    padding:11px 16px;

    border:none;
    border-radius:8px;

    background:
        var(--green,#4c8414);

    color:#ffffff;

    font-family:inherit;
    font-size:13px;
    font-weight:700;

    cursor:pointer;
}


.inquiry-maybe-later{
    margin-top:8px;

    padding:7px 12px;

    border:none;

    background:transparent;

    color:#64748b;

    font-family:inherit;
    font-size:12px;

    cursor:pointer;
}


/* Old success close button is intentionally unused */

.success-close{
    display:none !important;
}


/* =====================================================
MOBILE
===================================================== */

@media(max-width:600px){

    .inquiry-modal{
        padding:15px;
    }


    .inquiry-box{
        padding:22px;

        border-radius:14px;
    }


    #inquiryContent{
        max-height:
            calc(100dvh - 74px);

        width:
            calc(100% + 22px);

        margin-right:-22px;

        padding-right:22px;
    }


    .inquiry-header{
        padding-right:40px;
    }


    .inquiry-header h2{
        font-size:21px;
    }


    .inquiry-form-row{
        grid-template-columns:1fr;
    }


    .inquiry-success.active{
        padding:30px 22px;
    }


    .inquiry-success h3{
        font-size:21px;
    }

}