/* ==========================
   TYPOGRAPHY
   ========================== */
.font-weight-light {
    font-weight: 300 !important;
}

.font-weight-lighter {
    font-weight: lighter !important;
}

.font-weight-normal {
    font-weight: 400 !important;
}

.font-weight-bold {
    font-weight: 800 !important;
}

.font-weight-bolder {
    font-weight: bolder !important;
}

.text-opactity-50 {
    opacity: 0.5 !important;
}

.text-xs {
    font-size: 0.7rem !important;
}

.text-sm {
    font-size: 0.9rem !important;
}

.main-content .profile-sidebar .credits a {
    color: var(--para-1st-color);
}

/* ==========================
   GENERAL UTILITIES
   ========================== */
.no-shadow {
    box-shadow: none !important;
}

.top-border {
    border-top: 1px solid var(--border-color) !important;
}

.bottom-border {
    border-bottom: 1px solid var(--border-color) !important;
}

.blocked-adult {
    position: relative;
}

    .blocked-adult .blocked-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        background: rgba(255,255,255,0.7);
        border-radius: 10px;
    }

.cmn-btn.alt.invert {
    background: #FF4747;
    color: #FFD3C6;
}

    .cmn-btn.alt.invert i, .cmn-btn.alt.invert span {
        color: #FFD3C6;
    }

    .cmn-btn.alt.invert:hover {
        background: var(--bs-white);
        color: #F44C4C;
    }

        .cmn-btn.alt.invert:hover i, .cmn-btn.alt.invert:hover span {
            color: #F44C4C;
        }


.cmn-btn.dark {
    background: #111111;
    color: #F9FBFC;
}

    .cmn-btn.dark i, .cmn-btn.dark span {
        color: #F9FBFC;
    }

    .cmn-btn.dark:hover {
        color: var(--bs-yellow);
        background-color: #121212;
    }

        .cmn-btn.dark:hover i, .cmn-btn.dark:hover span {
            color: var(--bs-yellow);
        }

.cmn-btn.green {
    background: var(--bs-green);
    color: var(--bs-white);
}

    .cmn-btn.green i, .cmn-btn.green span {
        color: var(--bs-yellow);
    }

    .cmn-btn.green:hover {
        color: #f9fbfc;
        background-color: var(--bs-green);
    }

        .cmn-btn.green:hover i, .cmn-btn.green:hover span {
            color: #f9fbfc;
        }


.pointer {
    cursor: pointer !important;
}

.modal-alert-top {
    z-index: 99999 !important;
}

/* ==========================
   LAYOUT
   ========================== */
.img-container {
    width: 100%;
    position: relative;
    padding-top: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
    background: #f3f3f3;
}

    .img-container img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.card-body-background {
    background-color: var(--body-color) !important;
}

.logo {
    /*    height: 60px;
    width: 60px;*/
    margin: 0px;
}
/* Centered layout for login pages */
.login-layout-bg {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
}

.login-layout-center {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-box {
    min-width: 320px;
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 24px rgba(0,0,0,0.08);
}

.login-description {
    font-size: 0.9rem;
}

.main-content .single-box .avatar-box::before {
    background: none !important;
}

.main-content .single-box .avatar-box .avatar-img {
    opacity: 0.6;
    filter: grayscale(50%);
}

.main-content .single-box .abs-avatar-item img {
    border-radius: 5px;
}

.modal-content .post-item .post-single-box .friends-list span,
.modal-content .post-item .post-single-box .friends-list img {
    width: 30px;
    border-radius: 50%;
    color: var(--para-1st-color);
    background: var(--box-1st-color);
    width: 30px;
    height: 30px;
}

.promoted-content-box {
    border: 1px solid var(--border-color);
}

.highlight-area {
    /*background: var(--box-1st-color);*/
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.icon-input {
    line-height: 41.6px;
    margin-top: -8px;
}

/* ==========================
   COMPONENTS: NICE-SELECT
   ========================== */
.nice-select {
    border: 1.5px solid #ced4da !important; /* Bootstrap form-control border color */
    border-radius: 0.375rem !important; /* Bootstrap border radius */
    padding-left: 0.75rem !important;
    padding-right: 1.75rem !important; /* reduced space for arrow */
    min-height: 38px !important; /* same as .form-control */
    background: #fff !important;
}

    .nice-select .current {
        color: #212529;
    }

    .nice-select:focus {
        border-color: #86b7fe !important; /* Bootstrap focus color */
        box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25) !important;
    }

    .nice-select:after {
        right: 1rem !important; /* move arrow away from edge */
    }

/* SideBar display bugfix  */
@media (max-width: 991px) {
    .main-content .profile-sidebar {
        display: none;
    }

        .main-content .profile-sidebar.active {
            display: block;
            opacity: 1;
            pointer-events: auto;
            transform: translateX(0px);
        }
}

/* ==========================
   NAVIGATION & LINKS
   ========================== */
.notification-link {
    text-decoration: none;
    cursor: pointer;
}

.nav-link {
    color: var(--para-2nd-color) !important;
}

    .nav-link.active {
        color: var(--para-1st-color) !important;
    }

/* ==========================
   MODALS
   ========================== */
.modal.show {
    display: block;
    z-index: 1050 !important;
}

.modal-backdrop {
    z-index: 1040 !important;
}

.cmn-modal .modal-dialog {
    /*max-width: 550px;*/
}

.cmn-modal .modal-content {
    border-radius: 10px;
    box-shadow: 0px 17px 12px var(--box-shadow);
    background-color: var(--section-1st-color);
    padding: 30px;
}

    .cmn-modal .modal-content .modal-body {
        padding: 0;
    }

    .cmn-modal .modal-content .modal-header {
        position: absolute;
        right: 20px;
        top: 10px;
        padding: 0;
        border: none;
        z-index: 1;
    }

        .cmn-modal .modal-content .modal-header .btn-close {
            background: none;
        }

            .cmn-modal .modal-content .modal-header .btn-close:focus {
                box-shadow: none;
            }

            .cmn-modal .modal-content .modal-header .btn-close:hover i {
                color: var(--highlight-color);
                transition: 0.3s;
            }

    .cmn-modal .modal-content .post-item .post-single-box .profile-area .info-area .status {
        color: var(--para-1st-color);
    }

/* ==========================
   COMMENTS
   ========================== */
.comments-area .top-area {
    background: var(--box-1st-color);
    border-radius: 20px;
}

.comments-area .title-area p {
    color: var(--para-3rd-color);
}

.comments-area .like-share li {
    position: relative;
}

    .comments-area .like-share li::before {
        position: absolute;
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--para-3rd-color);
        left: -15px;
    }

    .comments-area .like-share li:first-child::before {
        display: none;
    }

.comments-area .like-share button {
    color: var(--para-2nd-color);
}

.comments-area .comment-form {
    display: none;
}

.comments-area .single-comment-area .parent-comment .avatar-item {
    position: relative;
}

    .comments-area .single-comment-area .parent-comment .avatar-item:before {
        content: "";
        background: var(--border-2nd-color);
        height: calc(100% - 20px);
        width: 1px;
        top: 70px;
        position: absolute;
        z-index: 1;
    }

.comments-area .single-comment-area .sibling-comment {
    position: relative;
}

    .comments-area .single-comment-area .sibling-comment:before {
        content: "";
        background: var(--border-2nd-color);
        height: calc(100% + 30px);
        width: 1px;
        top: 10px;
        left: -36px;
        position: absolute;
        z-index: 1;
    }

.comments-area .comment-item-nested .avatar-item {
    position: relative;
}

    .comments-area .comment-item-nested .avatar-item:before {
        content: "";
        height: 40px;
        width: 25px;
        left: -36px;
        bottom: 10px;
        border: 1px solid var(--border-2nd-color);
        border-top-color: transparent;
        border-right-color: transparent;
        position: absolute;
        z-index: 1;
        border-bottom-left-radius: 10px;
    }

.comments-area .comment-form {
    margin-top: 24px;
}

/* ==========================
   TABLES
   ========================== */
/* Table styles */
/* Default mode */
table {
    background: var(--section-1st-color);
    color: var(--heading-1st-color);
    border-radius: 8px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8em;
}

    table thead th {
        background: var(--secondary-color);
        color: var(--heading-1st-color);
        font-weight: 600;
        padding: 10px 12px;
        border-bottom: 1px solid var(--border-color);
    }

    table tbody tr {
        background: var(--box-2nd-color);
        color: var(--heading-1st-color);
        transition: background 0.2s, color 0.2s;
    }

        table tbody tr:nth-child(even) {
            background: var(--box-1st-color);
        }

        table tbody tr:hover {
            background: var(--primary-color);
            color: #fff;
        }

    table td {
        padding: 10px 12px;
        border-bottom: 1px solid var(--border-color);
    }
/* Dark mode */
.dark-ui table {
    background: var(--box-1st-color);
    color: var(--para-2nd-color);
}

    .dark-ui table thead th {
        background: var(--border-1st-color);
        color: var(--heading-1st-color);
        border-bottom: 1px solid var(--border-2nd-color);
    }

    .dark-ui table tbody tr {
        background: var(--box-2nd-color);
        color: var(--para-2nd-color);
    }

        .dark-ui table tbody tr:nth-child(even) {
            background: var(--section-1st-color);
        }

        .dark-ui table tbody tr:hover {
            background: var(--primary-color);
            color: #fff;
        }

    .dark-ui table td {
        border-bottom: 1px solid var(--border-2nd-color);
    }

/* ==========================
    EMOJI PICKER
    ========================== */

em-emoji-picker {
    /* Tvoje primární barva (např. modrá) - formát R, G, B */
    --em-rgb-accent: 0, 122, 255;
    /* Font aplikace */
    --em-font-family: var(--body-font);
}

/* --- Konfigurace Emoji Mart pro Dark Mode (.dark-ui) --- */
.dark-ui em-emoji-picker {
    /* Pozadí pickeru (tmavě šedá/černá) */
    --em-rgb-background: 28, 28, 30;
    /* Barva hlavního textu (bílá/světlá) */
    --em-rgb-color: 235, 235, 245;
    /* Barva pozadí vyhledávacího pole */
    --em-rgb-input: 44, 44, 46;
    /* Barva ohraničení (čáry mezi sekcemi) */
    --em-color-border: rgba(255, 255, 255, 0.15);
    /* Barva při najetí myší na smajlíka */
    --em-color-hover: rgba(255, 255, 255, 0.1);
}

/* ==========================
   NOTIFICATIONS
   ========================== */
.notification-single .avatar-item {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    vertical-align: top;
    overflow: visible;
}

    .notification-single .avatar-item .avatar-img {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: block;
    }

    .notification-single .avatar-item .abs-item {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 24px;
        height: 24px;
        z-index: 2;
        transform: none;
    }

/* ==========================
   FORMS
   ========================== */
fieldset {
    border: 1px solid var(--border-2nd-color);
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: var(--box-1st-color);
}

legend {
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0.2em 0.8em;
    border-radius: 0.5em;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    border: 1px solid var(--bs-border-color, #dee2e6);
    margin-bottom: 0.5em;
    display: inline-block;
}

body.dark-mode legend,
[data-bs-theme='dark'] legend {
    background: #222;
    color: #f8f9fa;
    border-color: #444;
}