/* ========================= */
/* MEDIA PREVIEW COMPONENT */
/* ========================= */


.story-preview-modal{

position:fixed;

top:0;
left:0;

width:100%;
height:100vh;

display:none;

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

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

backdrop-filter:blur(8px);

z-index:999999;

padding:20px;

animation:fadePreview .25s;

}

@keyframes fadePreview{

from{

opacity:0;

}

to{

opacity:1;

}

}

.story-preview-phone{

width:100%;

max-width:390px;

height:92vh;

background:#fff;

border-radius:30px;

overflow:hidden;

display:flex;

flex-direction:column;

box-shadow:

0 20px 70px rgba(0,0,0,.35);

animation:previewUp .3s ease;

}

@keyframes previewUp{

from{

transform:translateY(60px);

opacity:0;

}

to{

transform:none;

opacity:1;

}

}

/* Header */

.story-preview-header{

height:65px;

display:flex;

align-items:center;

justify-content:center;

position:relative;

border-bottom:1px solid #eee;

font-size:18px;

font-weight:700;

color:#222;

background:#fff;

}

.story-preview-close{

position:absolute;

left:18px;

width:40px;

height:40px;

border:none;

background:#f5f5f5;

border-radius:50%;

cursor:pointer;

transition:.25s;

}

.story-preview-close:hover{

background:#ffe3ef;

color:#ff2f7b;

}

/* Image */

.story-preview-image{

flex:1;

background:#111;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

}

.story-preview-image img{

width:100%;

height:100%;

object-fit:cover;

}

/* Bottom */

.story-preview-bottom{

padding:18px;

background:#fff;

}

.story-preview-bottom textarea{

width:100%;

height:80px;

resize:none;

outline:none;

border:2px solid #eee;

border-radius:16px;

padding:14px;

font-size:15px;

font-family:inherit;

transition:.25s;

}

.story-preview-bottom textarea:focus{

border-color:#ff3f8e;

}

.story-upload-btn{

margin-top:15px;

width:100%;

height:52px;

border:none;

border-radius:15px;

background:#ff3f8e;

color:#fff;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.25s;

}

.story-upload-btn:hover{

background:#ff1f73;

transform:translateY(-2px);

box-shadow:

0 12px 25px rgba(255,63,142,.35);

}


.story-circle-title-field {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.story-circle-title-field label {
    font-size: 13px;
    font-weight: 600;
    color: #de4d4d;
}

#storyCircleTitle {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #dc1414;
    font-size: 14px;
    outline: none;
}

#storyCircleTitle::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

#storyCircleTitle:focus {
    border-color: #ff5c93;
    background: rgba(255, 255, 255, 0.12);
}