.root {
    composes: grid from global;
    composes: gap-md from global;
}

.errorText {
    composes: leading-normal from global;
    composes: text-error from global;
}

.balance {
    composes: grid from global;
    composes: italic from global;
    composes: items-start from global;
    composes: pt-1.5 from global;
    composes: text-sm from global;
    grid-template-columns: max-content 1fr;
}

.card {
    composes: gap-sm from global;
    composes: grid from global;
    composes: grid-cols-1 from global;
    composes: items-start from global;
    grid-template-areas:
        'card_entry'
        'check_balance_button'
        'apply_button';

    composes: lg_grid-cols-autoLast from global;
}

@media screen(lg) {
    .card {
        grid-template-areas:
            'card_entry apply_button'
            'check_balance_button check_balance_button';
    }
}

.card_input_container {
}

.invalid_card_error {
    composes: text-red-700 from global;
}

.card_input_container_error input {
    @apply border-error;
}

.card_input_container_error input:focus {
    @apply border-inputFocus;
}

.card_input_container_error p {
    @apply text-error;
    @apply font-semibold;
}

.cards_container {
    composes: gap-sm from global;
    composes: grid from global;
    composes: items-baseline from global;
    composes: justify-start from global;
    grid-template-columns: max-content auto;
}

.check_balance_button {
    composes: root from '../../LinkButton/linkButton.module.css';

    composes: justify-self-center from global;
    grid-area: check_balance_button;

    composes: lg_justify-self-start from global;
}

.entry {
    grid-area: card_entry;
}

.price {
}

.entryForm {
}

.applyLabel {
    composes: label from '../../Field/field.module.css';

    @apply hidden;

    @apply lg_block;
}