/* =========================================================
   MYBLOG DARK MODE
   ========================================================= */

html.dark-mode,
html.dark-mode body {
    background: #18191a;
    color: #e4e6eb;
}

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

html.dark-mode .header {
    background: rgba(36, 37, 38, 0.98);
    border-bottom-color: #3a3b3c;
}

html.dark-mode .back-button {
    background: #3a3b3c;
    color: #e4e6eb;
}

html.dark-mode .back-button:hover {
    background: #4a4b4d;
}

html.dark-mode .header-title {
    color: #e4e6eb;
}

html.dark-mode .header-post-button {
    background: #1877f2;
    color: #ffffff;
}

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

html.dark-mode .container {
    background: transparent;
}

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

html.dark-mode .user-card {
    background: #242526;
}

html.dark-mode .user-name {
    color: #e4e6eb;
}

html.dark-mode .user-username {
    color: #b0b3b8;
}

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

html.dark-mode .editor {
    background: #242526;
}

html.dark-mode .post-textarea {
    background: transparent;
    color: #e4e6eb;
    caret-color: #4595ff;
}

html.dark-mode .post-textarea::placeholder {
    color: #8a8d91;
}

html.dark-mode .character-count {
    color: #8a8d91;
}

/* =========================================================
   POST OPTIONS
   ========================================================= */

html.dark-mode .options {
    background: #242526;
}

html.dark-mode .option-title {
    color: #e4e6eb;
}

/* Visibility */
html.dark-mode .visibility-select {
    background: #3a3b3c;
    border-color: #4a4b4d;
    color: #e4e6eb;
}

html.dark-mode .visibility-select:focus {
    border-color: #1877f2;
}

html.dark-mode .visibility-select option {
    background: #242526;
    color: #e4e6eb;
}

/* =========================================================
   SETTINGS
   ========================================================= */

html.dark-mode .setting {
    border-bottom-color: #3a3b3c;
}

html.dark-mode .setting-text strong {
    color: #e4e6eb;
}

html.dark-mode .setting-text span {
    color: #a5a8ad;
}

html.dark-mode .setting-icon {
    background: #263a5b;
    color: #4595ff;
}

/* =========================================================
   SWITCH
   ========================================================= */

html.dark-mode .slider {
    background: #55575a;
}

html.dark-mode .slider:before {
    background: #e4e6eb;
}

html.dark-mode .switch input:checked + .slider {
    background: #1877f2;
}

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

html.dark-mode .media-section {
    background: #242526;
}

html.dark-mode .media-title {
    color: #e4e6eb;
}

html.dark-mode .media-subtitle {
    color: #a5a8ad;
}

html.dark-mode .media-button {
    background: #18191a;
    border-color: #4a4b4d;
    color: #b0b3b8;
}

html.dark-mode .media-button:hover {
    background: #263a5b;
    border-color: #4595ff;
    color: #e4e6eb;
}

html.dark-mode .media-button.photo i {
    color: #35c77a;
}

html.dark-mode .media-button.video i {
    color: #ff667a;
}

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

html.dark-mode .preview-section {
    background: #242526;
}

html.dark-mode .preview-title {
    color: #e4e6eb;
}

html.dark-mode .preview-item {
    background: #3a3b3c;
}

html.dark-mode .remove-preview {
    background: rgba(0, 0, 0, 0.8);
    color: #ffffff;
}

/* =========================================================
   CLEAR MEDIA
   ========================================================= */

html.dark-mode .clear-media {
    color: #ff667a;
}

/* =========================================================
   PUBLISH
   ========================================================= */

html.dark-mode .submit-section {
    background: transparent;
}

html.dark-mode .publish-button {
    background: #1877f2;
    color: #ffffff;
}

html.dark-mode .publish-button:hover:not(:disabled) {
    background: #166fe5;
}

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

html.dark-mode::-webkit-scrollbar,
html.dark-mode body::-webkit-scrollbar {
    width: 8px;
}

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

html.dark-mode::-webkit-scrollbar-thumb,
html.dark-mode body::-webkit-scrollbar-thumb {
    background: #4a4b4d;
    border-radius: 10px;
}

html.dark-mode::-webkit-scrollbar-thumb:hover,
html.dark-mode body::-webkit-scrollbar-thumb:hover {
    background: #606164;
}

/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 768px) {

    html.dark-mode .user-card,
    html.dark-mode .editor,
    html.dark-mode .options,
    html.dark-mode .media-section,
    html.dark-mode .preview-section {
        border-color: #3a3b3c;
    }

}

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

@media (max-width: 767px) {

    html.dark-mode,
    html.dark-mode body {
        background: #18191a;
    }

    html.dark-mode .header {
        background: #242526;
    }

}

html.dark-mode .post-card {
    background: #18191a;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

html.dark-mode .post-action:hover {
            background: #18191a;
        }

html.dark-mode .comment-input {
    flex: 1;
    border: 0;
    background: #242526;
    border-radius: 22px;
    padding: 11px 15px;
    outline: none;
    font-size: 14px;
    color: #fff;
}

html.dark-mode .comment-body {
    background: #242526;
    border-radius: 15px;
    padding: 8px 12px;
    flex: 1;
}

html.dark-mode .topbar {
    height: 58px;
    background: #18191a;
    border-bottom: 1px solid #242526;
    display: flex;
    align-items: center;
    padding: 0 15px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

html.dark-mode i{
    color: #fff;
}

html.dark-mode .post-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid #242526;
    padding: 3px 8px;
}

html.dark-mode .post-stats {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    color: #65676b;
    font-size: 13px;
    border-bottom: 1px solid #242526;
}

html.dark-mode .post-menu:hover {
            background: #242526;
        }

html.dark-mode .share-modal {
    width: 100%;
    max-width: 600px;
    background: #18191a;
    border-radius: 20px 20px 0 0;
    padding: 18px 15px 25px;
    transform: translateY(100%);
    transition: transform .3s ease;
    max-height: 80vh;
    overflow-y: auto;
}

html.dark-mode .share-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 15px;
    border-bottom: 1px solid #242526;
}

html.dark-mode .share-close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #242526;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

html.dark-mode .share-icon.copy {
    background: #242526;
}


        * {
            box-sizing: border-box;
        }


        body {
            margin: 0;
            background: #f0f2f5;
            font-family:
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                Arial,
                sans-serif;
            color: #1c1e21;
        }


        .topbar {
            height: 58px;
            background: #fff;
            border-bottom: 1px solid #ddd;
            display: flex;
            align-items: center;
            padding: 0 15px;
            position: sticky;
            top: 0;
            z-index: 1000;
        }


        .back-btn {
            width: 40px;
            height: 40px;
            border: 0;
            background: transparent;
            border-radius: 50%;
            font-size: 23px;
            display: flex;
            align-items: center;
            justify-content: center;
        }


        .back-btn:hover {
            background: #f0f2f5;
        }


        .top-title {
            font-weight: 700;
            font-size: 18px;
            margin-left: 8px;
        }


        .post-container {
            width: 100%;
            max-width: 680px;
            margin: 20px auto 50px;
        }


        .post-card {
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,.12);
        }


        .post-header {
            display: flex;
            align-items: center;
            padding: 15px;
        }


        .author-photo {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            object-fit: cover;
            background: #eee;
        }


        .author-info {
            margin-left: 11px;
            min-width: 0;
            flex: 1;
        }


        .author-name {
            font-weight: 700;
            font-size: 15px;
            line-height: 20px;
        }


        .author-name a {
            color: #1c1e21;
            text-decoration: none;
        }


        .author-username {
            color: #65676b;
            font-size: 13px;
        }


        .post-date {
            color: #65676b;
            font-size: 12px;
        }


        .post-menu {
            width: 38px;
            height: 38px;
            border: 0;
            background: transparent;
            border-radius: 50%;
            font-size: 20px;
        }


        .post-menu:hover {
            background: #f0f2f5;
        }


        .post-content {
            padding: 0 15px 15px;
            font-size: 16px;
            line-height: 1.55;
            /* white-space: pre-wrap; */
            word-wrap: break-word;
        }


        .post-stats {
            display: flex;
            justify-content: space-between;
            padding: 10px 15px;
            color: #65676b;
            font-size: 13px;
            border-bottom: 1px solid #eee;
        }


        .post-stats-left {
            display: flex;
            align-items: center;
            gap: 5px;
        }


        .like-circle {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #1877f2;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
        }


        .post-actions {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            border-bottom: 1px solid #eee;
            padding: 3px 8px;
        }


        .post-action {
            border: 0;
            background: transparent;
            min-height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            color: #65676b;
            font-weight: 600;
            font-size: 14px;
            border-radius: 7px;
        }


        .post-action:hover {
            background: #f0f2f5;
        }


        .post-action i {
            font-size: 19px;
        }


        .active-like {
            color: #1877f2;
        }


        .active-save {
            color: #1877f2;
        }


        .comments-area {
            padding: 15px;
        }


        .comments-title {
            font-size: 17px;
            font-weight: 700;
            margin-bottom: 14px;
        }


        .comment-form {
            display: flex;
            gap: 8px;
            margin-bottom: 20px;
        }


        .comment-input {
            flex: 1;
            border: 0;
            background: #f0f2f5;
            border-radius: 22px;
            padding: 11px 15px;
            outline: none;
            font-size: 14px;
        }


        .comment-send {
            width: 42px;
            height: 42px;
            border: 0;
            border-radius: 50%;
            background: #1877f2;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }


        .comment-item {
            display: flex;
            gap: 9px;
            margin-bottom: 15px;
        }


        .comment-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            background: #eee;
        }


        .comment-body {
            background: #f0f2f5;
            border-radius: 15px;
            padding: 8px 12px;
            flex: 1;
        }


        .comment-name {
            font-weight: 700;
            font-size: 13px;
        }


        .comment-text {
            font-size: 14px;
            margin-top: 2px;
            white-space: pre-wrap;
        }


        .empty-comments {
            color: #65676b;
            text-align: center;
            padding: 15px;
        }


        @media (max-width: 700px) {

            body {
                background: #fff;
            }

            .post-container {
                margin: 0 auto;
            }

            .post-card {
                border-radius: 0;
                box-shadow: none;
            }

            .post-actions {
                grid-template-columns: repeat(4, 1fr);
            }

            .post-action span {
                display: none;
            }

        }


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

        .share-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .55);

            display: flex;
            align-items: flex-end;
            justify-content: center;

            z-index: 9999;

            opacity: 0;
            visibility: hidden;

            transition:
                opacity .25s ease,
                visibility .25s ease;
        }


        .share-overlay.show {
            opacity: 1;
            visibility: visible;
        }


        .share-modal {
            width: 100%;
            max-width: 600px;

            background: #fff;

            border-radius: 20px 20px 0 0;

            padding: 18px 15px 25px;

            transform: translateY(100%);

            transition:
                transform .3s ease;

            max-height: 80vh;
            overflow-y: auto;
        }


        .share-overlay.show .share-modal {
            transform: translateY(0);
        }


        /* HEADER */

        .share-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;

            padding-bottom: 15px;

            border-bottom: 1px solid #eee;
        }


        .share-modal-header h5 {
            margin: 0;

            font-size: 18px;

            font-weight: 700;
        }


        .share-close {
            width: 38px;
            height: 38px;

            border: 0;

            border-radius: 50%;

            background: #f0f2f5;

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

            font-size: 17px;
        }


        /* OPTIONS */

        .share-options {
            display: grid;

            grid-template-columns:
                repeat(5, 1fr);

            gap: 12px;

            padding: 20px 0;
        }


        .share-option {
            border: 0;
            background: transparent;

            display: flex;

            flex-direction: column;

            align-items: center;

            gap: 7px;

            font-size: 12px;

            color: #1c1e21;
        }


        .share-icon {
            width: 50px;
            height: 50px;

            border-radius: 50%;

            display: flex;

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

            font-size: 22px;

            background: #f0f2f5;
        }


        .share-icon.copy {
            background: #e4e6eb;
        }


        .share-icon.whatsapp {
            background: #25d366;
            color: #fff;
        }


        .share-icon.facebook {
            background: #1877f2;
            color: #fff;
        }


        .share-icon.x {
            background: #000;
            color: #fff;
        }


        .share-icon.telegram {
            background: #229ed9;
            color: #fff;
        }


        /* SEND */

        .share-send-button {
            width: 100%;

            border: 0;

            border-radius: 10px;

            padding: 13px;

            background: #f0f2f5;

            font-weight: 600;

            display: flex;

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

            gap: 8px;
        }


        @media (max-width: 450px) {

            .share-options {
                gap: 5px;
            }

            .share-icon {
                width: 46px;
                height: 46px;
            }

        }