/* File: assets/css/multistep-form.css */

/* --- Base Form and Step Styling --- */
#wpmf-multistep-form {
    background: #ffffff;
    padding: 30px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    max-width: 600px; /* Constrain width for a better feel */
    margin: 30px auto;
}

#wpmf-step-content {
    min-height: 250px; /* Prevent layout jump */
}

.wpmf-step-container h3 {
    font-size: 1.8em;
    color: #333;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}

/* --- Standard Input Fields (.wpmf-form-group) --- */
.wpmf-form-group {
    margin-bottom: 20px;
}

.wpmf-form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #555;
}

.wpmf-form-group input[type="number"],
.wpmf-form-group input[type="text"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 1em;
    transition: border-color 0.2s;
}

.wpmf-form-group input[type="number"]:focus,
.wpmf-form-group input[type="text"]:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* --- Radio Button Group (.wpmf-radio-group) --- */
.wpmf-radio-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
}

.wpmf-radio-option {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.wpmf-radio-option:hover {
    background-color: #f8f9fa;
    border-color: #007bff;
}

.wpmf-radio-option input[type="radio"] {
    margin-right: 12px;
    /* Optional: Hide default radio for custom styling, otherwise style the default */
}

.wpmf-radio-option label {
    flex-grow: 1;
    font-weight: normal;
    margin-bottom: 0;
    cursor: pointer;
}

/* --- BMI Result Display --- */
.bmi-result-display {
    margin-top: 30px;
    padding: 20px;
    border: 1px solid #a2d2ff;
    border-radius: 6px;
    background: #e6f7ff;
}

.bmi-result-display h4 {
    margin-top: 0;
    color: #007bff;
}


/* --- Form Controls (Buttons) --- */
#wpmf-form-controls {
    display: flex;
    justify-content: flex-end; /* Align buttons to the right */
    gap: 10px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

#wpmf-prev-btn,
#wpmf-next-btn,
#wpmf-checkout-btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, opacity 0.2s;
}

#wpmf-next-btn {
    background-color: #007bff; /* Primary action color */
    color: white;
    border: 1px solid #007bff;
}

#wpmf-next-btn:hover:not(:disabled) {
    background-color: #0056b3;
    border-color: #0056b3;
}

#wpmf-prev-btn {
    background-color: #f8f9fa;
    color: #6c757d;
    border: 1px solid #ced4da;
}

#wpmf-prev-btn:hover:not(:disabled) {
    background-color: #e2e6ea;
}

#wpmf-prev-btn:disabled,
#wpmf-next-btn:disabled,
#wpmf-checkout-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- Progress Bar (Pill Style) --- */
#wpmf-progress-container {
    /* Main container settings */
    width: 100%;
    height: 25px; /* Slightly smaller pill */
    background-color: #e9ecef; /* Light background for the unused part of the bar */
    border-radius: 12.5px; /* CRITICAL: Rounded corners for the pill shape */
    margin-bottom: 30px;
    overflow: hidden; 
    position: relative; 
}

#wpmf-progress-bar {
    height: 100%; 
    width: 0%; 
    background-color: #28a745; /* Green for progress */
    transition: width 0.3s ease-in-out; 
}

#wpmf-progress-text {
    position: absolute;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    color: #333; 
    font-weight: 600;
    font-size: 0.9em;
    z-index: 10; 
}

/* --- Recommendation Card Styling --- */
.wpmf-recommendation-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.wpmf-recommendation-card h4 {
    color: #28a745;
}

.wpmf-product-image img {
    max-width: 150px;
    height: auto;
    border-radius: 4px;
    margin: 15px 0;
}

#wpmf-checkout-btn {
    background-color: #ffc107; /* Warning/Call-to-action color */
    color: #333;
    border: 1px solid #ffc107;
    margin-top: 15px;
    width: 100%; /* Make checkout button wide */
}

#wpmf-checkout-btn:hover:not(:disabled) {
    background-color: #e0a800;
    border-color: #e0a800;
}