/* Reset some basic styles */
body, h1, h2, h3, h4, p, ul, li, figure, figcaption, blockquote, dl, dd {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Example: Using Inter, a nice sans-serif. Add @import in HTML or here if using Google Fonts */
    line-height: 1.6;
    color: #333; /* Default text color */
    background-color: #f7f9fc; /* Light off-white/blueish background for the page body */
    font-size: 16px;
}

.container {
    width: 90%;
    max-width: 1100px; /* Max width for content */
    margin: 0 auto; /* Centering */
    padding: 20px 0; /* Padding top/bottom for sections */
}

/* Header (consistent across pages) */
header.main-header {
    background-color: #fff; /* White header background */
    padding: 15px 0;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 30px; /* Space below header */
}

header.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

header.main-header .logo a {
    font-size: 1.8em;
    font-weight: 700;
    color: #005F60; /* Dark Teal for logo text */
    text-decoration: none;
}
header.main-header .logo a:hover {
    color: #249EA0;
}

header.main-header nav ul {
    list-style: none;
    display: flex;
}

header.main-header nav ul li {
    margin-left: 20px;
}

header.main-header nav ul li a {
    text-decoration: none;
    color: white;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
header.main-header nav ul li a:hover,
header.main-header nav ul li a.active {
    background-color: #e0f7fa; /* Light teal background on hover */
    color: #005F60;
}

/* Buttons */
.button-primary {
    background-color: #FD5901; /* Primary Orange */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-block; /* Allows margin and padding */
}
.button-primary:hover {
    background-color: #F78104; /* Secondary Orange */
}

.button-secondary {
    background-color: #249EA0; /* Primary Teal/Blue */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-block;
}
.button-secondary:hover {
    background-color: #008083; /* Medium Teal/Blue */
}


/* Footer (consistent across pages) */
footer.main-footer {
    background-color: #005F60; /* Dark Teal */
    color: #e0f7fa; /* Light teal text */
    text-align: center;
    padding: 30px 0;
    margin-top: 50px;
    font-size: 0.9em;
}
footer.main-footer .container {
    padding-top:0; padding-bottom:0;
}
footer.main-footer a {
    color: #FAAB36; /* Accent Orange/Yellow for links */
    text-decoration: none;
}
footer.main-footer a:hover {
    text-decoration: underline;
}
footer.main-footer p {
    margin-bottom: 10px;
}
footer.main-footer .footer-links span {
    margin: 0 10px;
}


/* Utility classes */
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }

/* Specific section styling - we'll add this per page */

/* Homepage Specific Styles */
        .hero-section {
            text-align: center;
            padding: 40px 20px; /* More padding */
            /* background-color: #fff; */ /* White background for this section */
            /* border-radius: 8px;*/
            /* margin-bottom: 40px; */
        }
        .hero-section h1 {
            font-size: 2.6em; /* Larger heading */
            color: #005F60; /* Dark Teal */
            margin-bottom: 20px;
            font-weight: 700;
        }
        .hero-section .subheadline {
            font-size: 1.2em;
            color: #555;
            max-width: 700px;
            margin: 0 auto 30px auto;
            line-height: 1.7;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */
            gap: 30px;
            margin-bottom: 50px;
        }
        .feature-card {
            background-color: #fff;
            padding: 30px;
            border-radius: 12px; /* More rounded */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            text-align: left; /* Icons might be centered or left */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
        }
        .feature-card .icon { /* This class already existed */
			/*margin-bottom: 20px; */ /* Increased space below icon */
			/* text-align: center; /* If you want the icon itself centered within this div */
			/* If you want the icon div itself to be a certain size and centered: */
			/* display: flex;
			justify-content: center;
			align-items: center;
			width: 60px; /* Example size for the icon container */
			/* height: 60px; */
			/* background-color: #e0f7fa; /* Optional light teal circle behind icon */
			/* border-radius: 50%; */
			/* margin-left: auto; */
			/* margin-right: auto; */
		}

		.feature-icon { /* New class for the SVG element itself */
			width: 48px;  /* Equivalent to Tailwind's w-12 (w-6 is 24px, let's make them bigger) */
			height: 48px; /* Equivalent to Tailwind's h-12 */
			stroke: #FAAB36; /* Accent Orange/Yellow for the stroke (lines) */
							 /* For SVGs with fill="currentColor", this will be overridden by 'color' */
			color: #FAAB36;  /* For SVGs that use fill="currentColor" or if you want to control fill via color */
		}
		
		.feature-card:nth-child(2) .feature-icon { 
			stroke: #008083;
			color: #008083; 
			transform: rotate(135deg);
			}
			
		.feature-card:nth-child(3) .feature-icon { 
			stroke: #FD5901; 
			color: #FD5901; 
			}

			/* If you want different colors for different icons, you can target them specifically */
			/* For example, if you add an ID or another class to the specific SVG */
			/* .feature-card:nth-child(1) .feature-icon { stroke: #FD5901; color: #FD5901; }
			.feature-card:nth-child(2) .feature-icon { stroke: #249EA0; color: #249EA0; }
			.feature-card:nth-child(3) .feature-icon { stroke: #008083; color: #008083; } */
		
        .feature-card h3 {
            font-size: 1.4em;
            color: #005F60; /* Dark Teal */
            margin-bottom: 10px;
            font-weight: 600;
        }
        .feature-card p {
            font-size: 0.95em;
            color: #444;
            line-height: 1.6;
        }

        .cta-section {
            background-color: #e0f7fa; /* Very light teal background */
            padding: 50px 20px;
            text-align: center;
            border-radius: 8px;
        }
        .cta-section .badge {
            display: inline-block;
            background-color: #FAAB36;
            color: #fff;
            padding: 5px 12px;
            border-radius: 12px;
            font-size: 0.8em;
            font-weight: 600;
            margin-bottom: 15px;
            text-transform: uppercase;
        }
        .cta-section h2 {
            font-size: 2.2em;
            color: #005F60; /* Dark Teal */
            margin-bottom: 15px;
            font-weight: 700;
        }
        .cta-section .price-info {
            font-size: 1.1em;
            color: #008083; /* Medium Teal */
            margin-bottom: 30px;
        }
        .cta-section .button-primary { /* Main CTA button */
            font-size: 1.2em;
            padding: 15px 40px;
            background-color: #FD5901; /* Primary Orange */
        }
        .cta-section .button-primary:hover {
            background-color: #F78104; /* Secondary Orange */
        }
		

/* End Homepage Specific Styles */

/* Registration Specific Styles */

.registration-form-container {
        max-width: 600px; /* Or your preferred width for forms */
        margin: 30px auto; /* Center the form container */
        padding: 30px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    }
    .registration-form-container h1 {
        text-align: center;
        color: #005F60; /* Dark Teal */
        margin-bottom: 25px;
        font-size: 1.8em;
    }
    .registration-form-container p.intro-text {
        text-align: center;
        margin-bottom: 25px;
        color: #555;
        font-size: 1.05em;
    }
    .form-group { margin-bottom: 20px; } /* Increased spacing */
    .form-group label {
        display: block;
        margin-bottom: 8px; /* More space for label */
        font-weight: 600; /* Make labels a bit bolder */
        color: #333;
    }
    .form-group input[type="text"],
    .form-group input[type="email"] {
        width: 100%;
        padding: 12px; /* Increased padding */
        border: 1px solid #ccc; /* Slightly darker border */
        border-radius: 6px; /* Consistent with buttons */
        box-sizing: border-box;
        font-size: 1em;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .form-group input[type="text"]:focus,
    .form-group input[type="email"]:focus {
        border-color: #FD5901; /* Primary Orange on focus */
        box-shadow: 0 0 0 3px rgba(253, 89, 1, 0.2); /* Subtle focus ring */
        outline: none;
    }

    .error-messages-box { /* Styling for the error messages block */
        background-color: #f8d7da; /* Light red */
        color: #721c24; /* Dark red text */
        border: 1px solid #f5c6cb;
        padding: 15px;
        border-radius: 6px;
        margin-bottom: 20px;
    }
    .error-messages-box strong { display: block; margin-bottom: 5px; }
    .error-messages-box ul { list-style-position: inside; padding-left: 0; margin-top: 5px;}
    .error-messages-box ul li { margin-bottom: 3px;}


    #checkout-button { /* Already in style.css as .button-primary or .button-stripe */
        /* If it was .button-stripe, ensure it aligns with .button-primary */
        width: 100%; /* Make button full width within its container */
        font-size: 1.1em;
        margin-top: 10px; /* Reduced top margin as it's inside form group */
    }

/* End Registration Specific Styles */


/* Styles for survey.php and survey_engine.php */

.survey-card-container {
    max-width: 700px; /* A bit wider for survey intro/engine */
    margin: 40px auto;
    padding: 35px 40px; /* More padding */
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.09);
    text-align: center; /* Center content within the card */
}

.survey-card-container h1,
.survey-card-container h2 {
    color: #005F60; /* Dark Teal */
    margin-bottom: 20px;
}

.survey-card-container p {
    color: #444;
    font-size: 1.05em;
    line-height: 1.7;
    margin-bottom: 15px;
}

.survey-card-container .start-survey-button { /* For the button on survey.php */
    margin-top: 30px;
    padding: 15px 40px; /* Larger button */
    font-size: 1.1em;
}

/* Styles specific to survey_engine.php will follow */

/* Styles for survey_engine.php */

.survey-engine-content { /* Wrapper for the whole survey engine interface */
    /* Uses .survey-card-container for basic card styling */
    text-align: left; /* Override centered text for questions */
}

/* Progress Bar */
.progress-bar-container {
    width: 100%;
    background-color: #e9ecef; /* Lighter grey */
    border-radius: 25px; /* More rounded */
    margin-bottom: 30px;
    padding: 3px; /* Small padding to see border */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.progress-bar {
    background-color: #249EA0; /* Primary Teal/Blue */
    height: 20px;
    border-radius: 22px; /* Keep it rounded inside */
    text-align: center;
    line-height: 20px;
    color: white;
    font-size: 0.85em;
    font-weight: 600;
    transition: width 0.4s ease-out; /* Smooth progress animation */
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide text if bar too small */
}

/* Question Area */
.question-wrapper { /* Wrapper for question number, text, and options */
    margin-bottom: 30px;
    padding: 20px;
    background-color: #fdfdfd; /* Very light off-white for question box */
    border: 1px solid #e7e7e7;
    border-radius: 8px;
}

.question-number {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 8px;
    font-weight: 500;
}

.question-text {
    font-size: 1.25em; /* Larger question text */
    color: #333;
    margin-bottom: 25px;
    line-height: 1.5;
    font-weight: 600; /* Make question stand out */
}

/* Radio Button Options Styling */
.answer-options {
    /* No specific wrapper style needed unless you want a border around all options */
}

.answer-options label {
    display: block; /* Make each label a block for full-width click */
    background-color: #fff;
    border: 1px solid #d1d5db; /* Light grey border */
    padding: 15px 20px;
    margin-bottom: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    font-size: 1em;
    color: #454545;
    position: relative; /* For custom radio button indicator if added */
}

.answer-options label:hover {
    border-color: #FAAB36; /* Accent Orange/Yellow on hover */
    background-color: #fffaf0; /* Very light orange tint */
}

.answer-options input[type="radio"] {
    margin-right: 12px;
    vertical-align: middle;
    /* Consider hiding default radio and styling a custom one if you want full control */
    /* For now, let's style the default a bit */
    transform: scale(1.2); /* Slightly larger radio */
    accent-color: #FD5901; /* Primary Orange for the radio dot */
}

.answer-options input[type="radio"]:focus + span { /* If you wrap label text in <span> */
    /* Add focus style to label text */
}
.answer-options input[type="radio"]:checked + label, /* This doesn't work as label is parent */
/* We'll use JS to add a class to the label when its radio is checked if needed for more styling */
/* Or simply rely on the accent-color for the radio itself */

.answer-options label.checked-label { /* Add this class via JS if you want to style the selected label */
    border-color: #FD5901;
    background-color: #fff3e0; /* Lighter Primary Orange background */
    font-weight: 600;
    color: #FD5901;
}


/* Navigation Buttons */
.navigation-buttons {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.navigation-buttons .button-primary, /* Next/Finish */
.navigation-buttons .button-secondary { /* Previous */
    padding: 12px 30px;
    font-size: 1.05em;
}

/* Styles for report.php */

.report-page-container { /* Main wrapper for report content if needed, often just .container is fine */
    /* No specific styles here yet, but can be used for overall report page structure */
}

.report-header-section {
    padding: 20px;
    background-color: #f8f9fa; /* Light grey for a subtle intro box */
    border-radius: 8px;
    margin-bottom: 30px;
    border: 1px solid #e9ecef;
}
.report-header-section h1 { /* For "Report for: User Name" */
    font-size: 1.8em;
    color: #005F60; /* Dark Teal */
    margin-bottom: 8px;
}
.report-header-section p {
    font-size: 1em;
    color: #555;
    margin-bottom: 5px;
}

/* General Section Styling for Report Parts */
.report-section {
    background-color: #fff;
    padding: 25px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.07);
    margin-bottom: 35px;
}
.report-section h2.section-title-report { /* For titles like "Segment Performance Overview" */
    font-size: 1.6em;
    color: #005F60; /* Dark Teal */
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #249EA0; /* Primary Teal/Blue border */
}
.report-section h3.subsection-title-report { /* For "Segment Scores", "Segment Insights" */
    font-size: 1.4em;
    color: #008083; /* Medium Teal */
    margin-top: 25px; /* Space above if multiple subsections */
    margin-bottom: 15px;
}


/* Chart Area */
.chart-container-report { /* Wrapper for the canvas */
	width: 100%;
    max-width: 700px;
    margin: 0 auto 30px auto;
    padding: 15px;
    /* border: 1px solid #e0e0e0; */
    /* border-radius: 8px; */
    /* background-color: #fdfdfd; */
    /* Add a specific height or min-height here */
    height: 400px; /* Example: Fixed height */
    /* Or for more flexibility: */
    /* min-height: 400px; */
}
#segmentChart { /* The canvas itself */
    /* max-height: 400px;  */ /* Prevent chart from becoming too tall */
}

/* Segment Scores Table */
.report-table { /* Already defined in previous response, ensure it's in style.css */
    width: 100%;
    margin-bottom: 20px;
    border-collapse: collapse;
    font-size: 0.95em;
}
.report-table th, .report-table td {
    border: 1px solid #d1d5db;
    padding: 10px 12px;
    text-align: left;
}
.report-table th {
    background-color: #e9ecef; /* Light grey header */
    color: #333;
    font-weight: 600;
}
.report-table td:nth-child(2) { /* Percentage column */
    text-align: center;
    font-weight: 500;
}

/* Segment Insights & Recommendations (Grouped by Level) */
.recommendation-group-report { /* Wrapper for each level group */
    margin-bottom: 25px;
    padding-bottom: 15px;
    /* border-bottom: 1px dashed #ccc; */ /* Optional separator */
}
.recommendation-group-report:last-child {
    border-bottom: none;
}
.recommendation-group-report h2.level-title-report { /* "Excellent", "Good", etc. */
    font-size: 1.5em;
    color: #FD5901; /* Primary Orange for level titles */
    margin-bottom: 15px;
    /* border-left: 4px solid #FD5901;
    padding-left: 10px; */
}
.recommendation-group-report .segment-insight { /* Wrapper for each segment within a level */
    margin-bottom: 20px;
    padding-left: 15px; /* Indent segment details under level */
    border-left: 3px solid #FAAB36; /* Accent orange left border */
}
.recommendation-group-report .segment-insight h3.segment-name-title { /* Segment Name */
    font-size: 1.2em;
    color: #008083; /* Medium Teal */
    margin-bottom: 5px;
    font-weight: 600;
}
.recommendation-group-report .segment-insight p.segment-recommendation-text {
    font-size: 0.95em;
    color: #444;
    line-height: 1.6;
}


/* User/Manager Focus Areas */
.focus-areas-report {
    margin-top: 10px; /* Space from the main section title */
}
.focus-areas-report h2.focus-title-report { /* "User Focus Areas", "Manager Focus Areas" */
    font-size: 1.5em;
    color: #FD5901; /* Primary Orange */
    margin-bottom: 20px;
}
.focus-areas-report .segment-focus { /* Wrapper for each segment in focus areas */
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 3px solid #FAAB36;
}
.focus-areas-report .segment-focus h3.segment-name-focus { /* Segment name */
    font-size: 1.2em;
    color: #008083; /* Medium Teal */
    margin-bottom: 8px;
    font-weight: 600;
}
.focus-areas-report .segment-focus ul {
    list-style: disc;
    margin-left: 20px; /* Indent list items */
    padding-left: 0;
}
.focus-areas-report .segment-focus ul li {
    margin-bottom: 8px;
    font-size: 0.95em;
    color: #444;
    line-height: 1.6;
}

/* PDF Download Button */
.pdf-download-section {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
}
.pdf-download-section .button-primary {
    font-size: 1.1em;
    padding: 15px 35px;
}

/* Message boxes from style.css will be used for errors/success */


/* End Styles for survey_engine.php */
		

/* Example Media Query in style.css */
@media (max-width: 768px) {
    .hero-section h1 { font-size: 2.2em; }
    .features-grid { grid-template-columns: 1fr; /* Stack features on smaller screens */ }
    header.main-header .container { flex-direction: column; }
    header.main-header nav ul { margin-top: 10px; }
    header.main-header nav ul li { margin-left: 10px; margin-right: 10px; }
	
}