/*
==========================================================
Gulf Job Works Content Writer
Editor Styles
==========================================================
*/


/* ==========================================================
Editor Wrapper
========================================================== */

.gjw-cw-editor{

    max-width:1000px;

    margin:50px auto;

    padding:0 20px;

}


/* ==========================================================
Editor Form Card
========================================================== */

.gjw-cw-form{

    background:#ffffff;

    border:1px solid var(--gjw-border);

    border-radius:16px;

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

    padding:35px;

}


/* ==========================================================
Field Spacing
========================================================== */

.gjw-cw-field{

    margin-bottom:30px;

}


.gjw-cw-field:last-child{

    margin-bottom:0;

}


/* ==========================================================
Labels
========================================================== */

.gjw-cw-field label{

    display:block;

    margin-bottom:10px;

    font-size:15px;

    font-weight:600;

    color:var(--gjw-secondary);

}


/* ==========================================================
Input Placeholder
========================================================== */

.gjw-cw-form input::placeholder,
.gjw-cw-form textarea::placeholder{

    color:#94a3b8;

}


/* ==========================================================
Title
========================================================== */

#post_title{

    font-size:28px;

    font-weight:700;

    padding:18px 20px;

}


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

#post_category{

    max-width:320px;

}


/* ==========================================================
Excerpt
========================================================== */

#post_excerpt{

    min-height:140px;

    resize:vertical;

}


/* ==========================================================
Featured Image
========================================================== */

.gjw-cw-current-image{

    margin-bottom:20px;

}


.gjw-cw-current-image img{

    width:100%;

    max-width:340px;

    border-radius:12px;

    border:1px solid var(--gjw-border);

    display:block;

}


input[type=file]{

    cursor:pointer;

}


/* ==========================================================
Classic Editor Container
========================================================== */

.wp-editor-wrap{

    border:1px solid var(--gjw-border);

    border-radius:12px;

    overflow:hidden;

    background:#ffffff;

}


/* Toolbar */

.wp-editor-tools{

    padding:8px;

    background:#f8fafc;

}


/* TinyMCE iframe */

.mce-container iframe{

    min-height:450px !important;

}


/* Text tab */

#content-html{

    border-radius:0;

}


/* ==========================================================
WordPress Media Button
========================================================== */

.wp-media-buttons .button{

    border-radius:8px;

}


/* ==========================================================
Tags
========================================================== */

#post_tags{

    font-size:14px;

}


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

.gjw-cw-actions{

    display:flex;

    justify-content:flex-end;

    gap:15px;

    margin-top:40px;

    padding-top:30px;

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

}


/* ==========================================================
Button Width
========================================================== */

.gjw-cw-actions .gjw-cw-button{

    min-width:170px;

}


/* ==========================================================
Description
========================================================== */

.description{

    margin-top:10px;

    font-size:13px;

    color:var(--gjw-muted);

}


/* ==========================================================
Required Fields
========================================================== */

.gjw-required{

    color:#dc2626;

}


/* ==========================================================
Focus Animation
========================================================== */

.gjw-cw-form input,
.gjw-cw-form textarea,
.gjw-cw-form select{

    transition:

        border-color .25s,

        box-shadow .25s,

        transform .15s;

}


.gjw-cw-form input:focus,
.gjw-cw-form textarea:focus,
.gjw-cw-form select:focus{

    transform:translateY(-1px);

}


/* ==========================================================
Image Upload Area
========================================================== */

.gjw-cw-upload-box{

    padding:30px;

    border:2px dashed #d1d5db;

    border-radius:14px;

    text-align:center;

    background:#fafafa;

    transition:.25s;

}


.gjw-cw-upload-box:hover{

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

    background:#f5fffa;

}


/* ==========================================================
WordPress Editor Body
========================================================== */

.wp-editor-area{

    font-size:16px;

    line-height:1.8;

}


/* ==========================================================
Responsive
========================================================== */

@media(max-width:768px){

    .gjw-cw-editor{

        padding:0 15px;

    }

    .gjw-cw-form{

        padding:24px;

    }

    .gjw-cw-actions{

        flex-direction:column;

    }

    .gjw-cw-actions .gjw-cw-button{

        width:100%;

    }

    #post_title{

        font-size:22px;

    }

    #post_category{

        max-width:100%;

    }

}


@media(max-width:480px){

    .gjw-cw-form{

        padding:18px;

    }

    .gjw-cw-current-image img{

        max-width:100%;

    }

    .mce-container iframe{

        min-height:320px !important;

    }

}