/* ============================================================================
   Payam Academy — WooCommerce skin.

   Restyles WooCommerce's OWN markup rather than overriding its templates.
   That choice is deliberate: cart / checkout / my-account on this site are
   wired to Zibal, Digits, Persian WooCommerce SMS and Checkout Field Editor
   Pro. Replacing Woo's template files would mean re-implementing their hooks
   and is the most likely way to break real payments. Styling the existing
   classes gets the design-system look with none of that risk.

   Visual language follows templates/checkout/Checkout.dc.html and
   templates/learner-dashboard/LearnerDashboard.dc.html.
   ========================================================================= */

.pa-woo { max-width: var(--container-max); margin: 0 auto; padding: 56px var(--gutter) 100px; }
.pa-woo--narrow { max-width: 1080px; }

/* ------------------------------------------------------------- messages --*/
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border: 1px solid var(--border-subtle);
  border-inline-start: 3px solid var(--accent);
  background: var(--surface-sand);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: 15px;
  color: var(--ink-700);
  list-style: none;
}
.woocommerce-error { border-inline-start-color: var(--status-error); }
.woocommerce-message { border-inline-start-color: var(--status-success); }
.woocommerce-message .button,
.woocommerce-info .button { float: none; margin-inline-start: 12px; }

/* -------------------------------------------------------------- buttons --
   Woo renders <button class="button">; map it onto the DS Button. */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #respond input#submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1;
  letter-spacing: .01em; border-radius: var(--radius-sm);
  border: 1px solid var(--green-900); background: var(--green-900); color: var(--cream-50);
  padding: 12px 26px; min-height: 46px; cursor: pointer; text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--green-700); border-color: var(--green-700); color: var(--cream-50);
}

/* The money buttons — add to cart, place order — take the gold. */
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order,
.woocommerce .single_add_to_cart_button {
  background: var(--gold-500); border-color: var(--gold-500); color: var(--green-900);
}
.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce .single_add_to_cart_button:hover {
  background: var(--gold-600); border-color: var(--gold-600); color: var(--green-900);
}
.woocommerce .single_add_to_cart_button,
.woocommerce #place_order { width: 100%; min-height: 54px; font-size: 16px; }

/* --------------------------------------------------------------- fields --*/
.woocommerce form .form-row { padding: 0; margin: 0 0 18px; }
.woocommerce form .form-row label {
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  color: var(--ink-700); margin-bottom: 7px; display: block;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  width: 100%; border: 1px solid var(--sand-300); border-radius: var(--radius-sm);
  padding: 13px 14px; font-family: var(--font-body); font-size: 15px;
  color: var(--ink-900); background: var(--white); outline: 0; line-height: 1.5;
  height: auto; box-shadow: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--green-900); box-shadow: var(--shadow-focus);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--status-error); }

/* ----------------------------------------------------------- cart table --*/
.woocommerce table.shop_table {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  border-collapse: separate; border-spacing: 0; overflow: hidden;
  background: var(--surface-card); font-size: 15px;
}
.woocommerce table.shop_table th {
  background: var(--surface-sand); font-family: var(--font-body); font-weight: 600;
  color: var(--ink-700); padding: 14px 16px; border-bottom: 1px solid var(--border-subtle);
}
.woocommerce table.shop_table td { padding: 16px; border-top: 1px solid var(--border-subtle); }
.woocommerce table.shop_table img { width: 72px; border-radius: var(--radius-xs); }
.woocommerce table.shop_table .product-name a { color: var(--green-900); font-weight: 600; }
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce .cross-sells h2 {
  font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0 0 16px;
}
.woocommerce .quantity input.qty {
  width: 68px; text-align: center; border: 1px solid var(--sand-300);
  border-radius: var(--radius-sm); padding: 10px 6px; font-family: var(--font-body);
}

/* Cart / checkout summary panels get the DS card treatment. */
.woocommerce .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-order-details,
.woocommerce-customer-details {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 26px;
}
.woocommerce .cart_totals table.shop_table,
.woocommerce-checkout #order_review table.shop_table {
  border: 0; box-shadow: none; background: transparent;
}

/* Coupon row */
.woocommerce .coupon { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.woocommerce .coupon .input-text { flex: 1; min-width: 180px; }

/* Payment methods — the RadioGroup language from Checkout.dc.html */
.woocommerce-checkout #payment {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); padding: 20px;
}
.woocommerce-checkout #payment ul.payment_methods { list-style: none; margin: 0; padding: 0; border: 0; }
.woocommerce-checkout #payment ul.payment_methods li { margin-bottom: 12px; }
.woocommerce-checkout #payment ul.payment_methods label {
  font-family: var(--font-body); font-size: 15px; color: var(--ink-700); cursor: pointer;
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--surface-sand); border-radius: var(--radius-sm);
  font-size: 14px; color: var(--text-secondary); margin-top: 10px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* -------------------------------------------------------- my account ----*/
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; }
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 12px; width: auto; float: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block; padding: 11px 14px; border-radius: var(--radius-sm);
  font-size: 15px; color: var(--ink-700);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--surface-sand); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--green-900); color: var(--cream-50); font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-content { width: auto; float: none; }

/* Login / register forms rendered by Woo inside my-account */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce form.lost_reset_password {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: 26px; background: var(--surface-card);
}

/* ----------------------------------------------------------- price bits --*/
.woocommerce .price,
.woocommerce .amount { font-family: var(--font-body); font-weight: 700; color: var(--green-900); }
.woocommerce .price del { font-weight: 400; color: var(--text-muted); }
.woocommerce .price ins { text-decoration: none; }

/* ----------------------------------------------------------- responsive --*/
@media (max-width: 900px) {
  .woocommerce-account .woocommerce { grid-template-columns: 1fr; }
  .woocommerce table.shop_table img { width: 56px; }
}