.infrabyte-form-section {
  margin: 0 auto;
  /* Form Appearance settings (Appearance/form-appearance.php) override these via a :root block
     defining the variable only when an admin has actually turned that color on - otherwise every
     var() below falls straight through to its original hardcoded default. */
  background-color: var(--infrabyte-form-bg-color, #242c43) !important;
  border: 1px solid #555f67 !important;
  border-radius: 10px !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

/* CSS-01 (2026-08-27): this whole file only ever targets .infrabyte-form/.infrabyte-form-section/
   .sn-* classes - nothing here is a bare, unscoped selector - so !important below can't leak
   into anything outside this one legacy form widget. Needed because the site's newer theme ships
   its own CSS for embedding Contact Form 7 (scoped to a different class, .infrabyte-cf7, used on
   the current marketing site's own forms) that loads later in the page and ties or beats these
   rules in specificity on this older Elementor-built page, so native unstyled inputs/buttons were
   winning instead. */
.infrabyte-form-section input[type="text"],
.infrabyte-form-section input[type="email"],
.infrabyte-form-section input[type="tel"],
.infrabyte-form-section textarea,
.infrabyte-form-section select {
  width: 100% !important;
  padding: 14px 16px !important;
  margin-bottom: 15px !important;
  border: 1px solid #d7e0e6 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  background-color: #fff !important;
  font-size: 15px !important;
  color: var(--infrabyte-form-text-color, #333) !important;
}

.infrabyte-form-section input[type="text"]::placeholder,
.infrabyte-form-section input[type="email"]::placeholder,
.infrabyte-form-section input[type="tel"]::placeholder,
.infrabyte-form-section textarea::placeholder {
  /* No real <label> elements exist in this form (see docs.php) - placeholder text is the only
     per-field labeling a visitor sees, so "Field label" in Form Appearance targets this. */
  color: var(--infrabyte-form-label-color, #8a9aa8) !important;
}

.infrabyte-form-section select {
  font-weight: 700 !important;
  color: var(--infrabyte-form-text-color, #222) !important;
  cursor: pointer;
}

.infrabyte-form .infrabyte-form-section span {
  display: block;
}

.infrabyte-form .hidden {
  display: none;
}

.infrabyte-form .option-buttons {
  display: flex !important;
  justify-content: stretch !important;
}

/* CF7 runs wpautop() on the form template, which wraps the loose,
   blank-line-separated markup inside these wrapper divs in a <p>. That <p>
   breaks the flex/box layout below since it becomes the sole child instead
   of the buttons/fields themselves. display:contents drops the <p>'s own
   box so its children lay out as if they were direct children again. */
.infrabyte-form .option-buttons > p,
.infrabyte-form .manual-fields > p,
.infrabyte-form .vin-fields > p,
.infrabyte-form .rego-fields > p,
.infrabyte-form .manualfields > p,
.infrabyte-form .sn-option-content > p {
  display: contents !important;
}

.infrabyte-form .sn-option-content {
  border-top: none !important;
  /* This panel has its own background, separate from .infrabyte-form-section's - both are wired
     to the same Form Appearance "Form background" control (own original default preserved as the
     fallback) so one setting covers the whole visible form, not just the outer container. */
  background-color: var(--infrabyte-form-bg-color, #31374d) !important;
  padding: 14px !important;
  margin-bottom: 15px !important;
  border-radius: 0 0 8px 8px !important;
}

.infrabyte-form .option-button {
  background-color: #fff !important;
  border: 1px solid #d7e0e6 !important;
  color: var(--infrabyte-form-text-color, #333333) !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  padding: 12px 8px !important;
  transition: background-color 0.3s ease;
  width: calc(100% / 4) !important;
  border-left: 0 !important;
  display: inline-block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.infrabyte-form .option-button:first-child {
  border-left: 1px solid #d7e0e6 !important;
  border-top-left-radius: 8px !important;
}

.infrabyte-form .option-button:last-child {
  border-top-right-radius: 8px !important;
}

.infrabyte-form .option-button.active {
  background-color: var(--infrabyte-form-active-color, #f7941d) !important;
  border-color: var(--infrabyte-form-active-color, #f7941d) !important;
  color: #fff !important;
}

.infrabyte-form .option-button:hover {
  background-color: var(--infrabyte-form-active-color, #f7941d) !important;
  border-color: var(--infrabyte-form-active-color, #f7941d) !important;
  color: #fff !important;
}

.d-none {
  display: none;
}

.infrabyte-form br {
  display: none;
}

.infrabyte-form button,
.infrabyte-form input[type="submit"] {
  border-radius: 8px !important;
  background: var(--infrabyte-form-submit-color, #f7941d) !important;
  color: #fff !important;
  border: 0 !important;
  width: 100% !important;
  padding: 14px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease, filter 0.3s ease;
}

.infrabyte-form input[type="submit"]:hover {
  /* filter: brightness() darkens whatever color is actually in use (default or a Form Appearance
     override) by the same ~12% the original default hover (#e0830f) was darker than its base
     (#f7941d), rather than hardcoding a second color that would look wrong against a custom
     submit color. */
  filter: brightness(0.88);
}

.infrabyte-form .find-vehicle-button {
  background-color: #f2f2f2 !important;
  color: #000000 !important;
  border: none !important;
  padding: 6px 10px !important;
  width: 100% !important;
}

.infrabyte-form .find-vehicle-button:hover {
  background-color: #ddd !important;
  cursor: pointer;
}

.sn-spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.sn-spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #ff8d00;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  animation: sn-spin 1s linear infinite;
}

@keyframes sn-spin {
  to {
    transform: rotate(360deg);
  }
}

.sn-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  min-width: 250px;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10000;
  /* Ensure the toast is on top */
  opacity: 0;
  transform: translateY(20px);
  animation: sn-toast-in 0.3s forwards;
}

.sn-toast-success {
  background-color: #4caf50;
  color: white;
}

.sn-toast-error {
  background-color: #f44336;
  color: white;
}

.sn-toast-message {
  flex-grow: 1;
}

.sn-toast-close {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 10px;
}

@keyframes sn-toast-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sn-toast-out {
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* for horizontal */
.infrabyte-form-section.sn-horizontal {
  max-width: 100%;
}

.infrabyte-form-section.sn-horizontal .infrabyte-form {
  display: flex;
  flex-wrap: wrap;
}

.infrabyte-form-section.sn-horizontal input,
.infrabyte-form-section.sn-horizontal select,
.infrabyte-form-section.sn-horizontal button {
  width: 25%;
}

.infrabyte-form-section.sn-horizontal .infrabyte-form div.option-buttons {
  width: 100%;
  display: flex;
  justify-content: stretch;
}

/* for autocomplete */
/* Add this to your plugin or theme's CSS file */
.sn-autocomplete-dropdown {
  position: absolute;
  border: 1px solid #ccc;
  background: #fff;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  width: 100%;
  display: none !important;
}

.sn-autocomplete-dropdown li {
  padding: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  white-space: nowrap;
  /* Prevent text from breaking into multiple lines */
  overflow: hidden;
  /* Hide the overflow text */
  text-overflow: ellipsis;
  /* Show '...' at the end if the text overflows */
  max-width: 100%;
}

.sn-autocomplete-dropdown li:hover {
  background-color: #eee;
}

/* .pac-container {
  display: none !important;
} */
.sn-radiobtn {
  margin: 0;
}

.infrabyte-form-section p,
.sn-radiobtn p {
  margin-bottom: 0;
}

.sn-radiobtn p {
  padding: 0;
}

/* Heading */
.sn-radiobtn strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  text-align: left;
  /* or center if you prefer */
}

/* Outer wrapper */
.sn-radio-group {
  display: inline-block;
  padding: 0;
  border-radius: 0;
  width: 100%;
}

/* The <p> that contains the labels */
.sn-radio-group p {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 24px;
  margin: 0;
  margin-bottom: 0 !important;
  padding: 0;
}

/* Each option */
.sn-radio-group label {
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--infrabyte-form-label-color, #333);
  margin-bottom: 0 !important;
  /* width:100%; */
}

/* Radio circle */
.sn-radio-group input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin: 0;
  margin-bottom: 0 !important;
  accent-color: #2f80ed;
}