/* Age Gate — MCA Patient ID Pathway.
   Reuses the same custom properties Age Gate's own input styles use
   (see age-gate-input.scss) so this inherits the Appearance settings. */

/* Age Gate styles .age-gate__fields with display:block, which outranks the
   user-agent [hidden] rule — so hiding needs a class with !important. */
.age-gate__mca-hidden {
    display: none !important;
}

.age-gate__mca-toggle-wrapper {
    margin: 0 0 1rem;
    text-align: var(--ag-text-align, center);
}

.age-gate__mca-toggle {
    background: none;
    border: 0;
    color: var(--ag-text-color, #333);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    text-decoration: underline;
}

.age-gate__mca-toggle:hover,
.age-gate__mca-toggle:focus {
    opacity: 0.8;
}

.age-gate__mca-patient-fields {
    margin: 0 auto 1rem;
    max-width: var(--ag-fields-width, 100%);
    text-align: left;
    width: 100%;
}

.age-gate__mca-patient-id-label {
    display: var(--ag-label-display, block);
    margin: var(--ag-label-margin, 0 0 0.5rem);
}
button#age-gate-mca-toggle {
    color: #1a2842 !important;
    font-size: 18px !important;
}
.age-gate__mca-patient-id-field {
    background: var(--ag-input-background-color, #fff);
    border: var(--ag-input-border, solid);
    border-radius: var(--ag-input-radius, 3px);
    border-width: var(--ag-input-border-width, 1px);
    box-sizing: border-box;
    color: var(--ag-input-color, #414141) !important;
    font-size: var(--ag-input-text-size, 1rem);
    letter-spacing: 0.05em;
    padding: var(--ag-input-padding, 0.5rem 1rem);
    text-align: var(--ag-text-align, center);
    text-transform: uppercase;
    transition: all .3s;
    width: 100%;
}
button#age-gate-mca-toggle:hover{
/* 	color:#fff !important; */
}
.age-gate__mca-patient-id-field::placeholder {
    color: var(--ag-input-placeholder-color);
    letter-spacing: normal;
    text-transform: none;
}

.age-gate__mca-patient-id-hint {
    color: var(--ag-text-color, #333);
    font-size: 0.75rem;
    margin: 0.4rem 0 0;
    opacity: 0.75;
}

@media screen and (max-width: 480px) {
    .age-gate__mca-patient-id-field {
        font-size: 16px; /* avoid iOS zoom-on-focus below 16px */
    }
}