#add-medication-overlay {
  width: 402px;
  height: 874px;
  margin: 20px auto;
  overflow: hidden;
  position: absolute; 
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  border-radius: 25px;
  z-index: 1000;
  display: none; 
  flex-direction: column;
  opacity: 0; 
  transition: opacity 0.3s ease-in-out; 
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
}


#add-medication-overlay.visible {
  display: flex; 
  opacity: 1;    
}


#add-medication-content {
  background-color: #6349eb;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}


.header-bg {
  background-color: #6349eb; 

  position: relative;
  color: white;
  flex-shrink: 0; 
  border-radius: 25px 25px 0 0; 
  display: flex; 
  flex-direction: row; 
  align-items: center; 
}

.back-button {
  background: none;
  border: none;
  color: white;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  top: 20px;
  left: 15px;
  z-index: 2;
}


.medicine-items-container {
  display: flex;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 20px 0;
  scrollbar-width: none; 
  -ms-overflow-style: none; 
  padding-left: 50%;
  padding-right: 50%;
}

.medicine-items-container::-webkit-scrollbar {
  display: none;
}

.medicine-item {
  flex: 0 0 auto; 
  width: 150px; 
  display: flex;
  justify-content: center;
  align-items: center;
  scroll-snap-align: center;
  transition: transform 0.3s ease;
  margin-bottom: 40px;
  position: relative; 
  z-index: 1;
}


.medicine-shadow {
  position: absolute;
  bottom: 10px;
  left: 60%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  background-image: url('assets/Group.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
}

.color-dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 2;
  overflow-x: auto;
  padding: 10px 0;
  padding-left: calc(50% - 12.5px);
  padding-right: calc(50% - 12.5px);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none; 
  -ms-overflow-style: none; 
}

.color-dots::-webkit-scrollbar { 
  display: none;
}


.dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  flex-shrink: 0; 
  transition: transform 0.3s ease; 
  scroll-snap-align: center; 
  cursor: pointer; 
}


.dot.selected {
  transform: scale(1.4); 
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); 
}

.dot.red { background-color: #ff6b6b; }
.dot.pink { background-color: #ff9e9e; }
.dot.light-pink { background-color: #ffc9c0; }
.dot.yellow { background-color: #fbd46d; }
.dot.green { background-color: #84d4a5; }
.dot.blue { background-color: #73c6e8; }
.dot.purple { background-color: #b19cd9; }


.form-container {
  background-color: #f7f7ff;
  padding: 20px;
  position: relative; 
  
  border-radius: 25px 25px 0px 0; 
  flex-grow: 1;           
  overflow-y: auto;       
  margin-top: 30px;
}

.form-section {
  margin-bottom: 5px;
}

.field-label {
  color: #727272;
  font-size: 14px;
  font-family: Inter;
  font-weight: 600;
  letter-spacing: 1.12px;
  word-wrap: break-word
}





.details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 5px; 
}


.notification-section {
  margin-top: 1px;
  padding-bottom: 10px; 
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0px;
}

.notification-header h2 {
  font-size: 30px;
  color: #6a5acd;
  font-weight: 600;
  margin: 10px;
}

.toggle-switch {
  background-color: #ffffff; 
  width: 60px;
  height: 26px;
  border-radius: 17px;
  padding: 3px;
  display: flex; 
  align-items: center;
  
  cursor: pointer;
  position: relative; 
  transition: background-color 0.3s ease; 
}

.toggle-switch .switch {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: left 0.3s ease;
}


.toggle-switch .switch::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background-color: #6a5acd;
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>');
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  top: 0;
  left: 0;
  z-index: 2;
}


.toggle-switch .switch::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: #ffffff;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}


.toggle-switch.active {
  background-color: #6a5acd; 
}

.toggle-switch.active .switch {
  left: calc(100% - 27px) 
}

.days-selector {
  display: flex;
  
  justify-content: flex-start; 
  gap: 5px;
   
  flex-wrap: nowrap;    
  overflow-x: auto;     
  overflow-y: hidden;   
  padding-bottom: 5px;
}


.day {
  background-color: #ede7f6;
  border-radius: 10px;
  padding: 10px 5px;
  text-align: center;
  font-size: 12px;
  color: #555;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 45px;
   
  flex-shrink: 0; 
}

.day span {
  margin-bottom: 5px;
}

.checkmark {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: white; 
  color: #6a5acd;       
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease, visibility 0s; 
}


.day.selected {
  background-color: white; 
  border-color: #6a5acd;   
  color: #6a5acd;          
  font-weight: 500;
}

.day.selected .checkmark {
  visibility: visible;      
  background-color: #6a5acd;
  color: white;             
}


.add-medication-button {
  display: block;
  width: 60%;
  padding: 15px 0;
  margin: 25px auto 20px auto;
  background-color: #6349eb;
  color: white;
  border: none; 
  border-radius: 30px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: 0 4px 10px rgba(99, 73, 235, 0.3);
}


.add-medication-button:hover {
  background-color: #0056b3;
}



.input-display input {
  flex-grow: 1; 
  border: none; 
  outline: none; 
  background-color: transparent; 
  font-size: inherit; 
  color: inherit; 
  padding: 0 5px; 
  height: 100%; 
  width: 100%; 
  box-sizing: border-box; 
  position: relative; 
  z-index: 1; 
}


.input-display input[type="number"]::-webkit-outer-spin-button,
.input-display input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-display input[type="number"] {
  -moz-appearance: textfield; 
}


.input-display:focus-within {
  border-color: #6a5acd; 
  box-shadow: 0 0 0 2px rgba(106, 90, 205, 0.2); 
}



.input-display {
  background-color: white;
  border-radius: 10px;
  display: flex; 
  align-items: center; 
  border: 1px solid #eee; 
  font-size: 16px;
  color: #333;
  position: relative; 
  padding-left: 45px; 
  min-height: 45px; 
  box-sizing: border-box; 
  transition: border-color 0.2s ease, box-shadow 0.2s ease; 
}


.input-display input {
  border: none;
  outline: none;
  width: 100%;
  height: 100%;
  background: transparent;
  font-size: 16px;
  color: #333;
  padding: 10px 0;
}


.input-display::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}


.icon-pencil::before {
  background-image: url("../assets/mediaction-name.svg");
}


.icon-ruler::before {
  background-image: url("../assets/ruler.svg");
}


.icon-calendar-dots::before {
  background-image: url("../assets/calendar-dots.svg");
}


.icon-pill::before {
  background-image: url("../assets/icon-pill.svg");
}


.icon-calendar-x::before {
  background-image: url("../assets/icon-calendar-x.svg");
}


.input-display:focus-within {
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}