/**
 * WooCommerce Custom Styles for Baseball5 Nation
 * Matches the Tailwind design system used throughout the site
 */

/* === COLOR VARIABLES ===================================== */
:root {
  --primary: #002D72;
  --primary-hover: #022658;
  --secondary: #DC0032;
  --secondary-hover: #b80029;
}

/* === GENERAL WOOCOMMERCE STYLES ========================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}

.woocommerce-message {
  background-color: #f0fdf4;
  border-color: #86efac;
  color: #166534;
}

.woocommerce-info {
  background-color: #eff6ff;
  border-color: #93c5fd;
  color: #1e40af;
}

.woocommerce-error {
  background-color: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}

.woocommerce-message::before,
.woocommerce-info::before {
  display: none;
}

/* === CART PAGE =========================================== */

.woocommerce-cart table.cart {
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.woocommerce-cart table.cart th {
  background-color: #f8fafc;
  font-weight: 700;
  color: #1e293b;
  padding: 1rem;
  border-bottom: 2px solid #e2e8f0;
}

.woocommerce-cart table.cart td {
  padding: 1rem;
  border-bottom: 1px solid #f1f5f9;
}

.woocommerce-cart table.cart .product-thumbnail img {
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
}

.woocommerce-cart table.cart .product-name a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.woocommerce-cart table.cart .product-name a:hover {
  text-decoration: underline;
}

.woocommerce-cart table.cart .quantity input {
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  padding: 0.5rem 0.75rem;
  width: 80px;
  text-align: center;
}

.woocommerce-cart table.cart .product-remove a {
  color: var(--secondary) !important;
  font-size: 1.5rem;
  line-height: 1;
  text-decoration: none;
}

.woocommerce-cart .cart-collaterals {
  margin-top: 2rem;
}

.woocommerce-cart .cart-collaterals .cart_totals {
  background-color: #f8fafc;
  border-radius: 1rem;
  padding: 2rem;
  border: 1px solid #e2e8f0;
}

.woocommerce-cart .cart-collaterals .cart_totals h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 1.5rem;
}

.woocommerce-cart .cart-collaterals .cart_totals table {
  border: none;
}

.woocommerce-cart .cart-collaterals .cart_totals th,
.woocommerce-cart .cart-collaterals .cart_totals td {
  padding: 0.75rem 0;
  border-top: 1px solid #e2e8f0;
}

.woocommerce-cart .cart-collaterals .cart_totals .order-total th,
.woocommerce-cart .cart-collaterals .cart_totals .order-total td {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
  padding-top: 1.5rem;
  border-top: 2px solid #e2e8f0;
}

/* Update Cart Button */
.woocommerce-cart .actions button[name="update_cart"] {
  border-radius: 0.75rem;
  background-color: #64748b;
  color: white;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.woocommerce-cart .actions button[name="update_cart"]:hover {
  background-color: #475569;
}

/* === CHECKOUT PAGE ======================================= */

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 1rem;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  padding: 0.75rem 1rem;
  width: 100%;
}

.woocommerce-checkout .form-row label {
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.5rem;
  display: block;
}

.woocommerce-checkout #order_review_heading {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1e293b;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.woocommerce-checkout #order_review {
  background-color: #f8fafc;
  border-radius: 1rem;
  padding: 2rem;
  border: 1px solid #e2e8f0;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table {
  border: none;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
  padding: 0.75rem 0;
  border-top: 1px solid #e2e8f0;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-checkout .woocommerce-checkout-review-order-table .cart-subtotal td {
  border-top: 2px solid #e2e8f0;
  padding-top: 1rem;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
  padding-top: 1rem;
  border-top: 2px solid #e2e8f0;
}

.woocommerce-checkout #payment {
  background-color: white;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.woocommerce-checkout #payment ul.payment_methods {
  border: none;
  padding: 0;
}

.woocommerce-checkout #payment ul.payment_methods li {
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.woocommerce-checkout #payment ul.payment_methods li input {
  margin-right: 0.75rem;
}

.woocommerce-checkout #payment .place-order {
  padding: 0;
}

/* === BUTTONS ============================================= */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: var(--primary);
  color: white;
  padding: 0.875rem 1.5rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
  text-decoration: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--primary-hover);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  background-color: var(--secondary);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
  background-color: var(--secondary-hover);
}

/* Checkout Button */
.woocommerce-cart .wc-proceed-to-checkout a.button {
  background-color: var(--secondary);
  width: 100%;
  text-align: center;
  padding: 1rem 1.5rem;
  font-size: 1.125rem;
}

.woocommerce-cart .wc-proceed-to-checkout a.button:hover {
  background-color: var(--secondary-hover);
}

/* === MY ACCOUNT ========================================== */

.woocommerce-account .woocommerce-MyAccount-navigation {
  background-color: #f8fafc;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  padding: 1rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  border-bottom: 1px solid #e2e8f0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
  border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 0.75rem 1rem;
  color: #475569;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s;
  border-radius: 0.5rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  background-color: var(--primary);
  color: white;
}

.woocommerce-account .woocommerce-MyAccount-content {
  background-color: white;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  padding: 2rem;
}

/* === WIDGETS ============================================= */

.widget.woocommerce {
  background-color: #f8fafc;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.widget.woocommerce .widgettitle {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 1rem;
}

.widget.woocommerce ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.widget.woocommerce ul li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #e2e8f0;
}

.widget.woocommerce ul li:last-child {
  border-bottom: none;
}

.widget.woocommerce ul li a {
  color: var(--primary);
  text-decoration: none;
}

.widget.woocommerce ul li a:hover {
  text-decoration: underline;
}

/* === RESPONSIVE ========================================== */

@media (max-width: 768px) {
  .woocommerce-cart table.cart .product-thumbnail {
    display: none;
  }
  
  .woocommerce-cart table.cart td.actions {
    text-align: center;
  }
  
  .woocommerce-cart table.cart td.actions button {
    width: 100%;
  }
}

/* === LOADING SPINNER ===================================== */

.woocommerce .blockUI.blockOverlay::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  border: 4px solid var(--primary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -20px 0 0 -20px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* === NOTICES ============================================= */

.woocommerce-notices-wrapper {
  margin-bottom: 1.5rem;
}

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* === SELECT2 DROPDOWN ==================================== */

.select2-container--default .select2-selection--single {
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  padding: 0.75rem 1rem;
  height: auto;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary);
}

/* === COUPON FORM ========================================= */

.woocommerce-cart .coupon {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.woocommerce-cart .coupon input[type="text"] {
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  padding: 0.75rem 1rem;
  flex: 1;
}

.woocommerce-cart .coupon button {
  border-radius: 0.75rem;
  background-color: #64748b;
  color: white;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.woocommerce-cart .coupon button:hover {
  background-color: #475569;
}