@import url(https://db.onlinewebfonts.com/c/b0d2255de98a514a438ebfd67e546e1c?family=DELIGHT+Regular);



/*@font-face {*/

/*  font-family: 'Delight';*/

/*  src: url('/frontend/css/fonts/delight-regular.otf') format('opentype');*/

/*  font-weight: 500;*/

/*  font-style: normal;*/

/*}*/

 



.profile-change-input{
  padding: 6px;
  border-radius: 6px;
}

/* Choose File button */
.profile-change-input::file-selector-button{
  background: #6533FF;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
}

/* Hover effect */
.profile-change-input::file-selector-button:hover{
  background: #4a22d6;
}







/* Account Settings Title Area */

.account-header {

  /* padding: 30px 50px 10px 50px; */

  border-bottom: 1px solid #ddd;

}



.account-header h1 {

 margin: 0;
    font-size: 48px;

}

.profile-form-lable {
font-family: Inter;
font-weight: 500;
font-size: 16px;
line-height: 160%;
letter-spacing: -1%;
color: #000;
}

.account-header p {

  margin-top: 6px;

  color: #555;

 font-size: 20px;

  max-width: 600px;

}



/* Layout */

/* .container {

  display: flex;

  padding: 30px 50px;

} */



/* Sidebar */

.sidebar {

  /* width: 250px; */

  border-right: 1px solid #ddd;

  padding-right: 20px;

}



.sidebar ul {

  list-style: none;

  padding: 0;

}



.sidebar li {

  margin: 12px 0;

  padding: 8px 12px;

  border-radius: 6px;

  cursor: pointer;

  color: #4A4A4A;

   font-family: 'DELIGHT Regular', 'DELIGHT', sans-serif;

 }



.sidebar li.active {

  background: #f5f5f5;

  font-weight: bold;

  color: #000000;

}



.sidebar li.delete {

  color: #E45555;

}



/* Main Content */

.content {

  flex: 1;

  /* padding-left: 40px; */

}



h2 {

  margin-top: 0;

}



.toggle {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin: 15px 0;

  font-family: 'DELIGHT Regular', 'DELIGHT', sans-serif;

font-weight: 500;

font-style: Medium;

font-size: 18px;

line-height: 160%;

letter-spacing: 1%;

color: #000000;



}



/* Toggle switch */

.switch {

  position: relative;

  display: inline-block;

  width: 40px;

  height: 20px;

}



.switch input {

  opacity: 0;

  width: 0;

  height: 0;

}



.slider {

  position: absolute;

  cursor: pointer;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: #ccc;

  border-radius: 20px;

  transition: 0.3s;

}



.slider:before {

  position: absolute;

  content: "";

  height: 16px;

  width: 16px;

  left: 2px;

  bottom: 2px;

  background-color: white;

  border-radius: 50%;

  transition: 0.3s;

}



input:checked + .slider {

  background-color: #6533FF;

}



input:checked + .slider:before {

  transform: translateX(20px);

}



/* Footer */

footer {

  margin-top: 50px;

  /* padding: 30px 50px; */

  border-top: 1px solid #ddd;

  display: flex;

  justify-content: space-between;

  font-size: 14px;

  color: #555;

}



.footer-links a {

  display: block;

  margin: 6px 0;

  text-decoration: none;

  color: #000;

}



.social a {

  margin-right: 15px;

  text-decoration: none;

  color: #000;

}

.hit {

    margin-right: 146px;

}

/* img{

    height: 50px;

} */

 

.SM{

height: 20px;

}

/* Modal Overlay */

.modal {

  display: none;

  position: fixed;

  z-index: 1000;

  top: 0; left: 0;

  width: 100%; height: 100%;

  background: rgba(0, 0, 0, 0.5);

  justify-content: center;

  align-items: center;

  font-family: Arial, sans-serif;

}



/* Modal Content Box */

.modal-content {

  background: #fff;

  width: 420px;

  border-radius: 16px;

  box-shadow: 0 4px 20px rgba(0,0,0,0.2);

  overflow: hidden;

  padding: 10px;

}



/* Header */

.modal-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 18px 20px;

  border-bottom: 1px solid #ddd;

}



.modal-header h2 {

  font-size: 16px;

  font-weight: 600;

  margin: 0;

}



.close-btn {

  cursor: pointer;

  font-size: 18px;

  font-weight: bold;

  color: #333;

  border: 1px solid #ccc;

  border-radius: 50%;

  width: 28px;

  height: 28px;

  display: flex;

  align-items: center;

  justify-content: center;

}



/* Payment Option Row */

.payment-option {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 14px 20px;

  border-radius: 8px;

  margin: 20px;

  font-size: 14px;

}



.card-icon {

  font-size: 18px;

}



/* Inputs */

.card-inputs {

  padding: 0 20px 20px;

  border: 1px solid black;

  border-radius: 9px

}



.card-inputs input {

  width: 93%;

  margin-top: 10px;

  padding: 12px;

  border: 1px solid #ccc;

  border-radius: 6px;

  font-size: 14px;

}



/* Actions */

.modal-actions {

  display: flex;

  gap: 10px;

  padding: 15px 20px;

  /* border-top: 1px solid #eee;

  background: #f9f9f9; */

}



.cancel-btn, .confirm-btn {

  flex: 1;

  padding: 12px;

  border: none;

  border-radius: 10px;

  font-size: 14px;

  cursor: pointer;

}



.cancel-btn {

  background: #f2f2f2;

  color: #333;

}



.confirm-btn {

  background: #000;

  color: #fff;

  opacity: 0.5; /* disabled look */

}

/* Logout Modal Specific Styles */

.logout-modal {

  text-align: center;

  padding: 30px 20px;

  width: 500px;

}



.logout-icon {

  font-size: 40px;

  margin-bottom: 15px;

}



.logout-modal h2 {

  font-size: 18px;

  font-weight: 600;

  margin-bottom: 10px;

   font-family: 'DELIGHT Regular', 'DELIGHT', sans-serif;

}



.logout-modal p {

  font-size: 14px;

  color: #555;

  margin-bottom: 20px;

    font-family: "Inter", sans-serif;

}



.logout-btn {

  background: #e74c3c;

  color: #fff;

  border: none;

  flex: 1;

  padding: 12px;

  border-radius: 10px;

  font-size: 14px;

  cursor: pointer;

}



.logout-btn:hover {

  background: #d8432e;

}



/* Delete Account Button */

.delete-btn {

  background: #e74c3c;

  color: #fff;

  border: none;

  flex: 1;

  padding: 12px;

  border-radius: 10px;

  font-size: 14px;

  cursor: pointer;

}



.delete-btn:hover {

  background: #c0392b;

}





.profile-title{

   font-family: 'DELIGHT Regular', 'DELIGHT', sans-serif;

font-weight: 600;

font-style: Semi Bold;

font-size: 1.5rem;

line-height: 160%;

letter-spacing: 1%;

color: #000000;



}