.trios-contact-form {
  max-width: 760px;
  margin: 0 auto;
  font-family: inherit;
}

.trios-contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.trios-contact-form .form-row.single {
  grid-template-columns: 1fr;
}

.trios-contact-form .form-group {
  position: relative;
}

/* Inputs, selects, textareas */
.trios-contact-form input[type="text"],
.trios-contact-form input[type="email"],
.trios-contact-form input[type="tel"],
.trios-contact-form select,
.trios-contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid #E4E1EC;
  border-radius: 10px;
  background: #ffffff;
  font-size: 15px;
  color: #38344A;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.trios-contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

.trios-contact-form input::placeholder,
.trios-contact-form textarea::placeholder {
  color: #A6A2B5;
}

.trios-contact-form input:focus,
.trios-contact-form select:focus,
.trios-contact-form textarea:focus {
  border-color: #EE4B4C;
  box-shadow: 0 0 0 3px rgba(238, 75, 76, 0.12);
}

/* Selects: custom chevron, placeholder-grey until chosen */
.trios-contact-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M5 7l5 5 5-5' stroke='%23A6A2B5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 11px 11px;
  padding-right: 40px;
  cursor: pointer;
  color: #A6A2B5;
}

.trios-contact-form select.has-value {
  color: #38344A;
}

/* Phone field */

/* IMPORTANT: CF7 always wraps every field in its own
   <span class="wpcf7-form-control-wrap FIELDNAME">. That wrapping span is what
   was breaking the phone row (it fights any custom flex/grid parent and was
   forcing "+971" onto its own line under "Phone*"). Neutralizing it with
   display:contents makes CF7's wrapper invisible to layout so its children
   (the actual <input>) become direct flex children instead. */
.trios-contact-form .wpcf7-form-control-wrap {
  display: contents;
}

.trios-contact-form .form-group.phone-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  border: 1px solid #E4E1EC;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  height: 51px;
  box-sizing: border-box;
}

.trios-contact-form .form-group.phone-group:focus-within {
  border-color: #EE4B4C;
  box-shadow: 0 0 0 3px rgba(238, 75, 76, 0.12);
}

/* The dial-code select overrides the general `.trios-contact-form select`
   rule above: no border/full width of its own (it's a segment inside the
   shared .phone-group box), a tighter chevron, and dark text by default
   since — unlike Industry/Country/Subject — it always holds a real value,
   never an empty placeholder state. !important throughout because this is
   the exact spot that kept losing to the generic select rule. */
.trios-contact-form .form-group.phone-group select.phone-code-select {
  width: auto !important;
  max-width: 130px;
  flex-shrink: 0;
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent;
  padding: 14px 24px 14px 16px;
  background-position: right 8px center;
  background-size: 11px 11px;
  color: #38344A;
  height: 51px;
  box-sizing: border-box;
}

.trios-contact-form .form-group.phone-group select.phone-code-select:focus {
  box-shadow: none;
}

.trios-contact-form .phone-divider {
  width: 1px;
  height: 22px;
  background: #E4E1EC;
  margin: 0 12px;
  flex-shrink: 0;
}

/* This is the other half of the fix: the general input[type="tel"] rule above
   sets width:100%, which — once the wrap span stopped fighting it — would
   still make the number field try to claim the full row width for itself.
   flex + width:auto lets it just take the remaining space instead. */
.trios-contact-form .form-group.phone-group input[type="tel"] {
  flex: 1 1 auto;
  width: auto !important;
  height: 100%;
  box-sizing: border-box;
  border: none !important;
  border-radius: 0 !important;
  padding: 14px 16px;
}

.trios-contact-form .form-group.phone-group input:focus {
  box-shadow: none;
}

/* Checkboxes */
/* Same fix as the button row: compound selector + !important guarantees this
   wins over .form-row{display:grid} no matter the CSS source order — this is
   what was pushing the privacy-policy label onto its own line below the
   checkbox instead of sitting beside it. */
.trios-contact-form .form-row.checkbox-row {
  display: flex !important;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.trios-contact-form .wpcf7-form-control-wrap.newsletter,
.trios-contact-form .wpcf7-form-control-wrap.privacy-policy {
  display: flex;
}

/* Drawn from scratch with appearance:none rather than relying only on
   accent-color — some themes' own form resets (or older browsers) ignore
   accent-color, which is why these were showing up as tiny unstyled default
   checkboxes instead of the red 18px squares. */
.trios-contact-form input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  margin-right: 10px;
  margin-top: 2px;
  border: 1.5px solid #D6D3E0;
  border-radius: 4px;
  background: #ffffff;
  accent-color: #EE4B4C; /* harmless fallback for older browsers */
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}

.trios-contact-form input[type="checkbox"]:checked {
  background: #EE4B4C;
  border-color: #EE4B4C;
}

.trios-contact-form input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.trios-contact-form input[type="checkbox"]:focus-visible {
  outline: 2px solid #EE4B4C;
  outline-offset: 2px;
}

.trios-contact-form .wpcf7-list-item {
  margin: 0;
}

.trios-contact-form .wpcf7-list-item-label {
  font-weight: 600;
  color: #2A2740;
  font-size: 15px;
}

.trios-contact-form .checkbox-desc {
  flex-basis: 100%;
  margin: 2px 0 0 28px;
  font-size: 13.5px;
  color: #7B7789;
  line-height: 1.5;
}

.trios-contact-form .privacy-row .wpcf7-list-item-label {
  display: none; /* replaced by the custom label below, which includes the real link */
}

.trios-contact-form .custom-checkbox-label {
  font-size: 14.5px;
  color: #2A2740;
  cursor: pointer;
}

.trios-contact-form .custom-checkbox-label a {
  color: #2F6FED;
  text-decoration: underline;
}

/* Buttons */
/* Compound selector (.form-row.button-row) + !important so this can never
   lose the display cascade to the base .form-row{display:grid} rule above —
   this is what was causing "Leave us a Message" and "Clear all" to stack. */
.trios-contact-form .form-row.button-row {
  display: flex !important;
  gap: 16px;
  margin-top: 8px;
}

.trios-contact-form input[type="submit"] {
  flex: 1;
  background: linear-gradient(90deg, #F26B3A 0%, #E63950 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 16px 24px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.trios-contact-form input[type="submit"]:hover {
  opacity: 0.92;
}

.trios-contact-form .trios-clear-btn {
  background: #fff;
  border: 1px solid #E4E1EC;
  border-radius: 10px;
  padding: 16px 28px;
  font-size: 15px;
  font-weight: 600;
  color: #2A2740;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.trios-contact-form .trios-clear-btn:hover {
  border-color: #c9c5d6;
}

/* Hide the CF7 spinner/response output from breaking the layout */
.trios-contact-form .wpcf7-spinner {
  margin-left: 12px;
}

/* Technical support field, hidden until "Technical Support" is selected */
.trios-contact-form .tech-support-wrap {
  display: none;
}

/* Mobile */
@media (max-width: 640px) {
  .trios-contact-form .form-row {
    grid-template-columns: 1fr;
  }
  .trios-contact-form .button-row {
    flex-direction: column;
  }
}