/* ===== Business Area - Existing Customer Error page ===== */
.business-area-existing-customer-error {
    padding: 0 0 80px;
}

.business-area-existing-customer-error .content {
    max-width: 480px;
    margin: 0 auto;
    padding-top: 40px;
    text-align: center;
}

.business-area-existing-customer-error .error-icon {
    margin: 0 auto 24px;
    display: flex;
    justify-content: center;
    width: 110px;
    height: 110px;
}

.business-area-existing-customer-error .error-icon .player,
.business-area-existing-customer-error .error-icon lottie-player,
.business-area-existing-customer-error .error-icon img,
.business-area-existing-customer-error .error-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.business-area-existing-customer-error h1 {
    font-size: 1.5rem;
    margin-bottom: 16px;
}

.business-area-existing-customer-error .rich-text {
    color: #4a4a4a;
    line-height: 1.6;
    margin-bottom: 32px;
}

.business-area-existing-customer-error .btn.primary {
    min-width: 180px;
}

/* ===== Business Area - Registration form ===== */
.business-area-registration .umbraco-forms-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.business-area-registration .umbraco-forms-navigation {
    border: none;
}

.business-area-registration .umbraco-forms-navigation::before,
.business-area-registration .umbraco-forms-navigation::after {
    display: none;
}

.business-area-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 8px;
}

.business-area-bottom-row .legal-approval {
    margin-bottom: 0;
}

.business-area-bottom-row .btn.primary {
    min-width: 160px;
}

/* The approval text comes from a rich text editor, so it arrives wrapped in <p>.
   Keep it inline so the asterisk and the text share the checkbox line. */
.business-area-bottom-row .legal-approval label p {
    display: inline;
    margin: 0;
}

/* ===== Step 1 - requested system dropdown =====
   The field is a Select2, as on the plan coordination form, so the box, the border, the
   radius and the chevron all come from the site-wide .select2 rules in Style.css. Only
   the height is set here, the same 40px .submission-form gives its own Select2 fields,
   so the dropdown and the phone number beside it line up on the row. */
.business-area-registration .select2 {
    height: 40px;
}

/* jQuery Validate marks the original select, which Select2 keeps out of sight, so the
   red border has to be carried across to the box the visitor actually sees. Custom.css
   already covers .select2.noga-validation-error; this is the same border for the case
   where the class sits on the select instead of the container. */
.business-area-registration select.noga-validation-error + .select2 .select2-selection {
    border-color: #DF271C !important;
}

/* Fallback for the moment before Select2 has taken the field over, and for the case
   where its script has not arrived at all: without this the browser's own dropdown
   shows up bare next to a styled phone field. Harmless once Select2 is running - it
   hides this select and the rules above take the picture. */
.business-area-registration select.text {
    border: 1px solid #BBBBBB;
    border-radius: 8px;
    margin: 0 !important;
    padding: 0 0.5rem;
    height: 40px;
    background-color: #fff;
    color: #2A2A2A;
    font-size: 0.875rem;
    width: 100% !important;
    max-width: 100% !important;
}

.business-area-registration select.text option {
    color: #2A2A2A;
}

.business-area-registration select.noga-validation-error {
    border-color: #DF271C !important;
}

/* ===== Fields carried over from step 1 =====
   The number and the system were settled in step 1, so they are shown for confirmation
   and cannot be edited. */
.business-area-registration input.locked-field {
    background-color: #F4F6F8 !important;
    color: #5A6674 !important;
    cursor: default;
}

.business-area-registration input.locked-field:focus {
    outline: none;
    border-color: #BBBBBB;
}

/* ===== System registration - file upload =====
   The control is the shared one from Style.css - custom-file, file-wrapper, file-return,
   delete-file - the same one the job application form uses, so nothing here restyles it.
   The one change is the side the delete button sits on. The row is forced to ltr so long
   file names read correctly, so the shared rule - which pins the button to the start edge
   - lands it on the left. Here the whole thing is mirrored: the room reserved for the
   button moves to the end of the row and the button with it. The name stays pushed to the
   end of the row by the shared justify-content, which is what keeps the two touching
   instead of sitting at opposite edges. Scoped to this form, so the job page is untouched. */
.business-area-registration .file-return {
    padding-inline-start: 0;
    padding-inline-end: 2.5rem;
}

.business-area-registration .delete-file {
    inset-inline-start: auto;
    inset-inline-end: 0;
    background-position: right;
    border-inline-end: 0;
    border-inline-start: 1px solid #2A2A2A;
    padding-inline-end: 0;
    padding-inline-start: 1.5rem;
}