/*
 * Voxel Theme - Frontend Dark Mode Stylesheet
 * Version: 2.0.0
 * Author: Afghan Web Designer — https://webdesigner.af/
 * Description: Overrides Voxel custom properties and hardcoded light-theme styles under body.dark-mode.
 *              Supports --ts-accent, --vxdm-icon-color, --vxdm-icon-bg variables.
 */

/* ==========================================================================
   1. Core Variables & Global Overrides
   ========================================================================== */

/* Scrollbars for webkit engines */
body.dark-mode ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
body.dark-mode ::-webkit-scrollbar-track {
  background: var(--ts-shade-7) !important;
}
body.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--ts-shade-4) !important;
  border-radius: 5px;
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--ts-shade-3) !important;
}

/* ==========================================================================
   2. Commons / Panels / Buttons / Dialogs
   ========================================================================== */
body.dark-mode .ts-panel {
  background: var(--ts-shade-6) !important;
}

body.dark-mode .ts-btn-1 {
  background: var(--ts-shade-6) !important;
  border-color: var(--ts-shade-3) !important;
  color: var(--ts-shade-2) !important;
  --ts-icon-color: var(--ts-shade-2) !important;
}
body.dark-mode .ts-btn-1:hover {
  border-color: var(--ts-shade-2) !important;
  color: var(--ts-shade-1) !important;
  --ts-icon-color: var(--ts-shade-1) !important;
}

body.dark-mode .ts-btn-4:hover {
  color: var(--ts-shade-1) !important;
  background: var(--ts-shade-5) !important;
}

body.dark-mode .ts-switcher-btn .ts-btn {
  background: var(--ts-shade-6) !important;
}

body.dark-mode .vx-native-dialog {
  background: var(--ts-shade-6) !important;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4) !important;
}
body.dark-mode .vx-native-dialog__close {
  background-color: var(--ts-shade-6) !important;
}

body.dark-mode .ts-user-area > ul > li > a .ts_comp_label {
  color: var(--ts-shade-1) !important;
}
body.dark-mode .ts-user-area .ts-comp-icon {
  background-color: var(--ts-shade-6) !important;
  --ts-icon-color: var(--ts-shade-1) !important;
  color: var(--ts-shade-1) !important;
}
body.dark-mode .ts-user-area > ul > li > a:hover .ts-comp-icon {
  background-color: var(--ts-shade-5) !important;
}

body.dark-mode .ts-loader {
  border-color: var(--ts-shade-5) !important;
  border-bottom-color: var(--ts-shade-2) !important;
}

body.dark-mode pre[debug] {
  background: #090e1a !important;
  color: #a3e8a5 !important;
  box-shadow: inset 0 0 3px 0 rgba(0,0,0,.6) !important;
}

/* Term meta and counts */
body.dark-mode .ts-term-count {
  color: var(--ts-shade-2) !important;
  border-color: var(--ts-shade-4) !important;
  background: var(--ts-shade-5) !important;
}

/* ==========================================================================
   3. Forms / Inputs / Selectors
   ========================================================================== */
body.dark-mode .ts-form .ts-form-group .ts-filter,
body.dark-mode .ts-form .ts-form-group input,
body.dark-mode .ts-form .ts-form-group textarea {
  background: var(--ts-shade-6) !important;
  border-color: var(--ts-shade-3) !important;
  color: var(--ts-shade-1) !important;
}
body.dark-mode .ts-form .ts-form-group .ts-filter:hover,
body.dark-mode .ts-form .ts-form-group input:hover,
body.dark-mode .ts-form .ts-form-group textarea:hover {
  border-color: var(--ts-shade-2) !important;
}
body.dark-mode .ts-form .ts-form-group .ts-filter:focus,
body.dark-mode .ts-form .ts-form-group input:focus,
body.dark-mode .ts-form .ts-form-group textarea:focus {
  border-color: var(--ts-accent) !important;
}

body.dark-mode .ts-form .ts-form-group.ui-heading-field label {
  color: var(--ts-shade-1) !important;
}

body.dark-mode .onoffswitch .onoffswitch-label {
  background: var(--ts-shade-4) !important;
}
body.dark-mode .onoffswitch .onoffswitch-label:before {
  background: var(--ts-shade-2) !important;
}
body.dark-mode .onoffswitch .onoffswitch-checkbox:checked + .onoffswitch-label:before {
  background: #fff !important;
}

body.dark-mode .ts-selected-count {
  background: var(--ts-shade-4) !important;
  color: var(--ts-shade-1) !important;
}

body.dark-mode .inline-user-location {
  background: var(--ts-shade-6) !important;
}

body.dark-mode .ts-remove-file {
  background: var(--ts-shade-6) !important;
  color: var(--ts-shade-1) !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4) !important;
  --ts-icon-color: var(--ts-shade-2) !important;
}

body.dark-mode .container-checkbox,
body.dark-mode .container-radio {
  color: var(--ts-shade-1) !important;
}
body.dark-mode .container-checkbox .checkmark:after,
body.dark-mode .container-radio .checkmark:after {
  border-color: #fff !important;
}

body.dark-mode .addon-buttons li {
  border-color: var(--ts-shade-4) !important;
  color: var(--ts-shade-2) !important;
}
body.dark-mode .addon-buttons li.adb-selected {
  border-color: var(--ts-accent) !important;
  color: var(--ts-accent) !important;
  background: rgba(59, 130, 246, 0.12) !important;
}

body.dark-mode .ts-shortcut {
  background: var(--ts-shade-5) !important;
  color: var(--ts-shade-2) !important;
}

/* ==========================================================================
   4. Social Feed
   ========================================================================== */
body.dark-mode .vxfeed {
  --main-bg: var(--ts-shade-6) !important;
  --main-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .vxfeed__mentions {
  background: var(--ts-shade-6) !important;
  border-color: var(--ts-shade-4) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
body.dark-mode .vxfeed__mentions a {
  color: var(--main-text) !important;
}
body.dark-mode .vxfeed__mentions a.is-active,
body.dark-mode .vxfeed__mentions a:focus,
body.dark-mode .vxfeed__mentions a:hover {
  background: var(--ts-shade-5) !important;
}

/* ==========================================================================
   5. Messages / Inbox Chat
   ========================================================================== */
body.dark-mode .ts-inbox-bottom {
  background: var(--ts-shade-6) !important;
}

body.dark-mode .ts-convo-list li a {
  color: var(--ts-shade-1) !important;
}
body.dark-mode .ts-convo-list li a .post-avatar img {
  border-color: var(--ts-shade-6) !important;
}

body.dark-mode .ts-conversation-body .ts-message-list > li.ts-error-message p {
  background-color: rgba(200, 69, 100, 0.15) !important;
  color: #e56b82 !important;
}

body.dark-mode .ts-conversation-body .ts-message-list .ts-single-message > p {
  background-color: var(--ts-shade-5) !important;
  color: var(--ts-shade-1) !important;
}

body.dark-mode .ts-conversation-body .ts-message-list .ts-single-message > p a {
  color: var(--ts-accent) !important;
  border-bottom-color: var(--ts-accent) !important;
}

/* ==========================================================================
   6. Create Post
   ========================================================================== */
body.dark-mode .location-field-map {
  background: var(--ts-shade-5) !important;
}

body.dark-mode .ts-field-repeater {
  background: var(--ts-shade-6) !important;
  border-color: var(--ts-shade-3) !important;
}
body.dark-mode .ts-field-repeater.collapsed:hover {
  border-color: var(--ts-shade-2) !important;
}

body.dark-mode .mce-toolbar {
  border-bottom-color: var(--ts-shade-3) !important;
}

/* ==========================================================================
   7. Map & Geolocation Controls
   ========================================================================== */
body.dark-mode .ts-map-nav .ts-icon-btn {
  background: var(--ts-shade-6) !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .ts-map-drag .ts-map-btn {
  background: var(--ts-shade-6) !important;
  color: var(--ts-shade-1) !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .marker-type-icon {
  --ts-icon-bg: var(--ts-shade-6) !important;
  --ts-icon-shadow: rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .marker-type-text {
  background: var(--ts-shade-6) !important;
  color: var(--ts-shade-1) !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .marker-type-image {
  background: var(--ts-shade-6) !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode a.vx-geolocate-me {
  background-color: var(--ts-shade-6) !important;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.5) !important;
}
body.dark-mode a.vx-geolocate-me:hover {
  background-color: var(--ts-shade-5) !important;
}

/* ==========================================================================
   8. Pricing / Products / Checkout
   ========================================================================== */
body.dark-mode .ts-plan-container {
  border-color: var(--ts-shade-4) !important;
  background: var(--ts-shade-6) !important;
}

body.dark-mode .ts-plan-pricing .ts-plan-price {
  color: var(--ts-shade-1) !important;
}

body.dark-mode .product-head span {
  color: var(--ts-shade-1) !important;
}

body.dark-mode .addon-colors {
  --inset-shad: var(--ts-shade-6) !important;
}
body.dark-mode .addon-colors li {
  border-color: var(--ts-shade-6) !important;
}

body.dark-mode .addon-cards li.adc-selected {
  background: rgba(79, 70, 229, 0.15) !important;
}

/* ==========================================================================
   9. Login & Registration
   ========================================================================== */
body.dark-mode .role-selection a {
  background: var(--ts-shade-6) !important;
  border-color: var(--ts-shade-4) !important;
}
body.dark-mode .role-selection a.selected-role {
  background: var(--ts-shade-5) !important;
}
body.dark-mode .role-selection a:hover {
  background: var(--ts-shade-5) !important;
}

/* ==========================================================================
   10. Widgets (Work Hours, Charts, Calendars)
   ========================================================================== */
/* Work Hours */
body.dark-mode .ts-work-hours {
  border-color: var(--ts-shade-4) !important;
}
body.dark-mode .ts-hours-today {
  background: var(--ts-shade-6) !important;
}
body.dark-mode .ts-work-hours-list ul {
  background: var(--ts-shade-6) !important;
}
body.dark-mode .ts-work-hours-list li {
  border-top-color: var(--ts-shade-4) !important;
}

/* Stats & Charts */
body.dark-mode .bar-item-data {
  background: var(--ts-shade-6) !important;
  border-color: var(--ts-shade-4) !important;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.4) !important;
}
body.dark-mode .circle-chart-wrapper .circle-chart .chart-value,
body.dark-mode .chart-description {
  color: var(--ts-shade-1) !important;
}

/* Google Places Autocomplete dropdown */
body.dark-mode .pac-container {
  background-color: var(--ts-shade-6) !important;
  border-color: var(--ts-shade-4) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}
body.dark-mode .pac-item {
  border-top-color: var(--ts-shade-4) !important;
  color: var(--ts-shade-2) !important;
}
body.dark-mode .pac-item:hover {
  background-color: var(--ts-shade-5) !important;
}
body.dark-mode .pac-item-query {
  color: var(--ts-shade-1) !important;
}
body.dark-mode .pac-matched {
  color: var(--ts-accent) !important;
}

/* Pikaday Date Picker Overrides */
body.dark-mode .pika-single {
  background: var(--ts-shade-6) !important;
  border-color: var(--ts-shade-4) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) !important;
  color: var(--ts-shade-1) !important;
}
body.dark-mode .pika-label {
  color: var(--ts-shade-1) !important;
  background-color: transparent !important;
}
body.dark-mode .pika-table th {
  color: var(--ts-shade-2) !important;
}
body.dark-mode .pika-button {
  color: var(--ts-shade-1) !important;
  background: var(--ts-shade-6) !important;
}
body.dark-mode .pika-button:hover {
  background: var(--ts-shade-5) !important;
  color: var(--ts-shade-1) !important;
}
body.dark-mode .is-today .pika-button {
  color: var(--ts-accent) !important;
  font-weight: bold !important;
}
body.dark-mode .is-selected .pika-button {
  color: #fff !important;
  background: var(--ts-accent) !important;
  box-shadow: none !important;
}
body.dark-mode .is-disabled .pika-button {
  color: var(--ts-shade-3) !important;
  opacity: .3 !important;
}
body.dark-mode .ts-booking-date .is-inrange .pika-button {
  background: var(--ts-shade-5) !important;
  color: var(--ts-shade-1) !important;
}

/* ==========================================================================
   11. Elementor Widget Styles
   ========================================================================== */
.voxel-dark-mode-widget-container {
  display: block;
}

/* 11.1 Circle Button Style */
.voxel-dark-mode-widget-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--ts-shade-4);
  background: var(--ts-shade-6);
  color: #f59e0b; /* Bright sun yellow */
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 2px 0 rgba(255, 255, 255, 0.05);
}
.voxel-dark-mode-widget-toggle:hover {
  background: var(--ts-shade-5);
  transform: scale(1.1) rotate(15deg);
  color: #d97706;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}
.voxel-dark-mode-widget-toggle:active {
  transform: scale(0.9) rotate(-10deg);
}
.voxel-dark-mode-widget-toggle svg {
  fill: currentColor;
  position: absolute;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.voxel-dark-mode-widget-toggle .sun-icon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.voxel-dark-mode-widget-toggle .moon-icon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}
body.dark-mode .voxel-dark-mode-widget-toggle {
  color: #60a5fa; /* Cool moon blue */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
body.dark-mode .voxel-dark-mode-widget-toggle:hover {
  color: #93c5fd;
}
body.dark-mode .voxel-dark-mode-widget-toggle .sun-icon {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}
body.dark-mode .voxel-dark-mode-widget-toggle .moon-icon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* 11.2 Pill Switch Style */
.voxel-dark-mode-pill-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  border: 1px solid var(--ts-shade-4);
  background: var(--ts-shade-6);
  cursor: pointer;
  --vxdm-padding: 4px;
  padding: var(--vxdm-padding);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* Day/Night fluid track gradients */
.voxel-dark-mode-pill-toggle::before,
.voxel-dark-mode-pill-toggle::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.voxel-dark-mode-pill-toggle::before {
  background: linear-gradient(180deg, #7dd3fc 0%, #38bdf8 100%);
  opacity: 1;
}
.voxel-dark-mode-pill-toggle::after {
  background: linear-gradient(180deg, #1e1b4b 0%, #0f172a 100%);
  opacity: 0;
}
body.dark-mode .voxel-dark-mode-pill-toggle::before {
  opacity: 0;
}
body.dark-mode .voxel-dark-mode-pill-toggle::after {
  opacity: 1;
}

.voxel-dark-mode-pill-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffffff;
  color: #f59e0b;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.4s, color 0.4s;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.voxel-dark-mode-pill-handle svg {
  fill: currentColor;
  position: absolute;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.voxel-dark-mode-pill-handle .sun-icon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.voxel-dark-mode-pill-handle .moon-icon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

body.dark-mode .voxel-dark-mode-pill-toggle {
  border-color: rgba(255, 255, 255, 0.05);
}
body.dark-mode .voxel-dark-mode-pill-handle {
  background: #f8fafc;
  color: #3b82f6;
  transform: translateX(calc(100% + var(--vxdm-padding) * 2));
}
html[dir="rtl"] body.dark-mode .voxel-dark-mode-pill-handle {
  transform: translateX(calc(-100% - var(--vxdm-padding) * 2));
}

body.dark-mode .voxel-dark-mode-pill-handle .sun-icon {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}
body.dark-mode .voxel-dark-mode-pill-handle .moon-icon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Micro-elastic scale drop on active click */
.voxel-dark-mode-pill-toggle:active .voxel-dark-mode-pill-handle {
  transform: translateX(calc(100% + var(--vxdm-padding) * 2)) scale(0.85);
}
html[dir="rtl"] .voxel-dark-mode-pill-toggle:active .voxel-dark-mode-pill-handle {
  transform: translateX(calc(-100% - var(--vxdm-padding) * 2)) scale(0.85);
}
.voxel-dark-mode-pill-toggle:not(:active) .voxel-dark-mode-pill-handle {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   12. Elementor Global & Page Overrides (Dark Mode)
   ========================================================================== */

/* Override Elementor Global Colors to match Voxel Dark Mode Shaded colors */
body.dark-mode {
  --e-global-color-primary: var(--ts-shade-1) !important;
  --e-global-color-secondary: var(--ts-shade-2) !important;
  --e-global-color-text: var(--ts-shade-1) !important;
  --e-global-color-accent: var(--ts-accent) !important;
  
  /* Override user's custom header global color */
  --e-global-color-2575930: var(--ts-shade-6) !important;
}

/* Force dark background on pages, headers, footers, sections, and containers */
body.dark-mode,
body.dark-mode #page,
body.dark-mode #content,
body.dark-mode .site-content,
body.dark-mode .main-content,
body.dark-mode #primary,
body.dark-mode main,
body.dark-mode .elementor,
body.dark-mode .elementor-location-header,
body.dark-mode .elementor-location-footer,
body.dark-mode .site-header,
body.dark-mode .site-footer,
body.dark-mode header,
body.dark-mode footer {
  background-color: var(--ts-shade-7) !important;
}

/* Ensure Elementor sections, columns and widget containers are transparent so they inherit the dark background */
body.dark-mode .elementor-section,
body.dark-mode .elementor-column,
body.dark-mode .elementor-widget-wrap,
body.dark-mode .elementor-widget-container {
  background-color: transparent !important;
}

/* Header background override to make it dark */
body.dark-mode .elementor-209 .elementor-element.elementor-element-112e3bf:not(.elementor-motion-effects-element-type-background),
body.dark-mode .elementor-209 .elementor-element.elementor-element-112e3bf > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: var(--ts-shade-6) !important;
}

/* Ensure headings (H1 - H7) and text elements are readable in dark mode */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .h1,
body.dark-mode .h2,
body.dark-mode .h3,
body.dark-mode .h4,
body.dark-mode .h5,
body.dark-mode .h6,
body.dark-mode .h7,
body.dark-mode .elementor-heading-title,
body.dark-mode .elementor-widget-heading .elementor-heading-title {
  color: var(--ts-shade-1) !important;
}

/* Ensure body text, paragraphs and list items are light in dark mode */
body.dark-mode p,
body.dark-mode li,
body.dark-mode .elementor-text-editor,
body.dark-mode .elementor-widget-text-editor {
  color: var(--ts-shade-1) !important;
}

/* Ensure normal text links inherit accent color or are readable */
body.dark-mode .elementor-text-editor a,
body.dark-mode .elementor-widget-text-editor a {
  color: var(--ts-accent) !important;
}