/* Ensure consistent box model across all elements */
#construction-quotation-app * {
box-sizing: border-box;
}

/* Base styles for body and overall layout */
#construction-quotation-app {
font-family: 'Inter', sans-serif;
/* CHANGED: Background color to white */
background: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
position: relative; /* Added for floating buttons positioning */
}

/* NEW: Styles for the main headline */
#construction-quotation-app #main-headline {
text-align: center;
font-size: 24px;
font-weight: 700;
/* CHANGED: Headline color to match new theme */
color: #333333;
margin: 0 0 20px 0;
max-width: 450px;
width: 100%;
}

/* Styles for each screen/step of the application */
#construction-quotation-app .screen {
background-color: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 450px;
transition: opacity 0.5s ease-in-out;
display: none;
flex-direction: column;
text-align: left;
margin-top: 20px;
border: 1px solid #e0e0e0;
margin-bottom: 80px; /* Added space for floating buttons */
}

/* Left align titles and descriptions within screens */
#construction-quotation-app .screen h2,
#construction-quotation-app .screen p {
text-align: left;
width: 100%;
}

/* H2 font size is slightly larger for screen titles */
#construction-quotation-app .screen h2 {
font-size: 26px;
color: #333;
font-weight: 700;
margin-top: 0;
margin-bottom: 10px;
}

/* Space between description and input fields */
#construction-quotation-app .screen p:not(.company-stats) {
margin-bottom: 25px;
}

/* Styles for the light separator line */
#construction-quotation-app .separator-line {
width: 100%;
height: 1px;
background-color: #e0e0e0;
margin: 20px 0;
}

/* Styles for form groups and labels */
#construction-quotation-app .form-group {
margin-bottom: 25px;
width: 100%;
}

#construction-quotation-app label {
display: block;
margin-bottom: 8px;
color: #333;
font-weight: 500;
}

/* Styling for text inputs and select dropdowns */
#construction-quotation-app input[type="text"],
#construction-quotation-app input[type="tel"],
#construction-quotation-app input[type="number"],
#construction-quotation-app select {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 8px;
box-sizing: border-box;
font-size: 16px;
background-color: #f8f8f8;
color: 333;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Custom arrow for select dropdown */
/* CHANGED: Updated the select arrow color to match the new theme */
background-image: url('data:image/svg+xml;utf8,<svg fill="%23ff9a6a" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 20px;
transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

/* Remove up/down arrows from number input */
#construction-quotation-app input[type=number]::-webkit-inner-spin-button,
#construction-quotation-app input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}

#construction-quotation-app input[type=number] {
-moz-appearance: textfield;
}

/* Placeholder text color */
#construction-quotation-app input[type="text"]::placeholder,
#construction-quotation-app input[type="tel"]::placeholder,
#construction-quotation-app input[type="number"]::placeholder {
color: #999;
}

/* Focus and hover states for inputs and selects */
#construction-quotation-app select:focus,
#construction-quotation-app select:hover,
#construction-quotation-app input[type="text"]:focus,
#construction-quotation-app input[type="tel"]:focus,
#construction-quotation-app input[type="number"]:focus,
#construction-quotation-app input[type="text"]:hover,
#construction-quotation-app input[type="tel"]:hover,
#construction-quotation-app input[type="number"]:hover {
/* CHANGED: Updated focus/hover border color to match the new theme */
border-color: #ff9a6a;
background-color: #fff;
color: #ff9a6a;
outline: none;
/* CHANGED: Updated the select arrow color on focus/hover */
background-image: url('data:image/svg+xml;utf8,<svg fill="%23ff9a6a" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
}

/* Styling for groups of option buttons (e.g., Facing, Floors) */
#construction-quotation-app .option-group {
display: flex;
gap: 15px;
flex-wrap: wrap;
}

#construction-quotation-app .option-group button {
flex-grow: 1;
padding: 12px 20px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #f8f8f8;
cursor: pointer;
font-size: 16px;
color: #555;
transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

/* Active state for option buttons */
#construction-quotation-app .option-group button.active {
/* CHANGED: Updated active button colors to match the new theme */
background-color: #ff9a6a;
border-color: #ff9a6a;
color: #fff;
font-weight: 600;
}

/* Hover state for option buttons */
#construction-quotation-app .option-group button:hover {
background-color: #e9e9e9;
}

/* Hover state for active option buttons */
#construction-quotation-app .option-group button.active:hover {
/* CHANGED: Updated active button hover color to match the new theme */
background-color: #ff8a50;
}

/* Hide actual radio inputs, use labels for styling */
#construction-quotation-app .option-group input[type="radio"] {
display: none;
}

/* Styling for labels acting as radio buttons */
#construction-quotation-app .option-group input[type="radio"]+label {
flex-grow: 1;
padding: 12px 20px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #f8f8f8;
cursor: pointer;
font-size: 16px;
color: #555;
text-align: center;
transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

/* Checked state for radio button labels */
#construction-quotation-app .option-group input[type="radio"]:checked+label {
/* CHANGED: Updated checked radio button colors to match the new theme */
background-color: #ff9a6a;
border-color: #ff9a6a;
color: #fff;
font-weight: 600;
}

/* Hover state for radio button labels */
#construction-quotation-app .option-group input[type="radio"]:hover+label {
background-color: #e9e9e9;
}

/* Hover state for checked radio button labels */
#construction-quotation-app .option-group input[type="radio"]:checked:hover+label {
/* CHANGED: Updated checked radio button hover color to match the new theme */
background-color: #ff8a50;
}

/* Primary button style (for Next/Submit) */
#construction-quotation-app .btn-primary {
width: 100%;
padding: 15px;
/* CHANGED: Updated primary button color to match the new theme */
background-color: #ff9a6a;
color: #fff;
border: none;
border-radius: 8px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 20px;
}

/* Hover state for primary buttons */
#construction-quotation-app .btn-primary:hover {
/* CHANGED: Updated primary button hover color to match the new theme */
background-color: #ff8a50;
}

/* Disabled state for primary buttons */
#construction-quotation-app .btn-primary:disabled {
background-color: #a0a0a0;
cursor: not-allowed;
}

/* Secondary button style (for Previous) */
#construction-quotation-app .btn-secondary {
width: 100%;
padding: 15px;
background-color: #ccc;
color: #333;
border: none;
border-radius: 8px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 10px;
}

/* Hover state for secondary buttons */
#construction-quotation-app .btn-secondary:hover {
background-color: #b0b0b0;
}

/* Button group for navigation (Next/Previous) */
#construction-quotation-app .navigation-buttons {
display: flex;
gap: 15px;
width: 100%;
margin-top: 20px;
}

#construction-quotation-app .navigation-buttons .btn-primary,
#construction-quotation-app .navigation-buttons .btn-secondary {
flex-grow: 1;
margin-top: 0;
}

/* Company Banner Styles */
#construction-quotation-app .company-banner {
width: 100%;
margin-bottom: 15px;
border-radius: 8px;
overflow: hidden;
}

#construction-quotation-app .banner-image {
width: 100%;
height: 100px; /* Consistent height for all devices */
object-fit: cover;
border-radius: 8px;
}

/* Styles for Company Selection Screen */
#construction-quotation-app .company-card {
display: flex;
flex-direction: column;
align-items: flex-start;
border: 1px solid #eee;
border-radius: 10px;
padding: 20px;
margin-bottom: 25px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
background-color: #fff;
transition: transform 0.2s ease-in-out;
}

/* Hover effect for company cards */
#construction-quotation-app .company-card:hover {
transform: translateY(-5px);
}

#construction-quotation-app .company-info {
width: 100%;
margin-bottom: 15px;
}

#construction-quotation-app .company-name {
font-size: 24px;
font-weight: 700;
color: #333;
margin-bottom: 8px;
text-align: center;
}

#construction-quotation-app .company-stats {
font-size: 14px;
color: #555;
text-align: center;
}

#construction-quotation-app .company-stats span {
margin-right: 10px;
}

#construction-quotation-app .package-grid {
display: grid;
grid-template-columns: 1fr 1fr; /* 2 columns for both desktop and mobile */
gap: 10px;
width: 100%;
}

#construction-quotation-app .package-button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 12px 15px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #f8f8f8;
cursor: pointer;
font-size: 16px;
color: #555;
text-align: center;
transition: background-color 0.3s, border-color 0.3s, color 0.3s;
font-weight: 500;
}

#construction-quotation-app .package-button span.package-name {
font-weight: 600;
margin-bottom: 5px;
color: #333;
}

#construction-quotation-app .package-button span.package-price {
font-size: 14px;
color: #777;
}

#construction-quotation-app .package-button:hover {
background-color: #e9e9e9;
/* CHANGED: Updated package button hover color to match the new theme */
border-color: #ff9a6a;
color: #ff9a6a;
}

#construction-quotation-app .package-button:hover span.package-name {
/* CHANGED: Updated package button hover text color to match the new theme */
color: #ff9a6a;
}

#construction-quotation-app .package-button:hover span.package-price {
/* CHANGED: Updated package button hover text color to match the new theme */
color: #ff9a6a;
}

/* Selected state for package buttons */
#construction-quotation-app .package-button.selected {
/* CHANGED: Updated selected package button colors to match the new theme */
background-color: #ff9a6a;
border-color: #ff9a6a;
color: #fff;
font-weight: 600;
}

#construction-quotation-app .package-button.selected span.package-name,
#construction-quotation-app .package-button.selected span.package-price {
color: #fff;
}

/* Hover state for selected package buttons */
#construction-quotation-app .package-button.selected:hover {
/* CHANGED: Updated selected package button hover color to match the new theme */
background-color: #ff8a50;
border-color: #ff8a50;
}

/* Styles for Results Screen */
#construction-quotation-app #results-screen h2 {
/* CHANGED: Updated results screen h2 color to match the new theme */
color: #ff9a6a;
margin-bottom: 20px;
}

#construction-quotation-app #results-content {
width: 100%;
text-align: left;
padding: 15px;
border: 1px solid #eee;
border-radius: 8px;
background-color: #f8f8f8;
min-height: 150px;
color: #333;
line-height: 1.6;
}

/* Styling for the overall quotation section on the results screen */
#construction-quotation-app .quotation-section {
margin-top: 30px;
width: 100%;
}

#construction-quotation-app .quotation-section h3 {
/* CHANGED: Updated quotation section h3 color to match the new theme */
color: #ff9a6a;
font-size: 20px;
margin-bottom: 15px;
border-bottom: 1px solid #e0e0e0;
padding-bottom: 10px;
}

/* Styling for individual selected quotation items */
#construction-quotation-app .selected-quotation-item {
/* CHANGED: Updated quotation item border and background colors to match the new theme */
border: 1px solid #ff9a6a;
border-radius: 10px;
padding: 20px;
margin-bottom: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
background-color: #fff5f0; /* A light, theme-appropriate background */
text-align: left;
}

#construction-quotation-app .selected-quotation-item h4 {
font-size: 20px;
/* CHANGED: Updated quotation item h4 color to match the new theme */
color: #ff9a6a;
margin-top: 0;
margin-bottom: 8px;
font-weight: 700;
}

#construction-quotation-app .selected-quotation-item p {
font-size: 16px;
color: #333;
margin-bottom: 5px;
}

#construction-quotation-app .selected-quotation-item .estimated-cost {
font-size: 24px;
font-weight: 800;
/* CHANGED: Updated quotation item estimated cost color to match the new theme */
color: #ff9a6a;
margin-top: 10px;
}

/* -- Custom Message Box Styles -- */
#construction-quotation-app .message-box-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

#construction-quotation-app .message-box-overlay.show {
opacity: 1;
visibility: visible;
}

#construction-quotation-app .message-box {
background-color: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
width: 350px;
max-width: 90%;
text-align: center;
transform: translateY(-20px);
transition: transform 0.3s ease-in-out;
}

#construction-quotation-app .message-box-overlay.show .message-box {
transform: translateY(0);
}

#construction-quotation-app .message-box h3 {
/* CHANGED: Updated message box h3 color to match the new theme */
color: #ff9a6a;
margin-top: 0;
margin-bottom: 15px;
font-size: 22px;
}

#construction-quotation-app .message-box p {
color: #555;
margin-bottom: 25px;
line-height: 1.5;
}

#construction-quotation-app .message-box button {
padding: 12px 25px;
/* CHANGED: Updated message box button color to match the new theme */
background-color: #ff9a6a;
color: #fff;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s;
}

#construction-quotation-app .message-box button:hover {
/* CHANGED: Updated message box button hover color to match the new theme */
background-color: #ff8a50;
}

/* -- Pagination Tracker Styles -- */
#construction-quotation-app #pagination-tracker {
display: flex;
justify-content: space-around;
width: 100%;
max-width: 450px;
margin: 0 auto 20px auto;
background-color: #fff;
padding: 15px 10px;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
border: 1px solid #e0e0e0;
}

#construction-quotation-app .step-indicator {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
text-align: center;
position: relative;
padding: 0 5px;
}

#construction-quotation-app .step-indicator .step-number {
width: 35px;
height: 35px;
border-radius: 50%;
background-color: #e0e0e0;
color: #555;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
font-size: 18px;
margin-bottom: 8px;
transition: background-color 0.3s, color 0.3s;
}

#construction-quotation-app .step-indicator .step-name {
font-size: 13px;
color: #777;
font-weight: 500;
transition: color 0.3s;
}

#construction-quotation-app .step-indicator.active .step-number {
/* CHANGED: Updated active step number colors to match the new theme */
background-color: #ff9a6a;
color: #fff;
}

#construction-quotation-app .step-indicator.active .step-name {
/* CHANGED: Updated active step name color to match the new theme */
color: #ff9a6a;
font-weight: 600;
}

/* Connecting lines between steps */
#construction-quotation-app .step-indicator:not(:last-child)::after {
content: '';
position: absolute;
top: 17px;
right: -25px;
width: 50px;
height: 2px;
background-color: #e0e0e0;
z-index: -1;
}

#construction-quotation-app .step-indicator.active:not(:last-child)::after {
/* CHANGED: Updated active line color to match the new theme */
background-color: #ff9a6a;
}

/* -- Loading Screen Specific Styles -- */
#construction-quotation-app #loading-screen {
text-align: center;
justify-content: center;
align-items: center;
min-height: 200px;
}

#construction-quotation-app #loading-screen h2 {
margin-bottom: 30px;
/* CHANGED: Updated loading screen h2 color to match the new theme */
color: #ff9a6a;
}

/* NEW: Styles for the multi-row loading message container */
#construction-quotation-app #loading-message-container {
font-size: 1.1em;
color: #555;
font-weight: 500;
min-height: 3em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}

/* NEW: Styles for each individual loading message */
#construction-quotation-app .loading-message-item {
margin-bottom: 10px;
opacity: 0;
transform: translateY(10px);
animation: fadeInAndSlideUp 1s forwards;
}

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

/* Simple loading spinner animation */
#construction-quotation-app .spinner {
border: 4px solid rgba(0, 0, 0, 0.1);
/* CHANGED: Updated spinner color to match the new theme */
border-left-color: #ff9a6a;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 20px auto;
}

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

/* -- Floating Navigation Buttons -- */
#construction-quotation-app #floating-navigation {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 15px;
width: 100%;
max-width: 450px;
padding: 0 20px;
z-index: 999;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 12px;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
padding: 15px;
border: 1px solid #e0e0e0;
}

#construction-quotation-app #floating-prev-btn,
#construction-quotation-app #floating-next-btn {
flex: 1;
padding: 15px;
border: none;
border-radius: 8px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}

#construction-quotation-app #floating-prev-btn {
background-color: #ccc;
color: #333;
}

#construction-quotation-app #floating-prev-btn:hover {
background-color: #b0b0b0;
}

#construction-quotation-app #floating-next-btn {
background-color: #ff9a6a;
color: #fff;
}

#construction-quotation-app #floating-next-btn:hover {
background-color: #ff8a50;
}

#construction-quotation-app #floating-next-btn:disabled {
background-color: #a0a0a0;
cursor: not-allowed;
}

/* Hide regular navigation buttons on screens */
#construction-quotation-app .navigation-buttons {
display: none;
}

/* Responsive adjustments for all screens */
@media (max-width: 600px) {
#construction-quotation-app {
padding: 10px;
}

#construction-quotation-app .screen {
padding: 20px;
margin-top: 15px;
max-width: 100%; /* Full width on mobile */
width: 100%;
}

#construction-quotation-app .company-banner {
margin-bottom: 10px;
}

#construction-quotation-app .banner-image {
height: 100px; /* Same height for mobile */
}

#construction-quotation-app .company-name {
font-size: 20px;
}

#construction-quotation-app .company-stats {
font-size: 13px;
}

/* Keep 2 columns for packages on mobile */
#construction-quotation-app .package-grid {
grid-template-columns: 1fr 1fr; /* 2 columns on mobile too */
gap: 8px; /* Slightly smaller gap on mobile */
}

#construction-quotation-app .package-button {
padding: 10px 8px; /* Slightly smaller padding on mobile */
font-size: 14px; /* Slightly smaller font on mobile */
}

#construction-quotation-app .package-button span.package-name {
font-size: 14px;
}

#construction-quotation-app .package-button span.package-price {
font-size: 12px;
}

#construction-quotation-app .navigation-buttons {
flex-direction: column;
gap: 10px;
}

#construction-quotation-app #pagination-tracker {
flex-wrap: wrap;
padding: 10px;
max-width: 100%;
width: 100%; /* Full width on mobile */
}

#construction-quotation-app .step-indicator {
margin-bottom: 10px;
padding: 0 2px;
}

#construction-quotation-app .step-indicator:not(:last-child)::after {
display: none;
}

#construction-quotation-app .step-indicator .step-name {
font-size: 12px;
}

#construction-quotation-app .selected-quotation-item {
padding: 15px;
}

#construction-quotation-app .selected-quotation-item h4 {
font-size: 18px;
}

#construction-quotation-app .selected-quotation-item p {
font-size: 14px;
}

#construction-quotation-app .selected-quotation-item .estimated-cost {
font-size: 20px;
}

/* Floating navigation mobile adjustments */
#construction-quotation-app #floating-navigation {
max-width: 100%;
width: calc(100% - 40px);
bottom: 10px;
padding: 12px;
}

#construction-quotation-app #floating-prev-btn,
#construction-quotation-app #floating-next-btn {
padding: 12px;
font-size: 16px;
}
}

/* Additional media query for very small screens to ensure 2 columns work */
@media (max-width: 400px) {
#construction-quotation-app .package-grid {
grid-template-columns: 1fr 1fr; /* Still 2 columns */
gap: 6px; /* Even smaller gap on very small screens */
}

#construction-quotation-app .package-button {
padding: 8px 6px; /* Even smaller padding */
font-size: 13px; /* Even smaller font */
}

#construction-quotation-app .package-button span.package-name {
font-size: 13px;
}

#construction-quotation-app .package-button span.package-price {
font-size: 11px;
}

#construction-quotation-app #floating-navigation {
width: calc(100% - 20px);
padding: 10px;
}

#construction-quotation-app #floating-prev-btn,
#construction-quotation-app #floating-next-btn {
padding: 10px;
font-size: 14px;
}
}