/* =========================================================
   NEXA FRIENDS — DARK MODE
   ========================================================= */

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

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

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

    --nexa-blue: #4599ff;
}


/* =========================================================
   PAGE
   ========================================================= */

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

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


/* =========================================================
   TOPBAR
   ========================================================= */

html.dark-mode .topbar {
    background: var(--dark-card) !important;
    border-bottom: 1px solid var(--dark-border) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

html.dark-mode .brand {
    color: var(--nexa-blue) !important;
}

html.dark-mode .top-button {
    background: var(--dark-card-2) !important;
    color: var(--dark-text) !important;
}

html.dark-mode .top-button:hover {
    background: var(--dark-hover) !important;
    color: #fff !important;
}

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


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

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


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

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

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

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

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

html.dark-mode .page-header h1 i {
    color: var(--nexa-blue) !important;
}

html.dark-mode .page-header p {
    color: var(--dark-secondary) !important;
}


/* =========================================================
   TABS
   ========================================================= */

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

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

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

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

html.dark-mode .tab:hover {
    background: var(--dark-card-2) !important;
    color: var(--nexa-blue) !important;
}

html.dark-mode .tab.active {
    background: rgba(69, 153, 255, .16) !important;
    color: var(--nexa-blue) !important;
}

html.dark-mode .badge-count {
    background: #e41e3f !important;
    color: #fff !important;
}


/* =========================================================
   SEARCH BOX
   ========================================================= */

html.dark-mode .search-box {
    background: var(--dark-card) !important;

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

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

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

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

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

html.dark-mode .search-form input::placeholder {
    color: var(--dark-muted) !important;
}

html.dark-mode .search-form input:focus {
    background: var(--dark-card-2) !important;

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

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

    outline: none !important;

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

html.dark-mode .search-form button {
    background: #1877f2 !important;
    color: #fff !important;
}

html.dark-mode .search-form button:hover {
    background: #166fe5 !important;
}


/* =========================================================
   PERSON CARD
   ========================================================= */

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

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

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

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


/* =========================================================
   PERSON COVER
   ========================================================= */

html.dark-mode .person-cover {
    background:
        linear-gradient(
            135deg,
            #145dbf,
            #315f9e
        ) !important;
}


/* =========================================================
   PERSON PHOTO
   ========================================================= */

html.dark-mode .person-photo {
    border-color: var(--dark-card) !important;

    background: var(--dark-card-2) !important;

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


/* =========================================================
   PERSON INFO
   ========================================================= */

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

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

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


/* =========================================================
   ACTION BUTTONS
   ========================================================= */

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


/* BLUE BUTTON */

html.dark-mode .btn-blue {
    background: #1877f2 !important;
    color: #fff !important;
}

html.dark-mode .btn-blue:hover {
    background: #166fe5 !important;
    color: #fff !important;
}

html.dark-mode .btn-blue:active {
    background: #145fc7 !important;
}


/* LIGHT BUTTON */

html.dark-mode .btn-light {
    background: var(--dark-card-2) !important;
    color: var(--dark-text) !important;

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

html.dark-mode .btn-light:hover {
    background: var(--dark-hover) !important;
    color: #fff !important;
}


/* DANGER BUTTON */

html.dark-mode .btn-danger-light {
    background: rgba(220, 53, 69, .16) !important;

    color: #ff7b86 !important;

    border: 1px solid rgba(220, 53, 69, .25) !important;
}

html.dark-mode .btn-danger-light:hover {
    background: rgba(220, 53, 69, .25) !important;

    color: #ff9aa3 !important;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

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

    color: var(--dark-secondary) !important;

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

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

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

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

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


/* =========================================================
   BOOTSTRAP OVERRIDES
   ========================================================= */

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

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

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

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

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


/* =========================================================
   ALERT
   ========================================================= */

html.dark-mode .alert-danger {
    background: rgba(220, 53, 69, .15) !important;

    color: #ff8b94 !important;

    border: 1px solid rgba(220, 53, 69, .30) !important;
}


/* =========================================================
   ALL LINKS
   ========================================================= */

html.dark-mode a {
    color: inherit;
}


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

html.dark-mode button:focus,
html.dark-mode a:focus {
    outline: none;
}


/* =========================================================
   SWEETALERT2
   ========================================================= */

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

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

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

    box-shadow:
        0 15px 50px rgba(0, 0, 0, .65) !important;
}

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

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

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;
}

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

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

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

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

html.dark-mode .swal2-cancel:hover {
    background: var(--dark-hover) !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: 650px) {

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

    html.dark-mode .page-header {
        border-radius: 12px;
    }

    html.dark-mode .tabs {
        border-radius: 12px;
    }

    html.dark-mode .search-box {
        border-radius: 12px;
    }

    html.dark-mode .person-card {
        border-radius: 12px;
    }

}


/* =========================================================
   MOBILE SMALL SCREEN
   ========================================================= */

@media (max-width: 400px) {

    html.dark-mode .person-card {
        border-radius: 12px;
    }

}


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

/* End dark mode styles */

* {
    box-sizing: border-box;
}


body {

    margin: 0;

    background: #f0f2f5;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #050505;

}


/*
|--------------------------------------------------------------------------
| TOP BAR
|--------------------------------------------------------------------------
*/

.topbar {

    height: 58px;

    background: #fff;

    border-bottom:
        1px solid #ddd;

    display: flex;

    align-items: center;

    padding: 0 15px;

    position: sticky;

    top: 0;

    z-index: 100;

}


.back {

    width: 40px;

    height: 40px;

    border: 0;

    background: transparent;

    border-radius: 50%;

    font-size: 21px;

}


.title {

    margin-left: 8px;

    font-size: 20px;

    font-weight: 700;

    flex: 1;

}


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

.container {

    max-width: 900px;

    margin: auto;

    padding: 15px;

}


/*
|--------------------------------------------------------------------------
| LIVE CARD
|--------------------------------------------------------------------------
*/

.live-card {

    background: #fff;

    border-radius: 12px;

    overflow: hidden;

    margin-bottom: 15px;

    box-shadow:
        0 1px 3px rgba(0,0,0,.12);

}


.live-header {

    padding: 15px;

    display: flex;

    align-items: center;

}


.avatar {

    width: 45px;

    height: 45px;

    border-radius: 50%;

    object-fit: cover;

}


.live-user {

    margin-left: 10px;

}


.live-name {

    font-weight: 700;

}


.live-status {

    color: #e41e3f;

    font-size: 13px;

    margin-top: 3px;

}


.live-video {

    position: relative;

    width: 100%;

    background: #000;

    aspect-ratio: 16 / 9;

    overflow: hidden;

}


#localVideo {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform: scaleX(-1);

}


.video-placeholder {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #111,
            #292929
        );

}


.video-placeholder i {

    font-size: 60px;

    margin-bottom: 10px;

}


.video-controls {

    position: absolute;

    bottom: 15px;

    left: 0;

    right: 0;

    display: flex;

    justify-content: center;

    gap: 10px;

}


.control {

    width: 48px;

    height: 48px;

    border: 0;

    border-radius: 50%;

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

    color: #fff;

    font-size: 20px;

}


.control.active {

    background: #1877f2;

}


.end-button {

    background: #e41e3f;

}


.live-info {

    padding: 15px;

}


.live-title {

    font-size: 19px;

    font-weight: 700;

    margin-bottom: 6px;

}


.viewer-count {

    color: #65676b;

    font-size: 14px;

}


.actions {

    padding: 0 15px 15px;

    display: flex;

    gap: 10px;

}


.start-button {

    flex: 1;

    border: 0;

    border-radius: 8px;

    padding: 13px;

    background: #e41e3f;

    color: #fff;

    font-weight: 700;

    font-size: 15px;

}


.secondary-button {

    border: 0;

    border-radius: 8px;

    padding: 13px 18px;

    background: #e4e6eb;

    font-weight: 700;

}


/*
|--------------------------------------------------------------------------
| OTHER LIVE STREAMS
|--------------------------------------------------------------------------
*/

.section-title {

    font-size: 20px;

    font-weight: 700;

    margin:
        25px 0 12px;

}


.live-list {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(250px, 1fr)
        );

    gap: 12px;

}


.live-item {

    background: #fff;

    border-radius: 10px;

    overflow: hidden;

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

}


.live-thumbnail {

    height: 160px;

    background: #111;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}


.live-thumbnail img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.live-badge {

    position: absolute;

    top: 10px;

    left: 10px;

    background: #e41e3f;

    color: #fff;

    padding: 5px 8px;

    border-radius: 5px;

    font-size: 12px;

    font-weight: 700;

}


.live-item-info {

    padding: 12px;

}


.live-item-name {

    font-weight: 700;

}


.live-item-title {

    margin-top: 4px;

    font-size: 14px;

    color: #65676b;

}


.watch-button {

    margin-top: 10px;

    width: 100%;

    border: 0;

    background: #1877f2;

    color: #fff;

    padding: 10px;

    border-radius: 7px;

    font-weight: 700;

}


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

@media (max-width: 600px) {

    .container {

        padding: 0;

    }

    .live-card {

        border-radius: 0;

        margin-bottom: 8px;

    }

    .live-list {

        padding: 10px;

        grid-template-columns: 1fr;

    }

}