/* ================================================================
   SWINGERSBLOG — VIP DARK LUXURY THEME
   Файл: /content/themes/elengine/css/custom.css
   Підключити в _head.tpl перед </head>:
   <link rel="stylesheet" href="{$system['system_url']}/content/themes/{$system['theme']}/css/custom.css">
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Montserrat:wght@300;400;500;600&display=swap');

/* ── CSS VARIABLES OVERRIDE ── */
:root {
    --body-font-family: 'Montserrat', sans-serif;
    --body-bg: #0d0b10;
    --body-bg-color-dark: #0d0b10;
    --body-color: #c8c0d0;
    --body-color-dark: #c8c0d0;
    --main-link: #c9a84c;
    --main-btn: #c9a84c;
    --main-color: #0d0b10;
    --header-background: #100e14;
    --header-background-dark: #100e14;
    --header-color: #e8e0f0;
    --header-bg-color-dark: #e8e0f0;
    --header-search-bg: rgba(255,255,255,0.06);
    --header-search-color: #e8e0f0;
    --card-dark-color: #1a1720;
    --card-dark-hover: #211e28;
}

/* ── GLOBAL BODY ── */
body,
body.night-mode {
    background-color: #0d0b10 !important;
    color: #c8c0d0 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0d0b10; }
::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,0.6); }

/* ── NAVBAR / HEADER ── */
.ele_navbar_top,
body.night-mode .ele_navbar_top {
    background: rgba(13,11,16,0.95) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(201,168,76,0.12) !important;
    box-shadow: 0 1px 20px rgba(0,0,0,0.5) !important;
}

.main-header .logo-wrapper,
body.night-mode .main-header .logo-wrapper {
    color: #c9a84c !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 3px !important;
    font-size: 13px !important;
}

.main-header .search-wrapper .form-control,
body.night-mode .main-header .search-wrapper .form-control {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(201,168,76,0.15) !important;
    border-radius: 2px !important;
    color: #e8e0f0 !important;
}

.main-header .search-wrapper .form-control:focus {
    border-color: rgba(201,168,76,0.4) !important;
    background: rgba(255,255,255,0.08) !important;
}

.ele_hdr_droptoggle,
body.night-mode .ele_hdr_droptoggle {
    color: #c8c0d0 !important;
}

.ele_hdr_droptoggle:hover {
    color: #c9a84c !important;
    background: rgba(201,168,76,0.08) !important;
}

/* ── SIDEBAR ── */
.ele_sidebar_left,
body.night-mode .ele_sidebar_left,
.main-header,
body.night-mode .main-header {
    background: #100e14 !important;
    border-color: rgba(255,255,255,0.05) !important;
}

.ele_sidebar_left .sidebar_innr > a,
.ele_sidebar_left .sidebar_innr > .btn {
    color: #a090b8 !important;
    border-radius: 2px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0.3px !important;
    transition: all 0.2s !important;
}

.ele_sidebar_left .sidebar_innr > a:hover,
.ele_sidebar_left .sidebar_innr > .btn:hover,
.ele_sidebar_left .sidebar_innr > a.active,
.ele_sidebar_left .sidebar_innr > .btn.active {
    color: #c9a84c !important;
    background: rgba(201,168,76,0.07) !important;
}

/* ── CARDS ── */
.card,
body.night-mode .card,
.ele_box,
body.night-mode .ele_box {
    background: #16131c !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
}

.card:hover,
body.night-mode .card:hover {
    border-color: rgba(201,168,76,0.12) !important;
    box-shadow: 0 4px 30px rgba(0,0,0,0.4) !important;
    transition: all 0.3s !important;
}

/* ── BUTTONS ── */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
body.night-mode .btn-primary {
    background: transparent !important;
    border: 1px solid rgba(201,168,76,0.6) !important;
    color: #c9a84c !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    border-radius: 2px !important;
    transition: all 0.3s !important;
}

.btn-primary:hover {
    background: rgba(201,168,76,0.1) !important;
    border-color: #c9a84c !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(201,168,76,0.15) !important;
}

.btn-secondary,
body.night-mode .btn-secondary {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.5) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    border-radius: 2px !important;
}

.btn-secondary:hover {
    border-color: rgba(255,255,255,0.3) !important;
    color: #fff !important;
    background: transparent !important;
}

/* ── LINKS ── */
a { color: #c9a84c !important; transition: color 0.2s !important; }
a:hover { color: #e8c96a !important; }

/* ── INPUTS / FORMS ── */
.ele_field > input,
.ele_field > textarea,
.ele_field > select,
.form-control,
body.night-mode .ele_field > input,
body.night-mode .ele_field > textarea,
body.night-mode .ele_field > select,
body.night-mode .form-control {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.1) !important;
    border-radius: 2px !important;
    color: #e8e0f0 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
}

.ele_field > input:focus,
.ele_field > textarea:focus,
.ele_field > select:focus,
.form-control:focus,
body.night-mode .ele_field > input:focus {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(201,168,76,0.5) !important;
    box-shadow: 0 0 0 2px rgba(201,168,76,0.08) !important;
    color: #fff !important;
}

.ele_field > input + span,
.ele_field > select + span,
.ele_field > textarea + span {
    color: rgba(201,168,76,0.6) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}


/* ── POSTS / FEEDS ── */
.post_wrp,
.feeds_post,
body.night-mode .post_wrp,
body.night-mode .feeds_post {
    background: #16131c !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 4px !important;
}

/* post header */
.post_head .post_time,
body.night-mode .post_head .post_time {
    color: rgba(201,168,76,0.5) !important;
    font-size: 11px !important;
    letter-spacing: 0.5px;
}

/* post actions */
.post_actions .btn,
body.night-mode .post_actions .btn {
    color: #7a6e8e !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
}

.post_actions .btn:hover {
    color: #c9a84c !important;
}

/* ── PUBLISHER (новий пост) ── */
.ele_publisher,
body.night-mode .ele_publisher {
    background: #16131c !important;
    border: 1px solid rgba(201,168,76,0.1) !important;
    border-radius: 4px !important;
}

.ele_publisher_field,
body.night-mode .ele_publisher_field {
    background: rgba(255,255,255,0.03) !important;
    border-radius: 2px !important;
    color: #c8c0d0 !important;
}

/* ── MODALS ── */
.modal-content,
body.night-mode .modal-content {
    background: #16131c !important;
    border: 1px solid rgba(201,168,76,0.15) !important;
    border-radius: 4px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7) !important;
}

.modal-header,
body.night-mode .modal-header {
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 16px 20px !important;
}

.modal-title,
body.night-mode .modal-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: #e8e0f0 !important;
    letter-spacing: 0.5px;
}

.modal-footer,
body.night-mode .modal-footer {
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}

.close, .btn-close,
body.night-mode .close {
    color: #7a6e8e !important;
    opacity: 1 !important;
}
.close:hover { color: #c9a84c !important; }

/* ── NOTIFICATIONS BADGE ── */
.ele_navbar_top_right > .dropdown .counter {
    background: #c9a84c !important;
    color: #0d0b10 !important;
    font-weight: 700 !important;
    font-size: 10px !important;
}

/* ── TABS / NAV ── */
.nav-tabs,
body.night-mode .nav-tabs {
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.nav-tabs .nav-link,
body.night-mode .nav-tabs .nav-link {
    color: #7a6e8e !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    transition: all 0.2s !important;
}

.nav-tabs .nav-link:hover {
    color: #c9a84c !important;
    border-bottom-color: rgba(201,168,76,0.3) !important;
}

.nav-tabs .nav-link.active,
body.night-mode .nav-tabs .nav-link.active {
    color: #c9a84c !important;
    background: transparent !important;
    border-bottom-color: #c9a84c !important;
}

/* ── ALERTS ── */
.alert-danger,
body.night-mode .alert-danger {
    background: rgba(180,30,30,0.12) !important;
    border: 1px solid rgba(180,30,30,0.25) !important;
    color: #e88 !important;
    border-radius: 2px !important;
}

.alert-success,
body.night-mode .alert-success {
    background: rgba(30,160,80,0.12) !important;
    border: 1px solid rgba(30,160,80,0.25) !important;
    color: #6db !important;
    border-radius: 2px !important;
}

.alert-warning,
body.night-mode .alert-warning {
    background: rgba(201,168,76,0.1) !important;
    border: 1px solid rgba(201,168,76,0.25) !important;
    color: #c9a84c !important;
    border-radius: 2px !important;
}

/* ── BADGES ── */
.badge-primary,
body.night-mode .badge-primary {
    background: rgba(201,168,76,0.15) !important;
    color: #c9a84c !important;
    border: 1px solid rgba(201,168,76,0.3) !important;
    border-radius: 2px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
}

/* ── TOOLTIPS ── */
.tooltip-inner {
    background: #1a1720 !important;
    border: 1px solid rgba(201,168,76,0.2) !important;
    color: #e8e0f0 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    border-radius: 2px !important;
}

/* ── PROFILES ── */
.user_name,
body.night-mode .user_name {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    color: #e8e0f0 !important;
}

.user_name:hover { color: #c9a84c !important; }

/* ── HEADINGS ── */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 400 !important;
    color: #e8e0f0 !important;
    letter-spacing: 0.3px !important;
}

.ele_page_hdng,
body.night-mode .ele_page_hdng {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    color: rgba(201,168,76,0.7) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

/* ── DIVIDERS / BORDERS ── */
hr,
body.night-mode hr {
    border-color: rgba(255,255,255,0.06) !important;
}

/* ── BOTTOM NAV MOBILE ── */
@media (max-width: 768px) {
    .ele_navbar_top_right {
        background: rgba(13,11,16,0.97) !important;
        border-top: 1px solid rgba(201,168,76,0.12) !important;
        backdrop-filter: blur(12px) !important;
    }

    .ele_navbar_top_right .nav-link {
        color: #7a6e8e !important;
    }

    .ele_navbar_top_right .nav-link.active,
    .ele_navbar_top_right .nav-link:hover {
        color: #c9a84c !important;
    }
}

/* ── PREMIUM BLOCK ── */
.ele_prem,
body.night-mode .ele_prem {
    background: linear-gradient(135deg, rgba(201,168,76,0.08), rgba(201,168,76,0.03)) !important;
    border: 1px solid rgba(201,168,76,0.2) !important;
    color: #c9a84c !important;
    border-radius: 4px !important;
}

/* ── СТРІЧКА ФОТО / GRID ── */
.photos_grid img,
.album_photo img {
    border-radius: 2px !important;
    transition: opacity 0.3s, transform 0.3s !important;
}

.photos_grid img:hover,
.album_photo img:hover {
    opacity: 0.85 !important;
    transform: scale(1.02) !important;
}

/* ── CUSTOM CHECKBOX ── */
.custom-control-label::before,
body.night-mode .custom-control-label::before {
    background-color: rgba(255,255,255,0.05) !important;
    border-color: rgba(201,168,76,0.3) !important;
    border-radius: 1px !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #c9a84c !important;
    border-color: #c9a84c !important;
}

.custom-control-label,
body.night-mode .custom-control-label {
    color: #a090b8 !important;
    font-size: 12px !important;
    letter-spacing: 0.2px !important;
}

/* ── FOOTER ── */
.footer,
body.night-mode .footer {
    background: #0a0810 !important;
    border-top: 1px solid rgba(201,168,76,0.1) !important;
    color: #5a5268 !important;
    font-size: 12px !important;
    font-family: 'Montserrat', sans-serif !important;
}

.footer a { color: rgba(201,168,76,0.5) !important; }
.footer a:hover { color: #c9a84c !important; }
.offcanvas-backdrop {
    z-index: 9998 !important;
    background: rgba(0,0,0,0.6) !important;
}