/**
 * MoliriFormWrapper styles
 * Ported from bui-form-wrapper / FormWrapper.scss (BleauComponentsUI).
 * Applied to elements with class="moliri-form-wrapper".
 */

/* Wrapper container */
.moliri-form-wrapper {
    display: block;
    position: relative;
}

/* Error container – injected by form-wrapper.js above the form content */
.moliri-form-wrapper__error-container,
.form-error-container {
    min-height: 0;
}

.moliri-form-wrapper__error-container:empty {
    display: none;
}

/* Individual error message rows – matches bui-item-link.form-error-message Shadow DOM styling */
.form-error-message {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    margin: 10px 0;
    background-color: var(--formErrorMessageAlertColor, #d50000);
    color: var(--formErrorMessageTextColor, #fff);
    border-radius: 5px;
    font-size: 20px;
    text-decoration: none;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.form-error-message a,
.form-error-message button {
    text-decoration: none !important;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

  .form-error-message:focus-within {
    outline: -webkit-focus-ring-color auto 2px;
  }

@media (max-width: 324.999px) {
    .form-error-message {
        padding: .5em;
        font-size: 1em;
    }
}

@media (max-width: 575.999px) {
    .form-error-message {
        align-items: flex-start;
    }
}

.form-error-message-icon {
    flex-shrink: 0;
    margin-right: 10px;
}

@media (max-width: 575.999px) {
    .form-error-message-icon {
        margin-top: 5px;
    }
}

@media (max-width: 324.999px) {
    .form-error-message-icon {
        display: none;
    }
}

/* Error summary list */
.moliri-form-wrapper__error-list {
  list-style: none;
  margin: 0 0 1em 0;
  padding: 0;
  width: 100%;
  max-width: 400px;
}
@media (min-width: 992px) {
    .moliri-form-wrapper__error-list {
        max-width: 40vw;
    }
}

/* Clickable error links – styling lives on .form-error-message, inner element is transparent */
.moliri-form-wrapper__error-link {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    padding: 0;
    text-align: left;
    text-decoration: none;
    width: 100%;
}

/* Button variant (client-side errors) – stretches a pseudo-element over the entire
   .form-error-message so the full box is clickable, and draws the focus outline on it. */
button.moliri-form-wrapper__error-link {
    cursor: pointer;
}

button.moliri-form-wrapper__error-link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

button.moliri-form-wrapper__error-link:focus {
    outline: none;
}



/* Fade-in animation for error messages (used alongside animate.css) */
@keyframes moliri-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(0.5em);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.moliri-form-wrapper__error-container .form-error-message {
    animation: moliri-fadeInUp 0.3s ease both;
}

/* Field-level error text set by formextensions.js uses \n for multi-line;
   white-space: pre-line renders those as visible line breaks. */
.field-error[slot='has-warnings'] {
    white-space: pre-line;
}