/* take-survey.css */

/* Responsive padding for the glass-card */
#survey-form-card {
    padding: 24px; /* Default for mobile */
}

@media (min-width: 768px) {
    #survey-form-card {
        padding: 32px; /* Tablets */
    }
}

@media (min-width: 1024px) {
    #survey-form-card {
        padding: 48px; /* Large screens */
    }
}

/* Progress Bar height adjustment */
.progress-bar {
    height: 16px; /* As per description */
}

/* Step Title adjustments */
.survey-step h2 {
    font-size: 20px; /* Mobile default */
}

@media (min-width: 768px) {
    .survey-step h2 {
        font-size: 24px; /* Desktop */
    }
}

/* Custom Checkbox/Radio sizing (already handled by w-4 h-4 in HTML, but good to be explicit if needed) */
/* The custom div for checkbox/radio is already styled with w-4 h-4 (16x16px) in the HTML, 
   and the peer-checked styles in globals.css handle the color. */

/* Ensure the survey steps are positioned correctly for transitions */
#survey-steps-container {
    position: relative;
    min-height: 300px; /* Adjust as needed to prevent content jumping */
}

.survey-step {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.survey-step.active-step {
    opacity: 1;
    position: relative; /* Active step takes up space */
    transform: translateY(0);
}

.survey-step.hidden {
    display: none;
}

/* Specific styles for the navigation buttons if needed, otherwise rely on globals.css */
#prev-button,
#next-button {
    /* Ensure consistent button sizing and appearance */
    min-width: 120px; /* Example min-width */
}

#finished-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ribbon {
    position: relative;
    background: #f4a92f; /* Primary color */
    padding: 1em 2em;
    margin: 2em auto 3em;
    text-align: center;
    font-size: 1.5em;
    line-height: 1.5;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.ribbon:before, .ribbon:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -1em;
    border: 1.5em solid #e2725b; /* Accent color */
    z-index: -1;
}

.ribbon:before {
    left: -2em;
    border-right-width: 1.5em;
    border-left-color: transparent;
}

.ribbon:after {
    right: -2em;
    border-left-width: 1.5em;
    border-right-color: transparent;
}

.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #f4a92f transparent transparent transparent;
    bottom: -1em;
}

.ribbon .ribbon-content:before {
    left: 0;
    border-width: 1em 0 0 1em;
}

.ribbon .ribbon-content:after {
    right: 0;
    border-width: 1em 1em 0 0;
}