/* ========================================= */
/* CMS SIDEBAR */
/* ========================================= */

.cms-sidebar{

    position: fixed;

    top: 0;

    right: -420px;

    width: 420px;

    height: 100vh;

    background: #ffffff;

    box-shadow: -10px 0 40px rgba(0,0,0,0.15);

    padding: 30px;

    transition: all 0.35s ease;

    z-index: 999999;

    overflow-y: auto;

    border-left: 1px solid #e5e5e5;
}


.cms-sidebar.active{

    right: 0;
}


.cms-sidebar h2{

    font-size: 28px;

    font-weight: 700;

    margin-bottom: 20px;

    color: #111;
}


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

#cms-editor-input{

    width: 100%;

    height: 320px;

    margin-top: 15px;

    padding: 18px;

    font-size: 18px;

    line-height: 1.7;

    border-radius: 14px;

    border: 2px solid #e2e2e2;

    resize: vertical;

    outline: none;

    transition: 0.25s ease;

    background: #fafafa;
}


#cms-editor-input:focus{

    border-color: #000;

    background: white;

    box-shadow: 0 0 0 5px rgba(0,0,0,0.06);
}


/* ========================================= */
/* SAVE BUTTON */
/* ========================================= */

.cms-save-btn{

    width: 100%;

    margin-top: 24px;

    padding: 16px;

    background: #111;

    color: white;

    border: none;

    border-radius: 12px;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    transition: 0.25s ease;
}



.cms-save-btn:disabled{

    opacity: 0.7;

    cursor: not-allowed;
}


/* ========================================= */
/* CMS BLOCK */
/* ========================================= */

.cms-block{

    position: relative;

    transition: 0.25s ease;

    border-radius: 12px;
}


.cms-block:hover{

    outline: 2px dashed #007bff;

    outline-offset: 6px;
}


/* ========================================= */
/* LIVE ELEMENT */
/* ========================================= */



/* ========================================= */
/* CONTROLS */
/* ========================================= */


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

.cms-btn{

    border: none;

    background: #111;

    color: white;

    padding: 10px 18px;

    border-radius: 10px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.25s ease;

    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}


.cms-btn:hover{

    background: #007bff;

    transform: translateY(-2px);
}


.cms-font-btn{

    min-width: 52px;

    text-align: center;

    font-size: 16px;
}


/* ========================================= */
/* IMAGE EDITOR */
/* ========================================= */



.cms-block:hover img{

    border-color: #007bff;

    transform: scale(1.01);
}


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

.cms-image-upload{

    width: 100%;

    padding: 12px;

    border: 2px dashed #cfcfcf;

    border-radius: 12px;

    background: #fafafa;

    cursor: pointer;

    transition: 0.25s ease;
}


.cms-image-upload:hover{

    border-color: #007bff;

    background: #f2f8ff;
}


/* ========================================= */
/* TOAST */
/* ========================================= */

#cms-toast{

    position: fixed;

    top: 25px;

    right: 25px;

    background: #111;

    color: white;

    padding: 16px 24px;

    border-radius: 14px;

    font-weight: 700;

    z-index: 9999999;

    opacity: 0;

    transform: translateY(-20px);

    transition: all 0.3s ease;

    pointer-events: none;

    box-shadow: 0 15px 40px rgba(0,0,0,0.18);
}


#cms-toast.show{

    opacity: 1;

    transform: translateY(0);
}


#cms-toast.success{

    background: #28a745;
}


#cms-toast.error{

    background: #dc3545;
}


#cms-toast.loading{

    background: #007bff;
}


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

.cms-sidebar::-webkit-scrollbar{

    width: 8px;
}


.cms-sidebar::-webkit-scrollbar-thumb{

    background: #d0d0d0;

    border-radius: 20px;
}


.cms-sidebar::-webkit-scrollbar-thumb:hover{

    background: #a8a8a8;
}


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

@media(max-width:768px){

    .cms-sidebar{

        width: 100%;

        right: -100%;
    }

    .cms-sidebar.active{

        right: 0;
    }

    .cms-btn{

        width: 100%;
    }

    .cms-controls{

        flex-direction: column;

        align-items: stretch;
    }
}



.cms-admin-panel{

    background:#f7f8fc;

    padding:30px;

    border-radius:20px;

    margin:40px 0;
}

.cms-main-heading{

    font-size:34px;

    font-weight:700;

    margin-bottom:30px;

    color:#111;
}

.cms-section{

    background:white;

    padding:25px;

    border-radius:18px;

    margin-bottom:30px;

    box-shadow:0 5px 20px rgba(0,0,0,0.06);
}

.cms-section-title{

    font-size:24px;

    font-weight:700;

    margin-bottom:20px;

    color:#222;

    border-bottom:2px solid #f1f1f1;

    padding-bottom:12px;
}

.cms-field-card{

    background:#fafafa;

    border:1px solid #ececec;

    border-radius:14px;

    padding:20px;

    margin-bottom:20px;

    transition:0.3s;
}

.cms-field-card:hover{

    box-shadow:0 5px 15px rgba(0,0,0,0.08);

    transform:translateY(-2px);
}

.cms-field-label{

    font-size:15px;

    font-weight:700;

    color:#555;

    margin-bottom:14px;

    text-transform:uppercase;

    letter-spacing:1px;
}



/* ========================================= */
/* MAIN CMS WRAPPER */
/* ========================================= */

.cms-editor-wrapper{

    width:100%;

    max-width:1400px;

    margin:40px auto;

    padding:20px;
}


/* ========================================= */
/* MAIN TITLE */
/* ========================================= */

.cms-editor-main-title{

    font-size:38px;

    font-weight:700;

    margin-bottom:40px;

    color:#111;

    border-left:6px solid #111;

    padding-left:18px;
}


/* ========================================= */
/* SECTION */
/* ========================================= */

.cms-editor-section{

    margin-bottom:50px;
}





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

.cms-editor-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit, minmax(300px,1fr));

    gap:25px;
}


/* ========================================= */
/* CARD */
/* ========================================= */

.cms-editor-card{

    background:#fff;

    border-radius:18px;

    padding:22px;

    box-shadow:0 4px 20px rgba(0,0,0,0.08);

    border:1px solid #ececec;

    transition:0.25s ease;
}


.cms-editor-card:hover{

    transform:translateY(-3px);

    box-shadow:0 8px 25px rgba(0,0,0,0.12);
}


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

.cms-field-label{

    font-size:14px;

    font-weight:700;

    color:#666;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:16px;
}




/* ========================================= */
/* IMAGE PREVIEW */
/* ========================================= */

.cms-block img{

    width:100%;

    max-height:240px;

    object-fit:cover;

    border-radius:14px;

    border:1px solid #ddd;

    background:#f5f5f5;
}


/* ========================================= */
/* CONTROLS */



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



/* FONT BUTTONS */

.cms-font-btn{

    min-width:60px;

    text-align:center;
}


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


/* ========================================= */
/* SIDEBAR */
/* ========================================= */



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



/* ========================================= */
/* SAVE BUTTON */
/* ========================================= */



/* ========================================= */
/* TOAST */
/* ========================================= */

#cms-toast{

    position:fixed;

    top:20px;

    right:20px;

    background:#111;

    color:white;

    padding:14px 22px;

    border-radius:12px;

    font-weight:bold;

    z-index:999999;

    opacity:0;

    transform:translateY(-20px);

    transition:all 0.3s ease;

    pointer-events:none;

    box-shadow:0 10px 30px rgba(0,0,0,0.2);
}


#cms-toast.show{

    opacity:1;

    transform:translateY(0);
}


#cms-toast.success{

    background:#28a745;
}


#cms-toast.error{

    background:#dc3545;
}


#cms-toast.loading{

    background:#007bff;
}


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

@media(max-width:768px){

    .cms-editor-main-title{

        font-size:28px;
    }

    .cms-sidebar{

        width:100%;

        right:-100%;
    }

    .cms-editor-grid{

        grid-template-columns:1fr;
    }
}




body{

    background:#f4f6f9;
}


/* ====================================== */
/* PAGE */
/* ====================================== */

.cms-page-editor{

    width:95%;

    max-width:1600px;

    margin:40px auto;
}


/* ====================================== */
/* TOPBAR */
/* ====================================== */

.cms-topbar{

    margin-bottom:50px;
}


.cms-topbar h1{

    font-size:42px;

    font-weight:800;

    color:#111;

    margin-bottom:10px;
}


.cms-topbar p{

    font-size:18px;

    color:#666;
}


/* ====================================== */
/* SECTION */
/* ====================================== */



.cms-section-header{

    margin-bottom:20px;
}


.cms-section-header h2{

    font-size:28px;

    font-weight:700;

    color:#222;
}


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

.cms-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));

    gap:25px;
}


/* ====================================== */
/* CARD */
/* ====================================== */

.cms-card{

    background:white;

    border-radius:22px;

    padding:25px;

    box-shadow:0 5px 25px rgba(0,0,0,0.07);

    border:1px solid #ececec;
}


.cms-card.full{

    width:100%;
}


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

.cms-field-title{

    font-size:14px;

    font-weight:700;

    color:#888;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:16px;
}


/* ====================================== */
/* CMS BLOCK */
/* ====================================== */



/* ====================================== */
/* LIVE ELEMENT */
/* ====================================== */


/* ====================================== */
/* IMAGE */
/* ====================================== */


/* ====================================== */
/* BUTTON AREA */
/* ====================================== */



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




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

/* ====================================== */
/* SIDEBAR */
/* ====================================== */




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



/* ====================================== */
/* SAVE */
/* ====================================== */


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

@media(max-width:768px){

    .cms-grid{

        grid-template-columns:1fr;
    }

    .cms-sidebar{

        width:100%;

        right:-100%;
    }

    .cms-topbar h1{

        font-size:30px;
    }
}



/* ===================================== */
/* MAIN PAGE EDITOR */
/* ===================================== */

.cms-page-editor{

    width:100%;

    max-width:1400px;

    margin:40px auto;

    padding:20px;

    font-family:Arial, sans-serif;
}


/* ===================================== */
/* TOP BAR */
/* ===================================== */

.cms-topbar{

    background:#111827;

    color:white;

    padding:30px;

    border-radius:18px;

    margin-bottom:30px;

    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.cms-main-title{

    margin:0;

    font-size:34px;

    font-weight:700;
}

.cms-main-subtitle{

    margin-top:10px;

    opacity:0.8;

    font-size:16px;
}


/* ===================================== */
/* SECTIONS */
/* ===================================== */




/* ===================================== */
/* ROW LAYOUT */
/* ===================================== */

.cms-editor-row{

    display:flex;

    align-items:flex-start;

    gap:30px;

    margin-bottom:25px;

    padding:20px;

    background:#f9fafb;

    border-radius:14px;

    border:1px solid #ececec;
}


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

.cms-label{

    min-width:220px;

    max-width:220px;

    font-size:15px;

    font-weight:700;

    color:#374151;

    padding-top:12px;
}


/* ===================================== */
/* CONTENT SIDE */
/* ===================================== */

.cms-editor-content{

    flex:1;
}


/* ===================================== */
/* CMS BLOCK */
/* ===================================== */



/* ===================================== */
/* LIVE TEXT */
/* ===================================== */

.cms-live-element{

    background:white;

    border:1px solid #ddd;

    border-radius:12px;

    padding:18px;

    min-height:60px;

    line-height:1.6;

    color:#111827;

    box-shadow:0 2px 8px rgba(0,0,0,0.03);
}


/* ===================================== */
/* IMAGE */
/* ===================================== */



/* ===================================== */
/* CONTROLS */
/* ===================================== */

.cms-controls{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:15px;
}


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



.cms-open-editor{

    background:#111827;

    color:white;
}

.cms-open-editor:hover{

    background:#000;
}

.cms-font-btn{

    background:#2563eb;

    color:white;
}

.cms-font-btn:hover{

    background:#1d4ed8;
}


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


/* ===================================== */
/* SIDEBAR */
/* ===================================== */




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



/* ===================================== */
/* SAVE BUTTON */
/* ===================================== */


.cms-save-btn:hover{

    background:#15803d;
}


/* ===================================== */
/* TOAST */
/* ===================================== */

#cms-toast{

    position:fixed;

    top:20px;

    right:20px;

    background:#111827;

    color:white;

    padding:15px 22px;

    border-radius:12px;

    font-weight:600;

    z-index:9999999;

    opacity:0;

    transform:translateY(-20px);

    transition:0.3s ease;

    pointer-events:none;

    box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

#cms-toast.show{

    opacity:1;

    transform:translateY(0);
}

#cms-toast.success{

    background:#16a34a;
}

#cms-toast.error{

    background:#dc2626;
}

#cms-toast.loading{

    background:#2563eb;
}


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

@media(max-width:768px){

    .cms-editor-row{

        flex-direction:column;
    }

    .cms-label{

        min-width:100%;

        max-width:100%;
    }

    .cms-sidebar{

        width:100%;

        right:-100%;
    }

}