/* =========================
   Brand + Buttons
   ========================= */
.bg-primary { background: #b40000 !important; }

.btn-outline-secondary {
  color: #000;
  font-size: 18px;
  font-weight: 600;
  border: solid 1px rgba(124, 123, 123, 0.3);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  border-radius: 0;
  padding:15px 20px;
    
}

/* Hover, focus, and OPEN state all look the same */
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.dropdown .btn.btn-outline-secondary[aria-expanded="true"],
.dropdown .btn.btn-outline-secondary[data-ri-toggle="dropdown"][aria-expanded="true"],
.dropdown .btn.btn-outline-secondary[data-bs-toggle="dropdown"][aria-expanded="true"] {
  background: #f7f7f7;
  border-color: #b40000;
  box-shadow: 0 0 0 .2rem rgba(180,0,0,.15);
  color: #000;
  
}

/* Optional: badge pops when JS switches it to bg-primary */
.badge.bg-primary { color: #fff; }

/* =========================
   Dropdown-per-category layout
   ========================= */
.dropdown { position: relative; } /* anchor for the menu positioning */

.dropdown .btn {
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Menu sits below the button, spans the dropdown width, and scrolls if tall */
.dropdown-menu[aria-labelledby^="dd-"] {
  position: absolute;    /* relative to .dropdown */
  left: 0;
  right: 0;
  top: calc(100% + .25rem);  /* small gap under the button */
  width: 100%;
  z-index: 1080;         /* above surrounding content, below modals */
  max-height: 18rem;
  overflow: auto;
  margin-top: 0;         /* spacing handled by 'top' */
}

/* Compact height on small screens */
@media (max-width: 576px) {
  .dropdown-menu[aria-labelledby^="dd-"] { max-height: 14rem; }
}

/* =========================
   Form + Validation
   ========================= */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.is-invalid { border-color: #dc3545 !important; }

.invalid-feedback {
  display: block;
  color: #dc3545;
  font-size: .875rem;
}

.te-contacts-email input,
.te-contacts-message textarea,
.te-contacts-email select {
  width: 100%;
}

/* =========================
   Sections / Typography
   ========================= */
.category {
  border: 1px solid #e4e6ea;
  border-radius: .5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}
.category h3 { font-size: 1.5rem; margin-bottom: .75rem; }

.small-note { font-size: .875rem; color: #6c757d; }

/* Force black text inside the form (labels, inputs, placeholders) */
.comment-respond input,
.comment-respond select,
.comment-respond label,
.comment-respond textarea,
.comment-respond ::placeholder {
  color: #000 !important;
}

.comment-respond label {
  font-weight: 500;
  margin-bottom: 0;
  padding: 0 10px 10px 10px;
}

/* Page container width */
.container { max-width: 960px; }

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
    .is-invalid{border-color:#dc3545!important;}
    .invalid-feedback{display:block;color:#dc3545;font-size:.875rem;}
    .small-note{font-size:.9rem;color:#6c757d;}
@media (max-width: 767.98px) {

  .comment-respond label,
  .te-contact-form label,
  .wpcf7-form label {
    padding: 0;
    margin-bottom: 4px;
    font-weight: 500;
  }

  .comment-respond .te-contacts-email,
  .comment-respond .te-contacts-name,
  .comment-respond .single-input-field {
    margin-bottom: 10px;
  }

}

/* =========================================================
   RI Quote Forms — shared helpers (moved from inline HEAD)
   Applies to quote.php / quote-consumables.php / support.php
   ========================================================= */

/* Accessibility helper */
.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Validation */
.is-invalid{ border-color:#dc3545!important; }
.invalid-feedback{
  display:block;
  color:#dc3545;
  font-size:.875rem;
}

/* Ensure inputs/selects/textarea fill column */
.te-contacts-email input,
.te-contacts-email select,
.te-contacts-message textarea{
  width:100%;
}

/* Consumables layout pieces (quote-consumables.php) */
.category{
  border:1px solid #e4e6ea;
  border-radius:.5rem;
  padding:1rem;
  margin-bottom:1rem;
}
.small-note{
  font-size:.875rem;
  color:#6c757d;
}
.consumable{
  border:1px solid #e4e6ea;
  border-radius:.5rem;
  padding:.75rem;
  margin-bottom:.5rem;
}
.qty{ width:90px; }

/* Keep form text readable if theme forces light text */
.comment-respond input,
.comment-respond select,
.comment-respond textarea,
.comment-respond label,
.comment-respond ::placeholder{
  color:#000!important;
}

/* Label spacing */
.comment-respond label{
  font-weight:500;
  margin-bottom:0;
  padding:0 10px 10px 10px;
}

/* Fit inputs a bit tighter */
.comment-respond input,
.comment-respond select{
  max-height:45px;
}

/* Optional: keep quote pages from getting too wide */
.service-details-page .container{
  max-width:960px;
}