body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2; /* Using index.html's lighter background */
    color: #000; /* Using index.html's darker text color */
    margin: 0;
    padding: 20px; /* Using index.html's padding */
    /* Remove text-align: center; from body, as .content-box handles centering the content */
}

.logo-container {
    text-align: center;
    margin-bottom: 20px; /* Using index.html's margin */
    margin-top: 20px; /* Keep this if you like the top spacing */
}

.logo-container img {
    max-width: 250px; /* Using index.html's max-width for larger logo */
    height: auto; /* Ensure aspect ratio is maintained */
}

.content-box { /* Renaming .home-container to .content-box for consistency with L2style.css */
    max-width: 900px; /* Using index.html's max-width */
    margin: 0 auto;
    padding: 25px; /* Using index.html's padding */
    background-color: #fff; /* Using index.html's white background */
    box-shadow: 0 0 6px rgba(0,0,0,0.1); /* Using index.html's lighter shadow */
    border-radius: 8px; /* Using index.html's smaller radius */
    /* Remove margin-top/bottom as padding on body covers it for index.html */
    text-align: left; /* Keep this as content inside is justified/left */
}

.justified {
    text-align: justify;
}

h1, h2, h3 {
    text-align: center;
    margin: 10px 0; /* Consistent margin */
}

h1 {
    font-size: 24px;
}

h2 {
    font-size: 20px;
    color: #b30000; /* Use index.html's specific brick red for h2 */
}

h3 {
    font-size: 16px;
    color: #b30000; /* Use index.html's specific brick red for h3 */
    font-weight: normal;
}

p { /* Add paragraph styles from index.html */
    text-align: justify;
    font-size: 14px;
    line-height: 1.6;
    margin: 20px 0;
}

.centered-links {
    text-align: center;
    margin: 15px 0; /* Use index.html's margin */
}

.centered-links a { /* Add link styles from index.html */
    margin: 0 10px;
    font-size: 13px;
    color: #003366; /* Dark blue for links */
    text-decoration: none;
}

.centered-links a:hover {
    text-decoration: underline;
}

sup { /* Add sup style from index.html */
    font-size: 45%;
}

/* --- Form Specific Styles for F2_large.html (and other forms) --- */

form {
    margin-top: 25px; /* Add some space above the form */
    margin-bottom: 25px; /* Add some space below the form */
    padding: 0 10px; /* Give some inner padding to align labels */
}

form label {
    display: block; /* Makes each label take its own line */
    margin-bottom: 15px; /* Space between label and input */
    font-weight: normal; 
    color: #333; /* Slightly darker color for labels */
    text-align: left; /* Align labels to the left */
    font-size: 14px;
}

form input[type="text"],
form input[type="number"] {
    width: calc(100% - 20px); /* Adjust width for padding */
    padding: 10px;
    margin-bottom: 5px; /* Space between input and next label */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.concatenated-field-style {
    color: green;                  /* Use neutral text color */
    /* background-color: #f0fff0; */ /* Removed light green background */
    border: none;                 /* Removed border */
    padding: 10px;
    margin-top: 15px;
    margin-bottom: 20px;
    border-radius: 0;             /* Remove rounding since no border */
    font-weight: normal;          /* Make the text normal weight */
    font-size: 14px;              /* Optional: slightly smaller */
    text-align: left;
}


/* Style for the submit button */
.submit-button {
    background-color: #4CAF50; /* A nice green, similar to original but slightly more modern */
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    display: block; /* Make button take full width to center more easily */
    margin: 25px auto; /* Center the button if it's block level */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

.submit-button:hover {
    background-color: #45a049; /* Slightly darker green on hover */
}

.form-description,
.form-instructions {
    font-size: 13px; /* Slightly smaller for ancillary text */
    color: #555; /* Muted color */
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 1.5;
    text-align: justify; /* Keep this justified if desired */
    padding: 0 10px; /* Match form padding */
}

.form-description i { /* Keep italics for the note */
    font-style: italic;
}
/* Specific layout for the Borough dropdown in F2_NYC.html */
.form-group.borough-select {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin-bottom: 25px; /* MODIFIED: Increased margin for more space below */
}

/* Ensure the label within this specific group doesn't take its own line */
.form-group.borough-select label {
    margin-bottom: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Ensure the select within this specific group takes available space */
.form-group.borough-select select {
    flex-grow: 0; /* MODIFIED: Set to 0 to prevent it from growing to fill space */
    width: auto; /* Keeps auto sizing */
    max-width: 20ch; /* ADDED: Limits the width to approximately 20 characters */
    margin-bottom: 0;
}

/* --- Listing Block Shared Layout (search + preview) --- */

.listing {
  display: flex;
  border: 1px solid #ccc;
  margin: 25px auto;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  max-width: 900px;
  box-shadow: 0 0 6px rgba(0,0,0,0.1);
}

.left-column {
  width: 100px;
  margin-right: 20px;
  text-align: left;
  font-weight: bold;
  color: #800000; /* Brick red */
}

.active-date {
  font-size: 1.1em;
  margin-bottom: 8px;
}

.price {
  font-size: 1em;
  color: #333;
}

.right-column {
  flex: 1;
}

.listing-header {
  font-size: 1.2em;
  margin-bottom: 8px;
}

.listing-body p {
  margin: 4px 0;
  font-size: 14px;
  line-height: 1.5;
}

.listing-footer {
  margin-top: 10px;
  font-size: 0.9em;
  color: #555;
}

.listing-footer p {
  margin: 2px 0;
}
/* --- Cleaned-Up Listing Block Layout --- */

.listing-wrapper {
  max-width: 900px;
  margin: 12px auto 6px auto; /* tighter spacing between listings */
}

.listing-no-display {
  text-align: right;
  font-size: 11px;
  color: #888;
  margin-bottom: 4px; /* less space before block */
}

.listing {
  display: flex;
  background-color: transparent;
  border: none;
  padding: 4px 0;
  border-radius: 0;
  box-shadow: none;
}

.left-column {
  width: 100px;
  text-align: left;
  color: #800000;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: start; /* changed from flex-end */
  padding-right: 10px;
  gap: 2px; /* adds minimal vertical space */
}


.active-date {
  font-size: 13px;
  margin: 0;
  line-height: 1.4;
}

.price {
  font-size: 13px;
}

.right-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wd {
  font-weight: bold;
  color: #000;
  font-size: 13px;
  line-height: 1.2;
}

.nd {
  color: #b30000; /* Brick red */
  font-size: 13px;
  line-height: 1.2;
}

.ld {
  color: #006400; /* Green */
  font-size: 13px;
  line-height: 1.2;
}

.cd {
  color: #1e90ff; /* Royal blue */
  font-size: 13px;
  line-height: 1.2;
}

.brag {
  font-style: italic;
  font-size: 13px;
  line-height: 1.2;
}

/* Tight spacing */
.right-column > div {
  margin: 0;
  padding: 0;
}
/* Fixes F1 form spacing */
.content-box input[type="text"],
.content-box input[type="number"] {
  display: block; /* Ensures they take their own line */
  margin-bottom: 18px; /* This is your new, consistent spacing */
}

.content-box label {
  margin-bottom: 5px; /* Adds a small space between label and its input */
}

.content-box p {
  line-height: 1.4; /* Tightens up the text inside your paragraphs */
}

form input[type="text"][id^="w"],
form input[type="text"][id^="n"],
form input[type="text"][id^="c"],
form input[type="text"][id^="l"] {
    width: 50ch; /* roughly matches 40-character input */
}

.form-field-group {
  margin-bottom: 15px; /* Replaces the margin-bottom on the input */
}


.form-helper-text {
    display: block;      /* Forces it to be below the input */
    color: #666666;      /* Gray color */
    font-size: 13px;
    font-style: italic;
    margin-top: 4px;     /* A small, natural gap below the input */
    margin-bottom: 24px; /* A large gap before the next field begins */
}

.content-box form input[type="text"],
.content-box form input[type="number"] {
  margin-bottom: 18px; /* Let the .form-field-group handle spacing (F1 forms only) */
}