/**
 * User page theming.
 *
 * Form element styles (labels, inputs, buttons, descriptions) are handled
 * globally in css/components/form.css. This file only contains layout and
 * card-wrapper styles specific to user pages.
 */

/* ==========================================================================
   Shared user page styles.
   ========================================================================== */

/* Hide breadcrumb on user pages. */
body.path-user .region-breadcrumb {
  display: none;
}

/* Tabs styling. */
body.path-user .tabs {
  margin: 0;
}

body.path-user ul.tabs.primary {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  border-bottom: 2px solid var(--color-pale-grey);
  list-style: none;
}

body.path-user .tabs.primary > li {
  margin: 0;
}

body.path-user .tabs.primary a {
  display: block;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-base);
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--color-dark-grey);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  background: none;
}

body.path-user .tabs.primary a.is-active {
  color: var(--color-blue-dk);
  border-bottom-color: var(--color-blue-dk);
  background: none;
}

body.path-user .tabs.primary a:hover {
  color: var(--color-blue-tq-text);
  border-bottom-color: var(--color-blue-tq-text);
  background: none;
}

/* ==========================================================================
   Login and password reset form cards.
   ========================================================================== */

.user-login-form,
.user-pass {
  max-width: 28rem;
  border: var(--border);
  border-radius: 0.5rem;
  padding: 2rem;
  margin-top: 2rem;
  background-color: var(--color-white);
}

/* Password reset help text. */
.user-pass p {
  font-size: var(--font-size-small);
  color: var(--color-dark-grey);
  margin-top: 0.5rem;
  line-height: 1.4;
}

/* ==========================================================================
   User edit form card.
   ========================================================================== */

.user-form {
  max-width: 32rem;
  border: var(--border);
  border-radius: 0.5rem;
  padding: 2rem;
  margin-top: 2rem;
  background-color: var(--color-white);
}

/* Password strength indicator. */
.user-form .password-strength {
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}

.user-form .password-strength__meter {
  height: 0.35rem;
  border-radius: 0.25rem;
  background-color: var(--color-pale-grey);
  overflow: hidden;
}

.user-form .password-strength__indicator {
  height: 100%;
  border-radius: 0.25rem;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.user-form .password-strength__title {
  font-size: var(--font-size-smaller);
  color: var(--color-dark-grey);
  margin-top: 0.35rem;
}

/* Password confirm message. */
.user-form .password-confirm-message {
  font-size: var(--font-size-smaller);
  color: var(--color-dark-grey);
  margin-top: 0.25rem;
}

/* Password confirm wrapper description. */
.user-form .form-item-pass .description {
  margin-top: 0.75rem;
}

/* ==========================================================================
   Orders table.
   ========================================================================== */

.view-commerce-user-orders {
  margin-top: 2rem;
}

.view-commerce-user-orders table {
  width: 100%;
  border-collapse: collapse;
  border: none;
  font-family: var(--font-base);
}

.view-commerce-user-orders thead th {
  padding: 0.75rem 1rem;
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--color-heading);
  text-align: left;
  border-bottom: 2px solid var(--color-pale-grey);
  background: none;
}

.view-commerce-user-orders thead th a {
  color: var(--color-heading);
  text-decoration: none;
}

.view-commerce-user-orders thead th a:hover {
  color: var(--color-blue-tq-text);
}

.view-commerce-user-orders tbody tr {
  border-bottom: 1px solid var(--color-pale-grey);
}

.view-commerce-user-orders tbody tr:last-child {
  border-bottom: none;
}

.view-commerce-user-orders tbody tr:nth-child(even) {
  background: none;
}

.view-commerce-user-orders tbody tr:hover {
  background-color: var(--color-pale-orange);
}

.view-commerce-user-orders tbody td {
  padding: 0.75rem 1rem;
  font-size: var(--font-size-small);
  color: var(--color-text);
  vertical-align: middle;
  border: none;
  background: none;
}

.view-commerce-user-orders td.is-active,
.view-commerce-user-orders th.is-active {
  background: none;
}

.view-commerce-user-orders .views-field-order-number a {
  color: var(--color-blue-tq-text);
  font-weight: 600;
  text-decoration: none;
}

.view-commerce-user-orders .views-field-order-number a:hover {
  color: var(--color-blue-dk);
  text-decoration: underline;
}

.view-commerce-user-orders .views-field-total-price__number {
  font-weight: 600;
  color: var(--color-heading);
}

.view-commerce-user-orders .views-field-state {
  color: var(--color-dark-grey);
}