/* ==========================================================================
 * 船联汇 VesselNexus — B1 WooCommerce Integration
 * ==========================================================================
 * §1. Checkout Page
 * §2. Cart Page
 * §3. My Account (Orders, Addresses, Downloads)
 * §4. Order Tracking
 * §5. Shop / Product Archive
 * §6. Single Product Page
 * §7. WC Notices & Messages
 * §8. Payment Methods
 *
 * 依赖: vnx-design-tokens.css, WooCommerce plugin
 * @package VesselNexus
 * @version 2.3.0
 * ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════
   §1. CHECKOUT PAGE
   ═══════════════════════════════════════════════════════════════════════ */

.woocommerce-checkout {
  max-width: var(--vnx-content-max-width);
  margin: 0 auto;
}

/* Checkout layout — 2 columns */
.woocommerce .col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--vnx-space-6);
}

/* Checkout form inputs */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce select,
.woocommerce .select2-container .select2-selection {
  height: 48px !important;
  padding: 0 var(--vnx-space-4) !important;
  border: 1.5px solid var(--vnx-border-default) !important;
  border-radius: var(--vnx-radius-md) !important;
  background: var(--vnx-white) !important;
  font-family: var(--vnx-font-family-body) !important;
  font-size: var(--vnx-text-base) !important;
  color: var(--vnx-text-primary) !important;
  transition: border-color var(--vnx-duration-fast), box-shadow var(--vnx-duration-fast);
}

.woocommerce input:focus,
.woocommerce select:focus {
  outline: none !important;
  border-color: var(--vnx-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(46, 123, 196, 0.15) !important;
}

/* Checkout labels */
.woocommerce form .form-row label {
  font-size: var(--vnx-text-sm) !important;
  font-weight: var(--vnx-font-medium) !important;
  color: var(--vnx-text-primary) !important;
  margin-bottom: var(--vnx-space-1) !important;
}

.woocommerce form .form-row .required {
  color: var(--vnx-color-danger) !important;
}

/* ── Checkout Sections (Billing, Shipping, Order Review) ── */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
  background: var(--vnx-surface-card);
  border-radius: var(--vnx-radius-xl);
  border: 1px solid var(--vnx-border-light);
  padding: var(--vnx-space-6);
  margin-bottom: var(--vnx-space-6);
}

.woocommerce-checkout h3 {
  font-family: var(--vnx-font-family-heading) !important;
  font-size: var(--vnx-text-xl) !important;
  font-weight: var(--vnx-font-bold) !important;
  color: var(--vnx-text-primary) !important;
  margin: 0 0 var(--vnx-space-4) !important;
  padding-bottom: var(--vnx-space-3);
  border-bottom: 1px solid var(--vnx-border-light);
}

/* ── Order Review Table ── */
.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--vnx-text-sm);
}

.woocommerce-checkout-review-order-table th {
  padding: var(--vnx-space-3) var(--vnx-space-4);
  text-align: left;
  font-weight: var(--vnx-font-semibold);
  color: var(--vnx-text-primary);
  background: var(--vnx-gray-50);
  border-bottom: 2px solid var(--vnx-border-default);
}

.woocommerce-checkout-review-order-table td {
  padding: var(--vnx-space-3) var(--vnx-space-4);
  border-bottom: 1px solid var(--vnx-border-light);
  color: var(--vnx-text-secondary);
}

.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
  font-weight: var(--vnx-font-bold);
  color: var(--vnx-text-primary);
  border-top: 2px solid var(--vnx-border-default);
}

/* ── Payment Section ── */
.woocommerce-checkout #payment {
  background: var(--vnx-surface-card) !important;
  border-radius: var(--vnx-radius-xl) !important;
  border: 1px solid var(--vnx-border-light) !important;
  overflow: hidden;
}

.woocommerce-checkout #payment ul.payment_methods {
  padding: var(--vnx-space-5) !important;
  border-bottom: 1px solid var(--vnx-border-light) !important;
}

.woocommerce-checkout #payment ul.payment_methods li {
  padding: var(--vnx-space-2) 0 !important;
  font-size: var(--vnx-text-sm);
  color: var(--vnx-text-primary);
}

.woocommerce-checkout #payment div.payment_box {
  background: var(--vnx-gray-50) !important;
  border-radius: var(--vnx-radius-md) !important;
  padding: var(--vnx-space-3) var(--vnx-space-4) !important;
  font-size: var(--vnx-text-sm);
  color: var(--vnx-text-secondary);
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--vnx-gray-50) !important;
}

/* ── Place Order Button ── */
.woocommerce #place_order,
.woocommerce button.button.alt {
  width: 100% !important;
  height: 52px !important;
  padding: 0 var(--vnx-space-8) !important;
  border: none !important;
  border-radius: var(--vnx-radius-lg) !important;
  background: linear-gradient(135deg, var(--vnx-gold-500), var(--vnx-gold-400)) !important;
  color: var(--vnx-ocean-950) !important;
  font-family: var(--vnx-font-family-heading) !important;
  font-size: var(--vnx-text-base) !important;
  font-weight: var(--vnx-font-bold) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(212, 152, 10, 0.25) !important;
  transition: all var(--vnx-duration-fast) var(--vnx-ease-out) !important;
}

.woocommerce #place_order:hover,
.woocommerce button.button.alt:hover {
  box-shadow: 0 4px 16px rgba(212, 152, 10, 0.4) !important;
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--vnx-gold-400), var(--vnx-gold-300)) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   §2. CART PAGE
   ═══════════════════════════════════════════════════════════════════════ */

.woocommerce-cart {
  max-width: var(--vnx-content-max-width);
  margin: 0 auto;
}

/* Cart table */
.woocommerce-cart table.shop_table {
  border-collapse: collapse !important;
  border-radius: var(--vnx-radius-xl) !important;
  overflow: hidden;
  border: 1px solid var(--vnx-border-light) !important;
}

.woocommerce-cart table.shop_table th {
  padding: var(--vnx-space-3) var(--vnx-space-4) !important;
  background: var(--vnx-gray-50) !important;
  font-family: var(--vnx-font-family-heading);
  font-size: var(--vnx-text-xs) !important;
  font-weight: var(--vnx-font-semibold) !important;
  color: var(--vnx-text-tertiary) !important;
  text-transform: uppercase;
  letter-spacing: var(--vnx-tracking-wider);
}

.woocommerce-cart table.shop_table td {
  padding: var(--vnx-space-4) !important;
  border-top: 1px solid var(--vnx-border-light) !important;
  font-size: var(--vnx-text-sm);
  vertical-align: middle !important;
}

/* Product thumbnail in cart */
.woocommerce-cart table.shop_table .product-thumbnail img {
  width: 80px !important;
  border-radius: var(--vnx-radius-md) !important;
}

/* Product name */
.woocommerce-cart table.shop_table .product-name a {
  font-weight: var(--vnx-font-semibold) !important;
  color: var(--vnx-text-primary) !important;
  text-decoration: none !important;
}

/* Quantity input */
.woocommerce-cart .quantity input.qty {
  height: 40px !important;
  width: 70px !important;
  padding: 0 var(--vnx-space-2) !important;
  border: 1.5px solid var(--vnx-border-default) !important;
  border-radius: var(--vnx-radius-md) !important;
  text-align: center;
}

/* Cart totals */
.woocommerce-cart .cart_totals {
  background: var(--vnx-surface-card);
  border-radius: var(--vnx-radius-xl);
  border: 1px solid var(--vnx-border-light);
  padding: var(--vnx-space-6);
}

.woocommerce-cart .cart_totals h2 {
  font-family: var(--vnx-font-family-heading) !important;
  font-size: var(--vnx-text-lg) !important;
  font-weight: var(--vnx-font-bold) !important;
  color: var(--vnx-text-primary) !important;
  margin: 0 0 var(--vnx-space-4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   §3. MY ACCOUNT
   ═══════════════════════════════════════════════════════════════════════ */

.woocommerce-account {
  max-width: var(--vnx-content-max-width);
  margin: 0 auto;
}

/* Account navigation */
.woocommerce-MyAccount-navigation {
  background: var(--vnx-surface-card);
  border-radius: var(--vnx-radius-xl);
  border: 1px solid var(--vnx-border-light);
  overflow: hidden;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  margin: 0 !important;
  padding: var(--vnx-space-2) !important;
}

.woocommerce-MyAccount-navigation li {
  margin: 1px 0;
}

.woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  gap: var(--vnx-space-3);
  padding: var(--vnx-space-3) var(--vnx-space-4);
  border-radius: var(--vnx-radius-md);
  font-size: var(--vnx-text-sm);
  font-weight: var(--vnx-font-medium);
  color: var(--vnx-text-secondary) !important;
  text-decoration: none !important;
  transition: all var(--vnx-duration-fast);
}

.woocommerce-MyAccount-navigation li a:hover {
  background: var(--vnx-gray-100);
  color: var(--vnx-text-primary) !important;
}

.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--vnx-ocean-50);
  color: var(--vnx-ocean-600) !important;
  font-weight: var(--vnx-font-semibold);
}

/* Account content area */
.woocommerce-MyAccount-content {
  background: var(--vnx-surface-card);
  border-radius: var(--vnx-radius-xl);
  border: 1px solid var(--vnx-border-light);
  padding: var(--vnx-space-6);
}

/* Orders table */
.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--vnx-text-sm);
}

.woocommerce-orders-table th {
  padding: var(--vnx-space-3) var(--vnx-space-4);
  text-align: left;
  font-weight: var(--vnx-font-semibold);
  color: var(--vnx-text-primary);
  background: var(--vnx-gray-50);
  border-bottom: 2px solid var(--vnx-border-default);
}

.woocommerce-orders-table td {
  padding: var(--vnx-space-3) var(--vnx-space-4);
  border-bottom: 1px solid var(--vnx-border-light);
}

/* Order status badges */
.woocommerce-orders-table .woocommerce-orders-table__cell-order-status {
  display: inline-flex;
  padding: 2px 10px;
  border-radius: var(--vnx-radius-full);
  font-size: 11px;
  font-weight: var(--vnx-font-semibold);
}

.status-completed  { background: var(--vnx-color-success-bg); color: var(--vnx-color-success); }
.status-processing { background: var(--vnx-color-info-bg);    color: var(--vnx-ocean-600); }
.status-on-hold   { background: var(--vnx-color-warning-bg);  color: var(--vnx-gold-700); }
.status-failed    { background: var(--vnx-color-danger-bg);   color: var(--vnx-color-danger); }

/* ═══════════════════════════════════════════════════════════════════════
   §4. WOOCOMMERCE NOTICES
   ═══════════════════════════════════════════════════════════════════════ */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  padding: var(--vnx-space-4) var(--vnx-space-5) !important;
  border-radius: var(--vnx-radius-lg) !important;
  font-size: var(--vnx-text-sm) !important;
  margin-bottom: var(--vnx-space-5) !important;
  border: none !important;
  display: flex;
  align-items: flex-start;
  gap: var(--vnx-space-3);
}

.woocommerce-message {
  background: var(--vnx-color-success-bg) !important;
  color: #1a6e3a !important;
  border-left: 4px solid var(--vnx-color-success) !important;
}

.woocommerce-error {
  background: var(--vnx-color-danger-bg) !important;
  color: #a82a2a !important;
  border-left: 4px solid var(--vnx-color-danger) !important;
}

.woocommerce-info {
  background: var(--vnx-color-info-bg) !important;
  color: #1a4d7a !important;
  border-left: 4px solid var(--vnx-color-info) !important;
}

.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
  order: 2;
  float: right;
  padding: var(--vnx-space-1) var(--vnx-space-4) !important;
  border-radius: var(--vnx-radius-full) !important;
  background: var(--vnx-white) !important;
  font-size: var(--vnx-text-xs) !important;
  font-weight: var(--vnx-font-semibold) !important;
  color: var(--vnx-ocean-600) !important;
  text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   §5. GENERAL WC BUTTONS
   ═══════════════════════════════════════════════════════════════════════ */

.woocommerce a.button,
.woocommerce button.button {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--vnx-space-2) !important;
  padding: var(--vnx-space-2) var(--vnx-space-5) !important;
  border-radius: var(--vnx-radius-lg) !important;
  border: 1.5px solid var(--vnx-gray-300) !important;
  background: var(--vnx-white) !important;
  font-family: var(--vnx-font-family-heading) !important;
  font-size: var(--vnx-text-sm) !important;
  font-weight: var(--vnx-font-semibold) !important;
  color: var(--vnx-text-secondary) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  transition: all var(--vnx-duration-fast) var(--vnx-ease-out) !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
  border-color: var(--vnx-ocean-400) !important;
  color: var(--vnx-ocean-600) !important;
  background: var(--vnx-ocean-50) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   §6. COUPON FORM
   ═══════════════════════════════════════════════════════════════════════ */

.woocommerce .coupon {
  display: flex;
  gap: var(--vnx-space-2);
}

.woocommerce .coupon input.input-text {
  flex: 1;
  height: 44px !important;
  min-width: 150px;
}

/* ═══════════════════════════════════════════════════════════════════════
   §7. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .woocommerce .col2-set {
    grid-template-columns: 1fr;
  }

  .woocommerce-cart table.shop_table {
    display: block;
    overflow-x: auto;
  }

  .woocommerce-checkout .woocommerce-billing-fields,
  .woocommerce-checkout .woocommerce-shipping-fields {
    padding: var(--vnx-space-4);
  }

  .woocommerce-MyAccount-content {
    padding: var(--vnx-space-4);
  }
}