/* ================================================================
   AVENGERHUB COMPONENTS v2.0
   Glassmorphism cards, animated buttons, WooCommerce dark overrides
   ================================================================ */

/* ── RESET & BASE ────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-color: var(--av-color-bg);
  color: var(--av-color-text);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

/* ── CONTAINER ───────────────────────────────────────────────── */

.container,
.av-container {
  max-width: var(--av-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--av-spacing-md);
  padding-right: var(--av-spacing-md);
}

@media (min-width: 768px) {
  .container,
  .av-container {
    padding-left: var(--av-spacing-xl);
    padding-right: var(--av-spacing-xl);
  }
}

.av-container-wide {
  max-width: var(--av-container-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--av-spacing-md);
  padding-right: var(--av-spacing-md);
}

/* ── GLASS CARD ──────────────────────────────────────────────── */

.av-glass {
  background: var(--av-glass-bg);
  backdrop-filter: var(--av-glass-blur);
  -webkit-backdrop-filter: var(--av-glass-blur);
  border: 1px solid var(--av-glass-border);
  border-radius: var(--av-radius-lg);
}

.av-card {
  background: var(--av-color-surface);
  border: 1px solid var(--av-color-border);
  border-radius: var(--av-radius-lg);
  padding: var(--av-spacing-lg);
  transition: var(--av-transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.av-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--av-gradient-card);
  opacity: 0;
  transition: opacity var(--av-duration-normal) var(--av-ease-out);
  pointer-events: none;
  border-radius: inherit;
}

.av-card:hover {
  border-color: var(--av-color-border-hover);
  box-shadow: var(--av-shadow-glow);
  transform: translateY(-3px);
}

.av-card:hover::before {
  opacity: 1;
}

/* ── BUTTONS ─────────────────────────────────────────────────── */

.av-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--av-spacing-sm);
  min-height: 48px;
  padding: 12px 28px;
  font-family: var(--av-font-primary);
  font-size: var(--av-text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: var(--av-radius-md);
  cursor: pointer;
  transition: var(--av-transition);
  position: relative;
  overflow: hidden;
}

.av-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.5s var(--av-ease-out);
}

.av-btn:hover::after {
  transform: translateX(100%);
}

/* Primary — green CTA */
.av-btn-primary,
.av-btn--cta {
  background: var(--av-gradient-cta);
  color: #fff;
  box-shadow: var(--av-shadow-glow-cta);
}

.av-btn-primary:hover,
.av-btn--cta:hover {
  box-shadow: 0 0 30px var(--av-color-cta-glow);
  transform: translateY(-2px);
  color: #fff;
}

/* Secondary — indigo outline */
.av-btn-secondary {
  background: transparent;
  color: var(--av-color-accent);
  border: 2px solid var(--av-color-accent);
}

.av-btn-secondary:hover {
  background: var(--av-color-accent-soft);
  border-color: var(--av-color-accent-hover);
  box-shadow: var(--av-shadow-glow);
  color: var(--av-color-accent-hover);
}

/* Ghost — no border, subtle hover */
.av-btn-ghost {
  background: transparent;
  color: var(--av-color-text-soft);
}

.av-btn-ghost:hover {
  background: var(--av-color-accent-soft);
  color: var(--av-color-heading);
}

/* ── BADGES ──────────────────────────────────────────────────── */

.av-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: var(--av-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--av-radius-full);
  line-height: 1;
}

.av-badge--accent {
  background: var(--av-color-accent-soft);
  color: var(--av-color-accent);
}

.av-badge--sale {
  background: var(--av-color-sale-badge);
  color: #fff;
}

.av-badge--new {
  background: var(--av-color-cta);
  color: #fff;
}

/* ── WOOCOMMERCE PRICE OVERRIDES ────────────────────────────── */

.woocommerce .price,
.woocommerce-Price-amount,
.woocommerce-Price-amount.amount {
  color: var(--av-color-price);
  font-family: var(--av-font-mono);
  font-size: var(--av-text-lg);
  font-weight: 700;
}

.woocommerce del .woocommerce-Price-amount,
.woocommerce del span.woocommerce-Price-amount {
  color: var(--av-color-price-original);
  opacity: 1;
  font-size: var(--av-text-sm);
}

.woocommerce ins .woocommerce-Price-amount {
  color: var(--av-color-price);
  text-decoration: none;
}

/* ── WOOCOMMERCE BUTTON OVERRIDES ───────────────────────────── */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .cart .button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--av-spacing-sm);
  background: var(--av-gradient-cta) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--av-radius-md) !important;
  min-height: 48px;
  padding: 12px 24px;
  font-family: var(--av-font-primary);
  font-weight: 600;
  font-size: var(--av-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: var(--av-transition);
  box-shadow: var(--av-shadow-glow-cta);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover {
  box-shadow: 0 0 30px var(--av-color-cta-glow) !important;
  transform: translateY(-2px);
}

/* Alternative (secondary) WC buttons */
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--av-gradient-accent) !important;
  box-shadow: var(--av-shadow-glow) !important;
}

/* ── WOOCOMMERCE FORM INPUTS ────────────────────────────────── */

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce input[type="search"],
.woocommerce textarea,
.woocommerce select,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="number"],
.woocommerce-page input[type="password"],
.woocommerce-page input[type="search"],
.woocommerce-page textarea,
.woocommerce-page select {
  background-color: var(--av-color-surface) !important;
  color: var(--av-color-text) !important;
  border: 1px solid var(--av-color-border) !important;
  border-radius: var(--av-radius-md) !important;
  padding: 12px 16px;
  font-family: var(--av-font-primary);
  font-size: var(--av-text-base);
  transition: var(--av-transition);
}

.woocommerce input::placeholder,
.woocommerce-page input::placeholder,
.woocommerce textarea::placeholder,
.woocommerce-page textarea::placeholder {
  color: var(--av-color-muted);
}

.woocommerce input:focus,
.woocommerce-page input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
  outline: none !important;
  border-color: var(--av-color-accent) !important;
  box-shadow: 0 0 0 3px var(--av-color-accent-soft) !important;
}

/* ── WOOCOMMERCE NOTICES ────────────────────────────────────── */

.woocommerce-message,
.woocommerce-info {
  background-color: var(--av-color-surface) !important;
  border-top-color: var(--av-color-accent) !important;
  color: var(--av-color-text);
  border-radius: var(--av-radius-md);
}

.woocommerce-error {
  background-color: var(--av-color-surface) !important;
  border-top-color: var(--av-color-destructive) !important;
  color: var(--av-color-text);
  border-radius: var(--av-radius-md);
}

/* ── WOOCOMMERCE PRODUCT CARDS (SHOP) ───────────────────────── */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--av-color-surface);
  border: 1px solid var(--av-color-border);
  border-radius: var(--av-radius-lg);
  padding: 0;
  overflow: hidden;
  transition: var(--av-transition);
  position: relative;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  border-color: var(--av-color-border-hover);
  box-shadow: var(--av-shadow-glow);
  transform: translateY(-4px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--av-font-primary);
  font-size: var(--av-text-base);
  font-weight: 600;
  color: var(--av-color-heading);
  padding: var(--av-spacing-md) var(--av-spacing-md) 0;
  line-height: var(--av-leading-snug);
}

.woocommerce ul.products li.product .price {
  padding: var(--av-spacing-sm) var(--av-spacing-md);
}

.woocommerce ul.products li.product a.button {
  margin: var(--av-spacing-sm) var(--av-spacing-md) var(--av-spacing-md);
  width: calc(100% - var(--av-spacing-xl));
}

/* Product image container */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
  border-radius: 0;
  transition: transform 0.5s var(--av-ease-out);
}

.woocommerce ul.products li.product:hover a img {
  transform: scale(1.05);
}

/* Sale badge */
.woocommerce span.onsale {
  background: var(--av-color-sale-badge) !important;
  color: #fff;
  border-radius: var(--av-radius-full);
  font-size: var(--av-text-xs);
  font-weight: 600;
  padding: 6px 14px;
  min-width: auto;
  min-height: auto;
  line-height: 1;
  z-index: 10;
}

/* ── WOOCOMMERCE TABLES ─────────────────────────────────────── */

.woocommerce table.cart,
.woocommerce table.shop_table {
  background-color: var(--av-color-surface);
  color: var(--av-color-text);
  border: 1px solid var(--av-color-border);
  border-radius: var(--av-radius-md);
  overflow: hidden;
}

.woocommerce table.cart th,
.woocommerce table.shop_table th {
  background: var(--av-color-surface-raised);
  color: var(--av-color-heading);
  border-color: var(--av-color-border);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--av-text-xs);
  letter-spacing: 0.06em;
}

.woocommerce table.cart td,
.woocommerce table.shop_table td {
  border-color: var(--av-color-border);
  color: var(--av-color-text);
}

/* ── WC BLOCKS ───────────────────────────────────────────────── */

.wc-block-components-button {
  background: var(--av-gradient-cta) !important;
  color: #fff;
  border-radius: var(--av-radius-md);
}

.wc-block-components-text-input input,
.wc-block-components-country-input input,
.wc-block-components-address-form input {
  background-color: var(--av-color-surface);
  color: var(--av-color-text);
  border-color: var(--av-color-border);
}

/* ── SCROLLBAR ───────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--av-color-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--av-color-surface-raised);
  border-radius: var(--av-radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--av-color-muted);
}

/* ── ANIMATION KEYFRAMES ────────────────────────────────────── */

@keyframes av-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes av-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes av-slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes av-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes av-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px var(--av-color-accent-glow);
  }
  50% {
    box-shadow: 0 0 40px var(--av-color-accent-glow), 0 0 60px rgba(99,102,241,0.15);
  }
}

@keyframes av-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes av-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

/* Utility classes */
.av-animate-in {
  animation: av-fadeInUp 0.6s var(--av-ease-out) both;
}

.av-animate-delay-1 { animation-delay: 0.1s; }
.av-animate-delay-2 { animation-delay: 0.2s; }
.av-animate-delay-3 { animation-delay: 0.3s; }
.av-animate-delay-4 { animation-delay: 0.4s; }
.av-animate-delay-5 { animation-delay: 0.5s; }

/* ── FOCUS VISIBLE ───────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--av-color-accent);
  outline-offset: 2px;
}