/* General Dark Theme */
body {
	font-family: sans-serif;
	margin: 0;
	color: #f0f0f0;
	/* Light gray text */
	background-color: #222;
	/* Dark background */
	max-width: 100%;
	overflow-x: hidden;
}

/* --- NEW: Fullscreen Header Styles --- */
.fullscreen-header {
  height: 90vh; /* Makes the header take the full viewport height */
  width: 100%;   /* Makes the header take the full viewport width */
  background-image: url('imgs/bg.jpg'); /* Path to your background image */
  background-size: cover; /* Scales the image to cover the entire area */
  background-position: center center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-attachment: fixed; /* Optional: Creates a parallax scrolling effect. Remove if not desired. */

  display: flex; /* Using flexbox to center the logo */
  flex-direction: column; /* Stack items vertically (if you add more than just logo) */
  justify-content: center; /* Centers content vertically */
  align-items: center;   /* Centers content horizontally */
  text-align: center; /* Fallback for text alignment if not using flex for all children */
  position: relative; /* For potential absolute positioning of child elements if needed */
  /* Optional: Add a subtle overlay to make text/logo more readable if bg is busy */
  /* box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.3); */
}

.header-logo {
  max-width: 80%; /* Prevent logo from being too wide on large screens */
  max-height: 40vh; /* Prevent logo from being too tall */
  height: auto; /* Maintain aspect ratio */
  /* Optional: Add some styling to the logo */
  /* filter: drop-shadow(2px 4px 6px black); */
  margin-bottom: 20px;
  margin-top:auto;
}
/* --- Social Media Links Bar Styles (MODIFIED for Image Icons) --- */
.social-links-bar {
  padding: 15px 0;
  text-align: center;
  margin-bottom: 50px; 
}

.social-icons { /* The <ul> element */
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex; /* Keeps items in a single row and allows gap */
  align-items: center;  /* Vertically align items in the flex line */
  gap: 25px;          /* Increased gap slightly for image icons */
}

.social-icons li {
  margin-bottom: 0;
  line-height: 0; /* Helps remove extra space around images if they are inline-block inside li */
}

.social-icons a {
  display: inline-block; /* Make the anchor a block for consistent behavior */
  transition: transform 0.2s ease, opacity 0.2s ease; /* Added opacity transition */
  line-height: 0; /* Helps remove extra space if images have space below them */
}

.social-icons a:hover {
  transform: scale(1.1); /* Slight zoom effect on hover */
  opacity: 0.8;         /* Slight fade on hover for visual feedback */
}

/* NEW/MODIFIED: Styling for the <img> icons */
.social-icons img {
  height: 45px;   /* Adjust to your desired icon height */
  width: auto;    /* Maintain aspect ratio */
  display: block; /* Removes extra space below inline images */
  vertical-align: middle; /* Good for general alignment, though flex on parent helps more */
}

/* Optional: Styling for a Call To Action button if you add one */
button, 
.fullscreen-header .cta-button .venmo-button .cleaning-button {
  display: inline-block;
  padding: 12px 25px;
  color: white;
  text-decoration: none;
  font-size: 1.1em;
  font-weight: bold;
  border-radius: 6px;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

button, 
.fullscreen-header .cta-button{
  background-color: #28a745 ; /* Or your chosen button blue */
}

.venmo-button{
  background-color: #008CFF ; /* Or your chosen button blue */
}

.venmo-button:hover{
  background-color: #0046ad; /* Darker blue */
}

.cleaning-button{
  background-color: #d13f3f ; /* Or your chosen button blue */
}

.cleaning-button:hover{
  background-color: #a12d2d; /* Darker blue */
}

.cta-button {
	margin-top: 20px;
}

button:hover,
.fullscreen-header .cta-button:hover {
  background-color: #1e7e34; /* Darker blue */
  transform: translateY(-2px);
}

.center {
	text-align: center;
}


.form-warning {
  padding: 15px 20px;
  margin-top: 10px;
  margin-bottom: 25px;
}

.warning-text {
  margin-right: 8px;
  color: #FFC6C4; /* Slightly lighter red for emphasis */
}
.promotion-text {
  margin-right: 8px;
  color: #7dbc81; 
}

.form-warning i.fas {
  margin-right: 12px;
  font-size: 1.4em;
  color: #D9534F; /* Red icon color */
}

/* Navigation Styles */
nav, .top-links {
	/* Darker navigation */
	color: white;
	padding: 15px 0;
	text-align: center;
	/* Subtle shadow */
}

nav ul, .top-links ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	/* Left-align the nav items */
	align-items: center;
	/* Vertically center the items */
	max-width: 960px;
	/* Limit the nav width for larger screens */
	margin: 0 auto;
	/* Center the nav on the page */
}

nav li, .top-links li {
	margin: 0 15px;
	/* Adjust spacing */
}

nav a, .top-links a {
	color: #eee;
	/* Lighter text color */
	text-decoration: none;
	padding: 10px 20px;
	border-radius: 8px;
	display: inline-block;
	transition: background-color 0.3s ease;
}

#Resole {
	display: block;
	padding-left: 10px;
	padding-right: 10px;
}


#Resole h1 {
	border-bottom: none;
	margin-left: 20px;
	margin-right: 20px;
}

/* Page Content Styles */
.page {
	padding: 30px;
	display: none;
	background-color: #333;
	/* Dark page background */
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	/* Subtle shadow */
	max-width: 900px;
	/* Limit page content width */
	margin: 20px auto;
	/* Center the page horizontally */
}

.page h1 {
	margin-top: 0;
	color: #fff;
	/* White headings */
	border-bottom: 2px solid #555;
	/* Underline headings */
	padding-bottom: 10px;
}

.page h2 {
	color: #fff;
	/* White headings */
	padding-bottom: 10px;
	margin-top: 20px;
	/* Add margin above category titles */
}

/* Price List Styles */
#PriceList {
	padding-left: 10px;
	padding-right: 10px;
}


#PriceList h1 {
	border-bottom: none;
	margin-left: 20px;
	margin-right: 20px;
}

#PriceList ul {
	list-style: none;
	/* Remove bullets */
	padding: 0;
	margin: 0;
}

#PriceList .with-info {
	display: grid;
	grid-template-columns: .9fr 1fr 1.3fr;
	/* item-name, info, price */
	gap: 5px;
	padding: 8px 0;
	border-bottom: 1px solid #999;
}

#PriceList .no-info {
	display: grid;
	grid-template-columns: 1.8fr .1fr 1.3fr;
	/* item-name, info, price */
	gap: 5px;
	padding: 8px 0;
	border-bottom: 1px solid #999;
}

#PriceList li:last-child {
	border-bottom: none;
	/* Remove border from the last item */
}

#PriceList .item-name {
	color: #ddd;
	/* Lighter text color for items */
	grid-column: 1;
	/* Start in the first column */
	text-align: left;
}

#PriceList .info {
	grid-column: 2;
	/* Span across the next column */
	font-style: italic;
	color: #aaa;
	/* Darker gray for info */
	text-align: center;
}

#PriceList .price {
	color: #ccc;
	/* Subtle price color */
	font-weight: bold;
	text-align: right;
	/* Right-align the price */
	grid-column: 3;
	/* Start in the first column */
}

#PriceList .description {
	grid-column: 1 / span 3;
	/* Span across all three columns */
	font-size: 0.9em;
	color: #bbb;
	margin-left: 10px;
	text-align: justify;
}

#PriceList .blurb {
	font-size: 1em;
	color: #eee;
	text-align: justify;
	border-bottom: 1px solid #eee;
	padding: 16px 0;
}

.category {
	padding: 30px;
	display: block;
	background-color: #4f4f4f;
	/* Dark page background */
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	/* Subtle shadow */
	max-width: 900px;
	/* Limit page content width */
	margin: 20px auto;
	/* Center the page horizontally */
}

.form-checkbox,
.form-radio,
.form-field {
	display: flex;
	flex-direction: row;
	width: 100%;
	flex-wrap: wrap;
  align-items: center;    /* Vertically aligns the label and the input/element */
}

.form-checkbox,
.form-radio-buttton,
.form-field label{
  flex-shrink: 0;         /* Prevents the label from shrinking if the input/element is wide */
  margin-right: 0;     /* Space between the label and the input/element */
  text-align: left;      /* Optional: Aligns label text to the right for a neat column look */
  color: #ddd;            /* Your standard label color */
  margin-bottom: 10px; (Ensures no extra bottom margin from general label styles) */
}

.form-field > input[type="text"],
.form-radio > input[type="text"],
.form-field > textarea,
.form-radio > i,
.form-field > select, /* Example for select dropdowns */
.form-field > .input-fills-space { /* A generic class for any element that should fill space */
  flex-grow: 1;           /* Allows this element to take up all remaining horizontal space */
  width: auto;            /* Override any fixed width to let flexbox control it */
  margin-left: 15px;
  /* margin-bottom: 0; (If this element had its own margin-bottom from general styles) */
}

/* Styles for a full-width form field (label above input/textarea) */
.form-field-fullwidth {
  margin-bottom: 15px; /* Space below this field */
}

.form-field-fullwidth label {
  display: block; /* Label on its own line */
  margin-bottom: 8px; /* Space between label and textarea */
  font-weight: bold; /* Optional: make label bold */
  color: #ddd;
}

.form-field-fullwidth textarea {
  width: 100%; /* Textarea takes full width */
  min-height: 120px; /* Minimum height for the textarea (approx 6 rows with padding) */
  resize: vertical; /* Allow user to resize vertically, but not horizontally */
  margin-bottom: 0; /* Spacing handled by .form-field-fullwidth */
}

/* --- CUSTOM RADIO BUTTON STYLES --- */
/* 1. Visually hide the actual radio input */
input[type="checkbox"],
input[type="radio"] {
	opacity: 0;
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	margin: -1px;
	padding: 0;
	border: 0;
}

/* 2. Style the labels to act as the custom radio buttons */
/* This applies to ALL labels immediately following a radio input */

input[type="checkbox"]+label,
input[type="radio"]+label {
	display: inline-block;
	vertical-align: middle;
	padding: 10px 15px;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	margin-bottom: 5px;
}
/* DEFAULT BUTTON COLORS */
input[type="checkbox"]+label,
input[type="radio"]+label{
	color: #f0f0f0;
	background-color: #555;
	border: 2px solid #999;
}
/* Hover */
input[type="checkbox"]:hover+label,
input[type="radio"]:hover+label {
	background-color: #6a9488;
	border-color: #777;
}
/* Checked*/
input[type="checkbox"]:checked+label,
input[type="radio"]:checked+label {
	background-color: #0fab7d;
	border-color: #1a9f77;
	color: #ffffff;
}
/* Focus*/
input[type="checkbox"]:focus-visible+label,
input[type="radio"]:focus-visible+label {
	outline: 2px solid #69a5e9;
	outline-offset: 2px;
	*/
}

/* BLACK BUTTON COLORS */
input[type="checkbox"]+label.black,
input[type="radio"]+label.black{
	border-color: #222;
}/* Hover */
input[type="checkbox"]:hover+label.black,
input[type="radio"]:hover+label.black {
	color: #999;
	background-color: #222;
	border-color: #777;
}
/* Checked*/
input[type="checkbox"]:checked+label.black,
input[type="radio"]:checked+label.black {
	background-color: #222;
	border-color: #222;
	color: #ffffff;
}

/* LIME BUTTON COLORS */
input[type="checkbox"]+label.lime,
input[type="radio"]+label.lime{
	border-color: #c4f250;
}/* Hover */
input[type="checkbox"]:hover+label.lime,
input[type="radio"]:hover+label.lime {
	color: #777;
	background-color: #c4f250;
	border-color: #777;
}
/* Checked*/
input[type="checkbox"]:checked+label.lime,
input[type="radio"]:checked+label.lime {
	background-color: #c4f250;
	border-color: #c4f250;
	color: #555;
}

/* BLUE BUTTON COLORS 005ec9 */
input[type="checkbox"]+label.blue,
input[type="radio"]+label.blue{
	border-color: #005ec9;
}/* Hover */
input[type="checkbox"]:hover+label.blue,
input[type="radio"]:hover+label.blue {
	color: #999;
	background-color: #005ec9;
	border-color: #777;
}
/* Checked*/
input[type="checkbox"]:checked+label.blue,
input[type="radio"]:checked+label.blue {
	background-color: #005ec9;
	border-color: #005ec9;
	color: #ffffff;
}

/* ORANGE BUTTON COLORS #ff911c */
input[type="checkbox"]+label.orange,
input[type="radio"]+label.orange{
	border-color: #ff911c;
}
/* Hover */
input[type="checkbox"]:hover+label.orange,
input[type="radio"]:hover+label.orange {
	color: #777;
	background-color: #ff911c;
	border-color: #777;
}
/* Checked*/
input[type="checkbox"]:checked+label.orange,
input[type="radio"]:checked+label.orange {
	background-color: #ff911c;
	border-color: #ff911c;
	color: #555;
}

/* RED BUTTON COLORS  ff5330*/
input[type="checkbox"]+label.red,
input[type="radio"]+label.red{
	border-color: #ff5330;
}/* Hover */
input[type="checkbox"]:hover+label.red,
input[type="radio"]:hover+label.red {
	color: #777;
	background-color: #ff5330;
	border-color: #777;
}
/* Checked*/
input[type="checkbox"]:checked+label.red,
input[type="radio"]:checked+label.red {
	background-color: #ff5330;
	border-color: #ff5330;
	color: #555;
}

/* CRIMSON BUTTON COLORS 913030 */
input[type="checkbox"]+label.crimson,
input[type="radio"]+label.crimson{
	border-color: #913030;
}/* Hover */
input[type="checkbox"]:hover+label.crimson,
input[type="radio"]:hover+label.crimson {
	color: #999;
	background-color: #913030;
	border-color: #777;
}
/* Checked*/
input[type="checkbox"]:checked+label.crimson,
input[type="radio"]:checked+label.crimson {
	background-color: #913030;
	border-color: #913030;
	color: #ffffff;
}



/*Enabled text input */
input[type="text"],
textarea {
	display: inline-block;
	max-width: 100%;
	padding: 10px;
	margin-bottom: 15px;
	border-radius: 6px;
	box-sizing: border-box;
	background-color: #666;
	border: 1px solid #777;
	color: #f0f0f0;
	opacity: 1;

	/* Smooth transition for visual changes */
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

/*Disabled text input*/
input[type="text"]:disabled,
textarea:disabled {
	background-color: #3a3a3a;
	/* Darker, more muted background */
	border-color: #555;
	/* Muted border */
	color: #888;
	/* Greyed out text color */
	opacity: 0.6;
	/* Slightly transparent to appear faded */
	cursor: not-allowed;
	/* Visual cue that it's not interactive */
}

input::placeholder,
textarea::placeholder {
	color: #eee;
}

input[type="radio"]:disabled, input[type="checkbox"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

label[for*="post_"]:has(+ input:disabled), 
input:disabled + label {
	opacity: 0.5;
	cursor: not-allowed;
}



#information label {
	display: inline-block;
}

#information input[type="text"] {
	display: inline-block;
	width: 200px;
	max-width: 100%;
}

ul {
	list-style-type: none;
	padding: 0;
}

li {
	margin-bottom: 8px;
}


.picker-options-list li {
	display: inline-block;
}

.picker-options-list {
	display: inline-block;
	margin: 0;
}

/* NEW/MODIFIED: Styling for the "Rubber:" label acting as a header */
#Resole form div.content+label {
	/* Targets the label immediately after the picker's content */
	display: block;
	margin-top: 30px;
	/* ADDED top margin to push it further down from the picker */
	margin-bottom: 10px;
	/* Space between this header and the rubber list */
	font-size: 1.15em;
	/* Make it a bit larger */
	font-weight: bold;
	color: #fff;
	/* Brighter color */
	/* Optional: border-bottom: 1px solid #666; */
	/* Optional: padding-bottom: 8px; */
}

/* Media query for mobile screens */
@media (max-width: 768px) {
	body {
		margin: 0;
		/* Reset body margin */
	}

	nav {
		padding: 10px 0;
		/* Adjust nav padding */
	}

	nav ul {
		flex-direction: column;
		/* Stack nav items */
		align-items: stretch;
		/* Fill width */
	}

	nav li {
		margin: 5px 0;
		/* Add vertical spacing */
	}

	nav a {
		text-align: center;
		/* Center link text */
		padding: 8px;
		/* Adjust padding */
	}

	.page {
		margin: 10px;
		/* Adjust page margin */
		padding: 20px;
		/* Adjust page padding */
	}
}

        /* Price Calculator Styles */
        .price-calculator {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #2c3e50;
            color: white;
            padding: 15px 20px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            z-index: 1000;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .price-details {
            font-size: 14px;
        }
        
        .price-total {
            margin: auto;
            font-size: 18px;
            font-weight: bold;
        }
        
        .price-item {
            color: #ecf0f1;
        }