/*
Theme Name: Flatsome Child - Inverter Luxury Dark/Gray
Theme URI: https://inverter.vn
Description: Giao diện Sang trọng Đen-Xám Đẳng cấp cho Điện Máy Tiết Kiệm Điện WooCommerce (Chuẩn Export từ hệ thống mới)
Author: Inverter VN Team & UX Themes
Template: flatsome
Version: 1.1.0
*/

/* ==========================================================================
   1. COLOR PALETTE & LUXURY DARK-GRAY VARIABLES
   ========================================================================== */
:root {
  --primary-color: #0f172a;      /* Slate 900 */
  --primary-hover: #1e293b;      /* Slate 800 */
  --accent-color: #020617;       /* Slate 950 */
  --bg-dark: #090d16;             /* Deep Charcoal */
  --bg-card: #ffffff;
  --border-dark: #1e293b;
  --border-light: #e2e8f0;
  --text-primary: #0f172a;
  --text-muted: #64748b;
  --text-light: #f8fafc;
  --inv-emerald: #10b981;
}

/* Base Body Styling */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: var(--text-primary);
  background-color: #f8fafc;
}

/* ==========================================================================
   2. FLATSOME HEADER & NAVIGATION OVERRIDES (Prestige Deep Navy Header)
   ========================================================================== */
#header .header-top,
#header .header-bottom,
.top-bar,
.nav-dark {
  background-color: #0f172a !important;
  color: #ffffff !important;
  border-bottom: 1px solid #1e293b !important;
}

#header .header-main,
#header .header-main .header-bg-color,
#header .header-main .header-bg-container,
#masthead.header-main {
  background-color: #ffffff !important;
  color: #0f172a !important;
}
#header .header-main {
  border-bottom: 1px solid #e2e8f0 !important;
}

#header .header-top {
  background-color: #020617 !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

#header .logo a {
  color: #0f172a !important;
  font-weight: 900 !important;
  font-size: 24px !important;
  text-decoration: none;
  letter-spacing: -0.5px;
}

#header .logo span,
#header .logo strong {
  color: var(--inv-emerald) !important;
}

#header .nav > li > a {
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  color: #f1f5f9 !important;
  padding: 10px 14px !important;
  border-radius: 6px;
  transition: all 0.2s ease !important;
}

#header .nav > li > a:hover {
  color: var(--inv-emerald) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Style search box in header to look ultra clean */
#header .search-form input[type="search"] {
  background: #0f172a !important;
  border: 1px solid #1e293b !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding-left: 16px !important;
}
#header .search-form input[type="search"]::placeholder {
  color: #94a3b8 !important;
}

#header .header-main .search-form .submit-button,
#header .header-main .search-form .submit-button i {
  color: #ffffff !important;
}

#header .header-main .header-button .button {
  background-color: #0f172a !important;
  color: #ffffff !important;
  border-radius: 99px !important;
}
#header .header-main .header-button .button span {
  color: #ffffff !important;
}
#header .header-main .header-button .button:hover {
  background-color: var(--inv-emerald) !important;
}

#header .header-main .html a,
#header .header-main .html i {
  color: #0f172a !important;
}

/* ==========================================================================
   3. WOOCOMMERCE PRODUCT CARDS & BUTTONS
   ========================================================================== */
.product-small .col-inner,
.product-card,
.box-has-hover {
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: #ffffff !important;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.product-small:hover .col-inner,
.product-card:hover,
.box-has-hover:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 20px 30px -10px rgba(15, 23, 42, 0.12) !important;
  transform: translateY(-4px);
}

.product-small .box-image {
  background-color: #f8fafc;
  padding: 10px;
  border-bottom: 1px solid #f1f5f9;
}

.product-small .box-image img {
  object-fit: contain;
  transition: transform 0.5s ease;
}

.product-small:hover .box-image img {
  transform: scale(1.06);
}

.product-small .title-wrapper p.name a {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1.4;
}

/* Buttons in Luxury Dark Tone */
.button.add_to_cart_button,
.button.checkout,
.single_add_to_cart_button,
.product-small .add-to-cart-button a.button {
  background-color: #0f172a !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  text-transform: uppercase !important;
  border: 1px solid #0f172a !important;
  transition: all 0.2s ease !important;
  font-size: 12px !important;
  padding: 8px 12px !important;
}

.button.add_to_cart_button:hover,
.button.checkout:hover,
.single_add_to_cart_button:hover,
.product-small .add-to-cart-button a.button:hover {
  background-color: var(--inv-emerald) !important;
  border-color: var(--inv-emerald) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25) !important;
}

/* Price Display Styling */
.price,
.woocommerce-Price-amount {
  color: #dc2626 !important;
  font-weight: 900 !important;
}

/* Badge Styling */
.onsale,
.badge-inverter,
.inverter-badge {
  background-color: #0f172a !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
}

/* ==========================================================================
   4. FOOTER & DARK SECTIONS
   ========================================================================== */
.footer-wrapper,
footer,
.absolute-footer {
  background-color: #ffffff !important;
  color: #475569 !important;
  border-top: 1px solid #e2e8f0 !important;
}

footer h3, footer h4, footer strong, footer .widget-title {
  color: #0f172a !important;
}

footer a {
  color: #0f172a !important;
}

footer a:hover {
  color: var(--inv-emerald) !important;
}

/* Pill Buttons Navigation */
.inv-pill-btn {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.inv-pill-btn:hover {
  background: #0f172a;
  color: #ffffff !important;
  border-color: #0f172a;
  transform: translateY(-1px);
}
.inv-pill-btn.primary-pill {
  background: var(--inv-emerald);
  color: #ffffff !important;
  border-color: var(--inv-emerald);
}
.inv-pill-btn.primary-pill:hover {
  background: #059669;
}

/* Benefit Icon Box */
.inv-icon-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.inv-icon-box:hover {
  border-color: #0f172a;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
}
.inv-icon-box-icon {
  width: 44px; height: 44px; background: #f8fafc; color: #0f172a; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.05);
}