/* =============================================================================
   Modules
   ========================================================================== */

/* Registration */
.registration {
  max-width: 880px;
}

.registration__intro {
  margin-bottom: 2rem;
}

.registration__loginlink {
  font-weight: var(--f-weight-sb);
}

.registration__section {
  margin: 0 0 1.5rem;
  padding: 1.25rem;
  border: 0;
  border-radius: var(--b-radius-m);
  background: rgb(var(--c-neutral-lighter));
}

.registration__legend {
  float: left;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0;
  font-family: var(--f-family-2);
  font-size: var(--f-size-l-2);
  font-weight: var(--f-weight-b);
  color: rgb(var(--c-neutral-darker));
}

.registration__legend + * {
  clear: both;
}

.registration__section.-optional .registration__legend {
  float: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  cursor: pointer;
  list-style: none;
}

.registration__section.-optional .registration__legend::-webkit-details-marker {
  display: none;
}

.registration__section.-optional .registration__legend::after {
  content: "\f078";
  margin-left: auto;
  font-family: "FaSolid", sans-serif;
  font-size: var(--f-size-s-1);
  color: rgb(var(--c-primary));
  transition: transform 0.3s ease;
}

.registration__section.-optional[open] .registration__legend {
  margin-bottom: 1rem;
}

.registration__section.-optional[open] .registration__legend::after {
  transform: rotate(180deg);
}

.registration__optional {
  font-family: var(--f-family);
  font-size: var(--f-size-s-1);
  font-weight: var(--f-weight-n);
  color: rgb(var(--c-neutral-dark));
}

.registration__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 1.25rem;
}

.registration__field {
  grid-column: span 6;
}

.registration .form-group {
  margin-bottom: 0.75rem;
}

.registration .form-group > label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: var(--f-weight-sb);
  color: rgb(var(--c-neutral-darker));
}

.registration .form-required {
  color: rgb(var(--c-primary));
}

.registration .form-control {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  border-radius: var(--b-radius-s);
  background-color: rgb(var(--c-neutral-lightest));
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.registration .form-control:focus {
  border-color: rgb(var(--c-primary));
  box-shadow: 0 0 0 3px rgba(var(--c-primary), 0.15);
}

.registration .form-hint {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--f-size-s-1);
  color: rgb(var(--c-neutral-dark));
}

.registration .form-control.is-invalid {
  border-color: rgb(var(--c-primary));
}

.registration .invalid-feedback {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.35rem;
  font-size: var(--f-size-s-1);
  font-weight: var(--f-weight-sb);
  color: rgb(var(--c-primary));
}

.registration .invalid-feedback::before {
  content: "\f06a";
  font-family: "FaSolid", sans-serif;
}

/* Password */
.form-password {
  position: relative;
}

.form-password .form-control {
  padding-right: 3rem;
}

.form-password__toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 3rem;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(var(--c-neutral-dark));
  cursor: pointer;
}

.form-password__toggle::before {
  content: "\f06e";
  font-family: "FaRegular", sans-serif;
}

.form-password__toggle[aria-pressed="true"]::before {
  content: "\f070";
}

/* Price group choice (radio buttons) */
.registration__choice {
  min-width: 0;
  margin: 0 0 0.75rem;
  padding: 0;
  border: 0;
}

.registration__choicelabel {
  margin-bottom: 0.35rem;
  padding: 0;
  font-size: inherit;
  font-weight: var(--f-weight-sb);
  color: rgb(var(--c-neutral-darker));
}

.registration__choice .form-check + .form-check {
  margin-top: 0.35rem;
}

/* Teaser below the choice, e.g. "Noch kein GKMB-Kunde? Mehr über GKMB erfahren" */
.registration__teaser {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 1.25rem;
  border-left: 4px solid rgb(var(--c-primary));
  border-radius: var(--b-radius-s);
  background-color: rgb(var(--c-neutral-lightest));
  box-shadow: 0 2px 10px rgba(var(--c-neutral-darkest), 0.06);
}

.registration__teasericon {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  font-size: 1.25rem;
  color: rgb(var(--c-primary));
  background-color: rgba(var(--c-primary), 0.1);
}

.registration__teasertext p {
  margin: 0 0 0.75rem;
  font-size: var(--f-size-s-1);
  color: rgb(var(--c-neutral-dark));
}

.registration__teasertext .registration__teasertitle {
  margin-bottom: 0.25rem;
  font-size: var(--f-size);
  font-weight: var(--f-weight-sb);
  color: rgb(var(--c-neutral-darker));
}

.registration__teasertext a {
  display: inline-block;
  text-decoration: none;
}

/* gkmb_base turns the button arrow of new-window links into a small external icon; keep the normal button arrow */
.registration__teasertext a[rel="noopener"] > .font__button::after {
  content: "\f061";
  display: flex;
  margin-left: 0;
  font-family: "FaSolid", sans-serif;
  font-size: inherit;
  vertical-align: baseline;
}

/* Footer */
.registration__footer {
  padding-top: 0.5rem;
}

.registration .form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.registration .form-check-input {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.2rem 0 0;
  accent-color: rgb(var(--c-primary));
  cursor: pointer;
}

.registration .form-check-label {
  cursor: pointer;
}

.registration__mandatory {
  margin: 0.5rem 0 1.5rem;
  font-size: var(--f-size-s-1);
  color: rgb(var(--c-neutral-dark));
}

.registration__submit {
  width: 100%;
  font-size: var(--f-size);
  cursor: pointer;
}

/* =============================================================================
   Media Queries
   ========================================================================== */

@media (min-width: 640px) {
  .registration__field.-half {
    grid-column: span 3;
  }

  .registration__field.-third {
    grid-column: span 2;
  }

  .registration__field.-twothirds {
    grid-column: span 4;
  }

  .registration__submit {
    width: auto;
  }
}

@media (min-width: 800px) {
  .registration__section {
    padding: 1.75rem 2rem;
  }
}

/* =============================================================================
   Login (felogin): login card and registration card side by side
   ========================================================================== */
/* the login sits in a 30/70 container whose right column is empty: use the full width */
.grid__12:has(.frame-type-felogin_login) > .grid__col.-w30 {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
}

.grid__12:has(.frame-type-felogin_login) > .grid__col.-w70:not(:has(.frame)) {
  display: none;
}

.login__message {
  margin-bottom: 1.25rem;
}

.login__message p:last-child {
  margin-bottom: 0;
}

/* failed login: message as a red hint box */
.login__message.-error {
  padding: 0.9rem 1rem;
  border-left: 4px solid rgb(var(--c-primary));
  border-radius: var(--b-radius-s);
  background: rgb(var(--c-neutral-lightest));
  font-size: var(--f-size-s-1);
}

.login {
  display: grid;
  gap: var(--g-gap);
  max-width: 900px;
}

.login__card {
  padding: 1.5rem 1.25rem;
  background: rgb(var(--c-neutral-lighter));
  border-radius: var(--b-radius-m);
}

.login__title {
  margin-bottom: 1rem;
  font-size: var(--f-size-l-2);
}

.frame-type-felogin_login fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.frame-type-felogin_login fieldset > div {
  margin-bottom: 1.25rem;
}

.frame-type-felogin_login label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: var(--f-weight-sb);
  font-size: var(--f-size-s-1);
}

.frame-type-felogin_login input[type="text"],
.frame-type-felogin_login input[type="password"] {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.7rem 0.9rem;
  border: 2px solid rgb(var(--c-neutral-light));
  border-radius: var(--b-radius-s);
  background: rgb(var(--c-neutral-lightest));
  font: inherit;
  transition: border-color 0.2s ease;
}

.frame-type-felogin_login input[type="text"]:focus,
.frame-type-felogin_login input[type="password"]:focus {
  border-color: rgb(var(--c-primary));
  outline: none;
}

.frame-type-felogin_login input[type="text"]:focus-visible,
.frame-type-felogin_login input[type="password"]:focus-visible {
  outline: 3px solid rgba(var(--c-primary), 0.25);
}

.login label[for="permalogin"] {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

.login #permalogin {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  accent-color: rgb(var(--c-primary));
}

.frame-type-felogin_login input[type="submit"] {
  margin: 0;
  cursor: pointer;
}

.login fieldset > div:has(input[type="submit"]) {
  margin-bottom: 0;
}

.login__forgot {
  display: inline-block;
  margin-top: 1rem;
  font-size: var(--f-size-s-1);
}

.login__text {
  margin-bottom: 1rem;
}

.login__user {
  margin-bottom: 1.5rem;
  font-size: var(--f-size-l-1);
}

.login__benefits {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.login__benefits li {
  position: relative;
  list-style: none;
  margin-bottom: 0.6rem;
  padding-left: 1.75rem;
}

.login__benefits li::before {
  content: "\f00c";
  position: absolute;
  left: 0;
  top: 0;
  font-family: "FaSolid", sans-serif;
  color: rgb(var(--c-primary));
}

/* forgot password / change password: form as a card like the login */
.frame-type-felogin_login form:not(.login form) {
  max-width: 440px;
  margin: 1rem 0;
  padding: 1.5rem 1.25rem;
  background: rgb(var(--c-neutral-lighter));
  border-radius: var(--b-radius-m);
}

.frame-type-felogin_login form:not(.login form) legend {
  display: none;
}

.frame-type-felogin_login form:not(.login form) ~ ul,
.frame-type-felogin_login form:not(.login form) + p + ul {
  padding-left: 1.25rem;
  font-size: var(--f-size-s-1);
}

/* notice above the login cards, e.g. after requesting a password reset */
.login__notice {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  max-width: 900px;
  margin-bottom: var(--g-gap);
  padding: 1.25rem;
  background: rgb(var(--c-neutral-lighter));
  border-left: 5px solid rgb(var(--c-primary));
  border-radius: var(--b-radius-m);
  animation: shop-toast-in 0.35s ease-out;
}

.login__noticeicon {
  display: flex;
  flex: 0 0 44px;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgb(var(--c-primary));
  color: rgb(var(--c-neutral-lightest));
  font-size: 18px;
}

.login__notice.-ok .login__noticeicon::before {
  content: "\f0e0";
  font-family: "FaSolid", sans-serif;
}

.login__notice.-error .login__noticeicon::before {
  content: "\f12a";
  font-family: "FaSolid", sans-serif;
}

.login__noticetext {
  padding-top: 0.55rem;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .login__notice {
    animation: none;
  }
}

@media (min-width: 768px) {
  .login {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .login__card {
    padding: 2rem;
  }
}

/* Registration done / account activated: cards come from shop.css (.shop-request-success) */
/* the page jumps to this anchor after submitting: keep it clear of the sticky header bar */
#registration-form-anchor {
  display: block;
  scroll-margin-top: 8rem;
}

.shop-request-success__text + .shop-request-success__text {
  margin-top: 0.75rem;
}
.registration__spamhint {
  margin: 1.25rem 0 0;
  font-size: var(--f-size-s-1);
  color: rgb(var(--c-neutral-dark));
}

.registration__error {
  max-width: 900px;
  margin-bottom: var(--g-gap);
  padding: 0.9rem 1rem;
  border-left: 4px solid rgb(var(--c-primary));
  border-radius: var(--b-radius-s);
  background: rgb(var(--c-neutral-lighter));
}