/*******************
 * Reset style
 * *****************
 */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
html,
body {
    height: 100%;
    font-family: "Poppins", sans-serif;
    max-width: 100%;
    overflow-x: hidden;
}

li {
    list-style: none;
}
input,
button,
textarea {
    outline: none;
    border: none;
}
select,
button:focus,
button:active,
input,
.page-link:focus {
    outline: none;
    box-shadow: none !important;
}
textarea {
    resize: none;
    box-shadow: none !important;
}

.btn:not(:disabled):not(.disabled):active,
.btn:not(:disabled):not(.disabled).active,
.btn.focus,
.btn:focus {
    box-shadow: none !important;
}

a {
    outline: none;
}

body {
    /*font-family: 'Barlow', Helvetica, Arial, sans-serif;*/
    font-family: "Poppins", sans-serif;
    color: #5f5f5f;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 800 !important;
}

html[data-bs-theme="light"] {
    --sidebar-bg: #ffffff;
    --sidebar-border: rgba(0, 0, 0, 0.08);
    --icon-bg: rgba(0, 0, 0, 0.06);
    --text-color: #111111;
    --card-info-muted: #6b7280;
    --card-info-title: #111827;
    --nav_profile_bg: #fff;
    --no-updates-main-bg: rgba(0, 0, 0, 0.04);
    --no-updates-sub-bg: #f9fafb;
    --no-updates-card-bg: #ffffff;
    --no-updates-border: rgba(0, 0, 0, 0.08);
    --light-surface: #ffffff;
    --light-surface-muted: #f8fafc;
    --light-border: rgba(15, 23, 42, 0.08);
    --light-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}
html[data-bs-theme="dark"] {
    --sidebar-bg: #1a1a1a;
    --sidebar-border: rgba(255, 255, 255, 0.06);
    --icon-bg: rgba(255, 255, 255, 0.08);
    --text-color: #ffffff;
    --card-info-muted: #9ca3af;
    --card-info-title: #ffffff;
    --nav_profile_bg: #303030;
    --no-updates-main-bg: #ffffff1a;
    --no-updates-sub-bg: #303030;
    --no-updates-card-bg: #191919;
    --no-updates-border: rgba(255, 255, 255, 0.06);
}

.navbar {
    border: 1px solid #ffffff1a;
    /* background-color: #ffffff1a !important; */
    margin: 0px 20px 20px;
    border-radius: 32px;
}

.navbar-absolute {
    position: absolute;
    z-index: 1010;
    width: 100%;
}

iframe {
    border: 0;
    outline: 0;
    width: 100% !important;
}
[type="search"] {
    outline-offset: -2px;
    -webkit-appearance: none;
}
.btn:hover:not(.e-none) {
    transform: translateY(-1px);
    box-shadow:
        0 7px 14px rgba(50, 50, 93, 0.1),
        0 3px 6px rgba(0, 0, 0, 0.08);
}
input[type="file"] {
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    outline: none;
    cursor: inherit;
    font-size: 100px;
}

/* Carousel base class */
.carousel {
    margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    bottom: 7rem;
    z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel-item {
    height: 38rem;
    background-color: #777;
}
.carousel-item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 32rem;
}

.card {
    border: 1px solid rgba(111, 111, 111, 0.125);
}
.noscroll {
    overflow-x: hidden;
    overflow-y: hidden;
}
.progress-xs {
    height: 8px;
}

/** NEW **/
.lh-inherit {
    line-height: inherit !important;
}
.text-featured {
    color: #ffc107 !important;
}
.popout {
    cursor: pointer;
    display: none;
    padding: 14px 10px;
    background: #000;
    color: rgb(255, 255, 255);
    font-size: 16px;
    position: fixed;
    z-index: 1100;
    overflow: hidden;
    width: 100%;
    text-align: center;
    left: 0;
    top: 0;
}
.popout-error {
    background: #f00 !important;
}
.fa-spin {
    -webkit-animation: fa-spin 1s infinite linear !important;
    animation: fa-spin 1s infinite linear !important;
}

.wrap-full-image {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000000;
    /*background: #2C2C2C;*/
    width: 100%;
    height: 100%;
    text-align: center;
    display: none;
    padding: 10px 20px 20px 20px;
    overflow: auto;
}

img.imageFull {
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    cursor: zoom-in;
    margin: 0 auto;
    position: relative;
}
.details-full-image {
    padding: 10px 0;
    color: #fff;
    text-align: right;
    margin-bottom: 30px;
    font-size: 25px;
}
.icon-close {
    font-size: 40px;
    line-height: 17px;
    width: 1.25rem;
    height: 1.25rem;
    transition: all 0.15s ease;
    color: #fff;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    position: relative;
}
.viewFull {
    cursor: zoom-in;
}
.container-image {
    left: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background: #252525a6;
}
/*.content-locked {
    background: #ececec;
}*/

.content-locked {
    position: relative;
    overflow: hidden;
    /* border-radius: 20px; */
    min-height: 300px;
}

/* TRUE blur layer */
.content-locked::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    filter: blur(6px);
    transform: scale(1.25);
    z-index: 1;
}

/* Dark vignette */
.content-locked::after {
    content: "";
    position: absolute;
    inset: 0;
    /* background: radial-gradient(
            circle at center,
            rgba(0, 0, 0, 0.15) 0%,
            rgba(0, 0, 0, 0.55) 45%,
            rgba(0, 0, 0, 0.9) 100%
        ); */
    z-index: 2;
    backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, 0.45);
}

/* Foreground */
.content-locked > * {
    position: relative;
    z-index: 3;
}

.showBanner {
    position: fixed;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    bottom: 0;
    padding: 10px;
}
.icon-equis {
    font-size: 25px;
    line-height: normal;
    width: 1.25rem;
    height: 1.25rem;
    transition: all 0.15s ease;
    border-radius: 50%;
    background-color: transparent;
    vertical-align: middle;
    margin-right: 5px;
}
.readmore-js-collapsed:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: hsla(0, 0%, 100%, 0);
    background-image: linear-gradient(hsla(0, 0%, 100%, 0), #fff 95%);
    z-index: 40;
}
.text-word-break {
    word-break: break-word;
}

.post-options {
    font-size: 18px;
}
.actionDelete {
    cursor: pointer;
}
a.active > i.fas.fa-heart {
    color: #f00;
}

.li-group {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.notify {
    z-index: 10;
    top: 0;
    right: 0;
    position: absolute;
    padding: 3px 8px;
    background: #f00;
    color: #fff;
    line-height: normal;
    font-weight: bold;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    border-bottom: 1px solid #dadada;
    font-size: 11px;
}

#noti_notifications,
#noti_msg {
    display: none;
}
.c-pointer {
    cursor: pointer !important;
}

.animated-ellipsis-container {
    display: inline-block;
    height: 16px;
    width: 16px;
    transform: translateZ(0);
}

.animated-ellipsis {
    animation: ellipsis 1s infinite;
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

@keyframes ellipsis {
    0% {
        width: 2px;
    }
    to {
        width: 16px;
    }
}
.cover-user:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(5, 5, 5, 0.4);
    left: 0;
    top: 0;
}
.video-responsive {
    position: relative;
    height: 0;
    overflow: hidden;
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.readmore-js-toggle {
    text-align: center;
}
.verify-notice {
    display: block;
    padding: 14px 10px;
    background: #f00;
    color: rgb(255, 255, 255);
    font-size: 16px;
    z-index: 1100;
    overflow: hidden;
    width: 100%;
    text-align: center;
    left: 0;
    bottom: 0;
}
.verified {
    color: #3897f0;
}
.border-dashed {
    border-style: dashed !important;
}
.video-js {
    width: 100%;
}
.StripeElement {
    box-sizing: border-box;
    height: calc(2.75rem + 2px);
    padding: 14px 18px;
    background-color: white;
    transition: box-shadow 0.15s ease;
    border: 1px solid #ced4da;
    margin-bottom: 10px;
    border-radius: 0.25rem;
}

.StripeElement--focus {
    border-color: #3c8dbc;
}

.StripeElement--invalid {
    border-color: #fa755a;
}

.StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}
.avatar-modal {
    border: 3px solid #fff;
    background-color: #fff;
}
.modal-offset {
    margin-top: -90px;
}
.display-none {
    display: none;
}
.display-block {
    display: block;
}
.blocked {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 300;
}
.blocked span {
    display: flex;
    justify-content: center;
    align-items: center;
}
.button-search {
    color: #ddd;
    background: none;
    position: absolute;
    right: 0;
    cursor: pointer;
    outline: none;
    border: none;
}
button:hover.button-search,
button:focus.button-search,
button:active.button-search {
    box-shadow: none !important;
    background: none !important;
    color: inherit !important;
    transform: none;
}
.input-search {
    border-radius: 60px;
    padding: 12px 20px !important;
    height: 40px !important;
}

.carousel-cover:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(5, 5, 5, 0.2);
    left: 0;
    top: 0;
}
.p-nav a.nav-link:not(.btn) {
    color: #fff;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}
[data-bs-theme="dark"] .nav-link:hover:not(.search):not(.btn):not(.link-nav),
[data-bs-theme="dark"] .nav-link:active:not(.search):not(.btn):not(.link-nav),
[data-bs-theme="dark"] .nav-link:focus:not(.search):not(.btn):not(.link-nav) {
    color: #fff;
}

[data-bs-theme="light"] .nav-link:hover:not(.search):not(.btn):not(.link-nav),
[data-bs-theme="light"] .nav-link:active:not(.search):not(.btn):not(.link-nav),
[data-bs-theme="light"] .nav-link:focus:not(.search):not(.btn):not(.link-nav) {
    color: #e2394c;
}
.link-scroll a.nav-link:not(.btn) {
    color: white;
    /* color: #3a3a3a; */
}
.link-scroll a.nav-link:hover:not(.search):not(.btn),
.link-scroll a.nav-link:active:not(.search):not(.btn),
.link-scroll a.nav-link:focus:not(.search):not(.btn) {
    color: #969696;
}

.nav-link.search:hover,
.nav-link.search:active,
.nav-link.search:focus {
    color: white;
}
.dropdown-menu:not(.dropdown-emoji) {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border: 0;
    box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.15);
    border-radius: 0.125rem;
    -webkit-transition: all 150ms linear;
    -moz-transition: all 150ms linear;
    -o-transition: all 150ms linear;
    -ms-transition: all 150ms linear;
    transition: all 150ms linear;
    font-size: 13px;
    line-height: 18px;
}
.dropdown-emoji {
    box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.15);
    border: 0;
    border-radius: 0.125rem;
    font-size: 13px;
    line-height: 18px;
}
.dd-menu:before {
    display: inline-block;
    position: absolute;
    width: 0;
    height: 0;
    vertical-align: middle;
    content: "";
    top: -5px;
    left: 10px;
    right: auto;
    color: #ffffff;
    border-bottom: 0.4em solid;
    border-right: 0.4em solid transparent;
    border-left: 0.4em solid transparent;
}
.dd-menu-user:before {
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    content: "";
    top: -5px;
    right: 10px;
    left: auto;
    color: #ffffff;
    border-bottom: 0.4em solid;
    border-right: 0.4em solid transparent;
    border-left: 0.4em solid transparent;
}
.dropdown .dropdown-menu {
    -webkit-transform: translate3d(0, -25px, 0);
    -moz-transform: translate3d(0, -25px, 0);
    -o-transform: translate3d(0, -25px, 0);
    -ms-transform: translate3d(0, -25px, 0);
    transform: translate3d(0, -25px, 0);
    visibility: hidden;
    opacity: 0;
    filter: alpha(opacity=0);
    display: block;
}
.dropdown.show .dropdown-menu,
.dropdown-menu.open {
    opacity: 1;
    filter: alpha(opacity=100);
    visibility: visible;
    -webkit-transform: translate3d(0, 0px, 0);
    -moz-transform: translate3d(0, 0px, 0);
    -o-transform: translate3d(0, 0px, 0);
    -ms-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0);
}
.dropdown.show .dropdown-menu {
    -webkit-transform: translate3d(0, 7px, 0);
    -moz-transform: translate3d(0, 7px, 0);
    -o-transform: translate3d(0, 7px, 0);
    -ms-transform: translate3d(0, 7px, 0);
    transform: translate3d(0, 7px, 0);
}
.dropdown-toggle::after {
    margin-left: 0.1em;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}
.dropdown-toggle[aria-expanded="true"]:after {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.dropdown-toggle::after,
.dropup .dropdown-toggle::after {
    font-weight: 400;
    font-style: normal;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    border: none;
    content: "\f107";
    font-size: 14px;
    top: 50%;
    right: 24px;
    margin-top: -5px;
    vertical-align: baseline;
}
.text-shadow-trans {
    text-shadow: 0 1px 4px #333333b3;
}
.navbar .nav-item {
    margin-left: 2px;
    margin-right: 2px;
}

.sidebar-overlay .navbar .navbar-collapse {
    z-index: 100;
}

/* End 991px */
.navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
}
.navbar .navbar-nav .nav-item .nav-link:not(.btn).active {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50px;
}
.dropdown-item:focus,
.dropdown-item:hover {
    color: white;
    background-color: #007bff;
}

[class^="ribbon-"] {
    position: absolute;
    margin-bottom: 80px;
}
[class^="ribbon-"]:before,
[class^="ribbon-"]:after {
    content: "";
    position: absolute;
}

.ribbon-1 {
    width: 30px;
    height: 40px;
    background: #ff9800;
    top: -6px;
    left: 25px;
}
.ribbon-1:before {
    height: 0;
    width: 0;
    border-bottom: 6px solid #d07e05;
    border-right: 6px solid transparent;
    right: -6px;
}
.ribbon-1:after {
    height: 0;
    width: 0;
    border-left: 15px solid #ff9800;
    border-right: 15px solid #ff9800;
    border-bottom: 10px solid transparent;
    bottom: -10px;
}
.ribbon-1 i {
    position: absolute;
    top: 40%;
    left: 30%;
    color: #fff;
}
.item > a::after {
    content: "";
    display: block;
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.item h5 {
    line-height: 3;
    text-align: center;
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    margin-top: -30px;
    color: #fff;
    z-index: 5;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background-color: transparent !important;
    transform: scale(0.9);
}
.owl-theme .owl-dots .owl-dot span {
    display: inline-block;
    width: 0.9375rem;
    height: 0.9375rem;
    box-sizing: border-box;
    border: 3px solid transparent;
    border-radius: 50%;
    transform: scale(0.6);
    transition: all 0.3s ease-in-out;
    opacity: 0.7;

    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}

.bg-dark-2 {
    background-color: #1b1b1b;
}
.bg-dark-3 {
    background-color: #212121;
}
.link-footer,
.ico-social {
    color: #999;
}
.btn-main:hover i {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
}
.btn-main i {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition:
        transform 0.3s ease,
        -webkit-transform 0.3s ease;
}
.btn {
    padding: 0.625rem 1.25rem;
}
.btn-sm,
.btn-group-sm > .btn {
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}
.jumbotron-cover:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(5, 5, 5, 0.3);
    left: 0;
    top: 0;
}
.custom-select {
    background: #fff
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23a5a5a5' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
        no-repeat right 0.75rem center/8px 10px;
}
[data-bs-theme="light"] .report-modal-select {
    background-color: #ffffff !important;
    color: #212529 !important;
    display:block;
}
[data-bs-theme="dark"] .report-modal-select {
    background-color: #1f1f1f !important;
    border-color: #3a3a3a !important;
    color: #f2f2f2 !important;
    display:block;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23d0d0d0' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .report-modal-select option {
    background-color: #1f1f1f !important;
    color: #f2f2f2 !important;
}
main > div.section:nth-child(odd) {
    background-color: white;
}
main > div.section:nth-child(even) {
    background-color: #fbfafd !important;
}
.fixed-top {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.home {
    padding: 150px 0;
}
.homepage {
    padding: 180px 0;
}
.p-nav {
    padding: 1rem;
}
.p-nav-scroll {
    padding: 0.7rem !important;
}
.jumbotron {
    border-radius: 0 !important;
}
.img-user {
    width: auto !important;
    border-radius: 50%;
    margin: 0 auto;
    /* border: 5px solid #fff; */
}
.ico-social {
    font-size: 20px;
}
a:hover.link-border {
    text-decoration: none;
}
a.link-border {
    border-bottom: 1px solid;
}
.card-cover {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    height: 135px;
    padding: 1rem;
}
.card-avatar {
    left: 50%;
    margin-left: -45px;
    position: absolute;
    top: 145px;
    background-color: #fff;
    border-radius: 50%;
}

[data-bs-theme="dark"] .section {
    background:
        radial-gradient(
            50% 30% at 85% 1%,
            rgba(226, 57, 76, 0.35) 0%,
            rgba(226, 57, 76, 0.15) 30%,
            rgba(0, 0, 0, 0) 70%
        ),
        #000;
}
[data-bs-theme="light"] .section {
    background:
        radial-gradient(
            50% 30% at 85% 1%,
            rgba(226, 57, 76, 0.35) 0%,
            rgba(226, 57, 76, 0.15) 30%,
            rgba(0, 0, 0, 0) 70%
        ),
        #f9f6f6;
}

/* background: radial-gradient(50% 50% at 85% 0%, rgba(226, 57, 76, 0.35) 0%, rgba(226, 57, 76, 0.15) 30%, rgba(0, 0, 0, 0) 50%), #000; */

.section-sm {
    padding: 90px 10px 0px 6px;
}

.section-sm.section-msg {
    padding: 90px 20px 0px 20px;
}

.section-sm.creator {
    padding: 90px 20px 0px 20px;
}
.facebook-btn {
    color: #3e5c9b !important;
}
.twitter-btn {
    color: #1da1f2 !important;
}
.alert-success {
    background-color: #00a65a;
    border-color: #00a65a;
    color: #fff;
}
.alert-danger {
    color: #fff;
    background-color: #ff0000;
    border-color: #ff012a;
}
.alert-primary {
    color: #fff;
    border-color: #7889e8;
    background-color: #7889e8;
}
.alert-warning {
    color: #1f2d3d;
    background: #ffc107;
    border-color: #edb100;
}
.alert-dismissible .close {
    color: #fff;
    text-shadow: none;
}
.close {
    float: right;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
    text-shadow: none;
    opacity: 0.9;
}
.page-link:hover {
    color: #fff;
}
.page-link {
    border-radius: 35px !important;
    border: none;
    margin-right: 2px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
    height: 35px;
    min-width: 35px;
    text-align: center;
}
.nav-scroller {
    position: relative;
    z-index: 2;
    height: 3.5rem;
    overflow-y: hidden;
}
.nav-scroller .nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
.nav-scroller-2::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 2%;
    height: 100px;
    background-color: hsla(0, 0%, 100%, 0);
    background-image: linear-gradient(90deg, white, transparent);
    z-index: 40;
}
.nav-scroller-2::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 2%;
    height: 100px;
    background-color: hsla(0, 0%, 100%, 0);
    background-image: linear-gradient(-90deg, white, transparent);
    z-index: 40;
}
.btn-category {
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.btn-category:hover,
.active-category {
    background-color: #e2394c !important;
    color:#fff !important;
    border-radius: 8px !important;
}
[data-bs-theme="dark"] .input-group-text {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    display: flex;
    margin-bottom: 0;
    padding: 0.625rem 0.75rem;
    text-align: center;
    white-space: nowrap;
    color: #adb5bd;
    border: 1px solid #cad1d7;
    border-radius: 8px;
    background-color: #fff;
    align-items: center;
}
[data-bs-theme="light"] .input-group-text {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    display: flex;
    margin-bottom: 0;
    padding: 0.625rem 0.75rem;
    text-align: center;
    white-space: nowrap;
    color: #adb5bd;
    border: 1px solid #ced4da;
    border-radius: 8px;
    background-color: #fff;
    align-items: center;
}
.input-group-alternative .form-control,
.input-group-alternative .input-group-text {
    border: 0;
    box-shadow: none;
    background-color: #161616 !important;
}
.input-group-alternative {
    transition: box-shadow 0.15s ease;
    border: 0;
    box-shadow:
        0 1px 3px rgba(50, 50, 93, 0.15),
        0 1px 0 rgba(0, 0, 0, 0.02);
}
.form-control {
    /* border: 1px solid #222; */
    height: calc(2.75rem + 2px);
    padding: 0.625rem 0.75rem;
    border-radius: 8px;
    background-color: #ffffff1a !important;
}
.custom-control-input:not(:disabled):focus ~ .custom-control-label::before {
    box-shadow: none;
}
.custom-checkbox .custom-control-input ~ .custom-control-label,
.custom-control-label {
    font-size: 0.875rem;
    cursor: pointer;
}
.custom-control-label:not(.switch)::before {
    position: absolute;
    top: 0.125rem;
    left: -1.75rem;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    content: "";
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    background-color: #fff;
    box-shadow: none;
}
.custom-control-label::after {
    position: absolute;
    top: 0.125rem;
    left: -1.75rem;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%;
}
.custom-control-label::before {
    box-shadow:
        0 1px 3px rgba(50, 50, 93, 0.15),
        0 1px 0 rgba(0, 0, 0, 0.02);
}
.input-group .form-control:not(:first-child) {
    padding-left: 0;
    border-left: 0;
}
.form-control:focus,
.custom-select:focus {
    border-color: #ced4da !important;
    outline: 0;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.075),
        0 0 0 0 rgba(50, 151, 211, 0.5);
}

.select2-container--open .select2-selection--multiple,
.select2-container--focus .select2-selection--multiple {
    border-color: #f1415d !important;
    border-radius: 12px;
}

.btn-facebook,
.btn-facebook:hover,
.btn-facebook:active,
.btn-facebook:focus {
    background: #1877f2;
    color: #ffffff;
}
.btn-google,
.btn-google:hover,
.btn-google:active,
.btn-google:focus {
    background: #ffffff !important;
    border-color: #ffffff33 !important;
    color: #344054 !important;
    font-weight: 400;
}
.btn-apple,
.btn-apple:hover,
.btn-apple:active,
.btn-apple:focus {
    background: #0a0a0a;
    color: #ffffff;
    border-color: #2f2f2f;
}
.shadow-custom {
    box-shadow: 0 5px 16px rgba(0, 9, 128, 0.05);
}
.btn-danger {
    color: #fff;
    border-color: #f5365c;
    background-color: #f5365c;
}
.nav-wrapper {
    padding: 1rem 0;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}
.nav-pills .nav-link {
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.75rem 1rem;
    transition: all 0.15s ease;
    color: #5e72e4;
    background-color: #fff;
    box-shadow:
        0 4px 6px rgba(50, 50, 93, 0.11),
        0 1px 3px rgba(0, 0, 0, 0.08);
}
.nav-pills .nav-item:not(:last-child) {
    padding-right: 1rem;
}
.dropdown-item.balance:hover {
    background: #fff !important;
    color: #212529;
}
.page-item.disabled .page-link {
    color: #9daebd;
}
.img-profile-user {
    margin-top: -100px !important;
}
.modal-danger .modal-content {
    color: #fff;
    background-color: #f5365c;
}
.modal-danger .modal-header,
.modal-danger .modal-footer {
    border-color: rgba(255, 255, 255, 0.075);
}
.focused .form-control {
    background-color: #161616;
    border-color: rgba(50, 151, 211, 0.25);
}
.btn-white {
    color: #212529;
    border-color: #fff;
    background-color: #fff;
    box-shadow:
        0 4px 6px rgba(50, 50, 93, 0.11),
        0 1px 3px rgba(0, 0, 0, 0.08);
}
.btn-white:hover {
    color: #212529;
    border-color: white;
    background-color: white;
}
.text-muted {
    color: #8898aa !important;
}
.btn-sm,
.btn-group-sm > .btn {
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 0.5rem 1.8rem;
    border-radius: 0.25rem;
}
.btnLike:hover {
    text-decoration: none !important;
}
.bg-success {
    background-color: #2dce89 !important;
}
/* .nav-profile {
    /* border-bottom: 3px solid rgba(159, 163, 177, 0.07); 
} */
.nav-profile a,
.nav-profile li.active a:hover,
.nav-profile li.active a:active,
.nav-profile li.active a:focus {
    color: #333;
}
.nav-profile a:hover {
    text-decoration: none;
}
.sm-btn-size {
    font-weight: 500;
    font-size: 16px !important;
    line-height: 15px;
    text-align: center;
}
.font-icon-lg {
    font-size: 120px;
}
.d-flex-user {
    display: flex;
}
.link-share {
    font-size: 16px;
}

.pb-lg,
.py-lg {
    padding-bottom: 6rem !important;
}
.pt-lg,
.py-lg {
    padding-top: 6rem !important;
}
.ico-no-result {
    color: #c5c5c5;
    border: 3px solid #c5c5c5;
    -webkit-border-radius: 50%;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 50%;
    -moz-background-clip: padding;
    border-radius: 50%;
    font-size: 60px;
    width: 150px;
    height: 150px;
    display: block;
    line-height: 150px !important;
    margin: 0 auto;
}
.popout-success {
    background-color: #2dce89 !important;
}
.headerModalOverlay:before {
    content: "";
    position: absolute;
    width: 100%;
    background: rgba(5, 5, 5, 0.4);
    left: 0;
    top: 0;
    display: block;
    bottom: 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.avatar-wrap {
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 50%;
    margin: 0 auto;
    background-color: #fff;
}
.button-avatar-upload {
    color: #fff;
    width: 100%;
    padding: 8px;
    background: rgba(0, 0, 0, 0.3);
    bottom: 0;
}
a:hover.button-avatar-upload {
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
}
.progress-upload {
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    z-index: 2;
    color: #fff;
    line-height: 150px;
    display: none;
}
.wraper-cover-upload {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 100;
}
.btn-cover-upload {
    color: #fff;
    padding: 8px 25px;
    background: rgba(0, 0, 0, 0.5);
}
.btn-cover-upload:hover,
.btn-cover-upload:disabled {
    color: #fff;
    background: rgba(0, 0, 0, 0.8) !important;
}

.progress-upload-cover {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background-color: #28a745;
    transition: width 0.6s ease;
}
.avatar-user-home {
    margin-top: -25px;
    /* border: 2px solid #fff; */
    background-color: #fff;
}
.btn-upload {
    width: 48px;
    height: 48px;
    padding: 0;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}
.btn-upload:hover {
    background-color: #f3f3f3;
}
.share-btn-user {
    font-size: 18px;
}
.user-online::before {
    background: #4caf50;
    position: absolute;
    border: 3px solid #fff;
    display: block;
    bottom: -3px;
    right: 0;
    content: "";
    border-radius: 50%;
    height: 30%;
    min-height: 30%;
    width: 30%;
    min-width: 30%;
}
.user-offline::before {
    background: #adadad;
    position: absolute;
    border: 3px solid #fff;
    display: block;
    bottom: -3px;
    right: 0;
    content: "";
    border-radius: 50%;
    height: 30%;
    min-height: 30%;
    width: 30%;
    min-width: 30%;
}
.user-online-profile::before {
    background: #4caf50;
    position: absolute;
    border: 3px solid #fff;
    display: block;
    bottom: 10px;
    right: 15px;
    content: "";
    border-radius: 50%;
    height: 12%;
    width: 12%;
}
.user-offline-profile::before {
    background: #adadad;
    position: absolute;
    border: 3px solid #fff;
    display: block;
    bottom: 10px;
    right: 15px;
    content: "";
    border-radius: 50%;
    height: 12%;
    width: 12%;
}
.overflow-visible {
    overflow: visible !important;
}
/*.message {
    padding: 6px 14px 7px !important;
    border-radius: 25px !important;
}
.message.media-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}*/
.message.bg-primary > a {
    color: #fff !important;
    text-decoration: underline !important;
}
.d-scrollbars {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}
[data-bs-theme="light"] .input-new-msg {
    border: 1px solid #ced4da;
}
.input-new-msg {
    padding: 8px 34px !important;
    height: 40px !important;
}
.btn-new-msg {
    color: #ddd;
    background: none;
    position: absolute;
    outline: none;
    border: none;
    padding: 8px 0 8px 10px;
    left: 0;
}
.btn-cancel-msg {
    cursor: pointer;
    position: absolute;
    top: 4px;
    right: 0;
}
.rounded-bottom-left-0 {
    border-bottom-left-radius: 0 !important;
}
.rounded-bottom-right-0 {
    border-bottom-right-radius: 0 !important;
}
.btn-removeMsg {
    position: absolute;
    top: 20%;
    right: -18px;
    z-index: 3;
}
.container-media-img {
    background-position: center center;
    background-size: cover;
    max-width: 250px;
    max-height: 280px;
    width: 280px;
    height: 280px;
    border-radius: 6px;
}
.container-media-music {
    width: 100%;
    max-width: 400px;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 6px;
}
.container-media-msg {
    width: 100%;
    max-width: 400px;
    max-height: 280px;
    height: 280px;
}
.img-user-small {
    width: auto !important;
    border-radius: 50%;
    margin: 0 auto;
    /* border: 3px solid #fff; */
}
.icon-notifications {
    font-size: 19px;
    color: #c3c3c3;
}
.table thead th,
.table tr {
    vertical-align: bottom;
    border-bottom: 1px solid #939393;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    color: #939393;
    font-size: 12px;
}
[data-bs-theme="dark"] .table tbody tr {
    border-bottom: 1px solid #939393;
}

[data-bs-theme="dark"] .table tbody {
    background-color: #191919;
}

[data-bs-theme="light"] .table tbody tr {
    border-bottom: 1px solid #939393;
}

[data-bs-theme="light"] .table tbody {
    background-color: #ffffff;
}

[data-bs-theme="dark"] .sub-main {
    background-color: #191919;
    border-radius: 4px;
}
[data-bs-theme="light"] .sub-main {
    background-color: #ffffff;
    border-radius: 4px;
}

.sub-items {
    border-radius: 8px;
    padding: 10px;
    border: 1px solid #424242;
}
.sub-items-main {
    padding: 10px 8px;
}

.muted-content {
    font-size: 12px;
}

.date-span {
    color: #bababa;
}
.table td,
.table th {
    padding: 0.75rem;
    vertical-align: top;
    border: none;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    font-size: 14px;
}
.error-page h1 {
    font-size: 10rem;
    line-height: 9rem;
    font-weight: 700;
    color: #ec2522;
}
.wrap-center {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    z-index: 20;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.error-link {
    color: #ec2522;
}
.wrap-container {
    max-width: 550px;
    margin: 0 auto;
}
.wrap-container-lg {
    width: 650px;
    margin: 0 auto;
}
.font-tiny {
    font-size: 65% !important;
}
.item-loading::before {
    background-color: #f5f6f7;
    background-image: url("../img/loadpost.gif");
    background-repeat: repeat-y;
    background-size: 100% 1px;
    content: " ";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 50%;
}
.loading-avatar {
    width: 60px;
    height: 60px;
    display: block;
    background-color: #f5f6f7;
    border-radius: 50%;
}
.loading-name {
    width: 25%;
    height: 10px;
    display: block;
    background-color: #f5f6f7;
}
.loading-time {
    width: 15%;
    height: 10px;
    display: block;
    margin-top: 8px;
    background-color: #f5f6f7;
}
.loading-text-1 {
    width: 85%;
    height: 10px;
    display: block;
    margin-top: 8px;
    background-color: #f5f6f7;
}
.loading-text-2 {
    width: 75%;
    height: 10px;
    display: block;
    margin-top: 8px;
    background-color: #f5f6f7;
}
.loading-text-3 {
    width: 55%;
    height: 10px;
    display: block;
    margin-top: 8px;
    background-color: #f5f6f7;
}
/* Large toggl switches */
.custom-switch-lg .custom-control-label::before {
    left: -2.25rem;
    width: 3rem;
    height: 1.5rem;
    border-radius: 1.5rem;
}
.custom-switch-lg .custom-control-label::after {
    top: calc(0.25rem + 3px);
    left: calc(-2.25rem + 4px);
    width: calc(1.5rem - 6px);
    height: calc(1.5rem - 6px);
    border-radius: 1.5rem;
}
.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(1.4rem);
}
.custom-switch-lg .custom-control-label {
    padding-left: 1.5rem;
    line-height: 1.7rem;
}
.content-p img {
    max-width: 100% !important;
    height: auto !important;
}
.content-p li {
    list-style: inherit;
}
.content-p ol,
.content-p ul {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.img-post {
    height: 430px;
}
.max-w-100 {
    max-width: 100px;
}
.max-w-125 {
    max-width: 125px;
}
.visibility-hidden {
    visibility: hidden;
}
.f-size-25 {
    font-size: 25px;
}
.f-size-20 {
    font-size: 20px;
}
.truncated {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-content-call {
    position: relative;
    background-color: #000;
    color: white;
    padding: 30px 20px;
    text-align: center;
    z-index: 1;
    border-radius: 0.8rem;
}
.profile-image-call {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 15px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
}
.profile-image-call img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.caller-name {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 5px;
}
.calling-status {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 10px;
}
.call-actions {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 20px;
}
.btn-reject {
    background-color: #ff4757;
    color: #fff;
    border: none;
    flex: 1;
    padding: 12px;
}
.btn-accept {
    background-color: #2ed573;
    color: #fff;
    border: none;
    flex: 1;
    padding: 12px;
}
.btn-reject:hover,
.btn-reject:focus,
.btn-reject:active {
    background-color: #ff3040 !important;
    color: #fff !important;
}
.btn-accept:hover,
.btn-accept:focus,
.btn-accept:active {
    background-color: #26c066 !important;
    color: #fff !important;
}
.code-inputs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}
.code-input {
    width: 60px;
    height: 60px;
    text-align: center;
    font-size: 20px;
    border-radius: 4px;
}
.text-red {
    color: #e2394c !important;
}
/* kajal css */

.menu-left-home {
    /* background: #0f0f0f; */
    border-radius: 18px;
    padding: 18px 14px;
}
.sidebar-user {
    display: flex;
    gap: 12px;
    border-radius: 16px;
}
/* USER */
.user_avatar img {
    width: 99px;
    height: 99px;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.user_info {
    flex: 1;
    margin-left: 1px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.user_info h6 {
    font-size: 18px;
    font-weight: 700 !important;
    color: #ffffff;
    margin-bottom: 2px;
    overflow-wrap: anywhere;
}

.user_info small {
    font-size: 14px;
    font-weight: 400;
    color: #a3a3a3 !important;
    overflow-wrap: anywhere;
}
/* PROFILE BUTTON */
.btn_profile {
    width: fit-content;
    padding: 6px 24px !important;
    background: #e2394c;
    color: #fff !important;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    text-decoration: none;
}

.btn_profile:hover {
    background: #ef4444;
    color: #fff !important;
}

/* =========================
   SIDEBAR CARDS
   ========================= */

.sidebar-card {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--sidebar-border);
    color: var(--text-color);
}
[data-bs-theme="dark"] .sidebar-card {
    background: #202020 !important;
}
[data-bs-theme="light"] .sidebar-card {
    background: #ffffff !important;
}
.card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--icon-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
}

.card-info small {
    display: block;
    font-size: 14px;
}

.card-info strong {
    color: #ffffff;
    font-size: 14px;
    color: var(--card-info-title);
}

/* =========================
   MENU LINKS
   ========================= */

.menu-left-home li a {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-radius: 8px;
    color: #cfcfcf;
    text-decoration: none;
    transition: 0.25s;
}

.menu-left-home li a.active,
.menu-left-home li a:hover {
    background: #e2394c;
    color: #ffffff;
}

/* =========================
   THEME TOGGLE GROUP
   ========================= */

.theme-toggle-group {
    display: flex;
    gap: 6px;
    padding: 4px;
    background: #121212;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 8px 20px rgba(0, 0, 0, 0.45);
}

/* BUTTON */
.theme-toggle-btn {
    width: 32px;
    height: 32px;

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

    border-radius: 10px;
    color: #9ca3af;
    text-decoration: none;

    transition: all 0.25s ease;
}

/* ICON */
.theme-toggle-btn i {
    font-size: 15px;
}

/* ACTIVE */
.theme-toggle-btn.active {
    background: #e2394c;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.14);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 6px 16px rgba(226, 57, 76, 0.35);
}
.theme-toggle-btn.active .icon-sun,
.theme-toggle-btn.active .icon-moon {
    color: #ffffff !important;
}
html[data-bs-theme="light"] .theme-toggle-btn[data-mode="light"],
html[data-bs-theme="dark"] .theme-toggle-btn[data-mode="dark"] {
    background: #e2394c !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 6px 16px rgba(226, 57, 76, 0.35);
}
html[data-bs-theme="light"] .theme-toggle-btn[data-mode="light"] .icon-sun,
html[data-bs-theme="dark"] .theme-toggle-btn[data-mode="dark"] .icon-moon {
    color: #ffffff !important;
}
/* INACTIVE HOVER */
.theme-toggle-btn:not(.active):hover {
    color: #e5e7eb;
    background: rgba(255, 255, 255, 0.06);
}

.mobile-menu-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 8px 0;
}

.mobile-menu-actions .theme-toggle-group {
    background: #1b1b1b;
    border-radius: 14px;
    box-shadow: none;
}

.mobile-menu-actions .theme-toggle-btn {
    width: 34px;
    height: 34px;
    color: #d1d5db !important;
}

.mobile-menu-actions .theme-toggle-btn i {
    color: inherit !important;
}

.mobile-menu-logout-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #1b1b1b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
    text-decoration: none !important;
}

.mobile-menu-logout-btn i {
    font-size: 15px;
    color: inherit !important;
}

/* ===============================
   DARK POST COMPOSER (Facebook-like)
================================== */

/* Remove white footer */
.post-composer-dark .card-footer {
    background: transparent !important;
}
.action-bar .card-footer {
    background: transparent !important;
    position: unset !important;
}
.card_footer {
    position: unset !important;
}
/* Avatar */
.post-composer-dark .avatarUser {
    border: 2px solid #2a2a2a;
}

/* Textarea */
.post-composer-dark textarea {
    background: #2a2a2a !important;
    border-radius: 12px;
    color: #fff !important;
    padding: 14px 14px 50px;
    font-size: 14px;
}

.post-composer-dark textarea::placeholder {
    color: #aaa;
}

.post-composer-dark textarea:focus {
    outline: none;
    box-shadow: none;
}

[data-bs-theme="light"] .post-composer-dark textarea {
    background: none !important;
    color: black !important;
}
/* Action buttons row */
.post-composer-dark .btn-post {
    border: none;
    margin-right: 6px;
    padding: 8px 12px;
}

[data-bs-theme="dark"].post-composer-dark .btn-post i,
[data-bs-theme="dark"].post-composer-dark .btn-post svg {
    color: #fff !important;
}

/* Hover */
.post-composer-dark .btn-post:hover {
    background: #3a3a3a;
}

/* Emoji dropdown */
.post-composer-dark .dropdown-menu {
    background: #2a2a2a;
    border: none;
}

.post-composer-dark .dropdown-menu button,
.post-composer-dark .dropdown-menu .dropdown-item {
    color: #fff;
}

.post-composer-dark .dropdown-menu .dropdown-item:hover {
    background: #3a3a3a;
}

/* Publish button – BIG RED */
.post-composer-dark #btnCreateUpdate {
    background: #e2394c !important;
    border: none;
    font-weight: 600;
    padding: 12px 0;
    font-size: 15px;
    border-radius: 8px !important;
}

.post-composer-dark #btnCreateUpdate:disabled {
    opacity: 0.6;
}

/* Full width on mobile + desktop */
.post-composer-dark .w-100-mobile {
    width: 100% !important;
}

/* Character counter */
.post-composer-dark #the-count small {
    color: #aaa;
}

/* Progress bar */
.post-composer-dark .progress {
    background: #2a2a2a;
}

.post-composer-dark .progress-bar {
    background: #e63946;
}

[data-bs-theme="dark"] .custom_btn {
    background-color: #000;
    color: #fff;
}
[data-bs-theme="light"] .custom_btn {
    background-color: #fff;
    color: #000 !important;
}

.explore_title {
    font-weight: 700 !important;
    font-size: 18px !important;
}
.btn_position {
    display: flex;
    gap: 6px;
    position: absolute;
    bottom: 10px;
    left: 10px;
    flex-wrap: wrap;
}
.btn_position button,
.btn_position a {
    border-radius: 8px !important;
    padding: 4px 6px !important;
    text-decoration: none !important;
}
@media (max-width: 1024px) {
    .post-composer-dark #updateDescription {
        min-height: 140px !important;
        padding: 14px 14px 68px !important;
    }
    .post-composer-dark .btn_position {
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 2;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .post-composer-dark .btn_position::-webkit-scrollbar {
        display: none;
    }
    .post-composer-dark .btn_position > div {
        flex: 0 0 auto;
    }
}
@media (max-width: 575.98px) {
    .post-composer-dark .btn_position {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .post-composer-dark .btn_position::-webkit-scrollbar {
        display: none;
    }
    .post-composer-dark .btn_position > div {
        flex: 0 0 auto;
    }
    .post-composer-dark .btn_position .custom_btn,
    .post-composer-dark .btn_position a,
    .post-composer-dark .btn_position button {
        width: 2.375rem;
        height: 2.375rem;
        min-width: 2.375rem;
        min-height: 2.375rem;
        padding: 0 !important;
        justify-content: center;
        white-space: nowrap;
    }
    .post-composer-dark .btn_position .custom_btn span,
    .post-composer-dark .btn_position a span,
    .post-composer-dark .btn_position button span {
        display: none !important;
    }
    .post-composer-dark .btn_position .custom_btn i,
    .post-composer-dark .btn_position a i,
    .post-composer-dark .btn_position button i {
        margin-right: 0 !important;
        font-size: 1rem !important;
    }
    .post-composer-dark .btn_position a,
    .post-composer-dark .btn_position button {
        position: relative;
        z-index: 5;
        pointer-events: auto;
    }
    .post-composer-dark .btn_position .btnListItem {
        position: relative;
        z-index: 5;
        pointer-events: auto;
    }
}
.new_width {
    width: 32px;
    height: 32px;
}
.bg-dark-force {
    border-bottom-left-radius: 32px;
    border-bottom-right-radius: 32px;
}
[data-bs-theme="dark"] .bg-dark-force .action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    /* background: #121212; */
    border-radius: 0;
}
[data-bs-theme="light"] .bg-dark-force .action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #fffcfc;
    border-radius: 0;
}

.action-bar .card-footer {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

.action-bar .card-footer.action-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* LEFT SIDE */
.action-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.action_avatar {
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
}
.action_user_info {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-rows: auto auto;
    column-gap: 4px;
    line-height: 1.15;
}
.action_user_info strong {
    grid-column: 1 / -1;
    grid-row: 1;
    font-weight: 600;
}
.action_user_info .verified {
    grid-column: 1;
    grid-row: 2;
    display: inline-flex;
    align-items: center;
}

.action_user_info .verified i {
    font-size: 14px;
    line-height: 1;
    width: auto !important;
}

.action_user_info span {
    grid-column: 2;
    grid-row: 2;
    display: inline-flex;
    align-items: center;
    justify-self: start; /* 🔑 THIS FIXES THE GAP */
}

/* RIGHT SIDE */
.action-right {
    display: flex;
    gap: 8px;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn i {
    font-size: 16px;
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* TIP BUTTON */
.tip-btn {
    background: rgba(255, 255, 255, 0.15);
    font-weight: 600;
}

.tip-btn:hover {
    background: #28a745;
}

.font_bold {
    font-weight: 600 !important;
    font-size: 16px !important;
}

.font_normal {
    font-weight: 200 !important;
    font-size: 16px !important;
}

[data-bs-theme="dark"] .font_mobile_bold {
    font-weight: 700 !important;
    font-size: 12px !important;
    color: #fff !important;
    border-bottom: 3px solid transparent !important;
}
[data-bs-theme="light"] .font_mobile_bold {
    font-weight: 700 !important;
    font-size: 12px !important;
    color: #e2394c !important;
    border-bottom: 3px solid transparent !important;
}

.font_mobile_normal {
    font-weight: 500 !important;
    font-size: 13px !important;
    
    padding: 0.5rem 0.5rem;
}
[data-bs-theme="dark"] .font_mobile_normal {
    color: #99a1af !important;
}
[data-bs-theme="light"] .font_mobile_normal {
    color: #5f5f5f !important;
}
.locked-thumb {
    position: relative;
    overflow: hidden;
}

.locked-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35); /* soft dark overlay */
}

.lock-icon {
    color: #ffffff;
    opacity: 0.95;
}

.font_weight_400 {
    font-weight: 400 !important;
}
.font_weight_500 {
    font-weight: 500 !important;
}
.font_weight_600 {
    font-weight: 600 !important;
}
.font_weight_700 {
    font-weight: 700 !important;
}
.font_size_18 {
    font-size: 18px !important;
}
.fs-12 {
    font-size: 12px !important;
}
.fs-13 {
    font-size: 13px !important;
}
.fs-14 {
    font-size: 14px !important;
}
.fs-16 {
    font-size: 16px !important;
}
.fs-18 {
    font-size: 18px !important;
}
.fs-20 {
    font-size: 20px !important;
}
.fs-24 {
    font-size: 24px !important;
}
.fs-30 {
    font-size: 30px !important;
}
.fs-32 {
    font-size: 32px !important;
}
.fs-40 {
    font-size: 40px !important;
}
.brd-8 {
    border-radius: 8px !important;
}
.margin-right-4 {
    margin-right: 4px !important;
}
a.btn.btn-category:hover,
a.btn.btn-category.active-category {
    border-radius: 8px !important;
}

.filter-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.12);
}
[data-bs-theme="light"] .filter-divider {
    background: #222 !important;
}
a.btn-category:hover,
a.btn-category:focus {
    border-radius: 8px !important;
}

/* dashboard buttons css */
.no-content {
    border-bottom: 1px solid #939393;
    border-top: 1px solid #939393;
    color: #939393;
}

[data-bs-theme="dark"] .action-count {
    /* 312 */
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #ffffff;
}
[data-bs-theme="light"] .action-count {
    /* 312 */
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #1f1f1f;
}
[data-bs-theme="dark"] .action-pill {
    background: #2d2d2d;
    color: #e5e7eb !important;
}
[data-bs-theme="light"] .action-pill {
    background: #e5e7eb;
    color: #1f1f1f !important;
}
.action-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.2s ease;
}

[data-bs-theme="dark"] .action-pill:hover {
    background: #2a2a2a;
}
/* ===== ACTIVE STATES ===== */
[data-bs-theme="dark"] .action-pill.active,
[data-bs-theme="dark"] .action-pill.text-primary {
    background: #2d2d2d;
    color: #fff !important;
}


/* ===== DISABLED ===== */
.buttonDisabled {
    pointer-events: none;
    opacity: 0.5;
}
/* ===== ICON FIX ===== */
.action-pill i,
.action-pill svg {
    font-size: 14px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bg_white {
    background: #fff !important;
    color: #000000 !important;
}
[data-bs-theme="light"] .bg_white {
    color: #344054 !important;
    background: #5f5f5f7a !important;
}
.btn_mobile_nav {
    padding: 6px 10px !important;
    background-color: #a3a3a31a !important;
    border-radius: 8px !important;
}
.btn_mobile_nav i {
    font-size: 16px !important;
    vertical-align: unset;
    gap: 6px !important;
}
.myhover_btn a.btn {
    border-radius: 8px !important;
}

[data-bs-theme="dark"] .text_color_white {
    color: #fff !important;
}
[data-bs-theme="light"] .text_color_white {
    color: #000 !important;
}
.storiesWrapper {
    display: flex;
    gap: 8px;
    overflow: auto;
}
.dashboard_story {
    border-radius: 16px !important;
    /* Frame 63 */
    width: 100px;
    height: 100px;
}
.dashboard_other_story {
    border-radius: 16px !important;
    border: 1px solid #e2394c;
}

.sidebar_li {
    padding: 4px 8px;
}
.sidebar_li a {
    font-size: 18px !important;
    font-weight: 300;
}
.sidebar_li a.active {
    font-weight: 500 !important;
}
.bd-highlight a.active {
    background: white;
    color: black !important;
    padding: 8px 12px !important;
}
[data-bs-theme="dark"] .navbar_mid_link {
    color: #ffffff !important;
}
[data-bs-theme="dark"] .sidebar_li a {
    color: #ffffff !important;
}
[data-bs-theme="dark"] .menu-left-home {
    background: #ffffff1a;
    box-shadow: 0px 4px 25px 0px #2a864214;
}
[data-bs-theme="light"] .menu-left-home {
    background: #fff;
    border: 1px solid var(--light-border);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}
[data-bs-theme="light"] .user_info h6 {
    color: #5f5f5f;
}
[data-bs-theme="light"] .user_info small {
    color: #7b8794 !important;
}

@media (max-width: 991.98px) {
    [data-bs-theme="light"] .navbar .site-header-actions .sidebar-user .user_info h6 {
        color: #14161c !important;
    }

    [data-bs-theme="light"] .navbar .site-header-actions .sidebar-user .user_info small {
        color: #667085 !important;
    }
}

.post_img {
    /* width: fit-content; */
    width: 80%;
}

[data-bs-theme="dark"] .profile-btns .pr-btn,
.profile-btns .pr-btn {
    border-radius: 100px;
    border: 1px solid #e2394c !important;
    color: #000000;
    font-weight: 500;
}
[data-bs-theme="light"] .profile-btns .pr-btn {
    border-radius: 100px;
    border: 1px solid #e2394c !important;
    color: #fff;
    font-weight: 500;
    background: #fff !important;
}
.pr-btn {
    padding: 10px 20px;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sub-btn a {
    border-radius: 100px;
    border: 1px solid #e2394c !important;
    color: #fff;
    font-weight: 500;
    background-color: #e2394c;
}
.sub-btn .btn-profile,
.sub-btn a.btn-profile,
.sub-btn button.btn-profile,
.sub-btn .btn.btn-profile {
    border-radius: 999px !important;
}
.nav_profile {
    border: 1px solid #303030;
    margin: auto;
    border-radius: 12px;
    background-color: var(--nav_profile_bg);
}
.nav_profile li.active {
    border-bottom: none !important;
}
.nav_profile li.active a {
    background-color: #000;
    padding: 6px !important;
    border-radius: 12px;
    border: 1px solid #e2394c;
    color: #ffffff !important;
}
.nav_profile li a {
    color: var(--text-color);
}
[data-bs-theme="light"] .nav_profile li a {
    color: #333;
}
.nav_link {
    padding: 12px 24px !important;
}
.nav_link a:hover {
    text-decoration: none !important;
}

/* Profile tabs (2 posts / photos / videos / shop) */
.top_side_profile {
    /*max-width: 3.3125rem; /* 549px */
    min-height: 3.75rem; /* 60px */
    padding: 0.75rem 1.5rem !important;
    gap: 0.75rem;
    border-radius: 0.75rem;
    margin-bottom: 1rem !important;
}

.top_side_profile .nav_link {
    padding: 0 !important;
    min-height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top_side_profile .nav_link a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: 500;
}

.top_side_profile .sm-btn-size {
    font-size: 1rem !important;
    line-height: 1.25rem !important;
    font-weight: 500;
}

/* Profile warning alert row */
.profile-right-col .no_sub_msg {
    display: flex;
    align-items: center;
    min-height: 2.5rem; /* 40px */
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.25rem !important;
}

.profile-right-col .no_sub_msg .list-unstyled {
    width: 100%;
    margin: 0 !important;
}

.profile-right-col .no_sub_msg li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.profile-right-col .no_sub_msg li .fa-exclamation-triangle {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1;
}

.profile-right-col .no_sub_msg li a {
    margin-left: 0.125rem;
}

/* Profile middle-content alignment */
.profile-cover {
    position: relative;
    overflow: hidden;
    background: #505050;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.profile-middle-content {
    max-width: 1440px;
    margin-inline: auto;
}

.profile-content-row {
    align-items: flex-start;
}

.profile-left-col .recent-media {
    margin-top: 1rem;
}

.profile-recent-card {
    border-radius: 2rem !important;
    padding: 1.5rem 1rem;
}

.profile-recent-title {
    padding: 0;
    margin-bottom: 1.5rem !important;
    font-size: 1.125rem;
    line-height: 1.6875rem;
    color: #fff;
}
[data-bs-theme="light"] .profile-recent-title {
    color: #5f5f5f !important;
}
.profile-recent-body {
    padding: 0 !important;
}

.profile-recent-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.033rem; /* 16.53px */
    margin: 0 !important;
}

.profile-recent-grid > [class*="col-"] {
    flex: none;
    max-width: none;
    width: auto;
    padding: 0 !important;
}

.profile-recent-grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0;
}

.profile-glass-card {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 25px rgba(42, 134, 66, 0.08);
    border-radius: 32px;
}

[data-bs-theme="dark"] .profile-muted-copy {
    color: #dadada !important;
}

[data-bs-theme="light"] .profile-muted-copy {
    color: #5f5f5f !important;
}


.profile-accent-link {
    color: #e2394c !important;
}

.profile-ppv-label {
    position: absolute;
    bottom: 10px;
    left: 0;
    color: #fff;
    font-size: 11px;
}

@media (min-width: 1200px) {
    .profile-content-row {
        display: flex;
        flex-wrap: nowrap;
        gap: 33px;
    }

    .profile-content-row .profile-left-col {
        flex: 0 0 485px;
        max-width: 485px;
        padding-right: 0;
    }

    .profile-content-row .profile-right-col {
        flex: 1 1 auto;
        max-width: none;
        padding-left: 0;
    }
}

@media (max-width: 991.98px) {
    .profile-middle-content {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .profile-recent-card {
        padding: 1rem;
    }

    .profile-recent-grid {
        gap: 0.625rem;
    }
}

@media (max-width: 575.98px) {
    .profile-middle-content {
        max-width: 21.875rem; /* 350px */
        width: 100%;
        margin-inline: auto;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .profile-content-row {
        --bs-gutter-x: 0;
        row-gap: 1rem;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .profile-content-row .profile-left-col,
    .profile-content-row .profile-right-col {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .top_side_profile {
        width: 100%;
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: stretch;
        justify-content: stretch !important;
        margin-inline: auto;
        box-sizing: border-box;
        padding: 0.3125rem !important;
        border-radius: 0.75rem;
        gap: 0.25rem;
        overflow: hidden;
    }

    .top_side_profile .nav_link {
        min-width: 0;
        width: 100%;
        flex: unset;
    }

    .top_side_profile .nav_link a {
        width: 100%;
        min-width: 0;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 0.0625rem;
        min-height: 2.7rem;
        padding: 0.3125rem 0.1875rem;
        border-radius: 0.625rem;
        font-size: 0.625rem !important;
        line-height: 0.8rem !important;
        font-weight: 600;
        text-align: center;
        white-space: normal;
        box-sizing: border-box;
        background: transparent;
        border: 1px solid transparent;
        transition: all 0.2s ease;
    }
    [data-bs-theme="dark"].top_side_profile .nav_link a {
        color: #d0d2d6 !important;
    }
    [data-bs-theme="light"].top_side_profile .nav_link a {
        color: #333 !important;
    }

    .top_side_profile .nav_link a:hover,
    .top_side_profile .nav_link a:focus {
        color: #fff !important;
        text-decoration: none !important;
    }

    .top_side_profile .nav_link.active > a,
    .top_side_profile .nav_link.active > a:hover,
    .top_side_profile .nav_link.active > a:focus {
        background: #191a1f !important;
        min-width: 0;
        padding: 0.3125rem 0.1875rem !important;
        border-color: #e2394c !important;
        color: #fff !important;
        box-shadow: 0 0 0 1px rgba(226, 57, 76, 0.2);
    }

    .top_side_profile .sm-btn-size {
        font-size: 0.6875rem !important;
        line-height: 0.85rem !important;
        font-weight: 700;
        color: inherit !important;
        display: block;
        margin-right: 0;
    }

    .top_side_profile .nav_link svg,
    .top_side_profile .nav_link i {
        display: none !important;
    }

.top_side_profile .nav_link .d-lg-inline-block {
    display: block !important;
    max-width: 100%;
    overflow-wrap: anywhere;
}

    .profile-right-col .no_sub_msg {
        max-width: 21.875rem;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .top_side_profile .nav_link a {
        min-height: 2.25rem;
        padding: 0.5rem 0.6875rem;
        border-radius: 999px;
        font-size: 0.875rem !important;
        line-height: 1.125rem !important;
        font-weight: 600;
    }

    .top_side_profile .nav_link.active > a,
    .top_side_profile .nav_link.active > a:hover,
    .top_side_profile .nav_link.active > a:focus {
        background: #191a1f !important;
        border-color: #e2394c !important;
        color: #fff !important;
    }
}

/* Final profile-tab state overrides to avoid white text flash on click */
[data-bs-theme="light"] .top_side_profile .nav_link a:hover,
[data-bs-theme="light"] .top_side_profile .nav_link a:focus,
[data-bs-theme="light"] .top_side_profile .nav_link a:active {
    color: #333 !important;
}

[data-bs-theme="light"] .top_side_profile .nav_link.active > a,
[data-bs-theme="light"] .top_side_profile .nav_link.active > a:hover,
[data-bs-theme="light"] .top_side_profile .nav_link.active > a:focus,
[data-bs-theme="light"] .top_side_profile .nav_link.active > a:active {
    background: #fdecef !important;
    border-color: #e2394c !important;
    color: #5f5f5f !important;
}

/* Keep public and logged-in profile tabs visually aligned */
.profile-unified-tabs {
    background: #303030 !important;
    border-color: #303030 !important;
}

.profile-unified-tabs .nav_link a,
[data-bs-theme="light"] .profile-unified-tabs .nav_link a,
[data-bs-theme="dark"] .profile-unified-tabs .nav_link a {
    color: #f5f5f5 !important;
}

.profile-unified-tabs .nav_link.active > a,
.profile-unified-tabs .nav_link.active > a:hover,
.profile-unified-tabs .nav_link.active > a:focus,
[data-bs-theme="light"] .profile-unified-tabs .nav_link.active > a,
[data-bs-theme="light"] .profile-unified-tabs .nav_link.active > a:hover,
[data-bs-theme="light"] .profile-unified-tabs .nav_link.active > a:focus,
[data-bs-theme="dark"] .profile-unified-tabs .nav_link.active > a,
[data-bs-theme="dark"] .profile-unified-tabs .nav_link.active > a:hover,
[data-bs-theme="dark"] .profile-unified-tabs .nav_link.active > a:focus {
    background: #000 !important;
    border-color: #e2394c !important;
    color: #fff !important;
}

.profile-unified-tabs .sm-btn-size,
[data-bs-theme="light"] .profile-unified-tabs .sm-btn-size,
[data-bs-theme="dark"] .profile-unified-tabs .sm-btn-size {
    color: inherit !important;
}

.profile-video-locked-card {
    background: #101010;
}

.profile-video-locked-image {
    filter: blur(7px);
    transform: scale(1.04);
}

.profile-video-locked-overlay {
    background: rgba(0, 0, 0, 0.45);
}

.text_color_white {
    color: #fff !important;
}
.main-no-updates {
    background-color: var(--no-updates-main-bg);
    padding: 18px;
}
.sub-no-updates {
    background-color: var(--no-updates-sub-bg);
    border-radius: 14px;
    padding: 56px 18px;
}
.bg_black {
    background-color: var(--no-updates-card-bg);
    border: 1px solid var(--no-updates-border) !important;
}

.no-updates-div {
    padding: 10px 0 0;
}
.no-updates-link {
    background: var(--no-updates-card-bg);
    border-radius: 12px;
    width: fit-content;
    margin: auto;
    padding: 10px 14px;
}

.main-no-updates .ico-no-result {
    width: 110px;
    height: 110px;
    line-height: 110px !important;
    font-size: 46px;
    border-width: 2px;
    margin-bottom: 20px !important;
}

.text_decor_underline {
    text-decoration: underline !important;
}
.plus_icon i {
    height: 16px;
    width: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.item-add-story:hover {
    text-decoration: none !important;
}

#btnLoginRegister {
    border-radius: 8px;
}

.forgotpwd-form-left small.text-start {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    /* or 162% */
    display: flex;
    align-items: center;
    /* neutral/400 */
    color: #a3a3a3;
}
.login-form-or {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    /* identical to box height, or 125% */
    text-align: center;
    /* neutral/400 */
    color: #a3a3a3;
}

.title_home_login {
    /* Join now and start making money with your content! */
    font-style: normal;
    font-weight: 300;
    font-size: 18px !important;
    line-height: 33px;
    /* or 138% */
    display: flex;
    align-items: center;

    /* neutral/400 */
    color: #a3a3a3;
}

/* Sign in to your account to continue */
.title_login {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    /* identical to box height, or 162% */
    display: flex;
    align-items: center;

    /* neutral/400 */
    color: #a3a3a3;
}
/* Label */

#loginSpan {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
}

/* =========================
   Auth Shell: Shared Base
   ========================= */
/* Auth screens: login/signup/forgot/reset */
.auth-shell {
    background: #000;
    min-height: calc(100vh - 72px);
    padding: 20px 0 28px;
}
.auth-shell-container {
    max-width: 1320px;
}
.auth-shell-row {
    background: #000;
    border-radius: 24px;
    overflow: hidden;
    min-height: 760px;
}
.auth-form-left {
    max-width: 540px;
    margin: 0 auto;
    padding: 44px 46px;
    color: #fff;
    font-family: "Plus Jakarta Sans", "Poppins", sans-serif;
}
.auth-title {
    color: #fff;
    font-size: 46px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0;
}
.auth-shell .title_login,
.auth-shell .title_home_login {
    color: #a3a3a3;
}
.auth-shell .title_login {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
}
.auth-shell .login-form-or {
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    color: #a3a3a3;
}
.auth-shell .input-group-alternative {
    border-radius: 10px;
    box-shadow: none;
    border: 1px solid #1f1f1f;
    background: #161616;
}
.auth-shell .input-group-alternative .form-control,
.auth-shell .input-group-alternative .input-group-text {
    height: 48px;
    color: #fff;
    background: transparent !important;
}
.auth-shell .input-group-alternative .form-control {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
}
.auth-shell .input-group-alternative .form-control::placeholder {
    color: #8c8c8c;
    font-weight: 400;
}
.auth-shell .input-group-text {
    color: #8d8d8d;
}
.auth-shell .form-group > .mb-1 span {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}
.auth-shell .auth-form-btn {
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}
.auth-shell .btn-twitter,
.auth-shell .btn-twitter:hover,
.auth-shell .btn-twitter:active,
.auth-shell .btn-twitter:focus {
    background: transparent;
    color: #fff;
    border-color: #333;
}
.auth-shell .btn-apple,
.auth-shell .btn-apple:hover,
.auth-shell .btn-apple:active,
.auth-shell .btn-apple:focus {
    background: transparent;
    color: #fff;
    border-color: #333;
}
.auth-shell .btn-primary {
    height: 52px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    background: #e2394c;
    border-color: #e2394c;
}
.auth-shell .btn-primary:hover,
.auth-shell .btn-primary:focus {
    background: #d52d41;
    border-color: #d52d41;
}
.auth-shell #forgotPassword {
    color: #fff;
    text-decoration: none;
}
.auth-shell #forgotPassword:hover {
    color: #fff;
    text-decoration: underline;
}
.auth-shell .custom-control-label,
.auth-shell .custom-control-label span {
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 400;
}
.auth-shell .custom-control-label::before {
    background: #fff;
    border: 0;
}
.auth-shell .custom-control-input:checked ~ .custom-control-label::before {
    background: #fff;
    border: 0;
}
.auth-shell .custom-control-input:checked ~ .custom-control-label::after {
    filter: invert(1);
}
.auth-shell .auth-switch {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}
.auth-shell .auth-switch a {
    color: #e2394c;
    font-weight: 600;
}
.auth-shell .auth-switch a:hover {
    color: #e2394c;
}
.auth-shell .alert-danger {
    background: #ff1f1f;
    border-color: #ff1f1f;
    color: #fff;
    border-radius: 10px;
}
.auth-shell .alert-success {
    border-radius: 10px;
}
.auth-right-panel {
    position: relative;
    padding: 48px 54px;
}
.auth-right-panel .title_home_login {
    font-size: 42px !important;
    line-height: 1.35;
    font-weight: 300;
    margin-top: 28px;
    max-width: 520px;
}
.auth-right-panel .stack-img {
    opacity: 0.62;
    max-width: 540px;
}
.auth-hero-logo {
    width: 270px;
    height: auto;
}
.make_withdraw_btn {
    border: 1px solid #eaecf0;
    border-radius: 20px;
    padding: 8px 12px;
}
.btn-success {
    border-radius: 8px;
}

.card-container {
    width: 100%;
    max-width: 420px;
    padding: 16px 0;
}

/* CARD */
.credit-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1.586;
    border-radius: 22px;
    padding: 24px;
    color: #ffffff;
    background-image: url("../img/cards/card-bg.png"); /* ← previous generated image */
    background-size: cover;
    background-position: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

/* CHIP */
.card-chip {
    width: 52px;
    height: 40px;
    border-radius: 8px;
}

/* BRAND */
.card-brand {
    position: absolute;
    top: 24px;
    right: 24px;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 1px;
}

/* NUMBER */
.card-number {
    margin-top: 48px;
    font-size: 22px;
    letter-spacing: 3px;
    font-weight: 500;
}

/* FOOTER */
.card-footer {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    background: none;
    border: none;
}

.card-actions {
    display: flex;
    align-items: center;
    gap: 12px; /* space between buttons */
}
/*
.card-updates {
    border-radius: 32px !important;
    border: none !important;
    background-color: transparent !important;
}*/
[data-bs-theme="dark"] .card-user-profile {
    background: #191919;
}
[data-bs-theme="light"] .card-user-profile {
    background: #fff;
}

.card-updates-cover-image,
div.media-post {
    background-color: #303030;
    text-align: center;
    position: relative;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
}

[data-bs-theme="dark"] .card-updates-cover-image {
    background-color: #303030;
}

[data-bs-theme="light"] .card-updates-cover-image,
[data-bs-theme="light"] div.media-post {
    background-color: #fff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05) !important;
}
.post-options {
    position: absolute;
    top: 15px;
    right: 15px;
}
[data-bs-theme="dark"] .bg-dark-force {
    background-color: #1a1a1a !important;
}
[data-bs-theme="light"] .bg-dark-force {
    background-color: #fff !important;
}
.text-white-force {
    color: #fff !important;
}
.comment-icons {
    top: 40%;
    right: 0;
    display: block;
}
.comment-input-padding {
    padding-right: 95px;
}

.text-lime {
    color: #a3a3a3;
}

.inline-padding {
    padding-inline: 3rem;
}

.image-stack {
    position: relative;
    margin-top: 40px;
}
.stack-img {
    position: absolute;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    z-index: 3;
    opacity: 0.5;
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

/* notification page css started  */
[data-bs-theme="dark"] .lead {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-color);
}
[data-bs-theme="light"] .lead {
    font-size: 14px;
    font-weight: 400;
    /* color: #1402024d; */
}

[data-bs-theme="dark"] .notify-card {
    background: #ffffff1a;
    border-radius: 12px;
    padding: 16px 18px;
    color: var(--text-color);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}

[data-bs-theme="light"] .notify-card {
    background: linear-gradient(180deg, #0c0c0c1f, #14141400);
    border-radius: 12px;
    padding: 16px 18px;
    color: var(--text-color);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}

.notify-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.notify-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: #ffffff;
}

.notify-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notify-time {
    font-size: 12px;
    color: #b3b3b3;
}

.notify-menu {
    font-size: 20px;
    color: #b3b3b3;
    cursor: pointer;
    line-height: 1;
}

.notify-text {
    font-size: 14px;
    line-height: 1.6;
    color: #d0d0d0;
    margin: 0;
}
[data-bs-theme="dark"] .notify-div {
    background-color: #000000;
    border-radius: 8px;
}

[data-bs-theme="light"] .notify-div {
    background-color: #ffffff;
    color: #000;
    border-radius: 8px;
}
[data-bs-theme="dark"] .notify-border {
    border-left: 3px solid #e2e8f0;
}
[data-bs-theme="light"] .notify-border {
    border-left: 3px solid #000;
}

/* notification page css ended */

/* dashbaord page css started  */
.dash-card {
    min-height: 113px;
    background: #ffffff1a;
    border-radius: 12px;
    padding: 16px 18px;
    color: #ffffff;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
[data-bs-theme="dark"] .large-dash-card {
    background: #ffffff1a;
    border-radius: 12px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
[data-bs-theme="light"] .large-dash-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.dash-card-mini {
    background: #ffffff1a;
    border-radius: 12px;
    padding: 16px 18px;
    color: #ffffff;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.dash-icon-span {
    padding: 9px 12px;
    color: #fff;
}

.icon-dash {
    border: 1px solid;
    border-radius: 20px;
}
.dash-content h4 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: bold;
}
[data-bs-theme="light"] .dash-content {
    color: black;
}
[data-bs-theme="light"] .dash-card {
    background: #fff;
}
[data-bs-theme="dark"] .dash-icon-span .text-primary {
    color: #fff !important;
}

[data-bs-theme="dark"] .lay-dash-icon {
    color: white;
}
[data-bs-theme="light"] .lay-dash-icon {
    color: #495057;
}
[data-bs-theme="light"] .list-group-item.active .lay-dash-icon,
[data-bs-theme="light"] .list-group-item:hover .lay-dash-icon {
    color: #ffffff !important;
}

.sub-success {
    background-color: #e5fcda;
    color: #239a3c;
    font-size: 10px;
}
.sub-warning {
    background-color: #fff;
    color: #d8cb5c;
    font-size: 10px;
}
.sub-danger {
    background-color: #ad9494;
    color: #db0808;
    font-size: 10px;
}
[data-bs-theme="dark"] .pay-head {
    background-color: #191919 !important;
    border-radius: 8px 8px 0 0;
}
[data-bs-theme="light"] .dash-card-mini {
    color: black;
    background: #fff;
}
[data-bs-theme="light"] .pay-head-main {
    color: black;
    background: #fff;
}

[data-bs-theme="light"] .icon-dash {
    border: 1px solid #1402024d;
}
/* dashbaord page css ended */

/* referrals style  started*/
[data-bs-theme="dark"] .referral-link-card .card-body {
    background-color: #191919;
}

[data-bs-theme="light"] .referral-link-card .card-body {
    background-color: #ffffff;
}

.referral-link-card .card-body {
    padding: 0.875rem 1rem;
}

.referral-link-card .form-label {
    font-size: 1.0625rem;
    margin-bottom: 0.5rem;
}

.referral-link-card .form-control {
    height: 2.75rem;
    font-size: 1.0625rem;
}

.referrals-copy-btn {
    min-width: 9.25rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-top-left-radius: unset;
    border-bottom-left-radius: unset;
}

.referrals-copy-btn .referrals-copy-btn-text {
    display: inline;
    margin: 0 !important;
    line-height: 1.1;
}

[data-bs-theme="dark"] .referrals-copy-btn {
    background: #232a33;
    border-color: #232a33;
}

[data-bs-theme="light"] .referrals-copy-btn {
    background: #232a33;
    border-color: #232a33;
}

@media (max-width: 47.99875rem) {
    .referral-link-card .card-body {
        padding: 0.75rem;
    }

    .referral-link-card .form-control {
        height: 2.5rem;
        font-size: 0.95rem;
    }

    .referrals-copy-btn {
        min-width: auto;
        padding: 0.45rem 0.75rem;
    }
}

[data-bs-theme="dark"] .small-text {
    font-size: 14px;
    color: #efefef;
}

[data-bs-theme="dark"] .ref-card-body {
    background-color: #191919;
}
[data-bs-theme="light"] .ref-card-body {
    background-color: #fff;
}

.ref-card-body {
    box-shadow: 0px 0px 30px 2px #00000012;
    border-radius: 8px;
    padding: 1rem;
    min-height: 162px;
}

.ref-stats-row > [class*="col-"] {
    display: flex;
}

.ref-stats-row .ref-card {
    width: 100%;
}

.ref-stats-row .ref-card-body {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ref-stats-row .ref-stat-title {
    display: block;
    min-height: 3.5rem;
    line-height: 1.3;
}

.ref-stats-row .ref-stat-value {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    overflow-wrap: anywhere;
}

.ref-stats-row .current_balance .color-link {
    margin-top: auto;
    align-self: flex-start;
}

@media (max-width: 575.98px) {
    .ref-stats-row .ref-card-body {
        min-height: 9rem;
        padding: 0.875rem;
    }

    .ref-stats-row .ref-card-body:not(.current_balance) {
        align-items: flex-start !important;
        text-align: left;
    }

    .ref-stats-row .ref-card-body:not(.current_balance) > div {
        width: 100%;
    }

    .ref-stats-row .ref-stat-title {
        min-height: 2.6rem;
    }

    .ref-stats-row .ref-stat-value {
        margin-top: 0.35rem !important;
    }
}

[data-bs-theme="dark"] .color-link {
    color: #ffffff !important;
    border: 1px solid #eaecf0;
}

[data-bs-theme="light"] .color-link {
    color: #23282f !important;
    border: 1px solid #23282f;
}

.color-link {
    font-size: 12px;
    border-radius: 20px;
    padding: 8px 12px;
    margin-top: 12px;
}

[data-bs-theme="dark"] .v-div {
    background: #191919 !important;
}
[data-bs-theme="light"] .v-div {
    background: #ffffff !important;
}

[data-bs-theme="dark"] .v-div h4 {
    color: #ffffff;
}
[data-bs-theme="light"] .v-div h4 {
    color: #181616;
}

.v-div {
    padding: 1rem;
    border-radius: 8px 8px 0 0 !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.v-div h4 {
    margin: 0;
    font-weight: 500;
    white-space: nowrap;
    font-size: clamp(14px, 2.5vw, 18px);
}
/* referrals style ended*/

.icon_wrap {
    position: absolute;
    top: -30px;
    right: 0;
    z-index: 0;
    font-size: 115px;
    color: rgba(0, 0, 0, 0.1);
}

.alert_custom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 403px;
    border-radius: 16px;
}
.wallet_inner_text {
    font-size: 128px !important;
}
.wallet_ac_detail {
    background-color: #fff;
    border-radius: 12px;
    padding: 14px 32px !important;
    color: #475467;
}
.wallet_ac_detail p {
    overflow-wrap: anywhere;
}
.amt_input {
    border-radius: 12px !important;
    color: #a3a3a3;
    font-size: 16px !important;
    font-weight: 400 !important;
}

.subscription-card {
    background: #1a1a1a;
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #333;
    transition: all 0.3s ease;
    width: 100%;
}
.lock_dim {
    height: 80px;
}
.tip_modal_main_div {
    border-radius: 20px;
    border: none;
}
.tip_modal_card {
    border-radius: 20px;
    overflow: hidden;
}
.tip_modal_card_header {
    height: 327px !important;
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
}
.tip_modal_icon_wrap {
    min-width: 40px;
    text-align: center;
    background: #2b2e41;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    padding: 10px 0px;
    color: #ffffff;
}
.tip_modal_input {
    border-radius: 10px;
}
.tip_modal_cancel {
    border-color: #ff4b60;
    color: #ff4b60;
    border-radius: 8px;
}
.tip_modal_cancel:hover {
    background-color: #000;
}
.tip_modal_send {
    background-color: #ff4b60;
    border-color: #ff4b60;
    border-radius: 8px;
}
.tip_modal_send:hover {
    background-color: #ff4b60;
}
.side_bar_box_shadow {
    box-shadow: 0px 4px 25px 0px #2a864214;
    /* padding-left: 0px; */
}
.subscription_card_main_div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.subscription_card_main_div_no_gap {
    display: flex;
    justify-content: space-between;
}
.gap_10px {
    gap: 10px !important;
}
.main_head_search {
    top: 9px;
    right: 35px;
    gap: 6px;
    margin-right: 20px;
}
.currency_span {
    background-color: #161616 !important;
    border: none !important;
}

.brd-12 {
    border-radius: 8px;
}

/* Message */
.wrapper-msg-inbox {
    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0px 4px 25px 0px #2a864214;
    border-radius: 32px;
    margin-bottom: 16px;
}
[data-bs-theme="dark"] .wrapper-msg-inbox {
    background: #191919 !important;
}

[data-bs-theme="light"] .wrapper-msg-inbox {
    background: #f6f6f6 !important;
}

/* Direct Messages */
.wrapper-msg-inbox .direct_message_title {
    font-size: 18px !important;
    line-height: 27px;
    /* identical to box height */
    display: flex;
    align-items: flex-end;
}

.wrapper-msg-inbox .msg-inbox {
    /* Frame 1618873295 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    padding: 8px 0 8px 0;
    gap: 12px;
    background: none;
}
.wrapper-msg-inbox .msg-inbox .list-group-item {
    background: none;
    padding: 8px;
}
/* Avatar */

/* Frame 1618873294 */
.wrapper-msg-inbox .msg-inbox .list-group-item:hover,
.wrapper-msg-inbox .msg-inbox .list-group-item.active {
    /* Auto layout */
    background: rgba(250, 255, 251, 0.1);
    border-radius: 16px;
}

/* Frame 1618873318 */
.section-msg .messageDiv {
    box-sizing: border-box;
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: left;
    padding: 24px;
    gap: 32px;
    isolation: isolate;
    overflow-y: auto;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 32px;
    margin-right: 16px;
    margin-bottom: 16px;
}

[data-bs-theme="dark"] .section-msg .messageDiv {
    background: #191919;
}

.section-msg .card-header {
    background: none;
}

.section-msg .message {
    /* Frame 1618873299 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 16px;
    gap: 10px;
    background: #f7fcf8;
    border-radius: 16px 16px 16px 0px;
    /* Hey Oliver! How's it going? */
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    /* identical to box height, or 150% */

    align-items: flex-end;

    /* Text 2 */
    color: #344054;
}

.section-msg .side_bar_box_shadow {
    display: flex;
    flex-direction: column;
    padding-left: 0px;
}

.section-msg .side_bar_box_shadow ul {
    flex: 1;
}
.section-msg .sidebar_li {
    padding: 0;
}
.section-msg .card-footer {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* Frame 1618873319 */
.media-message-profile-center {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 16px;
    width: 100%;
    margin-left: 2rem;
}
.startAudioCall,
.startVideoCall,
.vertical-ellipsis {
    /* Auto Layout Horizontal */
    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 10px;

    background: rgba(255, 255, 255, 0.1);
    /* Custom/Custom 2 */
    box-shadow: 0px 0px 50px rgba(90, 108, 234, 0.08);
    border-radius: 12px;
}

.startAudioCall .icon-phone:before {
    content: "\e8aa" !important;
}

.startVideoCall .icon-video:before {
    content: "\e8ec" !important;
}

/* started Subscription price */
.btn-save-subs {
    width: 100%;
    background: #e2394c;
    border-radius: 8px;
    padding: 10px;
    color: #fff;
}
[data-bs-theme="dark"] .input-group-sub .form-control,
[data-bs-theme="dark"] .input-group-sub .input-sub-text {
    border: 0;
    box-shadow: none;
    background-color: #161616 !important;
}
[data-bs-theme="light"] .input-group-sub .form-control,
[data-bs-theme="light"] .input-group-sub .input-sub-text {
    box-shadow: none;
    background-color: #fff !important;
}
/* [data-bs-theme="light"] .input-group-sub{
    border: 1px solid #ced4da;
} */
.input-sub-text {
    transition: box-shadow 0.15s ease;
    border: 1px solid #ced4da;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    display: flex;
    margin-bottom: 0;
    padding: 0.625rem 0.75rem;
    text-align: center;
    white-space: nowrap;
    color: #adb5bd;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    background-color: #fff;
    align-items: center;
    box-shadow:
        0 1px 3px rgba(50, 50, 93, 0.15),
        0 1px 0 rgba(0, 0, 0, 0.02);
}

.list-group-item-action {
    color: #222;
}
.list-group-item-action:hover {
    color: #222;
}
.sub-span-text {
    color: #a3a3a3;
    font-size: 12px;
}
/* ended Subscription price */

#navbarFilters a,
#navbarUserHome a {
    padding: 5px 12px;
}

/* Payout Method */
.payout-method .payment-card-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.payout-method .payment-card-wrapper {
    position: relative;
}

/* Hide radio */
.payout-method .payment-radio {
    position: absolute;
    opacity: 0;
}

/* Card UI */
.payout-method .payment-card {
    background: #ffffff;
    border-radius: 20px;
    height: 120px;
    padding: 26px 28px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;

    cursor: pointer;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
    transition: all 0.25s ease;
}

.payout-method .payment-card.checked {
    background: #e85a6a;
}

/* Rectangle 34625336 */

.payout-method .payment-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #f3f4ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payout-method .payment-card.checked .payment-icon {
    background: #f4f3ff;
}

.payout-method .payment-icon img {
    width: 26px;
    background: #e2394c;
}

.payout-method .payment-icon .icon-sm-radio {
    background: #e2394c;
}

[data-bs-theme="light"] .icon-sm-radio {
    color: #ffffff !important;
}
.payout-method .payment-text {
    font-weight: 500;
    font-size: 16px;
    line-height: 125%;
    /* identical to box height, or 20px */
    display: flex;
    align-items: center;

    color: #000000;
}

.payout-method .payment-card.checked .payment-text {
    font-weight: 500;
    font-size: 16px;
    line-height: 125%;
    /* identical to box height, or 20px */
    display: flex;
    align-items: center;

    color: #ffffff;
}

/* SELECTED */
.payout-method .payment-radio:checked + .payment-card {
    background: #e85a6a;
}

.payout-method .payment-radio:checked + .payment-card .payment-text {
    color: #fff;
}

.payout-method .payment-radio:checked + .payment-card .payment-icon {
    background: rgba(255, 255, 255, 0.25);
}

/* Hover */
.payout-method .payment-card:hover {
    transform: translateY(-4px);
}

.payout-method .text-success {
    color: #e2394c !important;
}

/* Payout Method */

.bg_prime_e3 {
    background-color: #e2394c !important;
    border-color: #e2394c !important;
    color: white !important;
}

/* ===== SweetAlert2 Dark Theme (CloseOnly) ===== */

.swal2-popup {
    background: #2b2b2b !important;
    color: #ffffff !important;
    border-radius: 16px !important;
    padding: 28px 24px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}

/* Title */
.swal2-title {
    color: #ffffff !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
}

/* Text */
.swal2-html-container {
    color: #b0b0b0 !important;
    font-size: 15px !important;
}

/* Icon */
.swal2-icon.swal2-error {
    border-color: #e35a5a !important;
}

.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
    background-color: #e35a5a !important;
}

/* Buttons wrapper */
.swal2-actions {
    margin-top: 24px !important;
    gap: 12px !important;
}

/* Confirm (Delete) button */
.swal2-confirm {
    background: #e35a5a !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.swal2-confirm:hover {
    background: #d94b4b !important;
}

/* Cancel button */
.swal2-cancel {
    background: #bdbdbd !important;
    color: #1e1e1e !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.swal2-cancel:hover {
    background: #a8a8a8 !important;
}

/* Remove default focus outline */
.swal2-confirm:focus,
.swal2-cancel:focus {
    box-shadow: none !important;
}

/* Animation smoothness */
.swal2-popup {
    animation: swalFadeIn 0.25s ease-out;
}

[data-bs-theme="dark"] .sweet-alert {
    background-color: #2b2b2b; /* charcoal panel */
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65);
}

/* Title */
[data-bs-theme="dark"] .sweet-alert h2 {
    color: #ffffff;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Description */
[data-bs-theme="dark"] .sweet-alert p {
    color: #b0b0b0;
    font-size: 14.5px;
    line-height: 1.5;
}

/* ==============================
   Error Icon
============================== */

[data-bs-theme="dark"] .sweet-alert .sa-icon.sa-error {
    border-color: #e35a5a; /* coral red */
}

[data-bs-theme="dark"] .sweet-alert .sa-icon.sa-error .sa-line {
    background-color: #e35a5a;
}

/* ==============================
   Buttons
============================== */

[data-bs-theme="dark"] .sweet-alert button {
    border-radius: 10px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    box-shadow: none;
    transition: background-color 0.2s ease;
}

/* Confirm (Primary / Delete) */
[data-bs-theme="dark"] .sweet-alert button.confirm {
    background-color: #e35a5a !important; /* coral */
    color: #ffffff;
}

[data-bs-theme="dark"] .sweet-alert button.confirm:hover {
    background-color: #d94b4b !important;
}

/* Cancel (Secondary) */
[data-bs-theme="dark"] .sweet-alert button.cancel {
    background-color: #3a3a3a !important; /* dark neutral */
    color: #d0d0d0;
}

[data-bs-theme="dark"] .sweet-alert button.cancel:hover {
    background-color: #444444 !important;
}

/* Focus cleanup */
[data-bs-theme="dark"] .sweet-alert button:focus {
    outline: none;
}

/* ==============================
   SweetAlert v1 – LIGHT THEME
   (White / Soft Gray + Coral)
============================== */

[data-bs-theme="light"] .sweet-alert {
    background-color: #ffffff !important;
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.18);
}

/* Title */
[data-bs-theme="light"] .sweet-alert h2 {
    color: #1e1e1e !important;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Description */
[data-bs-theme="light"] .sweet-alert p {
    color: #5f5f5f !important;
    font-size: 14.5px;
    line-height: 1.5;
}

/* ==============================
   Error Icon
============================== */

[data-bs-theme="light"] .sweet-alert .sa-icon.sa-error {
    border-color: #e35a5a !important; /* coral red */
}

[data-bs-theme="light"] .sweet-alert .sa-icon.sa-error .sa-line {
    background-color: #e35a5a !important;
}

/* ==============================
   Buttons
============================== */

[data-bs-theme="light"] .sweet-alert button {
    border-radius: 10px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    box-shadow: none;
    transition: background-color 0.2s ease;
}

/* Confirm (Primary / Delete) */
[data-bs-theme="light"] .sweet-alert button.confirm {
    background-color: #e35a5a !important;
    color: #ffffff !important;
}

[data-bs-theme="light"] .sweet-alert button.confirm:hover {
    background-color: #d94b4b !important;
}

/* Cancel (Secondary) */
[data-bs-theme="light"] .sweet-alert button.cancel {
    background-color: #f0f0f0 !important;
    color: #333333 !important;
}

[data-bs-theme="light"] .sweet-alert button.cancel:hover {
    background-color: #e4e4e4 !important;
}

/* Focus cleanup */
[data-bs-theme="light"] .sweet-alert button:focus {
    outline: none;
}

/* Footer */
[data-bs-theme="dark"] .footer-bg {
    background: #171717 !important;
    /* neutral/900 */
    border-top: 1px solid #171717 !important;
}
div.footer-bg {
    padding-top: 0px !important;
}
footer.footer-bg {
    padding-bottom: 0px !important;
}
/* Footer */

/* Password Strength Meter */
.strength-bar {
    width: 100%;
    height: 12px;
    background: #e5e5e5;
    border-radius: 12px;
    margin-top: 12px;
    overflow: hidden;
}

.strength-fill {
    height: 100%;
    width: 0%;
    background: red;
    border-radius: 12px;
    transition:
        width 0.3s ease,
        background-color 0.3s ease;
}

.strength-text {
    margin-top: 6px;
    font-size: 14px;
    color: #bdbdbd;
}

.strength-hint {
    margin-top: 10px;
    font-size: 15px;
    color: #ff3b3b;
}
/* Password Strength Meter */
.my_flash_main {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 400;
}
[data-bs-theme="light"] .my_flash_main {
    color: black !important;
}

[data-bs-theme="dark"] .my_flash_main {
    color: white !important;
}

.go_to_page_btn {
    border-radius: 8px !important;
    background: #ffffff;
    color: #e2394c !important;
}

[data-bs-theme="light"] .list-group-item.active {
    color: #222;
}
[data-bs-theme="light"] .list-group-item.active i {
    color: #fff;
}
[data-bs-theme="light"] .go_to_page_btn {
    border: 1px solid #6c757d;
}

[data-bs-theme="light"] .grid-img {
    background-color: #6c757d;
}

.not_creator_alert {
    padding: 20px 32px;
    border-radius: 16px;
    background: #ffffff33;
}

[data-bs-theme="light"] .not_creator_alert {
    border: 1px solid #6c757d;
}

[data-bs-theme="dark"] .dark_all_dropdown {
    background-color: #161616 !important;
}

.menu_mobile_active_link a.active {
    background-color: #e2394c !important;
    border-radius: 8px !important;
}

.remove_bg_white {
    background: transparent !important;
}
.top_left_right_brd {
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
}
@media (min-width: 40em) {
    /* Bump up size of carousel content */
    .carousel-caption p {
        margin-bottom: 1.25rem;
        font-size: 1.25rem;
        line-height: 1.4;
    }
}

@media (min-width: 992px) {
    .alert_custom {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 403px;
    }
}

[data-bs-theme="light"] .bg-whitee {
    background-color: #f5f5f5 !important;
}
.section {
    min-height: 80vh !important;
    padding-bottom: 0px !important;
}
@media (max-width: 991px) {
    [data-bs-theme="dark"] .section {
        background: #000 !important;
    }
    [data-bs-theme="light"] .section {
        background: #f9f6f6 !important;
    }
    .navbar {
        border: none !important;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 0;
    }

    .navbar-brand {
        padding: 0% !important;
    }
    .post_img {
        width: 100%;
    }

    .alert_custom {
        width: 350px;
        height: 255px;
    }
    .wallet_inner_text {
        font-size: 50.35px !important;
    }
    .lock_dim {
        height: 60px;
    }
    .payment-footer {
        display: block !important;
    }
    .payment-method-container {
        padding: 0px !important;
    }
    .btn-back,
    .btn-transfer {
        width: 100% !important;
        margin-bottom: 10px;
    }
    .mobile_small_fs {
        font-size: 14px !important;
    }
    .go_to_page_btn {
        padding: 8px 8px !important;
    }
    .payout-method .payment-card-group {
        grid-template-columns: 1fr;
    }

    .navbar .navbar-collapse {
        position: fixed;
        right: -100%;
        width: 100%;
        top: 0;
        height: 100%;
        background: #fff;
        z-index: 999999;
        overflow-y: scroll;
        -webkit-transition: all 0.25s ease-out;
        -o-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
        padding: 15px;
    }
    .navbar .navbar-collapse .close-menu {
        color: #000;
        padding: 2px 4px;
        background: transparent;
        display: inline-block;
        cursor: pointer;
        font-size: 25px;
        text-align: center;
        font-weight: 100;
        text-decoration: none;
    }
    .dd-menu:before,
    .dd-menu-user:before {
        border: none;
    }
    .carousel-caption .display-4 {
        font-size: 3.1rem;
    }
    .item h5 {
        line-height: 1.2 !important;
    }
    .social-links {
        text-align: center !important;
        margin-top: 10px;
    }
    .list-social {
        float: none !important;
    }
    .copyright {
        text-align: center;
    }
    .btn-create {
        margin-top: 10px;
    }
    .navbar .navbar-collapse.show {
        right: 0;
    }
    .navbar .navbar-collapse .navbar-nav .nav-item .nav-link:not(.btn) {
        color: #000000;
    }
    .input-search {
        border: 1px solid #c1c1c1 !important;
    }
    .navbar .navbar-nav .nav-item {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-bottom: 0.25rem;
    }
    .navbar .navbar-nav .nav-item .nav-link {
        display: block;
        padding: 0.625rem;
    }
    .dropdown .dropdown-menu {
        display: none;
    }
    .dropdown.show .dropdown-menu,
    .dropdown-menu.open {
        display: block;
        box-shadow: none;
    }
    .home,
    .homepage {
        padding-bottom: 50px !important;
    }
    .homepage {
        padding-top: 100px !important;
    }
    .img-post {
        height: 250px !important;
    }
    .btn-w {
        width: 100%;
    }
    .btn-w-mb {
        width: 100%;
        margin-bottom: 10px;
    }
    .first {
        order: 1;
    }
    .second {
        order: 2;
    }
    .link-border {
        float: none !important;
    }
    .btn-profile {
        margin-bottom: 0.5rem !important;
    }
    .btn-profile,
    .w-small-100 {
        width: 100%;
    }
    .d-flex-user {
        display: inherit !important;
    }
    .navbar-collapse .navbar-toggler {
        position: relative;
        display: inline-block;
        width: 20px;
        height: 20px;
        padding: 0;
        cursor: pointer;
    }
    .navbar-collapse .navbar-toggler span {
        position: absolute;
        display: block;
        width: 100%;
        height: 2px;
        opacity: 1;
        border-radius: 2px;
        background: #283448;
    }
    .navbar-collapse .navbar-toggler :nth-child(1) {
        transform: rotate(135deg);
    }
    .navbar-collapse .navbar-toggler :nth-child(2) {
        transform: rotate(-135deg);
    }
    .section-sm {
        padding-bottom: 48px !important;
    }
    .avatar-chat {
        width: 25px;
        height: 25px;
    }
    .loading-name {
        width: 60% !important;
    }
    .loading-time {
        width: 40% !important;
    }
}

@media (max-width: 991.98px) {
    /* Stack all cards vertically */
    .row.mobile_div > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }
    /* Icons alignment */
    .calc-icon svg {
        width: 20px;
        height: 20px;
    }
    .commission-card svg {
        width: 20px;
        height: 20px;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .main-no-updates {
        padding: 16px;
    }

    .sub-no-updates {
        padding: 48px 18px;
    }

    .main-no-updates .ico-no-result {
        width: 94px;
        height: 94px;
        line-height: 94px !important;
        font-size: 38px;
        border-width: 2px;
        margin-bottom: 16px !important;
    }

    .main-no-updates h4.font_size_18 {
        font-size: 16px !important;
        line-height: 1.4;
        max-width: 280px;
        margin: 0 auto;
    }

    .main-no-updates .no-updates-link {
        font-size: 15px !important;
        line-height: 1.2;
    }
}

@media (min-width: 992px) {
    .sub-no-updates {
        padding: 64px 24px;
    }

    .main-no-updates h4.font_size_18 {
        font-size: 17px !important;
        line-height: 1.45;
        max-width: 300px;
        margin: 0 auto;
    }
}

@media (max-width: 575.98px) {
    .main-no-updates {
        padding: 14px;
        width: 100%;
        max-width: 21rem; /* 350px */
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 20px !important;
    }

    .sub-no-updates {
        padding: 34px 14px;
        border-radius: 14px;
    }

    .main-no-updates .ico-no-result {
        width: 84px;
        height: 84px;
        line-height: 84px !important;
        font-size: 34px;
        border-width: 2px;
        margin-bottom: 16px !important;
    }

    .main-no-updates h4.font_size_18 {
        font-size: 16px !important;
        line-height: 1.4;
        max-width: 230px;
        margin: 0 auto;
    }

    .no-updates-div {
        padding: 10px 0 0;
    }

    .main-no-updates .no-updates-link {
        font-size: 14px !important;
        border-radius: 10px;
        padding: 10px 14px;
        line-height: 1.2;
    }
}

/* Bookmarks/Likes/Purchases no-state: match middle block height with right column on desktop/tablet */
@media (min-width: 48rem) {
    .section.section-sm
        .row
        > [class*="col-"].second.wrap-post
        .main-no-updates {
        height: 25rem;
        margin-bottom: 0 !important;
    }

    .section.section-sm
        .row
        > [class*="col-"].second.wrap-post
        .main-no-updates
        .sub-no-updates {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

@media (min-width: 48rem) and (max-width: 61.99875rem) {
    .section.section-sm
        .row
        > [class*="col-"].second.wrap-post
        .main-no-updates {
        height: 20.5rem;
    }
}

.shop_filter_dropdown {
    display: flex;
    gap: 6px;
}
.shop_filter_dropdown select {
    width: auto;
}
.ref-card-body span.small-text {
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
}
/* Frame 75 */
@media (max-width: 480px) {
    .go_to_page_btn {
        padding: 8px 8px !important;
    }
    .wel_msg_mob_16 {
        font-size: 16px !important;
    }
    .wel_msg_mob_12 {
        font-size: 12px !important;
    }
    .txt_mob_18 {
        font-size: 18px !important;
    }
    .section-sm {
        padding: 78px 22px 10px 22px !important;
    }
    .wrapper-msg-inbox {
        margin: 84px 20px 20px 20px;
    }
    .section-msg .messageDiv {
        margin-right: 0;
    }
    /* Wallet */
    /* Frame 2147226778 */

    .inner-wrap {
        /* Auto layout */
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0px;
        gap: 24px;

        position: absolute;
    }

    /* 0.00EUR */
    .wallet_inner_text {
        font-size: 58.3495px;
        line-height: 88px;
        /* identical to box height */
        display: flex;
        align-items: flex-end;
        text-align: center;

        color: #ffffff;
    }
    /* Wallet */

    .ref-card-body span.small-text {
        /* Title */
        /* width: 105px; */
        height: 18px;
        line-height: 18px;
        display: flex;
        align-items: center;
        /* color: #efefef; */
    }
    .ref-card-body h5 {
        /* Amount */
        /* width: 163px; */
        /* height: 38px; */
        /* H4/Semi bold */

        /* font-style: normal; */
        font-weight: 600;
        font-size: 30px;
        line-height: 125%;
        /* identical to box height, or 38px */
        display: flex;
        align-items: center;
        /* color: #ffffff; */
    }

    /* KPI cards ONLY — balance card untouched */
    .ref-card-body:not(.current_balance) {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
    }

    /* Icon size exactly 44x44 */
    .ref-card-body:not(.current_balance) svg {
        width: 44px;
        height: 44px;
    }

    /* Text wrapper */
    .ref-card-body:not(.current_balance) > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Title */
    .ref-card-body:not(.current_balance) small {
        font-size: 13px;
        line-height: 1.2;
        color: #bdbdbd;
        margin: 0 0 2px;
    }

    /* Value */
    .ref-card-body:not(.current_balance) h5 {
        font-size: 18px;
        font-weight: 600;
        margin: 0;
        line-height: 1.3;
    }

    .mobi_full_btn {
        width: 100%;
    }
    .navbar {
        margin: unset !important;
    }
    .navbar-user-mobile {
        font-size: 16px !important;
    }

    .nav_link {
        padding: 8px 1px !important;
    }
    /* .action-bar .card-footer.action-pill {
        display: none;
    } */

    .bg-dark-force .action-bar {
        display: inline-block !important;
    }
    .dashboard_story {
        border-radius: 10.24px !important;
        /* Frame 63 */
        width: 69px;
        height: 64px;
    }
    .dashboard_other_story {
        border-radius: 10.24px !important;
        /* Frame 63 */
        width: 69px;
        height: 64px;
        border-width: 0.64px;
    }
    .stories.snapssenger.carousel .story {
        width: 69px !important;
        max-width: 69px !important;
        max-height: 64px !important;
        border-radius: 10.24px !important;
    }
    .stories.snapssenger.carousel .story > .item-link {
        width: 69px !important;
        height: 64px !important;
        border-radius: 10.24px !important;
    }
    .my-card {
        margin-top: 1.5rem !important;
        padding: 0;
    }
    /* My cards */
    .my-card .title {
        font-style: normal;
        font-weight: 700;
        font-size: 24px;
        line-height: 36px;
        display: flex;
        align-items: flex-end;
        color: #ffffff;
    }

    .credit-card {
        padding: 20px;
        border-radius: 18px;
    }

    .card-number {
        font-size: 18px;
        letter-spacing: 2px;
    }

    .card-brand {
        font-size: 22px;
    }

    /* Content */
    .my-card-not-card-added {
        /* Auto layout */
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 16px !important;
        gap: 10px;
    }

    [data-bs-theme="dark"] .my-card-not-card-added {
        background: #191919;
    }

    [data-bs-theme="light"] .my-card-not-card-added {
        background: #f6f6f6;
    }

    /* Text */
    .my-card-not-card-added p.card-text {
        font-style: normal;
        font-weight: 400;
        font-size: 24px;
        line-height: 36px;
        display: flex;
        align-items: flex-end;
        text-align: center;

        color: #ffffff;
    }
    /* Filter & Export */
    .my-card-not-card-added .add-card {
        display: flex;

        justify-content: center;
    }

    .my-card-not-card-added a.btn-success {
        /* Filter */

        box-sizing: border-box;

        /* Auto layout */
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0.5rem 2.4rem;
        gap: 16px;

        background: #ffffff;

        border: 1px solid #dce4e8;
        border-radius: 100px;
        color: #000000 !important;
    }
    .my-card-not-card-added
        .btn-success:not(:disabled):not(.disabled):active:focus,
    .my-card-not-card-added
        .btn-success:not(:disabled):not(.disabled).active:focus,
    .my-card-not-card-added .show > .btn-success.dropdown-toggle:focus {
        background: #ffffff;
    }

    .add-card .payment-actions {
        display: flex;
        flex-direction: column-reverse; /* Save first, Go Back second */
        align-items: center;
        width: 100%;
        gap: 14px;
        margin-top: 16px !important;
    }

    .add-card .payment-actions .go_back {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .add-card .payment-actions .go_back a,
    .add-card .payment-actions .save_payment_card {
        width: 100%;
        max-width: 100%;
        height: 48px;
        padding: 0 16px;
        border-radius: 12px;
        font-size: 15px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .add-card .payment-actions .go_back a {
        background: #2b2b2b;
        color: #ffffff;
    }
    .item-add-story span {
        font-size: 12px;
    }
    .bg-dark-force {
        background: none;
    }
    .bg-dark-force .action-bar {
        border-radius: 12px;
        display: flex !important;
        /* justify-content: center !important;
        align-items: center !important; */
        flex-wrap: wrap !important;
    }

    .post_img {
        width: 80% !important;
    }
    .sidebar-card {
        padding: 7px !important;
    }
    .user_info {
        flex: 1;
        margin-left: 0px !important;
    }
    .shop_filter_dropdown select {
        width: 100%;
    }
    .tip_modal_card_header {
        height: 189px !important;
    }
}

@keyframes swalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (min-width: 576px) {
    .modal-call {
        max-width: 380px;
    }
    .modal-sm {
        max-width: 380px;
    }
}

@media (min-width: 768px) {
    .login-form-left {
        padding: 0 40px;
    }
    .forgotpwd-form-left {
        padding: 0 40px;
        min-height: 820px;
    }
    .py-large {
        padding-top: 6rem !important;
        padding-bottom: 6rem !important;
    }
}

/* =========================
   Auth Page: Login Theme
   ========================= */
/* Login page: figma-aligned dark theme only */
.login-page-theme {
    --login-bg: #000000;
    --login-surface: #191919;
    --login-input-bg: #161616;
    --login-input-border: #1f1f1f;
    --login-text: #ffffff;
    --login-text-muted: #a3a3a3;
    --login-placeholder: #8c8c8c;
    --login-icon: #8d8d8d;
    --login-primary: #e2394c;
    --login-primary-hover: #d52d41;
    --login-link: #ffffff;
    --login-divider: #333333;
    --login-error: #ff1f1f;
    --login-facebook: #1877f2;
    --login-google-bg: #ffffff;
    --login-google-text: #344054;
    --login-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.login-page-theme.auth-shell,
.login-page-theme .auth-shell-row,
.login-page-theme .right-side {
    background: var(--login-bg);
}

.login-page-theme .login-figma-container {
    max-width: 1232px;
}

.login-page-theme .login-figma-left-col {
    color: var(--login-text);
}

.login-page-theme .login-figma-logo {
    width: 125px;
    height: 42px;
}

.login-page-theme .auth-title {
    color: var(--login-text);
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

.login-page-theme .login-figma-subtitle,
.login-page-theme .login-figma-or,
.login-page-theme .title_home_login {
    color: var(--login-text-muted);
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0 !important;
}

.login-page-theme .login-figma-label {
    color: var(--login-text);
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: 0 !important;
}

.login-page-theme .login-figma-social-btn {
    border-radius: 10px;
    height: 45px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.login-page-theme .btn-google.login-figma-social-btn,
.login-page-theme .btn-google.login-figma-social-btn:hover,
.login-page-theme .btn-google.login-figma-social-btn:focus {
    background: var(--login-google-bg) !important;
    color: var(--login-google-text) !important;
    border-color: var(--login-google-bg) !important;
}

.login-page-theme .btn-facebook.login-figma-social-btn,
.login-page-theme .btn-facebook.login-figma-social-btn:hover,
.login-page-theme .btn-facebook.login-figma-social-btn:focus {
    background: var(--login-facebook);
    color: var(--login-text);
    border-color: var(--login-facebook);
}

.login-page-theme .btn-twitter.login-figma-social-btn,
.login-page-theme .btn-twitter.login-figma-social-btn:hover,
.login-page-theme .btn-twitter.login-figma-social-btn:focus {
    background: transparent;
    color: var(--login-text);
    border-color: var(--login-divider);
}
.login-page-theme .btn-apple.login-figma-social-btn,
.login-page-theme .btn-apple.login-figma-social-btn:hover,
.login-page-theme .btn-apple.login-figma-social-btn:focus {
    background: transparent;
    color: var(--login-text);
    border-color: var(--login-divider);
}

.login-page-theme .login-figma-input-wrap {
    border-radius: 10px;
    border: 1px solid var(--login-input-border);
    background: var(--login-input-bg);
    box-shadow: none;
}

.login-page-theme .login-figma-input-wrap .form-control,
.login-page-theme .login-figma-input-wrap .input-group-text,
.login-page-theme .login-figma-input {
    height: 50px;
    color: var(--login-text);
    background: transparent !important;
    font-size: 14px;
    line-height: 1.35;
    letter-spacing: 0 !important;
}

.login-page-theme .login-figma-input::placeholder {
    color: var(--login-placeholder);
}

.login-page-theme .login-figma-pass-toggle {
    color: var(--login-icon);
}

.login-page-theme .login-figma-remember .custom-control-label,
.login-page-theme .login-figma-remember .custom-control-label span,
.login-page-theme #forgotPassword {
    color: var(--login-link);
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: 0 !important;
}

.login-page-theme .login-figma-social-btn,
.login-page-theme .login-figma-submit,
.login-page-theme #loginSpan,
.login-page-theme .login-figma-hero-title {
    letter-spacing: 0 !important;
}

.login-page-theme .login-figma-submit,
.login-page-theme .btn-primary.login-figma-submit,
.login-page-theme #btnLoginRegister {
    background: var(--login-primary);
    border-color: var(--login-primary);
    border-radius: 10px;
    height: 53px;
    font-size: 14px;
    font-weight: 700;
}

.login-page-theme .login-figma-submit:hover,
.login-page-theme .login-figma-submit:focus,
.login-page-theme #btnLoginRegister:hover,
.login-page-theme #btnLoginRegister:focus {
    background: var(--login-primary-hover);
    border-color: var(--login-primary-hover);
}

.login-page-theme .alert-danger {
    background: var(--login-error);
    border-color: var(--login-error);
    color: var(--login-text);
}

.login-page-theme #loginSpan {
    color: var(--login-text);
}

.login-page-theme .login-figma-switch-link {
    color: var(--login-primary) !important;
}

/* =========================
   Auth Page: Home Login Shell
   ========================= */
/* Hide global chrome on home login page to match figma */
.home-login-page .site-header,
.home-login-page #mobileMenuOverlay,
.home-login-page > .d-lg-none.d-flex.justify-content-center,
.home-login-page .app-mobile-top-tabs,
.home-login-page footer,
.home-login-page .footer-bg,
.home-login-page .showBanner {
    display: none !important;
}

@media (max-width: 575.98px) {
    .home-login-page .login-figma-remember-row {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }
    .home-login-page .login-figma-remember-row #forgotPassword {
        margin-left: auto;
    }
    .auth-shell #customCheckRegister + .custom-control-label {
        display: inline-block;
        padding-left: 1.75rem;
    }
    .auth-shell #customCheckRegister + .custom-control-label::before,
    .auth-shell #customCheckRegister + .custom-control-label::after {
        left: 0;
    }
}

@media (max-width: 991.98px) {
    .auth-shell .custom-control.custom-checkbox {
        padding-left: 0 !important;
        overflow: visible;
    }
    .auth-shell .custom-control.custom-checkbox .custom-control-label {
        display: inline-block;
        position: relative;
        padding-left: 1.75rem !important;
        min-height: 1.25rem;
    }
    .auth-shell .custom-control.custom-checkbox .custom-control-label::before,
    .auth-shell .custom-control.custom-checkbox .custom-control-label::after {
        left: 0 !important;
    }
    .home-login-page #remember {
        padding-left: 0 !important;
        overflow: visible;
    }
    .home-login-page #remember .custom-control-label {
        padding-left: 1.75rem !important;
        position: relative;
        display: inline-block;
        margin-left: 0 !important;
    }
    .home-login-page #remember .custom-control-label::before,
    .home-login-page #remember .custom-control-label::after {
        left: 0 !important;
    }
}

.home-login-page .auth-shell {
    min-height: 100vh;
}

.login-page-theme .login-figma-right-col {
    border-radius: 20px;
}

.login-page-theme .login-figma-hero-logo {
    width: 356px;
    height: 120px;
}

.login-page-theme .login-figma-stack-img {
    border-radius: 14px;
    box-shadow: var(--login-shadow);
    opacity: 0.5;
}

@media (min-width: 768px) {
    .login-page-theme.auth-shell {
        min-height: calc(100vh - 72px);
        padding: 20px 0 28px;
    }
    .login-page-theme .login-figma-left-col {
        padding: 32px 28px;
        max-width: none;
    }
    .login-page-theme .login-figma-card {
        padding: 0;
    }
    .login-page-theme .login-figma-right-col {
        min-height: 760px;
        padding: 40px 34px;
    }
    .login-page-theme .login-figma-hero-title {
        font-size: 24px !important;
        line-height: 1.25;
        margin-top: 18px;
        margin-bottom: 24px !important;
    }
}

@media (min-width: 1200px) {
    .login-page-theme.auth-shell {
        min-height: 100vh;
        padding: 32px 0;
    }
    .login-page-theme .login-figma-container {
        max-width: 1376px;
        padding-left: 32px;
        padding-right: 32px;
    }
    .login-page-theme .login-figma-row {
        display: grid;
        grid-template-columns: minmax(0, 636px) minmax(0, 636px);
        column-gap: 40px;
        justify-content: center;
        align-items: center;
        min-height: 946px;
        border-radius: 0;
        overflow: visible;
    }
    .login-page-theme .login-figma-left-col,
    .login-page-theme .login-figma-right-col {
        width: auto;
        max-width: none;
        flex: none;
    }
    .login-page-theme .login-figma-left-col {
        margin: 0;
        padding: 0 80px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .login-page-theme .auth-logo-wrap {
        margin-bottom: 80px;
    }
    .login-page-theme .login-figma-left-inner {
        width: 100%;
    }
    .login-page-theme .login-figma-card {
        width: 100%;
        max-width: 476px;
        padding: 0;
    }
    .login-page-theme .auth-title {
        font-size: 32px;
        line-height: 32px;
    }
    .login-page-theme .login-figma-subtitle {
        font-size: 16px;
        line-height: 26px;
    }
    .login-page-theme .login-figma-social {
        margin-bottom: 0 !important;
    }
    .login-page-theme .login-figma-social-btn {
        height: 44px;
        border-radius: 8px;
        font-size: 16px;
    }
    .login-page-theme .login-figma-or {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        font-size: 16px;
        line-height: 20px;
    }
    .login-page-theme .login-figma-label {
        font-size: 16px;
        line-height: 20px;
    }
    .login-page-theme .login-figma-input-wrap {
        border-radius: 12px;
        border: 0;
        background: rgba(255, 255, 255, 0.1);
    }
    .login-page-theme .login-figma-input-wrap .form-control,
    .login-page-theme .login-figma-input-wrap .input-group-text,
    .login-page-theme .login-figma-input {
        font-size: 16px;
        line-height: 26px;
    }
    .login-page-theme .login-figma-remember .custom-control-label,
    .login-page-theme .login-figma-remember .custom-control-label span,
    .login-page-theme #forgotPassword {
        font-size: 16px;
        line-height: 20px;
        font-weight: 500;
    }
    .login-page-theme .login-figma-submit,
    .login-page-theme .btn-primary.login-figma-submit,
    .login-page-theme #btnLoginRegister {
        height: 52px;
        border-radius: 12px;
        font-size: 16px;
        line-height: 24px;
    }
    .login-page-theme .login-figma-switch-row {
        margin-top: 20px !important;
    }
    .login-page-theme #loginSpan {
        font-size: 16px;
        line-height: 20px;
        font-weight: 500;
    }
    .login-page-theme .login-figma-right-col {
        min-height: 946px;
        padding: 40px;
        border-radius: 20px;
    }
    .login-page-theme .login-figma-hero-title {
        font-size: 24px !important;
        line-height: 33px;
        font-weight: 300;
        margin-top: 24px;
        margin-bottom: 32px !important;
        max-width: 556px;
    }
}

/* =========================
   Auth Page: Login Theme Forms
   ========================= */
/* Auth form optimization: shared login + signup field system */
.login-page-theme .login-figma-field {
    margin-bottom: 1rem;
}

.login-page-theme .login-figma-field .login-figma-label-wrap {
    margin-bottom: 0.375rem;
}

.login-page-theme .login-figma-field .login-figma-label {
    display: inline-block;
}

.login-page-theme .loginRegisterWith {
    display: inline;
    margin-right: 0;
}

.login-page-theme #agree_gdpr.login-figma-gdpr {
    margin-top: 0.75rem;
}

.login-page-theme #agree_gdpr.login-figma-gdpr .custom-control-label,
.login-page-theme #agree_gdpr.login-figma-gdpr .custom-control-label span {
    color: var(--login-text);
    font-size: 0.75rem;
    line-height: 1.4;
    font-weight: 400;
}

.login-page-theme #agree_gdpr.login-figma-gdpr .custom-control-label a {
    color: var(--login-text);
    text-decoration: none;
}

.login-page-theme #agree_gdpr.login-figma-gdpr .custom-control-label a:hover {
    color: var(--login-primary);
}

/* =========================
   Auth Page: Home Login Desktop Alignment
   ========================= */
/* Left column alignment fix (login + signup) */
@media (min-width: 75rem) {
    .home-login-page .login-page-theme .login-figma-row {
        grid-template-columns: minmax(0, 39.75rem) minmax(0, 39.75rem);
        column-gap: 2.5rem;
        min-height: 54.125rem;
        align-items: stretch;
    }

    .home-login-page .login-page-theme .login-figma-left-col {
        padding: 0 5rem;
        padding-bottom: 0;
        min-height: 54.125rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 3rem;
    }

    .home-login-page .login-page-theme .auth-logo-wrap {
        margin-bottom: 0;
    }

    .home-login-page .login-page-theme .login-figma-left-inner {
        width: 100%;
        max-width: 29.75rem;
    }

    .home-login-page .login-page-theme .login-figma-card {
        width: 100%;
        max-width: 29.75rem;
        padding: 0;
    }
}

@media (max-width: 47.99875rem) {
    .home-login-page .login-page-theme .login-figma-left-col {
        padding: 0;
        gap: 2rem;
        align-items: flex-start;
    }

    .home-login-page .login-page-theme .login-figma-left-inner,
    .home-login-page .login-page-theme .login-figma-card {
        width: 100%;
        max-width: 21.875rem;
    }
}

/* =========================
   Auth Page: Home Login Right Panel
   ========================= */
/* Right panel alignment fix (login) */
@media (min-width: 75rem) {
    .home-login-page .login-page-theme .login-figma-right-col {
        min-height: 54.125rem;
        padding: 2.5rem;
        border-radius: 1.25rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 2rem;
    }

    .home-login-page .login-page-theme .login-figma-hero-logo {
        width: 22.2725rem;
        height: 7.5rem;
        max-width: 100%;
    }

    .home-login-page .login-page-theme .login-figma-hero-title {
        max-width: 34.75rem;
        font-size: 1.5rem !important;
        line-height: 2.0625rem;
        font-weight: 300 !important;
        margin-top: 0;
        margin-bottom: 0 !important;
    }

    .home-login-page .login-page-theme .login-figma-hero-stack {
        width: 100%;
        max-width: 34.75rem;
        margin-top: 0;
    }

    .home-login-page .login-page-theme .login-figma-stack-img {
        width: 100%;
        max-width: 34.75rem;
        height: auto;
        opacity: 0.5;
    }

    .home-login-page .login-page-theme .login-figma-switch-row {
        margin-top: 1.25rem !important;
        padding-top: 0;
    }
}

@media (min-width: 48rem) and (max-width: 74.99875rem) {
    .home-login-page .login-page-theme .login-figma-right-col {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 1.75rem 1.5rem;
    }

    .home-login-page .login-page-theme .login-figma-hero-title {
        margin-top: 1rem;
        margin-bottom: 1.25rem !important;
    }
}

@media (max-width: 767.98px) {
    .login-page-theme.auth-shell {
        min-height: 100vh;
        padding: 20px 0;
    }
    .login-page-theme .login-figma-container {
        width: 100%;
        max-width: 390px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .login-page-theme .login-figma-row {
        min-height: auto;
        border-radius: 0;
        border: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .login-page-theme .login-figma-left-col {
        width: 100%;
        max-width: 100%;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }
    .login-page-theme .auth-logo-wrap {
        margin-bottom: 0;
    }
    .login-page-theme .login-figma-logo {
        display: block;
        margin: 0;
    }
    .login-page-theme .login-figma-left-inner {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .login-page-theme .login-figma-card {
        padding: 0;
    }
    .login-page-theme .auth-title {
        font-size: 24px;
        line-height: 36px;
    }
    .login-page-theme .login-figma-subtitle,
    .login-page-theme .login-figma-or {
        font-size: 16px;
        line-height: 26px;
    }
    .login-page-theme .login-figma-social {
        margin-bottom: 0 !important;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .login-page-theme .login-figma-label,
    .login-page-theme .login-figma-input {
        font-size: 16px;
        line-height: 20px;
    }
    .login-page-theme .login-figma-social-btn {
        height: 44px;
        border-radius: 8px;
        font-size: 16px;
        padding: 10px 16px;
    }
    .login-page-theme .login-figma-input-wrap {
        border-radius: 12px;
        border: 0;
        background: rgba(255, 255, 255, 0.1);
    }
    .login-page-theme .login-figma-input-wrap .form-control,
    .login-page-theme .login-figma-input-wrap .input-group-text,
    .login-page-theme .login-figma-input {
        height: 50px;
        font-size: 16px;
        line-height: 26px;
    }
    .login-page-theme .login-figma-submit,
    .login-page-theme .btn-primary.login-figma-submit,
    .login-page-theme #btnLoginRegister {
        height: 52px;
        border-radius: 12px;
        font-size: 16px;
        line-height: 24px;
    }
    .login-page-theme .login-figma-remember .custom-control-label,
    .login-page-theme .login-figma-remember .custom-control-label span,
    .login-page-theme #forgotPassword {
        font-size: 16px;
        line-height: 20px;
        font-weight: 500;
    }
    .login-page-theme #loginSpan,
    .login-page-theme .login-figma-switch-link {
        font-size: 16px;
        line-height: 20px;
        font-weight: 500;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .login-page-theme .auth-title {
        font-size: 34px;
        line-height: 1.22;
        letter-spacing: 0 !important;
    }
    .login-page-theme .login-figma-subtitle,
    .login-page-theme .login-figma-or {
        font-size: 13px;
    }
    .login-page-theme .login-figma-label,
    .login-page-theme .login-figma-input {
        font-size: 13px;
    }
    .login-page-theme .login-figma-social-btn {
        font-size: 13px;
    }
    .login-page-theme .login-figma-submit,
    .login-page-theme .btn-primary.login-figma-submit,
    .login-page-theme #btnLoginRegister {
        font-size: 13px;
    }

    /* Tablet layout normalization: strict 2-column flow with no fixed desktop geometry */
    .login-page-theme .login-figma-container {
        max-width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }

    .login-page-theme .login-figma-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        min-height: auto;
        border-radius: 18px;
        overflow: hidden;
    }

    .login-page-theme .login-figma-left-col,
    .login-page-theme .login-figma-right-col {
        flex: 0 0 50%;
        max-width: 50%;
        width: 50%;
    }

    .login-page-theme .login-figma-left-col {
        margin: 0;
        padding: 28px 24px;
    }

    .login-page-theme .login-figma-right-col {
        min-height: auto;
        padding: 28px 24px;
        border-radius: 0;
    }

    .login-page-theme .login-figma-hero-logo {
        width: 280px;
        height: auto;
        max-width: 100%;
    }

    .login-page-theme .login-figma-hero-title {
        font-size: 24px !important;
        line-height: 1.28;
        margin-top: 14px;
        margin-bottom: 18px !important;
        max-width: 100%;
    }

    .login-page-theme .login-figma-hero-stack {
        margin-top: 20px;
    }

    .login-page-theme .login-figma-stack-img {
        position: relative;
        width: 100%;
        max-width: 100%;
        height: auto;
        transform: none;
        opacity: 0.55;
    }
}
@media (max-width: 1199.98px) {
    .auth-shell-row {
        min-height: auto;
        border-radius: 18px;
    }
    .auth-form-left {
        max-width: 620px;
        padding: 42px 34px;
    }
    .auth-title {
        font-size: 40px;
    }
    .auth-shell .title_login {
        font-size: 16px;
        line-height: 1.5;
    }
}
@media (max-width: 991.98px) {
    .auth-form-left {
        max-width: 680px;
        padding: 36px 26px;
    }
    .auth-title {
        font-size: 36px;
        line-height: 1.22;
    }
}
/* =========================
   Auth Shell: Shared Responsive
   ========================= */
/* Mobile (phones) */
@media screen and (max-width: 575px) {
    .forgotpwd {
        display: none;
    }
    .forgotpwd-form {
        padding-top: 1rem !important;
    }
    .inline-padding.forgotpwd-form-left,
    .inline-padding.resetpwd-form-left {
        padding-inline: 0;
    }
    body:not(.login-page-theme) .auth-shell {
        padding-top: 10px;
        min-height: calc(100vh - 58px);
    }
    body:not(.login-page-theme) .auth-shell-row {
        border-radius: 0;
        border: 0;
        min-height: calc(100vh - 72px);
    }
    body:not(.login-page-theme) .auth-form-left {
        padding: 20px 14px 30px;
    }
    body:not(.login-page-theme) .auth-title {
        font-size: 24px;
        line-height: 1.25;
    }
    body:not(.login-page-theme) .auth-shell .title_login {
        font-size: 15px;
        line-height: 1.45;
    }
    body:not(.login-page-theme) .auth-shell .form-group > .mb-1 span {
        font-size: 15px;
    }
    body:not(.login-page-theme)
        .auth-shell
        .input-group-alternative
        .form-control,
    body:not(.login-page-theme)
        .auth-shell
        .input-group-alternative
        .input-group-text,
    body:not(.login-page-theme) .auth-shell .auth-form-btn {
        height: 46px;
    }
    body:not(.login-page-theme) .auth-shell .btn-primary {
        height: 50px;
        font-size: 15px;
    }
    body:not(.login-page-theme) .auth-shell .auth-switch {
        font-size: 15px;
    }
    body:not(.login-page-theme) .auth-shell .custom-control-label,
    body:not(.login-page-theme) .auth-shell .custom-control-label span {
        font-size: 13px;
    }
}
/* =========================
   Auth Legacy / Shared Layout
   ========================= */
/* Desktop */
/*@media (min-width: 1025px) {*/
.forgotpwd .navbar {
    max-width: 1140px !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
    margin-right: auto;
    margin-left: auto;
    background-color: unset !important;
    border: none !important;
}
.forgotpwd-row {
    margin-top: 12px;
}
.reset_pass_title {
    font-size: 32px;
    line-height: 48px;
    /* identical to box height */
    display: flex;
    align-items: flex-end;
}
.reset_pass_subtitle {
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    /* or 162% */
    display: flex;
    align-items: center;

    /* neutral/400 */
    color: #a3a3a3;

    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}
.right-side {
    position: relative;
    padding: 70px;
    overflow: hidden;
    background: #000;
    border-radius: 20px;
}

.right-side::after {
    content: "";
    position: absolute;

    /* MATCH FIGMA SIZE */
    width: 1704px;
    height: 1704px;

    /* MATCH FIGMA POSITION */
    right: -196px;
    top: -446px;

    /* MATCH FIGMA GRADIENT */
    background: radial-gradient(
        50% 50% at 50% 50%,
        rgba(0, 0, 0, 0) 70%,
        rgba(226, 57, 76, 1) 100%
    );

    /* MATCH FIGMA OPACITY */
    opacity: 0.5;

    /* MATCH FIGMA FLIP */
    transform: scaleX(-1);

    pointer-events: none;
    z-index: 0;
}

/* =========================
   Settings / My Card
   ========================= */
/* My Card */
.left-settings-sidebar {
    /* Frame 1618873641 */
    box-sizing: border-box;
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px;
    gap: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0px 4px 25px rgba(42, 134, 66, 0.08);
    border-radius: 32px;
    margin-bottom: 14px;
}
.left-settings-sidebar .card {
    background: none;
    border: none;
    box-shadow: none !important;
    width: 100%;
}

.left-settings-sidebar .card > .list-group {
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.left-settings-sidebar .list-group-item {
    background: none;
}
.left-settings-sidebar .settings-menu-title {
    /* Frame 2147226744 */

    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    /* identical to box height, or 125% */
    letter-spacing: -0.150391px;
    padding-left: 4px;
    color: var(--text-color);
}
.left-settings-sidebar hr.separator {
    width: 96%;
    height: 0px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex: none;
    padding-left: 4px;
}

[data-bs-theme="light"] .left-settings-sidebar hr.separator {
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.left-settings-sidebar .list-group-item i {
    font-size: 18px;
}
.left-settings-sidebar .list-group-item span {
    /* Profile */
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    /* identical to box height */
    align-items: flex-end;
    color: var(--text-color);
    /* Line 2 */
}
.left-settings-sidebar .list-group-item.active span {
    font-weight: 600;
}
.left-settings-sidebar .card-settings > .list-group-flush > .list-group-item {
    margin: 0 0px 5px 0px !important;
    width: 100%;
    padding-left: 4px;
}
.left-settings-sidebar
    .card-settings
    > .list-group-flush
    > .list-group-item:hover,
.left-settings-sidebar .list-group-item + .list-group-item.active {
    /* Frame 2147226745 */
    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    background: #e2394c;
    border-radius: 8px;
}
.my-card .title-div {
    padding-left: 0 !important;
    padding-bottom: 0 !important;
}

/* Cards available in your account */
.my-card .sub-title {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    /* identical to box height, or 114% */

    color: #ffffff;
}

[data-bs-theme="dark"] .my-card-not-card-added {
    background: #191919;
}
[data-bs-theme="light"] .my-card-not-card-added {
    background: #fff;
}

.my-card-not-card-added {
    /* Content */

    /* Auto layout */
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* padding: 48px 350px; */
    gap: 10px;
}
[data-bs-theme="dark"] .my-card-not-card-added p.card-text {
    color: #ffffff;
}
[data-bs-theme="light"] .my-card-not-card-added p.card-text {
    color: #000;
}

.my-card-not-card-added p.card-text {
    /* Text */
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 36px;
    display: flex;
    align-items: flex-end;
    text-align: center;
}
/* Filter & Export */
.my-card-not-card-added .add-card {
    display: flex;

    justify-content: center;
}

[data-bs-theme="dark"] .my-card-not-card-added a.btn-success {
    background: #ffffff;
    border: 1px solid #dce4e8;
    border-radius: 100px;
    color: #000000 !important;
}
[data-bs-theme="light"] .my-card-not-card-added a.btn-success {
    background: #9c9c9c;
    border: 1px solid #dce4e8;
    border-radius: 100px;
    color: #ffffff !important;
}

.my-card-not-card-added a.btn-success {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 2.4rem;
    gap: 16px;
}
.my-card-not-card-added .btn-success:not(:disabled):not(.disabled):active:focus,
.my-card-not-card-added .btn-success:not(:disabled):not(.disabled).active:focus,
.my-card-not-card-added .show > .btn-success.dropdown-toggle:focus {
    background: #ffffff;
}

/* My Card */

/* Add Paymen Card */
/* Payment Card */
.add-card .title {
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;
    display: flex;
    align-items: flex-end;
    color: #ffffff;
}
/* Add / Edit your payment card */
.add-card .sub-title {
    width: 1023px;
    height: 16px;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: #ffffff;
}

.add-card .lbl-card {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    text-transform: capitalize;
}
[data-bs-theme="dark"] .lbl-card {
    color: #ffffff;
}

.add-card .payment-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.add-card .payment-actions .go_back a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 14px;
    background: #2b2b2b;
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
}

.add-card .payment-actions .save_payment_card {
    padding: 14px 28px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
}

/* LABELS */
.label {
    display: block;
    font-size: 11px;
    opacity: 0.8;
    margin-bottom: 4px;
}

/* VALUES */
.value {
    font-size: 15px;
    font-weight: 600;
}

/* RESPONSIVE ACTION PILLS */
@media (max-width: 480px) {
    .card-footer.action-pill {
        display: flex !important;
        justify-content: space-between !important;
        gap: 5px !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    .action-pill {
        padding: 4px 5px !important;
        font-size: 10px !important;
        gap: 2px !important;
        border-radius: 12px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        justify-content: center !important;
    }
    .action-pill i,
    .action-pill svg {
        width: 15px !important;
        height: 15px !important;
        font-size: 12px !important;
        flex-shrink: 0 !important;
    }
    .action-pill .action-count {
        font-size: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .action-pill.float-right {
        float: none !important;
    }
    /* Hide 'Shares' text on very small screens if needed, or just let it shrink */
}

/* =========================
   Auth Page: Home Login
   ========================= */
/* Home login page: consolidated and in-use styles only */
.home-login-page {
    --hl-bg: #000000;
    --hl-panel-bg: #000000;
    --hl-panel-glow: rgb(81 20 27 / 42%);
    --hl-text: #ffffff;
    --hl-muted: #a3a3a3;
    --hl-input-bg: #181818;
    --hl-input-border: #1f1f1f;
    --hl-placeholder: #8c8c8c;
    --hl-primary: #e2394c;
    --hl-primary-hover: #cf3244;
    --hl-facebook: #1877f2;
    --hl-twitter-border: #1f1f1f;
    --hl-right-glow: rgb(81 20 27 / 42%);
}

.home-login-page .auth-shell {
    background: var(--hl-bg);
    min-height: 100vh;
    padding: 2rem 0;
}

.home-login-page .login-figma-container {
    max-width: 86rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

.home-login-page .login-figma-row {
    min-height: 59.125rem;
    border-radius: 1.5rem;
    overflow: hidden;
    background: var(--hl-bg);
}

.home-login-page .login-figma-left-col {
    padding: 2rem 0;
    color: var(--hl-text);
}

.home-login-page .auth-logo-wrap {
    margin-bottom: 3.75rem;
}

.home-login-page .login-figma-left-inner,
.home-login-page .login-figma-card,
.home-login-page #full_name,
.home-login-page #email,
.home-login-page #username_email,
.home-login-page #agree_gdpr,
.home-login-page #btnLoginRegister {
    width: 100%;
    max-width: 29.75rem;
}

.home-login-page .auth-title {
    color: var(--hl-text);
    font-size: 2rem;
    line-height: 1.25;
    font-weight: 700 !important;
}

.home-login-page .login-figma-subtitle,
.home-login-page .login-figma-or,
.home-login-page .login-figma-hero-title {
    color: var(--hl-muted);
}

.home-login-page .login-figma-subtitle,
.home-login-page .login-figma-or,
.home-login-page .login-figma-label,
.home-login-page .login-figma-input,
.home-login-page .login-figma-social-btn,
.home-login-page #forgotPassword,
.home-login-page .login-figma-remember .custom-control-label,
.home-login-page .login-figma-remember .custom-control-label span,
.home-login-page #loginSpan,
.home-login-page .login-figma-switch-link {
    font-size: 1rem;
}

.home-login-page .login-figma-label {
    color: var(--hl-text);
    line-height: 1.25;
    font-weight: 500;
}

.home-login-page .login-figma-social-btn {
    height: 2.75rem;
    border-radius: 0.625rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.home-login-page .btn-google.login-figma-social-btn {
    background: #ffffff !important;
    color: #344054 !important;
    border-color: #ffffff !important;
}

.home-login-page .btn-facebook.login-figma-social-btn,
.home-login-page .btn-facebook.login-figma-social-btn:hover,
.home-login-page .btn-facebook.login-figma-social-btn:focus {
    background: var(--hl-facebook);
    border-color: var(--hl-facebook);
    color: #ffffff !important;
}

.home-login-page .btn-facebook.login-figma-social-btn span,
.home-login-page .btn-facebook.login-figma-social-btn i,
.home-login-page .btn-facebook.login-figma-social-btn:hover span,
.home-login-page .btn-facebook.login-figma-social-btn:hover i,
.home-login-page .btn-facebook.login-figma-social-btn:focus span,
.home-login-page .btn-facebook.login-figma-social-btn:focus i,
.login-page-theme .btn-facebook.login-figma-social-btn .auth-provider-name,
.login-page-theme .btn-facebook.login-figma-social-btn i,
.login-page-theme .btn-facebook.login-figma-social-btn:hover .auth-provider-name,
.login-page-theme .btn-facebook.login-figma-social-btn:hover i,
.login-page-theme .btn-facebook.login-figma-social-btn:focus .auth-provider-name,
.login-page-theme .btn-facebook.login-figma-social-btn:focus i {
    color: #ffffff !important;
}

.home-login-page .btn-twitter.login-figma-social-btn {
    background: transparent;
    border-color: var(--hl-twitter-border);
    color: var(--hl-text);
}
.home-login-page .btn-apple.login-figma-social-btn {
    background: transparent;
    border-color: var(--hl-twitter-border);
    color: var(--hl-text);
}

.home-login-page .login-figma-input-wrap {
    border-radius: 0.625rem;
    border: 0.0625rem solid var(--hl-input-border);
    background: var(--hl-input-bg);
}

.home-login-page .login-figma-input-wrap .form-control,
.home-login-page .login-figma-input-wrap .input-group-text,
.home-login-page .login-figma-input {
    height: 3.125rem;
    color: var(--hl-text);
    background: transparent !important;
    font-size: 1rem;
    line-height: 1.5;
}

.home-login-page .login-figma-input::placeholder {
    color: var(--hl-placeholder);
}

.home-login-page .login-figma-pass-toggle,
.home-login-page #forgotPassword,
.home-login-page #loginSpan {
    color: var(--hl-text);
}

.home-login-page .login-figma-submit,
.home-login-page #btnLoginRegister {
    background: var(--hl-primary);
    border-color: var(--hl-primary);
    border-radius: 0.625rem;
    height: 3.1875rem;
    font-size: 1rem;
    font-weight: 700;
}

.home-login-page .login-figma-submit:hover,
.home-login-page .login-figma-submit:focus,
.home-login-page #btnLoginRegister:hover,
.home-login-page #btnLoginRegister:focus {
    background: var(--hl-primary-hover);
    border-color: var(--hl-primary-hover);
}

.home-login-page .login-figma-switch-link {
    color: var(--hl-primary) !important;
}

.home-login-page .login-figma-right-col {
    padding: 2.5rem 3.375rem;
    background:
        radial-gradient(
            96% 112% at 132% 52%,
            rgb(81 20 27 / 62%) 0%,
            transparent 60%
        ),
        radial-gradient(
            46% 36% at 102% 6%,
            rgb(81 20 27 / 100%) 0%,
            transparent 74%
        ),
        radial-gradient(
            46% 36% at 102% 94%,
            rgb(81 20 27 / 100%) 0%,
            transparent 74%
        ),
        var(--hl-panel-bg) !important;
}

.home-login-page .login-figma-hero-logo {
    width: 22.25rem;
    height: 7.5rem;
}

.home-login-page .login-figma-hero-title {
    max-width: 31.5rem;
    font-size: 2.25rem !important;
    line-height: 1.28;
    font-weight: 300;
    margin-top: 1.5rem;
    margin-bottom: 1.75rem !important;
}

.home-login-page .login-figma-hero-stack {
    margin-top: 1rem;
    max-width: 33.75rem;
}

.home-login-page .login-figma-stack-img {
    max-width: 33.75rem;
    border-radius: 0.875rem;
    opacity: 0.5;
    box-shadow: 0 1.25rem 2.5rem rgb(0 0 0 / 60%);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

@media (max-width: 47.99875rem) {
    .home-login-page .auth-shell {
        padding: 1.25rem 0;
    }

    .home-login-page .login-figma-container {
        max-width: 24.375rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .home-login-page .login-figma-row {
        min-height: auto;
        border-radius: 0;
        background: transparent;
    }

    .home-login-page .login-figma-left-col {
        padding: 0;
        gap: 2rem;
    }

    .home-login-page .auth-logo-wrap {
        margin-bottom: 0;
    }

    .home-login-page .login-figma-left-inner,
    .home-login-page .login-figma-card {
        max-width: 100%;
    }

    .home-login-page .auth-title {
        font-size: 2.25rem;
        line-height: 1.2;
    }

    .home-login-page .login-figma-input-wrap {
        border-radius: 0.75rem;
    }

    .home-login-page .login-figma-right-col {
        display: none !important;
    }
}

/* =========================
   Auth Page: Forgot Password
   ========================= */
/* Forgot password: dark-only figma alignment */
.forgot-password-page {
    --fp-bg: #000000;
    --fp-text: #ffffff;
    --fp-muted: #a3a3a3;
    --fp-input-bg: rgba(255, 255, 255, 0.1);
    --fp-input-text: #ffffff;
    --fp-placeholder: #a3a3a3;
    --fp-primary: #e2394c;
    --fp-primary-hover: #d52d41;
    --fp-primary-text: #fcfcfc;
    min-height: 100vh;
    background: var(--fp-bg);
    padding: 2rem 0 1rem;
}

.forgot-password-container {
    max-width: 86rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

.forgot-password-row {
    min-height: 49.125rem;
    background: var(--fp-bg);
    border-radius: 1.5rem;
    overflow: hidden;
    gap: 2.5rem;
    flex-wrap: nowrap;
}

.forgot-password-left,
.forgot-password-right {
    flex: 0 0 calc(50% - 1.25rem);
    max-width: calc(50% - 1.25rem);
}

.forgot-password-left {
    color: var(--fp-text);
    min-height: 49.125rem;
    padding: 2.5rem 3.375rem;
    padding-top: 0;
    justify-content: flex-start;
    gap: 14rem;
}

.forgot-brand-logo {
    width: 9.6725rem;
    height: auto;
}

.forgot-header-logo {
    width: 7.8125rem;
    height: auto;
}

.forgot-password-form {
    max-width: 25rem;
    width: 100%;
    gap: 2rem;
}

.forgot-title-wrap {
    gap: 1.25rem;
}

.forgot-back-link {
    color: var(--fp-text);
    font-size: 1.5rem;
    line-height: 1;
}

.forgot-title {
    color: var(--fp-text);
    font-size: 2rem;
    line-height: 3rem;
    font-weight: 700;
}

.forgot-subtitle {
    color: var(--fp-muted);
    font-size: 1rem;
    line-height: 1.625rem;
    font-weight: 400;
}

.forgot-label {
    color: var(--fp-text);
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: 500;
}

.forgot-input-wrap {
    width: 25rem;
    max-width: 25rem;
    height: 3.125rem;
    border-radius: 0.75rem;
    background: var(--fp-input-bg);
    padding: 0.75rem 0.875rem;
    align-items: center;
}

.forgot-input {
    height: 100%;
    width: 100%;
    border: 0;
    color: var(--fp-input-text);
    font-size: 1rem;
    line-height: 1.625rem;
    padding: 0;
    background: transparent !important;
    box-shadow: none !important;
}

.forgot-input::placeholder {
    color: var(--fp-placeholder);
}

.forgot-password-page .btn-primary {
    --bs-btn-bg: var(--fp-primary);
    --bs-btn-border-color: var(--fp-primary);
    --bs-btn-hover-bg: var(--fp-primary-hover);
    --bs-btn-hover-border-color: var(--fp-primary-hover);
    --bs-btn-active-bg: var(--fp-primary-hover);
    --bs-btn-active-border-color: var(--fp-primary-hover);
    --bs-btn-color: var(--fp-primary-text);
    --bs-btn-disabled-bg: var(--fp-primary);
    --bs-btn-disabled-border-color: var(--fp-primary);
}

.forgot-submit-btn {
    width: 25rem;
    max-width: 25rem;
    border-radius: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.forgot-recaptcha,
.forgot-recaptcha a {
    color: var(--fp-text);
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: 500;
    text-decoration: none;
}

.forgot-recaptcha a:hover {
    text-decoration: underline;
}

.forgot-password-right {
    position: relative;
    min-height: 49.125rem;
    background:
        radial-gradient(
            96% 112% at 132% 52%,
            rgb(81 20 27 / 62%) 0%,
            transparent 60%
        ),
        radial-gradient(
            46% 36% at 102% 6%,
            rgb(81 20 27 / 100%) 0%,
            transparent 74%
        ),
        radial-gradient(
            46% 36% at 102% 94%,
            rgb(81 20 27 / 100%) 0%,
            transparent 74%
        ),
        var(--fp-bg) !important;
    border-radius: 1.25rem;
    padding: 2.5rem 3.375rem;
    overflow: hidden;
    isolation: isolate;
}

.forgot-hero-logo {
    width: 22.2725rem;
    max-width: 100%;
    height: auto;
}

.forgot-hero-title {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    color: var(--fp-muted);
    font-size: 1.5rem;
    line-height: 2.0625rem;
    font-weight: 300;
    max-width: 34.75rem;
}

.forgot-stack-img {
    width: 100%;
    max-width: 33rem;
    opacity: 0.95;
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

@media (max-width: 991.98px) {
    .forgot-password-left {
        padding: 0 2.5rem;
    }

    .forgot-password-right {
        padding: 2rem;
    }
}

@media (max-width: 767.98px) {
    .forgot-password-page {
        padding: 0;
        min-height: 52.75rem;
    }

    .forgot-password-container {
        max-width: 24.375rem;
        padding-left: 0;
        padding-right: 0;
    }

    .forgot-password-row {
        min-height: 47.6875rem;
        padding: 0;
        gap: 0;
        flex-wrap: wrap;
        border-radius: 0;
    }

    .forgot-password-left {
        flex: 0 0 100%;
        max-width: 100%;
        min-height: 47.6875rem;
        padding: 2rem;
        gap: 2rem;
    }

    .forgot-mobile-header {
        width: min(21.875rem, calc(100vw - 2.5rem));
        max-width: 21.875rem;
        height: 2.625rem;
        gap: 1.125rem;
    }

    .forgot-password-form {
        width: min(21.875rem, calc(100vw - 2.5rem));
        max-width: 21.875rem;
        min-height: 40.5625rem;
    }

    .forgot-title-wrap {
        gap: 1.25rem;
        width: min(21.875rem, calc(100vw - 2.5rem));
    }

    .forgot-input-wrap,
    .forgot-submit-btn {
        width: min(21.875rem, calc(100vw - 2.5rem));
        max-width: 21.875rem;
    }

    .forgot-recaptcha {
        width: min(21.875rem, calc(100vw - 2.5rem));
    }

    .forgot-title {
        font-size: 1.5rem;
        line-height: 2.25rem;
    }

    .forgot-subtitle {
        font-size: 1rem;
        line-height: 1.625rem;
    }

    .forgot-recaptcha {
        text-align: left;
    }
}

/* =========================
   Auth Page: Reset Password
   ========================= */
/* Reset password page: figma-aligned dark mode only */
.reset-password-page {
    --rp-bg: #000000;
    --rp-text: #ffffff;
    --rp-muted: #a3a3a3;
    --rp-input-bg: rgba(255, 255, 255, 0.1);
    --rp-input-text: #a3a3a3;
    --rp-track: #d9d9d9;
    --rp-danger: #b91c1c;
    --rp-primary: #e2394c;
    --rp-primary-hover: #d52d41;
    --rp-btn-text: #fcfcfc;
    --rp-glow: rgba(226, 57, 76, 0.5);
    --rp-strength: linear-gradient(
        90deg,
        #e2a139 0%,
        #aa5a31 54.64%,
        #00ff43 100%
    );
}

.reset-password-page.auth-shell {
    background: var(--rp-bg);
    min-height: 100vh;
    padding: 2rem;
}

.reset-password-page .reset-password-container {
    max-width: 86rem;
    padding: 0;
}

.reset-password-page .reset-password-row {
    min-height: 59.125rem;
    background: var(--rp-bg);
    border-radius: 1.25rem;
    overflow: hidden;
    gap: 2.5rem;
    flex-wrap: nowrap;
}

.reset-password-page .reset-password-left,
.reset-password-page .reset-password-right {
    flex: 0 0 calc(50% - 1.25rem);
    max-width: calc(50% - 1.25rem);
}

.reset-password-page .reset-password-left {
    min-height: 59.125rem;
    padding: 0 5rem;
    color: var(--rp-text);
    gap: 3rem;
    justify-content: center;
}

.reset-password-page .reset-logo-wrap {
    width: 29.75rem;
    max-width: 100%;
}

.reset-password-page .reset-password-content,
.reset-password-page #passwordResetForm {
    width: 100%;
    max-width: 29.75rem;
}

.reset-password-page .auth-title {
    color: var(--rp-text);
    font-size: 2rem;
    line-height: 3rem;
    font-weight: 700 !important;
}

.reset-password-page .title_login {
    color: var(--rp-muted) !important;
    font-size: 1rem;
    line-height: 1.625rem;
    font-weight: 400;
}

.reset-password-page .reset-password-form {
    gap: 1.5rem;
}

.reset-password-page .form-group > .mb-1 span {
    color: var(--rp-text);
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: 500;
}

.reset-password-page .input-group-alternative {
    border: 0;
    border-radius: 0.75rem;
    box-shadow: none;
    background: var(--rp-input-bg);
}

.reset-password-page .input-group-alternative .form-control,
.reset-password-page .input-group-alternative .input-group-text {
    height: 3.125rem;
    color: var(--rp-input-text);
    background: transparent !important;
    font-size: 1rem;
    line-height: 1.625rem;
}

.reset-password-page .input-group-alternative .form-control::placeholder {
    color: var(--rp-input-text);
}

.reset-password-page .strength-bar {
    height: 0.875rem;
    border-radius: 18.75rem;
    background: var(--rp-track);
    margin-top: 0.375rem;
}

.reset-password-page .strength-fill {
    width: 17.4375%;
    background: var(--rp-strength);
    border-radius: 18.75rem 0 0 18.75rem;
}

.reset-password-page .strength-text {
    margin-top: 0.375rem;
    font-size: 1rem;
    line-height: 1.625rem;
    color: var(--rp-muted);
}

.reset-password-page .strength-hint {
    margin-top: 0.375rem;
    font-size: 1rem;
    line-height: 1.625rem;
    color: var(--rp-danger);
}

.reset-password-page .reset-submit-wrap {
    margin-top: 0;
}

.reset-password-page .btn-primary {
    --bs-btn-bg: var(--rp-primary);
    --bs-btn-border-color: var(--rp-primary);
    --bs-btn-hover-bg: var(--rp-primary-hover);
    --bs-btn-hover-border-color: var(--rp-primary-hover);
    --bs-btn-active-bg: var(--rp-primary-hover);
    --bs-btn-active-border-color: var(--rp-primary-hover);
    --bs-btn-color: var(--rp-btn-text);
    --bs-btn-disabled-bg: var(--rp-primary);
    --bs-btn-disabled-border-color: var(--rp-primary);
}

.reset-password-page .reset-submit-btn {
    height: 3.25rem;
    border-radius: 0.75rem;
    margin: 0;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
}

.reset-password-page .reset-password-right {
    position: relative;
    padding: 2.5rem;
    border-radius: 1.25rem;
    background:
        radial-gradient(
            96% 112% at 132% 52%,
            rgb(81 20 27 / 62%) 0%,
            transparent 60%
        ),
        radial-gradient(
            46% 36% at 102% 6%,
            rgb(81 20 27 / 100%) 0%,
            transparent 74%
        ),
        radial-gradient(
            46% 36% at 102% 94%,
            rgb(81 20 27 / 100%) 0%,
            transparent 74%
        ),
        var(--rp-bg) !important;
    overflow: hidden;
    isolation: isolate;
}

.reset-password-page .reset-password-right::after {
    content: none;
}

.reset-password-page .auth-hero-logo,
.reset-password-page .title_home_login,
.reset-password-page .image-stack {
    position: relative;
    z-index: 1;
}

.reset-password-page .auth-hero-logo {
    width: 22.2725rem;
    height: auto;
    margin-top: 0 !important;
}

.reset-password-page .title_home_login {
    margin-top: 1.5rem;
    margin-bottom: 2rem !important;
    max-width: 34.75rem;
    color: var(--rp-muted) !important;
    font-size: 1.5rem !important;
    line-height: 2.0625rem;
    font-weight: 300;
}

.reset-password-page .image-stack {
    width: 100%;
    max-width: 33rem;
}

.reset-password-page .stack-img {
    width: 100%;
    max-width: 33rem;
    opacity: 0.5;
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

@media (max-width: 47.99875rem) {
    .reset-password-page.auth-shell,
    body:not(.login-page-theme) .reset-password-page.auth-shell {
        min-height: 51.1875rem;
        padding: 0;
    }

    .reset-password-page .reset-password-container {
        max-width: 24.375rem;
        padding: 0;
    }

    .reset-password-page .reset-password-row,
    body:not(.login-page-theme) .reset-password-page .reset-password-row {
        min-height: 51.1875rem;
        border-radius: 0;
        gap: 0;
        flex-wrap: wrap;
    }

    .reset-password-page .reset-password-left,
    body:not(.login-page-theme) .reset-password-page .reset-password-left {
        flex: 0 0 100%;
        max-width: 100%;
        min-height: 46.125rem;
        padding: 2.5rem;
        gap: 2rem;
    }

    .reset-password-page .reset-logo-wrap,
    .reset-password-page .reset-password-content,
    .reset-password-page #passwordResetForm,
    .reset-password-page .reset-submit-btn {
        width: min(21.875rem, calc(100vw - 2.5rem));
        max-width: 21.875rem;
    }

    .reset-password-page .auth-title,
    body:not(.login-page-theme) .reset-password-page .auth-title {
        font-size: 1.5rem;
        line-height: 2.25rem;
    }

    .reset-password-page .title_login,
    body:not(.login-page-theme) .reset-password-page .title_login {
        font-size: 1rem;
        line-height: 1.625rem;
    }

    .reset-password-page .reset-password-right {
        display: none !important;
    }
}

/* Auth App Shell (Figma-aligned baseline) */
:root {
    --co-light-bg: #f6f7fb;
    --co-light-surface: #ffffff;
    --co-light-border: rgba(17, 24, 39, 0.08);
    --co-light-text: #111827;
    --co-light-muted: #6b7280;
    --co-light-menu-item: #eef1f6;
    --co-light-menu-active: #e2394c;
    --co-light-footer: #ffffff;

    --co-dark-bg: #000000;
    --co-dark-surface: rgba(255, 255, 255, 0.1);
    --co-dark-border: rgba(255, 255, 255, 0.1);
    --co-dark-text: #ffffff;
    --co-dark-muted: #a3a3a3;
    --co-dark-menu-item: #202020;
    --co-dark-menu-active: #e2394c;
    --co-dark-footer: #171717;

    --co-shadow: 0 0.25rem 1.5625rem rgba(42, 134, 66, 0.08);
    --co-radius-lg: 2rem;
    --co-radius-md: 1rem;
}

/* =========================
   App Shell: Base Tokens
   ========================= */
.app-auth-shell {
    --co-bg: var(--co-light-bg);
    --co-surface: var(--co-light-surface);
    --co-border: var(--co-light-border);
    --co-text: var(--co-light-text);
    --co-muted: var(--co-light-muted);
    --co-menu-item: var(--co-light-menu-item);
    --co-menu-active: var(--co-light-menu-active);
    --co-footer: var(--co-light-footer);
    background: var(--co-bg);
    color: var(--co-text);
}

html[data-bs-theme="dark"] .app-auth-shell {
    --co-bg: var(--co-dark-bg);
    --co-surface: var(--co-dark-surface);
    --co-border: var(--co-dark-border);
    --co-text: var(--co-dark-text);
    --co-muted: var(--co-dark-muted);
    --co-menu-item: var(--co-dark-menu-item);
    --co-menu-active: var(--co-dark-menu-active);
    --co-footer: var(--co-dark-footer);
}

/* =========================
   App Shell: Shared Layout
   ========================= */
.app-auth-shell .modern-navbar.site-header {
    width: calc(100% - 4rem);
    max-width: 92rem;
    margin: 2rem auto 1.5rem !important;
    padding: 1rem !important;
    border-radius: var(--co-radius-lg);
    border: 0.0625rem solid var(--co-border);
    background: var(--co-surface) !important;
    box-shadow: var(--co-shadow);
}

.app-auth-shell .modern-navbar.site-header .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative;
}

.app-auth-shell .search-bar {
    border: 0.0625rem solid var(--co-border);
    background: var(--co-surface);
    color: var(--co-text);
    border-radius: 0.75rem;
}

.app-auth-shell .modern-navbar.site-header .site-header-collapse {
    display: flex !important;
    align-items: center;
    gap: 1rem;
}

.app-auth-shell .modern-navbar.site-header .site-header-center {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.app-auth-shell .modern-navbar.site-header .site-header-actions {
    flex: 0 0 auto;
    margin-left: auto !important;
}

@media (min-width: 768px) {
    .app-auth-shell .modern-navbar.site-header .guest-header-center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: max-content;
        z-index: 2;
    }

    .app-auth-shell .modern-navbar.site-header .site-header-guest-actions {
        margin-left: auto;
        position: relative;
        z-index: 3;
    }
}

.app-auth-shell .dashboard-home-container {
    width: calc(100% - 4rem);
    max-width: 86rem;
    margin-inline: auto;
}

.app-auth-shell .section-sm {
    padding: 0 !important;
}

.app-auth-shell .section {
    background: var(--co-bg) !important;
}

.app-auth-shell main .container-fluid {
    width: calc(100% - 4rem);
    max-width: 92rem;
    margin-inline: auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* =========================
   App Shell: Tablet Layout
   ========================= */
@media (min-width: 48rem) and (max-width: 61.99875rem) {
    .app-auth-shell .modern-navbar.site-header {
        width: calc(100% - 4rem);
        max-width: 86rem;
    }

    .app-auth-shell .dashboard-home-container,
    .app-auth-shell main .container-fluid {
        width: calc(100% - 4rem);
        max-width: 86rem;
    }

    .app-auth-shell .modern-navbar.site-header .site-header-collapse {
        gap: 0.75rem;
    }

    .app-auth-shell .modern-navbar.site-header .site-header-search {
        flex: 0 0 13rem;
        max-width: 13rem;
        margin-right: 0.5rem;
    }

    .app-auth-shell .modern-navbar.site-header .site-header-center {
        flex: 1 1 auto;
        min-width: 0;
        gap: 0.25rem;
        flex-wrap: nowrap;
    }

    .app-auth-shell
        .modern-navbar.site-header
        .site-header-center
        .navbar_mid_link {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        font-size: 0.875rem !important;
        line-height: 1.25rem;
        white-space: nowrap;
    }

    .app-auth-shell .modern-navbar.site-header .site-header-actions {
        gap: 0.25rem;
    }

    .app-auth-shell .app-main-row,
    .app-auth-shell .dashboard-main-row {
        --bs-gutter-x: 1rem;
        row-gap: 1rem;
    }

    .app-auth-shell .dashboard-left-col {
        flex: 0 0 28%;
        max-width: 28%;
    }

    .app-auth-shell .dashboard-center-col {
        flex: 0 0 72%;
        max-width: 72%;
        padding-inline: 0.5rem;
    }

    .app-auth-shell .dashboard-right-col {
        flex: 0 0 100%;
        max-width: 100%;
        margin-top: 0.5rem;
    }

    .app-auth-shell .dashboard-right-col .sticky-top {
        position: static;
    }

    .app-auth-shell
        .app-main-row:not(.dashboard-main-row)
        > .side_bar_box_shadow {
        flex: 0 0 28%;
        max-width: 28%;
    }

    .app-auth-shell
        .app-main-row:not(.dashboard-main-row)
        > .side_bar_box_shadow
        + [class*="col-"] {
        flex: 0 0 72%;
        max-width: 72%;
    }

    .app-auth-shell .menu-left-home {
        padding: 0.75rem;
        border-radius: 1.25rem;
    }

    .app-auth-shell .sidebar_li {
        padding: 0.25rem 0.375rem;
    }

    .app-auth-shell .sidebar_li a {
        font-size: 0.9375rem !important;
        line-height: 1.35;
    }

    .app-auth-shell .storiesWrapper {
        gap: 0.375rem;
        padding: 0.5rem !important;
    }

    .app-auth-shell .dashboard_story {
        width: 5.5rem;
        height: 5.5rem;
    }

    .app-auth-shell .my_flash_main {
        font-size: 0.8125rem;
        line-height: 1.25rem;
    }
}

/* =========================
   App Shell: Small Desktop Layout
   ========================= */
@media (min-width: 62rem) and (max-width: 74.99875rem) {
    .app-auth-shell .modern-navbar.site-header {
        width: calc(100% - 3rem);
        padding: 0.875rem !important;
    }

    .app-auth-shell .modern-navbar.site-header .site-header-collapse {
        gap: 0.625rem;
    }

    .app-auth-shell .modern-navbar.site-header .site-header-search {
        flex: 0 0 12rem;
        max-width: 12rem;
        margin-right: 0.25rem;
    }

    .app-auth-shell .modern-navbar.site-header .site-header-center {
        flex: 1 1 auto;
        min-width: 0;
        gap: 0.125rem;
        flex-wrap: nowrap;
    }

    .app-auth-shell
        .modern-navbar.site-header
        .site-header-center
        .navbar_mid_link {
        padding-left: 0.375rem !important;
        padding-right: 0.375rem !important;
        font-size: 0.875rem !important;
        line-height: 1.25rem;
        white-space: nowrap;
    }

    .app-auth-shell .modern-navbar.site-header .site-header-actions {
        gap: 0.125rem;
    }

    .app-auth-shell .dashboard-home-container,
    .app-auth-shell main .container-fluid {
        width: calc(100% - 3rem);
    }

    .app-auth-shell .app-main-row,
    .app-auth-shell .dashboard-main-row {
        --bs-gutter-x: 1rem;
        row-gap: 1rem;
    }

    .app-auth-shell .dashboard-left-col {
        flex: 0 0 24%;
        max-width: 24%;
    }

    .app-auth-shell .dashboard-center-col {
        flex: 0 0 52%;
        max-width: 52%;
        padding-inline: 0.5rem;
    }

    .app-auth-shell .dashboard-right-col {
        flex: 0 0 24%;
        max-width: 24%;
        margin-top: 0;
    }

    .app-auth-shell .dashboard-right-col .sticky-top {
        position: sticky;
    }

    .app-auth-shell
        .app-main-row:not(.dashboard-main-row)
        > .side_bar_box_shadow {
        flex: 0 0 24%;
        max-width: 24%;
    }

    .app-auth-shell
        .app-main-row:not(.dashboard-main-row)
        > .side_bar_box_shadow
        + [class*="col-"] {
        flex: 0 0 76%;
        max-width: 76%;
    }
}

/* =========================
   App Shell: Desktop Column Ratios
   ========================= */
@media (min-width: 75rem) {
    .app-auth-shell
        .app-main-row:not(.dashboard-main-row)
        > .side_bar_box_shadow {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .app-auth-shell
        .app-main-row:not(.dashboard-main-row)
        > .side_bar_box_shadow
        + [class*="col-"] {
        flex: 0 0 75%;
        max-width: 75%;
    }
}

/* =========================
   App Shell: Shared Surface Styles
   ========================= */
.app-auth-shell main .container-fluid.pt-lg-5,
.app-auth-shell main .container-fluid.pt-2,
.app-auth-shell main .container-fluid.pt-3,
.app-auth-shell main .container-fluid.py-4 {
    padding-top: 0 !important;
}

.app-auth-shell .app-main-row,
.app-auth-shell .dashboard-main-row {
    --bs-gutter-x: 2.0625rem;
    align-items: flex-start;
}

.app-auth-shell .app-main-row:not(.dashboard-main-row) {
    margin-left: calc(var(--bs-gutter-x, 2.0625rem) * -0.5) !important;
    margin-right: calc(var(--bs-gutter-x, 2.0625rem) * -0.5) !important;
}

.app-auth-shell .app-main-row:not(.dashboard-main-row) > [class*="col-"] {
    padding-left: calc(var(--bs-gutter-x, 2.0625rem) * 0.5);
    padding-right: calc(var(--bs-gutter-x, 2.0625rem) * 0.5);
}

.app-auth-shell
    .app-main-row:not(.dashboard-main-row)
    > [class*="col-"]:first-child {
    padding-left: calc(var(--bs-gutter-x, 2.0625rem) * 0.5);
}

.app-auth-shell
    .app-main-row:not(.dashboard-main-row)
    > [class*="col-"]:last-child {
    padding-right: calc(var(--bs-gutter-x, 2.0625rem) * 0.5);
}

.app-auth-shell .dashboard-main-row {
    margin-left: calc(var(--bs-gutter-x, 2.0625rem) * -0.5) !important;
    margin-right: calc(var(--bs-gutter-x, 2.0625rem) * -0.5) !important;
}

.app-auth-shell .dashboard-main-row > [class*="col-"] {
    padding-left: calc(var(--bs-gutter-x, 2.0625rem) * 0.5);
    padding-right: calc(var(--bs-gutter-x, 2.0625rem) * 0.5);
}

.app-auth-shell .menu-left-home {
    background: var(--co-surface);
    border: 0.0625rem solid var(--co-border);
    border-radius: var(--co-radius-lg);
    box-shadow: var(--co-shadow);
}

.app-auth-shell .menu-left-home li a {
    color: var(--co-text);
    border-radius: 0.5rem;
}

.app-auth-shell .menu-left-home li a.active,
.app-auth-shell .menu-left-home li a:hover {
    background: var(--co-menu-active);
    color: var(--co-dark-text);
}

.app-auth-shell .sidebar-card {
    background: var(--co-menu-item) !important;
    border: 0.0625rem solid var(--co-border);
}

.app-auth-shell .dashboard-right-col .panel,
.app-auth-shell .dashboard-right-col .card,
.app-auth-shell .dashboard-center-col .card {
    background: var(--co-surface);
    border: 0.0625rem solid var(--co-border);
    border-radius: var(--co-radius-md);
}

.app-auth-shell .storiesWrapper {
    gap: 0.5rem;
}

.app-auth-shell .story-add-wrap {
    width: fit-content;
}

.app-auth-shell .dashboard_story {
    /* width: 6.25rem; */
    /* height: 6.25rem; */
    border-radius: 1rem !important;
}

.app-auth-shell .plus_icon i {
    inline-size: 1rem;
    block-size: 1rem;
    border-radius: 50%;
}

.app-auth-shell .my_flash_main {
    color: var(--co-text) !important;
}

.app-auth-shell footer.footer-bg,
.app-auth-shell div.footer-bg {
    background: var(--co-footer) !important;
    color: var(--co-text) !important;
}

/* =========================
   App Shell: Mobile Layout
   ========================= */
@media (max-width: 47.99875rem) {
    .app-auth-shell {
        --app-mobile-gutter: 1.25rem;
        --app-mobile-frame: 24.375rem; /* 390px */
        --app-mobile-content: 21.875rem; /* 350px */
        --app-mobile-gap: 1.5rem; /* 24px */
    }

    .app-auth-shell .app-footer-shell {
        background: #171717 !important;
    }

    .app-auth-shell .modern-navbar.site-header {
        width: 100%;
        max-width: none;
        /* margin: 1.25rem auto var(--app-mobile-gap) !important; */
        padding: 0 var(--app-mobile-gutter) !important;
        border-radius: 0;
        min-height: 2.625rem;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .app-auth-shell .modern-navbar.site-header .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .app-auth-shell .modern-navbar.site-header .d-flex.justify-content-between {
        width: 100%;
        align-items: center;
        min-height: 2.625rem;
        gap: 1rem;
    }

    .app-auth-shell .modern-navbar.site-header .logo {
        width: 7.8125rem; /* 125px */
        max-height: 2.625rem;
    }

    .app-auth-shell .modern-navbar.site-header .navbar-brand {
        margin-right: 0 !important;
        padding: 0 !important;
        line-height: 1;
    }

    .app-auth-shell .modern-navbar.site-header .buttons-mobile-nav {
        display: flex !important;
        position: static !important;
        margin-left: 0 !important;
    }

    .app-auth-shell .modern-navbar.site-header .main_head_search {
        position: static !important;
        top: auto !important;
        right: auto !important;
        margin: 0 !important;
        gap: 0.625rem !important;
        align-items: center;
    }

    .app-auth-shell
        .modern-navbar.site-header
        .d-flex.justify-content-between
        > div:last-child {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 0.625rem;
    }

    .app-auth-shell
        .modern-navbar.site-header
        .main_head_search
        .btn_mobile_nav {
        inline-size: 1.75rem;
        block-size: 1.75rem;
        border-radius: 0.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(163, 163, 163, 0.1);
        border: 0;
        box-shadow: 0 0.0536rem 0.107rem rgba(16, 24, 40, 0.05);
    }

    .app-auth-shell
        .modern-navbar.site-header
        .buttons-mobile-nav
        .btn_mobile_nav {
        inline-size: 2.25rem;
        block-size: 2.25rem;
        border-radius: 0.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(163, 163, 163, 0.1);
        border: 0;
        box-shadow: 0 0.0536rem 0.107rem rgba(16, 24, 40, 0.05);
    }

    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse {
        display: none !important;
        position: fixed;
        right: -100%;
        top: 0;
        width: 100%;
        height: 100%;
        padding: 1rem;
        background: var(--co-bg);
        color: var(--co-text);
        z-index: 999999;
        overflow-y: auto;
        transition: right 0.25s ease-out;
    }

    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse.show {
        display: block !important;
        right: 0;
    }

    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse.collapsing {
        display: block !important;
        right: 0;
        height: 100% !important;
    }

    /* Cartes solde/portefeuille du drawer mobile — theme-aware */
    html[data-bs-theme="dark"]
        .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse
        .sidebar-card {
        background: linear-gradient(180deg, #201f26 0%, #17161c 100%) !important;
        background-color: #17161c !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }
    html[data-bs-theme="light"]
        .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse
        .sidebar-card {
        background: #f6f7f9 !important;
        background-color: #f6f7f9 !important;
        border: 1px solid rgba(15, 23, 42, 0.08) !important;
        color: #1b2130 !important;
        box-shadow: none !important;
    }

    /* Orbes KPI : solde doré, portefeuille bleu */
    html[data-bs-theme]
        .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse
        .sidebar-card
        .card-icon {
        background: linear-gradient(135deg, #f5c451, #f5a623) !important;
        color: #ffffff !important;
        border-radius: 13px !important;
        box-shadow: 0 8px 18px rgba(245, 166, 35, 0.4) !important;
    }
    html[data-bs-theme]
        .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse
        .sidebar-card
        + .sidebar-card
        .card-icon {
        background: linear-gradient(135deg, #7c9dff, #5865f2) !important;
        box-shadow: 0 8px 18px rgba(88, 101, 242, 0.4) !important;
    }

    html[data-bs-theme]
        .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse
        .sidebar-card
        .card-info
        small {
        color: #9ca3b3 !important;
    }
    html[data-bs-theme="light"]
        .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse
        .sidebar-card
        .card-info
        small {
        color: #667085 !important;
    }
    html[data-bs-theme="dark"]
        .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse
        .sidebar-card
        .card-info
        strong {
        color: #ffffff !important;
    }
    html[data-bs-theme="light"]
        .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse
        .sidebar-card
        .card-info
        strong {
        color: #14161c !important;
    }

    .app-auth-shell .modern-navbar.site-header .btn_mobile_nav svg,
    .app-auth-shell .modern-navbar.site-header .btn-mobile-nav svg {
        width: 1.125rem;
        height: 1.125rem;
    }

    .app-auth-shell .app-mobile-top-tabs {
        width: 100%;
        max-width: none;
        margin: 0 auto 0.75rem;
        padding: 0 var(--app-mobile-gutter);
        gap: 0.5rem;
        justify-content: space-between !important;
        align-items: stretch;
        overflow: visible;
        white-space: normal;
        display: flex !important;
    }

    .app-auth-shell .app-mobile-top-tabs .nav-link {
        padding: 0 0 0.25rem !important;
        font-size: 0.875rem !important;
        line-height: 1.15rem;
        letter-spacing: -0.0094rem;
        flex: 1 1 0;
        min-width: 0;
        max-width: 100%;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 2.8rem;
        max-width: 6.25rem;
        margin-inline: auto;
    }

    /* .app-auth-shell .app-mobile-top-tabs .nav-link:nth-child(2) {
        font-size: 0.8125rem !important;
    } */

    /* .app-auth-shell .font_mobile_bold {
        font-size: 0.875rem !important;
        line-height: 1.25rem;
        font-weight: 700 !important;
        color: #ffffff !important;
        border-bottom: 0.125rem solid #ffffff !important;
    } */

    .app-auth-shell .font_mobile_normal {
        font-size: 0.875rem !important;
        line-height: 1.25rem;
        font-weight: 500 !important;
        border-bottom: 0.125rem solid transparent !important;
    }
    [data-bs-theme="dark"].app-auth-shell .font_mobile_normal {
        color: #99a1af !important;
    }
    [data-bs-theme="light"].app-auth-shell .font_mobile_normal {
        color: #5f5f5f !important;
    }
    .app-auth-shell .dashboard-home-container {
        width: 100%;
        max-width: none;
        padding-left: var(--app-mobile-gutter) !important;
        padding-right: var(--app-mobile-gutter) !important;
    }

    .app-auth-shell main .container-fluid {
        width: 100%;
        max-width: none;
        padding-left: var(--app-mobile-gutter) !important;
        padding-right: var(--app-mobile-gutter) !important;
    }

    .app-auth-shell .app-main-row,
    .app-auth-shell .dashboard-main-row {
        --bs-gutter-x: 0;
        /* row-gap: var(--app-mobile-gap); */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .app-auth-shell .app-main-row > [class*="col-"],
    .app-auth-shell .dashboard-main-row > [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .app-auth-shell .dashboard-center-col {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .app-auth-shell main[role="main"] {
        padding-bottom: 5.5rem;
    }

    .app-auth-shell .menuMobile {
        /* padding-bottom: env(safe-area-inset-bottom, 0); */
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        margin-inline: 0;
        border-radius: 0;
        border: 0;
        background: #000000 !important;
        box-shadow: none;
        overflow: hidden;
    }

    /* .app-auth-shell .menuMobile::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: calc(0.5rem + env(safe-area-inset-bottom, 0));
        transform: translateX(-50%);
        width: 8.4375rem; 
        height: 0.3125rem; 
        background: #b9c0c9;
        border-radius: 6.25rem;
    } */

    .app-auth-shell .menuMobile .list-inline {
        /* width: min(100%, var(--app-mobile-frame)); */
        margin: 0 auto;
        min-height: 3.625rem; /* 58px */
        padding: 0.75rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
        align-items: center;
    }

    .app-auth-shell .menuMobile .bd-highlight {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .app-auth-shell .menuMobile .btn-mobile {
        min-height: 2.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.375rem;
        color: #ffffff !important;
        padding: 0.5rem 0.75rem;
        border-radius: 6.25rem;
    }

    .app-auth-shell .menuMobile .btn-mobile .icon-navbar,
    .app-auth-shell .menuMobile .btn-mobile i.icon-navbar,
    .app-auth-shell .menuMobile .btn-mobile svg,
    .app-auth-shell .menuMobile .btn-mobile svg * {
        color: #ffffff !important;
        stroke: #ffffff !important;
    }

    .app-auth-shell .menuMobile .btn-mobile.active {
        color: #000000 !important;
        background: #ffffff;
        border-radius: 6.25rem;
        min-width: 5.625rem; /* 90px */
    }

    .app-auth-shell .menuMobile .btn-mobile.active .icon-navbar,
    .app-auth-shell .menuMobile .btn-mobile.active i.icon-navbar,
    .app-auth-shell .menuMobile .btn-mobile.active svg,
    .app-auth-shell .menuMobile .btn-mobile.active svg * {
        color: #000000 !important;
        stroke: #000000 !important;
    }

    .app-auth-shell .menuMobile .btn-mobile .font_weight_400 {
        font-size: 0.75rem !important;
        line-height: 1rem;
        font-weight: 500 !important;
    }

    .app-auth-shell .menuMobile .icon-navbar {
        font-size: 1.125rem;
        line-height: 1;
    }

    .app-auth-shell .menuMobile .mobile-nav-icon-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    /* Keep message badge pinned to icon corner, even when active label is shown */
    .app-auth-shell .menuMobile .mobile-nav-icon-wrap .noti_msg.notify {
        top: -0.45rem !important;
        right: -0.55rem !important;
        transform: none;
        min-width: 1.05rem;
        height: 1.05rem;
        padding: 2px 0.25rem;
        align-items: center;
        line-height: 1.5;
        font-size: 0.625rem;
    }

    .app-auth-shell footer.footer-bg {
        width: 100%;
        max-width: none;
        margin-inline: 0;
        padding-left: var(--app-mobile-gutter) !important;
        padding-right: var(--app-mobile-gutter) !important;
        padding-bottom: 1rem !important;
    }

    .app-auth-shell footer.footer-bg > .container {
        max-width: var(--app-mobile-content);
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .app-auth-shell footer.footer-bg .row,
    .app-auth-shell footer.footer-bg .col-md-12 {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .app-auth-shell footer.footer-bg .max-w-125 {
        max-width: 7.8125rem !important;
    }

    .app-auth-shell footer.footer-bg .d-lg-none.d-block.pb-5.mb-2.w-100 {
        padding-bottom: 0.75rem !important;
        margin-bottom: 0 !important;
    }

    .app-auth-shell footer.footer-bg .card {
        margin: 0;
    }

    .app-auth-shell footer.footer-bg small {
        font-size: 0.75rem;
        line-height: 1.25rem;
        color: #ffffff;
    }

    .app-auth-shell footer.footer-bg .list-inline.small {
        margin-top: 0.5rem;
    }

    .app-auth-shell footer.footer-bg .list-inline-item {
        margin-right: 0.5rem;
        margin-bottom: 0.25rem;
    }

    .app-auth-shell footer.footer-bg .link-footer {
        color: #99a1af;
        font-size: 0.75rem;
        line-height: 1.25rem;
    }

    .app-auth-shell div.footer-bg {
        width: 100%;
        max-width: none;
        margin-inline: 0;
        padding-left: var(--app-mobile-gutter) !important;
        padding-right: var(--app-mobile-gutter) !important;
    }
}

/* Edit post page: middle content only */
html[data-bs-theme="dark"] .edit-post-middle {
    --ep-surface: #191919;
    --ep-input-bg: #303030;
    --ep-border: rgba(255, 255, 255, 0.1);
    --ep-text: #ffffff;
    --ep-muted: #a3a3a3;
    --ep-accent: #e2394c;
    --ep-shadow: 0 0.25rem 1.5625rem rgba(42, 134, 66, 0.08);
}

html[data-bs-theme="light"] .edit-post-middle {
    --ep-surface: #ffffff;
    --ep-input-bg: #f5f6f8;
    --ep-border: rgba(15, 23, 42, 0.1);
    --ep-text: #111827;
    --ep-muted: #6b7280;
    --ep-accent: #e2394c;
    --ep-shadow: 0 0.625rem 1.875rem rgba(15, 23, 42, 0.08);
}

.edit-post-middle .edit-post-header-row {
    margin-bottom: 0.75rem !important;
}

.edit-post-middle .edit-post-title {
    color: var(--ep-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.edit-post-middle .edit-post-title a {
    color: var(--ep-text) !important;
}

.edit-post-middle .edit-post-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.edit-post-middle .edit-post-surface {
    margin-bottom: 0 !important;
}

.edit-post-middle .edit-post-fields > label {
    color: var(--ep-text);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.edit-post-middle .edit-post-description {
    min-height: 8rem;
    border-radius: 0.75rem;
    border: 0.0625rem solid var(--ep-border);
    background: var(--ep-input-bg) !important;
    color: var(--ep-text) !important;
    padding: 0.875rem 1rem !important;
}

.edit-post-middle .edit-post-description::placeholder {
    color: var(--ep-muted);
}

.edit-post-middle .edit-post-actions {
    border-top: 0;
    padding-top: 0.75rem !important;
}

.edit-post-middle .edit-post-toolbar {
    background: transparent;
    border-radius: 0.75rem;
}

.edit-post-middle .action_user_info strong a,
.edit-post-middle .action_user_info small,
.edit-post-middle .action_user_info span small {
    color: var(--ep-text) !important;
}

.edit-post-middle .btnEditUpdate {
    border-radius: 0.625rem !important;
    min-height: 3rem;
    font-size: 1rem !important;
    font-weight: 600;
    background-color: var(--ep-accent);
    border-color: var(--ep-accent);
}

.edit-post-middle #the-count small {
    color: var(--ep-muted);
}

.edit-post-middle #the-count {
    margin-top: 0.375rem !important;
}

@media (max-width: 61.99875rem) {
    .edit-post-middle .edit-post-card {
        padding: 0.75rem;
        border-radius: 1rem;
    }

    .edit-post-middle .edit-post-description {
        min-height: 6.75rem;
    }
}

@media (max-width: 47.99875rem) {
    .edit-post-middle {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    .edit-post-middle .edit-post-header-row {
        margin-bottom: 0.5rem !important;
    }

    .edit-post-middle .edit-post-title {
        padding-bottom: 0.5rem !important;
    }

    .edit-post-middle .edit-post-card {
        padding: 0;
        border-radius: 0;
    }

    .edit-post-middle .edit-post-description {
        min-height: 11.5rem;
        border-radius: 0.875rem;
    }

    .edit-post-middle .edit-post-actions {
        margin-top: 0.625rem;
        padding-top: 0.5rem !important;
    }

    .edit-post-middle .edit-post-toolbar {
        display: flex !important;
        justify-content: space-between;
        align-items: center !important;
        gap: 0.5rem;
        flex-wrap: nowrap;
    }

    .edit-post-middle .edit-post-toolbar .action-left {
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(100% - 11.25rem);
    }

    .edit-post-middle .edit-post-toolbar > div:last-child {
        display: flex;
        align-items: center;
        gap: 0.125rem;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .edit-post-middle .edit-post-toolbar > div:last-child .btn {
        padding: 0.25rem !important;
        min-width: 1.75rem;
        min-height: 1.75rem;
    }

    .edit-post-middle .edit-post-toolbar > div:last-child .f-size-20 {
        font-size: 1.125rem !important;
    }

    .edit-post-middle .btnEditUpdate {
        min-height: 3.25rem;
        border-radius: 0.75rem !important;
    }

    .edit-post-middle #the-count {
        margin-top: 0.25rem !important;
        margin-right: 0 !important;
    }
}

/* Mobile dashboard baseline (project-wide, authenticated shell only) */
@media (max-width: 47.99875rem) {
    /*
    .app-auth-shell main[role="main"] .section.section-sm {
        min-height: auto !important;
        padding-top: 4.875rem !important;
        padding-bottom: 1.25rem !important;
    }*/

    .app-auth-shell main[role="main"] .section.section-sm.section-msg {
        padding-top: 0 !important;
    }

    .app-auth-shell main[role="main"] .section.section-sm > .container-fluid {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--app-mobile-gutter) !important;
        padding-right: var(--app-mobile-gutter) !important;
    }

    .app-auth-shell.shop-add-product-page main[role="main"] .section.section-sm {
        padding-bottom: 1rem !important;
    }

    .app-auth-shell main[role="main"] .section.section-sm .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .app-auth-shell
        main[role="main"]
        .section.section-sm
        .row
        > [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .app-auth-shell main[role="main"] h1 {
        font-size: 1.5rem !important;
        line-height: 1.25 !important;
    }

    .app-auth-shell main[role="main"] h2 {
        font-size: 1.375rem !important;
        line-height: 1.3 !important;
    }

    .app-auth-shell main[role="main"] h3 {
        font-size: 1.25rem !important;
        line-height: 1.35 !important;
    }

    .app-auth-shell main[role="main"] .fs-24 {
        font-size: 1.5rem !important;
        line-height: 1.25 !important;
    }

    .app-auth-shell main[role="main"] .fs-16 {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    .app-auth-shell main[role="main"] .fs-14 {
        font-size: 0.875rem !important;
        line-height: 1.45 !important;
    }

    .app-auth-shell main[role="main"] .card,
    .app-auth-shell main[role="main"] .panel,
    .app-auth-shell main[role="main"] .menu-left-home,
    .app-auth-shell main[role="main"] .left-settings-sidebar,
    .app-auth-shell main[role="main"] .my-card-not-card-added,
    .app-auth-shell main[role="main"] .wrapper-msg-inbox {
        border-radius: 1rem !important;
    }

    /* .app-auth-shell .menuMobile .list-inline {
        max-width: var(--app-mobile-frame);
    } */

    .app-auth-shell footer.footer-bg > .container {
        max-width: var(--app-mobile-content);
    }
}

/* =========================
   App Shell: Light Theme
   ========================= */
html[data-bs-theme="light"] .app-auth-shell {
    --co-bg: #f5f7fb;
    --co-surface: #ffffff;
    --co-border: rgba(17, 24, 39, 0.08);
    --co-text: #1f2937;
    --co-muted: #667085;
    --co-menu-item: #ffffff;
    --co-footer: #ffffff;
    background: var(--co-bg);
    color: var(--co-text);
}

/* App Shell: Light Theme Navbar */
html[data-bs-theme="light"] .app-auth-shell .modern-navbar.site-header {
    background: #0b0d11 !important;
    border-color: #0b0d11 !important;
    box-shadow: 0 0.5rem 1.875rem rgba(15, 23, 42, 0.22);
}

html[data-bs-theme="light"]
    .app-auth-shell
    .modern-navbar.site-header
    .nav-link:not(.btn),
html[data-bs-theme="light"]
    .app-auth-shell
    .modern-navbar.site-header
    .text_color_white,
html[data-bs-theme="light"]
    .app-auth-shell
    .modern-navbar.site-header
    .navbar_mid_link {
    color: #ffffff !important;
}

/* App Shell: Light Theme Search + Header Actions */
html[data-bs-theme="light"] .app-auth-shell .search-bar,
html[data-bs-theme="light"]
    .app-auth-shell
    .modern-navbar.site-header
    .main_head_search
    .btn_mobile_nav,
html[data-bs-theme="light"]
    .app-auth-shell
    .modern-navbar.site-header
    .buttons-mobile-nav
    .btn_mobile_nav {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

html[data-bs-theme="light"] .app-auth-shell .search-bar {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}

html[data-bs-theme="light"] .app-auth-shell .search-bar::placeholder {
    color: #6b7280 !important;
}

html[data-bs-theme="light"]
    .app-auth-shell
    .modern-navbar.site-header
    .main_head_search
    .btn_mobile_nav,
html[data-bs-theme="light"]
    .app-auth-shell
    .modern-navbar.site-header
    .buttons-mobile-nav
    .btn_mobile_nav {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}

/* App Shell: Light Theme Dropdowns */
html[data-bs-theme="light"] .app-auth-shell .dd-menu-user,
html[data-bs-theme="light"] .app-auth-shell .dropdown-menu.dd-menu-user {
    background: var(--light-surface) !important;
    border: 1px solid var(--light-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--light-shadow) !important;
}

html[data-bs-theme="light"] .app-auth-shell .dd-menu-user:before {
    color: var(--light-surface) !important;
}

html[data-bs-theme="light"] .app-auth-shell .dropdown-item.dropdown-navbar,
html[data-bs-theme="light"] .app-auth-shell .dropdown-item.balance {
    color: #1f2937 !important;
    background: transparent !important;
}

html[data-bs-theme="light"] .app-auth-shell .dropdown-item.dropdown-navbar:hover,
html[data-bs-theme="light"] .app-auth-shell .dropdown-item.dropdown-navbar:focus {
    background: #f8fafc !important;
    color: #111827 !important;
}

html[data-bs-theme="light"] .app-auth-shell .dropdown-divider {
    border-top-color: rgba(15, 23, 42, 0.08) !important;
}

/* App Shell: Light Theme Surfaces */
html[data-bs-theme="light"] .app-auth-shell .section,
html[data-bs-theme="light"] .app-auth-shell main[role="main"] {
    background: var(--co-bg) !important;
}

html[data-bs-theme="light"] .app-auth-shell .menu-left-home,
html[data-bs-theme="light"] .app-auth-shell .left-settings-sidebar,
html[data-bs-theme="light"] .app-auth-shell .dashboard-center-col .card,
html[data-bs-theme="light"] .app-auth-shell .dashboard-right-col .card,
html[data-bs-theme="light"] .app-auth-shell .dashboard-right-col .panel,
html[data-bs-theme="light"] .app-auth-shell .wrapper-msg-inbox,
html[data-bs-theme="light"] .app-auth-shell .my-card-not-card-added,
html[data-bs-theme="light"] .app-auth-shell .card-updates-cover-image,
html[data-bs-theme="light"] .app-auth-shell div.media-post {
    background: #ffffff !important;
    border: 0.0625rem solid var(--co-border) !important;
    box-shadow: 0 0.375rem 1.5rem rgba(15, 23, 42, 0.06) !important;
}

/* App Shell: Light Theme Navigation */
html[data-bs-theme="light"] .app-auth-shell .menu-left-home li a,
html[data-bs-theme="light"] .app-auth-shell .sidebar_li a,
html[data-bs-theme="light"]
    .app-auth-shell
    .left-settings-sidebar
    .list-group-item
    span {
    color: #495057;
}

html[data-bs-theme="light"] .app-auth-shell .menu-left-home li a.active,
html[data-bs-theme="light"] .app-auth-shell .menu-left-home li a:hover,
html[data-bs-theme="light"]
    .app-auth-shell
    .left-settings-sidebar
    .list-group-item.active,
html[data-bs-theme="light"]
    .app-auth-shell
    .left-settings-sidebar
    .list-group-item:hover {
    background: #e2394c !important;
    color: #ffffff !important;
}

html[data-bs-theme="light"]
    .app-auth-shell
    .left-settings-sidebar
    .list-group-item.active
    span,
html[data-bs-theme="light"]
    .app-auth-shell
    .left-settings-sidebar
    .list-group-item:hover
    span {
    color: #ffffff !important;
}

html[data-bs-theme="light"] .app-auth-shell .action-pill {
    background: #eef2f7;
    color: #667085 !important;
}

html[data-bs-theme="light"] .app-auth-shell .action-pill.active,
html[data-bs-theme="light"] .app-auth-shell .action-pill.text-primary {
    background: #fdecef;
    color: #e2394c !important;
}

/* App Shell: Light Theme Typography */
html[data-bs-theme="light"] .app-auth-shell .text-muted,
html[data-bs-theme="light"] .app-auth-shell small,
html[data-bs-theme="light"] .app-auth-shell .lead {
    color: #5f5f5f !important;
}

html[data-bs-theme="light"] .app-auth-shell footer.footer-bg,
html[data-bs-theme="light"] .app-auth-shell div.footer-bg {
    background: #171717 !important;
    border-top: 1px solid #171717 !important;
    color: #d1d5db !important;
}

html[data-bs-theme="light"] .app-auth-shell .app-footer-shell {
    background: #171717 !important;
}

html[data-bs-theme="light"] .app-auth-shell footer.footer-bg small,
html[data-bs-theme="light"] .app-auth-shell footer.footer-bg .link-footer,
html[data-bs-theme="light"] .app-auth-shell footer.footer-bg .footer-tiny,
html[data-bs-theme="light"] .app-auth-shell footer.footer-bg .dropdown-toggle.footer-tiny {
    color: #d1d5db !important;
}

html[data-bs-theme="light"] .app-auth-shell footer.footer-bg a,
html[data-bs-theme="light"] .app-auth-shell div.footer-bg a,
html[data-bs-theme="light"] .app-auth-shell .footer_text_color,
html[data-bs-theme="light"] .app-auth-shell .footer_text_color .link-footer {
    color: #d1d5db !important;
}

html[data-bs-theme="light"] .app-auth-shell footer.footer-bg .link-footer:hover,
html[data-bs-theme="light"] .app-auth-shell footer.footer-bg .footer-tiny:hover,
html[data-bs-theme="light"] .app-auth-shell footer.footer-bg a:hover {
    color: #ffffff !important;
}

html[data-bs-theme="light"] .app-auth-shell footer.footer-bg .card,
html[data-bs-theme="light"] .app-auth-shell .app-footer-shell .card {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html[data-bs-theme="light"] .app-auth-shell footer.footer-bg .card-body,
html[data-bs-theme="light"] .app-auth-shell .app-footer-shell .card-body {
    background: transparent !important;
    background-color: transparent !important;
}

/* App Shell: Light Theme Headings + Copy */
html[data-bs-theme="light"] .app-auth-shell main h1,
html[data-bs-theme="light"] .app-auth-shell main h2,
html[data-bs-theme="light"] .app-auth-shell main h3,
html[data-bs-theme="light"] .app-auth-shell main h4,
html[data-bs-theme="light"] .app-auth-shell main h5,
html[data-bs-theme="light"] .app-auth-shell main h6,
html[data-bs-theme="light"] .app-auth-shell main .card-title,
html[data-bs-theme="light"] .app-auth-shell main .modal-title,
html[data-bs-theme="light"] .app-auth-shell main label,
html[data-bs-theme="light"] .app-auth-shell main .title,
html[data-bs-theme="light"] .app-auth-shell main .title-login,
html[data-bs-theme="light"] .app-auth-shell main .title_login {
    color: #111827;
}

html[data-bs-theme="light"] .app-auth-shell main p,
html[data-bs-theme="light"] .app-auth-shell main li,
html[data-bs-theme="light"] .app-auth-shell main small,
html[data-bs-theme="light"] .app-auth-shell td,
html[data-bs-theme="light"] .app-auth-shell th,
html[data-bs-theme="light"] .app-auth-shell .small,
html[data-bs-theme="light"] .app-auth-shell .text-muted,
html[data-bs-theme="light"] .app-auth-shell .muted-content,
html[data-bs-theme="light"] .app-auth-shell .card-body span,
html[data-bs-theme="light"] .app-auth-shell .modal-body span,
html[data-bs-theme="light"] .app-auth-shell .date-span {
    color: #667085;
}

/* App Shell: Light Theme Cards + Panels */
html[data-bs-theme="light"] .app-auth-shell .card,
html[data-bs-theme="light"] .app-auth-shell .modal-content,
html[data-bs-theme="light"] .app-auth-shell .dropdown-menu:not(.dropdown-emoji),
html[data-bs-theme="light"] .app-auth-shell .nav_profile,
html[data-bs-theme="light"] .app-auth-shell .sub-main,
html[data-bs-theme="light"] .app-auth-shell .notify-card,
html[data-bs-theme="light"] .app-auth-shell .notify-div,
html[data-bs-theme="light"] .app-auth-shell .large-dash-card,
html[data-bs-theme="light"] .app-auth-shell .dash-card,
html[data-bs-theme="light"] .app-auth-shell .dash-card-mini,
html[data-bs-theme="light"] .app-auth-shell .referral-link-card .card-body,
html[data-bs-theme="light"] .app-auth-shell .ref-card-body,
html[data-bs-theme="light"] .app-auth-shell .bg-whitee,
html[data-bs-theme="light"] .app-auth-shell .bg-dark-force {
    background: #ffffff !important;
    color: #1f2937 !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.06);
}

html[data-bs-theme="light"] .app-auth-shell .card-header,
html[data-bs-theme="light"] .app-auth-shell .card-footer,
html[data-bs-theme="light"] .app-auth-shell .modal-header,
html[data-bs-theme="light"] .app-auth-shell .modal-footer {
    border-color: rgba(15, 23, 42, 0.08) !important;
}

/* App Shell: Light Theme Forms */
html[data-bs-theme="light"] .app-auth-shell .form-control,
html[data-bs-theme="light"] .app-auth-shell .custom-select,
html[data-bs-theme="light"] .app-auth-shell .input-group-alternative .form-control,
html[data-bs-theme="light"] .app-auth-shell .input-group-alternative .input-group-text,
html[data-bs-theme="light"] .app-auth-shell .input-group-sub .form-control,
html[data-bs-theme="light"] .app-auth-shell .input-group-sub .input-sub-text,
html[data-bs-theme="light"] .app-auth-shell select,
html[data-bs-theme="light"] .app-auth-shell textarea {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
}

html[data-bs-theme="light"] .app-auth-shell .form-control::placeholder,
html[data-bs-theme="light"] .app-auth-shell textarea::placeholder,
html[data-bs-theme="light"] .app-auth-shell input::placeholder {
    color: #98a2b3 !important;
}

html[data-bs-theme="light"] .app-auth-shell .form-control:focus,
html[data-bs-theme="light"] .app-auth-shell .custom-select:focus,
html[data-bs-theme="light"] .app-auth-shell textarea:focus,
html[data-bs-theme="light"] .app-auth-shell select:focus {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: rgba(226, 57, 76, 0.28) !important;
    box-shadow: 0 0 0 0.2rem rgba(226, 57, 76, 0.08) !important;
}

html[data-bs-theme="light"] .app-auth-shell .input-group-text {
    background: #ffffff;
    color: #98a2b3;
    border-color: rgba(15, 23, 42, 0.12);
}

/* App Shell: Light Theme Lists + Tables */
html[data-bs-theme="light"] .app-auth-shell .list-group-item,
html[data-bs-theme="light"] .app-auth-shell .dropdown-item,
html[data-bs-theme="light"] .app-auth-shell .table,
html[data-bs-theme="light"] .app-auth-shell .table td,
html[data-bs-theme="light"] .app-auth-shell .table th {
    color: #475467;
}

html[data-bs-theme="light"] .app-auth-shell .list-group-item {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.08);
}

html[data-bs-theme="light"] .app-auth-shell .list-group-item-action:hover,
html[data-bs-theme="light"] .app-auth-shell .dropdown-item:hover,
html[data-bs-theme="light"] .app-auth-shell .dropdown-item:focus {
    background: #f8fafc;
    color: #111827;
}

html[data-bs-theme="light"] .app-auth-shell .table thead th,
html[data-bs-theme="light"] .app-auth-shell .table tr {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    color: #667085;
}

html[data-bs-theme="light"] .app-auth-shell .table tbody {
    background-color: #ffffff;
}

html[data-bs-theme="light"] .app-auth-shell .table tbody tr {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

/* App Shell: Light Theme Alerts + Pagination */
html[data-bs-theme="light"] .app-auth-shell .alert-success,
html[data-bs-theme="light"] .app-auth-shell .alert-primary,
html[data-bs-theme="light"] .app-auth-shell .alert-warning,
html[data-bs-theme="light"] .app-auth-shell .alert-danger,
html[data-bs-theme="light"] .app-auth-shell .alert_custom,
html[data-bs-theme="light"] .app-auth-shell .not_creator_alert {
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

html[data-bs-theme="light"] .app-auth-shell .page-link {
    background: #ffffff;
    color: #475467;
    border-color: rgba(15, 23, 42, 0.08);
}

html[data-bs-theme="light"] .app-auth-shell .page-link:hover,
html[data-bs-theme="light"] .app-auth-shell .page-item.active .page-link {
    background: #fdecef;
    color: #e2394c;
    border-color: rgba(226, 57, 76, 0.18);
}

/* App Shell: Light Theme Mobile Overrides */
@media (max-width: 47.99875rem) {
    html[data-bs-theme="light"] .app-auth-shell header {
        background: #0b0d11 !important;
    }

    html[data-bs-theme="light"] .app-auth-shell .modern-navbar.site-header {
        background: #0b0d11 !important;
        border: 0.0625rem solid #0b0d11 !important;
        box-shadow: 0 0.5rem 1.875rem rgba(15, 23, 42, 0.22) !important;
        margin: 0 auto 0.625rem !important;
        padding: 0.625rem var(--app-mobile-gutter) 0.95rem !important;
        min-height: 3.25rem;
    }

    html[data-bs-theme="light"] .app-auth-shell .app-mobile-top-tabs {
        margin-top: 0.25rem;
    }

    html[data-bs-theme="light"]
        .app-auth-shell
        .modern-navbar.site-header
        .nav-link:not(.btn),
    html[data-bs-theme="light"]
        .app-auth-shell
        .modern-navbar.site-header
        .text_color_white,
    html[data-bs-theme="light"]
        .app-auth-shell
        .modern-navbar.site-header
        .navbar_mid_link {
        color: #ffffff !important;
    }

    html[data-bs-theme="light"] .app-auth-shell .search-bar,
    html[data-bs-theme="light"]
        .app-auth-shell
        .modern-navbar.site-header
        .main_head_search
        .btn_mobile_nav,
    html[data-bs-theme="light"]
        .app-auth-shell
        .modern-navbar.site-header
        .buttons-mobile-nav
        .btn_mobile_nav {
        background: rgba(255, 255, 255, 0.14) !important;
        border: 0.0625rem solid rgba(255, 255, 255, 0.2) !important;
        color: #ffffff !important;
    }
}

/* Messages pages: shared 3-column setup + landing state alignment */
@media (min-width: 48rem) {
    .messages-landing-page
        > .container-fluid
        > .row.justify-content-center.h-100
        > .col-lg-3:first-child
        > ul.menu-left-home,
    .messages-chat-page
        > .container-fluid
        > .row.justify-content-center.h-100
        > .col-lg-3:first-child
        > ul.menu-left-home {
        margin-bottom: 2px !important;
    }

    .messages-landing-page,
    .messages-chat-page {
        --messages-footer-gap: 1rem;
        min-height: calc(100vh - 10.5rem - var(--messages-footer-gap));
        margin-bottom: var(--messages-footer-gap);
        display: flex;
    }

    .messages-landing-page > .container-fluid,
    .messages-chat-page > .container-fluid {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    .messages-landing-page
        > .container-fluid
        > .row.justify-content-center.h-100,
    .messages-chat-page > .container-fluid > .row.justify-content-center.h-100 {
        min-height: 100%;
        flex: 1 1 auto;
        align-items: stretch;
    }

    .messages-landing-page
        > .container-fluid
        > .row.justify-content-center.h-100
        > [class*="col-"],
    .messages-chat-page
        > .container-fluid
        > .row.justify-content-center.h-100
        > [class*="col-"] {
        display: flex;
    }

    .messages-landing-page
        > .container-fluid
        > .row.justify-content-center.h-100
        > [class*="col-"]:nth-child(1)
        > *,
    .messages-landing-page
        > .container-fluid
        > .row.justify-content-center.h-100
        > [class*="col-"]:nth-child(2)
        > *,
    .messages-chat-page
        > .container-fluid
        > .row.justify-content-center.h-100
        > [class*="col-"]:nth-child(1)
        > *,
    .messages-chat-page
        > .container-fluid
        > .row.justify-content-center.h-100
        > [class*="col-"]:nth-child(2)
        > * {
        flex: 1 1 auto;
    }

    .messages-landing-page .messages-middle-col,
    .messages-chat-page .messages-middle-col {
        display: flex;
    }

    .messages-landing-page .messages-middle-col .messageDiv,
    .messages-chat-page .messages-middle-col .messageDiv {
        flex: 1 1 auto;
        min-height: 100%;
        height: auto;
        margin-bottom: 0 !important;
    }

    .messages-landing-page .messages-middle-col .messageDiv .container-msg {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .messages-landing-page
        .messages-middle-col
        .messageDiv
        .container-msg
        > .flex-column {
        width: 100%;
        justify-content: center !important;
        align-items: center !important;
    }

    .messages-landing-page #messagesContainer.wrapper-msg-inbox,
    .messages-chat-page #messagesContainer.wrapper-msg-inbox {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch !important;
        min-height: calc(100vh - 10.5rem - var(--messages-footer-gap));
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .messages-landing-page #messagesContainer.wrapper-msg-inbox > *,
    .messages-chat-page #messagesContainer.wrapper-msg-inbox > * {
        flex: 0 0 auto;
    }

    .messages-landing-page #messagesContainer.wrapper-msg-inbox,
    .messages-chat-page #messagesContainer.wrapper-msg-inbox {
        width: 100%;
    }

    .messages-landing-page #messagesContainer.wrapper-msg-inbox .msg-inbox,
    .messages-chat-page #messagesContainer.wrapper-msg-inbox .msg-inbox {
        align-items: flex-start;
        width: 100% !important;
    }

    .messages-landing-page
        #messagesContainer.wrapper-msg-inbox
        .msg-inbox
        .list-group,
    .messages-landing-page
        #messagesContainer.wrapper-msg-inbox
        .msg-inbox
        .item-chat,
    .messages-chat-page
        #messagesContainer.wrapper-msg-inbox
        .msg-inbox
        .list-group,
    .messages-chat-page
        #messagesContainer.wrapper-msg-inbox
        .msg-inbox
        .item-chat {
        width: 100% !important;
    }

    .messages-landing-page
        #messagesContainer.wrapper-msg-inbox
        .msg-inbox
        .media,
    .messages-chat-page #messagesContainer.wrapper-msg-inbox .msg-inbox .media {
        width: 100%;
    }

    .messages-landing-page
        #messagesContainer.wrapper-msg-inbox
        .msg-inbox
        .media-body,
    .messages-chat-page
        #messagesContainer.wrapper-msg-inbox
        .msg-inbox
        .media-body {
        flex: 1 1 auto;
        min-width: 0;
    }
}

@media (min-width: 62rem) {
    .messages-landing-page
        > .container-fluid
        > .row.justify-content-center.h-100
        > .col-lg-3:first-child,
    .messages-chat-page
        > .container-fluid
        > .row.justify-content-center.h-100
        > .col-lg-3:first-child {
        flex: 0 0 25%;
        max-width: 25%;
        padding-left: 0 !important;
    }

    .messages-landing-page .messages-middle-col,
    .messages-chat-page .messages-middle-col {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .messages-landing-page #messagesContainer.wrapper-msg-inbox.col-lg-3,
    .messages-chat-page #messagesContainer.wrapper-msg-inbox.col-lg-3,
    .messages-chat-page #messagesContainer.wrapper-msg-inbox.col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
        margin-bottom: 0 !important;
        /*padding-right: 0 !important;*/
    }
}

@media (max-width: 47.99875rem) {
    .messages-landing-page.section-sm {
        --messages-mobile-footer-gap: 1rem;
        padding-top: 0 !important;
        padding-bottom: calc(
            5.5rem + var(--messages-mobile-footer-gap)
        ) !important;
    }

    .messages-landing-page > .container-fluid {
        width: 100%;
        max-width: 24.375rem;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    .messages-landing-page #messagesContainer.wrapper-msg-inbox {
        margin: 0 !important;
        padding: 0.875rem !important;
        border-radius: 1rem !important;
        min-height: calc(
            100vh - 12rem - var(--messages-mobile-footer-gap)
        ) !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .messages-landing-page
        #messagesContainer.wrapper-msg-inbox
        .direct_message_title {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }

    .messages-landing-page #messagesContainer.wrapper-msg-inbox .msg-inbox {
        padding: 0.5rem 0 !important;
        gap: 0.5rem;
    }

    .messages-landing-page
        #messagesContainer.wrapper-msg-inbox
        .msg-inbox
        .list-group-item {
        padding: 0.5rem !important;
        border-radius: 0.75rem;
    }

    .messages-landing-page
        #messagesContainer.wrapper-msg-inbox
        .media-left
        .media-object {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    .messages-landing-page #messagesContainer.wrapper-msg-inbox .media-body h6 {
        font-size: 1rem !important;
        line-height: 1.25 !important;
        margin-bottom: 0.25rem !important;
    }

    .messages-landing-page #messagesContainer.wrapper-msg-inbox .media-body p {
        font-size: 0.9375rem !important;
        line-height: 1.35 !important;
    }

    .messages-landing-page #messagesContainer.wrapper-msg-inbox .timeAgo {
        font-size: 0.75rem !important;
    }

    /* Mobile (chat details page): show middle column, hide right column (inbox list) */
    .messages-chat-page .messages-middle-col {
        display: block !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .messages-chat-page .messages-middle-col .messageDiv {
        display: block !important;
    }

    .messages-chat-page #messagesContainer.wrapper-msg-inbox {
        display: none !important;
    }

    .messages-chat-page.section-sm {
        --messages-mobile-footer-gap: 1rem;
        padding-top: 0 !important;
        padding-bottom: calc(
            5.5rem + var(--messages-mobile-footer-gap)
        ) !important;
        min-height: calc(100dvh - 5.5rem) !important;
        height: calc(100dvh - 5.5rem) !important;
        overflow: hidden !important;
    }

    .messages-chat-page > .container-fluid {
        width: 100%;
        max-width: 24.375rem;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        height: 100%;
        min-height: 0;
    }

    .messages-chat-page > .container-fluid > .row.justify-content-center.h-100,
    .messages-chat-page .messages-middle-col {
        min-height: 0 !important;
        height: 100%;
    }

    .messages-chat-page .messages-middle-col .messageDiv {
        min-height: calc(100dvh - 11.5rem - var(--messages-mobile-footer-gap));
        height: calc(100dvh - 11.5rem - var(--messages-mobile-footer-gap)) !important;
        max-height: calc(100dvh - 11.5rem - var(--messages-mobile-footer-gap)) !important;
        display: flex !important;
        flex-direction: column;
        gap: 14px !important;
        overflow: hidden !important;
    }

    .messages-chat-page .messages-middle-col .messageDiv .container-msg {
        flex: 1 1 auto;
        height: auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .messages-chat-page .messages-middle-col .messageDiv .card-header,
    .messages-chat-page .messages-middle-col .messageDiv .card-footer {
        flex: 0 0 auto;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .app-auth-shell {
        --tablet-shell-offset: 24px;
        --tablet-header-offset: 156px;
        --tablet-sidebar-width: 292px;
        --tablet-content-gap: 24px;
    }

    .app-auth-shell .dashboard-right-col,
    .app-auth-shell .app-main-row > .col-lg-3.col-md-3.d-md-block.d-none {
        display: none !important;
    }

    .app-auth-shell .app-main-row {
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        column-gap: var(--tablet-content-gap);
        row-gap: 0;
    }

    .app-auth-shell .app-main-row > .side_bar_box_shadow {
        position: static;
        top: auto;
        left: auto;
        flex: 0 0 var(--tablet-sidebar-width);
        width: var(--tablet-sidebar-width);
        max-width: var(--tablet-sidebar-width);
        min-width: var(--tablet-sidebar-width);
        height: auto;
        z-index: auto;
        overflow: visible;
        margin-top: 24px;
    }

    .app-auth-shell .modern-navbar.site-header {
        width: calc(100% - (var(--tablet-shell-offset) * 2));
        max-width: none;
        margin-left: auto !important;
        margin-right: auto !important;
        position: relative;
        z-index: 1030;
    }

    .app-auth-shell .modern-navbar.site-header .site-header-search {
        display: none !important;
    }

    .app-auth-shell .modern-navbar.site-header .main_head_search,
    .app-auth-shell .modern-navbar.site-header .buttons-mobile-nav {
        display: flex !important;
        position: static !important;
        margin: 0 !important;
        gap: 8px !important;
        align-items: center;
    }

    .app-auth-shell
        .modern-navbar.site-header
        .main_head_search
        .btn_mobile_nav,
    .app-auth-shell
        .modern-navbar.site-header
        .buttons-mobile-nav
        .btn_mobile_nav {
        inline-size: 36px;
        block-size: 36px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .app-auth-shell main .container-fluid {
        width: 100%;
        max-width: none;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .app-auth-shell .app-main-row > .side_bar_box_shadow + [class*="col-"] {
        flex: 0 0
            calc(
                100% - (var(--tablet-sidebar-width) + var(--tablet-content-gap))
            ) !important;
        width: calc(
            100% - (var(--tablet-sidebar-width) + var(--tablet-content-gap))
        ) !important;
        max-width: calc(
            100% - (var(--tablet-sidebar-width) + var(--tablet-content-gap))
        ) !important;
        min-width: 0;
        margin-left: 0;
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin-top: 24px;
    }

    .app-auth-shell .app-main-row > .side_bar_box_shadow + [class*="col-"] > * {
        max-width: 560px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .app-auth-shell .app-main-row > .side_bar_box_shadow + [class*="col-"] .card,
    .app-auth-shell .app-main-row > .side_bar_box_shadow + [class*="col-"] .panel {
        width: 100%;
        padding: 20px;
        border-radius: 16px;
        margin-bottom: 8px;
    }

    .app-auth-shell
        .app-main-row
        > .side_bar_box_shadow
        + [class*="col-"]
        .card-updates {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }

    .app-auth-shell .app-main-row > .side_bar_box_shadow + [class*="col-"] .avatarUser,
    .app-auth-shell
        .app-main-row
        > .side_bar_box_shadow
        + [class*="col-"]
        .rounded-circle,
    .app-auth-shell
        .app-main-row
        > .side_bar_box_shadow
        + [class*="col-"]
        .media-object {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }

    .app-auth-shell .app-main-row > .side_bar_box_shadow + [class*="col-"] .btn {
        min-height: 44px;
        padding: 10px 16px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .app-auth-shell .app-main-row > .side_bar_box_shadow + [class*="col-"] {
        font-size: 15px;
        line-height: 1.6;
    }

    .app-auth-shell
        .app-main-row
        > .side_bar_box_shadow
        + [class*="col-"]
        .media-body
        h6,
    .app-auth-shell
        .app-main-row
        > .side_bar_box_shadow
        + [class*="col-"]
        .media-body
        strong {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.4;
    }

    .app-auth-shell .app-main-row > .side_bar_box_shadow + [class*="col-"] small,
    .app-auth-shell
        .app-main-row
        > .side_bar_box_shadow
        + [class*="col-"]
        .text-muted {
        font-size: 13px;
        line-height: 1.4;
    }

    .update-meta-mobile {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 0.4rem;
        width: 100%;
    }

    .update-meta-mobile small {
        margin: 0 !important;
        white-space: nowrap;
    }

    .action-left {
        width: 100%;
    }

    .action_user_info {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-width: 0;
    }

    .action_user_heading {
        display: flex;
        align-items: flex-start;
        gap: 0.35rem;
        width: 100%;
    }

    .action_user_heading .post-date-mobile {
        margin-left: auto;
        white-space: nowrap;
        font-size: 12px;
        line-height: 1.2;
    }

    .post-meta-mobile {
        margin-left: auto !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 0.55rem;
        padding-left: 0.5rem;
        white-space: nowrap;
    }

    .post-meta-mobile .type-post {
        margin-left: 0.1rem;
    }

    .app-auth-shell
        .app-main-row
        > .side_bar_box_shadow
        + [class*="col-"]
        .action-bar
        .card-footer.action-pill {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 8px !important;
        flex-wrap: wrap;
        margin-left: 0 !important;
    }

    .app-auth-shell
        .app-main-row
        > .side_bar_box_shadow
        + [class*="col-"]
        .action-bar
        .action-pill {
        min-height: 34px;
        padding: 6px 10px !important;
        gap: 4px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center;
        float: none !important;
    }

    .app-auth-shell
        .app-main-row
        > .side_bar_box_shadow
        + [class*="col-"]
        .containerLikeComment {
        margin-bottom: 0.5rem !important;
    }

    .app-auth-shell
        .app-main-row
        > .side_bar_box_shadow
        + [class*="col-"]
        .bg-dark-force
        + .card-body {
        padding-top: 0.35rem !important;
        padding-bottom: 0.35rem !important;
    }

    .app-auth-shell
        .app-main-row
        > .side_bar_box_shadow
        + [class*="col-"]
        .bg-dark-force
        + .card-body
        .media {
        display: none !important;
    }

    .app-auth-shell
        .app-main-row
        > .side_bar_box_shadow
        + [class*="col-"]
        .action-bar
        .action-pill
        i,
    .app-auth-shell
        .app-main-row
        > .side_bar_box_shadow
        + [class*="col-"]
        .action-bar
        .action-pill
        svg {
        width: 18px !important;
        height: 18px !important;
        font-size: 13px !important;
    }
    .app-auth-shell .modern-navbar.site-header {
        padding: 14px 24px !important;
        background: var(--co-surface) !important;
        border: 0.0625rem solid var(--co-border) !important;
        box-shadow: var(--co-shadow) !important;
        border-radius: var(--co-radius-lg) !important;
    }

    .app-auth-shell
        .modern-navbar.site-header
        .container-fluid
        > .d-flex.justify-content-between {
        display: contents !important;
    }

    .app-auth-shell .modern-navbar.site-header .navbar-left {
        order: 1;
        flex: 0 0 auto;
        display: inline-flex !important;
        align-items: center;
    }

    .app-auth-shell
        .modern-navbar.site-header
        .container-fluid
        > .d-flex.justify-content-between
        > div:last-child {
        order: 3;
        flex: 0 0 auto;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-left: 16px;
    }

    .app-auth-shell .modern-navbar.site-header .main_head_search,
    .app-auth-shell .modern-navbar.site-header .buttons-mobile-nav {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .app-auth-shell .modern-navbar.site-header .main_head_search .d-md-none,
    .app-auth-shell .modern-navbar.site-header .buttons-mobile-nav.d-md-none {
        display: inline-flex !important;
    }

    .app-auth-shell
        .modern-navbar.site-header
        .main_head_search
        .btn_mobile_nav,
    .app-auth-shell
        .modern-navbar.site-header
        .buttons-mobile-nav
        .btn_mobile_nav {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        order: 2;
        position: static !important;
        right: auto !important;
        top: auto !important;
        width: auto !important;
        flex: 1 1 auto;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse
        > .d-md-none.text-right,
    .app-auth-shell .modern-navbar.site-header .site-header-collapse .site-header-actions,
    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse
        > .navbar-nav:last-child {
        display: none !important;
    }

    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse
        > ul.navbar-nav:not(.site-header-center):not(.site-header-search):not(
            .site-header-actions
        ),
    .app-auth-shell .modern-navbar.site-header .site-header-search {
        display: none !important;
    }

    .app-auth-shell .modern-navbar.site-header .site-header-center {
        width: auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        margin-top: 8px !important;
        flex: 1 1 auto;
    }

    .app-auth-shell .modern-navbar.site-header .site-header-center .nav-item {
        display: block !important;
    }

    .app-auth-shell .modern-navbar.site-header .site-header-center .navbar_mid_link,
    .app-auth-shell .modern-navbar.site-header .site-header-center .nav-link {
        min-height: 40px;
        display: inline-flex !important;
        align-items: center !important;
        line-height: 1.2 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .app-auth-shell .modern-navbar.site-header .site-header-actions {
        display: none !important;
    }

    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse.show,
    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse.collapsing
        .site-header-collapse.navbar-collapse.collapsing {
        position: fixed !important;
        top: 14px !important;
        right: 16px !important;
        width: 320px !important;
        max-width: calc(100% - 32px) !important;
        height: calc(100vh - 28px) !important;
        padding: 16px !important;
        border-radius: 16px !important;
        background: #050505 !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) !important;
        z-index: 1060 !important;
        overflow-y: auto !important;
        display: block !important;
    }

    .app-auth-shell .modern-navbar.site-header .container-fluid {
        position: relative;
    }

    .app-auth-shell #mobileCreatorSearch {
        position: absolute;
        top: calc(100% + 8px);
        left: 24px;
        right: auto;
        width: 280px;
        max-width: calc(100% - 48px);
        margin: 0 !important;
        z-index: 1040;
    }

    .app-auth-shell #mobileCreatorSearch.collapse:not(.show) {
        display: none !important;
    }

    .app-auth-shell #mobileCreatorSearch.d-md-none.collapse.show {
        display: block !important;
    }

    .app-auth-shell .modern-navbar.site-header .site-header-collapse.navbar-collapse {
        position: relative !important;
    }

    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse.show
        .site-header-center,
    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse.collapsing
        .site-header-center {
        display: none !important;
    }

    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse.show
        > .d-md-none.text-right,
    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse.collapsing
        > .d-md-none.text-right {
        display: block !important;
    }

    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse.show
        .site-header-actions,
    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse.collapsing
        .site-header-actions,
    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse.show
        > .navbar-nav:last-child,
    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse.collapsing
        > .navbar-nav:last-child {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        gap: 6px;
        margin-top: 8px;
    }

    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse.show
        .d-md-none,
    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse.collapsing
        .d-md-none {
        display: block !important;
    }

    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse.show
        .sidebar-user.d-md-none,
    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse.collapsing
        .sidebar-user.d-md-none,
    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse.show
        .sidebar-card.d-md-none,
    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse.collapsing
        .sidebar-card.d-md-none {
        display: flex !important;
    }

    .modern-navbar.site-header .container-fluid {
        gap: 12px !important;
    }

    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse.show
        .nav-link,
    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse.show
        .dropdown-item,
    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse.collapsing
        .nav-link,
    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse.collapsing
        .dropdown-item {
        color: #ffffff !important;
    }

    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse.show
        .dropdown-divider,
    .app-auth-shell
        .modern-navbar.site-header
        .site-header-collapse.navbar-collapse.collapsing
        .dropdown-divider {
        border-top-color: rgba(255, 255, 255, 0.08) !important;
    }
}

/* BEGIN landing-page moved from resources/views/landing_page.blade.php */
body.landing-page {
      font-family: 'Inter', sans-serif;
      background: #000;
      color: #fff;
    }

    /* HERO SECTION */
    .landing-page .hero {
      position: relative;
      min-height: 90vh;
      background:
        linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        radial-gradient(39.9% 61.25% at 72.33% 54.39%, #000000 0%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%),
        url("../img/background.png");
      background-position: center -56px;
      background-size: 112% auto;
      background-repeat: no-repeat;
      overflow: hidden;
    }

    .landing-page .hero::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 34%;
      background: #000;
      pointer-events: none;
      z-index: 0;
    }

    .landing-page .hero::after {
      display: none;
    }

    .landing-page .hero .container {
      position: relative;
      z-index: 1;
    }

    /* NAVBAR */
    .landing-page .landing-navbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      margin: 0;
      padding: 1.125rem 0 0.625rem;
      border: none;
      border-radius: 0;
      background: transparent !important;
      box-shadow: none;
    }

    .landing-page .landing-navbar-brand {
      font-weight: 700;
      font-size: 22px;
      padding: 0;
      margin-right: 0;
    }

    .landing-page .landing-navbar-collapse {
      display: flex;
      flex: 1 1 auto;
      justify-content: center;
    }

    .landing-page .landing-navbar-nav {
      gap: 1rem;
    }

    .landing-page .landing-nav-link {
      color: #cfcfcf !important;
      font-size: 15px;
      font-weight: 500;
      padding: 0.25rem 0.75rem;
      margin: 0;
    }

    .landing-page .login-btn {
      background: #fff;
      color: #000;
      text-decoration: none;
      border-radius: 10px;
      padding: 10px 18px;
      font-size: 13px;
      font-weight: 600;
    }

    /* HERO CONTENT */
    .landing-page .hero .hero-title {
      font-size: clamp(48px, 5.8vw, 82px);
      font-weight: 800;
      line-height: 1.06;
    }

    .landing-page .hero .hero-title-line {
      display: block;
    }

    .landing-page .hero .hero-title .hero-title-highlight {
      color: #ff4d4d;
    }

    .landing-page .hero .hero-text {
      color: #cfcfcf;
      max-width: 500px;
      margin: 24px 0;
      font-size: 22px;
      line-height: 1.5;
    }

    /* STORE BUTTONS */
    .landing-page .hero .store-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid #4a4a4a;
      border-radius: 12px;
      padding: 11px 16px;
      font-size: 14px;
      color: #fff;
      text-decoration: none;
    }

    /* RATINGS */
    .landing-page .hero .avatars img {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 2px solid #000;
      margin-left: -10px;
    }

    .landing-page .hero .stars {
      color: #facc15;
      font-size: 18px;
    }

    /* PHONES */
    .landing-page .phones {
      position: relative;
      height: 520px;
    }

    .landing-page .phone {
      position: absolute;
      width: 260px;
      height: 520px;
    }

    .landing-page .phone.left {
      right: 240px;
      transform: rotate(-8deg);
    }

    .landing-page .phone.center {
      right: 120px;
      z-index: 2;
    }

    .landing-page .phone.right {
      right: 0;
      transform: rotate(8deg);
    }

    .landing-page .hero .hero-media-grid {
      width: min(100%, 35rem);
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
      margin-left: auto;
      padding: 1rem;
      border-radius: 2rem;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
      backdrop-filter: blur(6px);
    }

    .landing-page .hero .hero-media-card {
      position: relative;
      overflow: hidden;
      aspect-ratio: 0.82;
      min-height: 0;
      border-radius: 1.5rem;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .landing-page .hero .hero-media-card img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .landing-page .landing-feature-strip {
      display: flex !important;
      flex-wrap: nowrap;
      align-items: stretch;
      width: 100%;
      margin-top: 28px;
      border-top: 1px solid rgba(255, 255, 255, 0.18);
      border-bottom: 1px solid rgba(255, 255, 255, 0.18);
      background: #000;
      position: relative;
      z-index: 2;
    }

    .landing-page .landing-feature-strip::before {
      content: "";
      position: absolute;
      top: -1px;
      bottom: -1px;
      left: 50%;
      width: 100vw;
      transform: translateX(-50%);
      background: #000;
      z-index: -1;
    }

    .landing-page .landing-feature-item {
      flex: 1 1 20%;
      min-height: 56px;
      padding: 0.875rem 1rem;
      display: flex !important;
      align-items: center;
      justify-content: center;
      gap: 0.625rem;
      color: #f0f0f0;
      font-size: 0.95rem;
      font-weight: 600;
      text-align: center;
      border-right: 1px solid rgba(255, 255, 255, 0.12);
    }

    .landing-page .landing-feature-item:last-child {
      border-right: none;
    }

    .landing-page .landing-feature-item i {
      font-size: 1.1rem;
      line-height: 1;
      color: #fff;
      opacity: 0.95;
    }

    .landing-page .feature-marquee {
      margin-top: 28px;
      display: grid;
      gap: 12px;
    }

    .landing-page .feature-marquee__row {
      position: relative;
      overflow: hidden;
      mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    }

    .landing-page .feature-marquee__track {
      display: flex;
      width: max-content;
      will-change: transform;
      animation: landing-marquee-left 28s linear infinite;
    }

    .landing-page .feature-marquee__row.is-reverse .feature-marquee__track {
      animation-name: landing-marquee-right;
      animation-duration: 32s;
    }

    .landing-page .feature-marquee__group {
      display: flex;
      align-items: stretch;
      gap: 12px;
      padding-right: 12px;
      flex-shrink: 0;
    }

    .landing-page .feature-marquee__card {
      min-width: 184px;
      min-height: 122px;
      padding: 18px 16px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      text-align: center;
      color: #fff;
      background: rgba(0, 0, 0, 0.94);
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 18px;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
    }

    .landing-page .feature-marquee__icon-wrap {
      width: 52px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .landing-page .feature-marquee__icon {
      width: 46px;
      height: 46px;
      object-fit: contain;
      display: block;
    }

    .landing-page .feature-marquee__emoji {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      line-height: 1;
    }

    .landing-page .feature-marquee__icon--whatsapp {
      fill: #24d366;
    }

    .landing-page .feature-marquee__icon--crypto {
      width: 74px;
      height: 28px;
      object-fit: contain;
    }

    .landing-page .feature-marquee__label {
      margin: 0;
      max-width: 150px;
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.25;
      color: #fff;
    }

    .landing-page .feature-marquee:hover .feature-marquee__track {
      animation-play-state: paused;
    }

    @keyframes landing-marquee-left {
      from {
        transform: translate3d(0, 0, 0);
      }

      to {
        transform: translate3d(-50%, 0, 0);
      }
    }

    @keyframes landing-marquee-right {
      from {
        transform: translate3d(-50%, 0, 0);
      }

      to {
        transform: translate3d(0, 0, 0);
      }
    }

    .landing-page .hero .container > .row.align-items-center {
      margin-top: 2px;
    }

    .landing-page .hero .phones {
      transform: scale(0.95);
      transform-origin: center bottom;
    }

    .landing-page .text-neutral{
        color: #A3A3A3;
    }
.landing-page .key-row{
    padding: 0px 5rem 5rem 5rem;
   
}
/* SECTION */
.landing-page .keypoints {
  padding: 20px 0 20px;
  background: #000;
  position: relative;
  z-index: 2;

}

/* TITLE */
.landing-page .keypoints h2 {
  font-weight: 700;
  font-size: 56px;
  line-height: 1.06;
}

.landing-page .keypoints small {
  color: #9ca3af;
  font-size: 18px;
}

/* TOP CARDS */
.landing-page .kp-card {
  position: relative;
  height: 440px;
  border-radius: 24px;
  padding: 40px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: radial-gradient(25% 20% at 60% 50%, #E2394C 5%, rgba(0, 0, 0, 0) 120%);

}

/* subtle red glow */
.landing-page .kp-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    40% 40% at 50% 70%,
    rgba(255, 0, 0, 0.25),
    transparent 70%
  );
  pointer-events: none;
}


/* divider */
.landing-page .kp-divider {
  position: absolute;
  top: 15%;
  bottom: 15%;
  left: 50%;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 0, 0, 0.6),
    transparent
  );
  transform: translateX(-50%);
}

/* text */
.landing-page .kp-title {
  font-size: 20px;
  font-weight: 600;
}

.landing-page .kp-text {
  font-size: 13px;
  color: #A3A3A3;
  max-width: 220px;
  margin-top: 10px;
}

/* buttons */
.landing-page .btn-red {
  background: #ef4444;
  color: #fff;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 10px;
  border: none;
  max-width: 140px;
}

.landing-page .btn-white {
  background: #fff;
  color: #000;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 10px;
  max-width: 140px;
}

/* phone mock */
.landing-page .phone {
  position: absolute;
  right: 40px;
  bottom: 0;
  width: 150px;
  height: 340px;
}

/* bottom card */
.landing-page .kp-wide {
  border-radius: 28px;
  padding: 40px;
  background:
    #180000
    url("../img/interaction_background.png") center 58%/108% no-repeat;
  position: relative;
  overflow: hidden;
  opacity: 0.8;
}

.landing-page .kp-wide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, #000000, #000000),
    linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    linear-gradient(255.27deg, rgba(0, 0, 0, 0) 2.22%, rgba(0, 0, 0, 0.4) 87.32%);
  opacity: 0.18;
  pointer-events: none;
}

.landing-page .kp-wide > * {
  position: relative;
  z-index: 1;
}

.landing-page .kp-wide p {
  font-size: 16px;
  color: #A3A3A3;
  max-width: 420px;
}

.landing-page .kp-wide .kp-wide-title-line {
  display: block;
}

/* wide phones 
.landing-page .wide-phones {
  position: relative;
  height: 360px;
}*/

.landing-page .wide-phones .phone {
  width: 180px;
  height: 360px;
}

.landing-page .wide-phones .phone:nth-child(1) {
  right: 240px;
  transform: rotate(-10deg);
}

.landing-page .wide-phones .phone:nth-child(2) {
  right: 120px;
  z-index: 2;
}

.landing-page .wide-phones .phone:nth-child(3) {
  right: 0;
  transform: rotate(10deg);
}


@media (max-width: 1023.99px) {
    .landing-page .phones svg{
        max-width: 420px;
    }
    .landing-page .kp-text {
        max-width: 190px;
    }
    .landing-page .phone{
        width: 120px;
        height: auto;
        right: 20px;
        bottom: 20px;
    }
    .landing-page .phone svg{
        width: 120px;
        height: auto;
    }

}
@media (max-width: 991px) {
  .landing-page .hero {
    background-position: center top;
    background-size: cover;
  }

  .landing-page .hero .hero-title {
    font-size: 44px;
  }

  .landing-page .hero .hero-title-line {
    white-space: normal;
  }

  .landing-page .hero .hero-text {
    font-size: 17px;
    max-width: 100%;
  }

  .landing-page .feature-marquee__card {
    min-width: 164px;
    min-height: 110px;
    padding: 16px 14px 14px;
  }

  .landing-page .feature-marquee__icon-wrap {
    width: 46px;
    height: 46px;
  }

  .landing-page .feature-marquee__icon {
    width: 40px;
    height: 40px;
  }

  .landing-page .feature-marquee__emoji {
    font-size: 28px;
  }

  .landing-page .feature-marquee__icon--crypto {
    width: 66px;
    height: 25px;
  }

  .landing-page .feature-marquee__label {
    font-size: 0.92rem;
    max-width: 132px;
  }

  .landing-page .keypoints h2 {
    font-size: 42px;
  }

  .landing-page .keypoints small {
    font-size: 14px;
  }

  .landing-page .phone,
  .landing-page .kp-divider,
  .landing-page .wide-phones {
        display: none;
    }

    .landing-page .key-row {
        padding: 3rem 0px !important;
    }

    .landing-page .kp-card {
        height: auto;
        padding: 28px;
    }

    .landing-page .kp-text {
        max-width: 100%;
    }

    .landing-page .kp-wide {
        opacity: 1;
        background-size: cover;
        background-position: center;
    }
    .landing-page .hero{
        min-height:35vh;
    }

      .landing-page .phones {
        display: none;
      }

}

@media (max-width: 767.98px) {
  .landing-page .landing-navbar {
    padding: 12px 0;
  }

  .landing-page .landing-navbar-brand {
    font-size: 18px;
  }

  .landing-page .landing-nav-link {
    margin: 6px 0;
    font-size: 14px;
  }

  .landing-page .login-btn {
    padding: 8px 12px;
    font-size: 12px;
  }

  .landing-page .hero {
    min-height: auto;
    padding: 40px 0 28px;
    background-position: center top;
    background-size: cover;
  }

  .landing-page .hero .hero-title {
    font-size: 32px;
    line-height: 1.1;
  }

  .landing-page .hero .hero-text {
    font-size: 16px;
    margin: 16px 0;
  }

  .landing-page .hero .store-btn {
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
  }

  .landing-page .hero .avatars img {
    width: 28px;
    height: 28px;
    margin-left: -6px;
  }

  .landing-page .hero .stars {
    font-size: 16px;
  }

  .landing-page .feature-marquee {
    margin-top: 16px;
    gap: 10px;
  }

  .landing-page .feature-marquee__row {
    mask-image: none;
    -webkit-mask-image: none;
  }

  .landing-page .feature-marquee__track {
    animation-duration: 24s;
  }

  .landing-page .feature-marquee__row.is-reverse .feature-marquee__track {
    animation-duration: 27s;
  }

  .landing-page .feature-marquee__group {
    gap: 10px;
    padding-right: 10px;
  }

  .landing-page .feature-marquee__card {
    min-width: 142px;
    min-height: 98px;
    padding: 14px 12px 12px;
    gap: 10px;
    border-radius: 14px;
  }

  .landing-page .feature-marquee__icon-wrap {
    width: 40px;
    height: 40px;
  }

  .landing-page .feature-marquee__icon {
    width: 34px;
    height: 34px;
  }

  .landing-page .feature-marquee__emoji {
    font-size: 24px;
  }

  .landing-page .feature-marquee__icon--crypto {
    width: 58px;
    height: 22px;
  }

  .landing-page .feature-marquee__label {
    font-size: 0.84rem;
    max-width: 114px;
  }

  .landing-page .key-row {
    padding: 2.5rem 1.25rem;
  }

  .landing-page .keypoints h2 {
    font-size: 28px;
  }

  .landing-page .kp-card {
    height: auto;
    padding: 24px;
  }

  .landing-page .kp-card .d-flex {
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }

  .landing-page .kp-card .btn-red,
  .landing-page .kp-card .btn-white {
    width: auto;
    white-space: nowrap;
  }

  .landing-page .kp-title {
    font-size: 16px;
  }

  .landing-page .kp-text {
    font-size: 12px;
    max-width: 100%;
  }

  .landing-page .btn-red,
  .landing-page .btn-white {
    font-size: 12px;
    padding: 8px 12px;
  }

  .landing-page .kp-wide {
    padding: 24px;
    background-position: center;
    background-size: cover;
  }

  .landing-page .hero-section {
    padding: 50px 0;
  }

  .landing-page .hero-section .hero-title {
    font-size: 26px;
  }

  .landing-page .hero-section .hero-text {
    font-size: 13px;
  }

  .landing-page .faq-title {
    font-size: 22px;
    margin: 36px 0 20px;
  }

  .landing-page .faq-btn {
    padding: 14px 16px;
    font-size: 14px;
  }

  .landing-page .faq-body {
    padding: 0 16px 16px;
    font-size: 13px;
  }

  .landing-page .list-inline-item {
    margin: 0 6px 6px;
  }
}

@media (max-width: 575.98px) {
  .landing-page .hero .hero-title {
    font-size: 28px;
  }

  .landing-page .hero .hero-text {
    font-size: 14px;
  }

  .landing-page .keypoints h2 {
    font-size: 24px;
  }

  .landing-page .key-row {
    padding: 2rem 1rem;
  }

  .landing-page .hero-section {
    padding: 40px 0;
  }

  .landing-page .btn-primary-custom,
  .landing-page .btn-outline-custom {
    width: 100%;
    display: block;
    margin-bottom: 10px;
  }
}

/* DISCOVER SECTION */
.landing-page .hero-section {
    padding: 80px 0;
}

.landing-page .hero-section .hero-title {
    font-size: 36px;
    font-weight: 700;
}

.landing-page .hero-section .hero-text {
    color: #bdbdbd;
    font-size: 14px;
    margin-top: 12px;
}

.landing-page .btn-primary-custom {
    background: #e53945;
    color: #fff;
    border-radius: 16px;
    padding: 12px 24px;
    border: 1px solid #e53945;
    font-weight: 600;
}

.landing-page .btn-outline-custom {
    background: #fff;
    color: #000;
    border-radius: 16px;
    padding: 12px 24px;
    border: 1px solid #fff;
    font-weight: 600;
}


/* FAQ Title */
.landing-page .faq-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    margin: 50px 0 30px;
}

/* Accordion Card */
.landing-page .faq-item {
    background: linear-gradient(180deg, #1a1a1a, #0e0e0e);
    border-radius: 14px;
    margin-bottom: 14px;
    overflow: hidden;
}

/* Button */
.landing-page .faq-btn {
    background: transparent;
    color: #fff;
    font-weight: 600;
    padding: 18px 20px;
    border: none;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.landing-page .faq-btn:focus {
    outline: none;
    box-shadow: none;
}

/* Icon Circle */
.landing-page .faq-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #555;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Toggle Icons */
.landing-page .faq-btn .bi-dash {
    display: none;
}

.landing-page .faq-btn:not(.collapsed) .bi-plus {
    display: none;
}

.landing-page .faq-btn:not(.collapsed) .bi-dash {
    display: inline;
}

/* Body */
.landing-page .faq-body {
    padding: 0 20px 20px;
    color: #bdbdbd;
    font-size: 14px;
}
  

/* Shared footer styles (landing-page scope only) */
.landing-page footer.footer-bg,
.landing-page div.footer-bg {
  background: #141518;
}

.landing-page .footer_background_color {
  background-color: var(--landing-footer-bg, #141518) !important;
}

.landing-page .footer-bg .row {
  margin-left: 0;
  margin-right: 0;
}

.landing-page .footer-bg .col-md-12 {
  padding-left: 0;
  padding-right: 0;
}

.landing-page footer.footer-bg {
  padding-top: 28px;
  padding-bottom: 10px;
}

.landing-page div.footer-bg {
  padding-top: 14px;
  padding-bottom: 20px;
}

.landing-page .footer_text_color,
.landing-page .footer_text_color .link-footer,
.landing-page .link-footer,
.landing-page .copyright,
.landing-page .copyright small {
  color: #c6ceda;
}

.landing-page .link-footer {
  text-decoration: none;
  font-size: 14px;
  line-height: 1.3;
  transition: color .2s ease;
}

.landing-page .link-footer:hover {
  color: #ffffff;
}

.landing-page .copyright {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 400;
}

.landing-page .copyright small {
  font-size: 13px;
}

.landing-page .list-inline {
  margin-bottom: 0;
}

.landing-page .list-inline-item {
  margin: 0 8px 6px;
}

.landing-page .list-social {
  margin-top: 10px;
}

.landing-page .ico-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #353942;
  color: #c6ceda;
  text-decoration: none;
}

.landing-page .ico-social:hover {
  border-color: #ffffff;
  color: #ffffff;
}

.landing-page .footer-bg > li {
  list-style: none;
}


.landing-page .landing-navbar .nav-item {
  margin-left: 0;
  margin-right: 0;
}

@media (min-width: 992px) {
  .landing-page .hero {
    min-height: 45rem;
    background-position: center top;
    background-size: cover;
  }

  .landing-page .hero::before {
    height: 20%;
  }

  .landing-page .landing-navbar {
    padding: 1.375rem 0 0.875rem;
    border-bottom: none;
  }

  .landing-page .landing-navbar-brand svg {
    width: 10.375rem;
    height: auto;
    display: block;
  }

  .landing-page .landing-navbar-collapse {
    justify-content: center;
  }

  .landing-page .landing-navbar-nav {
    gap: 2rem;
  }

  .landing-page .landing-nav-link {
    font-size: 0.875rem;
    padding: 0.25rem 0.375rem;
    color: rgba(255, 255, 255, 0.92) !important;
  }

  .landing-page .login-btn {
    min-width: 0;
    padding: 0.75rem 1rem;
    border-radius: 0.875rem;
    font-size: 0.8125rem;
    line-height: 1;
  }

  .landing-page .hero .row.align-items-center {
    margin-top: 1.25rem !important;
    align-items: center !important;
  }

  .landing-page .hero .hero-title {
    font-size: clamp(1.8rem, 2.35vw, 2.45rem);
    line-height: 1.02;
    max-width: 22rem;
    margin-bottom: 0.75rem;
  }

  .landing-page .hero .hero-title-line {
    white-space: nowrap;
  }

  .landing-page .hero .hero-title-line-2 {
    white-space: nowrap;
  }

  .landing-page .hero .hero-text {
    max-width: 20rem;
    margin: 0 0 1rem;
    font-size: 0.74rem;
    line-height: 1.5;
  }

  .landing-page .store-buttons {
    gap: 0.625rem !important;
    margin-bottom: 0.875rem !important;
  }

  .landing-page .hero .store-btn {
    border-radius: 0.75rem;
    padding: 0.35rem 0.625rem;
    border-color: rgba(255, 255, 255, 0.18);
    font-size: 0.72rem;
  }

  .landing-page .hero .store-btn img {
    display: block;
    width: auto;
    height: 1.75rem;
  }

  .landing-page .hero-metric {
    gap: 0.5rem !important;
    margin-bottom: 0.2rem;
  }

  .landing-page .hero .avatars img {
    width: 1.75rem;
    height: 1.75rem;
    margin-left: -0.5rem;
  }

  .landing-page #installWebAppHelp,
  .landing-page .hero-metric small {
    font-size: 0.66rem;
    line-height: 1.45;
  }

  .landing-page .hero .phones {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 31rem;
    transform: none;
  }

  .landing-page .hero .phones svg {
    width: min(100%, 32rem);
    height: auto;
  }

  .landing-page .hero .hero-media-grid {
    width: min(100%, 30rem);
    gap: 0.875rem;
    padding: 0.875rem;
  }

  .landing-page .hero .hero-media-card {
    aspect-ratio: 0.82;
    min-height: 0;
    border-radius: 1.25rem;
  }

  .landing-page .landing-feature-strip {
    margin-top: 2.25rem;
  }

  .landing-page .landing-feature-item {
    min-height: 3rem;
    font-size: 0.8125rem;
    gap: 0.5rem;
    padding: 0.875rem 0.75rem;
  }

  .landing-page .keypoints {
    padding: 3rem 0 3.5rem;
  }

  .landing-page .keypoints .text-center.mb-5 {
    margin-bottom: 3rem !important;
  }

  .landing-page .keypoints h2 {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 0.5rem;
  }

  .landing-page .keypoints small {
    font-size: 0.875rem;
  }

  .landing-page .key-row {
    padding: 0 0 3.75rem !important;
  }

  .landing-page .kp-card {
    min-height: 21rem;
    height: auto;
    border-radius: 2rem;
    padding: 2rem 2.25rem;
  }

  .landing-page .kp-title {
    font-size: 1.25rem;
    line-height: 1.2;
    max-width: 12rem;
  }

  .landing-page .kp-text {
    font-size: 0.875rem;
    line-height: 1.55;
    max-width: 14rem;
    margin-top: 0.75rem;
  }

  .landing-page .btn-red,
  .landing-page .btn-white {
    min-width: 8rem;
    padding: 0.6875rem 1rem;
    border-radius: 1rem;
    font-size: 0.75rem;
  }

.landing-page .phone {
    right: 1.75rem;
    bottom: 0;
    width: 9rem;
    aspect-ratio: 150 / 340;
    height: auto;
    overflow: hidden;
  }

.landing-page .phone svg {
    width: 100%;
    height: auto;
    display: block;
}

.landing-page .phone img {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 100%;
    max-width: none;
    display: block;
}

  .landing-page .kp-divider {
    top: 10%;
    bottom: 10%;
  }

  .landing-page .kp-wide {
    border-radius: 2rem;
    padding: 3rem 2.5rem;
    min-height: 18rem;
    background-position: center;
    background-size: 100% 100%;
    opacity: 1;
  }

  .landing-page .kp-wide-title-line{
    font-size: 1.75rem;
  }

  .landing-page .kp-wide h1 {
    font-size: 1.75rem;
    line-height: 1.05;
    margin-bottom: 1rem;
    /*max-width: 18rem; */
  }

  

  .landing-page .kp-wide .kp-wide-title {
    max-width: 24rem;
  }

  .landing-page .kp-wide .kp-wide-title-line {
    white-space: nowrap;
  }

  .landing-page .kp-wide p {
    max-width: 22rem;
    font-size: 0.875rem;
    line-height: 1.65;
  }

  .landing-page .kp-wide .phones {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
  }

  .landing-page .kp-wide .phones svg {
    width: min(100%, 22rem);
    height: auto;
  }

  .landing-page .kp-wide .phones img {
    width: min(100%, 22rem);
    height: auto;
    display: block;
  }

  .landing-page .hero-section {
    padding: 4.5rem 0 4rem;
  }

  .landing-page .hero-section .row.align-items-center {
    align-items: center !important;
  }

  .landing-page .hero-section .hero-title {
    font-size: 1.75rem;
    line-height: 1.05;
    max-width: 21rem;
    margin-bottom: 0.875rem;
  }

  .landing-page .hero-section .hero-text {
    max-width: 19rem;
    font-size: 0.75rem;
    line-height: 1.55;
    margin-top: 0;
  }

  .landing-page .hero-section .d-flex.gap-3.mt-4 {
    gap: 1rem !important;
    margin-top: 2rem !important;
  }

  .landing-page .btn-primary-custom,
  .landing-page .btn-outline-custom {
    min-width: 7.5rem;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    font-size: 0.75rem;
  }

  .landing-page .hero-section .col-lg-6.text-center svg {
    width: min(100%, 24rem);
    height: auto;
  }

  .landing-page .hero-section .col-lg-6.text-center img {
    width: min(100%, 24rem);
    height: auto;
    display: block;
    margin-inline: auto;
  }

  .landing-page .faq-title {
    font-size: 2.75rem;
    line-height: 1;
    margin: 3.75rem 0 2rem;
  }

  .landing-page .faq-item {
    border-radius: 1.5rem;
    margin-bottom: 1.25rem;
    background: #1b1b1b;
  }

  .landing-page .faq-btn {
    padding: 1.375rem 1.5rem;
    font-size: 1rem;
    line-height: 1.2;
  }

  .landing-page .faq-icon {
    width: 2rem;
    height: 2rem;
  }

  .landing-page .faq-body {
    padding: 0 1.5rem 1.375rem;
    font-size: 0.75rem;
    line-height: 1.55;
  }

  .landing-page footer.footer-bg {
    padding-top: 2.25rem;
    padding-bottom: 0.875rem;
  }

  .landing-page div.footer-bg {
    padding-top: 1.25rem;
    padding-bottom: 1.75rem;
  }

  .landing-page .copyright {
    margin-top: 1rem;
    font-size: 0.875rem;
  }

  .landing-page .copyright small,
  .landing-page .link-footer {
    font-size: 0.875rem;
  }

  .landing-page #installContainer {
    margin-top: 1.25rem;
  }
}

.landing-page #installContainer {
  display: flex !important;
  justify-content: center;
  margin-top: 14px;
}

.landing-page #installContainer #butInstall,
.landing-page #installContainer .btn {
  width: min(420px, 92vw) !important;
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  border: 1px solid #7f1d1d !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: none !important;
}

.landing-page #installContainer #butInstall:hover,
.landing-page #installContainer .btn:hover {
  background: linear-gradient(135deg, #f05252, #dc2626) !important;
  border-color: #991b1b !important;
}

.landing-page #installContainer #butInstall:focus,
.landing-page #installContainer .btn:focus {
  box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.25) !important;
}
.landing-page .max-w-125 {
  max-width: 150px;
  width: auto;
  height: auto;
  margin-bottom: 10px;
}
/* Landing page mobile refinements */
@media (max-width: 767.98px) {
  .landing-page {
    overflow-x: hidden;
  }

  .landing-page .landing-navbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    row-gap: 1rem;
    padding-block: 0.75rem;
  }

  .landing-page .landing-navbar-brand {
    margin-right: 0;
  }

  .landing-page .landing-navbar-brand svg {
    width: 8.75rem;
    height: auto;
    display: block;
  }

  .landing-page .landing-navbar-collapse {
    display: none !important;
  }

  .landing-page .login-btn {
    display: inline-flex;
    justify-content: center;
    width: auto;
    min-width: 11rem;
    margin-left: auto;
    padding: 0.5625rem 1rem;
  }

  .landing-page .hero .container {
    padding-inline: 1rem;
  }

  .landing-page .hero .row.align-items-center {
    margin-top: 0 !important;
    row-gap: 1.75rem;
  }

  .landing-page .hero .col-lg-6:first-child {
    text-align: center;
  }

  .landing-page .hero .hero-media-grid {
    width: min(100%, 24rem);
    margin-inline: auto;
  }

  .landing-page .hero .hero-title {
    max-width: 15rem;
    margin-inline: auto;
    line-height: 1.05;
    font-size: 1.875rem;
  }

  .landing-page .hero .hero-text {
    margin-inline: auto;
    max-width: 16rem;
    font-size: 0.9375rem;
  }

  .landing-page .store-buttons {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem !important;
    margin-bottom: 1.25rem !important;
  }

  .landing-page .hero .store-btn {
    width: 100%;
    max-width: 8.5rem;
    min-width: 0;
    margin-bottom: 0;
    padding: 0.5rem 0.75rem;
    border-color: transparent;
    min-height: 2.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .landing-page .hero .store-btn img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 1.5rem;
    object-fit: contain;
  }

  .landing-page .hero-metric {
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    gap: 0.5rem !important;
    margin-bottom: 0.75rem;
  }

  .landing-page .hero-metric > div:last-child {
    max-width: 13rem;
  }

  .landing-page .hero .avatars {
    justify-content: center;
  }

  .landing-page .hero .stars {
    display: flex;
    justify-content: center;
  }

  .landing-page .landing-feature-strip {
    display: flex !important;
    flex-wrap: wrap;
    margin-top: 0.5rem;
  }

  .landing-page .landing-feature-item {
    flex: 0 0 50%;
    max-width: 50%;
    min-height: 2.75rem;
    font-size: 0.75rem;
    line-height: 1.2;
    gap: 0.375rem;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .landing-page .landing-feature-item:nth-child(2n) {
    border-right: none;
  }

  .landing-page .landing-feature-item:nth-last-child(-n + 1) {
    border-bottom: none;
  }

  .landing-page .keypoints .text-center.mb-5 {
    margin-bottom: 1.25rem !important;
  }

  .landing-page .keypoints h2 {
    margin-bottom: 0.375rem;
  }

  .landing-page .keypoints {
    padding-top: 0.75rem;
    padding-bottom: 1rem;
  }

  .landing-page .key-row {
    padding: 0 !important;
  }

  .landing-page .landing-kp-col {
    background: transparent !important;
  }

  .landing-page .kp-card {
    padding: 1.5rem 1rem;
    min-height: auto;
  }

  .landing-page .kp-card .d-flex {
    align-items: flex-start;
  }

  .landing-page .kp-title {
    font-size: 1.25rem;
    line-height: 1.15;
    margin-bottom: 0.75rem;
  }

  .landing-page .kp-card .btn-red,
  .landing-page .kp-card .btn-white {
    min-width: 7.5rem;
  }

  .landing-page .kp-text {
    max-width: none;
    font-size: 0.875rem;
    line-height: 1.6;
  }

  .landing-page .kp-card,
  .landing-page .kp-wide,
  .landing-page .faq-item {
    border-radius: 1.5rem;
  }

  .landing-page .kp-wide {
    padding: 1.25rem 1rem;
    margin-top: 0.75rem;
  }

  .landing-page .kp-wide h1 {
    font-size: 2rem;
    line-height: 1.05;
  }

  .landing-page .kp-wide .kp-wide-title-line {
    white-space: normal;
  }

  .landing-page .kp-wide p {
    max-width: none;
    font-size: 0.9375rem;
    line-height: 1.65;
  }

  .landing-page .hero-section {
    padding: 2.25rem 0 1.75rem;
  }

  .landing-page .hero-section .row.align-items-center {
    row-gap: 1.25rem;
  }

  .landing-page .hero-section .col-lg-6:first-child {
    text-align: center;
  }

  .landing-page .hero-section .hero-title {
    font-size: 1.75rem;
    line-height: 1.05;
    max-width: 14rem;
    margin-inline: auto;
  }

  .landing-page .hero-section .hero-text {
    max-width: 15rem;
    margin-inline: auto;
    font-size: 0.8125rem;
    line-height: 1.6;
  }

  .landing-page .hero-section .d-flex.gap-3.mt-4 {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem !important;
  }

  .landing-page .hero-section .btn-primary-custom,
  .landing-page .hero-section .btn-outline-custom {
    min-width: 8rem;
    padding: 0.75rem 0.875rem;
  }

  .landing-page .hero-section .col-lg-6.text-center svg {
    display: block;
    width: 100%;
    max-width: 19rem;
    height: auto;
    margin-inline: auto;
  }

  .landing-page .hero-section .col-lg-6.text-center img {
    display: block;
    width: 100%;
    max-width: 19rem;
    height: auto;
    margin-inline: auto;
  }

  .landing-page .faq-item {
    margin-bottom: 1rem;
  }

  .landing-page .faq-title {
    margin-top: 1.75rem;
    margin-bottom: 1rem;
  }

  .landing-page .footer-bg {
    padding-inline: 1rem;
  }
}

@media (max-width: 575.98px) {
  .landing-page .hero {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
  }

  .landing-page .hero .hero-media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 20rem;
    gap: 0.75rem;
    padding: 0.75rem;
  }

  .landing-page .hero .hero-media-card {
    aspect-ratio: 0.78;
    min-height: 0;
    border-radius: 1rem;
  }

  .landing-page .hero .hero-title {
    font-size: 1.75rem;
    max-width: 12rem;
  }

  .landing-page .hero .hero-text {
    font-size: 0.8125rem;
    line-height: 1.6;
  }

  .landing-page .login-btn {
    min-width: 8.75rem;
    font-size: 0.75rem;
  }

  .landing-page .hero-metric {
    flex-direction: column;
    gap: 0.375rem !important;
  }

  .landing-page .hero-metric > div:last-child {
    max-width: 14rem;
  }

  .landing-page .feature-marquee__track {
    animation-duration: 22s;
  }

  .landing-page .feature-marquee__row.is-reverse .feature-marquee__track {
    animation-duration: 25s;
  }

  .landing-page .kp-card,
  .landing-page .kp-wide {
    padding: 1.25rem;
  }

  .landing-page .keypoints {
    padding-top: 0.5rem;
    padding-bottom: 0.75rem;
  }

  .landing-page .keypoints .text-center.mb-5 {
    margin-bottom: 1rem !important;
  }

  .landing-page .kp-card .d-flex {
    flex-direction: column;
    align-items: stretch;
    gap: 0.625rem !important;
  }

  .landing-page .kp-card .btn-red,
  .landing-page .kp-card .btn-white {
    width: 100%;
    max-width: none;
  }

  .landing-page .kp-title {
    font-size: 1.125rem;
  }

  .landing-page .kp-wide h1 {
    font-size: 1.75rem;
  }

  .landing-page .hero-section .hero-title {
    font-size: 1.5rem;
    max-width: 12rem;
  }

  .landing-page .hero-section .hero-text {
    max-width: 13rem;
    font-size: 0.75rem;
  }

  .landing-page .hero-section .d-flex.gap-3.mt-4 {
    flex-wrap: wrap;
    justify-content: center;
  }

  .landing-page .hero-section .btn-primary-custom,
  .landing-page .hero-section .btn-outline-custom {
    flex: 0 0 auto;
    min-width: 7.5rem;
    padding-inline: 0.75rem;
  }

  .landing-page .hero-section .col-lg-6.text-center svg {
    max-width: 17rem;
  }

  .landing-page .hero-section .col-lg-6.text-center img {
    max-width: 17rem;
  }

  .landing-page .hero-section {
    padding: 1.75rem 0 1.25rem;
  }

  .landing-page .hero-section .row.align-items-center {
    row-gap: 1rem;
  }

  .landing-page .faq-title {
    margin-top: 1.5rem;
    margin-bottom: 0.875rem;
  }

  .landing-page .faq-btn {
    align-items: flex-start;
    gap: 0.75rem;
  }
}
/* END landing-page moved from resources/views/landing_page.blade.php */


.input-pl {
    padding-left: 12px !important;
}

@media (max-width: 575.98px) {
  .landing-page .hero .hero-title.hero-title-mobile-lockup {
    display: inline-block;
    max-width: none;
  }

  .landing-page .hero .hero-title.hero-title-mobile-lockup .hero-title-line {
    white-space: nowrap;
  }

  .landing-page .kp-title.kp-title-instant {
    max-width: none;
    white-space: nowrap;
  }

  .landing-page .kp-title.kp-title-instant .kp-title-instant-break {
    display: none;
  }

  .landing-page .kp-title.kp-title-instant .kp-title-instant-part-2 {
    margin-left: 0.35rem;
  }

  .landing-page .kp-title.kp-title-mobile-two-line .mobile-title-line,
  .landing-page .hero-section .hero-title.hero-title-mobile-two-line .mobile-title-line {
    display: block;
    white-space: nowrap;
  }

  .landing-page .hero-section .hero-title.hero-title-mobile-two-line {
    display: inline-block;
    max-width: none;
  }

  .post-meta-mobile-feed {
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.45rem !important;
    padding-left: 0.625rem !important;
    white-space: nowrap !important;
  }

  .post-meta-mobile-feed .timeAgo {
    margin-right: 0.1rem !important;
  }

  .post-meta-mobile-feed .type-post {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 0 !important;
  }

  .post-meta-body {
    padding-top: 0.4rem !important;
    padding-bottom: 0.25rem !important;
  }

  .post-meta-body .media {
    display: none !important;
  }

  .post-description-body {
    padding-top: 0.15rem !important;
  }

  .post-description-body .truncated,
  .post-description-body .update-text {
    margin-top: 0 !important;
  }

  .containerLikeComment {
    margin-bottom: 0.35rem !important;
  }
}

/* ===== Like actif : l'icone pouce reste rouge (tous themes, toutes variantes) ===== */
.btnLike.active i,
.btnLike.active svg,
.action-pill.btnLike.active i,
[data-bs-theme="dark"] .btnLike.active i,
[data-bs-theme="light"] .btnLike.active i,
html[data-bs-theme="light"] .app-auth-shell .btnLike.active i {
    color: #e2394c !important;
}