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

.cc-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;

    background: rgba(10, 15, 30, 0.52);

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

    padding: 18px;
}

.cc-modal {
    width: min(620px, 96vw);

    max-height: 92vh;

    overflow: auto;

    background: #ffffff;

    border-radius: 8px;

    border: 1px solid #d8dfef;

    box-shadow: 0 24px 70px rgba(23, 32, 51, 0.32);
}

.cc-modal.wide {
    width: min(860px, 96vw);
}

.cc-modal header,
.cc-modal footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 14px 16px;

    border-bottom: 1px solid #e3e8f5;
}

.cc-modal footer {

    justify-content: flex-end;

    border-top: 1px solid #e3e8f5;

    border-bottom: 0;
}

.cc-modal h2 {

    margin: 0;

    color: #26155D;

    font-size: 18px;
}

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

.form-grid {

    display: grid;

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

    gap: 12px;

    padding: 16px;
}

.form-grid label,
.form-stack label {

    display: flex;

    flex-direction: column;

    gap: 6px;

    color: #24304f;

    font-size: 13px;

    font-weight: 700;
}

.form-grid .full {
    grid-column: 1 / -1;
}

/* =========================================================
   QUICK LEAD MODAL BACKDROP
========================================================= */

.quicklead-backdrop {

    position: fixed;

    inset: 0;

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

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 99999;

    padding: 20px;

    backdrop-filter: blur(3px);
}

/* =========================================================
   QUICK LEAD MODAL
========================================================= */

.quicklead-modal{
    width:100%;
    max-width:1150px;
    height:85vh;
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.quicklead-form{
    display:flex;
    flex-direction:column;
    height:100%;
    overflow:hidden;
}
/* =========================================================
   HEADER
========================================================= */

.quicklead-header {

    flex-shrink: 0;

    padding: 22px 26px;

    border-bottom: 1px solid #e5e7eb;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    background: #ffffff;
}

.quicklead-header h2 {

    margin: 0;

    font-size: 42px;

    font-weight: 800;

    line-height: 1.1;

    color: #0f172a;
}

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

.quicklead-close {

    width: 52px;

    height: 52px;

    border: none;

    border-radius: 16px;

    background: #f1f5f9;

    color: #0f172a;

    font-size: 28px;

    cursor: pointer;

    transition: .18s ease;
}

.quicklead-close:hover {

    background: #e2e8f0;

    transform: scale(1.03);
}

/* =========================================================
   BODY (SCROLLABLE)
========================================================= */

.quicklead-body{
    flex:1;
    overflow-y:auto;
    padding:24px;
    min-height:0;
}

/* =========================================================
   CUSTOM SCROLLBAR
========================================================= */

.quicklead-body::-webkit-scrollbar {
    width: 8px;
}

.quicklead-body::-webkit-scrollbar-thumb {

    background: #cbd5e1;

    border-radius: 20px;
}

/* =========================================================
   GRID
========================================================= */

.quicklead-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;
    padding-bottom:120px;
    gap: 22px;
}

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

.quicklead-field {

    display: flex;

    flex-direction: column;
}

.quicklead-field.full {
    grid-column: 1 / -1;
}

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

.quicklead-field label {

    margin-bottom: 8px;

    font-size: 16px;

    font-weight: 700;

    color: #334155;
}

/* =========================================================
   INPUTS
========================================================= */

.quicklead-field input,
.quicklead-field select,
.quicklead-field textarea,
.quicklead-input {

    width: 100%;

    border: 1px solid #cbd5e1;

    border-radius: 14px;

    padding: 15px 18px;

    font-size: 15px;

    background: #ffffff;

    outline: none;
    appearance:none;
    transition: .18s ease;

    color: #0f172a;
}

.quicklead-field input:focus,
.quicklead-field select:focus,
.quicklead-field textarea:focus,
.quicklead-input:focus {

    border-color: #4f46e5;

    box-shadow:
        0 0 0 4px rgba(79,70,229,.12);
}

/* =========================================================
   TEXTAREA
========================================================= */

.quicklead-field textarea,
.quicklead-textarea {

    min-height: 130px;

    resize: vertical;
}

/* =========================================================
   FOOTER
========================================================= */

.quicklead-footer {

    flex-shrink: 0;

    padding: 20px 26px;

    border-top: 1px solid #e5e7eb;

    display: flex;

    justify-content: flex-end;

    gap: 14px;

    background: #ffffff;

    position: sticky;

    bottom: 0;

    z-index: 5;
}

/* =========================================================
   BUTTONS
========================================================= */

.quicklead-btn {

    min-width: 120px;

    height: 52px;

    border: none;

    border-radius: 14px;

    padding: 0 24px;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    transition: .18s ease;
}

.quicklead-btn.cancel {

    background: #e2e8f0;

    color: #0f172a;
}

.quicklead-btn.cancel:hover {
    background: #cfd8e3;
}

.quicklead-btn.save {

    background: #4f46e5;

    color: #ffffff;
}

.quicklead-btn.save:hover {

    background: #4338ca;

    transform: translateY(-1px);
}

/* =========================================================
   VALIDATION
========================================================= */

.validation-message {

    color: #dc2626;

    font-size: 13px;

    margin-top: 6px;

    font-weight: 600;
}

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

@media(max-width:768px){

    .quicklead-modal {

        max-height: 96vh;

        border-radius: 18px;
    }

    .quicklead-grid {

        grid-template-columns: 1fr;
    }

    .quicklead-header {

        padding: 18px;
    }

    .quicklead-header h2 {

        font-size: 28px;
    }

    .quicklead-body {

        padding: 18px;
    }

    .quicklead-footer {

        padding: 16px 18px;
    }

    .quicklead-btn {

        min-width: 100px;

        height: 46px;

        font-size: 14px;
    }
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes quickLeadFade {

    from {

        opacity: 0;

        transform:
            translateY(20px)
            scale(.98);
    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}
.quicklead-body::-webkit-scrollbar{
    width:8px;
}

.quicklead-body::-webkit-scrollbar-track{
    background:#f1f5f9;
    border-radius:20px;
}

.quicklead-body::-webkit-scrollbar-thumb{
    background:#cbd5e1;
    border-radius:20px;
}

.quicklead-body::-webkit-scrollbar-thumb:hover{
    background:#94a3b8;
}