/* ============================================================================
   UNIFIED CSS ARCHITECTURE - HEB Suzuki Strings Booster Club
   Version: 1.0.0 (Updated with Homepage Styles)

   Table of Contents:
   1. CSS Variables
   2. Reset & Base Styles
   3. Typography
   4. Layout Components
   5. Form Components
   6. Buttons
   7. Alerts & Messages
   8. Navigation Components
   9. Page-Specific Styles
   10. Utility Classes
   11. Responsive Design
   12. Dark Mode
   13. Print Styles
   ============================================================================ */

/* ============================================================================
   1. CSS VARIABLES
   ============================================================================ */

:root
{
	/* Typography */
	--sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
	--mono-font: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", monospace;
	--serif-font: -apple-system-ui-serif, ui-serif, Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
	--font-size-base: 1rem;
	--line-height-base: 1.5;
	/* Brand Colors */
	--primary-purple: #663399;
	--primary-purple-hover: #512b84;
	--light-purple: #ffe6ff;
	--purple-dark: #4b287c;
	/* Text Colors */
	--text-dark: #333333;
	--text-light: #666666;
	--text-muted: #999999;
	/* Background Colors */
	--bg-white: #ffffff;
	--bg-light: #f8f9fa;
	--bg-form: #f5f7ff;
	--bg-dark: #2a2a2a;
	--bg-darker: #1e1e1e;
	--bg-input: #ffffff;
	--bg-input-dark: #374151;
	/* Lighter than container for contrast */
	/* Border Colors */
	--border-light: #e9ecef;
	--border-medium: #dee2e6;
	--border-dark: #495057;
	--border-input: #ccc;
	/* Status Colors */
	--success-color: #28a745;
	--error-color: #dc3545;
	--warning-color: #ffc107;
	--info-color: #17a2b8;
	--valid-color: #2ecc71;
	/* Spacing */
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
	--spacing-xxl: 3rem;
	/* Border Radius */
	--border-radius: 0.375rem;
	--border-radius-lg: 0.5rem;
	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
	--shadow-focus: 0 0 0 2px rgba(102, 51, 153, 0.25);
	/* Form Specific */
	--form-padding: 0.75rem;
	--input-height: 2.75rem;
}

/* ============================================================================
   2. RESET & BASE STYLES
   ============================================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html
{
	font-family: var(--serif-font);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body
{
	margin: 0;
	padding: 0;
	color: var(--text-dark);
	background-color: var(--bg-white);
	font-family: inherit;
	line-height: inherit;
	/* Added grid layout from homepage */
	display: grid;
	grid-template-columns: 1fr min(60rem, 90%) 1fr;
}

body > * { grid-column: 2; }

img
{
	max-width: 100%;
	height: auto;
	display: block;
}

/* ============================================================================
   3. TYPOGRAPHY
   ============================================================================ */

h1, h2, h3, h4, h5, h6
{
	margin: 0 0 var(--spacing-md) 0;
	font-weight: 600;
	line-height: 1.2;
	color: var(--text-light);
}

h1
{
	font-size: 2.5rem;
	font-weight: 700;
}

header h2 
{
  color: ivory;
  letter-spacing: 1px;
  font-weight: 300;
  font-size: 1.5rem;
  text-align: center;
  max-width: 80%;
}


h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p
{
	margin: 0 0 var(--spacing-md) 0;
	overflow-wrap: break-word;
}

a
{
	color: var(--primary-purple);
	text-decoration: none;
}

a:hover
{
	color: var(--primary-purple-hover);
	text-decoration: underline;
}

a:focus
{
	outline: 2px solid var(--primary-purple);
	outline-offset: 2px;
}

/* ============================================================================
   4. LAYOUT COMPONENTS
   ============================================================================ */

/* Header */
header
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: var(--primary-purple);
	color: white;
	padding: var(--spacing-md) 0;
	text-align: center;
	min-height: 150px;
}

header img
{
	padding: 1rem 0;
	max-width: 100%;
	height: auto;
	/* display: block; */
	/* margin: 0 auto; */
}

/* Navigation Container */
.main-navigation {
  font-size: 1rem;
  line-height: 2;
  padding: 1rem 0 0 1rem;

  /* Flexbox for a better layout */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 0.5rem; /* handles spacing between links */
}

/* Navigation Links */
.main-navigation a {
  color: var(--purple-dark);
  text-decoration: none;
  border: 1px solid var(--purple-dark);
  border-radius: var(--border-radius);
  padding: 0.1rem 1rem;
  
  /* Smooth transition for hover effects */
  transition: color 0.3s ease, border-color 0.3s ease;
}

.main-navigation a:hover {
  color: ivory;
  /* border-color: var(--light-purple); */
  background-color: var(--purple-dark);
}

/* Main Content */
main
{
	min-height: calc(100vh - 120px);
	padding: var(--spacing-xl) var(--spacing-md);
}

/* Section Styling */
section
{
	border-top: 1px solid var(--border-light);
	border-bottom: 1px solid var(--border-light);
	padding: 2rem 1rem;
	margin: 3rem 0;
}

section + section
{
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}

section:last-child
{
	border-bottom: 0;
	padding-bottom: 0;
}

/* Container */
.container
{
	background-color: var(--bg-white);
	padding: 2rem;
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow-lg);
	width: 100%;
	max-width: 900px;
	margin: 2rem auto;
	border: 1px solid var(--border-light);
}

/* Footer */
footer
{
	margin-top: var(--spacing-xl);
	padding: var(--spacing-lg) var(--spacing-md);
	color: var(--text-light);
	font-size: 0.9rem;
	text-align: center;
	border-top: 1px solid var(--border-light);
}

/* ============================================================================
   5. FORM COMPONENTS
   ============================================================================ */

/* Form Groups */
.form-group { margin-bottom: var(--spacing-lg); }

/* Labels */
label
{
	display: block;
	font-weight: 600;
	margin-bottom: var(--spacing-sm);
	color: var(--text-dark);
	line-height: 1.4;
}

.required-indicator
{
	color: var(--error-color);
	font-weight: bold;
	margin-left: var(--spacing-xs);
}

/* Form Controls */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea
{
	width: 100%;
	padding: var(--form-padding);
	border: 2px solid var(--border-medium);
	border-radius: var(--border-radius);
	font-size: 1rem;
	font-family: inherit;
	background-color: var(--bg-input);
	color: var(--text-dark);
	transition: all 0.2s ease;
	line-height: 1.4;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus
{
	border-color: var(--primary-purple);
	outline: 3px solid rgba(102, 51, 153, 0.3);
	outline-offset: 2px;
	box-shadow: none;
}

.form-control:hover:not(:focus),
input:hover:not(:focus),
select:hover:not(:focus) { border-color: var(--border-dark); }

/* Validation States */
.form-control.invalid,
.form-control[aria-invalid="true"]
{
	border-color: var(--error-color);
	background-color: #fff5f5;
}

.form-control.valid { border-color: var(--valid-color); }

/* Form Help Text */
.form-help
{
	font-size: 0.875rem;
	color: var(--text-light);
	margin-top: var(--spacing-xs);
	line-height: 1.4;
}

.form-help.important
{
	color: var(--primary-purple);
	font-weight: 500;
	font-style: normal;
}

/* Fieldsets */
fieldset
{
	border: 2px solid var(--border-light);
	border-radius: var(--border-radius);
	padding: var(--spacing-lg);
	margin: var(--spacing-lg) 0;
	background: var(--bg-light);
}

fieldset legend
{
	font-weight: 700;
	font-size: 1.1rem;
	padding: 0 var(--spacing-sm);
	color: var(--text-dark);
}

/* Student Fieldsets */
.student-fieldset
{
	background: white;
	border: 1px solid var(--border-medium);
	margin: var(--spacing-md) 0;
}

.student-fieldset legend
{
	font-size: 1rem;
	font-weight: 600;
	color: var(--primary-purple);
}

/* Student Grid */
.student-grid
{
	display: grid;
	grid-template-columns: 2fr 1fr 1.5fr;
	gap: var(--spacing-md);
	align-items: start;
}

/* Checkboxes */
.checkbox-group { margin-top: var(--spacing-md); }

.checkbox-option
{
	margin: var(--spacing-sm) 0;
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-sm);
}

.checkbox-option input[type="checkbox"]
{
	margin-top: 0.125rem;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	cursor: pointer;
}

.checkbox-option label
{
	margin: 0;
	font-weight: normal;
	cursor: pointer;
	line-height: 1.4;
}

.checkbox-option input[type="checkbox"]:focus
{
	outline: 3px solid rgba(102, 51, 153, 0.3);
	outline-offset: 2px;
}

/* ============================================================================
   6. BUTTONS
   ============================================================================ */

.btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	font-size: var(--font-size-base);
	font-weight: 500;
	font-family: inherit;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--border-radius);
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	user-select: none;
	min-width: 120px;
}

.btn:focus
{
	outline: 3px solid rgba(102, 51, 153, 0.5);
	outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"]
{
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

/* Button Variants */
.btn-primary
{
	background-color: var(--primary-purple);
	color: white;
	border-color: var(--primary-purple);
}

.btn-primary:hover:not(:disabled)
{
	background-color: var(--primary-purple-hover);
	border-color: var(--primary-purple-hover);
	color: white;
	text-decoration: none;
}

.btn-secondary
{
	background-color: #6c757d;
	color: white;
	border-color: #6c757d;
}

.btn-secondary:hover:not(:disabled)
{
	background-color: #5a6268;
	border-color: #5a6268;
	color: white;
	text-decoration: none;
}

.btn-outline
{
	background-color: transparent;
	color: var(--primary-purple);
	border-color: var(--primary-purple);
}

.btn-outline:hover:not(:disabled)
{
	background-color: var(--primary-purple);
	color: white;
	text-decoration: none;
}

/* Button Sizes */
.btn-sm
{
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
}

.btn-lg
{
	padding: 1rem 2rem;
	font-size: 1.125rem;
}

/* ============================================================================
   7. ALERTS & MESSAGES
   ============================================================================ */

.alert
{
	padding: var(--spacing-md);
	margin-bottom: var(--spacing-md);
	border: 1px solid transparent;
	border-radius: var(--border-radius);
	font-size: 0.95rem;
}

.alert-success
{
	background-color: #d4edda;
	border-color: #c3e6cb;
	color: #155724;
}

.alert-error,
.alert-danger
{
	background-color: #f8d7da;
	border-color: #f5c6cb;
	color: #721c24;
}

.alert-warning
{
	background-color: #fff3cd;
	border-color: #ffeaa7;
	color: #856404;
}

.alert-info
{
	background-color: #d1ecf1;
	border-color: #bee5eb;
	color: #0c5460;
}

/* Error Display */
.error-display
{
	background: #ffebee;
	border: 1px solid var(--error-color);
	border-radius: var(--border-radius);
	padding: var(--spacing-md);
	margin: var(--spacing-md) 0;
	color: #c62828;
}

.error-display ul
{
	margin: var(--spacing-sm) 0 0 var(--spacing-lg);
	padding: 0;
}

/* Validation Error */
.validation-error
{
	color: var(--error-color);
	font-size: 0.875rem;
	margin-top: var(--spacing-xs);
	display: flex;
	align-items: center;
}

.validation-error::before
{
	content: "⚠️";
	margin-right: var(--spacing-xs);
}

/* Success Display */
.success-display
{
	background: #e8f5e8;
	border: 1px solid var(--success-color);
	border-radius: var(--border-radius);
	padding: var(--spacing-md);
	margin: var(--spacing-md) 0;
	color: #2e7d32;
}

/* ============================================================================
   8. NAVIGATION COMPONENTS
   ============================================================================ */

/* Progress Steps */
.progress-steps { margin-bottom: var(--spacing-xl); }

.step-list
{
	display: flex;
	justify-content: center;
	gap: var(--spacing-xl);
	list-style: none;
	margin: 0;
	padding: 0;
}

.step
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-md);
	background: var(--bg-light);
	color: var(--text-muted);
	border-radius: var(--border-radius);
	border: 2px solid var(--border-light);
	min-width: 120px;
	text-align: center;
}

.step.active
{
	background: var(--primary-purple);
	color: white;
	border-color: var(--primary-purple);
}

.step-number
{
	font-weight: bold;
	font-size: 1.25rem;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
}

.step.active .step-number { background: rgba(255, 255, 255, 0.3); }

.step-label
{
	font-size: 0.9rem;
	font-weight: 500;
}

/* Back to homepage link above progress bar */
.form-navigation {
    margin-bottom: 1rem;
    text-align: center;
}

.back-to-home {
    color: #663399;
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #f8f9fa;
    display: inline-block;
    transition: all 0.2s ease;
}

.back-to-home:hover {
    background: #e9ecef;
    border-color: #663399;
    text-decoration: none;
}

/* ============================================================================
   9. PAGE-SPECIFIC STYLES
   ============================================================================ */

/* Membership Form */
.step-welcome
{
	background: var(--light-purple);
	border: 1px solid var(--primary-purple);
	border-radius: var(--border-radius);
	padding: 1.25rem;
	margin-bottom: var(--spacing-lg);
	text-align: center;
}

.step-welcome p
{
	margin: 0;
	font-size: 1.05rem;
}

.step-welcome strong { color: var(--primary-purple); }

/* General Page Headers/Subtitles (used on payment-selection.php) */
.page-header
{
	font-size: 2.25rem;
	/* Larger than default h1 for page title */
	font-weight: 700;
	color: var(--primary-purple);
	margin-bottom: var(--spacing-sm);
	text-align: center;
}
.page-header h1 { color: white; }

.subtitle
{
	font-size: 1.2rem;
	color: white;
	margin-bottom: var(--spacing-xl);
	text-align: center;
}

/* Payment Selection Page */
.payment-container
{
	max-width: 800px;
	margin: 0 auto;
}

/* Payment Section Box */
.payment-section
{
	background: white;
	border: 1px solid #ddd;
	border-radius: var(--border-radius-lg);
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-xl);
	box-shadow: var(--shadow-sm);
}

.payment-section h2
{
	margin-top: 0;
	color: var(--text-dark);
	border-bottom: 2px solid var(--info-color);
	padding-bottom: var(--spacing-sm);
}

.payment-summary
{
	background: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: var(--border-radius-lg);
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-xl);
}

.payment-summary h2
{
	margin-top: 0;
	color: var(--text-dark);
	border-bottom: 2px solid var(--info-color);
	padding-bottom: var(--spacing-sm);
}

/* Consolidated Summary List and Item */
.summary-list
{
	margin: 0;
	padding: 0;
}

.summary-item
{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: var(--spacing-sm) 0;
	padding: var(--spacing-xs) 0;
	border-bottom: 1px solid var(--border-light);
}

.summary-item:last-child { border-bottom: none; }

.summary-item dt
{
	font-weight: 600;
	color: var(--text-dark);
	flex: 0 0 40%;
}

.summary-item dd
{
	margin: 0;
	text-align: right;
	flex: 1;
}

.payment-breakdown
{
	margin: 0;
	padding: 0;
}

.breakdown-line
{
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--spacing-sm);
	padding: var(--spacing-xs) 0;
}

.breakdown-line.total-line
{
	border-top: 2px solid var(--text-dark);
	padding-top: var(--spacing-sm);
	margin-top: var(--spacing-sm);
	font-size: 1.1em;
}

.total-display
{
	background: var(--bg-light);
	border: 2px solid var(--success-color);
	border-radius: var(--border-radius-lg);
	padding: var(--spacing-md);
	text-align: center;
	font-size: 1.2rem;
	margin: var(--spacing-xl) 0;
}

/* Payment Loading */
#payment-loading
{
	background: #e6f3ff;
	border: 1px solid var(--info-color);
	border-radius: var(--border-radius);
	padding: var(--spacing-md);
	margin-bottom: var(--spacing-md);
	text-align: center;
	color: var(--info-color);
}

#payment-loading::after
{
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid var(--info-color);
	border-radius: 50%;
	border-top-color: transparent;
	animation: spin 1s linear infinite;
	margin-left: 10px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Payment Categories */
.category-details { margin-bottom: var(--spacing-md); }

.category-summary
{
	font-size: 1.1rem;
	font-weight: bold;
	padding: var(--spacing-sm);
	cursor: pointer;
	background: var(--bg-light);
	border-radius: var(--border-radius);
	margin-bottom: var(--spacing-sm);
}

.category-items
{
	margin-left: var(--spacing-md);
	margin-top: var(--spacing-sm);
}

.item-row
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: var(--spacing-sm) 0;
	padding: var(--spacing-sm);
	border: 1px solid var(--border-light);
	border-radius: var(--border-radius);
}

.item-select { width: 80px; }

.email-display
{
	color: var(--text-light);
	font-size: 0.9em;
	display: block;
}

/* Student details within summary */
.student-details dd { text-align: left; }

.student-list
{
	list-style: none;
	margin: 0;
	padding: 0;
}

.student-entry { margin: var(--spacing-xs) 0; }

.student-grade
{
	color: var(--text-light);
	font-size: 0.9em;
}

/* Fees note */
.fees-note
{
	text-align: center;
	margin-top: var(--spacing-md);
	color: var(--text-light);
}

/* Payment action section */
.payment-action { text-align: center; }

/* Tax notice */
.tax-notice
{
	margin-top: var(--spacing-xl);
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--border-light);
	text-align: center;
}

.tax-notice p
{
	margin: 0;
	color: var(--text-light);
}

/* Back button styling */
.payment-action .btn-secondary { margin-top: var(--spacing-md); }

/* Membership and items display */
.membership-choice,
.items-list { text-align: right; }

.item-line-price
{
	font-weight: 600;
	color: var(--primary-purple);
}

.items-list
{
	list-style: none;
	margin: 0;
	padding: 0;
}

.item-entry { margin: var(--spacing-sm) 0; }

/* Cancel button separator */
.cancel-separator
{
	margin-top: var(--spacing-md);
	padding-top: var(--spacing-md);
	border-top: 1px solid var(--border-light);
}

/* ============================================================================\
   10. UTILITY CLASSES
   ============================================================================ */

.sr-only
{
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-muted { color: var(--text-muted); }
.text-light { color: var(--text-light); }

/* Margin utilities */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-5 { margin-bottom: var(--spacing-xl); }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-5 { margin-top: var(--spacing-xl); }

/* Autofill styling */
input:-webkit-autofill
{
	-webkit-box-shadow: 0 0 0 30px var(--bg-input) inset !important;
	box-shadow: 0 0 0 30px var(--bg-input) inset !important;
	-webkit-text-fill-color: var(--text-dark) !important;
}

/* Loading state */
.form-loading
{
	opacity: 0.6;
	pointer-events: none;
}

/* ============================================================================
   11. RESPONSIVE DESIGN
   ============================================================================ */

/* Tablet & Smaller (Max 768px) */

@media (max-width: 768px)
{
	main { padding: var(--spacing-md) var(--spacing-sm); }
	
	.container
	{
		margin: 1rem;
		padding: 1.5rem;
	}
	
	h1 { font-size: 2rem; }
	h2 { font-size: 1.75rem; }
	h3 { font-size: 1.5rem; }
	
	/* Adjusted from 1.25rem in first block */
	.btn
	{
		padding: 0.625rem 1.25rem;
		font-size: 0.95rem;
	}
	
	header img { max-width: 350px; }
	
	.student-grid
	{
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
		/* From second block */
	}
	
	.form-actions
	{
		flex-direction: column-reverse;
		gap: var(--spacing-md);
	}
	
	.form-actions .btn { width: 100%; }
	.amount-line { font-size: 0.9em; }
	.amount-line.total-line { font-size: 1em; }
	
	/* --- Step List Specifics for Tablet/Mobile --- */
	.step-list
	{
		/* Keep horizontal, allow scroll */
		flex-direction: row;
		flex-wrap: nowrap;
		/* Prevent wrapping */
		overflow-x: auto;
		/* Enable horizontal scrolling */
		-webkit-overflow-scrolling: touch;
		/* Smooth scrolling on iOS */
		scrollbar-width: none;
		/* Hide scrollbar for Firefox */
		-ms-overflow-style: none;
		/* Hide scrollbar for IE/Edge */
		gap: var(--spacing-sm);
		/* More compact gap */
		justify-content: flex-start;
		/* Align steps to start */
		padding-bottom: var(--spacing-xs);
		/* Add some space for potential scrollbar
	 */
	}
	
	/* Hide scrollbar for Webkit browsers */
	.step-list::-webkit-scrollbar { display: none; }
	
	.step
	{
		flex-shrink: 0;
		/* Prevent steps from shrinking */
		padding: var(--spacing-xs) var(--spacing-sm);
		/* More compact padding */
		min-width: 80px;
		/* Ensure a minimum width */
		max-width: 120px;
		/* Prevent steps from getting too wide */
		flex-direction: column;
		/* Stack number and label vertically within each
	 step */
		align-items: center;
		/* Center content within step */
		text-align: center;
		/* Center text */
	}
	
	.step-number
	{
		font-size: 1rem;
		width: 1.75rem;
		/* Slightly larger for better tap target */
		height: 1.75rem;
		margin-bottom: var(--spacing-xs);
		/* Space between number and label */
	}
	
	.step-label
	{
		display: block;
		/* Ensure label is visible */
		font-size: 0.75rem;
		/* Smaller font size */
		line-height: 1.2;
		white-space: normal;
		/* Allow text to wrap if needed */
		overflow: hidden;
		/* Hide overflow if text is too long */
		text-overflow: ellipsis;
		/* Add ellipsis for truncated text */
		max-height: 2.4em;
		/* Show max 2 lines of text (1.2 * 2) */
	}
	.header-home-link {
        display: block;
        margin-left: 0;
        margin-top: 10px;
        text-align: center;
    }
}

/* Phone (Max 480px) */

@media (max-width: 480px)
{
	main { padding: var(--spacing-md) var(--spacing-xs); }
	
	.container
	{
		margin: 0.5rem;
		padding: 1rem;
	}
	
	h1 { font-size: 1.75rem; }
	h2 { font-size: 1.5rem; }
	h3 { font-size: 1.2rem; }
	
	/* Slightly smaller for phone */
	.btn
	{
		width: 100%;
		padding: 0.75rem 1rem;
	}
	
	.btn + .btn { margin-top: var(--spacing-sm); }
	fieldset { padding: var(--spacing-md); }
	.form-help.optional { display: none; }
	
	/* --- Step List Specifics for Phone --- */
	.step
	{
		min-width: 70px;
		/* Even smaller min-width for phones */
		max-width: 100px;
		/* Adjust max-width */
		padding: var(--spacing-xs);
		/* Even more compact padding */
	}
	
	.step-number
	{
		width: 1.5rem;
		/* Slightly smaller number */
		height: 1.5rem;
		font-size: 0.9rem;
	}
	
	.step-label
	{
		font-size: 0.7rem;
		/* Even smaller font size for labels */
		max-height: 2.1em;
		/* Max 2 lines (1.2 * 2) */
	}
}

/* ============================================================================\
   12. DARK MODE
   ============================================================================ */

@media (prefers-color-scheme: dark)
{
	:root
	{
		--text-dark: #e0e0e0;
		--text-light: #b0b0b0;
		--text-muted: #888888;
		--bg-white: #1a1a1a;
		--bg-light: #2a2a2a;
		--bg-form: #2d2d2d;
		--bg-input: #374151;
		/* Lighter than background for contrast */
		--border-light: #404040;
		--border-medium: #555555;
		--border-dark: #666666;
		--border-input: #555555;
	}
	
	body
	{
		background-color: var(--bg-white);
		color: var(--text-dark);
	}
	
	.main-navigation a
	{
	    color: goldenrod;
	}
	
	/* Container in dark mode */
	.container
	{
		background-color: var(--bg-form);
		box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4);
	}
	
	/* Form controls with proper contrast */
	.form-control,
	  input[type="text"],
	  input[type="email"],
	  input[type="tel"],
	  input[type="number"],
	  select,
	  textarea
	{
		background-color: var(--bg-input);
		color: #e0e0e0;
		border-color: var(--border-input);
	}
	
	/* Autofill in dark mode */
	input:-webkit-autofill
	{
		-webkit-box-shadow: 0 0 0 30px var(--bg-input) inset !important;
		box-shadow: 0 0 0 30px var(--bg-input) inset !important;
		-webkit-text-fill-color: #ffffff !important;
	}
	
	/* Fieldsets in dark mode */
	fieldset
	{
		background: var(--bg-light);
		border-color: var(--border-medium);
	}
	
	.student-fieldset
	{
		background: var(--bg-form);
		border-color: var(--border-medium);
	}
	
	/* Alerts in dark mode */
	.alert-success
	{
		background-color: #0f2419;
		border-color: #0a3622;
		color: #75b798;
	}
	
	.alert-error,
	  .alert-danger
	{
		background-color: #2c1517;
		border-color: #842029;
		color: #ea868f;
	}
	
	.alert-warning
	{
		background-color: #332701;
		border-color: #664d03;
		color: #ffda6a;
	}
	
	.alert-info
	{
		background-color: #032830;
		border-color: #055160;
		color: #6edff6;
	}
	
	/* Payment page specific */
	.payment-summary
	{
		background: var(--bg-light);
		border-color: var(--border-medium);
	}
	
	.total-display
	{
		background: #2d3748;
		color: #ffffff;
		border-color: #48bb78;
	}
	
	.category-summary
	{
		background: #374151;
		color: #ffffff;
	}
	
	.item-row
	{
		border-color: #4b5563;
		background: #1f2937;
		color: #ffffff;
	}
	
	#payment-loading
	{
		background: #1e3a5f;
		border-color: #60a5fa;
		color: #93c5fd;
	}
	
	/* Button adjustments */
	.btn-secondary
	{
		background: #495057;
		color: #e0e0e0;
	}
	
	.btn-secondary:hover { background: #343a40; }
	
	/* Text colors */
	label,
	  legend,
	  h1, h2, h3, h4, h5, h6 { color: #e0e0e0; }
	.form-help { color: #b0b0b0; }
	.form-help.important { color: var(--light-purple); }
	
	.step-welcome
	{
		background: #3d2852;
		border-color: var(--light-purple);
	}
	
	.step-welcome strong { color: var(--light-purple); }
	
	/* Payment container - main wrapper for payment sections */
	.payment-container
	{
		background-color: var(--bg-white);
		/* Use the dark background */
	}
	
	/* Payment sections - individual sections like summary, breakdown, etc. */
	.payment-section
	{
		background: var(--bg-form);
		/* Slightly lighter than main background */
		border-color: var(--border-medium);
	}
	
	/* Summary and breakdown lists */
	.summary-list,
	  .payment-breakdown
	{
		background: transparent;
		/* Let parent background show through */
	}
	
	/* Individual summary and breakdown items */
	.summary-item,
	  .breakdown-line
	{
		border-color: var(--border-light);
		/* Use dark mode border */
	}
	
	/* Total summary container */
	.total-summary-container
	{
		background: var(--bg-light);
		border-color: var(--border-medium);
	}
	
	/* Payment action section */
	.payment-action
	{
		background: var(--bg-form);
		border-color: var(--border-medium);
	}
	
	/* Student list and items styling */
	.student-list,
	  .items-list { background: transparent; }
	.student-entry,
	  .item-entry { color: var(--text-dark); }
	
	/* Email display styling */
	.email-display { color: var(--text-muted); }
	
	/* Student grade styling */
	.student-grade { color: var(--text-light); }
	
	/* Item details styling */
	.item-details { color: var(--text-light); }
	
	/* Fees note styling */
	.fees-note { color: var(--text-light); }
	
	/* Tax notice styling */
	.tax-notice
	{
		background: var(--bg-light);
		border-color: var(--border-light);
	}
	
	.tax-notice p { color: var(--text-light); }
	
	/* Page header styling */
	.page-header h1 { color: white; }
	.subtitle { color: var(--text-light); }
	
	/* Alert styling for validation warnings */
	.alert-warning
	{
		background-color: #2d2013;
		border-color: #4a3728;
		color: #fbbf24;
	}
	
	/* Ensure all dt/dd elements have proper colors */
	.summary-list dt,
	  .payment-breakdown dt { color: var(--text-dark); }
	.summary-list dd,
	  .payment-breakdown dd { color: var(--text-light); }
	
	/* Total line emphasis */
	.total-line dt,
	  .total-line dd { color: var(--text-dark); }
	
	/* PayPal button container background */
	#paypal-button-container { background: transparent; }
	
	/* Loading and error states */
	#payment-loading
	{
		background: var(--bg-light);
		border-color: var(--border-medium);
		color: var(--text-dark);
	}
	
	#payment-error { background: var(--bg-light); }
}

/* ============================================================================\
   13. PRINT STYLES
   ============================================================================ */

@media print
{
	*
	{
		background: transparent !important;
		color: black !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}
	
	a,
	  a:visited { text-decoration: underline; }
	.btn { border: 1px solid black; }
	
	header
	{
		background: white !important;
		color: black !important;
		border-bottom: 1px solid black;
	}
	
	.sr-only
	{
		position: static !important;
		width: auto !important;
		height: auto !important;
		overflow: visible !important;
		clip: auto !important;
		white-space: normal !important;
	}
	
	.container
	{
		box-shadow: none;
		border: 1px solid #000;
		margin: 0;
		padding: 1rem;
	}
	
	.form-actions .btn { display: none; }
	.progress-steps { display: none; }
	
	.form-control
	{
		border: 1px solid #000;
		background: white;
	}
	
	.student-fieldset,
	  .student-simple-form
	{
		break-inside: avoid;
		box-shadow: none;
		border: 1px solid #000;
		margin-bottom: 10px;
	}
	
	.validation-summary,
	  #payment-loading,\n  #payment-error { display: none; }
}

/* ============================================================================\
   ACCESSIBILITY ENHANCEMENTS
   ============================================================================ */

/* Skip link for screen readers */
.skip-link
{
	position: absolute;
	top: -40px;
	left: 0;
	background: var(--primary-purple);
	color: white;
	padding: 8px;
	text-decoration: none;
	z-index: 100;
}

.skip-link:focus { top: 0; }

/* High contrast mode support */

@media (prefers-contrast: high)
{
	.form-control { border-width: 3px; }
	
	.form-control:focus
	{
		outline-width: 4px;
		border-color: #000;
	}
	
	.step { border-width: 3px; }
	
	.step.active
	{
		border-color: #000;
		background: #000;
		color: #fff;
	}
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce)
{
	*,
	  *::before,
	  *::after
	{
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================================\
   END OF UNIFIED CSS
   ============================================================================ */