/**
 * Dropdown fields (.ss-main / SlimSelect) – same size as .form-control text inputs.
 * Load last so this wins over admin.css and other styles.
 */
/* Wrapper: full width; overflow visible so SlimSelect dropdown (contentPosition: relative) is not clipped */
html body .control-selectlist,
html body .form-group .control-selectlist {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  overflow: visible !important;
}

/* Dropdown panel: match trigger width; cap HEIGHT so the bottom edge is not too far down */
html body .control-selectlist .ss-content,
html body .form-group .control-selectlist .ss-content {
  box-sizing: border-box !important;
  max-width: 100% !important;
  max-height: 280px !important;
  overflow: hidden !important;
}
/* When dropdown is closed, no visible border/line below trigger (avoids black edge) */
html body .control-selectlist .ss-content:not(.ss-open-below):not(.ss-open-above),
html body .form-group .control-selectlist .ss-content:not(.ss-open-below):not(.ss-open-above) {
  border: none !important;
  box-shadow: none !important;
}
html body .control-selectlist .ss-content .ss-list,
html body .form-group .control-selectlist .ss-content .ss-list {
  max-height: 220px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* Match both 40px (admin.css) and 48px (admin-settings-modern) form fields */
html body .ss-main {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 12px 16px !important;
  line-height: 1.5 !important;
  font-size: 15px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  border: 1px solid #e5e9f2 !important;
  outline: none !important;
  box-shadow: none !important;
}
/* No black edge at bottom: keep same light border when open (override SlimSelect's border-bottom:none) */
html body .ss-main.ss-open-below,
html body .ss-main.ss-open-above {
  border: 1px solid #e5e9f2 !important;
  outline: none !important;
  box-shadow: none !important;
}
html body .ss-main:focus,
html body .ss-main:focus-visible,
html body .ss-main:focus-within {
  outline: none !important;
  box-shadow: none !important;
  border-color: #e5e9f2 !important;
}

html body .ss-main .ss-values {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  align-items: center !important;
}

html body .ss-main .ss-values .ss-single,
html body .ss-main .ss-values .ss-placeholder {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
  font-size: 15px !important;
  align-items: center !important;
  width: 100% !important;
}

/* Permalink: ONE border on the wrapper only – left and right are the same by definition */
html body .field-permalink .input-group,
html body .form-group .field-permalink .input-group {
  display: flex !important;
  align-items: stretch !important;
  min-height: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  outline: none !important;
  border: 1px solid #e5e9f2 !important;
  box-shadow: none !important;
}
html body .field-permalink .input-group:focus-within,
html body .form-group .field-permalink .input-group:focus-within {
  border-color: #364a63 !important;
  box-shadow: 0 0 0 4px rgba(54, 74, 99, 0.1) !important;
}

/* Span: no outer border, only divider line on the right */
html body .field-permalink .input-group-text,
html body .field-permalink .input-group .input-group-text,
html body .form-group .field-permalink .input-group-text,
html body .form-group .field-permalink .input-group .input-group-text {
  height: 48px !important;
  min-height: 48px !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  display: flex !important;
  align-items: center !important;
  border: none !important;
  border-right: 1px solid #e5e9f2 !important;
  border-radius: 0 !important;
  background: #f8f9fa !important;
  color: #1f2937 !important;
  outline: none !important;
  box-shadow: none !important;
}
html body .field-permalink .input-group:focus-within .input-group-text,
html body .form-group .field-permalink .input-group:focus-within .input-group-text {
  border-right-color: #364a63 !important;
}

/* Input: no border at all – wrapper is the only frame */
#input-slug,
#input-slug.form-control,
html body .field-permalink .input-group input.form-control,
html body .field-permalink .input-group .form-control,
html body .form-group .field-permalink .input-group input.form-control,
html body .form-group .field-permalink .input-group .form-control {
  height: 48px !important;
  min-height: 48px !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  border: none !important;
  border-radius: 0 !important;
  flex: 1 !important;
  min-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
#input-slug:focus,
#input-slug.form-control:focus,
html body .field-permalink .input-group input.form-control:focus,
html body .field-permalink .input-group .form-control:focus,
html body .form-group .field-permalink .input-group input.form-control:focus,
html body .form-group .field-permalink .input-group .form-control:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
