/* ==========================================================
   TK CONSULT MODULE
   File: consult.css
   Version: 1.0.0
========================================================== */

/*==============================
RESET
==============================*/

.tkconsult,
.tkconsult *,
.tkconsult *::before,
.tkconsult *::after{
    box-sizing:border-box;
}

/*==============================
BODY LOCK
==============================*/

body.tkconsult-open{
    overflow:hidden;
}

/*==============================
WRAPPER
==============================*/

.tkconsult{
    position:fixed;
    inset:0;
    z-index:99999;

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

    padding:30px;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .30s ease,
        visibility .30s ease;
}

.tkconsult.is-active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

/*==============================
OVERLAY
==============================*/

.tkconsult-overlay{
    position:absolute;
    inset:0;

    background:rgba(15,23,42,.55);

    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);

    opacity:0;

    transition:opacity .30s ease;
}

.tkconsult.is-active .tkconsult-overlay{
    opacity:1;
}

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

.tkconsult-modal{

    position:relative;

    display:grid;
    grid-template-columns:360px 1fr;

    width:100%;
    max-width:980px;

    min-height:640px;

    background:#ffffff;

    border-radius:26px;

    overflow:hidden;

    box-shadow:
        0 30px 80px rgba(15,23,42,.18);

    transform:
        translateY(30px)
        scale(.96);

    opacity:0;

    transition:
        transform .35s ease,
        opacity .35s ease;

    will-change:
        transform,
        opacity;

}

.tkconsult.is-active .tkconsult-modal{

    transform:
        translateY(0)
        scale(1);

    opacity:1;

}

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

.tkconsult-close{

    position:absolute;

    top:18px;
    right:18px;

    width:42px;
    height:42px;

    border:none;

    border-radius:50%;

    background:#F8FAFC;

    color:#475569;

    cursor:pointer;

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

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

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;

    z-index:20;

}

.tkconsult-close:hover{

    background:#F97316;

    color:#fff;

    transform:rotate(90deg);

}

/*==============================
LEFT PANEL
==============================*/

.tkconsult-left{

    position:relative;

    display:flex;
    flex-direction:column;

    justify-content:center;

    padding:56px 46px;

    background:linear-gradient(
        180deg,
        #0F766E 0%,
        #115E59 100%
    );

    color:#ffffff;

    overflow:hidden;

}

.tkconsult-left::before{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    border-radius:50%;

    background:
        rgba(255,255,255,.06);

    right:-80px;
    top:-80px;

}

.tkconsult-left::after{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    border-radius:50%;

    background:
        rgba(255,255,255,.05);

    left:-60px;
    bottom:-60px;

}

.tkconsult-badge{

    position:relative;

    display:inline-flex;

    align-items:center;

    width:max-content;

    padding:8px 16px;

    margin-bottom:26px;

    border-radius:999px;

    background:
        rgba(255,255,255,.12);

    backdrop-filter:blur(10px);

    font-size:13px;

    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;

}

.tkconsult-title{

    position:relative;

    margin:0 0 18px;

    font-size:36px;

    line-height:1.25;

    font-weight:800;

    color:#fff;

}

.tkconsult-desc{

    position:relative;

    margin:0 0 34px;

    font-size:16px;

    line-height:1.85;

    color:
    rgba(255,255,255,.88);

}
/*==============================
BENEFITS
==============================*/

.tkconsult-benefits{

    position:relative;

    margin:0;
    padding:0;

    list-style:none;

}

.tkconsult-benefits li{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:14px;

    margin-bottom:18px;

    padding-left:34px;

    font-size:16px;

    line-height:1.7;

    color:
    rgba(255,255,255,.96);

}

.tkconsult-benefits li:last-child{

    margin-bottom:0;

}

.tkconsult-benefits li::before{

    content:"✓";

    position:absolute;

    left:0;
    top:1px;

    width:22px;
    height:22px;

    border-radius:50%;

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

    background:
    rgba(255,255,255,.18);

    color:#ffffff;

    font-size:13px;

    font-weight:700;

}

/*==============================
HOTLINE
==============================*/

.tkconsult-hotline{

    position:relative;

    margin-top:auto;

    padding-top:36px;

}

.tkconsult-hotline span{

    display:block;

    margin-bottom:10px;

    font-size:14px;

    color:
    rgba(255,255,255,.72);

    text-transform:uppercase;

    letter-spacing:.8px;

}

.tkconsult-hotline strong{

    display:block;

    font-size:34px;

    font-weight:800;

    line-height:1.15;

    color:#ffffff;

}

.tkconsult-hotline a{

    color:#ffffff;

    text-decoration:none;

}

.tkconsult-hotline a:hover{

    text-decoration:underline;

}

/*==============================
RIGHT PANEL
==============================*/

.tkconsult-right{

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:56px 52px;

    background:#ffffff;

}

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

.tkconsult-form{

    width:100%;

}

.tkconsult-field{

    margin-bottom:22px;

}

.tkconsult-field:last-of-type{

    margin-bottom:26px;

}

.tkconsult-field label{

    display:block;

    margin-bottom:9px;

    color:#0F172A;

    font-size:15px;

    font-weight:700;

}

.tkconsult-field label span{

    color:#DC2626;

}

/*==============================
INPUT
==============================*/

.tkconsult-form input,
.tkconsult-form select,
.tkconsult-form textarea{

    width:100%;

    border:1px solid #E2E8F0;

    background:#F8FAFC;

    border-radius:14px;

    padding:14px 16px;

    color:#0F172A;

    font-size:15px;

    font-family:inherit;

    outline:none;

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

}

.tkconsult-form input::placeholder,
.tkconsult-form textarea::placeholder{

    color:#94A3B8;

}

.tkconsult-form input:focus,
.tkconsult-form select:focus,
.tkconsult-form textarea:focus{

    border-color:#0F766E;

    background:#ffffff;

    box-shadow:
        0 0 0 4px rgba(15,118,110,.10);

}

.tkconsult-form textarea{

    resize:vertical;

    min-height:120px;

}

/*==============================
SELECT
==============================*/

.tkconsult-form select{

    cursor:pointer;

    appearance:none;

    -webkit-appearance:none;

    background-image:
        linear-gradient(45deg,transparent 50%,#64748B 50%),
        linear-gradient(135deg,#64748B 50%,transparent 50%);

    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 12px) calc(50% - 3px);

    background-size:6px 6px;

    background-repeat:no-repeat;

}
/*==============================
SUBMIT BUTTON
==============================*/

.tkconsult-submit{

    width:100%;

    height:56px;

    border:none;

    border-radius:14px;

    background:#F97316;

    color:#ffffff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

    box-shadow:
        0 12px 28px rgba(249,115,22,.28);

}

.tkconsult-submit:hover{

    background:#EA580C;

    transform:translateY(-2px);

    box-shadow:
        0 18px 36px rgba(249,115,22,.35);

}

.tkconsult-submit:active{

    transform:translateY(0);

}

.tkconsult-submit:disabled{

    cursor:not-allowed;

    opacity:.7;

    transform:none;

    box-shadow:none;

}

/*==============================
LOADING
==============================*/

.tkconsult-submit.is-loading{

    position:relative;

    color:transparent;

    pointer-events:none;

}

.tkconsult-submit.is-loading::after{

    content:"";

    position:absolute;

    width:22px;
    height:22px;

    top:50%;
    left:50%;

    margin-left:-11px;
    margin-top:-11px;

    border:3px solid rgba(255,255,255,.35);

    border-top-color:#ffffff;

    border-radius:50%;

    animation:tkconsult-spin .8s linear infinite;

}

@keyframes tkconsult-spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*==============================
SUCCESS / ERROR MESSAGE
==============================*/

.tkconsult-message{

    display:none;

    margin-top:20px;

    padding:16px 18px;

    border-radius:14px;

    font-size:15px;

    line-height:1.7;

}

.tkconsult-message.is-success{

    display:block;

    background:#ECFDF5;

    color:#065F46;

    border:1px solid #A7F3D0;

}

.tkconsult-message.is-error{

    display:block;

    background:#FEF2F2;

    color:#B91C1C;

    border:1px solid #FECACA;

}

/*==============================
FIELD ERROR
==============================*/

.tkconsult-field.has-error input,
.tkconsult-field.has-error select,
.tkconsult-field.has-error textarea{

    border-color:#DC2626;

    background:#FEF2F2;

}

.tkconsult-field.has-error input:focus,
.tkconsult-field.has-error select:focus,
.tkconsult-field.has-error textarea:focus{

    box-shadow:
        0 0 0 4px rgba(220,38,38,.12);

}

.tkconsult-error{

    margin-top:8px;

    color:#DC2626;

    font-size:13px;

    line-height:1.5;

}

/*==============================
SMOOTH SCROLLBAR
==============================*/

.tkconsult-modal{

    scrollbar-width:thin;

    scrollbar-color:#CBD5E1 transparent;

}

.tkconsult-modal::-webkit-scrollbar{

    width:8px;

}

.tkconsult-modal::-webkit-scrollbar-track{

    background:transparent;

}

.tkconsult-modal::-webkit-scrollbar-thumb{

    background:#CBD5E1;

    border-radius:999px;

}

.tkconsult-modal::-webkit-scrollbar-thumb:hover{

    background:#94A3B8;

}
/*==============================
RESPONSIVE
==============================*/

@media (max-width:1200px){

    .tkconsult-modal{

        max-width:920px;

        grid-template-columns:320px 1fr;

    }

    .tkconsult-left{

        padding:48px 38px;

    }

    .tkconsult-right{

        padding:48px 42px;

    }

    .tkconsult-title{

        font-size:32px;

    }

    .tkconsult-hotline strong{

        font-size:30px;

    }

}

@media (max-width:992px){

    .tkconsult{

        padding:24px;

    }

    .tkconsult-modal{

        max-width:760px;

        grid-template-columns:1fr;

        min-height:auto;

    }

    .tkconsult-left{

        display:none;

    }

    .tkconsult-right{

        padding:42px 36px;

    }

    .tkconsult-close{

        top:14px;

        right:14px;

    }

}

@media (max-width:768px){

    .tkconsult{

        padding:18px;

        align-items:flex-end;

    }

    .tkconsult-modal{

        width:100%;

        max-width:100%;

        border-radius:22px 22px 0 0;

        max-height:92vh;

        overflow-y:auto;

    }

    .tkconsult-right{

        padding:34px 26px;

    }

    .tkconsult-field{

        margin-bottom:18px;

    }

    .tkconsult-submit{

        height:54px;

    }

}

@media (max-width:480px){

    .tkconsult{

        padding:0;

    }

    .tkconsult-modal{

        border-radius:18px 18px 0 0;

        max-height:100vh;

    }

    .tkconsult-right{

        padding:28px 20px 24px;

    }

    .tkconsult-field label{

        font-size:14px;

    }

    .tkconsult-form input,
    .tkconsult-form select,
    .tkconsult-form textarea{

        font-size:16px;

        padding:13px 14px;

    }

    .tkconsult-submit{

        height:52px;

        font-size:15px;

    }

}

/*==============================
ACCESSIBILITY
==============================*/

.tkconsult-close:focus-visible,
.tkconsult-submit:focus-visible,
.tkconsult-form input:focus-visible,
.tkconsult-form select:focus-visible,
.tkconsult-form textarea:focus-visible{

    outline:2px solid #0F766E;

    outline-offset:2px;

}

/*==============================
REDUCE MOTION
==============================*/

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

    .tkconsult,
    .tkconsult *,
    .tkconsult *::before,
    .tkconsult *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}