/* --- Page Banner --- */
.page-banner {
  padding: 3.75rem 0; /* 60px / 16 = 3.75 */ /* Adjust padding */
  background-color: #1a5276; /* Fallback color */
  background-size: cover;
  background-position: bottom;
  color: #fff;
  text-align: center;
  position: relative;
}

.parts-banner {
  /* Replace with your parts banner image */
  background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('images/background.jpg');
  /* Or use: url('images/placeholder-parts-banner.jpg'); */
  min-height: 18.75rem; /* 300px / 16 = 18.75 */ /* Example height */
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-banner h1 {
  font-size: 2.25rem; /* 36px / 16 = 2.25 */ /* Adjust */
  margin-bottom: 0.625rem; /* 10px / 16 = 0.625 */
  text-shadow: 0.0625rem 0.0625rem 0.1875rem rgba(254, 254, 254, 0.4); /* 1px/16=0.0625, 1px/16=0.0625, 3px/16=0.1875 */ /* Darker shadow for light background */
}

.page-banner p {
  font-size: 1.125rem; /* 18px / 16 = 1.125 */ /* Adjust */
  font-weight: 400;
  max-width: 37.5rem; /* 600px / 16 = 37.5 */
  margin: 0 auto;
  text-shadow: 0.0625rem 0.0625rem 0.1875rem rgba(255, 255, 255, 0.4); /* 1px/16=0.0625, 1px/16=0.0625, 3px/16=0.1875 */
}

/* --- Main Content --- */
.parts-container {
  padding-top: 2.5rem; /* 40px / 16 = 2.5 */
  padding-bottom: 3.75rem; /* 60px / 16 = 3.75 */
}

.parts-section {
  margin-bottom: 3.125rem; /* 50px / 16 = 3.125 */
  padding-bottom: 1.875rem; /* 30px / 16 = 1.875 */
  border-bottom: 0.0625rem solid #eee; /* 1px / 16 = 0.0625 */ /* Optional separator */
}
.parts-section:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.parts-section h2 {
  font-size: 1.5rem; /* 24px / 16 = 1.5 */
  color: #333; /* Adjust color */
  margin-bottom: 1.25rem; /* 20px / 16 = 1.25 */
}

.parts-section p,
.parts-section ul {
  font-size: 1rem; /* 16px / 16 = 1 */
  color: #555; /* Adjust text color */
  line-height: 1.7;
}
.parts-section p {
  margin-bottom: 0.9375rem; /* 15px / 16 = 0.9375 */ /* Spacing between paragraphs */
}
.parts-section ul {
  list-style: disc;
  margin-left: 1.25rem; /* 20px / 16 = 1.25 */
  margin-top: 0.9375rem; /* 15px / 16 = 0.9375 */
}
.parts-section ul li {
  margin-bottom: 0.625rem; /* 10px / 16 = 0.625 */
}
.parts-section ul li strong {
  /* Style bolded text in lists */
  color: #415669;
  font-weight: 600;
}

.text-center {
  text-align: center;
}
.text-center p {
  max-width: 50rem; /* 800px / 16 = 50 */
  margin-left: auto;
  margin-right: auto;
}

/* --- Two Column Layout --- */
.two-column-section {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Default vertical alignment */
  gap: 2.5rem; /* 40px / 16 = 2.5 */ /* Space between columns */
  border-bottom: none; /* Usually remove border */
}

.text-column {
  width: 55%; /* Adjust width */
}

.image-column {
  width: 40%; /* Adjust width */
  flex-shrink: 0;
}

.image-column img {
  width: 100%;
  height: auto; /* Let height adjust automatically by default */
  /* height: 21.875rem; */ /* 350px / 16 = 21.875 */ /* Uncomment and adjust if fixed height is needed */
  /* object-fit: cover; */ /* Use with fixed height */
  display: block;
  border-radius: 0.5rem; /* 8px / 16 = 0.5 */
  box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.1); /* 4px/16=0.25, 15px/16=0.9375 */
}

/* Class to reverse column order visually */
.two-column-section.reverse-columns {
  flex-direction: row-reverse;
}

/* Specific layout for Intro Section (Image Left) */
.intro-section.two-column-section {
  align-items: center;
  border-bottom: 0.0625rem solid #eee; /* 1px / 16 = 0.0625 */
  padding-bottom: 2.5rem; /* 40px / 16 = 2.5 */
}
.intro-section .image-column {
  width: 45%;
}
.intro-section .text-column {
  width: 50%;
}
.intro-section h2 {
  margin-top: 0;
}

/* --- Centered Text Section (Replaces reverse-columns section) --- */
.text-focused-section {
  text-align: center; /* Center the inline content */
  max-width: 50rem; /* 800px / 16 = 50 */ /* Limit the width of the content block */
  margin-left: auto; /* Center the block */
  margin-right: auto; /* Center the block */
  /* Inherit margin/padding/border from .parts-section */
}

/* --- Optional Category Grid --- */
.parts-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr)); /* 180px / 16 = 11.25 */ /* Responsive grid */
  gap: 1.25rem; /* 20px / 16 = 1.25 */
  margin-top: 1.5625rem; /* 25px / 16 = 1.5625 */
}

.part-category-card {
  background-color: #f8f8f8;
  padding: 1.25rem; /* 20px / 16 = 1.25 */
  text-align: center;
  border: 0.0625rem solid #eee; /* 1px / 16 = 0.0625 */
  border-radius: 0.375rem; /* 6px / 16 = 0.375 */
  font-weight: 600;
  color: #415669;
  transition: box-shadow 0.3s ease;
}
.part-category-card:hover {
  box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1); /* 4px/16=0.25, 10px/16=0.625 */
}

/* --- Parts Request Form Section --- */
.parts-request-section {
  background-color: #f7f9fc; /* Light background */
  padding: 2.5rem; /* 40px / 16 = 2.5 */
  margin-top: 2.5rem; /* 40px / 16 = 2.5 */ /* Space above this section */
  border-radius: 0.5rem; /* 8px / 16 = 0.5 */
  border: none; /* Ensure no bottom border from .parts-section */
}

.parts-request-section h2 {
  text-align: center;
  color: #415669;
  margin-bottom: 0.9375rem; /* 15px / 16 = 0.9375 */
}

.parts-request-section p#parts-request-desc {
  text-align: center;
  max-width: 43.75rem; /* 700px / 16 = 43.75 */
  margin: 0 auto 1.875rem auto; /* 30px / 16 = 1.875 */ /* Center description paragraph */
  color: #555;
  line-height: 1.6;
}

/* Style the form container box */
.parts-form-box {
  background-color: #fff;
  padding: 1.875rem 2.5rem; /* 30px/16=1.875, 40px/16=2.5 */
  border-radius: 0.5rem; /* 8px / 16 = 0.5 */
  box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1); /* 2px/16=0.125, 10px/16=0.625 */
  max-width: 50rem; /* 800px / 16 = 50 */ /* Adjust max width */
  margin: 0 auto; /* Center form box */
}

/* Layout for side-by-side fields */
.parts-form-box .form-row {
  display: flex;
  gap: 1.25rem; /* 20px / 16 = 1.25 */ /* Space between fields in a row */
  margin-bottom: 1.25rem; /* 20px / 16 = 1.25 */
}
.parts-form-box .form-row .input-group:nth-child(1),
.parts-form-box .form-row .input-group:nth-child(2) {
  flex: 1 1 0; /* grow and shrink, no fixed basis */
}
.parts-form-box .form-row .input-group:nth-child(3) {
  flex: 0 0 9rem; /* don’t grow, base width ≈ 90 px - already in rem */
}

/* General Form Styles */
.parts-form-box .input-group {
  margin-bottom: 1.25rem; /* 20px / 16 = 1.25 */
}
.parts-form-box .input-group label {
  display: block;
  margin-bottom: 0.5rem; /* 8px / 16 = 0.5 */
  font-weight: 600;
  font-size: 0.875rem; /* 14px / 16 = 0.875 */
  color: #333;
}
.parts-form-box .input-group #parts-request-label-files-button {
  color: #ffffff;
}

.parts-form-box .input-group input[type="text"],
.parts-form-box .input-group input[type="email"],
.parts-form-box .input-group input[type="tel"],
.parts-form-box .input-group input[type="number"],
.parts-form-box .input-group textarea {
  width: 100%;
  padding: 0.75rem 0.9375rem; /* 12px/16=0.75, 15px/16=0.9375 */
  border: 0.0625rem solid #ccc; /* 1px / 16 = 0.0625 */
  border-radius: 0.25rem; /* 4px / 16 = 0.25 */
  font-size: 0.9375rem; /* 15px / 16 = 0.9375 */
  box-sizing: border-box; /* Include padding and border in element's total width/height */
  transition: border-color 0.3s ease;
}
.parts-form-box .input-group input:focus,
.parts-form-box .input-group textarea:focus {
  border-color: #415669;
  outline: none;
}
.parts-form-box .input-group textarea {
  resize: vertical;
  min-height: 5rem; /* 80px / 16 = 5 */
}

/* File Input Specific Styles */
.parts-form-box .file-input-group {
  border: 0.0625rem solid #eee; /* 1px / 16 = 0.0625 */
  padding: 0.9375rem; /* 15px / 16 = 0.9375 */
  border-radius: 0.25rem; /* 4px / 16 = 0.25 */
  background-color: #f9f9f9;
}
.parts-form-box .file-input-group label#parts-request-label-files-title {
  font-weight: 600;
  font-size: 0.9375rem; /* 15px / 16 = 0.9375 */
  color: #333;
  margin-bottom: 0.625rem; /* 10px / 16 = 0.625 */
}
.parts-form-box .file-upload-btn {
  display: inline-block;
  padding: 0.625rem 1.125rem; /* 10px/16=0.625, 18px/16=1.125 */
  background-color: #415669;
  color: #fff;
  border: none;
  border-radius: 0.25rem; /* 4px / 16 = 0.25 */
  cursor: pointer;
  font-size: 0.875rem; /* 14px / 16 = 0.875 */
  font-weight: 600;
  transition: background-color 0.3s ease;
  margin-right: 0.625rem; /* 10px / 16 = 0.625 */
}
.parts-form-box .file-upload-btn:hover {
  background-color: #314252;
}
.parts-form-box .file-input-group small {
  display: inline;
  font-size: 0.8125rem; /* 13px / 16 = 0.8125 */
  color: #666;
}
.parts-form-box .file-list-display {
  margin-top: 0.9375rem; /* 15px / 16 = 0.9375 */
  max-height: 9.375rem; /* 150px / 16 = 9.375 */
  overflow-y: auto;
}
.parts-form-box .file-list-display .no-files {
  color: #888;
  font-style: italic;
}
.parts-form-box .file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.625rem; /* 8px/16=0.5, 10px/16=0.625 */
  background-color: #fff;
  border: 0.0625rem solid #ddd; /* 1px / 16 = 0.0625 */
  border-radius: 0.25rem; /* 4px / 16 = 0.25 */
  margin-bottom: 0.5rem; /* 8px / 16 = 0.5 */
  font-size: 0.875rem; /* 14px / 16 = 0.875 */
}
.parts-form-box .file-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 0.625rem; /* 10px / 16 = 0.625 */
  color: #333;
}
.parts-form-box .file-remove-btn {
  background: none;
  border: none;
  color: #aa272f;
  font-size: 1.125rem; /* 18px / 16 = 1.125 */
  font-weight: bold;
  cursor: pointer;
  padding: 0 0.3125rem; /* 5px / 16 = 0.3125 */
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.parts-form-box .file-remove-btn:hover {
  opacity: 1;
  color: #aa272f;
}

/* Submit Button */
.parts-form-box #parts-btn-submit-request {
  display: block;
  width: 100%;
  padding: 0.9375rem; /* 15px / 16 = 0.9375 */
  font-size: 1rem; /* 16px / 16 = 1 */
  margin-top: 1.5625rem; /* 25px / 16 = 1.5625 */ /* Space above submit button */
  /* Inherits .cta-button styles from styles.css or defined globally */
  background-color: #415669;
  color: #fff;
  border: none;
  border-radius: 0.25rem; /* 4px / 16 = 0.25 */
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.parts-form-box #parts-btn-submit-request:hover {
  background-color: #314252;
}

.add-part-btn {
  margin: 0.625rem 0 1.5625rem 0; /* 10px/16=0.625, 25px/16=1.5625 */
  padding: 0.625rem 1.125rem; /* 10px/16=0.625, 18px/16=1.125 */
  background: #415669;
  color: #fff;
  border: none;
  border-radius: 0.25rem; /* 4px / 16 = 0.25 */
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
}
.add-part-btn:hover {
  background: #314252;
}