/**
 * Waggy Pet Shop - WooCommerce Custom Stylesheet
 * Integrates WooCommerce components with Waggy Design Language
 */

/* WooCommerce Star Ratings */
.star-rating, .wc-star-rating {
  color: var(--tertiary);
  letter-spacing: 2px;
  font-size: 0.95rem;
}

/* WooCommerce notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border);
}

.woocommerce-message {
  background-color: #f1f8f3;
  color: #276749;
  border-color: #c6f6d5;
}

.woocommerce-info {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
  border-color: var(--border);
}

.woocommerce-error {
  background-color: #fff5f5;
  color: var(--destructive);
  border-color: #fed7d7;
}

/* WooCommerce Buttons */
.button.wc-forward,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce #respond input#submit {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-radius: var(--radius) !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  border: none !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: opacity 0.2s, transform 0.1s;
}

.woocommerce button.button:hover,
.woocommerce a.button:hover {
  opacity: 0.92;
}

.button.alt,
.woocommerce button.button.alt,
.woocommerce a.button.alt {
  background-color: var(--foreground) !important;
  color: var(--background) !important;
}

/* Breadcrumbs */
.woocommerce-breadcrumb {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-bottom: 1.5rem;
}

.woocommerce-breadcrumb a {
  color: var(--foreground);
  text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* WooCommerce Product Tabs */
.woocommerce-tabs ul.tabs {
  display: flex;
  gap: 1.5rem;
  border-bottom: 1px solid var(--border);
  padding: 0;
  margin: 0 0 1.5rem 0;
  list-style: none;
}

.woocommerce-tabs ul.tabs li {
  padding-bottom: 0.75rem;
  font-weight: 600;
  color: var(--muted-foreground);
  cursor: pointer;
  position: relative;
}

.woocommerce-tabs ul.tabs li.active {
  color: var(--foreground);
}

.woocommerce-tabs ul.tabs li.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--primary);
}

/* WooCommerce Checkout & Cart Form */
.woocommerce-checkout .form-row,
.woocommerce-cart .form-row {
  margin-bottom: 1.25rem;
}

.woocommerce form .form-row label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--foreground);
}

.woocommerce form .form-row .input-text,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background-color: var(--background);
  padding: 0.65rem 1rem;
  font-size: 0.875rem;
  color: var(--foreground);
  outline: none;
}

.woocommerce form .form-row .input-text:focus,
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(113, 129, 107, 0.18);
}

/* Order Review Table */
.woocommerce-checkout-review-order-table,
.shop_table.shop_table_responsive {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td,
.shop_table.shop_table_responsive th,
.shop_table.shop_table_responsive td {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}

/* Payment Gateways List */
#payment ul.payment_methods {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

#payment ul.payment_methods li {
  background: var(--secondary);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 0.75rem;
}

#payment ul.payment_methods li label {
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Contact Form 7 integration styles */
.wpcf7-form p {
  margin-bottom: 1rem;
}

.wpcf7-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--foreground);
}

.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-textarea,
.wpcf7-form .wpcf7-select {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background-color: var(--background);
  padding: 0.65rem 1rem;
  font-size: 0.875rem;
  color: var(--foreground);
  outline: none;
}

.wpcf7-form .wpcf7-text:focus,
.wpcf7-form .wpcf7-textarea:focus,
.wpcf7-form .wpcf7-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(113, 129, 107, 0.18);
}

.wpcf7-form .wpcf7-submit {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border-radius: var(--radius);
  padding: 0.75rem 2rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.wpcf7-form .wpcf7-submit:hover {
  opacity: 0.9;
}

.wpcf7-response-output {
  border-radius: var(--radius) !important;
  margin-top: 1.25rem !important;
  padding: 0.875rem 1.25rem !important;
  font-size: 0.875rem !important;
}