/* --- Custom Styles (complementing Tailwind) --- */

/* Base body font from Google Fonts */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc; /* Tailwind gray-50 */
}

/* Information icon styling */
.info-icon {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    background-color: #9ca3af; /* Tailwind gray-400 */
    color: white;
    border-radius: 50%;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.2rem;
    cursor: pointer;
    margin-left: 0.3rem;
    font-style: italic;
    font-weight: bold;
    vertical-align: middle; /* Align nicely with text */
}
.info-icon:hover {
     background-color: #6b7280; /* Tailwind gray-500 */
}

/* Tooltip styling */
.tooltip {
    position: fixed; /* Changed to fixed for viewport positioning */
    background-color: #374151; /* Tailwind gray-700 */
    color: white;
    padding: 0.5rem 0.8rem;
    border-radius: 0.375rem; /* Tailwind rounded-md */
    font-size: 0.875rem; /* Tailwind text-sm */
    z-index: 100; /* Ensure tooltip is on top */
    display: none; /* Initially hidden */
    white-space: normal; /* Allow text wrapping */
    width: 200px; /* Fixed width for better control */
    max-width: 80vw; /* Prevent excessive width on small screens */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    pointer-events: none; /* Prevent tooltip from blocking mouse events */
}

/* Step navigation indicator styling */
.step-indicator {
     cursor: pointer;
     transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.2s ease;
     user-select: none; /* Prevent text selection */
}
.step-indicator:not(.active):hover {
     background-color: #e0e7ff; /* Tailwind indigo-100 for hover */
     color: #3730a3; /* Tailwind indigo-800 */
     box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.step-indicator.active {
    background-color: #3b82f6; /* Tailwind blue-500 */
    color: white;
    cursor: default;
    box-shadow: 0 2px 5px rgba(59, 130, 246, 0.4); /* Glow effect */
}

/* --- Step 1: Tire Diagram Hotspot Styling --- */
.hotspot {
    position: absolute;
    /* background-color: rgba(0, 255, 0, 0.1); */ /* Uncomment for debugging positions */
    border: 2px solid transparent; /* Transparent border initially */
    border-radius: 5px; /* Slightly rounded corners */
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box; /* Include border in element's total width and height */
}
.hotspot:hover {
    background-color: rgba(59, 130, 246, 0.2); /* Light blue semi-transparent bg on hover */
    border-color: rgba(59, 130, 246, 0.7); /* Blue border on hover */
}
.hotspot.selected-diagram-part {
    background-color: rgba(59, 130, 246, 0.3); /* Slightly darker blue bg when selected */
    border-color: #1d4ed8; /* Darker blue border when selected */
}


/* Tire Specification Text Part Styling */
.tire-spec-part {
    cursor: pointer;
    font-weight: 600;
    color: #dc2626; /* Tailwind red-600 */
    padding: 0 0.1rem;
    border-bottom: 1px dashed #fb7185; /* Tailwind red-400 dash */
    transition: background-color 0.2s ease, color 0.2s ease;
    user-select: none;
}
.tire-spec-part:hover {
    background-color: #fee2e2; /* Tailwind red-100 */
    color: #b91c1c; /* Tailwind red-700 */
}
.tire-spec-part.selected-spec-part {
    background-color: #fecaca; /* Tailwind red-200 */
    color: #991b1b; /* Tailwind red-800 */
}

/* Progress Bar Styling */
.progress-bar-container {
    background-color: #e5e7eb; /* Tailwind gray-200 */
    border-radius: 0.375rem; /* Tailwind rounded-md */
    overflow: hidden;
    height: 1.1rem; /* Slightly taller */
    width: 100%;
    position: relative;
    margin-top: 0.25rem; /* Add some space above the bar */
}
/* Added wrapper for label + bar */
div[data-perf] {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Space between label and bar */
}
span.perf-label {
    flex-shrink: 0; /* Prevent label from shrinking */
    width: 5rem; /* Fixed width for alignment */
    text-align: right;
    font-weight: 500;
}

.progress-bar {
    height: 100%;
    transition: width 0.5s ease-in-out;
    text-align: center;
    color: white;
    font-size: 0.75rem; /* Tailwind text-xs */
    line-height: 1.1rem; /* Match container height */
    font-weight: 500; /* Medium weight */
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* General Section Styling */
.step-section {
    display: none; /* Hidden by default */
    animation: fadeIn 0.5s ease-in-out; /* Simple fade-in */
}
.step-section.active {
    display: block; /* Show active step */
}

/* Option Button Styling (Choice Buttons in Step 3) */
.option-btn {
    border: 1px solid #d1d5db; /* Tailwind gray-300 */
     cursor: pointer;
     user-select: none;
}
.option-btn:not(.selected):hover {
    background-color: #e0e7ff; /* Tailwind indigo-100 */
    border-color: #a5b4fc; /* Tailwind indigo-300 */
}
.option-btn.selected {
     background-color: #3b82f6; /* Tailwind blue-500 */
     color: white;
     border-color: #2563eb; /* Tailwind blue-600 */
     box-shadow: 0 1px 3px rgba(59, 130, 246, 0.4); /* Slight glow */
     font-weight: 500;
}

/* Scenario Button Styling (Step 2) */
.scenario-btn {
    cursor: pointer;
    user-select: none;
}
.scenario-btn.selected {
    background-color: #dbeafe; /* Tailwind blue-100 */
    border-color: #93c5fd; /* Tailwind blue-300 */
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.2);
}
.scenario-btn.selected strong {
    color: #1e40af; /* Tailwind blue-800 */
}


/* Information Box Styling (for Diagram and Spec info) */
.info-box {
    background-color: #f3f4f6; /* Tailwind Gray-100 */
    border: 1px solid #e5e7eb; /* Tailwind Gray-200 */
    border-radius: 0.5rem; /* Tailwind rounded-lg */
    padding: 1rem; /* Tailwind p-4 */
    min-height: 100px; /* Adjusted min height */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.info-box h3 {
    color: #1d4ed8; /* Tailwind Blue-700 */
    margin-bottom: 0.5rem; /* Tailwind mb-2 */
    font-weight: 600; /* Tailwind semibold */
}
.info-box.info-active {
     background-color: #eff6ff; /* Tailwind blue-50 */
     border-color: #bfdbfe; /* Tailwind blue-200 */
}
.info-box.info-active h3 {
    color: #1e40af; /* Tailwind blue-800 */
}


/* Basic Fade-in Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Placeholder Text for Missing Images */
.placeholder-text {
    background-color: #e5e7eb; /* gray-200 */
    color: #6b7280; /* gray-500 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem; /* text-sm */
    text-align: center;
    border-radius: 0.5rem; /* rounded-lg */
    min-height: 100px; /* Give placeholder some height */
}