/**
 * @file
 * Styles for search form block.
 */

/* Search Form Block Container */
.block-search-form-block,
.block-egrbs5-search-form {
  margin: 1rem 0;
  padding: 0.5rem 0;
}

/* Search Form Styling */
.search-block-form,
.search-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

/* Search Input Field */
.search-block-form .form-search,
.search-form .form-search,
.form-search {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  max-width: 200px;
  position: relative;
  z-index: 1;
}

/* Search Input Focus State */
.search-block-form .form-search:focus,
.search-form .form-search:focus,
.form-search:focus {
  color: #495057;
  background-color: #fff;
  border-color: #18453b;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(24, 69, 59, 0.25);
}

/* Search Submit Button */
.search-block-form .form-submit,
.search-form .form-submit,
.search-form .form-actions .form-submit {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  color: #fff;
  background-color: #18453b;
  border-color: #18453b;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
}

/* Search Submit Button Hover */
.search-block-form .form-submit:hover,
.search-form .form-submit:hover {
  color: #fff;
  background-color: #0f2a1f;
  border-color: #0f2a1f;
}

/* Search Submit Button Focus */
.search-block-form .form-submit:focus,
.search-form .form-submit:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(24, 69, 59, 0.5);
}

/* Remove form-actions margin */
.search-block-form .form-actions,
.search-form .form-actions {
  margin: 0;
  display: inline-block;
}

/* Container inline adjustments */
.container-inline .form-actions,
.container-inline .form-item {
  display: inline-block;
  margin: 0;
}

/* Header search box specific styling */
#dept-header .block-search-form-block,
#dept-header .block-egrbs5-search-form,
.region-searchbox .search-block-form {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 1rem 0;
}

#dept-header .search-block-form,
#dept-header .search-form {
  margin: 0;
}

/* Region searchbox specific styling */
.region-searchbox {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0.5rem 0;
}

.region-searchbox .search-block-form {
  width: 100%;
  max-width: 300px;
}

.region-searchbox #search-block-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.region-searchbox .form-item-keys {
  flex: 1;
  margin: 0;
}

.region-searchbox .form-search {
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  transition: all 0.3s ease;
  background-color: #fff;
}

.region-searchbox .form-search:focus {
  border-color: #18453b;
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(24, 69, 59, 0.15);
}

.region-searchbox .form-actions {
  margin: 0;
  flex-shrink: 0;
}

.region-searchbox .btn-msu {
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  background-color: #18453b;
  border-color: #18453b;
  color: #fff;
  border-radius: 0.375rem;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.region-searchbox .btn-msu:hover {
  background-color: #0f2a1f;
  border-color: #0f2a1f;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.region-searchbox .btn-msu:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Search form on search results page */
.search-page-form {
  padding: 2rem 0;
  margin: 1.5rem 0;
}

/* Main content area search forms */
main .block-search-form-block,
main .block-egrbs5-search-form,
.region-content .block-search-form-block,
.region-content .block-egrbs5-search-form {
  margin: 1.5rem 0;
  padding: 1rem 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .search-block-form .form-search,
  .search-form .form-search {
    max-width: 150px;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }
  
  .search-block-form .form-submit,
  .search-form .form-submit {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }
  
  /* Region searchbox on mobile */
  .region-searchbox {
    padding: 0.5rem 0;
  }
  
  .region-searchbox .search-block-form {
    max-width: 100%;
  }
  
  .region-searchbox .form-search {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }
  
  .region-searchbox .btn-msu {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
}

/* Search page form specific styles */
.search-page-form .search-block-form,
.search-page-form .search-form {
  max-width: 100%;
}

.search-page-form .form-search {
  max-width: none;
  width: 100%;
}

/* Fix for disappearing search button */
.search-block-form .form-submit,
.search-form .form-submit,
.search-form .btn-msu,
input[type="submit"].btn-msu {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Ensure button stays visible during form states */
.search-block-form.loading .form-submit,
.search-form.loading .form-submit,
.form-item-keys:focus-within ~ .form-actions .form-submit,
.form-search:focus ~ .form-actions .form-submit {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Button styles for btn-msu class */
.btn-msu {
  background-color: #18453b;
  color: #fff;
  border-color: #18453b;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  cursor: pointer;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  transition: all 0.15s ease-in-out;
}

.btn-msu:hover {
  background-color: #0f2a1f;
  border-color: #0f2a1f;
  color: #fff;
}

.btn-msu:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(24, 69, 59, 0.5);
}

/* Prevent any JavaScript from hiding the button */
#edit-submit-search-block-form {
  display: inline-block !important;
  visibility: visible !important;
}

/* Fix for form structure and z-index issues */
.form-item-keys {
  position: relative;
  z-index: 1;
  display: inline-block;
}

.form-item-keys .form-search {
  position: relative;
  z-index: 1;
}

/* Ensure form actions stay on top */
.search-block-form .form-actions,
.search-form .form-actions {
  position: relative;
  z-index: 20 !important;
  display: inline-block !important;
  margin-left: 0.5rem;
}

/* Fix for overlapping issues */
.search-block-form {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.search-block-form > * {
  flex-shrink: 0;
}

/* Specific fix for the search button positioning */
.search-block-form .form-submit,
#edit-submit-search-block-form {
  position: relative !important;
  z-index: 100 !important;
  margin-left: 0.5rem;
  flex-shrink: 0;
}

/* Ensure the input takes full available width */
.search-block-form input[type="search"],
.search-block-form input[type="text"] {
  width: 100% !important;
  max-width: 100% !important;
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
}

/* Bootstrap Icon Search Button Styles */
.search-input-group,
.search-input-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  position: relative;
}

.search-input-group .search-input,
.search-input-wrapper .search-input {
  border-radius: 0.375rem 0 0 0.375rem;
  border-right: none;
  flex: 1;
  min-width: 200px;
}

.search-input-group .search-icon-btn,
.search-input-wrapper .search-icon-btn {
  padding: 0.5rem 1rem;
  border-radius: 0 0.375rem 0.375rem 0;
  border: 1px solid #18453b;
  background-color: #18453b;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  min-width: 44px;
  height: 100%;
  margin: 0;
}

.search-input-group .search-icon-btn:hover,
.search-input-wrapper .search-icon-btn:hover {
  background-color: #0f2a1f;
  border-color: #0f2a1f;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-input-group .search-icon-btn:active,
.search-input-wrapper .search-icon-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.search-input-group .search-icon-btn:focus,
.search-input-wrapper .search-icon-btn:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(24, 69, 59, 0.25);
}

.search-input-group .search-icon-btn i,
.search-input-wrapper .search-icon-btn i {
  font-size: 1rem;
  line-height: 1;
}

/* Alternative inline style for region-searchbox */
.region-searchbox .search-input-wrapper {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.region-searchbox .search-input-wrapper .form-search,
.region-searchbox .search-input-wrapper .search-input {
  border-radius: 0.375rem 0 0 0.375rem;
  border-right: none;
  flex: 1;
  height: 48px; /* Match button height */
  padding: 12px 16px;
  font-size: 0.875rem;
  line-height: 1.5;
}

.region-searchbox .search-input-wrapper .form-search:focus,
.region-searchbox .search-input-wrapper .search-input:focus {
  z-index: 2;
  box-shadow: 0 0 0 0.2rem rgba(24, 69, 59, 0.15);
}

.region-searchbox .search-input-wrapper .btn-msu,
.region-searchbox .search-input-wrapper .search-icon-btn {
  border-radius: 0 0.375rem 0.375rem 0;
  padding: 12px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  flex-shrink: 0;
  border: 1px solid #18453b;
  border-left: none;
}

.region-searchbox .search-input-wrapper .btn-msu i,
.region-searchbox .search-input-wrapper .search-icon-btn i {
  font-size: 1.125rem;
  line-height: 1;
}

/* Hide the original form actions when wrapper is used */
.region-searchbox .search-input-wrapper + .form-actions {
  display: none !important;
}

/* Hide original form elements when search is enhanced */
.search-form-enhanced .form-item-keys[style*="display: none"],
.search-form-enhanced .form-actions[style*="display: none"] {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Icon-only button style */
.btn-icon-only {
  min-width: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.btn-icon-only i {
  font-size: 1.125rem;
  line-height: 1;
}

/* Override padding for search icon button specifically */
.search-input-wrapper .btn-icon-only {
  padding: 12px !important;
}

/* Ensure proper alignment in search wrapper */
.search-form-enhanced .search-input-wrapper {
  display: inline-flex;
  align-items: stretch;
  position: relative;
  width: 100%;
  max-width: 350px;
}

.search-form-enhanced .search-input-wrapper .form-search,
.search-form-enhanced .search-input-wrapper .search-input {
  flex: 1;
  border-radius: 0.375rem 0 0 0.375rem !important;
  border-right: none !important;
  height: 48px; /* Match button height */
  padding: 12px 16px;
  font-size: 0.875rem;
  line-height: 1.5;
}

.search-form-enhanced .search-input-wrapper .btn-msu,
.search-form-enhanced .search-input-wrapper .search-icon-btn {
  border-radius: 0 0.375rem 0.375rem 0 !important;
  margin: 0 !important;
  border-left: none;
  padding: 12px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Search form group wrapper */
.search-form-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  gap: 0 !important; /* Ensure no gap between elements */
  position: relative;
  flex-wrap: nowrap; /* Prevent wrapping */
  font-size: 0; /* Remove inline-block gaps */
}

/* Reset font size for children */
.search-form-group > * {
  font-size: 0.875rem;
}

/* Force direct children to be inline */
.search-form-group > div {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
}

/* Ensure no gap between form items */
.search-form-group > div:first-child {
  margin-right: -1px !important; /* Overlap borders */
  padding-right: 0 !important;
}

.search-form-group .form-item-keys {
  padding-right: 0 !important;
  overflow: hidden; /* Hide any overflow content */
}

/* Target the specific form-item structure */
.search-form-group .form-item.form-item-keys {
  display: flex !important;
  align-items: center;
}

.search-form-group .form-item.form-item-keys > * {
  flex-shrink: 0;
}

/* Ensure label doesn't take space */
.search-form-group .form-item label {
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove margin from the specific form item with all classes */
.search-form-group .js-form-item.form-item.js-form-type-search.form-type-search.js-form-item-keys.form-item-keys.form-no-label {
  margin-right: 0 !important;
  margin: 0 !important;
  padding-right: 0 !important;
  padding: 0 !important;
}

.search-form-group .form-item-keys {
  flex: 1;
  margin: 0;
  display: flex; /* Make this flex too */
  align-items: stretch;
  padding: 0;
}

/* Specific fix for the form-item wrapper */
.search-form-group .form-item.form-type-search {
  width: 100%;
}

.search-form-group .form-search {
  border-radius: 0.375rem 0 0 0.375rem !important;
  border-right: none !important;
  height: 48px;
  padding: 12px 16px;
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  box-sizing: border-box;
  margin: 0 !important;
  margin-right: 0 !important;
}

.search-form-group .form-search:focus {
  color: #495057;
  background-color: #fff;
  border-color: #18453b;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(24, 69, 59, 0.15);
  z-index: 2;
}

.search-form-group .form-actions {
  margin: 0;
  padding: 0;
  display: flex; /* Ensure form actions is flex */
  align-items: stretch;
  flex-shrink: 0;
}

/* Target the specific form actions ID */
.search-form-group #form-actions-search-block-form {
  margin: 0 !important;
  padding: 0 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.search-form-group .btn-msu,
.search-form-group input[type="submit"].btn-msu,
.region-searchbox .search-form-group input[type="submit"] {
  border-radius: 0 0.375rem 0.375rem 0 !important;
  height: 48px !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  padding: 12px !important;
  position: relative !important;
  overflow: visible !important; /* Allow pseudo-elements to show */
  text-indent: -9999px; /* Hide text */
  font-size: 0; /* Hide text but keep pseudo-elements */
  background-color: #18453b !important;
  background-image: none !important; /* Override SVG background */
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: 1px solid #18453b !important;
  border-left: 1px solid #18453b !important;
  color: #fff !important;
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline-block !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  margin-left: -1px !important; /* Overlap with input border */
  flex-shrink: 0;
  box-sizing: border-box !important;
  vertical-align: top !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
}

/* Add icon using pseudo-element */
.search-form-group .btn-msu::before,
.search-form-icon-enhanced .btn-msu::before,
.search-form-group input[type="submit"].btn-msu::before,
#search-block-form .btn-msu::before,
.region-searchbox .search-form-group .btn-msu::before {
  content: "\F52A"; /* Bootstrap Icons search icon */
  font-family: "bootstrap-icons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  font-size: 1.125rem;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  text-indent: 0 !important;
  display: block !important;
  line-height: 1;
  color: #ffffff !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: 1 !important;
  z-index: 100 !important;
  visibility: visible !important;
  width: auto !important;
  height: auto !important;
}

/* Force white color with high specificity */
.search-form-icon-enhanced .search-form-group .btn-msu::before,
.search-form-icon-enhanced .search-form-group input.btn-msu::before,
form#search-block-form .search-form-group .btn-msu::before {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Ensure the button remains clickable */
.search-form-group .btn-msu[type="submit"] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Make sure the icon inherits color properly */
.search-form-group .btn-msu,
.search-form-icon-enhanced .btn-msu {
  color: #ffffff !important;
}

/* Additional specificity for white icon */
.search-form-icon-enhanced .search-form-group input[type="submit"]::before {
  color: #ffffff !important;
}

/* Fix button box model */
.search-form-group .btn-msu,
.search-form-group .form-search {
  box-sizing: border-box;
}

/* Focus and hover states */
.search-form-group .btn-msu:hover {
  background-color: #0f2a1f;
  border-color: #0f2a1f;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-form-group .btn-msu:hover::before {
  color: #ffffff !important;
}

.search-form-group .btn-msu:active {
  transform: translateY(0);
  box-shadow: none;
}

.search-form-group .btn-msu:active::before {
  color: #ffffff !important;
}

.search-form-group .btn-msu:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(24, 69, 59, 0.25);
  z-index: 3;
}

.search-form-group .btn-msu:focus::before {
  color: #ffffff !important;
}

/* Ensure Bootstrap Icons font is loaded */
@import url("../vendor/bootstrap-icons/bootstrap-icons.css");

/* Alternative: Add icon as inner element */
.search-form-group .btn-msu::after {
  content: "\F52A"; /* Bootstrap Icons search icon */
  font-family: "bootstrap-icons" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 1.125rem !important;
  color: #ffffff !important;
  text-indent: 0 !important;
  z-index: 200 !important;
  display: block !important;
}

/* Remove any inherited text color that might affect the icon */
.search-form-group .btn-msu {
  color: transparent !important;
}

/* Simple approach: make the button use the bootstrap-icons font directly */
.search-form-group .btn-msu,
.search-form-group input[type="submit"].btn-msu {
  font-family: "bootstrap-icons" !important;
  text-indent: 0 !important;
  font-size: 1.125rem !important;
  line-height: 1 !important;
}

/* Replace the button value with the icon */
.search-form-group input[type="submit"].btn-msu {
  color: #ffffff !important;
}

/* Use JavaScript to set the value, or use CSS content */
.search-form-group .btn-msu::after {
  content: "\f52a" !important;
  font-family: "bootstrap-icons" !important;
  color: #ffffff !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 1.125rem !important;
  text-indent: 0 !important;
}

/* Target the specific button ID */
#edit-submit-search-block-form::before {
  color: #ffffff !important;
  filter: brightness(0) invert(1) !important;
}

/* Override any background image on the button */
.region-searchbox .search-form input[type=submit],
.region-searchbox .search-block-form input[type=submit],
.region-searchbox .form-submit,
.search-form-group .btn-msu,
.search-form-group input[type="submit"] {
  background-image: none !important;
}

/* Ensure our pseudo-element icon takes precedence */
.search-form-group .btn-msu::before,
.region-searchbox .search-form-group .btn-msu::before,
.region-searchbox .search-form-group input[type="submit"]::before {
  z-index: 10 !important;
  color: #ffffff !important;
}

/* Fix for inline alignment */
.search-form-group > * {
  vertical-align: middle;
}

/* Remove any default margins/padding that might cause misalignment */
.search-form-group input[type="search"] {
  margin: 0;
  vertical-align: middle;
}

.search-form-group input[type="submit"] {
  margin: 0;
  vertical-align: middle;
}

/* Handle the label element */
.search-form-group .visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
  word-wrap: normal;
}

/* Ensure form items don't break the layout */
.search-form-group .form-item {
  display: flex;
  flex: 1;
  margin: 0;
  padding: 0;
  white-space: nowrap; /* Prevent text wrapping */
}

/* Remove any text nodes or whitespace after input */
.search-form-group .form-item-keys::after {
  display: none !important;
}

/* Ensure the input takes full width of its container */
.search-form-group .form-item-keys input {
  flex: 1;
}

/* Hide any text content in form-item */
.search-form-group .form-item {
  font-size: 0 !important;
}

.search-form-group .form-item input {
  font-size: 0.875rem !important;
}

/* Fix the form wrapper alignment */
.search-form-group .form-wrapper,
.search-form-group .js-form-wrapper {
  display: flex;
  margin: 0;
  padding: 0;
}

/* Region searchbox specific styles */
.region-searchbox .search-form-group {
  max-width: 100%;
  justify-content: center;
  margin: 0 auto;
}

.region-searchbox .search-form-icon-enhanced {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Center the searchbox region in its column */
.col .region-searchbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 1rem 0;
  min-height: 80px; /* Ensure minimum height */
}

/* Ensure the search block itself is centered */
.region-searchbox .block-search {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 600px; /* Limit max width for better appearance */
  display: flex;
  justify-content: center;
}

/* Center the form within the block */
.region-searchbox .search-block-form {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Responsive adjustments for icon button */
@media (max-width: 768px) {
  .search-input-group .search-icon-btn,
  .search-input-wrapper .btn-icon-only {
    padding: 0.5rem 0.75rem;
    min-width: 40px;
  }
  
  .search-input-group .search-icon-btn i,
  .search-input-wrapper .btn-icon-only i {
    font-size: 0.875rem;
  }
  
  .search-form-enhanced .search-input-wrapper {
    max-width: 100%;
  }
  
  .search-form-group {
    max-width: 100%;
  }
  
  .search-form-group .btn-msu {
    min-width: 44px;
  }
}