/*--------------- Start Navbar Section --------------- */
.purple-rectangle{
   background: linear-gradient(#7729FD,#5D36F9);
   width: 3rem;
   height: 3rem;
}

.btn-style {
  padding: 10px 18px;
  background: linear-gradient(90deg, #7F22FE, #4f46e5);
  border: none;
  transition: all 0.25s ease;
}

.btn-style:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(127, 34, 254, 0.35);
}

.icon-hover {
  color: #6b7280;
  padding: 10px;
  transition: all 0.2s ease;
}

.icon-hover:hover {
  background-color: #F3F4F6;
  color: #364153;
}

.image-style{
width: 40px;
height: 40px;
}

.image2-style {
  width: 35px;
  height: 35px;
}
/*--------------- End Navbar Section --------------- */




/*--------------- Start main-content Section --------------- */

/*--------------- Start quick-stats Section ---------------*/
  .card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.12) !important;
}

  .bluestyle{
      width:50px;
      height:50px;
     background: linear-gradient(to bottom right, #4293FF, #216EFE);
    
  }

  .orangestyle{
    width:50px; 
    height:50px; 
    background: linear-gradient(to bottom right, #FFA800, #FF7F00);
  }

  .redstyle{
    width:50px; 
    height:50px; 
    background: linear-gradient(to bottom right, #FA1749, #ED0025);
  }
/*--------------- End quick-stats Section ---------------*/




/*--------------- Start contacts-header Section ---------------*/
.input-style:focus {
  background: #fff !important;
  border-color: #8E51FF !important;
  box-shadow: 0 0 0 3px rgba(142, 81, 255, 0.2) !important;
  outline: none !important;
}
/*--------------- End contacts-header Section ---------------*/



/*--------------- Start contacts-grid Section ---------------*/
.iconstyle{
  width:80px;
   height:80px; 
   background-color:#F3F4F6;
   color: #D1D5DC;
}
/*--------------- End contacts-grid Section ---------------*/



/*--------------- Start favorites Section ---------------*/
.yellowbg{
  background-color: #FFF7EC;
}
.fontstyle{
  font-size: 0.8rem;
}
/*--------------- End favorites Section ---------------*/



/*--------------- Start emergency-contacts Section---------------*/
.red-style{
  background-color: #FEF2F2;
}
/*--------------- End emergency-contacts Section---------------*/



/*---------------Start Modal --------------- */
.greybg{
  background-color: #F3F4F6;
}

.greybg:hover{
  background-color: #E5E7EB;
}

.input-style2{
 background: #F9FAFB !important;
}

.bluestyle2{
  width:96px;
  height:96px;
  background: linear-gradient(to bottom right, #4293FF, #216EFE);
}
/*---------------End Modal --------------- */




/*--------------- Start contactsList  ---------------*/
.contact-card {
  transition: all 0.3s ease;
}

.contact-card:hover {
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.12) !important;
}

.avatar-gradient {
  width: 56px;
  height: 56px;
}

.fav-badge {
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  background: #fbbf24;
  border: 2px solid #fff;
  font-size: 10px;
}

.fav-badge2 {
  bottom: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  background: #FF2056;
  border: 2px solid #fff;
  font-size: 10px;
}

.pinkstyle{
  background-color: #FFF1F2;
  color: #FF2056;
  font-size: 12px;
}

.action-btn {
  border: transparent;
  background-color: #F8F9FA;
  width: 50px;         
  height: 45px;          
  border-radius: 12px;   
}

.action-btn i {
  width: 48px;           
  height: 42px;         
  border-radius: 12px;   
}

.action-btn .fa-star:hover {
  color: #FDC329;
  background-color: #F3F4F6;
}

.action-btn .fa-heart-pulse:hover {
  color: #FF2056;
  background-color: #F3F4F6;
}

.action-btn .fa-pen:hover {
  color: #4F39F6;
  background-color: #EEF2FF;
}

.action-btn .fa-trash:hover {
  color: #EC003F;
  background-color: #FFF1F2;
}

.action-btn.active .fa-star {
    background-color: #FEF3C6 !important;
}

.action-btn.active .fa-heart-pulse {
    background-color: #FFE4E6 !important;
}

.action-btn.active .fa-star {
    color: #FFB900 !important;
}

.action-btn.active .fa-heart-pulse {
    color: #FF2056!important;
}

.fav-item:hover {
  background-color: #FFFBEB !important; 
  transition: 0.3s ease;
}

.fav-item a {
  transition: 0.3s ease;
}

.fav-item:hover a {
  background-color: #00BC7D !important; 
  color: #fff !important;
}

.emergency-item:hover {
  background-color: #FFF1F2 !important; 
  transition: 0.3s ease;
}

.emergency-item  a {
  transition: 0.3s ease;
}

.emergency-item:hover a {
  background-color: #FF2056 !important; 
  color: #fff !important;
}

.bg-violet-subtle { 
  background: #ede9fe; 
}

.text-violet { 
  color: #7c3aed; 
}

.bg-rose-subtle {
   background: #ffe4e6;
}

.text-rose {
   color: #e11d48; 
}

.icon-box {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 12px;
}

.action-button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.action-button:hover {
  filter: brightness(0.95);
}

.card-footer {
  margin-top: 0 !important; 
}

.yellowhover:hover{
  color:#FFB900;
}
/*--------------- End contactsList  ---------------*/

/*--------------- End main-content Section --------------- */

.swal2-confirm {
  margin-right: 10px; 
}