/* ── Chippio MudTextField overrides ──────────────────────────────────────────
   Source: contratar.chippio.es
   Import this in any Blazor app that uses MudBlazor and wants Chippio-branded
   text inputs: 60px height, 12px radius, static #ADADAD border, Poppins.
   ─────────────────────────────────────────────────────────────────────────── */

/* Fieldset border */
.mud-input-outlined-border {
    border-radius: 12px !important;
    border: 1px solid #ADADAD !important;
}

/* No colour change on hover */
.mud-input-outlined:hover .mud-input-outlined-border {
    border: 1px solid #ADADAD !important;
}

/* No colour change on focus */
.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border: 1px solid #ADADAD !important;
}

/* Input container */
.mud-input.mud-input-outlined {
    height: 60px !important;
    background-color: #fefefe !important;
    border-radius: 12px !important;
    transition: all 0.2s ease-in-out !important;
}

/* Native input element */
.mud-input.mud-input-outlined input {
    height: 60px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 18px !important;
    font-family: 'Poppins', sans-serif !important;
    color: #0f1a38 !important;
    line-height: 20px !important;
}

/* Floating label */
.mud-input-label-outlined {
    font-size: 16px !important;
    font-family: 'Poppins', sans-serif !important;
    color: #0f1a38 !important;
}

/* Disabled state */
.mud-input.mud-input-outlined.mud-disabled {
    background-color: #F2F2F2 !important;
}
.mud-input-outlined.mud-disabled .mud-input-outlined-border {
    border: 1px solid #CDD6E1 !important;
}

/* Error state */
.mud-input-outlined.mud-input-error .mud-input-outlined-border {
    border: 1px solid #CE101D !important;
}
.mud-input.mud-input-outlined.mud-input-error {
    background-color: #FFE0E0 !important;
}

/* Error helper text */
.mud-input-helper-text.mud-input-error {
    color: #ce101d !important;
    font-size: 12px !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Valid/success state — apply .field-valid to the wrapper div */
.field-valid .mud-input-outlined-border {
    border: 1px solid #51D016 !important;
}
.field-valid .mud-input.mud-input-outlined {
    background-color: #DEF9D2 !important;
}
.field-valid-wrap {
    position: relative;
}

/* Inline error helper */
.field-error {
    color: #ce101d;
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    margin-top: 3px;
    display: block;
}

/* Autofill — suppress browser blue flash */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #fefefe inset !important;
    box-shadow: 0 0 0 1000px #fefefe inset !important;
    -webkit-text-fill-color: #0f1a38 !important;
}
.field-valid input:-webkit-autofill,
.field-valid input:-webkit-autofill:hover,
.field-valid input:-webkit-autofill:focus,
.phone-valid input:-webkit-autofill,
.phone-valid input:-webkit-autofill:hover,
.phone-valid input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #DEF9D2 inset !important;
    box-shadow: 0 0 0 1000px #DEF9D2 inset !important;
}

/* Mobile: ≤768px */
@media only screen and (max-width: 768px) {
    .mud-input.mud-input-outlined {
        height: 42px !important;
        border-radius: 12px !important;
    }
    .mud-input.mud-input-outlined input {
        height: 42px !important;
        font-size: 16px !important;
    }
    .mud-input-label-outlined {
        font-size: 14px !important;
    }
}

/* ── Label-above pattern ─────────────────────────────────────────────────────
   Wrap a MudTextField (with no Label prop, just Placeholder) in .field-group,
   and place a <p class="field-label"> above it for the label-above layout.
   ─────────────────────────────────────────────────────────────────────────── */
.field-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 20px !important;
}

.field-label {
    font-size: 16px;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    color: #0F1A38;
    line-height: 28px;
    margin: 0;
}

/* ── Compact variant ─────────────────────────────────────────────────────────
   Add class="chippio-compact" to any ancestor element (e.g. a <div>, MudCard,
   or the <body>) to switch all inputs inside it to a smaller size.
   Designed for dense admin UIs (Backoffice). Web funnel is unaffected.
   ─────────────────────────────────────────────────────────────────────────── */
.chippio-compact .mud-input.mud-input-outlined {
    height: 44px !important;
}
.chippio-compact .mud-input.mud-input-outlined input {
    height: 44px !important;
    font-size: 14px !important;
}
.chippio-compact .mud-input-label-outlined {
    font-size: 13px !important;
}
.chippio-compact .field-label {
    font-size: 14px !important;
    line-height: 24px;
}
.chippio-compact .field-group {
    margin-bottom: 14px !important;
}