/**
=====================================================
ConsentManager Framework
Version : 1.0.0
Written By : Mustafa ÇİFCİ
=====================================================
*/


/* =====================================================
   Design Tokens
===================================================== */

:root{

    --cm-primary:#0057B8;
    --cm-primary-hover:#00489a;

    --cm-success:#28a745;
    --cm-danger:#dc3545;

    --cm-background:#ffffff;
    --cm-overlay:rgba(0,0,0,.55);

    --cm-text:#1f2937;
    --cm-text-light:#6b7280;

    --cm-border:#e5e7eb;

    --cm-radius:16px;

    --cm-shadow:
            0 20px 60px rgba(0,0,0,.18);

    --cm-transition:.25s ease;

    --cm-font:
            "Segoe UI",
            Roboto,
            Arial,
            sans-serif;

}

/* =====================================================
   Main Container
===================================================== */

.cm-popup{

    position:fixed;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%) scale(.95);

    width:100%;

    max-width:640px;

    max-height:90vh;

    overflow:hidden;

    background:var(--cm-background);

    border-radius:var(--cm-radius);

    box-shadow:var(--cm-shadow);

    display:flex;

    flex-direction:column;

    z-index:1000000;

    opacity:0;

    visibility:hidden;

    transition:all .25s ease;

    font-family:var(--cm-font);

}

.cm-popup.active{

    opacity:1;

    visibility:visible;

    transform:translate(-50%,-50%) scale(1);

}

/* =====================================================
   Overlay
===================================================== */

.cm-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(4px);

    opacity:0;

    visibility:hidden;

    transition:all .25s ease;

    z-index:999999;

}

.cm-overlay.active{

    opacity:1;

    visibility:visible;

}

/* =====================================================
   Modal
===================================================== */

.cm-modal{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:min(640px,92vw);
    min-height:500px;
    background:var(--cm-background);
    border-radius:var(--cm-radius);
    box-shadow:var(--cm-shadow);
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

/* =====================================================
   Header
===================================================== */

.cm-header{
    padding:20px 22px;
    border-bottom:1px solid var(--cm-border);
}

.cm-title{

    display:flex;
    align-items:center;
    gap:10px;

    font-size:20px;
    font-weight:700;
    line-height:1.7;
    color:var(--cm-text);

}

.cm-title::before{

    content:"\f564"; /* cookie-bite */
    font-family: 'Font Awesome\ 6 Pro';
    font-weight:900;

    color:var(--cm-primary);

    font-size:24px;

    flex-shrink:0;

}

.cm-description{
    font-size:13px;
    font-weight:400;
    line-height:1.7;
    color:var(--cm-text-light);
}

.cm-message{
    font-size:13px;
    font-weight:400;
    line-height:1.7;
    color:var(--cm-text-light);
}

.cm-close{

    position:absolute;

    top:18px;

    right:18px;

    width:36px;

    height:36px;

    border:0;

    border-radius:50%;

    background:transparent;

    cursor:pointer;

    transition:.2s;
    z-index: 999;

}

.cm-close:hover{

    background:#f1f5f9;

}

.cm-close::before{

    content:"\f00d";

    font-family:'Font Awesome 6 Pro';

    font-weight:900;

    font-size:15px;

    color:#64748b;

}

/* =====================================================
   Body
===================================================== */

.cm-body{

    padding:24px;

    overflow-y:auto;

}

/* =====================================================
   Category
===================================================== */

.cm-category{

    display:flex;

    flex-direction:column;

    gap:18px;

    padding:15px 0;

    border-bottom:1px solid var(--cm-border);

}




.cm-category:last-child{

    border-bottom:none;

}

.cm-category-content{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

}

.cm-category-text{

    flex:1;

    min-width:0;

}

.cm-category-title{

    font-size:16px;

    font-weight:600;

    line-height:1.3;

    color:var(--cm-text);

    margin-bottom:8px;

}

.cm-category-description{

    font-size:12px;

    line-height:1.7;

    color:var(--cm-text-light);

}

.cm-category-toggle{

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

}

/* =====================================================
   Toggle
===================================================== */

.cm-toggle{

    position:relative;

    width:52px;

    height:30px;

    flex-shrink:0;

}

.cm-toggle-input{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    margin:0;

    opacity:0;

    cursor:pointer;

    z-index:2;

}

.cm-toggle-slider{

    position:absolute;

    inset:0;

    background:#d1d5db;

    border-radius:999px;

    transition:all var(--cm-transition);

}

.cm-toggle-slider::before{

    content:"";

    position:absolute;

    width:22px;

    height:22px;

    left:4px;

    top:4px;

    border-radius:50%;

    background:#ffffff;

    box-shadow:0 2px 8px rgba(0,0,0,.15);

    transition:all var(--cm-transition);

}

.cm-toggle-input:checked + .cm-toggle-slider{

    background:var(--cm-primary);

}

.cm-toggle-input:checked + .cm-toggle-slider::before{

    transform:translateX(22px);

}

.cm-toggle-input:focus-visible + .cm-toggle-slider{

    box-shadow:0 0 0 4px rgba(0,87,184,.18);

}

.cm-toggle-input:disabled{

    cursor:not-allowed;

}

.cm-toggle-input:disabled + .cm-toggle-slider{

    opacity:.65;

    cursor:not-allowed;

}

.cm-toggle[data-state="checked"] .cm-toggle-slider{

    background:var(--cm-primary);

}

.cm-toggle[data-state="checked"] .cm-toggle-slider::before{

    transform:translateX(22px);

}

/* =====================================================
   Buttons
===================================================== */

.cm-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:140px;

    height:46px;

    padding:0 22px;

    border:1px solid transparent;

    border-radius:10px;

    font-size:14px;

    font-weight:600;

    font-family:inherit;

    cursor:pointer;

    transition:all var(--cm-transition);

    user-select:none;

    outline:none;

}

.cm-btn:hover{

    transform:translateY(-1px);

}

.cm-btn:active{

    transform:translateY(0);

}

.cm-btn:focus-visible{

    box-shadow:0 0 0 4px rgba(0,87,184,.18);

}

/* Primary */

.cm-btn-primary{

    background:var(--cm-primary);

    color:#ffffff;

}

.cm-btn-primary:hover{

    background:var(--cm-primary-hover);

}

/* Secondary */

.cm-btn-secondary{

    background:#f3f4f6;

    color:var(--cm-text);

    border-color:#e5e7eb;

}

.cm-btn-secondary:hover{

    background:#e5e7eb;

}

/* Outline */

.cm-btn-outline{

    background:#ffffff;

    color:var(--cm-primary);

    border-color:var(--cm-primary);

}

.cm-btn-outline:hover{

    background:rgba(0,87,184,.06);

}

/* =====================================================
   Footer
===================================================== */

.cm-footer{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:12px;

    padding:20px 24px;

    border-top:1px solid var(--cm-border);

    background:#ffffff;

}

@media (max-width:768px){

    .cm-popup{

        width:calc(100% - 32px);

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

    }

    .cm-header{

        padding:20px;

    }

    .cm-body{

        padding:20px;

    }

    .cm-footer{

        flex-direction:column;

        align-items:stretch;

    }

    .cm-footer .cm-btn{

        width:100%;

    }

    .cm-footer button{

        width:100%;

    }

    .cm-category-content{

        flex-direction:column;

        align-items:flex-start;

    }

}