/* Shared blue-theme fields, based on the services search control.
   The explicit scope keeps admin and other storefront themes independent.
   Important declarations replace legacy page-specific and inline cosmetics. */
body.panel-inputs {
  --field-background: #f1f7fc;
  --field-border: #c3daeb;
  --field-text: #7296b2;
  --field-placeholder: #6c757d;
  --field-accent: #0069d9;
  --field-radius: 8px;
  --field-height: 48px;
}

body.panel-inputs :is(input, textarea, select, button.form-control, .su-ddi-btn):not(:where(
  [type="hidden"], [type="checkbox"], [type="radio"], [type="file"],
  [type="range"], [type="color"], input[type="submit"], input[type="button"],
  input[type="reset"], input[type="image"], .select2-search__field
)) {
  box-sizing: border-box !important;
  min-width: 0;
  background-color: var(--field-background) !important;
  color: var(--field-text) !important;
  border-style: solid !important;
  border-width: 0 0 2px !important;
  border-color: var(--field-border) !important;
  border-radius: var(--field-radius) !important;
  padding: 10px var(--field-padding-end, 12px) 10px var(--field-padding-start, 12px) !important;
  font-size: var(--field-font-size, 16px) !important;
  font-weight: 400 !important;
  line-height: var(--field-line-height, 24px) !important;
  box-shadow: none !important;
}

body.panel-inputs :is(input, select, .su-ddi-btn):not(:where(
  [type="hidden"], [type="checkbox"], [type="radio"], [type="file"],
  [type="range"], [type="color"], [type="submit"], [type="button"],
  [type="reset"], [type="image"], [multiple], [size], .select2-search__field
)) {
  height: var(--field-height) !important;
  min-height: var(--field-height) !important;
}

/* Selectors with long service names must still grow and wrap. */
body.panel-inputs button.form-control,
body.panel-inputs .su-ddi-btn { min-height: var(--field-height) !important; height: auto !important; }
body.panel-inputs textarea { height: auto !important; min-height: 112px; resize: vertical; }
body.panel-inputs select:not([multiple]) { --field-padding-end: 32px; }
body.panel-inputs select:is([multiple], [size]) { height: auto !important; min-height: var(--field-height); }
body.panel-inputs .panel-input--icon-start { --field-padding-start: 40px; }
body.panel-inputs .su-input-wrap { --field-padding-end: 38px; }
body.panel-inputs .lnk-wrap .lnk-input { --field-padding-end: 86px; }

body.panel-inputs :is(input, textarea)::placeholder {
  color: var(--field-placeholder) !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  opacity: 1;
}

body.panel-inputs :is(input, textarea, select, button.form-control, .su-ddi-btn):focus {
  border-color: var(--field-accent) !important;
}
body.panel-inputs :is(input, textarea, select, button.form-control, .su-ddi-btn):focus-visible {
  outline: 2px solid var(--field-accent) !important;
  outline-offset: 2px !important;
}
body.panel-inputs :is(input, textarea, select, button.form-control):disabled {
  background-color: #e8eff5 !important;
  color: #728392 !important;
  cursor: not-allowed;
  opacity: 1;
}
body.panel-inputs :is(input, textarea)[readonly] { background-color: #eaf2f8 !important; }
body.panel-inputs :is(.is-valid, .is-valid-input),
body.panel-inputs .was-validated :is(input, textarea, select):valid { --field-border: #198754; --field-accent: #198754; }
body.panel-inputs :is(.is-invalid, .is-invalid-input, [aria-invalid="true"]),
body.panel-inputs .has-error :is(input, textarea, select),
body.panel-inputs .was-validated :is(input, textarea, select):invalid { --field-border: #dc3545; --field-accent: #dc3545; }

/* Joined controls: only the outside corners are rounded. */
body.panel-inputs .input-group > :is(input, select, textarea):not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
body.panel-inputs .input-group > :is(input, select, textarea):not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
body.panel-inputs .input-group-prepend > :is(.btn, select, .input-group-text) {
  border-radius: var(--field-radius) 0 0 var(--field-radius) !important;
}
body.panel-inputs .input-group-append > :is(.btn, .input-group-text) {
  border-radius: 0 var(--field-radius) var(--field-radius) 0 !important;
}
body.panel-inputs .input-group :is(.input-group-prepend, .input-group-append) > :is(.btn, .input-group-text) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--field-height) !important;
  height: auto !important;
  padding: 10px 16px !important;
  box-shadow: none !important;
}
body.panel-inputs .input-group :is(.btn-primary, .btn-big-secondary) {
  background: var(--field-accent) !important;
  border-color: #0062cc !important;
  color: #fff !important;
}
body.panel-inputs .input-group :is(.btn-primary, .btn-big-secondary):is(:hover, :focus, :active) {
  background: #005bbd !important;
  border-color: #0055b0 !important;
  color: #fff !important;
}
body.panel-inputs .input-group :is(.btn-primary, .btn-big-secondary) :is(i, .fas, .fa),
body.panel-inputs .input-group .btn .fa-search { color: #fff !important; }
body.panel-inputs .input-group .btn .fa-search::before { color: inherit !important; }

/* Keep the bulk editor's line numbers aligned with its text and scrolling. */
body.panel-inputs .mo-editor {
  --field-font-size: 13px;
  --field-line-height: 1.7;
  --field-padding-start: 16px;
  --field-padding-end: 16px;
  background: var(--field-background);
  border-color: var(--field-border);
  border-radius: var(--field-radius);
}
body.panel-inputs #bulkOrders { padding-top: 14px !important; padding-bottom: 14px !important; min-height: 300px; }

/* The service picker used to force a smaller placeholder by ID. */
body.panel-inputs #serviceSearchInput::placeholder { font-size: inherit !important; }