/*
Theme Name:   SirKaspi3D Child
Theme URI:    https://www.sirkaspi3d.com
Description:  Astra child theme for SirKaspi3D — dark technical aesthetic with electric cyan accent.
Author:       SirKaspi
Author URI:   https://www.sirkaspi3d.com
Template:     astra
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  sirkaspi3d-child
*/

/* ============================================================
   SIRKASPI3D — CUSTOM THEME STYLES
   Loaded after Astra's own stylesheet. These rules override
   Astra defaults to apply the SirKaspi3D dark technical look.
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  --sk-bg:            #0A0A0C;
  --sk-surface:       #111115;
  --sk-surface-2:     #18181D;
  --sk-border:        #252530;
  --sk-text:          #E8E8ED;
  --sk-text-muted:    #7A7A8C;
  --sk-text-faint:    #3A3A4A;
  /* Logo gradient: yellow → coral → magenta → purple */
  --sk-accent:        #E8409A;
  --sk-accent-hover:  #d42e87;
  --sk-accent-glow:   rgba(232, 64, 154, 0.18);
  --sk-accent-ink:    #ffffff;
  --sk-accent-alt:    #A855F7;
  --sk-accent-warm:   #F0616B;
  --sk-accent-gold:   #F5A623;
  --sk-gradient:      linear-gradient(90deg, #F5A623 0%, #F0616B 30%, #E8409A 65%, #A855F7 100%);

  --sk-font-display:  'Cabinet Grotesk', 'Helvetica Neue', sans-serif;
  --sk-font-body:     'Satoshi', 'Inter', sans-serif;

  --sk-radius:        4px;
  --sk-transition:    180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Fonts ---------- */
@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@700,800&f[]=satoshi@400,500&display=swap');

/* ---------- Base ---------- */
body {
  background-color: var(--sk-bg) !important;
  color: var(--sk-text) !important;
  font-family: var(--sk-font-body) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
  font-family: var(--sk-font-display) !important;
  font-weight: 800 !important;
  color: var(--sk-text) !important;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

a {
  color: var(--sk-accent);
  transition: color var(--sk-transition);
}
a:hover { color: var(--sk-accent-hover); }

p, li, td, th {
  color: var(--sk-text);
}

/* ---------- Header / Navigation ---------- */
#masthead,
.site-header,
.ast-primary-header-bar,
.ast-above-header-bar,
.ast-below-header-bar {
  background-color: var(--sk-surface) !important;
  border-bottom: 1px solid var(--sk-border) !important;
}

/* Nav links */
.main-navigation a,
.ast-primary-menu > li > a,
#ast-hf-menu-1 .menu-item > a {
  color: var(--sk-text-muted) !important;
  font-family: var(--sk-font-body) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  transition: color var(--sk-transition) !important;
}
.main-navigation a:hover,
.ast-primary-menu > li > a:hover,
.ast-primary-menu > li.current-menu-item > a {
  color: var(--sk-text) !important;
  background: transparent !important;
}

/* Site logo / title */
.site-title a,
.ast-site-identity .site-title a {
  color: var(--sk-text) !important;
  font-family: var(--sk-font-display) !important;
  font-weight: 800 !important;
}

/* ---------- Buttons ---------- */
.ast-button,
.button,
button,
input[type="submit"],
input[type="button"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
  background: var(--sk-gradient) !important;
  color: var(--sk-accent-ink) !important;
  border: none !important;
  border-radius: var(--sk-radius) !important;
  font-family: var(--sk-font-body) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 0.75rem 1.5rem !important;
  transition: background-color var(--sk-transition), box-shadow var(--sk-transition) !important;
  cursor: pointer;
}
.ast-button:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--sk-accent-hover) !important;
  box-shadow: 0 0 20px var(--sk-accent-glow) !important;
  color: var(--sk-accent-ink) !important;
}

/* Ghost / outline button variant (add class "btn-ghost" in Astra custom button) */
.btn-ghost,
.woocommerce a.button.btn-ghost {
  background-color: transparent !important;
  color: var(--sk-text) !important;
  border: 1px solid var(--sk-border) !important;
}
.btn-ghost:hover {
  border-color: var(--sk-accent) !important;
  color: var(--sk-accent) !important;
  box-shadow: none !important;
}

/* ---------- Page / Content Areas ---------- */
.site-content,
.entry-content,
.ast-container,
#content,
.content-area {
  background-color: var(--sk-bg) !important;
}

/* Cards / boxes */
.ast-card,
.widget,
.wp-block-group,
.wp-block-cover {
  background-color: var(--sk-surface) !important;
  border: 1px solid var(--sk-border) !important;
  border-radius: var(--sk-radius) !important;
}

/* ---------- WooCommerce ---------- */

/* Shop / archive page background */
.woocommerce,
.woocommerce-page,
.woocommerce-shop {
  background-color: var(--sk-bg) !important;
}

/* Product cards */
.woocommerce ul.products li.product,
.wc-block-grid__product {
  background-color: var(--sk-surface) !important;
  border: 1px solid var(--sk-border) !important;
  border-radius: var(--sk-radius) !important;
  padding: 1.25rem !important;
  transition: border-color var(--sk-transition), box-shadow var(--sk-transition) !important;
}
.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
  border-color: var(--sk-accent) !important;
  box-shadow: 0 0 24px var(--sk-accent-glow) !important;
}

/* Product titles */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
  color: var(--sk-text) !important;
  font-family: var(--sk-font-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}

/* Product prices */
.woocommerce ul.products li.product .price,
.woocommerce .price,
.wc-block-grid__product-price {
  color: var(--sk-accent) !important;
  font-weight: 600 !important;
}

/* Product page */
.woocommerce div.product .product_title {
  font-family: var(--sk-font-display) !important;
  color: var(--sk-text) !important;
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
  font-weight: 800 !important;
}

.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-tabs .panel {
  color: var(--sk-text-muted) !important;
}

/* Tabs on product page */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--sk-border) !important;
  background: transparent !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: 1px solid transparent !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-color: var(--sk-border) !important;
  border-bottom-color: var(--sk-bg) !important;
  background: var(--sk-surface) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: var(--sk-text-muted) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--sk-text) !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
  background: var(--sk-surface) !important;
  border: 1px solid var(--sk-border) !important;
  border-top: none !important;
}

/* Cart & Checkout */
.woocommerce-cart table.cart,
.woocommerce-checkout .woocommerce {
  background-color: var(--sk-bg) !important;
}
.woocommerce table.shop_table {
  background: var(--sk-surface) !important;
  border: 1px solid var(--sk-border) !important;
  color: var(--sk-text) !important;
}
.woocommerce table.shop_table th {
  color: var(--sk-text-muted) !important;
  border-bottom: 1px solid var(--sk-border) !important;
  font-family: var(--sk-font-body) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
.woocommerce table.shop_table td {
  border-bottom: 1px solid var(--sk-border) !important;
}

/* Order total */
.woocommerce .cart_totals h2,
.woocommerce .order-total td {
  color: var(--sk-text) !important;
}
.woocommerce .order-total .amount {
  color: var(--sk-accent) !important;
}

/* Form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
select {
  background-color: var(--sk-surface-2, #18181D) !important;
  border: 1px solid var(--sk-border) !important;
  color: var(--sk-text) !important;
  border-radius: var(--sk-radius) !important;
  padding: 0.65rem 0.875rem !important;
  font-family: var(--sk-font-body) !important;
  transition: border-color var(--sk-transition) !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus,
.woocommerce form .form-row input.input-text:focus {
  border-color: var(--sk-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--sk-accent-glow) !important;
}

/* Star ratings */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
  color: var(--sk-accent) !important;
}

/* Sale badge */
.woocommerce span.onsale {
  background-color: var(--sk-accent) !important;
  color: var(--sk-accent-ink) !important;
  border-radius: var(--sk-radius) !important;
  font-family: var(--sk-font-body) !important;
  font-weight: 600 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.1em !important;
}

/* ---------- Footer ---------- */
#colophon,
.site-footer,
.ast-footer-overlay,
footer.site-footer {
  background-color: var(--sk-surface) !important;
  border-top: 1px solid var(--sk-border) !important;
  color: var(--sk-text-muted) !important;
}
.site-footer a {
  color: var(--sk-text-muted) !important;
}
.site-footer a:hover {
  color: var(--sk-accent) !important;
}
.ast-footer-copyright {
  color: var(--sk-text-faint) !important;
  font-size: 0.8rem !important;
}

/* ---------- Sidebar / Widgets ---------- */
.widget-title,
.widgettitle {
  font-family: var(--sk-font-display) !important;
  color: var(--sk-text) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--sk-border) !important;
  padding-bottom: 0.75rem !important;
  margin-bottom: 1rem !important;
}
.widget {
  background: transparent !important;
  border: none !important;
}

/* ---------- Breadcrumbs ---------- */
.ast-breadcrumbs,
.woocommerce-breadcrumb {
  color: var(--sk-text-faint) !important;
  font-size: 0.8rem !important;
}
.woocommerce-breadcrumb a {
  color: var(--sk-text-muted) !important;
}
.woocommerce-breadcrumb a:hover {
  color: var(--sk-accent) !important;
}

/* ---------- Notices & Messages ---------- */
.woocommerce-message,
.woocommerce-info {
  background: var(--sk-surface) !important;
  border-top-color: var(--sk-accent) !important;
  color: var(--sk-text) !important;
}
.woocommerce-error {
  background: var(--sk-surface) !important;
  border-top-color: #FF4C4C !important;
  color: var(--sk-text) !important;
}

/* ---------- Pagination ---------- */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  background: var(--sk-surface) !important;
  border: 1px solid var(--sk-border) !important;
  color: var(--sk-text-muted) !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--sk-accent) !important;
  color: var(--sk-accent-ink) !important;
  border-color: var(--sk-accent) !important;
}

/* ---------- Scrollbar (Webkit) ---------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--sk-bg); }
::-webkit-scrollbar-thumb { background: var(--sk-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--sk-accent); }

/* ---------- Selection ---------- */
::selection {
  background: var(--sk-accent-glow);
  color: var(--sk-text);
}