/* === Scoped Bootstrap 5 Compatibility Fix === */
.headerindex {
  position: relative;
  z-index: 2;
}

/* Fix Bootstrap 5 .row > * overrides specifically for the card column */
.headerindex .row > .col-lg-5,
.headerindex .row > .col-md-5 {
  flex-shrink: 1 !important;
  
   
}

/* Center column and fix width */
.headerindex .row {
  justify-content: center !important;
  align-items: flex-start !important;
}

.headerindex .col-lg-5,
.headerindex .col-md-5 {
  flex: 0 0 auto !important;
  width: 34.6667% !important;
  max-width: 41.6667% !important;
  
}

/* === LOGIN CARD STYLING === */
.headerindex .card {
  padding: 9px 10px !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
  transition: all 0.3s ease;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Fix card body to prevent overflow */
.headerindex .card .body {
  padding: 1.25rem !important;
  box-sizing: border-box !important;
}

/* Fix internal elements */
.headerindex .card input,
.headerindex .card button {
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Fix input groups */
.headerindex .card .input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

.headerindex .card .form-line {
  flex: 1 1 auto !important;
  width: 1% !important;
}

/* === Responsive Adjustments === */
@media (max-width: 992px) {
  .headerindex .col-lg-5,
  .headerindex .col-md-5 {
    width: 100% !important;
    max-width: 100% !important;
  }

 .headerindex .row > .col-lg-5,
.headerindex .row > .col-md-5 {
 
  
    /*width: auto !important;*/
  max-width: none !important;
}

  .headerindex .card {
    margin-top: 30px !important;
  }
}

@media (max-width: 1200px) { 
.headerindex .col-lg-5, .headerindex .col-md-5 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 41.6667% !important;
}
}

/* === FIX FOR BADGE "NEW" === */
.headerindex .card .badge {
  width: auto !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  padding: 0.25rem 0.75rem !important;
  font-size: 0.75rem !important;
  white-space: nowrap !important;
}

.headerindex .card .badge-pink {
  background-color: #D6487E !important;
  color: white !important;
  border-radius: 15px !important;
}

/* Fix the row containing the badge */
.headerindex .card .row {
  position: relative !important;
}

/* Position badge at the right */
.headerindex .card .badge {
  position: absolute !important;
  right: 7px !important;
  top: 0px !important;
  z-index: 10 !important;
}

/* Adjust spacing for the links next to badges */
.headerindex .card .row .col-lg-12,
.headerindex .card .row .col-md-12,
.headerindex .card .row .col-sm-12 {
  width: 100% !important;
  padding-right: 50px !important; /* Make room for the badge */
}
/* RTL - badge on left - Fixed selectors */
.headerindex .card .row[dir="rtl"] .badge {
  right: auto !important;
  left: 7px !important;
}

/* Adjust padding for RTL - Fixed selectors */
.headerindex .card .row[dir="rtl"] .col-lg-12,
.headerindex .card .row[dir="rtl"] .col-md-12,
.headerindex .card .row[dir="rtl"] .col-sm-12 {
  padding-right: 0.75rem !important;
  padding-left: 50px !important;
}