/*------------------------------------------------------------------*\
    3. Layout - Forms
\*------------------------------------------------------------------*/

#formContainer {
    padding-top: 20px;
}

/* Hide default radio button */
.mf-radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Hide radio button icon */
.mf-radio-option input[type=radio]+span::before {
    content: "";
    display: none;
} 

/* Hide radio button icon on hover */
.mf-radio-option input[type=radio]:checked+span::before {
    content: "";
    display: none !important;
}

/* Label as button - Base styles */
.mf-radio-option label {
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 12px 20px;
    margin: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: white;
    transition: all 0.3s;
    font-weight: 500;
    width: 130px;
    height: 60px;
}

.apollo-warning-text .elementor-icon-list-items li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.apollo-warning-text .elementor-icon-list-items .elementor-icon-list-text {
    text-align: center;
}

/* Hover effect */
.mf-radio-option label:hover {
    border-color: #FF0D83;
    background: #FF0D83;
    color: white;
    box-shadow: 0 2px 4px rgba(255, 13, 131, 0.2);
}

/* Checked state (selected) */
.mf-radio-input:checked + span {
    background: #FF0D83 !important;
    color: white !important;
}

.mf-radio-option label:has(.mf-radio-input:checked) {
    background: #FF0D83 !important;
    color: white !important;
    border-color: #FF0D83;
    box-shadow: 0 4px 6px rgba(255, 13, 131, 0.3);
}

/* Focus for accessibility */
.mf-radio-input:focus + span {
    outline: 2px solid #FF0D83;
    outline-offset: 2px;
}

/* Tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .mf-radio-option label {
        width: 200px;
        height: 90px;
    }
}

/* Desktop */
@media screen and (min-width: 1025px) {
    .mf-radio-option label {
        width: 222px;
        height: 90px;
        padding: 12px 24px;
    }

    .apollo-warning-text .elementor-icon-list-items li {
        flex-direction: row;
    }

    .apollo-warning-text .elementor-icon-list-items .elementor-icon-list-text {
        text-align: left;
    }
}