/* ============================================================
   ARTI Registration & Contact Form Styles
   File: public/assets/front/css/registration.css
   ============================================================ */

/* Left Contact Info Sidebar Card */
.contact-sidebar-card {
  background: linear-gradient(135deg, #101c56 0%, #1a2e80 100%) !important;
  color: #ffffff !important;
}

.contact-sidebar-card h4, 
.contact-sidebar-card h6 {
  color: #ffffff !important;
}

.contact-sidebar-card p, 
.contact-sidebar-card span {
  color: #f1f5f9 !important;
}

.contact-icon-box {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.18) !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Submit Button */
.contact-submit-btn {
  background-color: #101c56 !important;
  border-radius: 6px;
  color: #ffffff !important;
}

.contact-submit-btn:hover {
  background-color: #0b143f !important;
  color: #ffffff !important;
}

/* Gender Selection Cards */
.gender-option-card {
  background-color: #f8f9fa;
  border: 1.5px solid #ced4da;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  user-select: none;
}

.gender-option-card:hover {
  border-color: #101c56;
  background-color: #edf2ff;
}

.gender-option-card input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #101c56;
  margin-right: 8px;
  cursor: pointer;
}

.gender-option-card:has(input:checked) {
  border-color: #101c56;
  background-color: #e6edff;
  box-shadow: 0 0 0 2px rgba(16, 28, 86, 0.15);
}

/* Select2 Bootstrap 5 Integration for Dropdowns */
.input-group > .select2-container--default {
  flex: 1 1 auto;
  width: 1% !important;
}

.input-group > .select2-container--default .select2-selection--single {
  height: 42px;
  border: 1px solid #ced4da;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  display: flex;
  align-items: center;
  background-color: #fff;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.input-group > .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 40px;
  padding-left: 12px;
  padding-right: 30px;
  color: #212529;
  font-size: 0.95rem;
}

.input-group > .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px;
  top: 0;
  right: 10px;
  width: 20px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: #101c56;
  box-shadow: 0 0 0 0.2rem rgba(16, 28, 86, 0.15);
}

/* Select2 Dropdown Popup & Search Field (Image 1 Styling) */
.select2-dropdown {
  border: 1.5px solid #101c56 !important;
  border-radius: 0.375rem !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  z-index: 99999 !important;
}

.select2-container--default .select2-search--dropdown {
  padding: 8px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #ced4da !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
  outline: none !important;
  font-size: 0.95rem !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: #101c56 !important;
  box-shadow: 0 0 0 2px rgba(16, 28, 86, 0.2) !important;
}

/* Selected & Hover Options (Dark Blue #101c56) */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background-color: #101c56 !important;
  color: #ffffff !important;
}

.select2-container--default .select2-results__option--selected {
  background-color: #e6edff !important;
  color: #101c56 !important;
  font-weight: 600 !important;
}

.select2-results__option {
  padding: 8px 12px !important;
  font-size: 0.95rem !important;
}

.select2-results__options {
  max-height: 250px !important;
  overflow-y: auto !important;
}

.is-invalid + .select2-container .select2-selection {
  border-color: #dc3545 !important;
}