/* Global Dark Theme applied for the request */

:root {
    --app_color: #fa9000 !important;
    --app_color_bg: #363636 !important;
}

body, html, #root, #root-support, #app {
    background-color: #363636 !important;
    color: #fff !important;
}

/* Base text color overrides */
h1, h2, h3, h4, h5, h6, p, div, a {
    color: inherit;
}

/* Titles and labels */
.title-box span, .title-box a, .card-title, .color-defult {
    color: #fa9000 !important;
}
.title-box {
    background-color: transparent !important;
}

/* Tab Component */
#tab .tab-top, #tab .tab-top ul {
    background-color: #363636 !important;
}
#tab .nav-tabs .nav-link {
    background-color: #363636 !important;
    border-color: #1a1a1a !important;
    color: #aaa !important;
}
#tab .nav-tabs .nav-link.active, #tab .nav-tabs .nav-item.show .nav-link {
    background-color: #000 !important;
    color: #fa9000 !important;
    border-color: #fa9000 !important;
}

/* General Cards (like in sliders) */
.content-box-card .card, .slider-store .card, .slider-learn .card, .card, .card-corse, .slider-offers .slide a {
    background-color: #000000 !important;
    border-color: #1a1a1a !important;
}
.slider-learn .slid-two {
    background-color: transparent !important;
}
.content-box-card .card p.card-title, .slider-store .card .p1, .slider-learn .card .p1 {
    color: #fff !important;
}
.content-box-card .card p.card-cat, .slider-store .card .p2, .slider-learn .card .p2 {
    color: #aaa !important;
}

/* Green labels like "Rayeghan" or price */
.card-pay-off, .content-box-card .card .card-pay, .slider-store .card .p3, .slider-learn .card .p3 {
    color: #00ff00 !important;
}

/* Fix Header */
.fix-header .click-btn {
    background-color: transparent !important;
    border: none !important;
}
.fix-header {
    background-color: #363636 !important;
}
.header-content .logo {
    color: #fa9000 !important;
    filter: invert(56%) sepia(87%) saturate(2222%) hue-rotate(1deg) brightness(101%) contrast(106%);
}
.icon-image {
    filter: invert(56%) sepia(87%) saturate(2222%) hue-rotate(1deg) brightness(101%) contrast(106%);
}

/* Dashboard Home Page Buttons (Vue component HomePageButtons) */
.buttons-container ul li a {
    box-shadow: none !important;
    border: 1px solid #1a1a1a !important;
}

/* 'Forum', 'Articles', 'Channels', 'My courses' - Col-4 buttons */
.buttons-container ul li.col-4 a {
    background-color: #000000 !important;
    color: #fa9000 !important;
}
.buttons-container ul li.col-4 a .title span {
    color: #fff !important;
}

/* 'Trainings' - Col-8 button */
.buttons-container ul li.col-8 a {
    background-color: #fa9000 !important;
    color: #fff !important;
    border-color: #fa9000 !important;
}
.buttons-container ul li.col-8 a .title span {
    color: #fff !important;
}
.buttons-container ul li.col-8 img {
    filter: brightness(0) invert(1) !important;
}

/* Page headers, specific dividers */
#header {
    background-color: #000 !important;
    border-color: #1a1a1a !important;
    color: #fa9000 !important;
}
#header a, #header .title-header a {
    color: #fa9000 !important;
}
#specific-divider {
    background-color: #fa9000 !important;
}

/* Splash screen */
#page-splash, #page-loader {
    background-color: #363636 !important;
    color: #fa9000 !important;
}

/* Any white background panels */
.bg-white {
    background-color: #000 !important;
}

.text-dark {
    color: #fa9000 !important;
}

.product-description .more-text h1, .product-description .more-text h2, .product-description .more-text h3 {
    color: #fa9000 !important;
}

.product-description .more-text pre, .product-description .more-text p {
    color: #fff !important;
}

.cat-seqare {
    border: 2px solid #fa9000 !important;
}

.card-bottom-chanel {
    border-top: 1px solid #1a1a1a !important;
}


/* Inner pages headers (e.g. #header-red) */
#header-red, #header-red-fixed, #bg-header-pages, #bg-header-pages-fixed {
    background-color: #fa9000 !important;
}
#header-red .header-content span, #header-red-fixed .header-content span {
    color: #fff !important;
}
#header-red .back-parent i, #header-red-fixed .back-parent i, #header-red .back-parent, #header-red-fixed .back-parent {
    color: #fff !important;
}

/* Background for the single course body etc. */
.product-description, .single-course-page {
    background-color: #363636 !important;
}

/* Tab contents */
.tab-content {
    background-color: #363636 !important;
}
#tab .tab-content {
    background-color: #363636 !important;
}


/* Modals */
.modal-content, .modal-header, .modal-body, .modal-footer {
    background-color: #363636 !important;
    color: #fff !important;
    border-color: #1a1a1a !important;
}

/* Forms / Inputs */
input, select, textarea, .form-control {
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid #fa9000 !important;
}
input::placeholder, textarea::placeholder {
    color: #aaa !important;
}

/* Sidebar Menu / Drawer */
.w-menu, .w-menu .profile, .w-menu .menu-nav, .w-menu .items {
    background-color: #000 !important;
    color: #fff !important;
}
.w-menu a, .w-menu span {
    color: #fa9000 !important;
}


/* Remove all rounded corners and background boxes that were creating the white/dark layered effect */
#pwa-device, #app, #root, body, html {
    background-color: #363636 !important;
}

#other-wrapper {
    background: transparent !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
}

.slider-store, .slider-learn, .slider-page, .slider-one, #slider-container, section.container-fluid {
    background-color: transparent !important;
    border-radius: 0 !important;
}

.story-section {
    background-color: transparent !important;
}

/* Ensure the wrapper around slider doesn't have white bg */
.container-fluid, .row, .container {
    background-color: transparent !important;
}
.slide-one, .w-slide, .slider-page {
    background-color: transparent !important;
}

/* Fix the other-wrapper styling according to user requests */
#other-wrapper {
    background: #222222 !important;
    border-radius: 20px 20px 0 0 !important;
    margin-top: 0 !important;
}

#other-wrapper:before {
    background: #fa9000 !important;
}

/* Fix flex direction for col-8 button (Trainings) to be Text first, Icon second */
.buttons-container ul li.col-8 a {
    flex-direction: row !important;
}
.buttons-container ul li.col-8 a p.image {
    order: 2 !important; /* Move icon to the left in RTL */
}
.buttons-container ul li.col-8 a p.title {
    order: 1 !important; /* Move text to the right in RTL */
}

/* Don't invert the new colored SVG icons */
.buttons-container ul li img {
    filter: none !important;
}
.buttons-container ul li.col-8 img {
    filter: none !important;
}

/* Responsive font sizes for dashboard buttons */
.buttons-container ul li a p.title span {
    font-size: 13px !important;
}

@media (min-width: 769px) {
    .buttons-container ul li a p.title span {
        font-size: 15px !important;
    }
}

@media (max-width: 768px) {
    .buttons-container ul li a p.title span {
        font-size: 11px !important;
    }
}

/* Decrease padding inside story section */
.story-section {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* Trainings Section Styling */
.trainings-black-section {
    background-color: #000000 !important;
}

.trainings-black-section .slider-learn .card {
    background-color: #363636 !important;
}

.trainings-black-section .title-box span {
    color: #fa9000 !important;
}

.trainings-black-section .title-box a {
    color: #ffffff !important;
}

/* Card Body & Category Text */
.trainings-black-section .card-text {
    color: #aaaaaa !important;
    font-size: 11px !important;
    margin-bottom: 5px !important;
}

.trainings-black-section .card-bd {
    position: relative;
    padding-bottom: 45px !important;
    min-height: 120px;
}

/* Price Badge on Bottom Left */
.trainings-black-section .price-number {
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    margin: 0 !important;
}

.trainings-black-section .price-number .card-price,
.trainings-black-section .price-number .card-pay-off,
.trainings-black-section .price-number span {
    background-color: #fa9000 !important;
    color: #ffffff !important;
    padding: 3px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    display: inline-block;
}

/* Force high specificity for the trainings black background to override the generic section.container-fluid transparent rule */
section.container-fluid.trainings-black-section {
    background-color: #000000 !important;
}

/* Move the badge to the RIGHT to exactly match the final screenshot provided */
.trainings-black-section .price-number {
    position: absolute !important;
    bottom: 10px !important;
    right: 15px !important;
    left: auto !important;
    margin: 0 !important;
}

/* Also ensure no white borders or box-shadows break the card */
.trainings-black-section .slider-learn .card {
    border: none !important;
    box-shadow: none !important;
}

/* Fix for the trainings section: instead of full width, apply to container */
.trainings-black-box {
    background-color: #000000 !important;
}

.trainings-black-box .slider-learn .card {
    background-color: #363636 !important;
    border: none !important;
    box-shadow: none !important;
}

.trainings-black-box .title-box span {
    color: #fa9000 !important;
}

.trainings-black-box .title-box a {
    color: #ffffff !important;
}

.trainings-black-box .card-text {
    color: #aaaaaa !important;
    font-size: 11px !important;
    margin-bottom: 5px !important;
}

.trainings-black-box .card-bd {
    position: relative;
    padding-bottom: 45px !important;
    min-height: 120px;
}

.trainings-black-box .price-number {
    position: absolute !important;
    bottom: 10px !important;
    right: 15px !important;
    left: auto !important;
    margin: 0 !important;
}

.trainings-black-box .price-number .card-price,
.trainings-black-box .price-number .card-pay-off,
.trainings-black-box .price-number span {
    background-color: #fa9000 !important;
    color: #ffffff !important;
    padding: 3px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    display: inline-block;
}

/* -------------------------------------
   Sidebar Drawer Menu Dark Theme
---------------------------------------- */
#menu,
#menu .profile,
#menu .menu-nav,
#menu .title,
#menu .items a,
#menu #footer-menu {
    background-color: #000000 !important;
}

#menu .title {
    border-top: 1px solid #222222 !important;
    color: #ffffff !important;
}

#menu .items a {
    border-top: 1px solid #111111 !important;
    color: #ffffff !important;
}

#menu .profile {
    color: #ffffff !important;
}

#menu .profile a {
    color: #ffffff !important;
}

#menu .title span,
#menu .icon,
#menu i {
    color: #ffffff !important;
}

/* Text and Links globally in menu */
#menu a, 
#menu span {
    color: #ffffff !important;
}

/* Chat / Support Button */
#menu .btn-chat {
    background-color: #fa9000 !important;
    color: #ffffff !important;
    border: none !important;
}
#menu .btn-chat i,
#menu .btn-chat .icon {
    color: #ffffff !important;
}

/* Fix sidebar scrollbar for dark mode */
#menu::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px #000000 !important;
    box-shadow: inset 0 0 5px #000000 !important;
    background-color: #000000 !important;
}
#menu::-webkit-scrollbar-thumb {
    background: #333333 !important;
}

/* Restore green color for the wallet balance span in dark mode (lighter green for visibility) */
#menu a[href*="WebAppWalletCharging"] span {
    color: #4ade80 !important; /* A nice bright green that works well on black */
}

/* Merge trainings-black-box with dashboard buttons */
.trainings-black-box {
    border-radius: 0 0 20px 20px !important;
}

/* Ensure seamless connection between buttons and trainings */
#other-wrapper {
    margin-bottom: 0 !important;
}

.trainings-black-box {
    margin-top: 0 !important;
}

/* -------------------------------------
   Page 1: web-app/training/list
---------------------------------------- */
/* 1. Category and List titles to white */
.title-list-dore {
    color: #ffffff !important;
}

/* 2. Course items titles in list and tabs */
.item-course .card-title,
.item-course .txt2,
.content-box-card-dore .card-title {
    color: #ffffff !important;
}

/* -------------------------------------
   Page 2: web-app/training/detail/...
---------------------------------------- */
/* 1. Black box for course description */
#train-nav-desc-tab .description-tab {
    background-color: #000000 !important;
    border: none !important;
}
/* Ensure the description text is white/light-gray so it's readable */
#train-nav-desc-tab .description-tab .txt1,
#train-nav-desc-tab .description-tab .txt2,
#train-nav-desc-tab .description-tab .txt4,
#train-nav-desc-tab .description-tab p,
#train-nav-desc-tab .description-tab div {
    color: #ffffff !important;
}
/* Except for the prices which might be colored */
#train-nav-desc-tab .description-tab .txt3 {
    color: #fa9000 !important;
}

/* 2. Remove the orange/white line under active tab (e.g. Course Description) */
.train-tab-top .nav-tabs .nav-link.active,
.train-tab-top .nav-tabs .nav-item.show .nav-link {
    border-color: transparent !important;
}
.train-tab-top .nav-tabs {
    border-bottom: none !important;
}

/* 3. Class titles must be white (currently orange) */
.card-title, .txt-27 {
    color: #ffffff !important;
}

/* Specific class targeting for class titles if they use different selectors */
.tap-desc-content .card-title {
    color: #ffffff !important;
}

/* Force category item titles to white in the list page */
.list-dore-slider-category-test .card-text,
.list-dore-slider-category-test .txt1 {
    color: #ffffff !important;
}

/* Fix the white description box inside the black tab */
#train-nav-desc-tab .description-tab .txt-desc {
    background-color: #000000 !important;
}

/* Remove the orange line under the tabs using HIGH specificity */
.train-tab .train-tab-top ul.nav-tabs,
.train-tab .train-tab-top ul,
.train-tab-top .nav-tabs .nav-item.show .nav-link,
.train-tab-top .nav-tabs .nav-link.active,
.train-tab-top .nav-tabs .nav-link {
    border-bottom: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Also ensure "توضیحات بیشتر" text is white */
#train-nav-desc-tab .description-tab .txt-desc .more {
    color: #ffffff !important;
}

/* Force override of #tab ID selector to remove the orange border */
#tab .nav-tabs .nav-item.show .nav-link,
#tab .nav-tabs .nav-link.active {
    border-color: transparent !important;
    border-bottom: none !important;
}

#tab .nav-tabs {
    border-bottom: none !important;
}


/* -------------------------------------
   Login & Registration Page
---------------------------------------- */
/* 1. Page Background */
#login-app, #login-inf {
    background-color: #363636 !important;
}

/* 2. Main Login Box (Top part and Form part) */
#login .login-txt,
#login-inf form {
    background-color: #000000 !important;
}

/* 3. Dark texts inside the login box must be white */
#login .login-txt .login-txt-1,
#login-inf form p,
.code-txt-1,
.code-text-2,
.code-text-4 {
    color: #ffffff !important;
}

/* 4. Inputs and Select Boxes background */
#login-inf form .input-group,
#login-inf form .input-group-text,
#login-inf form .form-control,
#login-inf form .form-control:focus,
#login-inf form .drop-down {
    background-color: #363636 !important;
    border-color: #363636 !important;
    color: #ffffff !important;
}

/* Phone input placeholder */
#login-inf form .form-control::placeholder {
    color: #cccccc !important;
}

/* OTP text color */
#otp-content input[type=tel] {
    color: #ffffff !important;
}

/* 5. Select2 Customization (Drop down arrow box) */
#login-inf .select2-container .select2-selection--single,
#login-inf .select2-container .select2-selection--single .select2-selection__rendered {
    background-color: #363636 !important;
    color: #ffffff !important;
    border-color: #363636 !important;
}

/* Select2 dropdown (appended to body) */
.select2-container--default .select2-dropdown {
    background-color: #363636 !important;
    border-color: #222222 !important;
}
.select2-container--default .select2-results__option {
    background-color: #363636 !important;
    color: #ffffff !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #2a2a2a !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #555555 !important;
    color: #ffffff !important;
}

/* Fix OTP boxes (Verification Code) to be gray */
#otp-content input[type=tel] {
    background-color: #363636 !important;
    border: 1px solid #363636 !important;
    border-radius: 8px !important;
    color: #ffffff !important;
}
#otp-content input[type=tel]:focus {
    border: 1px solid #555555 !important;
}

/* -------------------------------------
   Contact Us & About Page
---------------------------------------- */
.contact-us .inf-contact .title,
.contact-us .inf-contact .list li a,
.contact-us .description-contact span,
.contact-us .description-contact p,
.contact-us .description-contact div {
    color: #ffffff !important;
}

/* Subtle separator lines for dark mode */
.contact-us hr {
    border-top: 1.5px solid #555555 !important;
}

/* Ensure rich-text content in about-us is also white */
.contact-us .description-contact * {
    color: #ffffff !important;
}

/* -------------------------------------
   General Confirmation / Alert Modals (.delete-pic wrapper)
   (e.g., Login Required, Logout, Delete confirmations)
---------------------------------------- */
.delete-pic .modal-content {
    background-color: #000000 !important;
    border: 1px solid #333333 !important;
}

/* Modal text */
.delete-pic .contetn-modal p,
.delete-pic .contetn-modal span,
.delete-pic .title-body-modal-out {
    color: #ffffff !important;
}

/* Modal Action Buttons (e.g., Yes/No) */
.delete-pic .btn-modal {
    background-color: #000000 !important;
    border-top: 1px solid #222222 !important;
}

/* Keep action buttons colorful (brighter for dark theme) */
.delete-pic .color-green-btn {
    color: #00cc52 !important;
}
.delete-pic .color-red-btn {
    color: #ff4d4d !important;
}
/* The ".contetn-modal span" rule above is more specific than ".color-green-btn"/
   ".color-red-btn" alone, so it was winning over them and turning the button
   text white. Re-assert the color on the actual span the text sits in. */
.delete-pic .contetn-modal .color-green-btn span {
    color: #00cc52 !important;
}
.delete-pic .contetn-modal .color-red-btn span {
    color: #ff4d4d !important;
}

/* -------------------------------------
   Wallet Recharge Page (شارژ کیف پول)
---------------------------------------- */
/* 1. Main Boxes */
.wallet-stock, 
.account-increase {
    background-color: #000000 !important;
    border-radius: 10px !important;
}

/* 2. Texts */
.wallet-stock .lbl-1, 
.wallet-stock .lbl-2, 
.wallet-stock .lbl-2 span,
.account-increase .title,
.title-history,
.no-item p {
    color: #ffffff !important;
}

/* 3. Form Input */
.account-increase form .form-control {
    background-color: #000000 !important;
    color: #ffffff !important;
}
.account-increase form .form-control::placeholder {
    color: #cccccc !important;
}

/* 4. Table */
.table-pay thead th,
.table-pay tbody th,
.table-pay tbody td {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #333333 !important;
}
/* Override specific colors in table cells */
.table-pay .color-blck, 
.table-pay .color-gray {
    color: #ffffff !important;
}

/* Ensure table container is also black/transparent */
.table-pay table {
    background-color: transparent !important;
}

/* Fix the orange border issue on the recharge wallet input */
.account-increase form .form-control,
.account-increase form .form-control:focus {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #cccccc !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* -------------------------------------
   Search Page (صفحه جستجو)
---------------------------------------- */
/* 1. Search Input in Header */
#search-header form .form-control,
#search-header form .form-control:focus {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid #ffffff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: #ffffff !important;
}
#search-header form .form-control::placeholder {
    color: #f1f1f1 !important;
}

/* 2. Search Tabs */
#tab .serch-content-tab .nav-link.active,
#tab .serch-content-tab .nav-item.show .nav-link {
    background-color: #5c3a07 !important; /* Dark orange background */
    color: #ffffff !important;
    border: none !important;
    border-bottom: 4px solid var(--app_color) !important; /* Thick orange line */
    border-radius: 4px 4px 0 0 !important;
}
#tab .serch-content-tab .nav-link {
    color: #aeaeae !important;
    border: none !important;
    border-bottom: 4px solid transparent !important;
}

/* 3. Product/Training Items (Cards) */
.training-box,
#tab .tab-content .content-box-card .card {
    background-color: #000000 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 12px !important;
}

/* Text color fixes for TrainingBox */
.training-box .training-detail-wrapper div {
    color: #ffffff !important;
}
.training-box .training-detail-wrapper div[style*="color: #0b0b0b"] {
    color: #ffffff !important;
}
/* Subtitle color in TrainingBox */
.training-box .training-detail-wrapper div marquee-text[style*="color:#8a8a8a"] {
    color: #bbbbbb !important;
}

/* Text color fixes for content-box-card */
#tab .tab-content .content-box-card .card .card-title,
#tab .tab-content .content-box-card .card .card-cat {
    color: #ffffff !important;
}

/* Safer override for TrainingBox texts (avoids inline style selector issues) */
.training-box .training-detail-wrapper marquee-text {
    color: #ffffff !important;
}
.training-box .training-detail-wrapper marquee-text:nth-of-type(2) {
    color: #bbbbbb !important;
}

/* Add spacing between search tabs and product items */
#tab ul.serch-content-tab + div {
    padding-top: 25px !important;
}

/* -------------------------------------
   User Profile Page (پروفایل کاربری)
---------------------------------------- */
/* Profile Info Texts */
.user-profile .information-profile .info-lbl,
.user-profile .information-profile .info-user,
.user-profile .code-moaref,
.user-profile .code-moaref span,
.user-profile .copy-code {
    color: #ffffff !important;
}

/* Profile Table Borders */
.user-profile .information-profile .table-bordered,
.user-profile .information-profile table td,
.user-profile .information-profile table th {
    border-color: #444444 !important;
}

/* Referral Code Input Box */
.user-profile .number-code,
.reagent-code-wrapper input {
    background-color: #222222 !important;
    border: none !important;
    color: #ffffff !important;
}

/* Profile Bottom Tabs */
.profile-tab-content .nav-tabs {
    background-color: #111111 !important;
}
.profile-tab-content .nav-link-top.active,
.profile-tab-content .nav-item.show .nav-link-top {
    background-color: #5c3a07 !important; /* Dark orange background */
    color: #ffffff !important;
    border: none !important;
    border-bottom: 4px solid var(--app_color) !important;
    border-radius: 4px 4px 0 0 !important;
}
.profile-tab-content .nav-link-top {
    background-color: transparent !important;
    color: #aeaeae !important;
    border: none !important;
    border-bottom: 4px solid transparent !important;
}

.reagent-code-wrapper button.copy-reagent,
.reagent-code-wrapper button.share-reagent {
    color: #ffffff !important;
}

/* Stronger Specificity for Profile Bottom Tabs to override #tab styles */
#tab .profile-tab-content .nav-tabs .nav-link-top.active,
#tab .profile-tab-content .nav-tabs .nav-item.show .nav-link-top {
    background-color: #5c3a07 !important; /* Dark orange background */
    color: #ffffff !important;
    border: none !important;
    border-bottom: 4px solid var(--app_color) !important;
    border-radius: 4px 4px 0 0 !important;
}

#tab .profile-tab-content .nav-tabs .nav-link-top {
    background-color: transparent !important;
    color: #aeaeae !important;
    border: none !important; /* Removes the white top border */
    border-bottom: 4px solid transparent !important;
}

/* Remove the long white top border from the profile tabs container */
#tab .nav-tabs-top {
    border-top: none !important;
}