/*FORM */

.frm-form-container {
    display: flex;
    justify-content: center;
}

.frm-form {
    display: flex;
    justify-content: center;
}

.frm-form__wrap {
    width: min(100%, 900px);
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    row-gap: 7px;
    align-items: start;
    grid-auto-flow: row dense;
}

@media (min-width: 768px) {
    .frm-form__wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*Title a 2 columnas*/
.frm-form__wrap .globalFormSubmit,
.frm-form__wrap .cmp-title {
    grid-column: auto;
}

.globalFormSubmit {
    margin-top: 1%;
    text-align:center;
}

@media (min-width: 768px) {
    .frm-form__wrap .globalFormSubmit,
    .frm-form__wrap .cmp-title {
        grid-column: 1 / -1;
    }
}

/*FieldSize classes*/

/* full = 2 columnas */
.frm-form__wrap .full {
    grid-column: auto;
}

@media (min-width: 768px) {
    .frm-form__wrap .full {
        grid-column: 1 / -1;
    }
}

/* l = 1 columna (default) */
.frm-form__wrap .l {
    grid-column: auto;
}

/* Row wrapper creado por JS */
.frm-form__wrap .frm-form__row {
    grid-column: auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    min-width: 0;
    align-items: center;
}

/* m 40 = 80% del row */
.frm-form__wrap .frm-form__row .m {
    flex: 0 0 calc(80% - 10px);
    max-width: calc(80% - 10px);
}

/* s 30 = 60% del row */
.frm-form__wrap .frm-form__row .s {
    flex: 0 0 calc(60% - 10px);
    max-width: calc(60% - 10px);
}

/* x 25 = 50% del row */
.frm-form__wrap .frm-form__row .x {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
}

/* xs 20 = 40% del row */
.frm-form__wrap .frm-form__row .xs {
    flex: 0 0 calc(40% - 10px);
    max-width: calc(40% - 10px);
}

/* small 10 = 20% del row */
.frm-form__wrap .frm-form__row .small {
    flex: 0 0 calc(20% - 10px);
    max-width: calc(20% - 10px);
}

/*Title styles*/
.frm-form__wrap .cmp-title .cmp-title__text {
    margin-bottom: 26px;
    font-size: var(--frm-title-xs);
    font-family: var(--frm-font-primary);
    color: var(--frm-color-secondary-950);
    font-weight: var(--frm-font-bold);
}

/*Submit*/
.frm-form__wrap .globalFormSubmit {
    display: flex;
    justify-content: center;
    margin-top: 32px;
    gap: 16px;
}

.frm-form__wrap .globalFormSubmit .btn-submit {
    display: flex;
    max-width: 340px;
    min-height: 36px;
    padding: 8px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--frm-button-primary);
    color: var(--frm-color-white);
    font-weight: var(--frm-font-semibold);
    border: none;
}

.frm-form__wrap .globalFormSubmit .btn-submit:hover {
    background-color: var(--frm-color-brand-400);
    cursor: pointer;
}

.frm-form__wrap .globalFormSubmit .btn-submit .icon {
    font-size: 20px;
    color: var(--frm-color-white);
}

.frm-form__wrap .globalFormSubmit .btn-submit.disabled {
    background: var(--frm-color-neutral-100);
    pointer-events: none;
    color: var(--frm-color-neutral-700);
}

.frm-form__wrap .globalFormSubmit .btn-submit.disabled .icon {
    color: var(--frm-color-neutral-700);
}

.frm-form__wrap .globalFormSubmit .frm-button {
    display: none;
}

.frm-form__wrap .globalFormSubmit .frm-button.show {
    display: flex;
}

/*Labels arriba + inputs*/

.frm-form .form-floating {
    display: flex;
    flex-direction: column;
    position: relative;
}

.frm-form .form-floating label {
    order: 0;
    padding-bottom: 6px;
    opacity: 1;
    font-family: var(--frm-font-primary);
    font-size: var(--frm-body-s);
    color: var(--frm-color-neutral-800);
}

.frm-form .form-floating label.is-hidden {
    visibility: hidden;
    font-size: 0;
    min-height: 14px;
}

.frm-form .form-floating .form-control,
.frm-form .form-floating .form-select,
.frm-form .form-floating textarea {
    order: 1;
}

.frm-form .form-floating .form-control,
.frm-form .form-floating .form-select {
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid var(--frm-color-secondary-600);
    font-family: var(--frm-font-primary);
    font-size: var(--frm-body-m);
    color: var(--frm-color-neutral-700);
}

.frm-form .form-floating .form-control.is-invalid,
.frm-form .form-floating .form-select.is-invalid {
    color: var(--frm-content-error);
    border-color: var(--frm-content-error);
}

/*help-message*/

.cmp-form-text.form-floating .cmp-form-text__help-block,
.frm-form__wrap .cmp-form-options__help-message {
    display: block;
    font-size: 12px;
    font-family: var(--frm-font-primary);
    margin: 0;
    color: var(--frm-color-secondary-500);
    order: 4;
}

/*invalid-feedback*/

.frm-form .invalid-feedback {
    display: block;
    visibility: hidden;
    order: 3;
    margin-top: 6px;
    height: 14px;
}

.frm-form .checkboxFieldset .checkboxWrap.was-validated.is-invalid .invalid-feedback,
.frm-form .form-floating.selectCustom.was-validated.is-invalid .invalid-feedback,
.frm-form .cmp-form-text.form-floating.was-validated .invalid-feedback {
    font-size: var(--frm-label-m);
    font-family: var(--frm-font-primary);
    color: var(--frm-content-error);
    margin: 6px 0 0;
    visibility: visible;
}

.frm-form .checkboxFieldset .checkboxWrap.was-validated.is-valid .invalid-feedback,
.frm-form .form-floating.selectCustom.was-validated.is-valid .invalid-feedback,
.frm-form .cmp-form-text.form-floating.is-valid .invalid-feedback {
    visibility: hidden;
    font-size: var(--frm-label-m);
    font-family: var(--frm-font-primary);
}

/*Pairs (JS wrapper)*/

.frm-form__wrap .frm-form__pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    min-width: 0;
}

@media (min-width: 768px) {
    .frm-form__wrap .frm-form__pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

.frm-form__wrap .frm-form__pair--left {
    grid-column: auto;
}

@media (min-width: 768px) {
    .frm-form__wrap .frm-form__pair--left {
        grid-column: 1;
    }
}

.frm-form__wrap .frm-form__pair--right {
    grid-column: auto;
}

@media (min-width: 768px) {
    .frm-form__wrap .frm-form__pair--right {
        grid-column: 2;
    }
}

/*Select arrow*/

.frm-form .js-selectCustom.selectCustom {
    position: relative;
}

.frm-form .js-selectCustom.selectCustom select.form-select {
    appearance: none;
    min-height: 49px;
    padding: 12px 48px 12px 16px;
}

.frm-form .js-selectCustom.selectCustom::after {
    content: "\ea2f";
    font-family: "icomoon" !important;
    position: absolute;
    right: 16px;
    top: 23px;
    height: 45px;
    display: flex;
    align-items: center;
    font-size: 20px;
    pointer-events: none;
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform 150ms ease;
}

.frm-form .js-selectCustom.selectCustom.is-open::after {
    transform: rotate(180deg);
}

/*Spinner*/

.frm-form .globalFormSubmit-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    z-index: var(--frm-z-index-alert);
}

.frm-form .globalFormSubmit-spinner.hidden {
    display: none;
}

.frm-form .globalFormSubmit-spinner-wrapper {
    width: 64px;
    height: 64px;
    display: inline-block;
    line-height: 0;
}

@keyframes general-search-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.frm-form .globalFormSubmit-spinner svg {
    width: 100%;
    height: 100%;
    display: block;
    transform-origin: 50% 50%;
    animation: general-search-spin 1s linear infinite;
}