.mpfs-fitment-box{
  max-width:520px;
  background:#fff;
  padding:24px;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  font-family: inherit;
  position: relative;
  z-index: 1;
}
.mpfs-title{
  margin:0 0 20px;
  font-size:22px;
  font-weight:700;
  line-height:1.3;
  color:#111827;
}
.mpfs-field{
  display:flex;
  align-items:center;
  gap:16px;
  margin:16px 0;
  position:relative;
  z-index: auto;
}
.mpfs-step{
  width:28px;
  height:28px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700;
  background:#ff6a00;
  color:#fff;
  flex:0 0 28px;
  transition: all 0.3s ease;
}
.mpfs-step.mpfs-muted{
  background:#e5e7eb;
  color:#9ca3af;
}

/* Base Select (before Select2 kicks in) */
.mpfs-field > select{
  width:100%;
  height:52px;
  border:1px solid #d1d5db;
  border-radius:8px;
  padding:0 12px;
  font-weight:500;
  font-size:16px;
  color:#374151;
  outline:none;
  transition: all 0.3s ease;
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%></path>%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}
.mpfs-field > select:focus {
  border: 2px solid #ff6a00;
  padding: 0 11px; /* compensate for border */
}
.mpfs-field > select:disabled{
  border-color:#e5e7eb;
  background-color:#f9fafb;
  color:#9ca3af;
  background-image: none;
}

/* Select2 Overrides */
.mpfs-fitment-box .select2-container {
  width: 100% !important;
  flex-grow: 1;
  z-index: 9999 !important;
}
.mpfs-fitment-box .select2-container .select2-selection--single {
  height: 52px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  background-color: #fff;
}
.mpfs-fitment-box .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal;
  color: #374151;
  font-weight: 500;
  font-size: 16px;
  padding-left: 14px;
  padding-right: 32px;
}
.mpfs-fitment-box .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 50px;
  right: 8px;
}
.mpfs-fitment-box .select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: #f9fafb;
  border-color: #e5e7eb;
}
.mpfs-fitment-box .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered {
  color: #9ca3af;
}

/* Select2 Dropdown - Fix z-index */
.select2-container--default .select2-dropdown {
  z-index: 99999 !important;
}
.select2-dropdown {
  z-index: 99999 !important;
}

/* Active field (orange border wrapper class) */
.mpfs-field.is-active .select2-container--default .select2-selection--single,
.mpfs-field.is-active > select {
  border: 2px solid #ff6a00 !important;
}

.mpfs-btn{
  width:100%;
  height:52px;
  margin-top:20px;
  border:none;
  border-radius:8px;
  background:#1a56db;
  color:#fff;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition: background 0.2s ease;
}
.mpfs-btn:hover:not(:disabled) {
  background:#1e40af;
}
.mpfs-btn:disabled{
  opacity:0.6;
  cursor:not-allowed;
}
.mpfs-note{
  margin:16px 0 0;
  font-size:13px;
  color:#6b7280;
  line-height:1.5;
}


/* Fix Select2 dropdown positioning on frontend */
.select2-container--open .select2-dropdown {
  z-index: 999999 !important;
}
.select2-container--open .select2-dropdown--below {
  top: 100% !important;
  margin-top: 4px !important;
}
.select2-container--open .select2-dropdown--above {
  bottom: 100% !important;
  margin-bottom: 4px !important;
}
.mpfs-dropdown {
  z-index: 999999 !important;
}
body .select2-container--default .select2-results__option {
  padding: 8px 12px;
}
