/**
 * Customer-portal registration form.
 *
 * Mirrors the contact-form treatment (placeholder-in-field, grey boxes, black
 * submit) and reproduces kaindl.com's 2-column grid as closely as Drupal's form
 * structure allows. Fields are sized to kaindl's measurements (683px container,
 * 30px gap → half = 326px, two-thirds = 444px, one-third = 209px).
 *
 * Layout note: First name / Surname / Street / Number / Postcode / Town /
 * Country are rendered together inside Drupal's address widget, so the address
 * rows are laid out within that widget (a real flex container). Name affix,
 * Company, Phone, Mobile and Email live outside it and are paired with floats.
 * Scoped to .site-shell--registration so nothing leaks site-wide.
 */

.site-shell--registration .layout-main {
  padding-bottom: 96px;
  padding-top: 46px;
}

.site-shell--registration #user-register-form {
  margin: 0 auto;
  max-width: 683px;
  width: 100%;
}

.site-shell--registration #user-register-form::after {
  clear: both;
  content: "";
  display: block;
}

/* Hide field descriptions and the redundant group/section labels. */
.site-shell--registration #user-register-form .description,
.site-shell--registration #edit-mail--description,
.site-shell--registration #edit-customer-profiles-0 > summary,
.site-shell--registration #edit-customer-profiles-0 legend {
  display: none;
}

/* ---- Field styling: grey boxes with in-field placeholders ---- */
.site-shell--registration #user-register-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.site-shell--registration #user-register-form textarea,
.site-shell--registration #user-register-form select {
  appearance: none;
  background: #e5e5e5;
  border: 1px solid #d2d2d2;
  border-radius: 0;
  box-sizing: border-box;
  color: #000;
  display: block;
  font-family: var(--kaindl-font-family);
  font-size: 14px;
  font-weight: 700;
  line-height: 1rem;
  max-width: 100%;
  min-height: 74px;
  outline: 0;
  padding: 28px;
  width: 100%;
}

.site-shell--registration #user-register-form select {
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='7' viewBox='0 0 11 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 19px center;
  background-repeat: no-repeat;
  padding-right: 56px;
}

.site-shell--registration #user-register-form input::placeholder,
.site-shell--registration #user-register-form textarea::placeholder {
  color: #000;
  opacity: 1;
}

.site-shell--registration #user-register-form textarea {
  line-height: 1.5;
  min-height: 120px;
  resize: vertical;
}

/* Inner form-item wrappers: kill default margins. */
.site-shell--registration #edit-customer-profiles-0 .form-item,
.site-shell--registration #edit-customer-profiles-0 .js-form-item,
.site-shell--registration #edit-account .form-item,
.site-shell--registration #edit-account .js-form-item {
  margin: 0;
}

/* ---- Email is relocated into the address grid (see country/email rows
   below), so the now-empty account section is hidden — but ONLY when the
   relocation actually happened (the form carries .kaindl-email-relocated).
   If the #after_build ever bails, the email field stays visible here. ---- */
.site-shell--registration #user-register-form.kaindl-email-relocated #edit-account {
  display: none;
}

/* ---- Profile fields (clearfixed float rows) ---- */
.site-shell--registration #edit-customer-profiles-0::after {
  clear: both;
  content: "";
  display: block;
}

/* Salutation: full width, full-width select. */
.site-shell--registration #edit-customer-profiles-0 > .field--name-field-kaindl-salutation {
  clear: both;
  margin-bottom: 32px;
  width: 100%;
}

.site-shell--registration #edit-customer-profiles-0 > .field--name-field-kaindl-salutation select {
  max-width: none;
}

/* Name affix | Company. */
.site-shell--registration #edit-customer-profiles-0 > .field--name-field-kaindl-name-affix {
  clear: both;
  float: left;
  margin-bottom: 32px;
  width: calc(50% - 15px);
}

.site-shell--registration #edit-customer-profiles-0 > .field--name-field-kaindl-company {
  float: right;
  margin-bottom: 32px;
  width: calc(50% - 15px);
}

/* Address block spans the full row; its internals use a real flex container. */
.site-shell--registration #edit-customer-profiles-0 > .field--name-address {
  clear: both;
  margin-bottom: 32px;
  width: 100%;
}

.site-shell--registration #edit-customer-profiles-0 fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/* The address widget's outer wrapper (div[id$="-entity-address-0-address"]) is
   the real flex container — order + flex-basis work reliably on its direct
   children. The First/Surname sub-wrapper (.address-container-inline) is
   flattened with display:contents so its two fields participate directly in
   that same flex row instead of forming a nested box.
   NOTE: these selectors depend on the address widget's markup and its
   auto-generated wrapper #id; revisit them if the address module markup
   changes on a contrib update. */
.site-shell--registration #edit-customer-profiles-0 .address-container-inline {
  display: contents;
}

.site-shell--registration #edit-customer-profiles-0 div[id="edit-customer-profiles-0-entity-address-0-address"],
.site-shell--registration #edit-customer-profiles-0 div[id^="edit-customer-profiles-0-entity-address-0-address--"] {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 30px;
}

.site-shell--registration #edit-customer-profiles-0 div[id="edit-customer-profiles-0-entity-address-0-address"] > *,
.site-shell--registration #edit-customer-profiles-0 div[id^="edit-customer-profiles-0-entity-address-0-address--"] > *,
.site-shell--registration #edit-customer-profiles-0 .address-container-inline > .form-item {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

/* Country: hide its external label and reserve a half-width cell, placed last. */
.site-shell--registration #edit-customer-profiles-0 div[id="edit-customer-profiles-0-entity-address-0-address-country-code"],
.site-shell--registration #edit-customer-profiles-0 div[id^="edit-customer-profiles-0-entity-address-0-address-country-code--"] {
  flex: 0 0 calc(50% - 15px);
  order: 9;
}

.site-shell--registration #edit-customer-profiles-0 .field--name-address label {
  display: none;
}

/* Email: relocated into the address grid (via #after_build) to pair with
   Country on the same row. */
.site-shell--registration #edit-customer-profiles-0 div[id="edit-customer-profiles-0-entity-address-0-address"] > .form-type-email,
.site-shell--registration #edit-customer-profiles-0 div[id^="edit-customer-profiles-0-entity-address-0-address--"] > .form-type-email {
  flex: 0 0 calc(50% - 15px);
  order: 10;
}

/* First name | Surname (these sit in their own inline container). */
.site-shell--registration #edit-customer-profiles-0 .address-container-inline > .form-item:has(> input.given-name) {
  flex: 0 0 calc(50% - 15px);
  order: 1;
}

.site-shell--registration #edit-customer-profiles-0 .address-container-inline > .form-item:has(> input.family-name) {
  flex: 0 0 calc(50% - 15px);
  order: 2;
}

/* Street name (⅔) | Street number (⅓). */
.site-shell--registration #edit-customer-profiles-0 .form-item:has(> input.address-line1) {
  flex: 0 0 calc(68% - 20px);
  order: 3;
}

.site-shell--registration #edit-customer-profiles-0 .form-item:has(> input.address-line2) {
  flex: 0 0 calc(32% - 10px);
  order: 4;
}

/* Postcode (⅓) | Town (⅔). */
.site-shell--registration #edit-customer-profiles-0 .form-item:has(> input.postal-code) {
  flex: 0 0 calc(32% - 10px);
  order: 5;
}

.site-shell--registration #edit-customer-profiles-0 .form-item:has(> input.locality) {
  flex: 0 0 calc(68% - 20px);
  order: 6;
}

/* Telephone | Mobile. */
.site-shell--registration #edit-customer-profiles-0 > .field--name-field-kaindl-phone {
  clear: both;
  float: left;
  margin-bottom: 32px;
  width: calc(50% - 15px);
}

.site-shell--registration #edit-customer-profiles-0 > .field--name-field-kaindl-mobile {
  float: right;
  margin-bottom: 32px;
  width: calc(50% - 15px);
}

/* Remarks: full width. */
.site-shell--registration #edit-customer-profiles-0 > .field--name-field-kaindl-remarks {
  clear: both;
  width: 100%;
}

/* ---- Terms (Legal module) ---- */
.site-shell--registration #edit-legal {
  border: 0;
  clear: both;
  margin: 32px 0 0;
  padding: 0;
}

.site-shell--registration #edit-legal > summary {
  display: none;
}

.site-shell--registration #edit-legal textarea {
  font-weight: 400;
  min-height: 120px;
}

.site-shell--registration .form-item-legal-accept {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.site-shell--registration .form-item-legal-accept input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 2px;
}

.site-shell--registration .form-item-legal-accept label {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

/* ---- Submit: black, uppercase, like the contact form ---- */
.site-shell--registration #edit-actions {
  clear: both;
  margin-top: 28px;
}

.site-shell--registration #edit-actions .form-submit,
.site-shell--registration #edit-actions button[type="submit"] {
  background: #000;
  border: 0;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--kaindl-font-family);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 1.7;
  min-height: 44px;
  padding: 12px 22px 13px;
  text-transform: uppercase;
  width: auto;
}

.site-shell--registration #edit-actions .form-submit:hover,
.site-shell--registration #edit-actions button[type="submit"]:hover,
.site-shell--registration #edit-actions .form-submit:focus-visible,
.site-shell--registration #edit-actions button[type="submit"]:focus-visible {
  background: #111;
  color: #fff;
}

/* ---- Mobile: collapse to a single column ---- */
@media (max-width: 767px) {
  .site-shell--registration .layout-main {
    padding-bottom: 72px;
    padding-top: 34px;
  }

  .site-shell--registration #edit-account,
  .site-shell--registration #edit-customer-profiles-0 > [class*="field--name"] {
    float: none;
    width: 100%;
  }

  .site-shell--registration #edit-customer-profiles-0 div[id="edit-customer-profiles-0-entity-address-0-address"] > *,
  .site-shell--registration #edit-customer-profiles-0 div[id^="edit-customer-profiles-0-entity-address-0-address--"] > *,
  .site-shell--registration #edit-customer-profiles-0 .address-container-inline > .form-item {
    flex: 0 0 100%;
  }

  .site-shell--registration #user-register-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
  .site-shell--registration #user-register-form textarea,
  .site-shell--registration #user-register-form select {
    min-height: 68px;
    padding: 24px;
  }
}