/* General Styles */
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  /* Using background image settings from inline block */
  background-image: url('/../assets/sunshinesnoutsBG.png'); /* Ensure this path is correct relative to CSS file or use absolute path */
  background-color: #f8f9fa; /* Fallback color from inline block */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0;
  padding: 15px; /* Using padding from inline block */
  line-height: 1.5; /* Using line-height from inline block */
  color: #212529; /* Using color from inline block */
}

/* Container */
.container {
  max-width: 650px;
  margin: 20px auto; /* Using margin from inline block */
  background: rgba(255, 255, 255, 0.92); /* Using background from inline block */
  padding: 20px 25px; /* Using padding from inline block */
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid #dee2e6; /* Using border from inline block */
}

h1 {
  color: #343a40; /* Using color from inline block */
  text-align: center;
  margin-bottom: 20px; /* Using margin from inline block */
  font-size: 1.8em;
}

/* Form Elements */
fieldset {
  border: none;
  padding: 0;
  margin: 0 0 18px 0; /* Using margin from inline block */
  border-top: 1px solid #eee;
  padding-top: 18px; /* Using padding from inline block */
}

fieldset:first-of-type {
  border-top: none;
  padding-top: 0;
}

/* Default legend style */
legend {
  font-size: 1.2em;
  font-weight: 600; /* Using weight from inline block */
  color: #343a40; /* Using color from inline block */
  margin-bottom: 15px; /* Using margin from inline block */
  padding: 0; /* Using padding from inline block */
  width: auto;
  border-bottom: none;
}

.form-group {
  margin-bottom: 15px; /* Using margin from inline block */
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 5px; /* Using margin from inline block */
  color: #495057; /* Using color from inline block */
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 9px 11px; /* Using padding from inline block */
  margin-bottom: 10px; /* Using default margin */
  border: 1px solid #ced4da; /* Using border from inline block */
  border-radius: 4px;
  font-size: 1em;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box; /* Added from inline block */
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: #80bdff; /* Using focus style from inline block */
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Using SVG background from first block */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23555' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 30px;
  background-color: #fff; /* Ensure background color for select */
}

select:disabled,
input:disabled {
  background-color: #e9ecef;
  cursor: not-allowed;
  opacity: 0.7;
}

textarea {
  resize: vertical;
  min-height: 70px; /* Using min-height from inline block */
}

/* Checkbox Container (Using simplified version from inline block) */
.checkbox-container {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  background-color: transparent;
  padding: 5px 0;
  border-radius: 0;
  border: none;
}

.checkbox-container input[type="checkbox"] {
  margin-right: 10px;
  width: auto;
  flex-shrink: 0;
  transform: scale(1.1);
  cursor: pointer;
}

.checkbox-container label {
  margin-bottom: 0;
  font-weight: normal;
  cursor: pointer;
  color: #495057;
  font-size: 0.95em; /* Using font-size from inline block */
  flex-grow: 1; /* Added from first block */
}

.checkbox-container label a {
  color: #0056b3; /* Using color from inline block */
  text-decoration: underline;
}

/* --- Logo Styling for Booking Form --- */
.form-logo-container {
    text-align: center; /* Center the logo block */
    margin-bottom: 15px; /* Space below the logo, before the H1 */
}

.form-logo {
    max-width: 200px;    /* Adjust as needed - control the logo size */
    height: auto;        /* Maintain aspect ratio */
    display: inline-block; /* Allows centering via text-align on parent */
}
/* --- END Logo Styling --- */

/* Pet Fields Specific */
.pet-fields {
  border: 1px solid #e0e0e0;
  background-color: #fdfdfd;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 4px;
}

.pet-fields h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.1em; /* Using font-size from inline block */
  color: #444;
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px; /* Using padding from inline block */
}

/* Submit Button (Using styles from inline block) */
button[type="submit"] {
  width: 100%;
  padding: 12px;
  background: #4997b6;
  border: none;
  color: #fff;
  font-size: 1.1em;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-top: 20px;
}

button[type="submit"]:hover {
  background: #e8944f;
}

button[type="submit"]:active {
  transform: translateY(0px);
  box-shadow: none;
}

button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}



/* Error and Confirmation Messages (Using styles from inline block) */
.error {
  color: #D8000C;
  background-color: #FFD2D2;
  border: 1px solid #D8000C;
  padding: 10px 15px;
  text-align: center;
  margin: 0 0 15px 0;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.95em;
}

.confirmation {
  color: #155724;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  padding: 10px 15px;
  text-align: center;
  margin: 15px 0; /* Adjusted margin */
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.95em;
}

.confirmation a {
  color: #0c5460;
  font-weight: bold;
  text-decoration: underline;
}

/* --- Modal Spacing --- */
/* Reduce spacing between service title and description in modal */
#serviceInfoContentDiv h3 {
  margin-bottom: 5px; /* Reduces space below the service title (adjust value as needed) */
}

#serviceInfoContentDiv p {
  margin-top: 0; /* Removes space above the service description */
  margin-bottom: 10px; /* Keeps some space below the paragraph */
}

/* Optional: Adjust spacing below the 'Pricing:' heading if needed */
#serviceInfoContentDiv h4 {
    margin-top: 10px; /* Adjust space above 'Pricing:' */
    margin-bottom: 5px; /* Adjust space below 'Pricing:' before the list */
}

/* Optional: Adjust spacing for the pricing list itself */
#serviceInfoContentDiv ul {
    margin-top: 0; /* Remove space above the pricing list */
    margin-bottom: 15px; /* Adjust space below the pricing list */
}

/* --- Legend Alignment --- */
/* Styles for the legend container to align items */
.legend-container {
  display: flex; /* Enable flexbox */
  justify-content: space-between; /* Pushes items to opposite ends */
  align-items: center; /* Vertically aligns items in the middle */
  width: 100%; /* Ensure it takes full width */
  /* Reset default legend padding/margin if necessary */
  /* padding: 0; */ /* Already set in default legend style */
  /* margin-bottom: 15px; /* Already set in default legend style */ */
}

/* Container for the action text and icon on the right */
.legend-action {
  display: flex; /* Align text and icon horizontally */
  align-items: center; /* Vertically align text and icon */
}

/* Style for the "Pricing & Services" link */
a.legend-action-text { /* Target the <a> tag specifically */
  font-size: 0.90em;   /* Keep it slightly smaller or adjust */
  font-weight: bold;     /* Make it bold */
  color: #4997b6;       /* YOUR THEME BLUE COLOR */
  margin-right: 8px;
  text-decoration: none; /* Remove default underline */
  transition: color 0.2s ease;
}

a.legend-action-text:hover {
  color: #e8944f;       /* YOUR THEME ORANGE COLOR for hover */
  text-decoration: underline; /* Optional: Add underline on hover */
}

/* Style for the icon button (ensure it's still distinct or complements the text link) */
.info-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9em;
  width: 24px;
  height: 24px;
  cursor: pointer;
  border: 1px solid #3a7992; /* Border matching blue text */
  border-radius: 50%;
  text-align: center;
  background-color: #4997b6; /* THEME BLUE to match text */
  font-weight: bold;
  color: #FFFFFF;        /* White '?' */
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.info-button:hover {
  background-color: #e8944f; /* Theme Orange on hover to match text hover */
  border-color: #c06c23;     /* Darker orange border */
  transform: scale(1.1);
}

/* Reduce bottom margin of the last fieldset before the button */
form#bookingForm fieldset:last-of-type {
    margin-bottom: 10px; /* Was 18px, adjust as needed */
}

/* Adjust margin for the paragraph containing the Terms of Service link */
form#bookingForm > .form-group[style*="text-align:center"] { /* Targets the div with TOS link */
    margin-top: 10px; /* Keep some space */
    margin-bottom: 15px; /* Reduce space before button */
}


button[type="submit"] {
  width: 100%;
  padding: 12px;
  background: #4997b6;
  border: none;
  color: #fff;
  font-size: 1.1em;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-top: 10px; /* Reduced from 20px, adjust as needed */
  /* Optional: Add a small bottom margin if needed, or rely on container padding */
  /* margin-bottom: 10px; */
}

/* Optional: Reduce bottom padding of the main container */
.container {
  max-width: 650px;
  margin: 20px auto;
  background: rgba(255, 255, 255, 0.92);
  padding: 20px 25px 15px 25px; /* Reduced bottom padding from 20px to 15px */
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid #dee2e6;
}

/* --- Terms of Service Modal Styles --- */
/* Base style - hidden by default, covers screen */
#tosModal {
  display: none;
  position: fixed;
  z-index: 1001; /* Ensure it's on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.6);
}

/* Inner content box styling */
#tosModal > div {
  background-color: #fefefe;
  margin: 8% auto;
  padding: 25px 30px;
  border: 1px solid #aaa;
  width: 80%;
  max-width: 700px;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Close button ('X') styling */
#tosModalClose {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 5px;
  right: 15px;
  cursor: pointer;
  line-height: 1;
}

/* Close button hover effect */
#tosModalClose:hover,
#tosModalClose:focus {
  color: black;
  text-decoration: none;
}

/* Modal title styling */
#tosModal h2 {
    margin-top: 0;
    color: #333;
    text-align: center;
    margin-bottom: 15px;
}

/* Horizontal rule styling */
#tosModal hr {
    margin-top: 10px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
}

/* Styling for the main content area within the modal */
#tosModalContent {
  max-height: 60vh;
  overflow-y: auto;
  line-height: 1.6;
  padding-right: 10px; /* Space for scrollbar */
}

/* Styling for headings within the TOS content */
#tosModalContent h4 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: #444;
}

/* Styling for paragraphs within the TOS content */
#tosModalContent p {
    margin-bottom: 1em;
}


/* Ensure the first span in legend doesn't affect spacing */
.legend-container > span:first-child {
    /* No specific styles needed unless overriding something */
}

/* Responsive Adjustments (Using styles from inline block) */
@media (max-width: 600px) {
  .container {
    padding: 15px;
    margin: 15px auto; /* Adjusted margin */
  }
  h1 {
    font-size: 1.6em;
  }
  /* Adjust input/select/textarea padding/font for mobile if needed */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  input[type="number"],
  select,
  textarea {
      font-size: 1em; /* Kept from first block */
      padding: 10px 12px; /* Kept from first block */
  }
   button[type="submit"] {
       font-size: 1.1em; /* Kept from first block */
       padding: 12px; /* Kept from first block */
   }
   .checkbox-container label {
       font-size: 0.95em; /* Kept from first block */
   }
   fieldset legend { /* Added from first block */
       font-size: 1.1em;
   }
   .pet-fields h3 { /* Added from first block */
       font-size: 1.1em;
   }
}