/* ============================================================
   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);
}