/* =========================================================
   CREATE STORY — DARK MODE
   ========================================================= */

/* ---------------------------------------------------------
   DARK VARIABLES
--------------------------------------------------------- */

html.dark-mode {
    color-scheme: dark;

    --story-dark-bg: #18191a;
    --story-dark-card: #242526;
    --story-dark-card-2: #3a3b3c;
    --story-dark-hover: #4e4f50;
    --story-dark-border: #3e4042;

    --story-dark-text: #e4e6eb;
    --story-dark-secondary: #b0b3b8;
    --story-dark-muted: #8b949e;

    --story-blue: #4599ff;
}


/* ---------------------------------------------------------
   PAGE
--------------------------------------------------------- */

html.dark-mode,
html.dark-mode body {
    background: var(--story-dark-bg) !important;
    color: var(--story-dark-text) !important;
}

html.dark-mode body {
    min-height: 100vh;
}


/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

html.dark-mode .story-header {
    background: var(--story-dark-card) !important;

    color: var(--story-dark-text) !important;

    border-bottom:
        1px solid var(--story-dark-border) !important;

    box-shadow:
        0 1px 4px rgba(0, 0, 0, .35) !important;
}


/* ---------------------------------------------------------
   BACK BUTTON
--------------------------------------------------------- */

html.dark-mode .back-button {
    background: transparent !important;

    color: var(--story-dark-text) !important;
}

html.dark-mode .back-button:hover,
html.dark-mode .back-button:focus {
    background: var(--story-dark-hover) !important;

    color: #fff !important;
}

html.dark-mode .back-button:active {
    background: #505152 !important;
}


/* ---------------------------------------------------------
   HEADER TITLE
--------------------------------------------------------- */

html.dark-mode .header-title {
    color: var(--story-dark-text) !important;
}


/* ---------------------------------------------------------
   STORY CONTAINER
--------------------------------------------------------- */

html.dark-mode .story-container {
    color: var(--story-dark-text) !important;
}


/* ---------------------------------------------------------
   STORY PREVIEW
--------------------------------------------------------- */

/*
 * IMPORTANT:
 * Do NOT change the selected background color here.
 * JavaScript controls it from the color picker.
 */

html.dark-mode .story-preview {
    box-shadow:
        0 5px 20px rgba(0, 0, 0, .45) !important;
}


/* ---------------------------------------------------------
   PREVIEW CONTENT
--------------------------------------------------------- */

html.dark-mode .preview-content {
    color: #fff !important;
}


/* ---------------------------------------------------------
   USER PREVIEW
--------------------------------------------------------- */

html.dark-mode .user-preview-name {
    color: #fff !important;

    text-shadow:
        0 1px 4px rgba(0, 0, 0, .65) !important;
}

html.dark-mode .user-preview img {
    border-color: #fff !important;

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


/* ---------------------------------------------------------
   MEDIA OVERLAY
--------------------------------------------------------- */

html.dark-mode .preview-overlay {
    background:
        linear-gradient(
            rgba(0, 0, 0, .20),
            rgba(0, 0, 0, .50)
        ) !important;
}


/* ---------------------------------------------------------
   FORM CARD
--------------------------------------------------------- */

html.dark-mode .form-card {
    background: var(--story-dark-card) !important;

    color: var(--story-dark-text) !important;

    border:
        1px solid var(--story-dark-border) !important;

    box-shadow:
        0 2px 10px rgba(0, 0, 0, .40) !important;
}


/* ---------------------------------------------------------
   TEXTAREA
--------------------------------------------------------- */

html.dark-mode .story-textarea {
    background: var(--story-dark-card-2) !important;

    color: var(--story-dark-text) !important;

    border:
        1px solid var(--story-dark-border) !important;
}

html.dark-mode .story-textarea::placeholder {
    color: var(--story-dark-muted) !important;
}

html.dark-mode .story-textarea:focus {
    background: var(--story-dark-card-2) !important;

    color: var(--story-dark-text) !important;

    outline: none !important;

    border-color: var(--story-blue) !important;

    box-shadow:
        0 0 0 2px rgba(69, 153, 255, .25) !important;
}


/* ---------------------------------------------------------
   MEDIA BUTTON
--------------------------------------------------------- */

html.dark-mode .media-button {
    background: var(--story-dark-card) !important;

    color: var(--story-dark-text) !important;

    border:
        1px solid var(--story-dark-border) !important;
}

html.dark-mode .media-button:hover {
    background: var(--story-dark-card-2) !important;

    border-color: #4e4f50 !important;
}

html.dark-mode .media-button:active {
    background: var(--story-dark-hover) !important;
}


/* ---------------------------------------------------------
   MEDIA ICON
--------------------------------------------------------- */

html.dark-mode .media-icon {
    background:
        rgba(69, 153, 255, .15) !important;

    color: var(--story-blue) !important;
}


/* ---------------------------------------------------------
   MEDIA TEXT
--------------------------------------------------------- */

html.dark-mode .media-title {
    color: var(--story-dark-text) !important;
}

html.dark-mode .media-subtitle {
    color: var(--story-dark-secondary) !important;
}


/* ---------------------------------------------------------
   COLOR TITLE
--------------------------------------------------------- */

html.dark-mode .color-title {
    color: var(--story-dark-text) !important;
}


/* ---------------------------------------------------------
   COLOR OPTIONS
--------------------------------------------------------- */

html.dark-mode .color-option {
    border-color: transparent !important;
}

html.dark-mode .color-option.active {
    border-color: #fff !important;

    box-shadow:
        0 0 0 2px var(--story-dark-card),
        0 0 0 4px #fff !important;
}


/* ---------------------------------------------------------
   SELECTED FILE
--------------------------------------------------------- */

html.dark-mode .selected-file {
    color: var(--story-dark-text) !important;
}

html.dark-mode .selected-file img,
html.dark-mode .selected-file video {
    border:
        1px solid var(--story-dark-border) !important;

    background: #000 !important;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, .40) !important;
}


/* ---------------------------------------------------------
   POST STORY BUTTON
--------------------------------------------------------- */

html.dark-mode .post-story-button {
    background: #1877f2 !important;

    color: #fff !important;

    border: none !important;

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

html.dark-mode .post-story-button:hover {
    background: #166fe5 !important;

    color: #fff !important;
}

html.dark-mode .post-story-button:active {
    background: #145fc7 !important;

    transform: translateY(1px);
}

html.dark-mode .post-story-button:focus {
    background: #1877f2 !important;

    color: #fff !important;

    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(24, 119, 242, .25) !important;
}

html.dark-mode .post-story-button:disabled {
    background: #3a3b3c !important;

    color: #8b949e !important;

    border:
        1px solid var(--story-dark-border) !important;

    opacity: 1 !important;
}


/* ---------------------------------------------------------
   BOOTSTRAP OVERRIDES
--------------------------------------------------------- */

html.dark-mode .bg-white {
    background: var(--story-dark-card) !important;

    color: var(--story-dark-text) !important;
}

html.dark-mode .text-dark {
    color: var(--story-dark-text) !important;
}

html.dark-mode .text-secondary {
    color: var(--story-dark-secondary) !important;
}

html.dark-mode .text-muted {
    color: var(--story-dark-secondary) !important;
}

html.dark-mode .border {
    border-color:
        var(--story-dark-border) !important;
}


/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */

html.dark-mode button {
    color: var(--story-dark-text);
}


/* ---------------------------------------------------------
   SWEETALERT2
--------------------------------------------------------- */

html.dark-mode .swal2-popup {
    background: var(--story-dark-card) !important;

    color: var(--story-dark-text) !important;

    border:
        1px solid var(--story-dark-border) !important;

    box-shadow:
        0 10px 40px rgba(0, 0, 0, .60) !important;
}

html.dark-mode .swal2-title {
    color: var(--story-dark-text) !important;
}

html.dark-mode .swal2-html-container,
html.dark-mode .swal2-content {
    color: var(--story-dark-secondary) !important;
}

html.dark-mode .swal2-input,
html.dark-mode .swal2-textarea,
html.dark-mode .swal2-select {
    background: var(--story-dark-card-2) !important;

    color: var(--story-dark-text) !important;

    border:
        1px solid var(--story-dark-border) !important;
}

html.dark-mode .swal2-input::placeholder,
html.dark-mode .swal2-textarea::placeholder {
    color: var(--story-dark-muted) !important;
}

html.dark-mode .swal2-cancel {
    background: var(--story-dark-card-2) !important;

    color: var(--story-dark-text) !important;

    border:
        1px solid var(--story-dark-border) !important;
}

html.dark-mode .swal2-cancel:hover {
    background: var(--story-dark-hover) !important;
}


/* ---------------------------------------------------------
   SWEETALERT ICONS
--------------------------------------------------------- */

html.dark-mode .swal2-icon.swal2-warning {
    border-color: #facc15 !important;

    color: #facc15 !important;
}

html.dark-mode .swal2-icon.swal2-error {
    border-color: #f87171 !important;

    color: #f87171 !important;
}

html.dark-mode .swal2-icon.swal2-success {
    border-color: #4ade80 !important;

    color: #4ade80 !important;
}


/* ---------------------------------------------------------
   SWEETALERT CONFIRM BUTTON
--------------------------------------------------------- */

html.dark-mode .swal2-confirm {
    background: #1877f2 !important;

    color: #fff !important;
}


/* ---------------------------------------------------------
   SCROLLBAR
--------------------------------------------------------- */

html.dark-mode * {
    scrollbar-color:
        #4e4f50
        #18191a;
}

html.dark-mode *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.dark-mode *::-webkit-scrollbar-track {
    background: #18191a;
}

html.dark-mode *::-webkit-scrollbar-thumb {
    background: #4e4f50;

    border-radius: 10px;
}

html.dark-mode *::-webkit-scrollbar-thumb:hover {
    background: #666;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 600px) {

    html.dark-mode .story-header {
        height: 58px;

        padding:
            0 12px;
    }

    html.dark-mode .story-container {
        background: var(--story-dark-bg) !important;

        padding:
            10px;
    }

    html.dark-mode .story-preview {
        border-radius: 14px;

        min-height: 470px;
    }

    html.dark-mode .form-card {
        border-radius: 14px;
    }

    html.dark-mode .story-textarea {
        font-size: 16px;
    }

}
/* End Dark Mode */

* {
    box-sizing: border-box;
}


body {

    margin: 0;

    background: #f0f2f5;

    color: #050505;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

}


/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.story-header {

    height: 60px;

    background: #fff;

    border-bottom:
        1px solid #dddfe2;

    display: flex;

    align-items: center;

    padding: 0 14px;

    position: sticky;

    top: 0;

    z-index: 100;

}


.back-button {

    width: 40px;

    height: 40px;

    border: 0;

    border-radius: 50%;

    background: transparent;

    font-size: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.back-button:active {

    background: #e4e6eb;

}


.header-title {

    margin-left: 8px;

    font-size: 19px;

    font-weight: 700;

}


/*
|--------------------------------------------------------------------------
| CONTAINER
|--------------------------------------------------------------------------
*/

.story-container {

    width: 100%;

    max-width: 600px;

    margin: auto;

    padding: 14px;

}


/*
|--------------------------------------------------------------------------
| PREVIEW
|--------------------------------------------------------------------------
*/

.story-preview {

    width: 100%;

    min-height: 480px;

    border-radius: 16px;

    overflow: hidden;

    position: relative;

    background: #1877f2;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 14px;

}


.preview-content {

    width: 100%;

    padding: 30px;

    text-align: center;

    color: #fff;

    font-size: 28px;

    font-weight: 700;

    line-height: 1.3;

    word-break: break-word;

    z-index: 2;

}


.preview-media {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.preview-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            rgba(0,0,0,.15),
            rgba(0,0,0,.35)
        );

}


/*
|--------------------------------------------------------------------------
| USER
|--------------------------------------------------------------------------
*/

.user-preview {

    position: absolute;

    top: 15px;

    left: 15px;

    right: 15px;

    z-index: 5;

    display: flex;

    align-items: center;

}


.user-preview img {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    object-fit: cover;

    border: 2px solid #fff;

}


.user-preview-name {

    color: #fff;

    font-size: 14px;

    font-weight: 700;

    margin-left: 9px;

    text-shadow:
        0 1px 3px rgba(0,0,0,.5);

}


/*
|--------------------------------------------------------------------------
| FORM CARD
|--------------------------------------------------------------------------
*/

.form-card {

    background: #fff;

    border-radius: 14px;

    padding: 16px;

    box-shadow:
        0 1px 2px rgba(0,0,0,.08);

}


/*
|--------------------------------------------------------------------------
| TEXTAREA
|--------------------------------------------------------------------------
*/

.story-textarea {

    width: 100%;

    min-height: 110px;

    resize: none;

    border: 0;

    outline: none;

    background: #f0f2f5;

    border-radius: 12px;

    padding: 14px;

    font-size: 16px;

}


.story-textarea:focus {

    box-shadow:
        0 0 0 2px #1877f2;

}


/*
|--------------------------------------------------------------------------
| MEDIA BUTTON
|--------------------------------------------------------------------------
*/

.media-button {

    width: 100%;

    min-height: 55px;

    border: 1px solid #dddfe2;

    border-radius: 12px;

    background: #fff;

    display: flex;

    align-items: center;

    padding: 12px;

    margin-top: 12px;

    cursor: pointer;

}


.media-icon {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: #e7f3ff;

    color: #1877f2;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

}


.media-text {

    margin-left: 10px;

}


.media-title {

    font-weight: 700;

    font-size: 14px;

}


.media-subtitle {

    color: #65676b;

    font-size: 12px;

}


/*
|--------------------------------------------------------------------------
| COLOR PICKER
|--------------------------------------------------------------------------
*/

.color-title {

    font-weight: 700;

    font-size: 14px;

    margin-top: 15px;

    margin-bottom: 8px;

}


.colors {

    display: flex;

    gap: 8px;

    overflow-x: auto;

}


.color-option {

    width: 36px;

    height: 36px;

    flex-shrink: 0;

    border-radius: 50%;

    border: 3px solid transparent;

    cursor: pointer;

}


.color-option.active {

    border-color: #000;

}


/*
|--------------------------------------------------------------------------
| FILE PREVIEW
|--------------------------------------------------------------------------
*/

.selected-file {

    margin-top: 10px;

    display: none;

}


.selected-file img,
.selected-file video {

    width: 100%;

    max-height: 220px;

    border-radius: 10px;

    object-fit: cover;

}


/*
|--------------------------------------------------------------------------
| POST BUTTON
|--------------------------------------------------------------------------
*/

.post-story-button {

    width: 100%;

    height: 50px;

    border: 0;

    border-radius: 12px;

    margin-top: 16px;

    background: #1877f2;

    color: #fff;

    font-size: 16px;

    font-weight: 700;

}


.post-story-button:disabled {

    opacity: .6;

}


/*
|--------------------------------------------------------------------------
| DESKTOP
|--------------------------------------------------------------------------
*/

@media (min-width: 768px) {

    .story-container {

        padding-top: 20px;

    }

}