/* General Container and Mobile-First Reset */
.fhst-container {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background: #ffffff; /* White background */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
    overflow: hidden; /* For smooth transitions */
}

/* Question Card Styling */
.fhst-question-card {
    padding: 20px;
    background: #f8faff; /* Light blue/white for card */
    border: 1px solid #e0e7ff;
    border-radius: 10px;
    margin-bottom: 20px;
    position: relative;
    /* Basic fade transition */
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fhst-question-header {
    text-align: center;
    margin-bottom: 30px;
}

.fhst-icon-large {
    font-size: 3rem;
    color: #4c51bf; /* Indigo color for icons */
    margin-bottom: 10px;
}

.fhst-question-title {
    font-size: 1.5rem;
    color: #1a202c;
    margin: 10px 0;
    font-weight: 600;
}

.fhst-step-info {
    color: #718096;
    font-size: 0.9rem;
    margin-top: 5px;
}

/* Options Grid Styling */
.fhst-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.fhst-option-label {
    display: block;
    cursor: pointer;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px 10px;
    text-align: center;
    transition: all 0.2s ease-in-out;
    user-select: none;
    font-weight: 500;
    color: #4a5568;
}

.fhst-option-label:hover {
    background: #f7fafc;
    border-color: #a0aec0;
}

/* Visually hide the radio button, but keep it accessible */
.fhst-option-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Checked state styling */
.fhst-option-label input[type="radio"]:checked + span {
    color: #ffffff;
    font-weight: bold;
}

.fhst-option-label input[type="radio"]:checked {
    /* Main color: lime green to gold (simulated) */
    background-color: #22c55e; 
    border-color: #16a34a; 
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.3);
}

.fhst-option-label input[type="radio"]:checked {
    background: linear-gradient(135deg, #22c55e, #facc15);
    border-color: #10b981;
}
.fhst-option-label input[type="radio"]:checked + span {
    background: linear-gradient(135deg, #22c55e, #facc15);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ffffff; /* Fallback for white text */
}

/* Next/Submit Button */
.fhst-next-btn, .fhst-submit-btn {
    display: block;
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.3s ease;
    background: #4c51bf; /* Indigo background */
    color: #ffffff;
    opacity: 0.6;
}

.fhst-next-btn.active:hover, .fhst-submit-btn.active:hover {
    background: #4338ca; /* Darker indigo on hover */
    opacity: 1;
}

.fhst-next-btn:disabled, .fhst-submit-btn:disabled {
    cursor: not-allowed;
    background: #a0aec0;
    opacity: 0.5;
}

/* Results Container */
.fhst-results-container {
    text-align: center;
    padding: 20px;
}

.fhst-verdict-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 15px;
}

.fhst-verdict-desc {
    font-size: 1.1rem;
    color: #4a5568;
    margin-bottom: 10px;
    font-style: italic;
}

.fhst-motto {
    font-size: 1.2rem;
    font-weight: 600;
    color: #4c51bf;
    margin-bottom: 30px;
}

/* Circular Progress Bar (Score Visual) */
#fhst-score-visual {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto 30px;
}

.fhst-score-circle {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.fhst-circle-bg {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 5;
}

.fhst-circle-progress {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.5s ease-out; /* Score animation timing */
    stroke-dashoffset: 282.74; /* Initial state (full offset) */
}

/* Progress Circle Color Coding */
.fhst-circle-progress.score-low { stroke: #e53e3e; } /* Red */
.fhst-circle-progress.score-mid { stroke: #f6ad55; } /* Orange/Yellow */
.fhst-circle-progress.score-high { stroke: #38a169; } /* Green */
.fhst-circle-progress.score-elite { 
    /* Gradient look for Elite */
    stroke: url(#gradientElite);
}

/* SVG Gradient Definition for Elite Score (must be added to the SVG element) */
/* NOTE: This requires adding the SVG defs to the HTML output or dynamically, 
   but for simplicity, we'll keep the CSS-defined colors for the progress bar.
   The JS will apply the class which controls the color. */

#fhst-score-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    font-weight: 800;
    color: #1a202c;
}

/* Category Health Bars */
#fhst-category-health h3 {
    text-align: left;
    color: #4c51bf;
    margin-top: 30px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 10px;
}

.fhst-category-list {
    margin-top: 15px;
}

.fhst-category-item {
    margin-bottom: 15px;
    text-align: left;
}

.fhst-category-name {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 5px;
    color: #2d3748;
}

.fhst-category-bar-bg {
    background: #e2e8f0;
    border-radius: 5px;
    height: 8px;
    overflow: hidden;
}

.fhst-category-bar {
    height: 100%;
    transition: width 1s ease-out;
    border-radius: 5px;
}

/* Bar Color Coding (Red -> Yellow -> Green) */
.fhst-category-bar.low { background-color: #e53e3e; } /* Red */
.fhst-category-bar.mid { background-color: #f6ad55; } /* Yellow */
.fhst-category-bar.high { background-color: #38a169; } /* Green */

/* Personalized Tips */
#fhst-personalized-tips h3 {
    text-align: left;
    color: #38a169;
    margin-top: 30px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 10px;
}

.fhst-tip-list {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.fhst-tip-list li {
    background: #edf2f7;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    text-align: left;
    font-size: 0.95rem;
    line-height: 1.4;
    border-left: 5px solid #4c51bf;
}

.fhst-tip-icon {
    margin-right: 10px;
    color: #4c51bf;
}

/* Restart and Share Buttons */
.fhst-share-section {
    margin-top: 30px;
    border-top: 1px solid #e2e8f0;
    padding-top: 20px;
}

.fhst-share-section p {
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 15px;
}

.fhst-share-btn, .fhst-restart-btn {
    background: #4c51bf;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    margin: 5px;
}

.fhst-restart-btn {
    background: #a0aec0;
    margin-top: 20px;
}

.fhst-restart-btn:hover {
    background: #718096;
}

/* Media Query for larger screens (if necessary, though mobile-first is key) */
@media (min-width: 768px) {
    .fhst-container {
        padding: 40px;
    }
}