/* Dark mode styles */
body.dark {
    background-color: #23232b;
    color: #fff;
}

/* Apply dark background */
body.dark .sidebar-menu-close,
body.dark .main-menu,
body.dark .close-sidebar-menu-button,
body.dark #sidebar2,
body.dark .chat-input-div,
body.dark .chat-header,
body.dark .post-icon-number-badge,
body.dark .modal-prices-body,
body.dark .modal-content,
body.dark .footer-copyright,
body.dark div.footer,
body.dark .comment-profile-image,
body.dark .chat-users-panel,
body.dark .sidebar-right-menu,
body.dark #searchFanButton,
body.dark .footer-logged-in,
body.dark .entry,
body.dark .modal-body-more-padding,
body.dark .modal-header,
body.dark .modal-confirm-boxes-body,
body.dark .signUp-form-pagination,
body.dark #inputAgeDays,
body.dark #inputAgeMonths,
body.dark #inputAgeYears,
body.dark .searchable-dropdown-options,
body.dark .post-tip-icon,
body.dark .write-message-icon,
body.dark .moreLanguages,
body.dark #searchInput2,
body.dark .pagination-number,
body.dark .card-header-description {
    background-color: #23232b;
}

/* Apply light dark background */
body.dark .comment-content,
body.dark .comment-cloud-arrow,
body.dark .comment-input,
body.dark .rounded-icon,
body.dark .create-post-input,
body.dark .expanded-form-wrapper,
body.dark .dropdown-item,
body.dark .search-chat-rooms,
body.dark .chat-user,
body.dark .close-sidebar-button,
body.dark .form-control,
body.dark .confirm-box-select-edit-icon,
body.dark #confirmNicknameInput,
body.dark input[type="date"],
body.dark #search_city,
body.dark .profile-tag,
body.dark [id^="id-description-"],
body.dark #search_language,
body.dark .bootstrap-tagsinput,
body.dark .my-account-email-input,
body.dark .offer-footer-tag,
body.dark .promote-block,
body.dark #bugDescription,
body.dark .collapsible,
body.dark .collapsible-content,
body.dark #id_subject,
body.dark #id_email,
body.dark #id_email2,
body.dark #id_description,
body.dark .alert, body.dark .alert-dismissible,
body.dark #id_login, body.dark #id_password,
body.dark #status_select,
body.dark .offer-list-control-panel-select::after,
body.dark .dropdown-content,
body.dark .pagination-button,
body.dark .pagination-button-disabled,
body.dark .page-item.active .page-link,
body.dark .confirm-box,
body.dark .select-options,
body.dark .tags-searchable-list,
body.dark #id_oldpassword,
body.dark #id_password1,
body.dark #id_password2,
body.dark #additionalRequestInput,
body.dark #priceInput,
body.dark .tip-modal-button,
body.dark .tip-modal-button-input,
body.dark .table th,
body.dark .table td,
body.dark .photo-request-message,
body.dark .chat-message,
body.dark .message-cloud-arrow,
body.dark #id_text_fr,
body.dark #id_title_fr,
body.dark .new-profile-tag,
body.dark .benefits-wrapper-new,
body.dark .modal-prices-input,
body.dark #customSearchButton2,
body.dark .tinder--card {
    background-color: #2f2f38;
}


body.dark .confirm-box-select-edit-icon,
body.dark #id_password1,
body.dark #id_email,
body.dark .cancel-edit-btn {
    border-color: #40424a!important;
}

body.dark .search-chat-rooms {
    color:white;
}
body.dark .legend,
body.dark .fan-entry {
    background-color: transparent;
}

body.dark #customSearchButton2,
body.dark #customSearchButton2.search-button-expand,
body.dark #searchInput2 {
    background-color: #2f2f38 !important;
    border: 1px solid #2f2f38!important;
}

body.dark #searchForm2 .input-group {
    background-color: #2f2f38 !important;
}
body.dark .bg-light {
    background-color: #2f2f38 !important;
}

body.dark .list-group-item {
    background-color: #2f2f38 !important;
}

body.dark .admin-chat-user-username {
    color:#ec2a4a;
  }

body.dark .sender-message {
    background-color: #ec2a4a;
}

body.dark .signUp-form-pagination-active {
    background-color: #fff;
}

body.dark #affiliateTermsDiv a,
body.dark #noMoreCardWrapper a {
    color: #007bff;
}

body.dark .select-options li:hover {
    background: #40424a;
}

body.dark .tip-modal-button-active {
    background-color: #40424a;
}

/* When dark mode is enabled, change text color */
body.dark h1,
body.dark p,
body.dark a,
body.dark .support a,
body.dark .entry-title,
body.dark .entry-title a,
body.dark .home-control-panel-phrase,
body.dark .profile-description-nickname,
body.dark .post-slide,
body.dark .new-profile-nickname,
body.dark .checkbox-label,
body.dark .custom-form-title,
body.dark .post-icon-number-badge,
/*body.dark .footer-copyright,
body.dark .footer-location,
body.dark .footer-links,*/
body.dark .modal-text,
body.dark .message-cost-with-user,
body.dark .target-write-message-price,
body.dark .chat-input-send-message-info,
body.dark .nickname-header,
body.dark .profile-entries-header,
body.dark .profile-header-write-button,
body.dark .modal-input, body.dark .select2-container,
body.dark .description-profile,
body.dark .user-profile-data-label,
body.dark .comment-content-text,
body.dark .comment-input::placeholder,
body.dark .main-menu .nav-text,
body.dark .chat-input-send-input::placeholder,
body.dark .poll-image-option-votes,
body.dark .chat-user-username,
body.dark .faq-header,
body.dark .faq-paragraph,
body.dark .offer-description-title,
body.dark select,
body.dark .dropdown-content,
body.dark .pagination-button-text,
body.dark .page-item.active .page-link,
body.dark .search-select,
body.dark .searchable-dropdown-options,
body.dark .select-options,
body.dark .tags-searchable-list,
body.dark .tip-modal-button,
body.dark .dropdown-item,
body.dark .tip-modal-button-upper-part,
body.dark .collapsible,
body.dark .table,
body.dark .message-content-text,
body.dark .fan-days-since-last-interaction,
body.dark .chat-list-entry-title,
body.dark .remove-tag-icon,
body.dark i#confirmNicknameButton,
body.dark .fa, body.dark .fas,
body.dark .benefits-title-new,
body.dark .benefits-list-new li,
body.dark .benefits-list-new li:before,
body.dark .modal-subscribe-text,
body.dark .modal-subscribe-text-light,
body.dark .comment-input,
body.dark .modal-prices-input,
body.dark .form-control-rates,
body.dark .tip-modal-button-input,
body.dark .profile-information-bar-icon-text,
body.dark .profile-activity {
    color: #fff;
}

body.dark .entry-header-nickname {
    color: #fff!important;
}

body.dark .privacy-policy-container p span,
body.dark .privacy-policy-container p {
    color: #fff!important;
    background-color: #23232b!important;
}


body.dark .privacy-policy-container .collapsible p,
body.dark .privacy-policy-container p span.collapsible-arrow,
body.dark .privacy-policy-container p .faq-header {
    background-color: #2f2f38!important;
}

body.dark .privacy-policy-container p .section-header {
    background-color: #23232b!important;
}
body.dark .list-group-item-action {
    color: #007bff !important;
}

body.dark .entry-vote-button {
    color: #2f2f38c9;
}

/* When dark mode is enabled, change the border color */
body.dark .profile-logged-in,
body.dark .new-profile-logged-in {
    border: 0px solid #1fdb1c;;
}

body.dark .offer-list-control-panel-select,
body.dark .fan-write-message-date {
    border-color: #2f2f38;
    background: #2f2f38;
}

body.dark .chat-users-panel,
body.dark .chat-header,
body.dark .chat-input-div,
body.dark #sidebar-menu,
body.dark .input-with-button,
body.dark .sidebar-icon-mass-message,
body.dark .bordered,
body.dark .table th,
body.dark .modal-prices-input,
body.dark .table td {
    border: 1px solid #40424a;
}

body.dark #chatInputDiv {
    border-bottom: none;
}
body.dark .chat-input-div {
    border-left: none;
    border-right: none;
}

body.dark .chat-users-panel {
    border-left: none;
    border-top: none;
}

body.dark #customSearchButton2,
body.dark #searchInput2 {
    border: 1px solid #2f2f38;
    margin-left: 0;
    border-radius: 0;
}

body.dark .bordered-danger {
    border: 0.3px solid #c91a25;
}

/* slider button */
body.dark .slider-icon {
    background-color: #40424a;
}

body.dark .chat-user {
    border-bottom: 1px solid #40424a;
    background: #23232b;
    border-radius: 0;
}

/* The active room carries both .chat-user and .chat-user-active, so this needs
   to outrank .chat-user above - otherwise both paint #23232b and the selected
   room is indistinguishable. Light mode makes the same step (#fff -> #f5f5f8). */
body.dark .chat-user.chat-user-active {
    background: #2f2f38;
    /* .chat-user above squares this off; light mode keeps the 10px, which only
       shows on the active row since the others match the panel colour. */
    border-radius: 10px;
}

body.dark .entry::after {
    border-top: 2px solid #40424a;
}

body.dark #updateProfileForm [type="radio"]:not(:checked) + label:before {
    border: 2px solid #40424a;
}

body.dark .fan-profile-image {
    border-radius: 0px;
}

/* border color same with background */
body.dark .profile-image,
body.dark .profile,
body.dark .comment-input,
body.dark .offer-list-control-panel-add-button,
body.dark .offer,
body.dark .offer-image,
body.dark .search-chat-rooms,
body.dark .form-control,
body.dark #confirmNicknameInput,
body.dark input[type="date"],
body.dark #search_city,
body.dark [id^="id-description-"],
body.dark #search_language,
body.dark .bootstrap-tagsinput,
body.dark .my-account-email-input,
body.dark .confirm-box-select-edit-icon,
body.dark #bugDescription,
body.dark #id_subject,
body.dark #id_email,
body.dark #id_email2,
body.dark #id_description,
body.dark .alert, body.dark .alert-dismissible,
body.dark #id_login, body.dark #id_password,
body.dark .pagination-button,
body.dark .pagination-button-disabled,
body.dark .page-item.active .page-link,
body.dark #id_oldpassword,
body.dark #id_password1,
body.dark #id_password2,
body.dark #additionalRequestInput,
body.dark #priceInput,
body.dark .collapsible,
body.dark .collapsible-content,
body.dark #id_text_fr,
body.dark #id_title_fr,
body.dark .tinder--card {
    border: 1px solid #23232b;
}

body.dark .write-message-icon,
body.dark .post-tip-icon {
    border-radius: 5px;
}

body.dark .confirm-box-select-edit-icon {
    opacity: 1;
    background-image: url('../icons/signup/edit-icon-white.svg');
}

body.dark  .more-tags-btn {
    color: white
}

body.dark  .bootstrap-tagsinput .tag {
    color: white !important;
}

body.dark .profile-breadcrumb li:hover a {
    color: white!important;
}

body.dark .profile-breadcrumb li:first-child:hover:before {
    color: white!important;
}

body.dark .profile-breadcrumb li+li:hover:before {
    color: white!important;
}

body.dark .entry-title a {
    color: white!important;
}

body.dark .profile-breadcrumb li:last-child {
    color: white;
}

body.dark [type="radio"]:not(:checked) + label::before {
    border: 2px solid #fff;
}

/* replace icons colo when dark mode is enabled */

body.dark .icon-more {
    background-color: #2f2f38;
}

body.dark .new-profile-share-profile-icon {
    background-image: url("../updated-icons/updated-post-icons/post-share-icon-white1.svg");
}

body.dark .write-message-icon {
    background-image: url("../updated-icons/updated-post-icons/post-write-message-icon-white1.svg");
}

body.dark .post-share-icon {
    background-image: url("../updated-icons/updated-post-icons/post-share-icon-white1.svg");
}

body.dark .post-tip-icon {
    background-image: url('../updated-icons/updated-post-icons/post-tip-icon-white-2.svg');
}

body.dark .post-request-photo-icon {
    background-image: url('../updated-icons/updated-post-icons/post-request-photo-icon-white1.svg');
}

body.dark .post-comments-icon {
    background-image: url('../updated-icons/updated-post-icons/post-comments-icon-white.svg');
}

body.dark .post-commented-icon {
    background-image: url('../updated-icons/updated-post-icons/post-comments-icon-white.svg');
}

body.dark .post-like-icon {
    background-image: url('../updated-icons/updated-post-icons/post-like-icon-white.svg');
}

body.dark .fan-sync-icon {
    background-image: url("../icons/sync-icon-white.svg");
}

body.dark .subscription-rounded-icon {
    background: url("../updated-icons/updated-blurred-icon/blurred-icon-star-white.svg")no-repeat;
    border: 1px solid #fff;
    background-color: transparent !important;
}

body.dark .fan-write-message-icon {
    background: url("../updated-icons/updated-post-icons/post-write-message-icon-white1.svg") no-repeat;
}

body.dark .poll-icon {
    background-image: url("../updated-icons/updated-create-post-messenger-icons/add-poll-white1.svg");
    background-size: 22px 22px;
}

body.dark .post-input-button-photo {
    background-image: url('../updated-icons/updated-create-post-messenger-icons/add-image-white.svg');
    background-size: 22px 22px;
}

body.dark .fa-chevron-right,
body.dark .fa-chevron-left {
    color: #23232b;
}
body.dark .post-input-button-video {
    background-image: url('../updated-icons/updated-create-post-messenger-icons/add-video-white1A.svg');
    filter: unset!important;
}

body.dark .post-input-button-record-video {
    background-image: url('../updated-icons/updated-create-post-messenger-icons/record-video-white1A.svg');
}

body.dark .record-audio {
    background-image: url("../updated-icons/updated-create-post-messenger-icons/record-audio-white.svg");
  }

body.dark .icon-search-room {
    background-image: url('../updated-icons/updated-sidebar-icons/sidebar-messenger-search-icon-white.svg');
}

body.dark .icon-mass-message {
    background-image: url('../icons/write-mass-message-icon-white.svg');
    opacity: unset;
}

body.dark .chat-dropdown {
    color: white;
}

body.dark .chat-dropdown:hover {
    color: white!important;
}

/* Fix chat user link color on hover in dark mode */
body.dark .chat-user-link {
    color: #fff;
}

body.dark .chat-user-link:hover {
    color: #fff !important;
}

body.dark #chat-log {
  background: url('../assets/chat-logs-background-dark.svg');
}

/* Chat input placeholder and text color */
body.dark .chat-input-send-input::placeholder {
    color: #fff!important;
}

body.dark .chat-input-send-input {
    color: #fff!important;
}

/* Remove top, left, and right borders from chat header */
body.dark .chat-header {
    border-top: none;
    border-left: none;
    border-right: none;
}

/* Fix dropdown items in dark mode */
body.dark .dropdown-menu {
    background-color: #2f2f38 !important;
    border-color: #40424a !important;
}

body.dark .dropdown-item {
    color: #fff !important;
    background-color: #2f2f38 !important;
}

body.dark .dropdown-item:hover,
body.dark .dropdown-item:focus {
    background-color: #40424a !important;
    color: #fff !important;
}

body.dark .conversation-send-message-all:hover {
    color: #fff !important;
}

body.dark .dropdown-divider {
    border-top-color: #40424a !important;
}

/* Style number input arrows for dark mode */
body.dark input[type="number"]::-webkit-inner-spin-button,
body.dark input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
    filter: invert(1);
}

/* For Firefox */
body.dark input[type="number"] {
    -moz-appearance: textfield;
}

body.dark input[type="number"]:hover {
    -moz-appearance: number-input;
}

/* Alternative approach for better visibility */
body.dark input[type="number"]::-webkit-inner-spin-button,
body.dark input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    background-color: #40424a;
    opacity: 1;
    -webkit-appearance: inner-spin-button;
    filter: brightness(2);
}

/* Emoji picker dark mode styles */
body.dark .emoji-picker {
    background-color: #23232b !important;
}

/* Style the emoji-picker web component using CSS custom properties */
body.dark emoji-picker {
    --background: #23232b;
    --border-color: #40424a;
    --button-active-background: #40424a;
    --button-hover-background: #2f2f38;
    --category-emoji-hover-background: #2f2f38;
    --indicator-color: #ec2a4a;
    --input-border-color: #40424a;
    --input-font-color: #fff;
    --input-placeholder-color: #999;
    --outline-color: #ec2a4a;
    --text-color: #fff;
    --search-focus-background-color: #2f2f38;
    --search-placeholder-color: #999;
    --scrollbar-thumb-color: #666;
    --scrollbar-track-color: transparent;
}

/* Also add scrollbar styling for light mode */
emoji-picker {
    --scrollbar-thumb-color: #ccc;
    --scrollbar-track-color: transparent;
}

/* Benefits container dark mode styles */
body.dark .benefits-container {
    background-color: #2f2f38;
    border: 1px solid #40424a;
}

body.dark .benefits-title {
    color: #fff;
}

body.dark .benefits-list li {
    color: #fff;
}

body.dark .benefits-list li:before {
    color: #ec2a4a;
}

/* BLIK form dark mode styles */
body.dark .blik-form-wrapper {
    background-color: #2f2f38;
    border: 1px solid #40424a;
    box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.4);
}

body.dark .blik-form-title {
    color: #fff;
}

body.dark .blik-form-description {
    color: #fff;
}

body.dark .blik-form-input {
    background-color: #23232b;
    border: 1px solid #40424a;
    color: #fff;
}

body.dark .blik-form-input::placeholder {
    color: #999;
}

body.dark .blik-form-input:disabled {
    background-color: #40424a;
    color: #999;
}

body.dark .blik-form-submit-button {
    background-color: #ec2a4a;
    border: 1px solid #ec2a4a;
}

body.dark .blik-form-submit-button:disabled {
    background-color: #40424a;
    border-color: #40424a;
    color: #999;
}

body.dark .blik-confirm-payment-info {
    color: #fff;
}

/* Filerobot Modal dark mode styles */
body.dark #filerobotModal .modal-content {
    background-color: #23232b;
    border-color: #40424a;
}

body.dark #filerobotModal .modal-header {
    background-color: #23232b;
    border-bottom-color: #40424a;
}

body.dark #filerobotModal .modal-body {
    background-color: #23232b;
}

body.dark #filerobotModal .modal-text {
    color: #fff;
}

body.dark #filerobotModal .editor-info-text {
    color: #fff;
}

body.dark #filerobotModal .close-cross {
    color: #fff;
}

body.dark #filerobotModal .close-cross:hover {
    color: #ec2a4a;
}

/* Style the Filerobot editor container for dark mode */
body.dark #editor_container {
    background-color: #2f2f38;
}

/* Additional Filerobot editor dark mode styles */
body.dark .FIE_root {
    background-color: #23232b !important;
}

body.dark .FIE_container {
    background-color: #23232b !important;
}

body.dark .FIE_topbar {
    background-color: #2f2f38 !important;
    border-bottom: 1px solid #40424a !important;
}

body.dark .FIE_tabs {
    background-color: #2f2f38 !important;
}

body.dark .FIE_tabs-item {
    color: #ccc !important;
}

body.dark .FIE_tabs-item-active,
body.dark .FIE_tabs-item:hover {
    color: #fff !important;
    background-color: #40424a !important;
}

body.dark .FIE_panel {
    background-color: #2f2f38 !important;
    color: #fff !important;
}

body.dark .FIE_topbar-button {
    color: #ccc !important;
}

body.dark .FIE_topbar-button:hover {
    color: #fff !important;
    background-color: #40424a !important;
}

body.dark .FIE_canvas-container {
    background-color: #23232b !important;
}

/* Chat input icons wrapper mobile dark mode styles */
body.dark .chat-input-icons-wrapper-mobile {
    background-color: #2f2f38;
    border: 1px solid #40424a;
    -webkit-box-shadow: 1px 2px 20px -5px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 1px 2px 20px -5px rgba(0, 0, 0, 0.4);
    box-shadow: 1px 2px 20px -5px rgba(0, 0, 0, 0.4);
}

/* Modal input and select2 container dark mode styles */
body.dark .modal-input,
body.dark #search_city,
body.dark .bootstrap-tagsinput,
body.dark .select2-container {
    background-color: #2f2f38;
    border-color: #40424a;
    color: #fff;
}


body.dark .bootstrap-tagsinput {
    background-color: #2f2f38;
    border-color: #40424a!important;
    color: #fff!important;
}

body.dark .bootstrap-tagsinput input {
    color: #fff!important;
}

body.dark .modal-input::placeholder {
    color: #999;
}

/* Select2 dropdown dark mode styles */
body.dark .select2-dropdown {
    background-color: #2f2f38;
    border-color: #40424a;
}

body.dark .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: #23232b;
    color: #fff;
    border-color: #40424a;
}

body.dark .select2-container--default .select2-results__option {
    background-color: #2f2f38;
    color: #fff;
}

body.dark .select2-container--default .select2-results__option--highlighted {
    background-color: #40424a;
    color: #fff;
}

body.dark .select2-container--default .select2-results__option--selected {
    background-color: #40424a !important;
    color: #fff;
}

body.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff;
}

body.dark .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #999;
}

/* Subscribe modal dark mode styles */
body.dark .subscribe-package {
    background-color: #2f2f38;
    border-color: #40424a;
}

body.dark .subscribe-package::after {
    background: linear-gradient(135deg,
                rgba(236, 42, 74, 0.1) 0%,
                rgba(236, 42, 74, 0.3) 100%);
}

body.dark .subscribe-package:hover {
    border-color: #ec2a4a;
}

body.dark .subscribe-package-info,
body.dark .subscribe-package-price {
    color: #fff;
}

body.dark .subscribe-package:hover .subscribe-package-info,
body.dark .subscribe-package:hover .subscribe-package-price {
    color: #fff;
    text-shadow: 0 0 10px rgba(236, 42, 74, 0.5);
}

body.dark .subscribe-package-info-discount {
    color: #ffac32;
}

body.dark .subscribe-package:hover .subscribe-package-info-discount {
    color: #ffac32;
    text-shadow: 0 0 8px rgba(255, 173, 50, 0.8);
}

/* Step indicator dark mode styles */
body.dark .step-circle {
    background-color: #2f2f38;
    border-color: #666;
}

body.dark .step.active .step-circle {
    border-color: #ffac32;
    background-color: transparent;
}

body.dark .step.completed .step-circle {
    border-color: #ffac32;
    background-color: #ffac32;
}

body.dark .step-line {
    background-color: #40424a!important;
}

/* Select status dropdown dark mode styles */
body.dark #status_select,
body.dark .filter-select {
    background-color: #2f2f38;
    color: #fff;
}

body.dark .offer-list-control-panel-select option {
    background-color: #2f2f38;
    color: #fff !important;
}

body.dark .offer-list-control-panel-select option:hover {
    background-color: #40424a;
    color: #fff !important;
}

/* Filter box select dark mode styles */
body.dark .filter-box-select {
    background: #2f2f38;
    border-color: #40424a;
}

body.dark .filter-box-select select {
    background: #2f2f38;
    text-shadow: 0 0 0 #fff;
}

body.dark .filter-box-select option {
    background-color: #2f2f38;
    color: #fff;
}

/* Search city filter dark mode styles */
body.dark #search_city_filter,
body.dark .search-select-filter {
    background: #2f2f38 !important;
    border-color: #40424a !important;
    color: #fff !important;
}

body.dark .search-select-filter::placeholder {
    color: #ccc !important;
}

body.dark .language-dropdown ul.lang-list {
    background-color: #2f2f38;
    border-color: #40424a;
    box-shadow: 3px 4px 47px -10px rgba(0, 0, 0, 0.5);
    border-top-color: transparent;
}

body.dark .input-group-text {
    color: white;
    background-color: transparent;
    border-color: #40424a;
}

body.dark .discount-input {
    color: white;
    border-color: #40424a;
}
body.dark .language-dropdown.open {
    background-color: #2f2f38;
}

body.dark .language-dropdown label::after {
    color: #fff;
}

/* Fix autofill highlighting in dark mode */
body.dark input:-webkit-autofill,
body.dark input:-webkit-autofill:hover,
body.dark input:-webkit-autofill:focus,
body.dark input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #2f2f38 inset !important;
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
}

body.dark input:-webkit-autofill,
body.dark input:-webkit-autofill:focus {
transition: background-color 0s 600000s, color 0s 600000s !important;
}

/* Signup page dark mode styles */
body.dark .signup-container {
    background-color: #23232b;
}

body.dark .signUp-form-body {
    background-color: #2f2f38;
}

body.dark .pagination-button-join-us {
    background: #ec2a4a;
}
body.dark .signUp-form-title {
    color: #fff;
}

body.dark .cdropdown-container.dropdown-open {
    background-color: #2f2f38;
}
body.dark .cdropdown-toggle {
    background-color: #2f2f38;
    color: #fff;
    border: 1px solid #40424a;
}

body.dark .cdropdown-menu {
    background-color: #2f2f38;
    border-color: #40424a;
    box-shadow: 0px 6px 7px rgba(0, 0, 0, 0.3);
    border-top-right-radius: 27px;
    border-top-left-radius: 27px;
}

body.dark .dropdown-active {
    box-shadow: 0px 6px 7px rgba(0, 0, 0, 0.3);
}

body.dark .cdropdown-item {
    color: #fff;
}

body.dark .cdropdown-item:hover {
    background-color: #40424a;
}

body.dark .checkbox-label-signup {
    color: #fff;
}

body.dark .signUp-form-terms-of-service {
    color: #fff;
}

body.dark .signUp-form-terms-of-service a {
    color: #007bff;
}

/* Dark mode tooltip styling - only dark mode specific styles remain */
body.dark .theme-tooltip {
    background: rgba(255, 255, 255, 0.9);
    color: #333;
}

body.dark .theme-tooltip::after {
    border-left-color: rgba(255, 255, 255, 0.9);
}

.full-screen-gallery-modal-btn {
    z-index: 2;
}

body.dark .new-profile-red-like-button {
    background-color: #23232b;
}

/* Fix footer background on profile pages */
body.dark .footer {
    background-color: #23232b !important;
}

body.dark .cards-header-statistics-badge-and-icon {
    background-color: #2f2f38;
    border-radius: 12px;
}

body.dark .form-wrapper.expanded-form-wrapper {
    background-color: #2f2f38 !important;
    border: 1px solid #40424a!important;
}

body.dark .card-slide-me-create-post-input {
    background-color: #2f2f38 !important;
    color: #fff;
}

body.dark .card-slide-me-create-post-input::placeholder {
    color: #999;
}

/* Statistics badge calendar icon white in dark mode */
body.dark .statistics-badge-top-calendar-icon {
    background-image: url("../icons/calendar-icon-white.svg");
}

/* Card comment dark mode styles */
body.dark .card-comment-wrapper,
body.dark .card-comment-wrapper-with-image {
    background-color: #23232b;
}

body.dark .card-comment {
    background-color: #2f2f38;
}

body.dark .card-comment-profile-image {
    background-color: #2f2f38;
}

body.dark .card-comment-content {
    background-color: #23232b;
}

body.dark .card-comment-content-text {
    color: #fff;
}

body.dark .card-comment-content-header-nickname {
    color: #ec2a4a !important;
}

body.dark .card-comment-cloud-arrow {
    background-color: #23232b;
}

body.dark .card-comment-price {
    color: #fff;
}

/* Surfaces that kept a light background in dark mode.
   Text on these inherits body.dark's #fff, so they rendered white-on-white. */

/* Page-level surfaces */
body.dark .detail-v2-root,
body.dark .footer-no-logged-in-container,
body.dark .sidebar-menu-open,
body.dark .sidebar-menu-open:hover {
    background-color: #23232b;
}

/* Elevated surfaces: cards, dropdowns, popovers, tiles */
body.dark .live_notify_list,
body.dark .card,
body.dark .detail-v2-input-card,
body.dark .chat-bubble,
body.dark .chat-input-grey,
body.dark .active-tab-post,
body.dark .post-input-language-dropdown-content,
body.dark .post-input-language-dropdown-item,
body.dark .entry-vote-button,
body.dark .entry-vote-button-active,
body.dark .vp-tile__label,
body.dark .vp-tile__label:hover,
body.dark .vp-tile--filled .vp-tile__label:hover,
body.dark .action-button,
body.dark .loading,
body.dark .my-fan-popup-single-statistic-first,
body.dark .option-a-b-text,
body.dark .card-rates-wrapper .modal-prices-text > p:last-child {
    background-color: #2f2f38;
}

/* .modal-prices-text hardcodes #000 while .modal-prices-body is already
   darkened above - black on #23232b. */
body.dark .modal-prices-text {
    color: #fff;
}

/* `color: black` (the named keyword) with no dark-mode override. Two of these
   sit inside wrappers this file darkens, so they went from readable to invisible.
   Excluded: .premium-title_d (black on its own #FFAC32 badge) and .fa-ellipsis-v
   (always class="fas fa-ellipsis-v", so body.dark .fas already lightens it). */
body.dark .warning-main-title,
body.dark .card-buttons-action-button,
body.dark .download-photo-btn,
body.dark .download-photo-btn:hover,
body.dark .auto-message-content-text,
body.dark .auto-message-in-verification,
body.dark .coins-number-div,
body.dark .promote-block-button,
body.dark .promote-block-button:hover,
body.dark .payment-page-alert-description,
body.dark .confirm-box-select,
body.dark .fan-name,
body.dark .fan-name:hover,
body.dark .black-text,
body.dark .whats-next-body-link,
body.dark .whats-next-body-link:hover {
    color: #fff;
}

/* Its border is 2px solid #EEEEEE, which is a light ring on a dark page */
body.dark .card-buttons-action-button {
    border-color: #40424a;
}

/* --- My Fans page --- */

/* The caption under the envelope: dark mode darkened its background to #2f2f38
   but left color:#666666, giving 2.2:1. */
body.dark .fan-write-message-date {
    color: #b8b5c4;
}

/* The sync icon is swapped to a white SVG in dark mode but keeps opacity:0.2
   from light mode, where 0.2 of a DARK glyph on white still reads. 0.2 of a
   white glyph on #2f2f38 does not. */
body.dark .fan-sync-icon {
    opacity: 0.55;
}

/* Earnings breakdown popup. .stat-label-first is `color: black` and sits inside
   .my-fan-popup-single-statistic-first, which this file darkens to #2f2f38 -
   black on dark. .stat-label is #666666 at 2.7:1 on the modal. */
body.dark .stat-label {
    color: #b8b5c4;
}

body.dark .stat-label-first {
    color: #fff;
}

/* .modal-content is border-radius: 13px!important, but dark mode gives its
   children their own #23232b background. Bootstrap leaves them transparent, so
   in light mode the rounded corners show through; in dark the square children
   paint over them. The children sit on .modal-content's own #23232b anyway, so
   dropping their background restores the corners without changing any colour.
   Using transparent rather than overflow:hidden, which would clip dropdowns. */
body.dark .modal-content .modal-header,
body.dark .modal-content .modal-body,
body.dark .modal-content .modal-body-more-padding,
body.dark .modal-content .modal-confirm-boxes-body,
body.dark .modal-content .modal-prices-body {
    background-color: transparent;
}

/* Bootstrap sets .form-control { color: #495057 }. Dark mode darkened the
   background but never the text, leaving it at 1.62:1 - effectively invisible
   (e.g. #id_exchange on the payout form). The border was #23232b at 1.18:1,
   so the field had no visible edge either. */
body.dark .form-control {
    color: #fff;
    border-color: #40424a;
}

body.dark .form-control::placeholder {
    color: #999;
}

/* The border-color above (0,2,1) outranks Bootstrap's .form-control:focus
   (0,2,0), which would silently remove the focus indicator. */
body.dark .form-control:focus {
    border-color: #6cb2ff;
}

/* Inside a .list-group-item the input matched the row exactly (both #2f2f38)
   so it did not read as a field. Recess it to the page colour instead. */
body.dark .list-group-item .form-control {
    background-color: #23232b;
}

/* Chrome paints autofilled inputs with its own light background that normal
   declarations cannot reach; the inset shadow is the only way to cover it. */
body.dark .form-control:-webkit-autofill,
body.dark .form-control:-webkit-autofill:hover,
body.dark .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #2f2f38 inset;
    caret-color: #fff;
}

body.dark .list-group-item .form-control:-webkit-autofill,
body.dark .list-group-item .form-control:-webkit-autofill:hover,
body.dark .list-group-item .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #23232b inset;
}

/* The create-post textarea carries an inline style="background:#f8f7f7" in
   post/create_popup.html. Inline styles outrank every selector, so the dark
   background above never landed while color:#fff did - white on white.
   !important is the only way a stylesheet can reach past an inline style. */
body.dark .create-post-input {
    background-color: #2f2f38 !important;
}

/* .select-styled is built by JS in four class combinations. Those carrying
   .search-select got color:#fff from the text group above but never a dark
   background - white on white. The bare .select-styled variant keeps its own
   color:#000, so colour must be set here too or darkening strands it.
   .search-select-filter (the purple one) is !important above, so it is unaffected. */
body.dark .select-styled {
    background-color: #2f2f38;
    border-color: #40424a;
    color: #fff;
}

/* These remove-X buttons ARE the .fas element (class="fas fa-times remove-file"),
   so the glyph goes white in dark mode. The button kept a #fff background, which
   made it white-on-white; darken the button and let the white glyph read. */
body.dark .remove-file,
body.dark .remove-audio-file {
    background-color: #2f2f38;
}

/* Placeholder is #7F7777!important upstream - 3.0:1 on the new background */
body.dark .select-placeholder {
    color: #999 !important;
}

/* More inline style="" attributes in templates. Scoped narrowly: .post-input-buttons
   is transparent in the post composer, so only the reels modifier is targeted.
   The bar has no background of its own - the inline white was invisible against
   the white modal, so transparent reproduces that in any theme rather than
   painting a lighter strip across the popup. */
body.dark .expanded-post-input-buttons--add-reel {
    background-color: transparent !important;
}

/* Upload progress track - post/create.html, post/new_create/create_post.html */
body.dark .progress-percentage {
    background-color: #40424a !important;
}

/* Mobile profile action buttons. Text is inline #F95363; on the original
   #FCE1E6 that was 2.7:1, on this it is 4.1:1. */
body.dark .new-profile-red-subscribe-button,
body.dark .new-profile-red-subscribed-button,
body.dark .new-profile-interaction-button {
    background-color: #3a2c30 !important;
}

/* Flash message wrapper on signup */
body.dark ul.message {
    background-color: #2f2f38 !important;
}

/* Agent-commission rows in token_history.html carry an inline background but had
   no class to target; a class was added there purely as a hook for this rule. */
body.dark .agent-commission-row {
    background-color: #2f2f38 !important;
}

/* Hardcoded near-black text sitting on surfaces that are dark in this theme -
   either darkened above or already dark (footer, entries, modals, pagination). */
body.dark .footer-logged-in-header,
body.dark .footer-logged-in-small-header,
body.dark .premium-benefits-title,
body.dark .premium-benefits-list li,
body.dark .premium-list_b li,
body.dark .promo-title,
body.dark .modal-text-light,
body.dark .entry-header,
body.dark .offer,
body.dark .offer a,
body.dark .offer-description-nickname,
body.dark .profiler-header-nickname,
body.dark .images-header,
body.dark .poll-input,
body.dark textarea.detail-v2-textarea {
    color: #fff;
}

/* :disabled sets #222 !important, so this needs to match it */
body.dark textarea.detail-v2-textarea:disabled,
body.dark textarea.detail-v2-textarea[disabled] {
    color: #fff !important;
}

/* Link blues darken on hover, which inverts on a dark background
   (#0056b3 on #23232b is 2.2:1). Both are !important upstream. */
body.dark .more-link {
    color: #6cb2ff !important;
}

body.dark .more-link:hover {
    color: #9ecdff !important;
}

/* Secondary / muted copy */
body.dark .footer,
body.dark .footer-links a,
body.dark .footer-logged-in-description,
body.dark .pagination-button-disabled,
body.dark .vp-tile__caption {
    color: #b8b5c4;
}

/* Brand purple accents - lightened to stay legible on dark */
body.dark .premium-title_b,
body.dark .new-profile-tag,
body.dark .detail-v2-refund-notice i {
    color: #b9a9f0;
}

/* Muted: disabled states and track fills */
body.dark textarea.detail-v2-textarea.blocked,
body.dark .tip-modal-button-input-active,
body.dark .area,
body.dark .vote-percentage-fill,
body.dark .fade-line,
body.dark .poll-text-option-voted--winner,
body.dark .poll-image-option-voted--winner {
    background-color: #40424a;
}

/* These four declare their light background with !important, so a plain rule
   here silently loses and the element stays light. */
body.dark .blocked,
body.dark .post-input-language-dropdown-content,
body.dark .post-input-language-dropdown-item {
    background: #40424a !important;
}

/* The disabled submit button (e.g. "Add" in the reel/story popup) was
   #e7e5ed!important with .modal-button's own color:#ffffff - white on light
   grey, ~1.5:1, and unreadable in either theme. Muted grey reads as disabled
   without vanishing. */
body.dark .modal-button[disabled],
body.dark .modal-button-blocked {
    background: #40424a !important;
    border-color: #40424a !important;
    color: #b8b5c4 !important;
}

/* Tinted callouts - hue preserved so the promo/premium/alert
   hierarchy still reads at a glance instead of flattening to grey. */
body.dark .promo-wrapper,
body.dark .promo-wrapper-new,
body.dark .premium-benefits-wrapper,
body.dark .premium-wrapper_d {
    background-color: #3a3227;
}

body.dark .premium-wrapper_b {
    background-color: #2e2d3a;
}

body.dark .payment-page-alert-wrapper,
body.dark .promote-block-grey,
body.dark .agent-removal-confirmation-wrapper,
body.dark .detail-v2-recording-bar,
body.dark .description-button {
    background-color: #3a2c30;
}

body.dark .more-tags-btn {
    background-color: #2b3040;
}

/* --- Cards page action buttons ---
   The white/#EFEEF7 disc is baked into each SVG, so no CSS rule can reach it.
   Dark variants were generated alongside the originals: disc -> #2f2f38,
   light stroke -> #40424a, brand-purple glyph #34217D -> #b9a9f0 (it is 1.0:1
   against the new disc and would vanish outright), inactive grey #D6D6D6 ->
   #52525e (at 9.1:1 it would have read as enabled).
   Not swapped: user.svg / eye.svg / button-left / button-right - their discs
   are already brand purple, red and orange, which read fine on dark. */
body.dark .card-button-icon-like-profile {
    background-image: url("../icons/cards/like-profile-dark.svg");
}

body.dark .card-button-icon-liked-profile {
    background-image: url("../icons/cards/like-profile-clicked-dark.svg");
}

body.dark .card-button-icon-like-profile.inactive {
    background-image: url("../icons/cards/like-profile-inactive-dark.svg");
}

body.dark .card-button-icon-like-post {
    background-image: url("../icons/cards/like-post-dark.svg");
}

body.dark .card-button-icon-liked-post {
    background-image: url("../icons/cards/like-post-clicked-dark.svg");
}

body.dark .card-button-icon-like-post.inactive {
    background-image: url("../icons/cards/like-post-inactive-dark.svg");
}

body.dark .card-button-icon-comment {
    background-image: url("../icons/cards/comment-post-dark.svg");
}

body.dark .card-button-icon-commented {
    background-image: url("../icons/cards/comment-post-clicked-dark.svg");
}

body.dark .card-button-icon-comment.inactive {
    background-image: url("../icons/cards/comment-post-inactive-dark.svg");
}

body.dark .card-button-icon-messenger {
    background-image: url("../icons/cards/write-message-dark.svg");
}

body.dark .card-button-icon-messenger-clicked {
    background-image: url("../icons/cards/write-message-clicked-dark.svg");
}

body.dark .card-button-icon-messenger-inactive {
    background-image: url("../icons/cards/write-message-inactive-dark.svg");
}

body.dark .card-button-icon-photo-request {
    background-image: url("../icons/cards/add-photo-request-dark.svg");
}

body.dark .card-button-icon-record-video {
    background-image: url("../icons/cards/record-video-dark.svg");
}

body.dark .card-button-icon-add-video {
    background-image: url("../icons/cards/add-video-dark.svg");
}

body.dark .cards-footer-button-icon-refresh {
    background-image: url("../icons/cards/refresh-dark.svg");
}

body.dark .cards-footer-button-icon-refresh.inactive {
    background-image: url("../icons/cards/refresh-inactive-dark.svg");
}

body.dark .cards-footer-button-icon-deny {
    background-image: url("../icons/cards/deny-dark.svg");
}

body.dark .cards-footer-button-icon-deny.inactive {
    background-image: url("../icons/cards/deny-inactive-dark.svg");
}

body.dark .cards-footer-button-icon-add {
    background-image: url("../icons/cards/add-dark.svg");
}

body.dark .cards-footer-button-icon-add.inactive {
    background-image: url("../icons/cards/add-inactive-dark.svg");
}

body.dark .cards-footer-button-icon-done {
    background-image: url("../icons/cards/done-dark.svg");
}

body.dark .cards-footer-button-icon-done.inactive {
    background-image: url("../icons/cards/done-inactive-dark.svg");
}