/*
 * Solo Residences Calculator Stylesheet
 * Elegant luxury theme with gold-leaf accents, responsive layouts, custom range inputs, and WCAG AA compliance.
 */

:root {
	/* Luxury Theme Color Variables */
	--solores-primary-bg: #fcfbf9;        /* Warm luxurious soft cream/ivory background */
	--solores-border-color: #e2d7c5;      /* Subtle warm-gold border */
	--solores-gold-accent: #c5a059;       /* Metallic gold accent (used for decorative items, buttons, thumbs) */
	--solores-gold-hover: #b38e4b;        /* Darker gold for hover states */
	--solores-gold-focus: rgba(197, 160, 89, 0.35); /* Translucent gold for focus rings */
	
	/* High-Contrast Text Colors (WCAG AA Compliant) */
	--solores-dark-text: #1a1a1a;         /* High-contrast body text */
	--solores-medium-text: #4a4a4a;       /* Secondary details text */
	--solores-gold-text: #8e6f3e;         /* Dark bronze-gold for text on light backgrounds (min 4.5:1 contrast) */
	--solores-button-text: #111111;       /* Dark charcoal for text inside gold button (9.0:1 contrast) */
	
	/* Input and Layout Defaults */
	--solores-input-bg: #ffffff;
	--solores-input-border: #dcd1be;      /* Soft warm gray-gold border for inputs */
	--solores-results-bg: #f7f4ee;        /* Toned results block background */
	
	/* Font Pairings (Inherits default site layout, fallbacks configured for luxury tone) */
	--solores-font-serif: Georgia, Garamond, "Times New Roman", serif;
	--solores-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* 1. Outer Calculator Wrapper */
.solores-calculator-wrapper.solores-calculator-container {
	box-sizing: border-box;
	max-width: 600px;
	width: 100%;
	margin: 2rem auto;
	padding: 40px;
	background-color: var(--solores-primary-bg);
	border: 1px solid var(--solores-border-color);
	border-top: 4px solid var(--solores-gold-accent);
	border-radius: 8px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(197, 160, 89, 0.02);
	font-family: var(--solores-font-sans);
	color: var(--solores-dark-text);
	text-align: left;
}

/* Ensure box-sizing rule propagates to all children */
.solores-calculator-wrapper * {
	box-sizing: border-box;
}

/* 2. Form Layout & Field Spacing */
.solores-calculator-form {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.solores-calc-field {
	display: flex;
	flex-direction: column;
	margin-bottom: 24px;
	width: 100%;
}

.solores-calc-field label,
.solores-calculator-container .solores-label {
	font-family: var(--solores-font-serif);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--solores-dark-text);
	margin-bottom: 10px;
	display: block;
}

/* 3. Input-Slider Group Styling (Desktop/Tablet) */
.solores-input-slider-group {
	display: flex;
	align-items: center;
	gap: 20px;
	width: 100%;
}

.solores-input-slider-group .solores-slider {
	flex: 1;
	min-width: 100px;
}

.solores-input-slider-group .solores-numeric-wrap {
	width: 140px;
	flex-shrink: 0;
}

/* 4. Text Inputs, Number Inputs, and Select Elements */
.solores-number-input,
.solores-select,
.solores-lead-name,
.solores-lead-phone {
	display: block;
	width: 100%;
	height: 46px; /* Ensuring minimum touch target height */
	padding: 10px 14px;
	background-color: var(--solores-input-bg);
	border: 1px solid var(--solores-input-border);
	border-radius: 4px;
	font-family: var(--solores-font-sans);
	font-size: 16px; /* Avoids iOS auto-zoom behavior on input focus */
	color: var(--solores-dark-text);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Number inputs adjustments */
.solores-number-input {
	-moz-appearance: textfield;
}
.solores-number-input::-webkit-outer-spin-button,
.solores-number-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Select element styling */
.solores-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e6f3e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
	padding-right: 40px; /* Space for the custom arrow */
	cursor: pointer;
}

/* Focus Indicator Style (WCAG AA Compliance) */
.solores-number-input:focus,
.solores-select:focus,
.solores-lead-name:focus,
.solores-lead-phone:focus {
	outline: none;
	border-color: var(--solores-gold-accent);
	box-shadow: 0 0 0 3px var(--solores-gold-focus);
}

/* Keyboard visible focus helper for accessibility */
.solores-number-input:focus-visible,
.solores-select:focus-visible,
.solores-lead-name:focus-visible,
.solores-lead-phone:focus-visible {
	outline: 2px solid var(--solores-gold-accent);
	outline-offset: 1px;
}

/* 5. Custom Range Sliders */
.solores-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	background: transparent;
	margin: 0;
	padding: 0;
}

.solores-slider:focus {
	outline: none;
}

/* Slider Track Styles - WebKit (Chrome, Safari, Edge) */
.solores-slider::-webkit-slider-runnable-track {
	width: 100%;
	height: 6px;
	cursor: pointer;
	background: var(--solores-input-border);
	border-radius: 3px;
	transition: background-color 0.2s ease;
}

/* Slider Track Styles - Mozilla Firefox */
.solores-slider::-moz-range-track {
	width: 100%;
	height: 6px;
	cursor: pointer;
	background: var(--solores-input-border);
	border-radius: 3px;
	transition: background-color 0.2s ease;
}

/* Slider Thumb Styles - WebKit */
.solores-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	height: 22px;
	width: 22px;
	border-radius: 50%;
	background: var(--solores-gold-accent);
	cursor: pointer;
	margin-top: -8px; /* Centers thumb vertically over WebKit track: (track_height/2) - (thumb_height/2) */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
	border: 2px solid var(--solores-primary-bg); /* Elegant border ring */
}

/* Slider Thumb Styles - Mozilla Firefox */
.solores-slider::-moz-range-thumb {
	height: 18px; /* Slightly adjusted for standard rendering offset */
	width: 18px;
	border-radius: 50%;
	background: var(--solores-gold-accent);
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
	border: 2px solid var(--solores-primary-bg);
}

/* Range Thumb Hover / Active / Focus States */
.solores-slider::-webkit-slider-thumb:hover {
	background-color: var(--solores-gold-hover);
	transform: scale(1.1);
}
.solores-slider::-moz-range-thumb:hover {
	background-color: var(--solores-gold-hover);
	transform: scale(1.1);
}

.solores-slider::-webkit-slider-thumb:active {
	background-color: var(--solores-gold-hover);
	transform: scale(1.15);
	box-shadow: 0 0 0 8px var(--solores-gold-focus);
}
.solores-slider::-moz-range-thumb:active {
	background-color: var(--solores-gold-hover);
	transform: scale(1.15);
	box-shadow: 0 0 0 8px var(--solores-gold-focus);
}

/* Visual feedback when the range track element itself has keyboard focus */
.solores-slider:focus::-webkit-slider-thumb {
	box-shadow: 0 0 0 6px var(--solores-gold-focus);
	border-color: var(--solores-gold-accent);
}
.solores-slider:focus::-moz-range-thumb {
	box-shadow: 0 0 0 6px var(--solores-gold-focus);
	border-color: var(--solores-gold-accent);
}

/* 6. Results Container */
.solores-results.solores-calc-results {
	display: block;
	width: 100%;
	margin: 28px 0;
	padding: 24px;
	background-color: var(--solores-results-bg);
	border-left: 4px solid var(--solores-gold-accent);
	border-radius: 0 6px 6px 0;
	color: var(--solores-dark-text);
	font-size: clamp(15px, 2.5vw, 17px); /* Responsive fluid font sizing */
	line-height: 1.6;
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.01);
}

/* Accent highlight formatting inside the results container */
.solores-results .accent-color,
.solores-results strong {
	color: var(--solores-gold-text);
	font-weight: 700;
}

/* 7. Lead Form Fields (Grid Layout) */
.solores-lead-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 10px;
	margin-bottom: 24px;
	width: 100%;
}

.solores-lead-fields .solores-calc-field {
	margin-bottom: 0; /* Let grid gap manage spacing */
}

/* Placeholder styles */
.solores-lead-name::placeholder,
.solores-lead-phone::placeholder {
	color: var(--solores-medium-text);
	opacity: 0.65;
}

/* 8. Action Submit Button */
.solores-submit-group {
	width: 100%;
}

.solores-btn-submit {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 50px; /* Premium touch target height */
	padding: 12px 28px;
	background-color: var(--solores-gold-accent);
	color: var(--solores-button-text);
	border: 1px solid var(--solores-gold-accent);
	border-radius: 4px;
	font-family: var(--solores-font-serif);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.solores-btn-submit:hover {
	background-color: var(--solores-gold-hover);
	border-color: var(--solores-gold-hover);
}

.solores-btn-submit:active {
	transform: scale(0.99);
}

.solores-btn-submit:focus {
	outline: none;
	box-shadow: 0 0 0 3px var(--solores-gold-focus), 0 4px 12px rgba(197, 160, 89, 0.2);
}

.solores-btn-submit:focus-visible {
	outline: 2px solid var(--solores-button-text);
	outline-offset: -4px;
}

/* 9. Responsive Breakpoints */

/* Tablet Screens (max-width: 768px) */
@media (max-width: 768px) {
	.solores-calculator-wrapper.solores-calculator-container {
		padding: 30px;
		margin: 1.5rem auto;
	}
	
	.solores-input-slider-group {
		gap: 16px;
	}
	
	.solores-input-slider-group .solores-numeric-wrap {
		width: 120px;
	}
}

/* Mobile Screens (max-width: 480px) */
@media (max-width: 480px) {
	.solores-calculator-wrapper.solores-calculator-container {
		padding: 20px 16px;
		margin: 1rem auto;
		border-radius: 6px;
	}
	
	/* Stack slider and numerical input vertically on small displays */
	.solores-input-slider-group {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	
	.solores-input-slider-group .solores-numeric-wrap {
		width: 100%;
	}
	
	.solores-lead-fields {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	
	.solores-results.solores-calc-results {
		padding: 16px;
		margin: 20px 0;
	}
	
	.solores-btn-submit {
		height: 48px;
		font-size: 15px;
	}
}

/* Accessibility: Support user system preferences for reduced motion */
@media (prefers-reduced-motion: reduce) {
	.solores-number-input,
	.solores-select,
	.solores-lead-name,
	.solores-lead-phone,
	.solores-slider::-webkit-slider-runnable-track,
	.solores-slider::-moz-range-track,
	.solores-slider::-webkit-slider-thumb,
	.solores-slider::-moz-range-thumb,
	.solores-btn-submit {
		transition: none !important;
		transform: none !important;
	}
}

/* 10. Payment Schedule Table Styling */
.solores-schedule-table-wrap {
	width: 100%;
	margin-top: 20px;
	border: 1px solid var(--solores-border-color);
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.solores-calculator-container.has-table-scroll .solores-schedule-table-wrap {
	max-height: 250px; /* Limits height and enables vertical scroll for long periods */
	overflow-y: auto;
}

.solores-schedule-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	text-align: left;
	background-color: #ffffff;
}

.solores-schedule-table th,
.solores-schedule-table td {
	padding: 12px 16px;
	border-bottom: 1px solid #f0e9dd;
}

.solores-schedule-table th {
	background-color: var(--solores-results-bg);
	font-family: var(--solores-font-serif);
	font-weight: 600;
	color: var(--solores-gold-text);
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.05em;
	position: sticky;
	top: 0;
	z-index: 1;
}

.solores-schedule-table tr:last-child td {
	border-bottom: none;
}

.solores-schedule-table tr.highlighted-row {
	background-color: #faf7f2;
	font-weight: 600;
}

.solores-schedule-table tr.highlighted-row td {
	color: var(--solores-gold-text);
}