/*
Theme Name: DS AQUA
Theme URI: https://dsaqua.com
Description: Premium Water Purifier & RO Systems E-Commerce Theme. Engineered for pure drinking water solutions, pristine modern design, high performance, and full WooCommerce optimization.
Author: DS AQUA Team
Author URI: https://dsaqua.com
Template: hello-elementor
Version: 2.0.0
Text Domain: ds-aqua
*/

/* DS AQUA Brand Design Tokens */
:root {
  /* Brand Palette */
  --ds-navy: #09265C;        /* Deep Navy: Headings, primary text */
  --ds-royal-blue: #0878ED;  /* Royal Blue: Primary buttons, highlights */
  --ds-aqua: #12C9E8;        /* Aqua Blue: Accent elements, icons */
  --ds-light-blue: #EAF5FF;  /* Light Blue: Background sections */
  --ds-pale-blue: #F4F9FF;   /* Pale Blue: Cards and subtle backgrounds */
  --ds-white: #FFFFFF;       /* White: Main backgrounds */
  --ds-soft-grey: #E8EEF5;   /* Soft Grey: Borders and dividers */

  /* Legacy variable mappings for seamless compatibility */
  --ink: #09265C;
  --muted: #5A6E85;
  --line: #E8EEF5;
  --soft: #F4F9FF;
  --yellow: #0878ED;
  --green: #149447;
  --red: #0878ED;
  --blue: #0878ED;
  --max: 1600px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
  color: var(--ds-navy);
  background-color: var(--ds-white);
  margin: 0;
  padding: 0;
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ds-navy);
}

/* Ensure Elementor full-width pages match design */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--max);
}

/* ==========================================================================
   DS AQUA COLOR SYSTEM OVERRIDES
   ========================================================================== */

/* 1. Global Buttons & Button Hovers */
[type=button]:focus,
[type=button]:hover,
[type=submit]:focus,
[type=submit]:hover,
button:focus,
button:hover {
  background-color: var(--ds-royal-blue);
  color: #ffffff;
  border-color: var(--ds-royal-blue);
}

/* 2. Product Category Tabs & Pill Buttons (Big Deals, Top Picks, Best Sellers, etc.) */
.tabs .tab:hover,
.tabs button:hover,
.tab:hover,
button.tab:hover,
button[data-tab-target]:hover,
button[data-category]:hover {
  background: var(--ds-royal-blue) !important;
  color: #ffffff !important;
  border-color: var(--ds-royal-blue) !important;
  box-shadow: 0 4px 14px rgba(8, 120, 237, 0.28) !important;
}

.tabs .tab.active,
.tab.active {
  background: var(--ds-navy) !important;
  color: #ffffff !important;
  border-color: var(--ds-navy) !important;
}

.tabs .tab.active:hover,
.tab.active:hover {
  background: var(--ds-royal-blue) !important;
  color: #ffffff !important;
  border-color: var(--ds-royal-blue) !important;
  box-shadow: 0 4px 14px rgba(8, 120, 237, 0.28) !important;
}

/* 3. Modal Tabs, Nav Tabs & Category Pills */
.sf-tab-btn:hover,
.boat-tab-btn:hover,
.Storefront-tab-btn:hover,
.sf-category-pill:hover,
.sf-pill:hover,
.sf-filter-btn:hover {
  background: var(--ds-royal-blue) !important;
  color: #ffffff !important;
  border-color: var(--ds-royal-blue) !important;
}

/* 4. Default link hover to Royal Blue */
a:hover {
  color: var(--ds-royal-blue);
}