/* ---- BDT Exchange - Custom Dark Mode ---- */

/* 1. Define the Color Palette */
:root {
  --dark-bg-primary: #121212;      /* Near-black for the main background */
  --dark-bg-secondary: #1E1E1E;    /* Lighter grey for cards, sections, header */
  --dark-bg-tertiary: #2a2a2e;     /* Hover color and lighter elements */
  --dark-border-color: #383838;    /* Borders for inputs and containers */
  --dark-text-primary: #EAEAEA;    /* Main text color, almost white */
  --dark-text-secondary: #B0B0B0;  /* Dimmer text for subheadings */
  --dark-accent-primary: #058C42;  /* Your site's main green color */
  --dark-accent-hover: #06a44c;    /* Lighter green for hover effects */
}

/* 2. Global Styles */
body, .section-bg {
  background-color: var(--dark-bg-primary) !important;
  color: var(--dark-text-primary) !important;
}

h1, h2, h3, h4, h5, h6, .text--base, .banner-title {
  color: var(--dark-text-primary) !important;
}

p, span, li, .form-group label {
  color: var(--dark-text-secondary) !important;
}

/* 3. Header & Navigation */

.header {
  background-color: #1E1E1E !important;
  color: #E0E0E0 !important;
}

/* Also style any links inside the header */
.header a {
  color: #E0E0E0 !important;
}

.header a:hover {
  color: #0095ff !important;
}

.header.sticky {
  background-color: var(--dark-bg-secondary) !important;
  border-bottom: 1px solid var(--dark-border-color);
}

.header .menu li a {
  color: var(--dark-text-secondary) !important;
}

.header .menu li a:hover, .header .menu li a.active {
  color: var(--dark-accent-primary) !important;
}

/* Make the mobile menu dark */
@media (max-width: 991px) {
  .header .menu {
    background: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border-color);
  }
}

/* 4. Main Exchange Widget & Forms */
.custom-widget, .form--control {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border-color) !important;
  color: var(--dark-text-primary) !important;
}

.form-group label, .banner__widget-title {
  color: var(--dark-text-primary) !important;
}

/* Style for the Select2 dropdowns */
.select2-container--default .select2-selection--single {
    background-color: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--dark-border-color) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--dark-text-primary) !important;
}
.select2-dropdown {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-color) !important;
}
.select2-results__option {
    color: var(--dark-text-primary) !important;
}
.select2-results__option--highlighted[aria-selected] {
    background-color: var(--dark-accent-primary) !important;
}

/* 5. Buttons & Links */
a {
  color: var(--dark-accent-primary);
}
a:hover {
  color: var(--dark-accent-hover);
}
.btn--base {
    background-color: var(--dark-accent-primary) !important;
    box-shadow: none !important;
}
.btn--base:hover {
    background-color: var(--dark-accent-hover) !important;
}

/* 6. Section & Content Blocks */
.pt-80, .pb-80, .section--bg {
    background-color: var(--dark-bg-primary) !important;
}
.overview-item, .work-item, .testimonial-item, .blog-post {
    background-color: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border-color) !important;
}
.best-rate-list .list-group-item {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-secondary) !important;
}

/* 7. Footer */
.footer {
  background-color: var(--dark-bg-secondary) !important;
  border-top: 1px solid var(--dark-border-color) !important;
}
.footer .widget__title {
  color: var(--dark-text-primary) !important;
}
.footer-bottom {
    border-top: 1px solid var(--dark-border-color) !important;
}

/* 8. Miscellaneous Elements */
.scrollToTop {
    background-color: var(--dark-accent-primary) !important;
}
.overlay {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

/* ---- Dark Mode for Cookie Consent Card ---- */

/* Targets common names for the cookie banner container */
.cookies-card,
.cookie-policy,
.cookie-consent,
.cookie-banner,
.gdpr-consent {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
  border: 1px solid var(--dark-border-color) !important;
}

/* Styles the text and links within the cookie card */
.cookies-card .content p,
.cookie-policy .content p,
.cookie-consent p {
  color: var(--dark-text-primary) !important;
}

.cookies-card .content a,
.cookie-policy .content a {
  color: var(--dark-accent-primary) !important;
}

/* Styles the "Accept" button */
.cookies-card .cookies-btn,
.cookie-policy .cookies-btn,
.cookie-consent .btn-accept {
  background-color: var(--dark-accent-primary) !important;
  color: #FFFFFF !important;
}


/* ---- Dark Mode for Tables ---- */

/* General styles for the table container */
.table.table--responsive--lg {
  background-color: transparent !important;
  color: var(--dark-text-secondary) !important;
}

/* Style for the table header (thead) */
.table.table--responsive--lg thead th {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border-color) !important;
}

/* Style for the table body cells (td) */
.table.table--responsive--lg tbody td {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border-color) !important;
  vertical-align: middle;
}

/* IMPROVED: Adds a slightly different dark background for every other row */
.table.table--responsive--lg tbody tr:nth-child(even) td {
  background-color: var(--dark-bg-tertiary) !important;
}

/* Ensures links within the table use the accent color */
.table.table--responsive--lg a {
  color: var(--dark-accent-primary) !important;
}


/* ---- Dark Mode for 'Our Reserves' Widget ---- */

/* Main widget container */
.custom-widget {
  background-color: var(--dark-bg-secondary) !important;
  border: 1px solid var(--dark-border-color) !important;
  border-radius: 8px;
  padding: 20px;
}

/* Widget title, e.g., "Our Reserves" */
.custom-widget .custom-widget-title {
  color: var(--dark-text-primary) !important;
  margin-bottom: 15px !important;
}

/* Header for the currency list ("Currency" | "Reserved") */
.custom-widget .currency-wrapper__header {
  border-bottom: 1px solid var(--dark-border-color) !important;
  padding-bottom: 10px;
}

.custom-widget .currency-wrapper__name,
.custom-widget .buy-sell {
  color: var(--dark-text-secondary) !important;
}

/* FIXED: Replaced general rule with specific odd/even row styling */

/* This targets the ODD rows (1st, 3rd, 5th, etc.) */
.custom-widget .currency-list__item:nth-child(odd) {
  background-color: var(--dark-bg-secondary) !important;
  border-bottom: 1px solid var(--dark-border-color) !important;
  padding: 10px 0;
}

/* This targets the EVEN rows (2nd, 4th, 6th, etc.) to remove the white */
.custom-widget .currency-list__item:nth-child(even) {
  background-color: var(--dark-bg-tertiary) !important;
  border-bottom: 1px solid var(--dark-border-color) !important;
  padding: 10px 0;
}

/* Hover effect for ALL rows */
.custom-widget .currency-list__item:hover {
  background-color: #3a3a3a !important; /* A distinct dark hover color */
}

/* Removes the border from the very last item */
.custom-widget .currency-list__item:last-child {
  border-bottom: none !important;
}

/* Text for currency name and amount */
.custom-widget .currency-list__text,
.custom-widget .buy-sell.two {
  color: var(--dark-text-primary) !important;
  font-weight: 500;
}



/* ---- Corrected select2 Dropdown Styles (More Specific) ---- */
/*
  We add 'body' to the start of each selector to increase its priority,
  ensuring it overrides the theme's default styles.
*/

/* The main dropdown panel that opens */
body .select2-dropdown {
  background-color: var(--dark-bg-secondary) !important;
  border: 1px solid var(--dark-border-color) !important;
}

/* The search field inside the dropdown */
body .select2-search__field {
  background-color: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border-color) !important;
  color: var(--dark-text-primary) !important;
}

/* A standard option in the list */
body .select2-results__option {
  color: var(--dark-text-primary) !important;
  background-color: var(--dark-bg-secondary) !important;
}

/* A highlighted/hovered option */
body .select2-results__option--highlighted[aria-selected] {
  background-color: var(--dark-accent-primary) !important;
  color: #FFFFFF !important;
}

/* An already selected option */
body .select2-results__option--selected {
  background-color: var(--dark-bg-tertiary) !important;
}


/* ---- Dark Mode for Rate Meter ---- */

/* The main card container for the rate slide */
.card.custom--card.best-rate-slide {
  background-color: transparent !important; /* Make container transparent */
}

/* The list item holding the rate text */
.best-rate-list .list-group-item {
  background: var(--dark-bg-tertiary) !important; /* Give the item a dark background */
  color: var(--dark-text-primary) !important;
  border: 1px solid var(--dark-border-color) !important;
  border-radius: 5px;
}

/* Ensures the rate number uses the accent color */
.best-rate-list .text--base {
    color: var(--dark-accent-primary) !important;
}

/* ---- FINAL Override for select2 Dropdown States ---- */
/*
  This version is highly specific to override the theme's default white
  backgrounds on hover and selection.
*/

/* The main dropdown panel that opens */
body .select2-dropdown {
  background-color: var(--dark-bg-secondary) !important;
  border: 1px solid var(--dark-border-color) !important;
}

/* A standard option in the list */
body .select2-container--default .select2-results__option {
  color: var(--dark-text-primary) !important;
  background-color: var(--dark-bg-secondary) !important;
}

/*
  THIS IS THE KEY FIX:
  Targets the option that is currently being hovered over OR is highlighted.
*/
body .select2-container--default .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option:hover {
  background-color: var(--dark-accent-primary) !important;
  color: #FFFFFF !important;
}

/* Targets an option that is already selected but not being hovered */
body .select2-container--default .select2-results__option--selected {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
}



















/* ---- FINAL Consolidated Dark Mode for Contact Page ---- */

/* 1. Main Section Container */
/* The .pt-80.pb-80 class is the main container for this section */
.pt-80.pb-80 {
    background-color: var(--dark-bg-primary) !important;
}

/* 2. Contact Info Blocks (Left Side) */
/*
  The HTML has an inline style on .contact-info. This rule is specifically
  designed to override it and remove the white background and glow.
*/
.contact-info {
  background: var(--dark-bg-secondary) !important; /* Sets a dark card background */
  box-shadow: none !important; /* Explicitly removes the glow */
  border: 1px solid var(--dark-border-color) !important;
}

/* Styles the icon's background circle */
.contact-info .info-item__icon {
  background-color: var(--dark-bg-tertiary);
  border-radius: 50%;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Styles the title, e.g., "Give Us a Call" */
.contact-info .info-item__title {
  color: var(--dark-text-primary) !important;
}

/* Styles the paragraph and contact detail text */
.contact-info .info-item__content p,
.contact-info .info-item__content span {
  color: var(--dark-text-secondary) !important;
}

/* 3. Contact Form (Right Side) */

/* Main form wrapper */
.contact-form.form-wrapper {
  background-color: var(--dark-bg-secondary) !important;
  border: 1px solid var(--dark-border-color) !important;
  border-radius: 8px;
  padding: 25px;
}

/* Form heading and subheading */
.contact-form.form-wrapper h3,
.contact-form.form-wrapper p {
  color: var(--dark-text-primary) !important;
}

/* Form labels (e.g., "Your Name", "Email") */
.contact-form.form-wrapper label {
  color: var(--dark-text-secondary) !important;
}

/* Input fields and text areas */
.contact-form .floating-input.form-control {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
  border: 1px solid var(--dark-border-color) !important;
}

/* Adjusts label color when an input is focused or filled */
.contact-form .floating-input.form-control:focus ~ .form-label-two,
.contact-form .floating-input.form-control:valid ~ .form-label-two {
  color: var(--dark-accent-primary) !important;
}

/* ---- FINAL Override for Contact Form Shadow & Inputs ---- */

/*
  This uses a highly specific path to target the form wrapper,
  removing the white shadow and setting the correct dark background.
*/
.pt-80.pb-80 .contact-form.form-wrapper {
  background: var(--dark-bg-secondary) !important;
  box-shadow: none !important; /* Explicitly removes the white shadow */
  border: 1px solid var(--dark-border-color) !important;
}

/*
  This uses the same specific path to target the input fields,
  forcing the dark border and light text colors.
*/
.pt-80.pb-80 .contact-form.form-wrapper .floating-input.form-control.form--control {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important; /* Light text */
  border: 1px solid var(--dark-border-color) !important; /* Dark border */
}




/* ---- Dark Mode for Blog Post Items ---- */

/* Main container for the blog post card */
.post-item {
  background-color: var(--dark-bg-secondary) !important;
  border: 1px solid var(--dark-border-color) !important;
  border-radius: 8px; /* Optional: for rounded corners */
  overflow: hidden; /* Ensures image corners are also rounded */
}

/* Styles the date text */
.post-item .date {
  color: var(--dark-text-secondary) !important;
}

/* Styles the post title link */
.post-item .post-item__content-title a {
  color: var(--dark-text-primary) !important;
  transition: color 0.2s;
}

/* Adds a hover effect to the post title */
.post-item .post-item__content-title a:hover {
  color: var(--dark-accent-primary) !important;
}

/* Styles the short description/paragraph text */
.post-item .post-item__content p {
  color: var(--dark-text-secondary) !important;
}

/* Styles the "Read More" link */
.post-item .text--base {
  color: var(--dark-accent-primary) !important;
}





/* ---- Dark Mode for Ticket View Page ---- */

/* 1. Main Card & Header */

/* Styles the main containers for the reply form and message history */
.card.custom--card {
  background-color: var(--dark-bg-secondary) !important;
  border: 1px solid var(--dark-border-color) !important;
  box-shadow: none !important;
}

/* Styles the header of the ticket reply card */
.card.custom--card .p-3.border-bottom {
  border-bottom-color: var(--dark-border-color) !important;
}

/* Styles the ticket title text */
.card.custom--card .title {
  color: var(--dark-text-primary) !important;
}

/* Styles the status badge, e.g., "Answered" */
.badge.badge--primary {
    background-color: var(--dark-accent-primary) !important;
    color: #FFFFFF !important;
}


/* 2. Ticket Reply Form */

/* Styles the form labels, e.g., "Message" */
.form--group .form-label {
    color: var(--dark-text-primary) !important;
}

/* Styles the textarea for the message reply */
.form-control.form--control {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
  border: 1px solid var(--dark-border-color) !important;
}

/* Styles the file attachment info text */
.text--info {
    color: var(--dark-text-secondary) !important;
}

/* Styles the "Add Attachment" button */
.btn.btn-dark.addAttachment {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border-color) !important;
}


/* 3. Message History Bubbles */

/* General styling for all message bubbles */
.card-body .border {
    border-color: var(--dark-border-color) !important;
    border-radius: 5px;
}
.card-body .border .border-end {
    border-right-color: var(--dark-border-color) !important;
}

/* Specific style for Admin/Staff replies (the yellow one) */
.card-body .border--warning {
    background-color: rgba(255, 193, 7, 0.1) !important; /* Dark, transparent yellow */
    border-color: #ffc107 !important;
}

/* Specific style for User replies (the green one) */
.card-body .border--base {
    background-color: rgba(5, 140, 66, 0.1) !important; /* Dark, transparent green */
    border-color: var(--dark-accent-primary) !important;
}

/* Ensures all text inside the message bubbles is readable */
.border .col-md-3 h5,
.border .col-md-9 p {
    color: var(--dark-text-primary) !important;
}

.border .col-md-3 .lead,
.border .col-md-9 .text-muted {
    color: var(--dark-text-secondary) !important;
}







/* ---- Dark Mode for Registration Page ---- */

/* 1. Main Layout & Backgrounds */

/* Main page container */
.account-section.registration {
  background-color: var(--dark-bg-primary) !important;
}

/* The close 'X' button */
.account-section__close {
    color: var(--dark-text-secondary) !important;
}

/* Left promotional pane */
.account-left {
    background-color: var(--dark-bg-secondary) !important;
}


/* 2. Left Pane (Branding) */

/* Title text */
.account-left .title {
    color: var(--dark-text-primary) !important;
}


/* 3. Right Pane (Signup Form) */

/* Signup form title */
.account-right .form-wrapper h3 {
    color: var(--dark-text-primary) !important;
}

/* Input field labels */
.floating-label .form-label-two {
    color: var(--dark-text-secondary) !important;
}

/* Input fields */
.form-control.form--control {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
  border: 1px solid var(--dark-border-color) !important;
}

/* "I agree" checkbox text */
.form-check-label {
    color: var(--dark-text-secondary) !important;
}

/* "OR" divider */
.other-option {
    border-bottom: 1px solid var(--dark-border-color);
}
.other-option__text {
    background: var(--dark-bg-primary);
    color: var(--dark-text-secondary);
}

/* Google login button */
.btn-outline-google {
    border-color: var(--dark-border-color) !important;
    color: var(--dark-text-primary) !important;
}
.btn-outline-google:hover {
    background-color: var(--dark-bg-tertiary) !important;
}

/* "Already have account?" text */
.account-right p {
    color: var(--dark-text-secondary) !important;
}


/* 4. "Already Exists" Modal */

.modal-content {
    background-color: var(--dark-bg-secondary) !important;
}
.modal-header {
    border-bottom-color: var(--dark-border-color) !important;
}
.modal-header .modal-title, .modal-body h6 {
    color: var(--dark-text-primary) !important;
}
.modal-header .close {
    color: var(--dark-text-secondary) !important;
}
.modal-footer {
    border-top-color: var(--dark-border-color) !important;
}



/* ---- Dark Mode for Login Page ---- */

/* 1. Main Layout & Backgrounds */

/* Main page container */
.account-section {
  background-color: var(--dark-bg-primary) !important;
}

/* The close 'X' button */
.account-section__close {
    color: var(--dark-text-secondary) !important;
}

/* Left promotional pane */
.account-left {
    background-color: var(--dark-bg-secondary) !important;
}


/* 2. Left Pane (Branding) */

/* Title text */
.account-left .title {
    color: var(--dark-text-primary) !important;
}


/* 3. Right Pane (Sign-in Form) */

/* Sign-in form title */
.account-right .form-wrapper h3 {
    color: var(--dark-text-primary) !important;
}

/* Input field labels */
.floating-label .form-label-two {
    color: var(--dark-text-secondary) !important;
}

/* Input fields */
.form-control.form--control {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
  border: 1px solid var(--dark-border-color) !important;
}

/* "Remember Me" checkbox text */
.form-check-label {
    color: var(--dark-text-secondary) !important;
}

/* "Forgot Password" text */
.remember-wrapper p {
    color: var(--dark-text-secondary) !important;
}

/* "OR" divider */
.other-option {
    border-bottom: 1px solid var(--dark-border-color);
}
.other-option__text {
    background: var(--dark-bg-primary);
    color: var(--dark-text-secondary);
}

/* Google login button */
.btn-outline-google {
    border-color: var(--dark-border-color) !important;
    color: var(--dark-text-primary) !important;
}
.btn-outline-google:hover {
    background-color: var(--dark-bg-tertiary) !important;
}

/* "Don't have account?" text */
.account-right .mt-3 p {
    color: var(--dark-text-secondary) !important;
}