/* My account and the confirmation pages (P3-07): temporary designs built from the account card (reference/design-gaps.md).
   The owner supplies final designs later; these rules are easy to replace. */
.pbly .account-form { display: grid; }

/* Confirmation pages: an icon, a heading, a text and a link on the login card. */
.pbly .account-card--notice .account-card__main { justify-items: start; gap: var(--pbly-space-4); }
.pbly .account-card--notice .account-card__title { margin-bottom: 0; }
.pbly .account-card__icon { width: var(--pbly-space-12); height: var(--pbly-space-12); }
.pbly .account-card__text { color: var(--pbly-color-text-muted); line-height: var(--pbly-font-line-height-body); }

/* My account: a wider card, the segment line under the title, the pages as links styled like the registration tabs. */
.pbly .account-card.account-card--wide { width: min(100%, var(--pbly-layout-wrapper-narrow)); }

.pbly .account-card__subtitle {
  margin: calc(-1 * var(--pbly-space-3)) 0 var(--pbly-space-6);
  color: var(--pbly-color-action-primary);
  font-weight: var(--pbly-font-weight-semibold);
}

.pbly .account-tabs--links { flex-wrap: wrap; column-gap: var(--pbly-space-5); }
.pbly .account-tabs--links .account-tabs__tab { flex: 0 0 auto; text-decoration: none; }
.pbly .account-tabs--links .account-tabs__tab[aria-current="page"] { border-color: var(--pbly-color-action-primary); color: var(--pbly-color-action-primary); }

.pbly .account-area {
  display: grid;
  gap: var(--pbly-space-4);
  color: var(--pbly-color-text-muted);
  line-height: var(--pbly-font-line-height-body);
}

.pbly .account-area a { color: var(--pbly-color-palette-green-link); }
.pbly .account-area a:hover { color: var(--pbly-color-action-hover); }
.pbly .account-area h2,
.pbly .account-area h3 { color: var(--pbly-color-text-primary); font-weight: var(--pbly-font-weight-bold); }

/* Orders and order details. */
.pbly .account-area table { width: 100%; border-collapse: collapse; }
.pbly .account-area :is(th, td) { padding: var(--pbly-space-3-5) var(--pbly-space-2); border-bottom: 1px solid var(--pbly-color-border-default); text-align: left; vertical-align: top; }
.pbly .account-area th { color: var(--pbly-color-text-primary); font-weight: var(--pbly-font-weight-semibold); }

/* WooCommerce's buttons and the form fields of the addresses and account details. */
.pbly .account-area .button,
.pbly .account-area button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pbly-space-3-5) var(--pbly-space-6);
  border: 1px solid transparent;
  border-radius: var(--pbly-radius-md-plus);
  background: var(--pbly-color-action-primary);
  color: var(--pbly-color-action-on-primary);
  font: inherit;
  font-weight: var(--pbly-font-weight-semibold);
  text-decoration: none;
  cursor: pointer;
}

.pbly .account-area .button:hover,
.pbly .account-area button[type="submit"]:hover { background: var(--pbly-color-action-hover); color: var(--pbly-color-action-on-primary); }

.pbly .account-area .form-row { display: grid; gap: var(--pbly-space-1); margin: 0 0 var(--pbly-space-3-5); }
.pbly .account-area .form-row label { color: var(--pbly-color-text-soft); font-size: var(--pbly-font-size-sm); font-weight: var(--pbly-font-weight-semibold); }
.pbly .account-area .required { color: var(--pbly-color-palette-red); text-decoration: none; }

.pbly .account-area :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select, textarea) {
  width: 100%;
  padding: var(--pbly-space-4);
  border: 1px solid var(--pbly-color-palette-line-dark);
  border-radius: var(--pbly-radius-md);
  background: var(--pbly-color-surface-raised);
  color: var(--pbly-color-text-primary);
  font: inherit;
  font-weight: var(--pbly-font-weight-semibold);
}

.pbly .account-area :is(input, select, textarea):focus {
  border-color: var(--pbly-color-action-primary);
  outline: 1px solid var(--pbly-color-action-primary);
  outline-offset: -2px;
}

.pbly .account-area fieldset { margin: var(--pbly-space-4) 0 0; padding: 0; border: 0; }
.pbly .account-area legend { padding: 0; color: var(--pbly-color-text-primary); font-weight: var(--pbly-font-weight-bold); }

/* Addresses: billing and shipping side by side. */
.pbly .account-area .woocommerce-Addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pbly-space-6); }
.pbly .account-area .woocommerce-Addresses .col-1,
.pbly .account-area .woocommerce-Addresses .col-2 { float: none; width: auto; }
.pbly .account-area .woocommerce-Address-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--pbly-space-2); }
.pbly .account-area address { font-style: normal; }

@media (max-width: 47.9375rem) {
  .pbly .account-area .woocommerce-Addresses { grid-template-columns: 1fr; }

  /* Order tables become stacked rows. */
  .pbly .account-area table.shop_table_responsive thead { display: none; }
  .pbly .account-area table.shop_table_responsive :is(tbody, tr, td) { display: block; width: 100%; }
  .pbly .account-area table.shop_table_responsive td[data-title]::before { content: attr(data-title) ": "; font-weight: var(--pbly-font-weight-semibold); color: var(--pbly-color-text-primary); }
  .pbly .account-area table.shop_table_responsive td { border-bottom: 0; padding-block: var(--pbly-space-1); }
  .pbly .account-area table.shop_table_responsive tr { padding-block: var(--pbly-space-3-5); border-bottom: 1px solid var(--pbly-color-border-default); }
}