/* Multi-step form styles */
.form-section {
    display: block;
}

.option-card {
    position: relative;
    border: 2px solid transparent;
    border-radius: 16px; /* rounded-2xl */
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    min-height: 220px;
    background-color: #E3EFFC; /* Light blue background from Figma */
    padding: 0; /* Remove padding to allow proper structure */
    transform: translateY(0);
}

.option-card:hover {
    background-color: #86BBF0; /* Hover blue background from Figma */
    border-color: #2F4858; /* Dark border on hover like mock */
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(134, 187, 240, 0.3);
}

.option-card.hover-card {
    background-color: #86BBF0; /* Blue hover state from Figma */
    border-color: #2F4858;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(134, 187, 240, 0.25);
}

.option-card.active-card {
    background-color: #FFBE2C; /* Orange background from Figma */
    border-color: #FFBE2C;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 190, 44, 0.3);
}

.option-card .option-radio {
    position: absolute;
    top: 1.25rem; /* top-5 */
    right: 1.25rem; /* right-5 */
    z-index: 10;
}

.radio-circle {
    width: 1.5rem; /* w-6 */
    height: 1.5rem; /* h-6 */
    border: 2px solid rgba(47, 72, 88, 0.4); /* Slightly lighter by default */
    border-radius: 9999px; /* rounded-full */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radio-circle.checked {
    border-color: #2F4858; /* Dark blue border when checked */
    background-color: #FFFFFF; /* White background when checked */
    position: relative;
    box-shadow: 0 2px 8px rgba(47, 72, 88, 0.2);
}

/* Lucide check inside circle */
.msf-check-icon {
    width: 14px;
    height: 14px;
    stroke: #2F4858;
    display: none;
}
.radio-circle.checked .msf-check-icon { display: block; }

.option-card.hover-card .radio-circle {
    border-color: #2F4858; /* Dark blue border on hover */
    background-color: rgba(255, 255, 255, 0.2);
}

.card-content {
    padding: 2rem; /* p-8 */
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    justify-content: flex-start;
}

.option-card .option-icon {
    width: 5rem;   /* w-20 */
    height: 5rem;  /* h-20 */
    border-radius: 16px; /* rounded-2xl */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem auto; /* mx-auto mb-6 */
    flex-shrink: 0;
    transition: all 0.3s ease;
    background-color: #2F4858; /* Dark blue icon background */
    color: #E3EFFC; /* Light blue icon color */
}

/* Ensure Lucide <i data-lucide> icons fill the container color */
.option-card .option-icon [data-lucide] {
    width: 2.88rem;  /* +20% again (2rem → 2.4rem → 2.88rem) */
    height: 2.88rem; /* +20% again */
    stroke: currentColor;
}

.option-card.active-card .option-icon {
    background-color: #2F4858; /* White icon background when active */
    color: #FFBE2C; /* Orange icon color when active */
    transform: scale(1.05);
}

.option-card.hover-card .option-icon {
    background-color: #FFFFFF; /* White icon background on hover */
    color: #86BBF0; /* Blue icon color on hover */
    transform: scale(1.02);
}


/* Text color adjustments for better visibility */
.option-card h5 {
    color: #2F4858; /* Dark blue text from Figma */
    font-weight: 700;
    line-height: 1.3;
}

.option-card p {
    color: #2F4858; /* Dark blue text from Figma */
    line-height: 1.5;
}

.option-card.active-card h5,
.option-card.active-card p {
    color: #2F4858; /* Keep dark blue text even when active */
}

.option-card.hover-card h5,
.option-card.hover-card p {
    color: #2F4858; /* Keep dark blue text even when hovering */
}

/* Responsive design improvements */
@media (max-width: 768px) {
    .option-card { min-height: 172px; }
    .card-content { padding: 1.25rem; }
    .option-card .option-icon { width: 3.75rem; height: 3.75rem; margin-bottom: 0.75rem; }
    .option-card h5 { font-size: 1.0625rem; margin-bottom: 0.375rem; }
    .option-card p { font-size: 0.875rem; }
}

/* Inputs (custom class to avoid fighting with Tailwind) */
.msf-input {
    border-color: rgba(47, 72, 88, 0.25) !important; /* default border */
    transition: all 0.2s ease;
    color: #2F4858;
}
.msf-input::placeholder {
    color: #2F4858;
    opacity: 0.55;
}
.msf-input:focus {
    outline: none;
    border-color: #2F4858 !important;
    box-shadow: 0 0 0 3px rgba(47, 72, 88, 0.12);
}

/* Button states */
#nextBtn:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
}

/* Success state animations */
.success-bounce {
    animation: bounce 1s infinite;
}

/* Logo styling */
.success-hero img,
#successState img {
    filter: drop-shadow(0 6px 18px rgba(0,0,0,0.08));
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        transform: translate3d(0, -10px, 0);
    }
    70% {
        transform: translate3d(0, -5px, 0);
    }
    90% {
        transform: translate3d(0, -2px, 0);
    }
}

/* Success state styling to match Figma */
.w-65 {
    width: 16.25rem; /* 260px */
    height: 16.25rem; /* 260px */
}

/* Success option tiles */
.success-option-tile {
    width: 155px;
    height: 155px;
    background: #FFBE2C; /* Yellow background */
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 19px 20px 20px;
    backdrop-filter: blur(15px);
}

.success-option-tile.selected {
    border: 2px solid #FFBE2C;
}

.success-option-icon {
    width: 70px;
    height: 70px;
    background: #FFFFFF; /* White background for icons */
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-option-icon.selected {
    background: #FFFFFF;
}

.success-option-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Selected state highlighting */
.success-selected .success-option-tile {
    box-shadow: 0 4px 16px rgba(255, 190, 44, 0.3);
}

@media (max-width: 640px) {
    /* Let tiles fit their grid cell to avoid overflow when using 3 columns */
    .success-option-tile {
        width: 100%;
        max-width: 100px;
    height: auto;
        aspect-ratio: 1 / 1;
    padding: 12px;
    }
    .success-option-icon {
        width: 56%;
        height: 56%;
    }
}

/* Tighten container spacing on very small screens */
@media (max-width: 480px) {
    #multi-step-form h2 { font-size: 1.75rem; }
    /* slightly smaller max size on tiny screens */
    .success-option-tile { max-width: 92px; }
    .success-option-icon { width: 52%; height: 52%; }
}

/* Container shadow and top border accent */
.msf-container {
    box-shadow: 0 10px 45px rgba(47, 72, 88, 0.12);
    position: relative;
}


/* Success summary cards reuse .option-card visuals but are non-interactive */
.success-summary-grid { justify-items: center; }
.success-summary-grid .option-card { pointer-events: none; }
.success-summary-card.option-card {
    min-height: 160px;
    background-color: #FFBE2C; /* Yellow like image */
    border-color: #FFBE2C;
    box-shadow: none; /* cleaner, like img1 */
    width: 100%;
    max-width: 220px; /* keep tiles compact on desktop */
}
/* Keep hover/active from changing appearance */
.success-summary-card.option-card:hover,
.success-summary-card.option-card.active-card,
.success-summary-card.option-card.hover-card {
    background-color: #FFBE2C;
    border-color: #FFBE2C;
    transform: none;
    box-shadow: 0 10px 25px rgba(255, 190, 44, 0.2);
}

.success-summary-card .card-content {
    justify-content: center; /* stack icon + label tighter */
    gap: 0.25rem;
    text-align: center;
}

.success-summary-card .option-icon {
    background-color: #2F4858; /* dark blue */
    color: #FFBE2C; /* yellow icon color to match selected summary */
}

.success-summary-card h5 {
    color: #2F4858;
    margin-top: 0.25rem;
}
@media (max-width: 640px) {
    .success-summary-card.option-card {
        min-height: 140px;
        max-width: 100%; /* full-width when stacked */
    }
    .success-summary-card .option-icon { width: 3.75rem; height: 3.75rem; }
}