/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme - Na3om Brand
 Author:       Na3om
 Author URI:   https://na3om.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* ==========================================================================
   Na3om Brand Identity Overrides
   ========================================================================== */

/* Google Fonts - Cairo (Arabic-optimized) */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap');

/* ---------- Brand Colors ---------- */
:root {
  /* Primary - Na3om Navy */
  --wd-primary-color: #1A2B4C;

  /* Secondary/Alternative - Coral Softness */
  --wd-alternative-color: #F07A7A;

  /* Typography */
  --wd-text-font: 'Cairo', sans-serif;
  --wd-text-font-weight: 400;
  --wd-text-color: #4B5563;
  --wd-text-font-size: 15px;

  --wd-title-font: 'Cairo', sans-serif;
  --wd-title-font-weight: 700;
  --wd-title-color: #1F2937;

  --wd-entities-title-font: 'Cairo', sans-serif;
  --wd-entities-title-font-weight: 600;
  --wd-entities-title-color: #1F2937;
  --wd-entities-title-color-hover: #1A2B4C;

  --wd-alternative-font: 'Cairo', sans-serif;

  --wd-widget-title-font: 'Cairo', sans-serif;
  --wd-widget-title-font-weight: 700;
  --wd-widget-title-color: #1F2937;
  --wd-widget-title-font-size: 16px;
  --wd-widget-title-transform: none;

  --wd-header-el-font: 'Cairo', sans-serif;
  --wd-header-el-font-weight: 600;
  --wd-header-el-transform: none;
  --wd-header-el-font-size: 14px;

  /* Links */
  --wd-link-color: #1F2937;
  --wd-link-color-hover: #1A2B4C;

  /* Buttons - Accent (Primary Action) */
  --btn-accented-bgcolor: #1A2B4C;
  --btn-accented-bgcolor-hover: #0F1A2E;
  --btn-accented-color: #FFFFFF;
  --btn-accented-color-hover: #FFFFFF;
  --btn-accented-brd-radius: 8px;
  --btn-accented-box-shadow: none;
  --btn-accented-box-shadow-hover: 0 4px 12px rgba(26, 43, 76, 0.3);
  --btn-accented-bottom-active: 0px;

  /* Buttons - Default (Secondary Action) */
  --btn-default-bgcolor: #F3F4F6;
  --btn-default-bgcolor-hover: #E5E7EB;
  --btn-default-color: #1F2937;
  --btn-default-color-hover: #1A2B4C;
  --btn-default-brd-radius: 8px;
  --btn-default-box-shadow: none;
  --btn-default-box-shadow-hover: none;
  --btn-default-box-shadow-active: none;
  --btn-default-bottom: 0px;

  /* Forms */
  --wd-form-brd-width: 1px;
  --wd-form-brd-radius: 8px;
  --wd-form-brd-color: rgba(0, 0, 0, 0.1);
  --wd-form-brd-color-focus: #1A2B4C;

  /* Layout */
  --wd-brd-radius: 8px;
  --wd-container-w: 1280px;

  /* Notices */
  --notices-success-bg: #10B981;
  --notices-success-color: #FFFFFF;
  --notices-warning-bg: #F59E0B;
  --notices-warning-color: #FFFFFF;
}

/* ---------- Global Refinements ---------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Coral accent for sale badges and highlights */
.onsale,
.product-label.onsale {
  background-color: #F07A7A !important;
  color: #FFFFFF !important;
  border-radius: 4px;
}

/* Product card hover accent */
.wd-product:hover .product-element-bottom a.button,
.wd-product:hover .add_to_cart_button {
  background-color: #1A2B4C;
  color: #FFFFFF;
}

/* Star ratings in coral */
.star-rating span::before,
.star-rating::before {
  color: #F07A7A !important;
}

/* Price styling */
.price ins,
.price > .amount {
  color: #1A2B4C;
  font-weight: 700;
}

.price del {
  color: #9CA3AF;
}

/* WooCommerce buttons */
.woocommerce .button.alt,
.woocommerce .button.checkout,
.woocommerce #respond input#submit.alt {
  background-color: #1A2B4C !important;
  border-radius: 8px;
}

.woocommerce .button.alt:hover,
.woocommerce .button.checkout:hover {
  background-color: #0F1A2E !important;
  box-shadow: 0 4px 12px rgba(26, 43, 76, 0.3);
}

/* Breadcrumb styling */
.breadcrumbs .current {
  color: #1A2B4C;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #F3F4F6;
}

::-webkit-scrollbar-thumb {
  background: #1A2B4C;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #0F1A2E;
}