@import './basic.css';

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-400);
    width: 21.4rem;
    padding: var(--spacing-300);
    margin: var(--spacing-400) auto;
    border-radius: var(--spacing-200);
    background-color: var(--white);
}

.title {
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-title);
    letter-spacing: var(--letter-spacing-title);
    color: var(--grey-900);
}

.form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-500);
}

.form_fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-300);
    border: none;
}

.form_name-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-300);
}

.form_group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-100);
}

.form_label,
.radio_legend {
    font-size: var(--font-size-text-sm);
    line-height: var(--line-height-text-sm);
}

.required {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: var(--spacing-100);
    color: var(--green-600);
}

.form_input,
.form_textarea {
    padding: var(--spacing-150) var(--spacing-300);
    border-radius: 0.5rem;
    border: 1px solid var(--grey-500);
}

.form_input:focus,
.form_textarea:focus {
    outline: 2px solid var(--green-600);
}

.radio {
    display: flex;
    flex-direction: column;
    border: none;
}

.radio_legend {
    margin-bottom: var(--spacing-200);
}

.radio_group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-200);
}

.radio_item {
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--spacing-150) var(--spacing-300);
    border-radius: 0.5rem;
    border: 1px solid var(--grey-500);
    cursor: pointer;
}

.radio_label {
    z-index: 1;
    padding-left: 2.25rem;
    cursor: pointer;
}

.radio_input,
.form_checkbox {
    appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.radio_input:focus,
.radio_input:checked {
    border-radius: 0.5rem;
    border: 1px solid var(--green-600);
    background-color: var(--green-200);
}

.radio_input::before {
    position: absolute;
    top: 50%;
    left: var(--spacing-300);
    transform: translateY(-50%);

    content: '';
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 2px solid var(--grey-500);
}

.radio_input:checked::before {
    border: none;
    background-image: url('../assets/images/icon-radio-selected.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.checkbox {
    position: relative;
    display: flex;
    padding-left: var(--spacing-500);
    cursor: pointer;
}

.checkbox label {
    cursor: pointer;
}

.form_checkbox:focus {
    outline: 2px solid var(--green-600);
    border-radius: 0.25rem;
}

.form_checkbox::before {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);

    content: '';
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.25rem;
    border: 2px solid var(--grey-500);
}

.form_checkbox:checked::before {
    border: none;
    background-image: url('../assets/images/icon-checkbox-check.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.form_button {
    padding: var(--spacing-200) var(--spacing-500);
    border-radius: 0.5rem;
    border-color: transparent;
    font-weight: var(--font-weight-bold);
    color: var(--white);
    background-color: var(--green-600);
}

.form_button:hover,
.form_button:focus,
.form_button:active {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), var(--color-green-600, #0C7D69);
}

.error-message {
    font-size: var(--font-size-text-sm);
    line-height: var(--line-height-text-sm);
    color: var(--red); 
}

.success {
    position: absolute;
    top: -0.5rem;
    left: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-100);
    width: 20.4rem;
    padding: var(--spacing-300);
    color: var(--green-200);
    border-radius: var(--spacing-150);
    background-color: var(--grey-900);
}

.success_header {
    display: flex;
    align-items: center;
    gap: var(--spacing-100);
}

.success_icon {
    width: 1.5rem;
    height: 1.5rem;
}

.success_title {
    font-weight: var(--font-weight-bold);
    color: var(--white);
}

.success_text {
    font-size: var(--font-size-text-sm);
    line-height: var(--line-height-text-sm);
}

.is-hidden {
    position: absolute;
}

@media screen and (min-width: 768px) {
    .card {
        width: 43.125rem;
        padding: var(--spacing-500);
        margin: var(--spacing-1600) auto;
    }

    .form_name-group {
        flex-direction: row;
        gap: var(--spacing-200);
    }

    .form_name-group .form_group {
        flex-grow: 1;
    }

    .radio_group {
        flex-direction: row;
        gap: var(--spacing-200);
    }

    .radio_item {
        flex-grow: 1;
    }

    .success {
        top: -11%;
        left: 50%;
        transform: translateX(-50%);
        width: 28.1rem;
    }
        
}

@media screen and (min-width: 1440px) {
    .card {
        width: 46rem;
    }
    
}