/* ====================================
   NEW POST PAGE
==================================== */

.new-post-page{

padding:140px 20px 100px;

min-height:100vh;

position:relative;

z-index:10;
}

.narrow-container{

max-width:1000px;

margin:auto;
}

/* ====================================
   HEADER
==================================== */

.editor-header{

margin-bottom:50px;

text-align:center;
}

.editor-header h1{

font-size:54px;

font-weight:800;

color:#fff;

margin:20px 0;
}

.editor-header p{

font-size:18px;

line-height:1.8;

color:rgba(255,255,255,.7);
}

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

.post-form{

background:rgba(10,15,35,.82);

border:1px solid rgba(255,255,255,.06);

border-radius:30px;

padding:50px;

backdrop-filter:blur(20px);

box-shadow:
0 0 40px rgba(0,216,255,.06),
0 0 80px rgba(0,0,0,.45);
}

/* ====================================
   GROUP
==================================== */

.form-group{

margin-bottom:35px;
}

.form-group label{

display:block;

margin-bottom:15px;

font-size:15px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

color:#00d8ff;
}

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

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

width:100%;

padding:22px 24px;

border-radius:16px;

border:1px solid rgba(255,255,255,.12);

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

color:#fff;

font-size:16px;

outline:none;

transition:.3s ease;
}

.form-group textarea{

min-height:140px;

resize:vertical;
}

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

border-color:#00d8ff;

box-shadow:0 0 20px rgba(0,216,255,.25);
}

/* ====================================
   PLACEHOLDER
==================================== */

::placeholder{

color:rgba(255,255,255,.55);
}

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

input[type=file]{

width:100%;

padding:22px;

border-radius:18px;

border:1px dashed rgba(0,216,255,.35);

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

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

font-size:15px;

cursor:pointer;

transition:.3s ease;
}

input[type=file]:hover{

border-color:#00d8ff;

background:rgba(255,255,255,.08);
}

input[type=file]::file-selector-button{

margin-right:18px;

padding:12px 20px;

border:none;

border-radius:12px;

background:#00d8ff;

color:#000;

font-weight:700;

cursor:pointer;

transition:.3s ease;
}

input[type=file]::file-selector-button:hover{

background:#36e6ff;
}

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

.submit-row{

margin-top:50px;
}

.publish-btn{

width:100%;

padding:22px;

border:none;

border-radius:18px;

background:#00d8ff;

color:#000;

font-size:18px;

font-weight:800;

cursor:pointer;

transition:.3s ease;

box-shadow:0 0 25px rgba(0,216,255,.35);
}

.publish-btn:hover{

transform:translateY(-3px);

box-shadow:0 0 40px rgba(0,216,255,.6);
}

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

.codex-editor{

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

border-radius:20px;

padding:20px;
}

.ce-block__content,
.ce-toolbar__content{

max-width:100%;
}

.ce-paragraph,
.ce-header{

color:#fff;
}

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

@media(max-width:768px){

.post-form{

padding:25px;
}

.editor-header h1{

font-size:38px;
}
}

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

.submit-row{

display:flex;

gap:20px;
}

.preview-btn{

flex:1;

padding:22px;

border:none;

border-radius:18px;

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

color:#fff;

font-size:18px;

font-weight:800;

cursor:pointer;

transition:.3s ease;
}

.preview-btn:hover{

background:rgba(255,255,255,.14);
}

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

.preview-modal{

position:fixed;

inset:0;

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

backdrop-filter:blur(12px);

display:none;

align-items:center;

justify-content:center;

padding:40px;

z-index:999999;
}

.preview-modal.active{

display:flex;
}

/* ====================================
   CONTAINER
==================================== */

.preview-container{

position:relative;

width:100%;

max-width:1000px;

max-height:90vh;

overflow-y:auto;

background:#050816;

border-radius:30px;

padding:60px;
}

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

.close-preview{

position:absolute;

top:20px;
right:20px;

width:50px;
height:50px;

border:none;

border-radius:50%;

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

color:#fff;

font-size:30px;

cursor:pointer;
}

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

.preview-category{

display:inline-block;

padding:10px 16px;

border-radius:999px;

background:rgba(0,216,255,.15);

color:#00d8ff;

font-size:13px;

font-weight:700;

margin-bottom:25px;
}

.preview-content h1{

font-size:58px;

line-height:1.2;

margin-bottom:30px;

color:#fff;
}

.preview-image-wrapper{

margin-bottom:40px;
}

.preview-image-wrapper img{

width:100%;

border-radius:24px;
}

.preview-article{

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

font-size:18px;

line-height:1.9;
}

.preview-article h2,
.preview-article h3{

margin:40px 0 20px;

color:#fff;
}

.preview-article p{

margin-bottom:25px;
}

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

.editor-wrapper{

margin-top:20px;

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

border:1px solid rgba(255,255,255,.08);

border-radius:24px;

padding:20px;

min-height:700px;

overflow:hidden;
}

.editor-group label{

margin-bottom:18px;

display:block;
}

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

@media(max-width:768px){

.submit-row{

flex-direction:column;
}

.preview-container{

padding:30px 20px;
}

.preview-content h1{

font-size:38px;
}
}