/* Custom styles for Inugenix Solar Intake Form */
body { 
    font-family: 'Inter', sans-serif; 
    background-color: #f1f5f9; 
}
.glass-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.dark-footer {
    background-color: #0A1128;
    color: #ffffff;
}

.step { 
    display: none; 
    opacity: 0; 
    transform: translateY(10px); 
    transition: all 0.4s ease-in-out; 
}
.step.active { 
    display: block; 
    opacity: 1; 
    transform: translateY(0); 
}

/* Custom Checkbox / Radio styling */
.option-card {
    cursor: pointer;
    transition: all 0.2s ease;
}
.option-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.option-card input:checked + div {
    border-color: #E8B62C;
    background-color: #fffbeb;
    box-shadow: 0 4px 12px rgba(232, 182, 44, 0.15);
}

/* Success Animation */
.checkmark__circle { 
    stroke-dasharray: 166; 
    stroke-dashoffset: 166; 
    stroke-width: 2; 
    stroke-miterlimit: 10; 
    stroke: #10b981; 
    fill: none; 
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; 
}
.checkmark { 
    width: 80px; 
    height: 80px; 
    border-radius: 50%; 
    display: block; 
    stroke-width: 2; 
    stroke: #10b981; 
    stroke-miterlimit: 10; 
    margin: 10% auto; 
    box-shadow: inset 0px 0px 0px #10b981; 
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; 
}
.checkmark__check { 
    transform-origin: 50% 50%; 
    stroke-dasharray: 48; 
    stroke-dashoffset: 48; 
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; 
}

@keyframes stroke { 100% { stroke-dashoffset: 0; } }
@keyframes scale { 
    0%, 100% { transform: none; } 
    50% { transform: scale3d(1.1, 1.1, 1); } 
}
@keyframes fill { 100% { box-shadow: inset 0px 0px 0px 40px #10b981; } }