/* ------------------------------- */
/* Navigation Buttons Styles       */
/* ------------------------------- */

/* --- Button Container --- */
.buttons {
    display: flex !important;      /* horizontal layout */
    justify-content: center;       /* center the buttons horizontally */
    align-items: center;           /* center vertically */
    gap: 15px;                     /* space between buttons */
    margin: 25px 0;                /* spacing above and below container */
    flex-wrap: wrap;               /* wrap on small screens */
}

/* --- Base Button Styles --- */
.get-started-btn,
.previous-step-btn,
.reset-btn {
    min-width: 150px;              /* minimum width for consistent size */
    padding: 12px 25px;            /* padding for comfortable click area */
    font-size: 16px;               /* consistent font size */
    font-family: Arial, Helvetica, sans-serif; /* enforce readable font */
    line-height: normal;           /* overrides global resets */
    border-radius: 8px;            /* smooth corners */
    border: none;                  /* remove default borders */
    cursor: pointer;
    text-align: center;
    text-decoration: none !important;
    vertical-align: middle;
    transition: all 0.2s ease;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* --- Individual Button Colors --- */
.get-started-btn {
    background-color: #28a745; /* A standard, professional green */
    color: #ffffff;
}

.get-started-btn:hover {
    background-color: #218838; /* Slightly darker green on hover */
}

.previous-step-btn {
    background-color: #2563eb; /* blue */
    color: #ffffff;
}

.previous-step-btn:hover {
    background-color: #1d4ed8; /* darker blue */
}

.reset-btn {
    background-color: #dc2626; /* red */
    color: #ffffff;
}

.reset-btn:hover {
    background-color: #b91c1c; /* darker red */
}

/* --- Disabled State --- */
.get-started-btn:disabled,
.previous-step-btn:disabled,
.reset-btn:disabled,
.disabled {
    pointer-events: none;
    opacity: 0.6;
    background-color: #cccccc !important;
    color: #666666 !important;
}

/* --- Optional Responsive Fix --- */
@media (max-width: 500px) {
    .buttons {
        flex-direction: column;
    }
    
    .get-started-btn,
    .previous-step-btn,
    .reset-btn {
        width: 100%;
        min-width: auto;
    }
}