/* ============================================
   Navio Smart Home — Clean & Safe Theme
   Light, blue accents, minimal changes
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root {
  --navio-blue: #1B2A6B;
  --navio-blue-light: #5B8DEF;
  --navio-blue-soft: #EEF3FE;
  --navio-text: #0A0A0A;
  --navio-text-muted: #6B7280;
  --navio-border: #EAEAEA;
  --navio-surface: #FAFAFA;
}

/* === Font only — no layout changes === */
body, html, p, span, h1, h2, h3, h4, h5, h6, a, button, input, textarea, select, label, li, td, th {
  font-family: 'IBM Plex Sans Arabic', -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* === Headings — color only === */
h1, h2, h3, h4, h5, h6 {
  color: var(--navio-text) !important;
  font-weight: 600 !important;
}

/* === Links === */
a {
  color: var(--navio-blue) !important;
  transition: color 0.2s ease !important;
}

a:hover {
  color: var(--navio-blue-light) !important;
}

/* === Primary buttons only (specific Salla classes) === */
.btn-primary,
.s-button-btn,
button[type="submit"],
.add-to-cart-btn,
.checkout-btn {
  background-color: var(--navio-blue) !important;
  border-color: var(--navio-blue) !important;
  color: #FFFFFF !important;
  transition: all 0.2s ease !important;
}

.btn-primary:hover,
.s-button-btn:hover,
button[type="submit"]:hover,
.add-to-cart-btn:hover,
.checkout-btn:hover {
  background-color: #142057 !important;
  border-color: #142057 !important;
  transform: translateY(-1px);
}

/* === Price color === */
.price,
.product-price,
[class*="price"] {
  color: var(--navio-blue) !important;
  font-weight: 600 !important;
}

/* === Cart badge — red, clean === */
.cart-count,
.badge-counter,
[class*="cart-badge"] {
  background-color: #DC2626 !important;
  color: #FFFFFF !important;
}

/* === Form focus state === */
input:focus, textarea:focus, select:focus {
  border-color: var(--navio-blue-light) !important;
  box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.15) !important;
  outline: none !important;
}

/* === Selection === */
::selection {
  background: var(--navio-blue);
  color: #FFFFFF;
}

/* === Smooth scroll === */
html {
  scroll-behavior: smooth !important;
}