/* Account pages (login, registration, password reset): a white card over the animal artwork, as on faberpet.ro. */
.pbly .account-page + .site-footer { margin-top: 0; }

.pbly .account {
  padding-block: var(--pbly-space-20);
  background: var(--pbly-color-palette-mint-pale) url("../../images/account/background.jpg") 100% 50% / cover no-repeat;
}

.pbly .account-card {
  display: grid;
  gap: var(--pbly-space-7);
  width: min(100%, var(--pbly-layout-card-account));
  margin-left: var(--pbly-space-20);
  padding: var(--pbly-space-15);
  border-radius: var(--pbly-radius-xl);
  background: var(--pbly-color-surface-raised);
  box-shadow: var(--pbly-shadow-card);
}

.pbly .account-card__main { display: grid; }

/* The registration card is 14px taller at the bottom on faberpet.ro. */
.pbly .account-card--register { padding-bottom: calc(var(--pbly-space-15) + var(--pbly-space-3-5)); }

.pbly .account-card__title {
  margin-bottom: var(--pbly-space-6);
  color: var(--pbly-color-text-primary);
  font-size: var(--pbly-font-size-2xl);
  font-weight: var(--pbly-font-weight-bold);
  line-height: var(--pbly-font-line-height-tight);
}

.pbly .account-card__links {
  display: grid;
  gap: var(--pbly-space-5);
  font-weight: var(--pbly-font-weight-medium);
}

.pbly .account-card__links a {
  color: var(--pbly-color-palette-green-link);
  text-decoration: none;
  transition: color 0.2s;
}

.pbly .account-card__links a:hover { color: var(--pbly-color-action-hover); }

.pbly .account-card__switch {
  color: var(--pbly-color-text-primary);
  font-weight: var(--pbly-font-weight-bold);
}

/* Registration: "Persoană fizică" and "Persoană juridică" tabs, each with its own form. */
.pbly .account-tabs {
  display: flex;
  margin-bottom: var(--pbly-space-7);
}

.pbly .account-tabs__tab {
  flex: 1 1 auto;
  padding-block: var(--pbly-space-4);
  border-bottom: 2px solid var(--pbly-color-border-default);
  color: var(--pbly-color-text-soft);
  font-weight: var(--pbly-font-weight-semibold);
  line-height: var(--pbly-font-line-height-body);
  text-align: left;
  transition: color 0.2s, border-color 0.2s;
}

.pbly .account-tabs__tab:hover { color: var(--pbly-color-action-primary); }

.pbly .account-tabs__tab[aria-selected="true"] {
  border-color: var(--pbly-color-action-primary);
  color: var(--pbly-color-action-primary);
}

.pbly .account-card__title + .account-tabs { margin-top: calc(-1 * var(--pbly-space-1)); }

/* Tablets: the card moves to the middle. */
@media (max-width: 64rem) {
  .pbly .account-card { margin-inline: auto; }
}

/* Phones: 16px side margins, a smaller card padding and title. */
@media (max-width: 47.9375rem) {
  .pbly .account { padding-block: var(--pbly-space-10); }
  .pbly .account > .wrapper { width: min(100% - 2 * var(--pbly-space-4), var(--pbly-layout-wrapper-max)); }

  .pbly .account-card { padding: var(--pbly-space-10); }
  .pbly .account-card--register { padding-bottom: calc(var(--pbly-space-10) + var(--pbly-space-3-5)); }
  .pbly .account-card__title { font-size: var(--pbly-font-size-xl-plus); }
}