/*
Theme Name: Bw Zagg
Theme URI: https://zagg.bzotech.com/intro/
Author: BZOTech
Author URI: https://bzotech.com/
Description: With Zagg WordPress template for WooCommerce, you'll elevate your online store by showcasing cutting-edge electronics and phone accessories with style.
Version: 1.4.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tested up to: 6.6
Requires PHP: 7.4
Copyright: © 2024 BZOTech Theme. All rights reserved.
Tags: custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, post-formats, sticky-post, threaded-comments, block-styles, blog, news
Text Domain: bw-zagg
*/
:root {
    --bzo-main-color: #374bff !important;
    --bzo-main-color-mix-black: #0c2954 !important;
    --bzo-main-color-mix-white: #307eef !important;
    --bzo-main-color-mix-white2: #a4c9ff !important;
    --bzo-main-color-mix-white3: #e8f1ff !important;
    --bzo-main-color2: #374bff !important;
    --bzo-gray-color: #454545 !important;
    --bzo-border-color: #d9d9d9 !important;
    --bzo-body-background: #ffffff !important;
    --bzo-container-width: 1540px !important;
    --bzo-preload-background: #0c2954 !important;
    --bzo-gutter: 15px !important;
    --bzo-gutter-minus: -15px !important;
    --bzo-letter-spacing-body: 0.08px !important;
    --bzo-body_typo-font-family: Rubik !important;
    --bzo-body_typo-google: 1;
    --bzo-body_typo-font-size: 16px;
    --bzo-body_typo-line-height: 1.5;
    --bzo-body_typo-color: #080808 !important;
    --bzo-title_typo-font-family: Rubik !important;
    --bzo-title_typo-google: 1 !important;
    --bzo-title_typo-color: #080808 !important;
}
/* ====== Global Hover Override (uses BZO vars) ====== */
/* اختار لون الهوفر: إمّا نفس لون الثيم أو لون مخصّص */
:root {
  /* لو عايز تعتمد لون الثيم الأساسي */
  --hover-color: var(--bzo-main-color, #374bff) !important;
  /* أو فعّل السطر ده بدل اللي فوق لو عايز لون مختلف */
  /* --hover-color: #0ea5e9 !important; */
}

/* 1) روابط ونصوص عامة */
a:hover,
a:focus-visible,
[role="link"]:hover,
[role="button"]:hover,
button.link-style:hover,
.entry-content a:hover,
.wp-block a:hover,
.widget a:hover,
.comment-content a:hover,
nav a:hover,
.menu a:hover,
.main-navigation a:hover,
.site-header a:hover,
.site-footer a:hover {
  color: var(--hover-color) !important;
  text-decoration-color: var(--hover-color) !important;
  transition: color .15s ease, text-decoration-color .15s ease !important;
}

/* 2) عناصر شائعة في ثيمات BZO (لو عندك كلاس مختلفة سيبه، الكود ده عام) */
[class*="bzo"] a:hover,
[class*="bzo"] .menu a:hover,
[class*="bzo"] .icon:hover,
[class*="bzo"] i:hover {
  color: var(--hover-color) !important;
  border-color: var(--hover-color) !important;
}

/* 3) أيقونات فونت (Font Awesome / Dashicons) */
.dashicons:hover,
[class*="dashicons-"]:hover,
.fa:hover, .fas:hover, .far:hover, .fal:hover, .fab:hover,
.icon:hover, [class*="icon-"]:hover, i[class*="icon-"]:hover {
  color: var(--hover-color) !important;
  transition: color .15s ease !important;
}

/* 4) SVG داخل اللينكات والأزرار – نجبرها تتبع currentColor */
a:hover svg,
button:hover svg,
.menu a:hover svg,
.site-header a:hover svg,
.site-footer a:hover svg,
[class*="bzo"] a:hover svg {
  color: var(--hover-color) !important;
}
a:hover svg *,
button:hover svg *,
.menu a:hover svg *,
.site-header a:hover svg *,
.site-footer a:hover svg *,
[class*="bzo"] a:hover svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* 5) لو الـ SVG فيه قيم inline stubborn */
a:hover svg [fill],
a:hover svg [stroke],
button:hover svg [fill],
button:hover svg [stroke],
[class*="bzo"] a:hover svg [fill],
[class*="bzo"] a:hover svg [stroke] {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* 6) Gutenberg و Woo/Elementor شائع */
.wp-block-social-links a:hover,
.wp-block-button__link:hover,
.wp-block-navigation a:hover,
.wp-block-categories a:hover,
.wp-block-tag-cloud a:hover,
.woocommerce a:hover,
.elementor a:hover,
.elementor-button:hover,
.elementor-icon:hover,
.elementor-widget-icon-list .elementor-icon-list-item:hover .elementor-icon-list-text,
.elementor-widget-icon-list .elementor-icon-list-item:hover .elementor-icon {
  color: var(--hover-color) !important;
  border-color: var(--hover-color) !important;
}
.elementor a:hover svg *,
.elementor .elementor-icon:hover svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* 7) سلاسة ومنع فليكر */
@media (prefers-reduced-motion: no-preference) {
  a, button, [role="button"], [role="link"], .icon, svg, .menu a {
    transition: color .15s ease, border-color .15s ease, fill .15s ease, stroke .15s ease !important;
  }
}