/* =========================================================================
 * CHTTI Order Received / Thank-you page ( /checkout/order-received/ )
 * Styles the branded woocommerce/checkout/thankyou.php override plus the
 * WooCommerce order-details table + customer details that render via the
 * `woocommerce_thankyou` action, and Sensei's course-access section.
 *
 * Everything is scoped under .chtti-order so it never leaks to the account
 * "view order" screen and out-specifies the Elementor global kit. Tokens only.
 * Buttons reuse the global .chtti-btn styles from student-dashboard.css.
 * ====================================================================== */

.chtti-order {
  max-width: 720px;
  margin-inline: auto;
  font-family: var(--font-body);
  color: var(--chtti-dark);
}

/* --- Success / failure hero ----------------------------------------- */
.chtti-order .chtti-order__hero {
  text-align: center;
  padding: var(--space-2) 0 var(--space-5);
}
.chtti-order .chtti-order__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--chtti-teal) 14%, transparent);
  color: var(--chtti-teal);
}
.chtti-order .chtti-order__badge svg {
  width: 34px;
  height: 34px;
}
.chtti-order .chtti-order__badge--failed {
  background: color-mix(in srgb, var(--chtti-orange) 14%, transparent);
  color: var(--chtti-orange);
}
.chtti-order .chtti-order__badge--awaiting {
  background: color-mix(in srgb, var(--chtti-blue) 12%, transparent);
  color: var(--chtti-blue);
}
.chtti-order .chtti-order__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h1);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-2);
  color: var(--chtti-dark);
}
.chtti-order .chtti-order__sub {
  max-width: 52ch;
  margin: 0 auto var(--space-4);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: color-mix(in srgb, var(--chtti-dark) 72%, transparent);
}
.chtti-order .chtti-order__sub strong {
  color: var(--chtti-dark);
  font-weight: 600;
}
.chtti-order .chtti-order__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}
.chtti-order .chtti-order__cta .chtti-btn {
  align-self: auto;
}

/* --- Order summary card --------------------------------------------- */
.chtti-order .chtti-order__summary {
  background: var(--chtti-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}
.chtti-order .chtti-order__overview {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-4);
}
.chtti-order .chtti-order__overview li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  border: 0;
  padding: 0;
}
.chtti-order .chtti-order__ov-label {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--chtti-dark) 50%, transparent);
}
.chtti-order .chtti-order__overview strong {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--chtti-dark);
}
.chtti-order .chtti-order__overview .woocommerce-order-overview__total strong {
  color: var(--chtti-teal);
}

/* --- Gateway payment instructions (Bank Transfer / Cheque) ----------
   Renders via `woocommerce_thankyou_{method}`, wrapped in .chtti-order__
   instructions in the template. BACS emits .woocommerce-bacs-bank-details
   (heading + <ul> of account fields); cheque emits a bare <p>. Both are
   surfaced as a highlighted "next steps" card. Hidden when the gateway
   (e.g. Fygaro) outputs nothing. */
.chtti-order .chtti-order__instructions:empty {
  display: none;
}
.chtti-order .chtti-order__instructions {
  background: var(--chtti-light);
  border: 1px solid color-mix(in srgb, var(--chtti-blue) 22%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}
.chtti-order .chtti-order__instructions > *:first-child {
  margin-top: 0;
}
.chtti-order .chtti-order__instructions > *:last-child {
  margin-bottom: 0;
}
.chtti-order .chtti-order__instructions p {
  margin: 0 0 var(--space-2);
  line-height: var(--lh-body);
  color: color-mix(in srgb, var(--chtti-dark) 82%, transparent);
}
.chtti-order .wc-bacs-bank-details-heading,
.chtti-order .chtti-order__instructions h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-3);
  color: var(--chtti-dark);
}
.chtti-order .wc-bacs-bank-details-account-name,
.chtti-order .chtti-order__instructions h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body);
  margin: var(--space-3) 0 var(--space-2);
  color: var(--chtti-blue);
}
.chtti-order ul.wc-bacs-bank-details {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.chtti-order ul.wc-bacs-bank-details li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--chtti-blue) 14%, transparent);
  font-size: var(--text-body);
  color: color-mix(in srgb, var(--chtti-dark) 65%, transparent);
}
.chtti-order ul.wc-bacs-bank-details li:last-child {
  border-bottom: 0;
}
.chtti-order ul.wc-bacs-bank-details li strong {
  color: var(--chtti-dark);
  font-weight: 600;
  text-align: right;
}

/* --- Order details table + customer details (WC + Sensei sections) --- */
.chtti-order .woocommerce-order-details,
.chtti-order .woocommerce-customer-details,
.chtti-order .sensei-order-details,
.chtti-order .woocommerce-order-downloads {
  background: var(--chtti-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}
.chtti-order .woocommerce-order-details__title,
.chtti-order .woocommerce-column__title,
.chtti-order h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-3);
  color: var(--chtti-dark);
}

.chtti-order table.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.chtti-order table.woocommerce-table--order-details th,
.chtti-order table.woocommerce-table--order-details td {
  padding: var(--space-3) 0;
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--chtti-dark) 10%, transparent);
  vertical-align: top;
}
.chtti-order table.woocommerce-table--order-details thead th {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--chtti-dark) 50%, transparent);
}
.chtti-order table.woocommerce-table--order-details td.product-total,
.chtti-order table.woocommerce-table--order-details th.product-total,
.chtti-order table.woocommerce-table--order-details tfoot td {
  text-align: right;
  white-space: nowrap;
}
.chtti-order table.woocommerce-table--order-details .product-name a {
  color: var(--chtti-blue);
  font-weight: 600;
  text-decoration: none;
}
.chtti-order table.woocommerce-table--order-details .product-name a:hover {
  text-decoration: underline;
}
.chtti-order table.woocommerce-table--order-details tfoot th {
  font-weight: 600;
  color: color-mix(in srgb, var(--chtti-dark) 72%, transparent);
}
.chtti-order table.woocommerce-table--order-details tfoot tr:last-child th,
.chtti-order table.woocommerce-table--order-details tfoot tr:last-child td {
  border-bottom: 0;
  padding-top: var(--space-3);
  font-size: var(--text-h4, var(--text-body));
  color: var(--chtti-dark);
}
.chtti-order table.woocommerce-table--order-details tfoot tr:last-child td {
  color: var(--chtti-teal);
  font-weight: 700;
}

/* Order-detail action buttons (invoice, etc.) reuse brand outline style. */
.chtti-order .woocommerce-button,
.chtti-order .order-actions-button {
  display: inline-block;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  background: transparent;
  border: 2px solid var(--chtti-blue);
  color: var(--chtti-blue);
  font-weight: 600;
  font-size: var(--text-button);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.chtti-order .woocommerce-button:hover,
.chtti-order .order-actions-button:hover {
  background: var(--chtti-blue);
  color: var(--chtti-white);
}

/* --- Customer / billing address ------------------------------------- */
.chtti-order .woocommerce-customer-details address {
  font-style: normal;
  line-height: var(--lh-body);
  color: color-mix(in srgb, var(--chtti-dark) 80%, transparent);
  border: 0;
  padding: 0;
}
.chtti-order .woocommerce-customer-details .woocommerce-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

/* --- Sensei course-access section ----------------------------------- */
.chtti-order .sensei-order-details a,
.chtti-order .woocommerce-order-details a.button {
  color: var(--chtti-blue);
}

/* --- Failure-notice fallback (if WC prints its own notice markup) ---- */
.chtti-order .woocommerce-thankyou-order-failed {
  text-align: center;
  color: var(--chtti-orange);
}

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 600px) {
  .chtti-order .chtti-order__overview {
    grid-template-columns: 1fr;
  }
  .chtti-order .chtti-order__summary,
  .chtti-order .woocommerce-order-details,
  .chtti-order .woocommerce-customer-details,
  .chtti-order .woocommerce-order-downloads {
    padding: var(--space-4);
  }
  .chtti-order .chtti-order__cta .chtti-btn {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chtti-order .chtti-btn,
  .chtti-order .woocommerce-button {
    transition: none;
  }
}