/**
 * Canalla Ibéricos - Custom CSS additions
 *
 * @package Canalla_Ibericos
 */

/* Loading animation for page transitions */
.canalla-loading {
  position: fixed;
  inset: 0;
  background: var(--canalla-black);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}

.canalla-loading.loaded {
  opacity: 0;
  pointer-events: none;
}

/* Product hover effects */
.woocommerce ul.products li.product {
  position: relative;
}

.woocommerce ul.products li.product::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--canalla-gold);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.woocommerce ul.products li.product:hover::after {
  transform: scaleX(1);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--canalla-black);
}

::-webkit-scrollbar-thumb {
  background: var(--canalla-gold);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--canalla-gold-light);
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--canalla-gold);
  outline-offset: 2px;
}

/* WooCommerce quantity input styling */
.woocommerce .quantity {
  display: inline-flex;
  align-items: center;
}

.woocommerce .quantity .qty {
  width: 60px;
  text-align: center;
  -moz-appearance: textfield;
}

.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Sale flash */
.woocommerce .products .product .onsale {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 5;
}

/* Cross-sells and up-sells */
.woocommerce .cross-sells h2,
.woocommerce .up-sells h2,
.woocommerce .related h2 {
  font-family: var(--font-accent) !important;
  color: var(--canalla-gold) !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  font-size: 1.2rem !important;
  margin-bottom: var(--space-lg) !important;
}

/* Coupon form */
.woocommerce .coupon {
  display: flex;
  gap: var(--space-sm);
}

.woocommerce .coupon .input-text {
  background: var(--canalla-black) !important;
  border: 1px solid rgba(201, 168, 76, 0.2) !important;
  color: var(--canalla-cream) !important;
  padding: 10px 16px !important;
}

/* Order details */
.woocommerce-order-details {
  background: var(--canalla-black-light);
  border: 1px solid rgba(201, 168, 76, 0.15);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.woocommerce-order-details h2 {
  font-family: var(--font-accent) !important;
  color: var(--canalla-gold) !important;
  letter-spacing: 3px;
}

/* Product gallery thumbnail styling */
.woocommerce div.product div.images .flex-control-thumbs li img {
  border: 2px solid transparent;
  transition: border-color 0.3s ease;
  border-radius: var(--radius-sm);
}

.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover {
  border-color: var(--canalla-gold);
}

/* Login / Register forms */
.woocommerce form.login,
.woocommerce form.register {
  background: var(--canalla-black-light) !important;
  border: 1px solid rgba(201, 168, 76, 0.15) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-xl) !important;
}

.woocommerce form.login h2,
.woocommerce form.register h2 {
  font-family: var(--font-accent) !important;
  color: var(--canalla-gold) !important;
  letter-spacing: 3px;
}

/* Reviews */
.woocommerce #reviews #comments ol.commentlist li .comment-text {
  background: var(--canalla-black-light);
  border: 1px solid rgba(201, 168, 76, 0.1);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta {
  color: var(--canalla-gold);
  font-size: 0.85rem;
}

/* Print styles */
@media print {
  .site-header,
  .site-footer,
  .main-navigation,
  .header-actions,
  .scroll-indicator,
  .newsletter-form {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
  }

  h1, h2, h3, h4, h5, h6 {
    color: black !important;
  }
}