@charset "UTF-8";
/*!
* Theme Name: technocrat child theme
* WooCommerce Dark mode of the theme 
* Description: Custom styles for the Technocrat Theme
* Author: kodx.dev
* Version: 1.8.0
*/

/* ===========================================================
   Root Dark Variables
   =========================================================== */
:root.darkmode {
  /* Primary buttons / accents (GLOBAL) */
  --color-primary: #6ead00;
  --color-secondary: #f1f1f1;
  --color-accent: #6ead00;
  --body-font-weight: 300;

  /* Text (GLOBAL) */
  --color-text-base: #f1f1f1;
  --color-text-muted: #a39f9f;
  --color-pure: #101010;

  /* Backgrounds (GLOBAL) */
  --color-body-bg: #101010;
  --color-background-main: #1a1a1b;
  --color-background-alt: #ffffff12;
  --color-background-soft: #ffffff12;

  /* Highlights / surfaces (GLOBAL) */
  --color-highlight: #1f1f1f;
  --color-highlight-soft: #202123;
  --color-highlight-vivid: #191919;

  /* WooCommerce accents */
  --woo-color-accent: #c90032;
  --woo-color-accent-dark: #2b2b2b;
  --woo-color-font-discount-tag: #ffffff;

  /* Prices */
  --woo-color-price: #f1f1f1;
  --woo-color-price-del: #b1b1b1;

  /* Info boxes */
  --woo-color-info-bg: #202123;
  --woo-color-info-text: #f1f1f1;

  /* Price slider */
  --woo-price-slider-filter: #c90032;
  --woo-price-slider-filter-mask: #2b2b2b;

  /* Sale badge */
  --woo-color-sale-circle: #c90032;

  /* Inputs */
  --woo-color-input-text: #ffffff;
  --woo-color-input-bg: #1f1f1f;
  --woo-color-input-border: #3a3a3a;
  --woo-color-input-hover-bg: #393939;
  --woo-color-input-hover-text: #f1f1f1;

  /* Product box shadow + dividers */
  --woo-product-boxshadow: #1f1f1f;
  --woo-color-divider: #2b2b2b;

  /* Links */
  --woo-color-links-a: var(--color-primary);
  --woo-color-links-hover: var(--color-primary);

  /* Breadcrumbs */
  --woo-color-breadcrumb-text: var(--color-text-muted);

  /* Checkout messages */
  --woo-color-checkout-msg-bg: var(--color-highlight-soft);

  /* Buttons */
  --woo-button-bg: var(--color-secondary);
  --woo-button-bg-hover: var(--color-primary);
  --woo-button-text: var(--color-pure);
  --woo-button-text-hover: var(--color-pure);

  /* Secondary Buttons */
  --woo-button-alt-bg: var(--color-highlight);
  --woo-button-alt-bg-hover: var(--color-highlight-vivid);
  --woo-button-alt-text: var(--color-secondary);
  --woo-button-alt-text-hover: var(--color-secondary);

  /* Badges */
  --woo-badge-bg: var(--woo-color-accent);
  --woo-badge-text: var(--woo-color-font-discount-tag);

  /* Notices */
  --woo-notice-info-bg: var(--color-highlight-soft);
  --woo-notice-info-text: var(--color-secondary);

  --woo-notice-success-bg: #1f3d1f;
  --woo-notice-success-text: #9aff9a;

  --woo-notice-error-bg: #3a1a1a;
  --woo-notice-error-text: #ffb3b3;

  /* Product Cards */
  --woo-card-bg: #0b0d17;
  --woo-card-bg-hover: #0f1120;
  --woo-card-border: rgba(255, 255, 255, 0.07);
  --woo-card-shadow: var(--woo-product-boxshadow);

  /* Softer dividers so they don't look like hard gray slabs */
  --woo-color-divider: rgba(255, 255, 255, 0.07);
  --woo-color-input-bg: #0f1120;
  --woo-color-input-border: rgba(255, 255, 255, 0.12);

  /* Pagination */
  --woo-pagination-bg: var(--color-highlight);
  --woo-pagination-bg-hover: var(--color-primary);
  --woo-pagination-text: var(--color-secondary);
  --woo-pagination-text-hover: var(--color-pure);
}

/* Keep checkout inputs readable in dark mode even if plugin styles load later. */
html.darkmode .woocommerce form .form-row .input-text,
html.darkmode .woocommerce form .form-row select,
html.darkmode .woocommerce form .form-row textarea,
html.darkmode .select2-dropdown,
html.darkmode .select2-results__option,
html.darkmode .select2-container--default .select2-selection--single {
  background-color: var(--woo-color-input-bg) !important;
  color: var(--woo-color-input-text) !important;
  border-color: var(--woo-color-input-border) !important;
}

/* WooCommerce Checkout Block fields (if block checkout is used). */
html.darkmode .wc-block-components-text-input input,
html.darkmode .wc-block-components-textarea textarea,
html.darkmode .wc-block-components-select select,
html.darkmode
  .wc-block-components-combobox
  .wc-block-components-combobox-control
  input {
  background-color: var(--woo-color-input-bg) !important;
  color: var(--woo-color-input-text) !important;
  border-color: var(--woo-color-input-border) !important;
}

/* Block checkout textarea wrapper — hardcoded #fff in WC block stylesheet */
html.darkmode .wc-block-components-textarea {
  background-color: var(--woo-color-input-bg) !important;
  color: var(--woo-color-input-text) !important;
  border-color: var(--woo-color-input-border) !important;
}

/* Block checkout select — hardcoded #fff bg and dark text in WC block stylesheet */
html.darkmode .wc-blocks-components-select .wc-blocks-components-select__select,
html.darkmode .wc-blocks-components-select__select {
  background-color: var(--woo-color-input-bg) !important;
  color: var(--woo-color-input-text) !important;
  border-color: var(--woo-color-input-border) !important;
}

/* Checkout fields should use the same darker textarea token in dark mode. */
html.darkmode .woocommerce-checkout form .form-row .input-text,
html.darkmode .woocommerce-checkout form .form-row select,
html.darkmode .woocommerce-checkout form .form-row textarea,
html.darkmode .woocommerce-checkout .select2-dropdown,
html.darkmode .woocommerce-checkout .select2-results__option,
html.darkmode
  .woocommerce-checkout
  .select2-container--default
  .select2-selection--single,
html.darkmode .wc-block-components-form .wc-block-components-text-input input,
html.darkmode .wc-block-components-form .wc-block-components-textarea textarea,
html.darkmode .wc-block-components-form .wc-block-components-select select,
html.darkmode
  .wc-block-components-form
  .wc-block-components-combobox-control
  input {
  background-color: var(--body-textarea) !important;
}

html.darkmode .woocommerce-checkout form .form-row .input-text:focus,
html.darkmode .woocommerce-checkout form .form-row select:focus,
html.darkmode .woocommerce-checkout form .form-row textarea:focus,
html.darkmode
  .wc-block-components-form
  .wc-block-components-text-input
  input:focus,
html.darkmode
  .wc-block-components-form
  .wc-block-components-textarea
  textarea:focus,
html.darkmode
  .wc-block-components-form
  .wc-block-components-select
  select:focus,
html.darkmode
  .wc-block-components-form
  .wc-block-components-combobox-control
  input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary);
  border-color: var(--color-primary) !important;
}

/* Override normalize.css `mark, ins { background: #fff9c0 }` for all
   WooCommerce price ins elements. The more-specific widget/badge rules
   with !important still win over this. */
html.darkmode .woocommerce ins,
html.darkmode .woocommerce mark {
  background: transparent;
  background-color: transparent;
}

/* Cart table — transparent so gradient shows under it */
html.darkmode .woocommerce-cart table.shop_table,
html.darkmode .woocommerce table.shop_table {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

html.darkmode table.shop_table th,
html.darkmode table.shop_table td {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* Bump sale price size so it feels prominent */
html.darkmode .woocommerce ul.products li.product .price ins,
html.darkmode
  .woocommerce
  ul.products
  li.product
  .price
  ins
  .woocommerce-Price-amount,
html.darkmode .woocommerce-cart table.shop_table .amount,
html.darkmode
  .woocommerce-cart
  table.shop_table
  td.product-total
  .woocommerce-Price-amount {
  font-size: 1.1em;
}

/* Cart totals heading */
html.darkmode .wc-block-cart__sidebar h2,
html.darkmode .wc-block-cart__sidebar .wc-block-components-panel__button {
  color: var(--color-text-base);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* Estimated total row — make value pop */
html.darkmode
  .wc-block-components-totals-item--total
  .wc-block-components-totals-item__value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-base);
}

/* Coupons: compact the form row */
html.darkmode .wc-block-components-totals-coupon__content,
.wc-block-components-totals-coupon__content {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 0.5rem;
}

html.darkmode .wc-block-components-totals-coupon__content input,
.wc-block-components-totals-coupon__content input {
  flex: 1;
  min-height: 40px !important;
  font-size: 0.9rem;
  padding: 0 0.75rem !important;
  border-radius: 6px;
}

html.darkmode
  .wc-block-components-totals-coupon__content
  .wc-block-components-button,
.wc-block-components-totals-coupon__content .wc-block-components-button {
  height: 40px !important;
  min-height: unset !important;
  padding: 0 1rem !important;
  font-size: 0.875rem;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 40px !important;
}

/* Proceed to Checkout button — solid primary */
html.darkmode .wc-block-cart__submit-container .wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-cart__submit-button {
  background: var(--color-primary) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.01em;
  width: 100%;
  padding: 0.85rem 1.5rem;
  font-size: 1rem;
  transition: filter 0.2s ease;
}

html.darkmode
  .wc-block-cart__submit-container
  .wc-block-cart__submit-button:hover,
.wc-block-cart__submit-container .wc-block-cart__submit-button:hover {
  filter: brightness(1.08);
}