body {
    font-family: 'Poppins', sans-serif;
    min-height: 100%!important;
}

:root {
    --brand-primary: #E50914;
    /* example */
    --brand-accent: #FF4D4D;
    --brand-dark: #121212;
}

.text-orange {
    color: var(--brand-primary);
}


/* Top Navbar Menu */

.navbar {
    background-color: var(--brand-dark);
}

.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-primary:hover {
    background-color: var(--brand-accent);
}

.navbar{
    padding:1rem;
    font-size: 1.05rem;
}

.navbar-brand img{
    max-width: 180px;
    max-height: 60px;
}

.error-container{
    min-width: 350px;
}

.button-search {
    color: #DDD;
    background: none;
    position: absolute;
    right: 0;
    cursor: pointer;
    outline: none;
    border: none;
}

.home-user-avatar{
    width: 32px;
    height: 32px;
    margin-left:0.5rem;
}

/* Login Register pages  */
.login,
.image {
    min-height: 100vh
}

.bg-image {
    background-size: cover;
    background-position: center center
}

.brand-logo{
    width: 200px;
}

.rounded-lg{
    border-radius: 0.4rem!important;
}

.hidden{
    display: none!important;
}

/* Dropzone preview boxes + other general fixes */
.audio-preview-item {
    padding-right: 36px;
}

.video-preview-item{
    border-radius: 20px;
}

.video-preview-item .video-preview {
    border-radius: 20px;
    overflow: hidden;
    width: 240px;
    height: 240px;
    position: relative;
    display: block;
    z-index: 10;
    background: linear-gradient(to bottom, #eee, #ddd);
}

.dropzone-previews.dropzone {
    background: none!important;
}

.sticky {
    position: sticky;
    top: 1.5rem;
}

.sticky-sm{
    position: sticky;
    top:1rem;
}

.min-h-75{
    min-height: 75%;
}

.sticky-profile-widgets {
    position: sticky;
    top: 1rem;
}

.sticky-widgets {
    position: sticky!important;
    padding-top: .5rem!important;
}

.pointer-cursor{
    cursor:pointer;
}

.avatar-placeholder i{
    font-size: 2.8rem;
}

.avatar-placeholder i:hover{
}

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.side-menu .icon-wrapper{
    width: 2.6rem;
}
.side-menu .nav{
    flex-wrap:nowrap;
}

.side-menu .nav-item i{
    font-size: 2.0rem!important;
}

.side-menu .user-avatar, .sidebar .user-avatar{
    width: 50px;
    height: 50px;
}

/* Toasts */
.toast-container {
    position: fixed;
    z-index: 1055;
    margin: .5rem!important;
}

.top-right {
    top: 0;
    right: 0
}

.top-left {
    top: 0;
    left: 0
}

.top-center {
    transform: translateX(-50%);
    top: 0;
    left: 50%
}

.bottom-right {
    right: 0;
    bottom: 0
}

.bottom-left {
    left: 0;
    bottom: 0
}

.bottom-center {
    transform: translateX(-50%);
    bottom: 0;
    left: 50%
}

.toast-container>.toast {
    min-width: 200px;
    max-width: 300px;
}

.toast .toast-indicator{
    width:20px;
    height:20px;
}

/* Feed component */
.half-bg {
    background-color: rgba(0,0,0,.45);
}

.suggestion-box{
    background-color: #FFF!important;
}

.suggestion-box .avatar{
    width: 90px;
    height: 90px;
    border: 2px solid #fefefe;
}

.post-box .avatar{
    width:48px;
    height: 48px;
}

.post-box .post-content-data p{
    margin-bottom: 0px;
}

.post-details .dropdown .dropdown-toggle:after,.post-details .dropdown .dropdown-toggle:before{
    display: none;
}

.post-box .post-count-details{
    font-size: 15px;
}

.dropdown .dropdown-toggle:after, .dropdown .dropdown-toggle:before{
    display: none;
}

.post-box .post-comments .form-control.is-invalid, .was-validated .form-control:invalid {
    background-image: none!important;
}

.suggestions-header i{
    cursor: pointer;
}

.dropdown:not(.dropdown-hover) .dropdown-menu {
    margin-top: 0px!important;
}

.pswp_video{
    position: relative!important;
}
.pswp_audio{
    position: relative!important;
    width:75%!important;
    height:100px!important;
}

.pswp--zoom-allowed .pswp__img {
    cursor: default !important
}


/* Menu */
.open-menu{
    text-decoration: none!important;
}

.dropleft .dropdown-menu {
    top: 0!important;
    right: 0%!important;
    left: auto!important;
    margin-top: 0!important;
    margin-right: 0!important;
}

.dropright .dropdown-menu {
    top: 0!important;
    right: auto!important;
    left: 0%!important;
    margin-top: 0!important;
    margin-left: 0!important;
}


/* Icons wrapper for backend SVGs includes */
.ion-icon-wrapper{
    display: inline-block;
    width: 1em;
    height: 1em;
    contain: strict;
    fill: currentcolor;
    box-sizing: content-box !important;
}

.input-group-prepend .ion-icon-wrapper{
    width: 20px!important;
    height: 20px!important;
}

.ion-icon-inner, .ion-icon-inner svg{
    display: block;
    height: 100%;
    width: 100%;
}

.icon-large{
    font-size: 32px;
}

.icon-xlarge{
    font-size: 50px;
}

.icon-medium{
    font-size: 24px;
}

.icon-small{
    font-size: 18px;
}

.icon-xsmall{
    font-size: 11px;
}

.social-media-icon{
    width: 1.4rem;
    height: 1.4rem
}

/* Global nav override */
.page-item, .page-link{
    margin-left:4px;
    width:34px;
    height:34px;
    border-radius: 50%!important;
    text-align: center;
}

.btn-rounded-icon{
    width: 45px!important;
    height: 45px!important;
    padding:0;
    transition: 0.3s;
    border: none!important;
    border-radius: 50%;
    font-size: 20px;
    margin:0;
}

#login-dialog .card-wrapper{
    height: 100%;
}

/* User cards */
.suggestion-header-bg {
    background-color: #50505047;
    background-position: center center!important;
    background-size: cover!important;
    height:128px!important;
    border-radius: .25rem!important;
}

.creator-body{
    margin-top:-50px;
}

.creator-body .avatar{
    width: 100px;
    height: 100px;
}

.suggestion-card-btn{
    width: 30px;
    height: 30px;
}

/*  */

.installer-bg{
    background-color: #f8f9fa;
}


/* */

.checkout-dialog .rounded-circle.user-avatar{
    width:50px;
    height:50px;
}

/*  */

footer .copyRightInfo .d-flex.flex-row.nav{
    margin-left:-1rem;
}

footer .copyRightInfo .nav-link:nth-child(1){
    padding-left:0px!important;
}

footer .text-lg{
    font-size: 1.1rem!important;
}
footer .ion-icon-wrapper{
    font-size: 1.25rem!important;
}

footer .brand-logo{
    max-width: 180px;
    max-height: 60px;
}

/* Profile / Posts widget */
.recent-media .card-body img{
    width:75px!important;
    height:75px!important;
}

.dropdown:not(.nav-item) .dropdown-menu:before {
    content: none!important;
}


.grayscale {
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(95%); /* Chrome 19+ & Safari 6+ */
}

.grayscale:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
}

.contact-illustration{
    width: 450px;
}

.posts-loading-indicator .spinner-border{
    width:2rem;
    height: 2rem;
}

.page-content-wrapper p{
    margin:0px;
}

.page-content-wrapper h4{
    margin-bottom:1rem!important;
}

.min-vh-65{
    min-height: 65vh;
}

.page-link{
    display: flex;
    justify-content: center;
    align-items: center;
}

.w-16{
    width: 16px;
    height: 16px;
}

.w-24{
    width:24px;
    height:24px;
}

.w-32{
    width:32px;
    height:32px;
}

.w-40{
    width:40px;
    height:40px;
}

.text-bold-600{
    font-weight: 600;
}

.blob {
    background: black;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
    margin: 8px;
    height: 6px;
    width: 6px;
    transform: scale(1);
    animation: pulse-black 2s infinite;
}

@keyframes pulse-black {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

.blob.red {
    background: rgba(234, 6, 5, 1);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(234, 6, 5, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(234, 6, 5, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(234, 6, 5, 0);
    }
}


.text-orange{
    color:#FD7E14;
}


/* Streams CSS */
.stream-cover, .stream-cover-public{
    max-height: 40px;
    max-width: 150px;
    height:40px;
    width: 80px
}

.stream-chat-no-message{
    height: 300px;
}

.grecaptcha-badge{
    z-index: 100;
}

.captcha-field .text-danger{
    font-size: .875em;
}

.blurred{
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
}

/* Laravel-Bootstrap mobile navigation hack for larger pagination numbers */
@media screen and ( max-width: 400px ){
    li.page-item {

        display: none;
    }
    .page-item:first-child,
    .page-item:nth-child( 2 ),
    .page-item:nth-last-child( 2 ),
    .page-item:last-child,
    .page-item.active,
    .page-item.disabled {
        display: block;
    }
}

.max-width-150{
    max-width: 150px;
}

.n-mt-2{
    margin-top:-2rem;
}

.widgets-footer-link{
    font-size: 15px;
}

.widgets-footer .widgets-footer-link:not(:last-child):after {
    content: "\2022";
    margin-left: 15px;
    font-size: 12px;
    display: inline-flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    color: #8a96a3;
}

.swiper-pagination-wrapper{
    height: 18px;
}

.feed-widgets .swiper-pagination{
    position: relative;
}


.sticky-info-bar {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
    z-index: 1030; /* Ensure it is above other content */
}

.global-announcement-banner .content p{
    margin-bottom: 0px!important;
}

.global-announcement-banner .content{
    color: #fff;
}

/*.no-long-press {*/
/*    user-select: none;*/
/*    -webkit-user-select: none; !* Safari *!*/
/*}*/

.no-long-press {
    /* Disable text selection */
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;     /* IE 10+ */

    /* Disable image saving and callout menu on iOS */
    -webkit-touch-callout: none; /* Disable callout menu */
    -webkit-user-drag: none;     /* Disable image dragging */

    /* Allow touch actions like swipe and scroll */
    touch-action: manipulation; /* Prevent double-tap zoom, allow pan and pinch-zoom */
}

.fs-point-85{
   font-size:.83rem;
}

.bottom-0{
    bottom:0;
}
.poll-bar {
    width: 0;
    transition: width 0.8s ease-in-out;
    left: 1%;
    right: 0%;
    top: 10%;
    height: 80%;
    width: 0%;
    border-radius: .25rem
}

.fs-point-75{
    font-size:.75rem;
}


/* Fanspinoy branding overrides */
.navbar {
    background-color: #FD7E14 !important;
    color: #fff !important;
}

.btn-primary {
    background-color: #FD7E14 !important;
    border-color: #FD7E14 !important;
}

a,
a:hover {
    color: #FD7E14 !important;
}


/* FansPinoy Navbar Branding */
.navbar,
.navbar.navbar-dark,
.navbar.navbar-light,
.navbar.bg-dark,
.navbar.bg-light {
    background-color: #E50914 !important;
    /* FansPinoy red */
    color: #ffffff !important;
}

.navbar a,
.navbar a:hover,
.navbar a:focus {
    color: #ffffff !important;
}

/* Navbar brand/logo */
.navbar .navbar-brand img {
    max-width: 200px !important;
    max-height: 60px !important;
}


/* ==============================
   FansPinoy Branding Overrides
   ============================== */

/* --- Navbar/Header --- */
.navbar,
.navbar.navbar-dark,
.navbar.navbar-light,
.navbar.bg-dark,
.navbar.bg-light {
    background-color: #E50914 !important;
    /* FansPinoy red */
    color: #ffffff !important;
}

.navbar a,
.navbar a:hover,
.navbar a:focus {
    color: #ffffff !important;
}

.navbar .navbar-brand img {
    max-width: 200px !important;
    max-height: 60px !important;
}

/* --- Buttons --- */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #E50914 !important;
    border-color: #E50914 !important;
    color: #ffffff !important;
}

.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: #f5f5f5 !important;
    border-color: #cccccc !important;
    color: #333333 !important;
}

/* --- Links --- */
a,
a:hover,
a:focus {
    color: #E50914 !important;
    text-decoration: none !important;
}

/* --- Footer --- */
footer,
footer .container,
footer .row {
    background-color: #1d1d1d !important;
    color: #ffffff !important;
}

footer a,
footer a:hover,
footer a:focus {
    color: #E50914 !important;
}

/* --- Cards, Widgets, and Containers --- */
.card,
.card-body,
.widget,
.widget-body {
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
}

.card-title,
.widget-title,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #E50914 !important;
}

/* --- Forms & Inputs --- */
.form-control,
input,
textarea,
select {
    border-color: #ddd !important;
    color: #333 !important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: #E50914 !important;
    box-shadow: 0 0 0 0.2rem rgba(229, 9, 20, 0.25) !important;
}

/* --- Alerts / Notifications --- */
.alert-primary {
    background-color: #E50914 !important;
    border-color: #E50914 !important;
    color: #ffffff !important;
}

/* --- Sidebar & Menu --- */
.side-menu,
.sidebar {
    background-color: #004197 !important;
}

.side-menu .nav-link,
.sidebar .nav-link {
    color: #ffffff !important;
}

.side-menu .nav-link:hover,
.sidebar .nav-link:hover {
    color: #E50914 !important;
}

/* --- Tables --- */
.table thead th {
    background-color: #E50914 !important;
    color: #ffffff !important;
}

.table tbody tr td {
    color: #333 !important;
}

/* --- Misc Elements --- */
.text-orange,
.text-warning,
.highlight {
    color: #E50914 !important;
}

.btn-rounded-icon {
    background-color: #E50914 !important;
    border-color: #E50914 !important;
    color: #fff !important;
}

/* --- Fonts --- */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
li,
td,
th {
    font-family: 'Open Sans', sans-serif !important;
}


/* ==============================
   FansPinoy Advanced Overrides
   ============================== */

/* --- Navbar Hover & Active --- */
.navbar .nav-link:hover,
.navbar .nav-item.active .nav-link,
.navbar .nav-item.show .nav-link {
    color: #FFD700 !important;
    /* Highlight on hover/active */
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5) !important;
}

/* --- Button Hover / Focus Effects --- */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #B20710 !important;
    /* Darker FansPinoy red */
    border-color: #B20710 !important;
    transform: scale(1.03);
    transition: all 0.2s ease-in-out;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #eaeaea !important;
    color: #E50914 !important;
}

/* --- Links Hover --- */
a:hover,
a:focus {
    color: #FFD700 !important;
    /* Hover highlight */
    text-decoration: underline !important;
}

/* --- Footer Hover --- */
footer a:hover,
footer a:focus {
    color: #FFD700 !important;
}

/* --- Card / Widget Shadows --- */
.card,
.widget,
.widget-body {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transition: box-shadow 0.3s ease-in-out !important;
}

.card:hover,
.widget:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

/* --- Sidebar Hover & Active --- */
.side-menu .nav-link:hover,
.sidebar .nav-link:hover {
    background-color: #E50914 !important;
    color: #fff !important;
    border-radius: 0.25rem !important;
}

.side-menu .nav-item.active .nav-link,
.sidebar .nav-item.active .nav-link {
    background-color: #B20710 !important;
    color: #fff !important;
}

/* --- Social Media Icons --- */
.social-media-icon,
.social-icon {
    filter: brightness(0) invert(0.9) !important;
    /* White icons */
    transition: filter 0.2s ease-in-out !important;
}

.social-media-icon:hover,
.social-icon:hover {
    filter: brightness(0) invert(0.2) !important;
    /* Gold on hover */
}

/* --- Inputs Focus Effects --- */
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: #FFD700 !important;
    box-shadow: 0 0 5px rgba(229, 9, 20, 0.4) !important;
}

/* --- Small Buttons / Rounded Icons --- */
.btn-rounded-icon:hover {
    background-color: #B20710 !important;
    transform: scale(1.1);
}

/* --- Minor Elements --- */
.text-orange,
.text-warning,
.highlight,
.badge-warning {
    color: #E50914 !important;
    background-color: #fff !important;
}

/* --- Card Titles / Section Titles --- */
.card-title,
.widget-title,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700 !important;
    text-transform: uppercase;
}

/* --- Subtle Gradients for Highlight Sections --- */
.bg-gradient-fanspinoy {
    background: linear-gradient(90deg, #E50914 0%, #B20710 100%) !important;
    color: #fff !important;
}

/* --- Add smooth transition to hoverable items --- */
.nav-link,
.btn,
.card,
.widget,
a {
    transition: all 0.2s ease-in-out !important;
}

/* --- Optional: Body Background Accent --- */
body {
    background-color: #fefefe !important;
}


/* --- Sidebar / Side-menu links --- */
.sidebar .nav-link,
.side-menu .nav-link {
    color: #ffffff !important;
    /* default white text */
}

.sidebar .nav-link:hover,
.side-menu .nav-link:hover {
    color: #FFD700 !important;
    /* gold highlight on hover */
    background-color: rgba(229, 9, 20, 0.1) !important;
    /* subtle red hover background */
    border-radius: 0.25rem !important;
}

/* Active / selected sidebar link */
.sidebar .nav-item.active .nav-link,
.side-menu .nav-item.active .nav-link {
    color: #ffffff !important;
    /* keep text white */
    background-color: #B20710 !important;
    /* darker FansPinoy red */
    font-weight: 600 !important;
    border-radius: 0.25rem !important;
}


/* Sidebar / Side-menu link text overrides */
.side-menu .nav .nav-item .nav-link,
.sidebar .nav .nav-item .nav-link {
    color: #ffffff !important;
    /* force white */
    font-weight: 500 !important;
    /* slightly bolder */
}

/* Sidebar link hover */
.side-menu .nav .nav-item .nav-link:hover,
.sidebar .nav .nav-item .nav-link:hover {
    color: #FFD700 !important;
    /* Fanspinoy gold on hover */
    background-color: rgba(229, 9, 20, 0.1) !important;
    border-radius: 0.25rem !important;
}

/* Active / selected sidebar link */
.side-menu .nav .nav-item.active .nav-link,
.sidebar .nav .nav-item.active .nav-link {
    color: #ffffff !important;
    /* keep text white */
    background-color: #B20710 !important;
    /* darker Fanspinoy red */
    font-weight: 600 !important;
    border-radius: 0.25rem !important;
}


/* Sidebar active link fix */
.side-menu .nav .nav-item.active,
.sidebar .nav .nav-item.active {
    background-color: #B20710 !important;
    /* darker Fanspinoy red */
    border-radius: 0.25rem !important;
}

.side-menu .nav .nav-item.active .nav-link,
.sidebar .nav .nav-item.active .nav-link {
    color: #ffffff !important;
    /* keep text white */
    font-weight: 600 !important;
}

/* --- Sidebar / Side-menu Active Link --- */
.sidebar .nav .nav-item.active,
.sidebar .nav .nav-item.active .nav-link,
.side-menu .nav .nav-item.active,
.side-menu .nav .nav-item.active .nav-link,
.side-menu .nav .nav-link.active,
.sidebar .nav .nav-link.active {
    background-color: #B20710 !important;
    /* Fanspinoy dark red */
    color: #ffffff !important;
    /* text stays white */
    font-weight: 600 !important;
    border-radius: 0.25rem !important;
}

/* --- Sidebar / Side-menu Username --- */
.sidebar .user-name,
.side-menu .user-name,
.sidebar .user-info .username,
.side-menu .user-info .username {
    color: #ffffff !important;
    /* white text */
    font-weight: 700 !important;
    /* bold */
    font-size: 1.1rem !important;
    /* slightly larger */
    margin-left: 0.5rem !important;
    /* small spacing from avatar */
    line-height: 1.3 !important;
    /* nicer vertical alignment */
}


/* Sidebar top user name */
.side-menu .user-info,
.sidebar .user-info,
.side-menu .user-info .username,
.sidebar .user-info .username,
.side-menu .user-info .nav-link,
.sidebar .user-info .nav-link {
    color: #ffffff !important;
    /* white text */
    font-weight: 700 !important;
    /* bold */
    font-size: 1.2rem !important;
    /* slightly larger */
    line-height: 1.3 !important;
}

/* Sidebar username override */
.ml-2.d-flex.flex-column.overflow-hidden .text-bold.text-dark {
    color: #ffffff !important;
    /* white text */
    font-weight: 700 !important;
    /* bold */
    font-size: 1.2rem !important;
    /* slightly larger */
}

/* Sidebar secondary info under username */
.ml-2.d-flex.flex-column.overflow-hidden>.text-muted {
    color: #FFD700 !important;
    /* Fanspinoy gold */
    font-weight: 500 !important;
    /* medium weight */
    font-size: 1rem !important;
    /* slightly smaller than username */
    line-height: 1.2 !important;
    /* tighter spacing */
}


/* Profile form inputs override */
.settings-content .form-control {
    background-color: #f2f2f2 !important;
    /* light gray background */
    color: #000000 !important;
    /* black text */
    border: 1px solid #ccc !important;
    /* optional: light border */
}

/* Optional: inputs on focus */
.settings-content .form-control:focus {
    background-color: #ffffff !important;
    /* white when typing */
    color: #000000 !important;
    border-color: #FD7E14 !important;
    /* Fanspinoy orange highlight */
    box-shadow: 0 0 0 0.2rem rgba(253, 126, 20, 0.25);
    /* subtle glow */
}


/* Avatar upload/delete icons in profile form */
.settings-content .avatar-holder .ion-icon-inner svg {
    width: 20px;
    /* slightly larger */
    height: 20px;
    /* slightly larger */
    transition: fill 0.3s ease, transform 0.3s ease;
    /* smooth hover transition */
}

.settings-content .avatar-holder .ion-icon-inner svg path {
    fill: #FF0000 !important;
    /* red by default */
}

/* Hover effect for these icons */
.settings-content .avatar-holder .ion-icon-inner:hover svg path {
    fill: #0056FF !important;
    /* Fanspinoy blue on hover */
    transform: scale(1.1);
    /* slight grow effect */
}

/* Adjust container for avatar and cover icons */
.settings-content .avatar-holder .card-img-overlay,
.settings-content .profile-cover-bg .card-img-overlay {
    width: 100%;
    /* full width of the image */
    height: 100%;
    /* full height of the image */
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    /* allow only the icons to be clickable */
}

.settings-content .avatar-holder .actions-holder,
.settings-content .profile-cover-bg .actions-holder {
    display: flex !important;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    /* allow clicks */
}

/* Icons themselves */
.settings-content .avatar-holder .ion-icon-inner svg,
.settings-content .profile-cover-bg .ion-icon-inner svg {
    width: 20px;
    height: 20px;
    transition: fill 0.3s ease, transform 0.3s ease;
}

.settings-content .avatar-holder .ion-icon-inner svg path,
.settings-content .profile-cover-bg .ion-icon-inner svg path {
    fill: #FF0000 !important;
    /* default red */
}

/* Hover effect */
.settings-content .avatar-holder .ion-icon-inner:hover svg path,
.settings-content .profile-cover-bg .ion-icon-inner:hover svg path {
    fill: #0056FF !important;
    /* Fanspinoy blue */
    transform: scale(1.1);
}

/* Profile description text */
.profile-description-holder .description-content {
    color: #0056FF !important;
    /* Fanspinoy blue */
    font-weight: 500;
    /* slightly stronger */
}

.profile-description-holder .description-content {
    line-height: 1.6;
    font-size: 14px;
}

/* Profile meta row: date + location */
.profile-description-holder+.d-flex.flex-column.flex-md-row {
    color: #000000 !important;
    font-weight: 700;
}

/* Ensure inner text inherits properly */
.profile-description-holder+.d-flex.flex-column.flex-md-row .text-truncate {
    color: #000000 !important;
    font-weight: 700;
}

/* Edit Profile button */
a.p-pill.p-pill-text[href*="/my/settings"] {
    color: #0056FF !important;
    /* Fanspinoy blue */
    font-weight: 600;
}

/* Icon inside Edit Profile button */
a.p-pill.p-pill-text[href*="/my/settings"] .ion-icon-wrapper {
    color: #0056FF !important;
}

a.p-pill.p-pill-text[href*="/my/settings"]:hover {
    color: #003FCC !important;
    /* slightly darker blue */
    text-decoration: none;
}

a.p-pill.p-pill-text[href*="/my/settings"] {
    border: 1px solid rgba(0, 86, 255, 0.35);
    border-radius: 999px;
    padding: 6px 12px;
}

/* Share / Copy profile link button */
span.p-pill.pointer-cursor[onclick="shareOrCopyLink()"] {
    color: #E53935 !important;
    /* strong red */
}

span.p-pill.pointer-cursor[onclick="shareOrCopyLink()"]:hover {
    color: #C62828 !important;
    /* darker red */
}

span.p-pill.pointer-cursor[onclick="shareOrCopyLink()"] {
    border: 1px solid rgba(229, 57, 53, 0.4);
    border-radius: 50%;
}

/* Profile / Settings form labels */
.settings-content .form-group>label {
    color: #E53935 !important;
    /* brand red */
    font-weight: 600;
}

.settings-content .form-group:focus-within>label {
    color: #C62828 !important;
}

/* Catch labels not wrapped in .form-group (ex: Bio) */
.settings-content label {
    color: #E53935 !important;
    /* brand red */
    font-weight: 600;
}

/* Profile cover container border */
.profile-cover-bg {
    border: 2px solid #0B5ED7;
    /* Fanspinoy blue */
    border-radius: 6px;
    /* optional, looks cleaner */
    overflow: hidden;
    /* keeps image corners clean */
}


/* Dropdown 3-dot menu (icon-only button) */
.dropdown.dropleft>a.btn {
    color: #dc2626 !important;
    /* red */
    border-color: #dc2626 !important;
    /* outline matches */
}

/* Force SVG icon to inherit red */
.dropdown.dropleft>a.btn svg {
    stroke: currentColor !important;
    color: #dc2626 !important;
}


/* Dropdown menu container */
.dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #dc2626 !important;
    /* red border */
}

/* Dropdown items (text) */
.dropdown-menu .dropdown-item {
    color: #dc2626 !important;
    font-weight: 500;
}

/* Hover / focus state */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: rgba(220, 38, 38, 0.1) !important;
    color: #dc2626 !important;
}

/* Active (clicked) state */
.dropdown-menu .dropdown-item:active {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}


.dropdown-menu {
    border-radius: 6px;
}

.dropdown-menu {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Target that specific link and make it red */
.text-bold a {
    color: #dc2626 !important;
    /* red */
}

/* Make this specific @Flutterworks link gold */
.text-white.text-hover {
    color: #facc15 !important;
    /* yellow/gold */
}

/* Base color gold/yellow */
.text-white.text-hover {
    color: #facc15 !important;
    /* gold */
}

/* Hover color blue */
.text-white.text-hover:hover {
    color: #3b82f6 !important;
    /* blue */
}

/* Default all text in footer-actions to black */
.footer-actions,
.footer-actions * {
    color: #000 !important;
    /* black text */
}

/* Keep the comments bold gold/yellow */
.footer-actions .post-comments-label,
.footer-actions .post-comments-label-count {
    color: #facc15 !important;
    /* gold/yellow */
    font-weight: bold;
}

/* Heart (like) icon in red */
.footer-actions .react-button .ion-icon-inner svg path {
    stroke: #dc2626 !important;
    /* red */
}

/* Make comment icons gold/yellow */
.footer-actions .post-comments-label-count~.ion-icon-inner svg path,
.footer-actions .post-comments-label-count~.ion-icon-inner svg circle {
    stroke: #facc15 !important;
    /* gold/yellow for comments */
}

/* Make all other icons black by default */
.footer-actions .ion-icon-inner svg path:not(.react-button svg path),
.footer-actions .ion-icon-inner svg circle {
    stroke: #000 !important;
    /* black icons */
}

/* Dropzone container background */
#dropzone-uploader {
    background-color: #f3f4f6 !important;
    /* light gray */
    color: #000 !important;
    /* black input text */
}

/* Dropzone “Drop files here” button */
#dropzone-uploader .dz-default.dz-message .dz-button {
    color: #000 !important;
    /* button text black */
    background-color: #e5e7eb !important;
    /* slightly darker gray for button */
    border: 1px solid #d1d5db !important;
    /* subtle border */
}


/* Make all post message text black by default */
div.post-content-data p {
    color: #000 !important;
    /* black text */
}

/* All text inputs (search boxes, textareas) */
input.form-control,
textarea.form-control {
    background-color: #ffffff !important;
    /* White background */
    color: #000000 !important;
    /* Black text */
    border-color: #ccc !important;
    /* Light gray border */
}

/* Placeholder text */
input.form-control::placeholder,
textarea.form-control::placeholder {
    color: #888888 !important;
    /* Subtle gray placeholder */
}

/* Buttons inside input groups or anywhere */
.input-group-append .btn,
button.text-hover,
a.text-hover {
    background-color: #ffffff !important;
    /* White background */
    color: #000000 !important;
    /* Black text */
    border-color: #ccc !important;
    /* Light gray border */
}

/* Hover effect: light gray background and blue text */
input.form-control:hover,
textarea.form-control:hover,
.input-group-append .btn:hover,
button.text-hover:hover,
a.text-hover:hover {
    background-color: #f0f0f0 !important;
    /* Light gray background on hover */
    color: #007bff !important;
    /* Blue text on hover */
    border-color: #007bff !important;
    /* Optional: highlight border */
}

/* Active/focus state: consistent blue outline */
input.form-control:focus,
textarea.form-control:focus,
.input-group-append .btn:focus,
button.text-hover:focus,
a.text-hover:focus {
    outline: 2px solid #007bff !important;
    /* Blue focus outline */
    box-shadow: none !important;
    /* Remove framework shadow if needed */
}

/* File upload/search button span */
span.h-pill.file-upload-button {
    background-color: #ffffff !important;
    /* White background */
    color: #000000 !important;
    /* Black icon/text */
    cursor: pointer;
    /* Ensure pointer on hover */
    border: 1px solid #ccc !important;
    /* Optional: light gray border */
}

/* Hover state */
span.h-pill.file-upload-button:hover {
    background-color: #f0f0f0 !important;
    /* Light gray hover */
    color: #007bff !important;
    /* Blue icon/text on hover */
}

/* Icon inside the button */
span.h-pill.file-upload-button svg {
    fill: currentColor;
    /* Ensure icon uses text color */
}

.suggestions-content p.text-center {
    color: #000000 !important;
    /* force black text */
}

/* Target all Ionicons inside your h-pill buttons */
.h-pill .ion-icon-inner svg {
    color: #000000;
    /* normal black */
    stroke: #000000;
    /* ensures outlined icons are black */
    fill: #000000;
    /* ensures filled icons are black */
    transition: color 0.3s ease, stroke 0.3s ease, fill 0.3s ease;
}

/* Hover effect */
.h-pill:hover .ion-icon-inner svg {
    color: #ff0000;
    /* red on hover */
    stroke: #ff0000;
    fill: #ff0000;
}

/* Force Ionicons inside h-pill buttons to be red */
.h-pill .ion-icon,
.h-pill .ion-icon path,
.h-pill .ion-icon svg {
    stroke: #ff0000 !important;
    /* red outlines */
    fill: #ff0000 !important;
    /* red fill if any */
    stroke-width: 48 !important;
    /* bolder lines */
}

/* Optional hover effect */
.h-pill:hover .ion-icon,
.h-pill:hover .ion-icon path,
.h-pill:hover .ion-icon svg {
    stroke: #cc0000 !important;
    /* darker red on hover */
    fill: #cc0000 !important;
}

/* Make the parent wrapper red */
.h-pill,
.h-pill .ion-icon-wrapper,
.h-pill .ion-icon-inner {
    color: #ff0000 !important;
    /* this sets currentColor to red */
}

/* Make paths bolder */
.h-pill .ion-icon path {
    stroke-width: 48 !important;
    /* bold lines */
}

/* Optional hover: darker red on hover */
.h-pill:hover,
.h-pill:hover .ion-icon-wrapper,
.h-pill:hover .ion-icon-inner {
    color: #cc0000 !important;
    /* darker red */
}

/* Footer link hover color */
.widgets-footer a.widgets-footer-link {
    color: #ffffff !important;
    /* default color: white */
    transition: color 0.3s ease;
}

.widgets-footer a.widgets-footer-link:hover {
    color: #ff0000 !important;
    /* hover color: red */
}

/* Footer links default color black */
.widgets-footer a.widgets-footer-link {
    color: #000000 !important;
    /* normal black text */
    transition: color 0.3s ease;
}

/* Hover color red */
.widgets-footer a.widgets-footer-link:hover {
    color: #ff0000 !important;
    /* red on hover */
}

/* ===== Unified Black-and-Red Link Styling ===== */

/* Default links */
a {
    color: #000000 !important;
    /* black text */
    text-decoration: none;
    /* optional: remove underline */
    transition: color 0.3s ease, font-weight 0.3s ease;
}

/* Hover state */
a:hover {
    color: #ff0000 !important;
    /* red on hover */
    font-weight: bold;
    /* optional: bold on hover */
}

/* Specific site areas (if you want to scope it) */
.widgets-footer a,
.footer-actions a,
.suggestions-content a,
.h-pill a {
    color: #000000 !important;
}

.widgets-footer a:hover,
.footer-actions a:hover,
.suggestions-content a:hover,
.h-pill a:hover {
    color: #ff0000 !important;
    font-weight: bold;
}

.conversations-wrapper span {
    color: #000000 !important;
    /* black text */
}

/* ===== Unified hover for list containers ===== */

/* Hover background for the container */
a.list-link:hover {
    background-color: #007BFF !important;
    /* Fanspinoy blue */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Text inside container on hover */
a.list-link:hover h5,
a.list-link:hover span,
a.list-link:hover p {
    color: #ffffff !important;
    /* text becomes white */
}

/* Icons inside container on hover */
a.list-link:hover .ion-icon,
a.list-link:hover .ion-icon path,
a.list-link:hover svg {
    stroke: #ffffff !important;
    /* icons turn white */
    fill: #ffffff !important;
    /* if icon has filled areas */
}

/* Force button to all red (border, text, icons) */
button.btn-outline-primary {
    border-color: #ff0000 !important;
    /* red border */
    color: #ff0000 !important;
    /* text color */
}

/* Force all children (icons, paths, SVGs) to red */
button.btn-outline-primary * {
    color: #ff0000 !important;
    stroke: #ff0000 !important;
    fill: #ff0000 !important;
}

/* Hover effect: darker red background and border */
button.btn-outline-primary:hover {
    background-color: #cc0000 !important;
    /* darker red background */
    border-color: #cc0000 !important;
    /* darker red border */
    color: #ffffff !important;
    /* white text for readability */
}

button.btn-outline-primary:hover * {
    stroke: #ffffff !important;
    /* icons turn white on hover */
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* Make text inside subscription container black */
.p-3 {
    color: #000000 !important;
    /* black text */
}

/* Sidebar menu items default to bold white */
ul.menu-elements li,
ul.menu-elements li a {
    color: #ffffff !important;
    /* white text */
    font-weight: bold !important;
    /* bold */
    text-decoration: none;
    /* remove underline if any */
}

/* Hover effect: turn text red */
ul.menu-elements li:hover,
ul.menu-elements li a:hover {
    color: #ff0000 !important;
    /* red on hover */
}



/* Make wallet amount bold and white */
.wallet-total-amount {
    color: #ffffff !important;
    /* white text */
    font-weight: bold !important;
    /* ensure bold */
}

/* Red and blue two-tone container */
.alert.wallet-alert {
    background: linear-gradient(90deg, #ff0000 50%, #0000ff 50%) !important;
    /* red left, blue right */
    color: #ffffff !important;
    /* white text inside */
}

/* Target the wallet alert container */
.alert.alert-primary {
    background: linear-gradient(90deg, #ff0000, #0000ff) !important;
    /* red to blue */
    color: #ffffff !important;
    /* white text */
    font-weight: bold !important;
    /* bold text */
    border: none !important;
    /* remove default border */
}

#amount-label {
    background-color: #28a745;
    /* Money green */
    color: white;
    /* Keep the icon/text visible */
}

#amount-label {
    background-color: #28a745;
    /* Money green */
}

/* Make only the direct text black */
#amount-label>.ion-icon-wrapper {
    color: white;
    /* keep icons white */
}

#amount-label>.wallet-text {
    color: black;
    /* the text you want black */
}

.mt-2>span {
    color: black;
    /* Make only the span text black */
    font-weight: bold;
    /* Make it bold */
}

.mt-2>span {
    color: black;
    font-weight: bold;
}

.mt-2>ul li {
    color: black;
    font-weight: normal;
}

/* Target all containers with the mt-2 class */
.mt-2 {
    color: black;
    /* Fallback for text that doesn’t have its own styling */
}

/* First sentence in each container stays bold */
.mt-2>span {
    color: black;
    font-weight: bold;
}

/* Bullet points under each container are normal weight black */
.mt-2 ul li {
    color: black;
    font-weight: normal;
}

/* Optional: make sure nested lists inside bullets are also black */
.mt-2 ul li ul li {
    color: black;
    font-weight: normal;
}


form.verify-form p {
    color: black;
}


form.verify-form .d-flex.align-items-center {
    color: black;
    /* Makes the text black */
}

form.verify-form .d-flex.align-items-center .ion-icon-wrapper {
    color: green;
    /* Keeps the icon color if needed, or remove this line if icon already correct */
}

.dz-button {
    color: black;
    /* very dark text */
    font-weight: bold;
    /* optional, makes it more readable */
}
/*Front Page*/

.navbar-brand img {
    background-color: white;
    /* white background behind the logo */
    padding: 5px;
    /* optional: adds some space around the logo */
    border-radius: 4px;
    /* optional: slightly rounded corners */
    display: inline-block;
    /* ensures padding/background works correctly */
}

.navbar-brand img {
    background-color: white;
    /* keep the white background */
    padding: 5px;
    /* optional: space around logo */
    border-radius: 4px;
    /* optional: rounded corners */
    display: inline-block;
    width: 200px;
    /* make the logo wider */
    height: auto;
    /* maintain aspect ratio */
}

.pt-5 img {
    width: 100%;
    /* image fills the container width */
    height: auto;
    /* maintain aspect ratio */
    max-width: 626px;
    /* optional: cap at original size */
}

.pt-5 img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    /* center it */
}


/* Container centering */
div.col-12.col-md-6.d-none.d-md-block>div.pt-5 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 2rem;
    /* prevent overlapping the header */
    padding-bottom: 2rem;
    height: auto;
}

/* Circular image */
div.col-12.col-md-6.d-none.d-md-block>div.pt-5>img[src*="Frontpagemain.png"] {
    width: 50vmin;
    /* smaller on large screens */
    height: 50vmin;
    max-width: 500px;
    /* limit max size */
    max-height: 500px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    position: relative;
    z-index: 2;
    box-shadow:
        0 0 40px rgba(139, 0, 0, 0.9),
        0 0 80px rgba(139, 0, 0, 0.6),
        0 0 150px rgba(139, 0, 0, 0.3),
        0 15px 30px rgba(0, 0, 0, 0.25);
}

/* Static red glow behind image */
div.col-12.col-md-6.d-none.d-md-block>div.pt-5::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110%;
    /* slightly bigger than image */
    height: 110%;
    max-width: 550px;
    /* match 110% of max image size */
    max-height: 550px;
    background: radial-gradient(circle, rgba(255, 50, 50, 0.8) 0%, rgba(139, 0, 0, 0.95) 80%, transparent 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
/* Static red + subtle blue glow behind image */
div.col-12.col-md-6.d-none.d-md-block>div.pt-5::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110%;
    height: 110%;
    max-width: 550px;
    max-height: 550px;
    background: radial-gradient(circle,
            rgba(255, 50, 50, 0.8) 0%,
            /* bright red center */
            rgba(139, 0, 0, 0.95) 70%,
            /* deep red mid */
            rgba(0, 50, 255, 0.25) 100%
            /* subtle blue outer edge */
        );
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.font-weight-bolder.text-gradient.bg-gradient-primary {
    background: linear-gradient(90deg, #1E90FF, #FF0000);
    /* Blue to red */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* For non-WebKit browsers */
}
div.col-12.col-md-6 p.font-weight-bold {
    color: #000000 !important;
}

.font-weight-bold {
    color: #000000 !important;
    /* Force black text */
}

/* =========================
   FIX TEXT GRADIENT HEADLINES
   ========================= */
h1.text-gradient.bg-gradient-primary,
h2.text-gradient.bg-gradient-primary,
h3.text-gradient.bg-gradient-primary {
    background: linear-gradient(135deg, #0052ff 0%, #ff1e1e 100%) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;

    -webkit-text-fill-color: transparent !important;
    color: transparent !important;

    display: inline-block;
}

/* Prevent the hero from ballooning vertically */
.home-header .container.h-100,
.home-header .row.h-100 {
  height: auto !important;
  min-height: 0 !important;
}


/* Default text */
body {
  color: #000;
}


h5 {
  color: red;
}


h1.text-gradient.bg-gradient-primary {
  background: linear-gradient(90deg, blue, red);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;              /* fallback */
  -webkit-text-fill-color: transparent;
}


.home-mid-img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  border-radius: 8px; /* optional */
}


/* Red background section with black headlines + white body text */
.mt-5.py-5.home-bg-section {
  background: #000000; /* red */
}

/* Headline (your two H2 lines) = black */
.mt-5.py-5.home-bg-section h2.font-weight-bolder {
  color: #000;
}

/* Regular text (paragraph) = white */
.mt-5.py-5.home-bg-section p {
  color: #fff;
}

/* (Optional) If the link/button text gets affected anywhere inside */
.mt-5.py-5.home-bg-section a:not(.btn) {
  color: #fff;
}


/* Override default pink gradient */
.btn.bg-gradient-primary {
  background: linear-gradient(135deg, #0066ff, #b30000) !important; /* blue → deep red */
  border: none;
  color: #fff !important;
  backdrop-filter: blur(6px); /* subtle blur effect */
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;

  }

  /* Hover effect */
.btn.bg-gradient-primary:hover {
  background: linear-gradient(135deg, #0052cc, #8a0000) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

.mt-5.py-5.home-bg-section {
  background: linear-gradient(
    135deg,
    #0044ff 0%,     /* strong blue (dominant) */
    #0033cc 60%,    /* deeper blue mid */
    #b30000 100%    /* red accent at the end */
  );
}

/* Headlines stay black */
.mt-5.py-5.home-bg-section h2.font-weight-bolder {
  color: #000;
}

/* Regular text stays white */
.mt-5.py-5.home-bg-section p {
  color: #fff;
}


/* Featured creators section gradient */
.py-5.home-bg-section {
  background: linear-gradient(
    135deg,
    #0044ff 0%,
    #0033cc 70%,
    #b30000 100%
  );
}

/* Headline black */
.py-5.home-bg-section h2 {
  color: #ff0000 !important;
}

/* Paragraph white */
.py-5.home-bg-section p {
  color: #fff;
}


/* Target the footer control links */
.footer .text-link,
.footer .side-menu-label {
  color: #ffffff !important;
}

/* Ensure SVG icons also turn white */
.footer .text-link svg {
  color: #ffffff !important;
}


/* Footer gradient background */
.footer.py-5 {
  background: linear-gradient(
    135deg,
    #0044ff 0%,
    #0033cc 70%,
    #b30000 100%
  );
}


/* Put a divider line at the bottom of the hero row */
.home-header .row.d-flex.flex-row.align-items-center.h-100 {
  position: relative;
  padding-bottom: 2rem; /* space for the divider */
}

.home-header .row.d-flex.flex-row.align-items-center.h-100::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(149, 143, 143, 0.35); /* light divider */
}


.my-settings-page .text-bold.text-truncate {
  color: #ffffff !important;
}

.text-bold.text-truncate {
  color: #ffffff !important;
}


/* Increase header height */
.navbar {
    padding-top: 18px;
    padding-bottom: 18px;
}

/* Control logo size properly */
.navbar-brand img {
    max-height: 60px;   /* adjust if needed */
    height: auto;
    width: auto;
}

.navbar-dark .navbar-toggler {
    border: 2px solid rgba(255, 255, 255, 0.9);
    padding: 6px 8px;
}

.navbar-dark .navbar-toggler-icon {
    width: 30px;
    height: 20px;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* FORCE hamburger to white + thicker lines */
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    width: 34px;
    height: 26px;
}

/* OPTIONAL: make the button itself more visible */
.navbar-dark .navbar-toggler {
    border: 2px solid rgba(255, 255, 255, 0.9);
    padding: 6px 10px;
}


/* Messenger bottom action buttons */
.messenger-buttons-wrapper .messenger-button {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f3f4f6 !important;
    border: 1px solid #d1d5db !important;
    color: #1f2937 !important;
    box-shadow: none !important;
}

/* icon color inside the buttons */
.messenger-buttons-wrapper .messenger-button svg,
.messenger-buttons-wrapper .messenger-button svg path,
.messenger-buttons-wrapper .messenger-button i {
    fill: #1f2937 !important;
    color: #1f2937 !important;
}

/* attach button */
.messenger-buttons-wrapper .attach-file {
    background: #eef2ff !important;
    border-color: #c7d2fe !important;
}

.messenger-buttons-wrapper .attach-file svg,
.messenger-buttons-wrapper .attach-file svg path {
    fill: #1d4ed8 !important;
}

/* hover */
.messenger-buttons-wrapper .messenger-button:hover {
    transform: scale(1.05);
    opacity: 1 !important;
}

/* send button = only red one */
.messenger-buttons-wrapper .messenger-button[type="submit"]:not(.attach-file) {
    background: #e10600 !important;
    border-color: #e10600 !important;
    color: #fff !important;
}

.messenger-buttons-wrapper .messenger-button[type="submit"]:not(.attach-file) svg,
.messenger-buttons-wrapper .messenger-button[type="submit"]:not(.attach-file) svg path,
.messenger-buttons-wrapper .messenger-button[type="submit"]:not(.attach-file) i {
    fill: #fff !important;
    color: #fff !important;
}


/* Active conversation row on the left */
.contact-box.contact-active {
    background: rgba(225, 6, 0, 0.45) !important;
    border-radius: 10px !important;
}

/* Regular conversation rows */
.contact-box {
    background: transparent !important;
    transition: background 0.2s ease;
}

/* Hover state */
.contact-box:hover {
    background: rgba(225, 6, 0, 0.18) !important;
    border-radius: 10px !important;
}

/* Text colors inside active row */
.contact-box.contact-active .contact-name,
.contact-box.contact-active .contact-message,
.contact-box.contact-active small,
.contact-box.contact-active .text-muted,
.contact-box.contact-active .font-weight-bold {
    color: #111 !important;
}

/* Keep avatar clean */
.contact-box .contact-avatar {
    border: 2px solid rgba(255,255,255,0.65);

  .contact-box.contact-active {
    background: rgba(225, 6, 0, 0.25) !important;
}
}
.message-bubble.sent {
    border-radius: 16px;
    padding: 8px 14px;
}


.messenger-footer,
.chat-footer {
    padding: 12px 14px !important;
}

.conversation-header {
    background: #f8f9fa;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}


/* Language modal */
#language-selector-dialog .modal-content {
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: #161616;
    color: #fff;
    overflow: hidden;
}

#language-selector-dialog .modal-header {
    border-bottom: none;
    padding: 26px 26px 10px;
    align-items: center;
}

#language-selector-dialog .modal-title {
    font-weight: 800;
    font-size: 1.9rem;
    letter-spacing: 0.5px;
    color: #ff2b2b;
    margin: 0;
}

#language-selector-dialog .close {
    color: #fff;
    opacity: 0.9;
    text-shadow: none;
}

#language-selector-dialog .close:hover {
    opacity: 1;
}

#language-selector-dialog .modal-body {
    padding: 0 26px 18px;
}

#language-selector-dialog .modal-body p {
    margin-bottom: 18px;
    font-size: 1rem;
    color: #f1f1f1;
}

#language-selector-dialog .input-group {
    display: block;
}

#language-selector-dialog select.form-control {
    width: 100%;
    height: 48px;
    border-radius: 10px;
    background: #2a2a2a;
    color: #ffffff;
    border: 1px solid #6b6b6b;
    padding: 0 14px;
    box-shadow: none;
}

#language-selector-dialog select.form-control:focus {
    border-color: #ff2b2b;
    box-shadow: 0 0 0 3px rgba(255, 43, 43, 0.18);
    background: #2a2a2a;
    color: #ffffff;
}

#language-selector-dialog select.form-control option {
    color: #ffffff;
    background: #2a2a2a;
}

#language-selector-dialog .modal-footer {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 16px 26px 26px;
    background: #161616;
}

#language-selector-dialog .btn-primary {
    background: #ff2b2b;
    border: none;
    border-radius: 10px;
    min-width: 92px;
    height: 40px;
    font-weight: 700;
    box-shadow: none;
}

#language-selector-dialog .btn-primary:hover,
#language-selector-dialog .btn-primary:focus {
    background: #e32020;
    box-shadow: none;
}

#language-selector-dialog select,
#language-selector-dialog select option {
    color: #ffffff !important;
    background-color: #2a2a2a !important;
}

.navbar-nav .nav-link:hover {
    color: #000 !important;
    background-color: rgba(255,255,255,0.2);
    border-radius: 6px;
}

.navbar-nav .nav-item .nav-link:hover {
    color: #000 !important;
}