/*
Theme Name:   Electro Child - GLKomp
Theme URI:    https://glkomp.com/
Description:  GLKomp dark violet-pink child theme for Electro
Author:       GLKomp
Template:     electro
Version:      1.0.0
Text Domain:  electro-child
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@600;700&family=Montserrat:wght@800&display=swap');

:root {
  --glk-bg: #09090b;
  --glk-bg-soft: #0e0e12;
  --glk-panel: #131318;
  --glk-violet: #8900ff;
  --glk-pink: #ff0060;
  --glk-grad: linear-gradient(135deg, var(--glk-violet), var(--glk-pink));
  --glk-text: #f4f2f8;
  --glk-text-dim: #9b97a8;
  --glk-border: rgba(255, 255, 255, 0.1);

  /* Bootstrap / Electro accent variables -> GLKomp pink */
  --bs-primary: var(--glk-pink);
  --bs-ec-primary: var(--glk-pink);
  --bs-warning: var(--glk-pink);
  --bs-yellow: var(--glk-pink);
  --bs-link-color: var(--glk-pink);
  --bs-body-color: var(--glk-text);
  --bs-body-bg: var(--glk-bg);
  --bs-dark: var(--glk-text);
}

/* ---------- base ---------- */
body {
  font-family: 'Inter', sans-serif !important;
  background-color: var(--glk-bg) !important;
  color: var(--glk-text) !important;
}
h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.widget-title,
.woocommerce-loop-product__title {
  font-family: 'Space Grotesk', sans-serif !important;
}
a {
  color: var(--glk-pink);
}
a:hover,
a:focus {
  color: var(--glk-violet);
}

/* ---------- top utility bar ---------- */
.top-bar,
.top-bar-v2,
.top-bar-center {
  background-color: var(--glk-bg) !important;
  color: var(--glk-text-dim) !important;
  border-bottom: 1px solid var(--glk-border) !important;
}
.top-bar a {
  color: var(--glk-text-dim) !important;
}
.top-bar a:hover {
  color: var(--glk-text) !important;
}

/* ---------- header ---------- */
.site-header,
.main-header,
.header-top,
.header-bottom {
  background-color: var(--glk-bg) !important;
  border-color: var(--glk-border) !important;
  color: var(--glk-text) !important;
}
.site-header a,
.main-header a {
  color: var(--glk-text) !important;
}
.site-title a,
.site-header .navbar-brand {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
}

/* ---------- category / departments menu ---------- */
.categories-dropdown-active-large > a,
.widget_product_categories,
.all-departments {
  background: var(--glk-grad) !important;
  color: #fff !important;
}
.header-cats__title,
.widget_product_categories ul,
.site-header .dropdown-menu {
  background-color: var(--glk-panel) !important;
  color: var(--glk-text) !important;
  border-color: var(--glk-border) !important;
}
.site-header .dropdown-menu a,
.widget_product_categories a {
  color: var(--glk-text-dim) !important;
}
.site-header .dropdown-menu a:hover,
.widget_product_categories a:hover {
  color: var(--glk-text) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* ---------- search ---------- */
.site-search input,
.header-search input,
form.woocommerce-product-search input {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--glk-text) !important;
  border-color: var(--glk-border) !important;
}
.site-search button,
.header-search button {
  background: var(--glk-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ---------- buttons ---------- */
.btn-primary,
.button.alt,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.add_to_cart_button,
.single_add_to_cart_button {
  background: var(--glk-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.btn-outline-primary,
.woocommerce a.button.alt.disabled {
  border-color: var(--glk-pink) !important;
  color: var(--glk-pink) !important;
  background: transparent !important;
}

/* ---------- product cards ---------- */
.woocommerce ul.products li.product,
.products .product-inner,
.product-inner {
  background-color: var(--glk-panel) !important;
  border: 1px solid var(--glk-border) !important;
  border-radius: 16px !important;
  overflow: hidden;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product a,
.products .product-inner a {
  color: var(--glk-text) !important;
}
.price,
.price ins {
  color: var(--glk-pink) !important;
}
.price del {
  color: var(--glk-text-dim) !important;
  opacity: 0.6;
}
.onsale,
.featured-label {
  background: var(--glk-grad) !important;
  color: #fff !important;
}

/* ---------- widgets / sidebars ---------- */
.widget,
.sidebar,
.woocommerce-widget-layered-nav,
.cart-collaterals,
.cart_totals {
  background-color: var(--glk-panel) !important;
  color: var(--glk-text) !important;
  border-color: var(--glk-border) !important;
}

/* ---------- forms / inputs ---------- */
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='number'],
input[type='password'],
textarea,
select {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--glk-text) !important;
  border-color: var(--glk-border) !important;
}

/* ---------- footer ---------- */
.footer-widgets,
.site-footer,
.bottom-footer {
  background-color: var(--glk-bg-soft) !important;
  color: var(--glk-text-dim) !important;
  border-color: var(--glk-border) !important;
}
.footer-widgets a,
.site-footer a {
  color: var(--glk-text-dim) !important;
}
.footer-widgets a:hover,
.site-footer a:hover {
  color: var(--glk-text) !important;
}

/* ---------- catch-all for page-builder rows with inline light backgrounds ----------
   WPBakery/Revolution Slider often set background-color directly on the row's
   own markup (inline style or a bg-* utility class), which sits outside our
   theme CSS. !important in an external stylesheet still wins over a *plain*
   inline style, so this reclaims any row/section that wasn't explicitly
   targeted above. */
.vc_row,
.wpb_wrapper,
.wpb_row,
.vc_row-fluid,
section,
.container,
.container-fluid,
.woocommerce-page,
#content,
#primary,
#main {
  background-color: var(--glk-bg) !important;
}
/* ---------- tables / misc containers ---------- */
table,
.shop_table,
.woocommerce-checkout-review-order-table {
  background-color: transparent !important;
  color: var(--glk-text) !important;
  border-color: var(--glk-border) !important;
}
table th,
table td {
  border-color: var(--glk-border) !important;
}