/*
 * Woodchix Workshop Manager — My Account / Workshops Dashboard Styles
 *
 * Targets WooCommerce's native nav HTML classes so no template override is needed.
 * Uses the same ACSS CSS variables as the Bricks SureCart dashboard template.
 *
 * @since 2.0.0
 */

/* ── WooCommerce wrapper: own grid container ────────────────────────────── */

/* The .woocommerce div wraps both .wwm-sidenav and .woocommerce-MyAccount-content.
   We make it the grid container directly so the 1:3 column split applies. */
.woocommerce-account #account-content .woocommerce {
  display: grid;
  grid-template-columns: var(--grid-1-3, 1fr 3fr);
  gap: var(--container-gap, 2rem);
  align-items: start;
  width: 100%;
}

/* ── Sticky sidenav wrapper ─────────────────────────────────────────────── */

.wwm-sidenav {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: var(--header-height, 80px);
  align-self: flex-start;
  min-width: 220px;
}

/* ── Above-nav area: homepage back link ─────────────────────────────────── */

.wwm-nav-above {
  margin-bottom: 0.5rem;
}

.wwm-nav-home-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 500;
  color: rgba(44, 59, 45, 0.5);
  text-decoration: none;
  transition: color 100ms ease;
}

.wwm-nav-home-link:hover {
  color: var(--base, #2C3B2D);
  text-decoration: none;
}

.wwm-nav-home-link svg {
  flex-shrink: 0;
}

/* ── WooCommerce Nav — Wrapper ───────────────────────────────────────────── */

.woocommerce-MyAccount-navigation {
  border: 1px solid rgba(44, 59, 45, 0.15);
  border-radius: var(--radius, 8px);
  overflow: hidden;
  background: var(--white, #fff);
}

/* ── WooCommerce Nav — List ──────────────────────────────────────────────── */

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

.woocommerce-MyAccount-navigation ul li {
  border-bottom: 1px solid rgba(44, 59, 45, 0.08);
  transition: background 100ms ease;
}

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

.woocommerce-MyAccount-navigation ul li:hover {
  background: rgba(44, 59, 45, 0.04);
}

/* Active item */
.woocommerce-MyAccount-navigation ul li.is-active,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--is-active {
  background: rgba(44, 59, 45, 0.07);
}

/* ── WooCommerce Nav — Links ─────────────────────────────────────────────── */

.woocommerce-MyAccount-navigation ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.8rem 1.1rem;
  font-size: var(--text-s, 0.875rem);
  font-weight: 500;
  color: var(--base, #2C3B2D);
  text-decoration: none;
  transition: color 100ms ease;
}

.woocommerce-MyAccount-navigation ul li a:hover {
  color: var(--primary, #7B3B2A);
  text-decoration: none;
}

/* SVG icon injected before link text */
.woocommerce-MyAccount-navigation ul li a > svg:first-child {
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity 100ms ease;
}

.woocommerce-MyAccount-navigation ul li:hover a > svg:first-child,
.woocommerce-MyAccount-navigation ul li.is-active a > svg:first-child,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--is-active a > svg:first-child {
  opacity: 0.85;
}

/* Chevron arrow — pushed to the right */
.woocommerce-MyAccount-navigation ul li a::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.3;
  flex-shrink: 0;
  margin-left: auto;
  transition: opacity 100ms ease;
}

.woocommerce-MyAccount-navigation ul li:hover a::after,
.woocommerce-MyAccount-navigation ul li.is-active a::after,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--is-active a::after {
  opacity: 0.65;
}

/* Active link text colour */
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--is-active a {
  color: var(--primary, #7B3B2A);
  font-weight: 600;
}

/* Workshops Account — top item, slightly bolder */
.woocommerce-MyAccount-navigation ul li.wwm-nav-link--account-home a {
  font-weight: 600;
  color: var(--base, #2C3B2D);
}

/* ── Member Dashboard — Bottom of nav box ───────────────────────────────── */

.wwm-nav-member-dashboard {
  border-top: 1px solid rgba(44, 59, 45, 0.1);
  background: rgba(44, 59, 45, 0.03);
}

.wwm-nav-member-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.8rem 1.1rem;
  font-size: var(--text-s, 0.875rem);
  font-weight: 600;
  color: var(--base, #2C3B2D);
  text-decoration: none;
  transition: color 100ms ease, background 100ms ease;
}

.wwm-nav-member-link:hover {
  color: var(--primary, #7B3B2A);
  background: rgba(44, 59, 45, 0.05);
  text-decoration: none;
}

.wwm-nav-member-link > svg:first-child {
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity 100ms ease;
}

.wwm-nav-member-link:hover > svg:first-child {
  opacity: 0.85;
}

.wwm-nav-member-link span {
  flex: 1;
}

.wwm-nav-member-link__arrow {
  flex-shrink: 0;
  opacity: 0.3;
  transition: opacity 100ms ease, transform 100ms ease;
}

.wwm-nav-member-link:hover .wwm-nav-member-link__arrow {
  opacity: 0.65;
  transform: translateX(2px);
}

/* ── Log Out — outside the nav box, below it ────────────────────────────── */

.wwm-nav-logout {
  margin-top: 0.75rem;
  text-align: center;
}

.wwm-nav-logout-link {
  display: inline-block;
  font-size: var(--text-xs, 0.72rem);
  font-weight: 500;
  color: rgba(44, 59, 45, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: color 100ms ease;
}

.wwm-nav-logout-link:hover {
  color: var(--primary, #7B3B2A);
  text-decoration: none;
}

/* ── Welcome Card ────────────────────────────────────────────────────────── */

.wwm-welcome-card {
  border: 1px solid rgba(44, 59, 45, 0.12);
  border-radius: var(--radius, 8px);
  background: var(--white, #fff);
  overflow: hidden;
  margin-bottom: var(--space-s, 1rem);
}

.wwm-welcome-card__inner {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wwm-welcome-card__greeting {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.wwm-welcome-card__label {
  font-size: var(--text-xs, 0.72rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(44, 59, 45, 0.45);
}

.wwm-welcome-card__name {
  font-size: var(--text-l, 1.25rem);
  font-weight: 700;
  color: var(--base, #2C3B2D);
  margin: 0;
  line-height: 1.2;
}

.wwm-welcome-card__text {
  font-size: var(--text-s, 0.875rem);
  color: rgba(44, 59, 45, 0.65);
  margin: 0;
  line-height: 1.55;
}

.wwm-welcome-card__logout {
  font-size: var(--text-xs, 0.75rem);
  color: rgba(44, 59, 45, 0.4);
  margin: 0;
  padding-top: 0.25rem;
  border-top: 1px solid rgba(44, 59, 45, 0.07);
}

.wwm-welcome-card__logout-link {
  color: var(--primary, #7B3B2A);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 100ms ease;
}

.wwm-welcome-card__logout-link:hover {
  opacity: 0.7;
  text-decoration: none;
}

/* ── Workshops Dashboard ─────────────────────────────────────────────────── */

.wwm-workshops-dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap, 1.5rem);
}

.wwm-workshops-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 0.5rem);
}

.wwm-workshops-title {
  font-size: var(--text-xl, 1.5rem);
  font-weight: 700;
  color: var(--base, #2C3B2D);
  margin: 0;
}

/* Empty state */
.wwm-workshops-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s, 1rem);
  padding: var(--space-xl, 3rem) var(--space-m, 1.5rem);
  text-align: center;
  color: rgba(44, 59, 45, 0.5);
  border: 2px dashed rgba(44, 59, 45, 0.15);
  border-radius: var(--radius, 8px);
}

.wwm-workshops-empty svg {
  opacity: 0.3;
}

.wwm-workshops-empty p {
  font-size: var(--text-m, 1rem);
  margin: 0;
}

/* Section labels */
.wwm-workshops-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-s, 1rem);
}

.wwm-section-label {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(44, 59, 45, 0.5);
  margin: 0;
  padding-bottom: var(--space-xs, 0.5rem);
  border-bottom: 1px solid rgba(44, 59, 45, 0.1);
}

.wwm-workshops-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-s, 1rem);
}

/* ── Workshop Card ───────────────────────────────────────────────────────── */

.wwm-workshop-card {
  display: flex;
  gap: var(--space-s, 1rem);
  padding: var(--space-s, 1rem);
  border: 1px solid rgba(44, 59, 45, 0.1);
  border-radius: var(--radius, 8px);
  background: var(--white, #fff);
  transition: box-shadow 150ms ease, border-color 150ms ease;
}

.wwm-workshop-card:hover {
  border-color: rgba(44, 59, 45, 0.2);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.wwm-workshop-card--completed {
  opacity: 0.8;
}

.wwm-workshop-card--deleted {
  opacity: 0.65;
}

/* Card image */
.wwm-workshop-card__image {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: calc(var(--radius, 8px) - 2px);
  overflow: hidden;
}

.wwm-workshop-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder when no thumbnail */
.wwm-workshop-card__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(44, 59, 45, 0.06);
  color: rgba(44, 59, 45, 0.3);
}

/* Card body */
.wwm-workshop-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 0.4rem);
}

.wwm-workshop-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs, 0.5rem);
  flex-wrap: wrap;
}

.wwm-workshop-card__series {
  font-size: var(--text-xs, 0.75rem);
  color: rgba(44, 59, 45, 0.5);
  font-weight: 500;
}

.wwm-workshop-card__title {
  font-size: var(--text-m, 1rem);
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.wwm-workshop-card__title a {
  color: var(--base, #2C3B2D);
  text-decoration: none;
}

.wwm-workshop-card__title a:hover {
  color: var(--primary, #7B3B2A);
  text-decoration: none;
}

.wwm-workshop-card__dates {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs, 0.75rem);
  color: rgba(44, 59, 45, 0.55);
}

.wwm-workshop-card__dates svg {
  flex-shrink: 0;
  opacity: 0.55;
}

.wwm-workshop-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs, 0.5rem);
  margin-top: auto;
  padding-top: var(--space-xs, 0.5rem);
  border-top: 1px solid rgba(44, 59, 45, 0.07);
}

.wwm-workshop-card__actions {
  display: flex;
  gap: var(--space-s, 1rem);
}

.wwm-link {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 500;
  color: var(--primary, #7B3B2A);
  text-decoration: none;
  transition: opacity 100ms ease;
}

.wwm-link:hover {
  opacity: 0.7;
  text-decoration: none;
}

/* ── Status Badges ───────────────────────────────────────────────────────── */

.wwm-ws-status-badge,
.wwm-order-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: var(--text-xs, 0.7rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.wwm-ws-status--upcoming {
  background: rgba(44, 59, 45, 0.08);
  color: var(--base, #2C3B2D);
}

.wwm-ws-status--in-progress {
  background: rgba(34, 139, 34, 0.1);
  color: #1a6b1a;
}

.wwm-ws-status--completed {
  background: rgba(123, 59, 42, 0.08);
  color: var(--primary, #7B3B2A);
}

.wwm-status--completed {
  background: rgba(59, 130, 246, 0.1);
  color: #1d4ed8;
}

.wwm-status--processing {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.wwm-status--on-hold {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}

/* ── Load More (Past Workshops) ──────────────────────────────────────────── */

.wwm-load-more-wrap {
  display: flex;
  justify-content: center;
  padding-top: var(--space-xs, 0.5rem);
}

.wwm-load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.5rem 1.5rem;
  background: transparent;
  border: 1px solid rgba(44, 59, 45, 0.2);
  border-radius: var(--radius, 8px);
  font-size: var(--text-xs, 0.8rem);
  font-weight: 600;
  color: var(--base, #2C3B2D);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.wwm-load-more-btn:hover {
  background: rgba(44, 59, 45, 0.05);
  border-color: rgba(44, 59, 45, 0.35);
}

.wwm-load-more-btn svg {
  transition: transform 200ms ease;
}

/* ── Primary CTA Button ──────────────────────────────────────────────────── */

.wwm-btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.5rem;
  background: var(--primary, #7B3B2A);
  color: var(--white, #fff) !important;
  border-radius: var(--radius, 8px);
  font-size: var(--text-s, 0.875rem);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 150ms ease;
}

.wwm-btn-primary:hover {
  opacity: 0.85;
  text-decoration: none;
}

/* ── WooCommerce Content Area ────────────────────────────────────────────── */

.woocommerce-MyAccount-content {
  min-width: 0;
}

.woocommerce-MyAccount-content h2 {
  font-size: var(--text-xl, 1.5rem);
  font-weight: 700;
  color: var(--base, #2C3B2D);
  margin-bottom: var(--space-m, 1.5rem);
}

/* ── Account Details Form ────────────────────────────────────────────────── */

/* Wrapper */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-MyAccount-content form.edit-account {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Field groups / rows */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row,
.woocommerce-account .woocommerce-MyAccount-content p.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
}

/* Two-column layout for first/last name */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row--first,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row--last {
  display: inline-flex;
  flex-direction: column;
  gap: 0.35rem;
  width: calc(50% - 0.5rem);
  margin-bottom: 1.25rem;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row--first {
  margin-right: 1rem;
}

/* Labels */
.woocommerce-account .woocommerce-MyAccount-content label,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row label {
  font-size: var(--text-xs, 0.8rem);
  font-weight: 600;
  color: rgba(44, 59, 45, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0;
}

/* Inputs */
.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(44, 59, 45, 0.2);
  border-radius: var(--radius, 8px);
  background: var(--white, #fff);
  font-size: var(--text-s, 0.875rem);
  color: var(--base, #2C3B2D);
  transition: border-color 120ms ease, box-shadow 120ms ease;
  outline: none;
  box-sizing: border-box;
}

.woocommerce-account .woocommerce-MyAccount-content input[type="text"]:focus,
.woocommerce-account .woocommerce-MyAccount-content input[type="email"]:focus,
.woocommerce-account .woocommerce-MyAccount-content input[type="password"]:focus,
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"]:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus {
  border-color: var(--primary, #7B3B2A);
  box-shadow: 0 0 0 3px rgba(123, 59, 42, 0.08);
}

/* Helper text under display name field */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row em,
.woocommerce-account .woocommerce-MyAccount-content p.form-row em {
  font-size: var(--text-xs, 0.72rem);
  color: rgba(44, 59, 45, 0.45);
  font-style: italic;
  margin-top: 0.2rem;
}

/* Section headings inside the form (Password change) */
.woocommerce-account .woocommerce-MyAccount-content fieldset {
  border: 1px solid rgba(44, 59, 45, 0.12);
  border-radius: var(--radius, 8px);
  padding: 1.25rem 1.25rem 0.5rem;
  margin: 0.5rem 0 1.25rem;
}

.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(44, 59, 45, 0.5);
  padding: 0 0.5rem;
}

/* Password eye icon wrapper */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Input-showpassword {
  position: relative;
}

/* Save Changes button */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"] {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.75rem;
  background: var(--base, #2C3B2D);
  color: var(--white, #fff) !important;
  border: none;
  border-radius: var(--radius, 8px);
  font-size: var(--text-s, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 150ms ease;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover {
  opacity: 0.85;
}

/* Notices / success messages */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
  border-radius: var(--radius, 8px);
  padding: 0.75rem 1rem;
  font-size: var(--text-s, 0.875rem);
  margin-bottom: 1.25rem;
  border-left-width: 3px;
  list-style: none;
}

/* ── Orders Table ────────────────────────────────────────────────────────── */

.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-s, 0.875rem);
}

.woocommerce-orders-table th {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(44, 59, 45, 0.55);
  border-bottom: 1px solid rgba(44, 59, 45, 0.12);
  padding: 0.5rem;
  text-align: left;
}

.woocommerce-orders-table td {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid rgba(44, 59, 45, 0.07);
  color: var(--base, #2C3B2D);
  vertical-align: middle;
}

.woocommerce-orders-table .button {
  padding: 4px 14px;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  background: var(--primary, #7B3B2A);
  color: var(--white, #fff);
  border-radius: var(--radius, 6px);
  text-decoration: none;
  transition: opacity 150ms ease;
}

.woocommerce-orders-table .button:hover {
  opacity: 0.8;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Stack grid to single column on mobile */
  .woocommerce-account #account-content .woocommerce {
    grid-template-columns: 1fr;
  }

  /* Sidenav: stack above content */
  .wwm-sidenav {
    position: static;
    min-width: 0;
    width: 100%;
  }

  /* Nav items: slightly larger tap targets */
  .woocommerce-MyAccount-navigation ul li a {
    padding: 1rem 1.1rem;
  }

  /* Workshop cards: stack vertically */
  .wwm-workshop-card {
    flex-direction: column;
  }

  .wwm-workshop-card__image {
    width: 100%;
    height: 140px;
  }

  .wwm-workshop-card__footer {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Account form: full-width first/last name */
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row--first,
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row--last {
    width: 100%;
    margin-right: 0;
    display: flex;
  }

  /* Welcome card */
  .wwm-welcome-card__inner {
    padding: 1rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   VIEW ORDER PAGE
   ══════════════════════════════════════════════════════════════════════════ */

/* Container wrapper — keeps content within site width */
.woocommerce-view-order #brx-content .woocommerce,
.woocommerce-view-order .woocommerce-MyAccount-content {
  max-width: var(--container-max-width, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--container-padding, 2rem);
  width: 100%;
  box-sizing: border-box;
}

/* Main view-order wrapper */
.wwm-view-order {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem 0;
}

/* Back link */
.wwm-view-order__back a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted, #888);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 150ms ease;
}

.wwm-view-order__back a:hover {
  color: var(--base, #2C3E2D);
}

/* Order header */
.wwm-view-order__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border, #e8e4e0);
}

.wwm-view-order__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted, #999);
  margin-bottom: 0.25rem;
}

.wwm-view-order__number {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--heading-color, #1a1a1a);
  margin: 0;
  line-height: 1.2;
}

/* Status badge */
.wwm-view-order__status {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 2rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.wwm-status--completed {
  background: #e8f5e9;
  color: #2e7d32;
}

.wwm-status--processing {
  background: #e3f2fd;
  color: #1565c0;
}

.wwm-status--pending,
.wwm-status--on-hold {
  background: #fff8e1;
  color: #f57f17;
}

.wwm-status--cancelled,
.wwm-status--failed {
  background: #fce4ec;
  color: #c62828;
}

/* Meta row */
.wwm-view-order__meta-row {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  background: var(--bg-light, #faf9f7);
  border: 1px solid var(--border, #e8e4e0);
  border-radius: var(--radius, 6px);
  padding: 1.25rem 1.5rem;
}

.wwm-view-order__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 120px;
}

.wwm-view-order__meta-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #999);
}

.wwm-view-order__meta-value {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text, #333);
}

/* Section blocks */
.wwm-view-order__section {
  background: var(--white, #fff);
  border: 1px solid var(--border, #e8e4e0);
  border-radius: var(--radius, 8px);
  overflow: hidden;
}

.wwm-view-order__section-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--heading-color, #1a1a1a);
  margin: 0;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border, #e8e4e0);
  background: var(--bg-light, #faf9f7);
}

.wwm-view-order__section-title svg {
  color: var(--primary, #7B3B2A);
  flex-shrink: 0;
}

/* Workshop card */
.wwm-view-order__workshop-card {
  padding: 1.5rem;
}

.wwm-view-order__workshop-card + .wwm-view-order__workshop-card {
  border-top: 1px solid var(--border, #e8e4e0);
}

.wwm-view-order__workshop-header {
  margin-bottom: 1.25rem;
}

.wwm-view-order__workshop-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--heading-color, #1a1a1a);
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.wwm-view-order__workshop-title a {
  color: inherit;
  text-decoration: none;
}

.wwm-view-order__workshop-title a:hover {
  color: var(--primary, #7B3B2A);
}

.wwm-view-order__workshop-date {
  font-size: 0.85rem;
  color: var(--primary, #7B3B2A);
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.wwm-view-order__workshop-venue {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--text-muted, #888);
}

/* Attendee details */
.wwm-view-order__attendee {
  background: var(--bg-light, #faf9f7);
  border: 1px solid var(--border, #e8e4e0);
  border-radius: var(--radius, 6px);
  padding: 1.25rem;
}

.wwm-view-order__attendee-heading {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted, #999);
  margin: 0 0 1rem 0;
}

.wwm-view-order__attendee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.wwm-view-order__attendee-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.wwm-view-order__field-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #999);
}

.wwm-view-order__field-value {
  font-size: 0.875rem;
  color: var(--text, #333);
  font-weight: 500;
}

.wwm-view-order__field-value a {
  color: var(--primary, #7B3B2A);
  text-decoration: none;
}

.wwm-view-order__field-value a:hover {
  opacity: 0.8;
}

.wwm-view-order__field-value--mono {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--text-muted, #666);
}

/* Standard WC order details section — clean up default styles */
.wwm-view-order__section--order-details .woocommerce-order-details,
.wwm-view-order__section--order-details .woocommerce-customer-details {
  margin: 0;
  padding: 1.5rem;
}

.wwm-view-order__section--order-details .woocommerce-order-details__title,
.wwm-view-order__section--order-details h2 {
  display: none; /* Title already in section header */
}

.wwm-view-order__section--order-details table.woocommerce-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.wwm-view-order__section--order-details table.woocommerce-table th,
.wwm-view-order__section--order-details table.woocommerce-table td {
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border, #e8e4e0);
  text-align: left;
}

.wwm-view-order__section--order-details table.woocommerce-table thead th {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #999);
  background: var(--bg-light, #faf9f7);
}

.wwm-view-order__section--order-details table.woocommerce-table tfoot th,
.wwm-view-order__section--order-details table.woocommerce-table tfoot td {
  font-weight: 600;
  background: var(--bg-light, #faf9f7);
}

.wwm-view-order__section--order-details table.woocommerce-table tfoot tr:last-child th,
.wwm-view-order__section--order-details table.woocommerce-table tfoot tr:last-child td {
  font-size: 1rem;
  color: var(--heading-color, #1a1a1a);
}

/* Order Again button */
.wwm-view-order__section--order-details .woocommerce-order-details .button,
.wwm-view-order__section--order-details .order-again .button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--base, #2C3E2D);
  color: var(--white, #fff);
  border: none;
  border-radius: var(--radius, 6px);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 150ms ease;
}

.wwm-view-order__section--order-details .woocommerce-order-details .button:hover,
.wwm-view-order__section--order-details .order-again .button:hover {
  opacity: 0.85;
}

/* View-order responsive */
@media (max-width: 768px) {
  .wwm-view-order__meta-row {
    gap: 1rem;
  }

  .wwm-view-order__attendee-grid {
    grid-template-columns: 1fr 1fr;
  }

  .wwm-view-order__header {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .wwm-view-order__attendee-grid {
    grid-template-columns: 1fr;
  }

  .wwm-view-order__meta-row {
    flex-direction: column;
    gap: 0.75rem;
  }
}