@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");
:root {
  --themeprimaryclr: #3611c9;
  --dark-primary: #1F134B;
  --themesecondaryclr: #FB3D3B;
  --plainclr: #fff;
  --darkclr: #000;
  --themehoverclr: #ffed3b;
  --bs-table-color: #cdcdcd;
  --header-bg: #435050;
  --text-color: #696969;
  --card1-color: #439300;
  --card2-color: #003B62;
  --card3-color: #660095;
  --card4-color: #9E5400;
  --card5-color: #0014A2;
  --card6-color: #A70000;
  --card7-color: #007474;
  --card8-color: #FB302E;
  --card9-color: #E8A000;
  --card10-color: #483C92;
  --card11-color: #528BC9;
  --table-color1: #00AC06;
  --table-color2: #F43D3E;
  --disable-btn-clr: #DEDEDE;
  --color1: #555555;
  --color2: #D9D9D9;
  --color3: #444444;
  --color4: #059005;
  --color5: #00000099;
  --stars-color: #FABB05;
  --open-now-color: #00AE14;
  --text-color1: #777777;
  --text-color2: #c9c9c9;
  --text-color3: #717171;
  --text-color4: #373737;
  --text-color5: #8D8D8D;
  --text-color6: #333333;
  --text-color7: #7C7C7C;
  --text-color8: #00000080;
  --text-color9: #000000CC;
  --text-color10: #00000066;
  --text-color11: #00A651;
  --text-color12: #EE3131;
  --text-color13: #387ABE;
  --text-color14: #223142;
  --light-bg: #f1f1f1;
  --light-primary-bg: #E6F5FF;
  --dark-shadow: #D9D9D9;
  --card1-bg: #EEFFE0;
  --card2-bg: #E6F5FF;
  --card3-bg: #F9ECFF;
  --card4-bg: #FFF7EE;
  --card5-bg: #EFF1FF;
  --card6-bg: #FFEEEE;
  --card7-bg: #E3FFFF;
  --card8-bg: #F6DFDF;
  --card9-bg: #FFEFCA;
  --card10-bg: #DFF6F6;
  --card11-bg: #EDDFF6;
  --card12-bg: #F6DFE0;
  --card13-bg: #DFF6EE;
  --bg-color1: #F9F9F9;
  --bg-color2: #EADEFF;
  --bg-color3: #FFFCB0;
  --bg-color4: #DBFFD8;
  --bg-color5: #FFD9DB;
  --bg-color6: #FFEFD7;
  --bg-color7: #DBFFDD;
  --bg-color8: #E5FFE6;
  --bg-color9: #FFEEC2;
  --bg-color10: #BAFFFF;
  --bg-color11: #F3F3F3;
  --bg-color12: #FBFBFB;
  --bg-color13: #EDFEFF;
  --bg-color14: #FFE1E0;
  --bg-color15: #f8d7da;
  --bg-color16: #F7FFF6;
  --bg-color17: #daffe8;
  --bg-color18: #f2f2f2cc;
  --bg-color19: #e5f9ff;
  --bg-color20: #ECF7FF;
  --bg-color21: #ffdada;
  --bg-color22: #ddd;
  --bg-color23: #FFECEC;
  --bg-color24: #f0f8ff;
  --table-bg-clr: #FFF2F2;
  --gray-bg1: #EEEEEE;
  --footer-bg: #372B6F;
  --tab1-bg: #FFEDD8;
  --tab2-bg: #E8FFEC;
  --circle1-bg: #FFFFFF1F;
  --circle2-bg: #FFF9F921;
  --bread-bg: #F6F6F6;
  --light-pink-bg: #FFE5E5;
  --table-border1: #D2D2D2;
  --gray-border: gray;
  --border-color2: #D9D9D9;
  --border-color3: #0000001A;
  --border-color4: #00000010;
  --border-color5: #00000033;
  --border-color6: #ABABAB;
  --border-color7: #EBEBEB;
  --border-color8: #0000000D;
  --border-color9: #ccc;
  --shadow1: #00000040;
  --shadow2: #DBDBDB40;
  --bottom-btn-bg1: #201169;
  --bottom-btn-bg2: #e20200;
  --primary-font: "Plus Jakarta Sans", serif;
}

.appointment-card {
  margin: auto;
  background: var(--plainclr);
  border-radius: 20px;
  padding: 30px;
  margin-top: 25px;
  box-shadow: 0 12px 40px var(--shadow1);
}
.appointment-card h3 {
  text-align: center;
  margin-bottom: 25px;
  color: var(--text-color6);
}
.appointment-card .date-slider-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
}
.appointment-card .date-slider-container .date-btn {
  cursor: pointer;
  flex: 0 0 auto;
  text-align: center;
  min-width: 50px;
  padding: 10px;
  margin: 0 5px;
  border-radius: 14px;
  background: var(--gray-bg1);
  transition: all 0.3s;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-weight: 500;
}
.appointment-card .date-slider-container .date-btn.selected {
  background: var(--themeprimaryclr);
  color: var(--plainclr);
  font-weight: 600;
  box-shadow: 0 4px 12px var(--shadow1);
}
.appointment-card .date-slider-container .slider-nav {
  cursor: pointer;
  font-size: 22px;
  padding: 0 10px;
  color: var(--themeprimaryclr);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.appointment-card .date-slider-container .date-slider {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.appointment-card .date-slider-container .date-slider::-webkit-scrollbar {
  display: none;
}
.appointment-card .slot-scroll {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
  padding: 0px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.appointment-card .slot-scroll::-webkit-scrollbar {
  display: none;
}
.appointment-card .slot-scroll .slot-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 16px;
  font-weight: 500;
  transition: all 0.3s;
  padding: 12px 18px;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 2px 6px var(--shadow2);
  text-align: center;
}
.appointment-card .slot-scroll .slot-btn i {
  font-size: 1rem;
}
.appointment-card .slot-scroll .slot-btn.slot-available {
  background-color: var(--table-color1);
  color: var(--plainclr);
}
.appointment-card .slot-scroll .slot-btn.slot-available:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 14px var(--shadow1);
}
.appointment-card .slot-scroll .slot-btn.slot-booked {
  background-color: var(--table-color2);
  color: var(--plainclr);
  pointer-events: none;
  opacity: 0.6;
}
.appointment-card .slot-scroll .slot-btn.slot-selected {
  background: linear-gradient(45deg, var(--themeprimaryclr), var(--card3-color));
  color: var(--plainclr);
  box-shadow: 0 6px 16px var(--shadow1);
  transform: scale(1.1);
  font-weight: 600;
}
.appointment-card .selected-summary {
  margin-top: 30px;
  background: var(--light-primary-bg);
  padding: 20px;
  border-radius: 16px;
  text-align: center;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--themeprimaryclr);
  box-shadow: inset 0 2px 6px var(--shadow2);
}

/* Tablet / iPad */
@media (min-width: 768px) and (max-width: 1024px) {
  .appointment-card .date-slider-container .date-slider {
    grid-template-columns: repeat(4, 1fr);
  }
  .appointment-card .slot-scroll {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }
  .appointment-card .selected-summary {
    font-size: 1rem;
    padding: 16px;
  }
}
/* Mobile */
@media (max-width: 767px) {
  .appointment-card {
    padding: 20px;
    border-radius: 14px;
  }
  .appointment-card .date-slider-container .date-slider {
    grid-template-columns: repeat(2, 1fr);
  }
  .appointment-card .slot-scroll {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
  .appointment-card .selected-summary {
    font-size: 0.9rem;
    padding: 14px;
  }
}/*# sourceMappingURL=appointment-timingDesign5.css.map */