/* Admin Quick Access Burger Menu */
.admin-quick-dropdown {
    display: inline-block;
}

.admin-burger-btn {
    background: #337ab7;
    border: none;
    padding: 10px 12px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: background 0.2s ease;
}

.admin-burger-btn:hover {
    background: #286090;
}

.admin-burger-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(51, 122, 183, 0.5);
}

.admin-burger-btn .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    margin: 3px 0;
    border-radius: 1px;
}

.admin-quick-dropdown .dropdown-menu {
    min-width: 220px;
    margin-top: 5px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    border: 1px solid #ddd;
    border-radius: 4px;
}

.admin-quick-dropdown .dropdown-menu .dropdown-header {
    font-weight: bold;
    color: #337ab7;
    padding: 8px 15px;
    font-size: 11px;
    text-transform: uppercase;
}

.admin-quick-dropdown .dropdown-menu > li > a {
    padding: 10px 20px;
    color: #333;
    font-size: 13px;
}

.admin-quick-dropdown .dropdown-menu > li > a:hover {
    background: #f5f5f5;
    color: #337ab7;
}

.admin-quick-dropdown .dropdown-menu .divider {
    margin: 5px 0;
}
/* End Admin Quick Access Burger Menu */

.toggle-radio .switch {
  position: relative;
  height: 43px;
  text-align: center;
  background: #00bc9c;
  background: #018e76;
  transition: all 0.2s ease;
  border-radius: 25px;
}
.yes_no_wp .toggle-radio .switch {
  background-color: #ffcc00;
}
.toggle-radio .switch span {
  position: absolute;
  width: 20px;
  height: 4px;
  top: 49%;
  left: 50%;
  margin: -2px 0px 0px -4px;
  background: #fff;
  display: block;
  transform: rotate(-45deg);
  transition: all 0.2s ease;
}
.toggle-radio .switch span:after {
  content: "";
  display: block;
  position: absolute;
  width: 4px;
  height: 12px;
  margin-top: -8px;
  background: #fff;
  transition: all 0.2s ease;
}
.toggle-radio input[type="radio"] {
  display: none;
}
.toggle-radio .switch label {
  cursor: pointer;
  color: rgba(0, 0, 0, 0.2);
  width: 95px;
  line-height: 41px;
  font-size: 9px;
  transition: all 0.2s ease;
}
.toggle-radio label[for^="no"] {
  /* position: absolute; */
  left: 0px;
  height: 20px;
}

.toggle-radio label[for^="yes"] {
  /* position: absolute; */
  right: 0px;
  margin-right: 10px;
}

.toggle-radio [id^="yes"]:checked ~ .switch {
  background: #db85c3;
}
.toggle-radio [id^="yes"]:checked ~ .switch span {
  background: #fff;
  margin-left: -8px;
}
.toggle-radio [id^="yes"]:checked ~ .switch span:after {
  background: #fff;
  height: 20px;
  margin-top: -8px;
  margin-left: 8px;
}
.toggle-radio [id^="no"]:checked ~ .switch label[for^="no"] {
  color: #fff;
}
.toggle-radio [id^="yes"]:checked ~ .switch label[for^="yes"] {
  color: #fff;
}

.row_yes_no {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.toggle-radio {
  position: relative;
}

.div_circle {
  position: relative;
  display: flex;
  align-items: center;
}
.yes_no,
.yes_no_wp {
  width: 100%;
  margin-right: 10px;
}
.mobile-padding-yes_no {
  padding: 0;
}

.red_circle {
  background: #000;
  width: 29px;
  height: 29px;
  border-radius: 30px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  /* position: absolute; */
  left: 36px;
  top: 2px;
  color: #ffcc00;
  font-size: 18px;
  /* font-weight:bold; */
  border: 1px solid #ffcc00;
}
.green_circle {
  background: #fff;
  width: 29px;
  height: 29px;
  border-radius: 30px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  /* position: absolute; */
  left: 36px;
  top: 2px;
  color: #00a504;
  font-size: 18px;
  /* font-weight:bold; */
  border: 1px solid #00a504;
}

.calll .alert-success {
  background: #000;
  width: 29px;
  height: 29px;
  text-align: center;
  color: #ffcb00;
  padding: 0;
  margin-top: 15px;
  margin-left: 4px;
  position: absolute;
  top: -11px;
  left: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  border-radius: 30px;
  border: 1px solid #ffcc00;
}

.wpl .alert-success {
  background: #fff;
  width: 29px;
  height: 29px;
  text-align: center;
  color: #00a504;
  padding: 0;
  margin-top: 15px;
  margin-left: 4px;
  position: absolute;
  top: -11px;
  left: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  border-radius: 30px;
  border: 1px solid #00a504;
}

.alert-all-connected {
  background-color: #1fcad2;
}
.alert-call-connected {
  background-color: #ffcc00a3;
}
.alert-whatsapp-connected {
  background-color: #01bc9b87;
}

body {
  background: #979797;
}
.container.login-cont {
  background: #fff;
  padding: 50px;
}
.title {
  color: black;
}
.panel-body {
  color: #000000;
  font-size: 12px;
}
.panel-body .date-time .day,
.panel-body .small-booking {
  color: #fff;
}
.well {
  color: #327ab7;
}
.panel-warning > .panel-heading {
  background-color: #ffcc00;
}
.panel-warning {
  margin-top: 20px;
}
.img-logo {
  width: 140px;
}
.lead {
  margin-bottom: 0px;
}
.alert-success {
  background-color: #73d087;
  background-color: #ffffff;
  color: #155e91;
}

.alert-warning {
  background-color: #bb9dc3;
}
.alert-warning p {
  color: #fff !important;
}
.alert p {
  font-size: 14px;
}
.alert {
  margin-bottom: 5px;
}
.alert-info {
  background-color: #1fcad2;
}
.reschedule_call,
.book_now,
.add_note {
  margin-top: 10px;
}
.date-time .name {
  font-size: 20px;
}

.date-time .hour {
  font-size: 22px;
}
.date-time .day {
  font-size: 18px;
  color: #55b1e0;
}
.alert-warning .date-time .day {
  color: #fff;
}
.alert-warning .name,
.alert-warning .hour {
  color: #eeff00;
}
.alert-info .date-time .day,
.alert-all-connected .date-time .day,
.alert-whatsapp-connected .date-time .day,
.alert-call-connected .date-time .day {
  color: #fff;
}
.small-booking {
  font-size: 14px;
}
.alert-warning,
.alert-info,
.alert-all-connected,
.alert-whatsapp-connected,
.alert-call-connected {
  color: #fff;
}
.alert-info .name,
.alert-info .hour,
.alert-all-connected .name,
.alert-all-connected .hour,
.alert-whatsapp-connected .name,
.alert-whatsapp-connected .hour,
.alert-call-connected .name,
.alert-call-connected .hour {
  color: #000000;
}

.all-statuses .btn {
  font-size: 11px;
}
.btn {
  font-size: 13px;
}

.log_call_btn {
  width: 37px;
  height: 37px;
  background: url(https://www.laughingbuddha.uk/uploads/adm/log_call_btn.png) no-repeat center center transparent;
  background-size: 37px;
  border: none;
}

.log_wp_btn {
  width: 37px;
  height: 37px;
  background: url(https://www.laughingbuddha.uk/uploads/adm/log_wp_btn.png) no-repeat center center transparent;
  background-size: 37px;
  border: none;
}

.tge_suc {
  height: auto;
  overflow: hidden;
  margin-top: 10px;
}

.btn-connected {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
  padding: 5px 10px;
  font-size: 12px;
  text-transform: uppercase;
}
.btn-not-connected {
  color: #000;
  background-color: #ffcc00;
  border-color: #ffcc00;
  padding: 5px 10px;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: bold;
}

.ajax-admin-not-connected,
.ajax-admin-connected {
  display: none;
}
.progress-bar-info-2 {
  background: #ffcc00;
}
.progress-bar-info {
  background: #337ab7;
}
.email-cma {
  font-size: 12px;
  font-weight: bold;
  margin-top: -8px;
  color: #ff7800;
}

.not-called {
  font-size: 19px;
}
.not-called img {
  width: 25px;
}

.img-brand {
  padding-left: 0;
}
.img-brand img {
  max-width: 100%;
  width: 65px;
}

.full_row {
  overflow: hidden;
  margin-left: 10px;
  margin-right: 10px;
  background: #fff;
  margin-bottom: 2px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 15px;
  padding-left: 15px;
}

.full_row.no-margin {
  margin-bottom: 0px;
}

.full_row .fullname {
  padding-right: 15px;
  font-size: 13px;
}
.full_row .leaddate {
  font-size: 11px;
}
.pro_index {
  padding-bottom: 50%;
}
.pro_index h2 {
  color: #fff;
  font-size: 14px;
  margin: 0;
  font-weight: normal;
}

.pro_index h2 span {
  border-radius: 45px;
  background: rgba(157, 138, 138, 0.426);
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  width: 45px;
  height: 45px;
  display: inline-flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  margin-bottom: 5px;
}
.pro_index .back-top {
  margin-top: 25px;
  padding: 15px;
  color: #fff;
  margin-bottom: 5px;
  text-align: right;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.new_leads {
  background: #2c0059;
}
.new .full_row {
  border-left: 6px solid #2c0059;
}
.new .fullname {
  color: #6a6c6d;
}
.new .leaddate {
  color: #2c0059;
}

/* .sent_whatsapp_and_called_leads{
    background:#663399;
}
.sent_whatsapp_and_called .full_row{    
    border-left:6px solid #663399; 
}
.sent_whatsapp_and_called .fullname{
    color:#6A6C6D;
}
.sent_whatsapp_and_called .leaddate{
    color:#663399;
} */

.sent_whatsapp_leads {
  background: #300062;
}

.sent_whatsapp .full_row {
  border-left: 6px solid #300062;
}
.sent_whatsapp .fullname {
  color: #6a6c6d;
}
.sent_whatsapp .leaddate {
  color: #300062;
}

.called_leads {
  background: #36016e;
}
.called .full_row {
  border-left: 6px solid #36016e;
}
.called .fullname {
  color: #6a6c6d;
}
.called .leaddate {
  color: #36016e;
}

.sent_whatsapp_and_called_leads {
  background: #40027e;
}
.sent_whatsapp_and_called .full_row {
  border-left: 6px solid #40027e;
}
.sent_whatsapp_and_called .fullname {
  color: #6a6c6d;
}
.sent_whatsapp_and_called .leaddate {
  color: #40027e;
}

.requested_callback_leads {
  background: #4c0296;
}
.requested_callback .full_row {
  border-left: 6px solid #4c0296;
}
.requested_callback .fullname {
  color: #6a6c6d;
}
.requested_callback .leaddate {
  color: #4c0296;
}

.no_answer_leads {
  background: #5702ac;
}
.no_answer .full_row {
  border-left: 6px solid #5702ac;
}
.no_answer .fullname {
  color: #5702ac;
}
.no_answer .leaddate {
  color: #5702ac;
}

.will_think_about_it_leads {
  background: #6101c1;
}
.will_think_about_it .full_row {
  border-left: 6px solid #6101c1;
}
.will_think_about_it .fullname {
  color: #6a6c6d;
}
.will_think_about_it .leaddate {
  color: #6101c1;
}

.nr_not_working_leads {
  background: #4a4a4a;
}
.nr_not_working .full_row {
  border-left: 6px solid #4a4a4a;
}
.nr_not_working .fullname {
  color: #6a6c6d;
}
.nr_not_working .leaddate {
  color: #4a4a4a;
}

.will_call_me_back_leads {
  background: #6c02d6;
}
.will_call_me_back .full_row {
  border-left: 6px solid #6c02d6;
}
.will_call_me_back .fullname {
  color: #6a6c6d;
}
.will_call_me_back .leaddate {
  color: #6c02d6;
}

.booked_leads {
  background: #7603e9;
}
.booked .full_row {
  border-left: 6px solid #7603e9;
}
.booked .fullname {
  color: #6a6c6d;
}
.booked .leaddate {
  color: #7603e9;
}
.extended_row {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.extended_row hr {
  margin: 0;
}
.col-reports {
  display: flex;
  text-align: center;
  align-items: normal;
  justify-content: space-between;
  flex-direction: column;
}

.col-reports .llcc {
  color: #fff;
  padding: 5px 5px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  justify-content: center;
  flex-direction: column-reverse;
}

.col-reports .llcc:hover {
  color: #fff;
}
.col-reports .llcc span {
  width: 100%;
  font-size: 12px;
}
.col-reports .llcc span.bold-span {
  font-size: 19px;
  font-weight: bold;
}

.form_record_payment {
  margin-top: 10px;
  text-align: center;
}

.pricing_row {
  background: #e0e0e0;
  margin-top: 10px;
}
.price_title {
  font-weight: bold;
}

.pricing_row .price_quoted {
  color: #000;
  background: #d2d2d2;
}

.pricing_row .price_paid {
  color: green;
  background: #d3f6d3;
}

.pricing_row .price_outstanding {
  color: red;
  background: #ffdada;
}

.mb-5 {
  margin-bottom: 10px;
}

.butcirc {
  border-radius: 130px;
  height: 130px;
  width: 130px;
  background: #fff;
  border: 3px solid #10c4a5;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  color: #10c4a5;
  margin-bottom: 10px;
  margin-right: -10px;
}
.ravi_attempt_to_call img {
  width: 45px;
}
.dflex {
  display: flex;
  flex-direction: row;
  align-items: end;
  justify-content: right;
}
.btn.btn-primary.butcirc:hover,
.btn.btn-primary.butcirc:active,
.btn.btn-primary.butcirc:focus,
.btn.btn-primary.butcirc:active:hover {
  color: #10c4a5;
  background: #fff;
  border: 1px solid #10c4a5;
}

.btn-call-circle {
  width: 130px;
  height: 130px;
  background: url(../uploads/adm/log_call_btn2.png) no-repeat center center transparent;
  background-size: 70px;
  font-size: 0;
  border: 3px solid #ffcc00;
  margin-bottom: 10px;
  margin-right: -10px;
}

.btn.btn-primary.butcirc.btn-call-circle:hover,
.btn.btn-primary.butcirc.btn-call-circle:active,
.btn.btn-primary.butcirc.btn-call-circle:focus,
.btn.btn-primary.butcirc.btn-call-circle:active:hover {
  width: 130px;
  height: 130px;
  background: url(../uploads/adm/log_call_btn2.png) no-repeat center center transparent;
  background-size: 70px;
  font-size: 0;
}
.pl0 {
  padding-left: 0;
}

.row-circle {
  display: flex;
  align-items: center;
}
.circle2 {
  color: #00008e;
  font-size: 25px;
  padding: 0;
  margin-top: 0;
  line-height: 0.1;
  margin-top: -4px;
  border-radius: 40px;
  padding: 0;
  color: #fff;
  padding: 5px;
  width: 40px;
  height: 40px;
}
.btn.btn-primary.log-wa {
  border-color: #10c4a5;
}

.well {
  background: #bce5e0;
}
.book-now-btn {
  background: #da2bed;
}
.dayscont h1 {
  color: #1a2b56;
  text-align: center;
  margin-top: 0px;
}
.dayscont {
  padding: 15px;
  margin-bottom: 15px;
  background: #dfdfdf;
  padding-top: 15px;
}
.scroller {
  margin-bottom: 70px;
  display: block;
}

.mycs h6 {
  text-align: center;
  font-weight: bold;
  font-size: 16px;
}
.mycs h6 a {
  color: #fff;
}

.mycs {
  text-align: center;
}
/* .mycs.td{
    background: #ffe2d4;
}
.mycs.tm{
    background: #9cdeeb;
}
.mycs.sev{
    background: #b5ffc7;
}
.mycs.sixt{
    background: #ffc977;
} */
.flexyx {
  display: flex;
  justify-content: space-around;
  /* background: linear-gradient(131.66deg,#000000 4.91%,#04080D 11.21%,#1A2635 42.94%); */
  background: #1a2b56;
  text-align: center;
  /* margin-bottom: 20px; */
  padding: 15px 0px;
  color: #fff;
  align-items: end;
}
.flexyx.today {
  background: linear-gradient(89.99deg, #ca2277 12.97%, #b33683 81.51%);
}
.flexyx.today2 {
  background: linear-gradient(131.66deg, #d24196 4.91%, #c33889 11.21%, #ce549f 42.94%);
  margin-bottom: 20px;
}
.flexyx.yesterday {
  background: linear-gradient(89.99deg, #b33784 12.97%, #82559b 81.51%);
  /* color: #fff; */
}
.flexyx.yesterday2 {
  background: linear-gradient(131.66deg, #c63e93 4.91%, #db5ba4 11.21%, #e282cf 42.94%);
  /* color: #fff; */
}
.flexyx.last7 {
  background: linear-gradient(89.99deg, #82559b 12.97%, #4d70b2 81.51%);
  /* color: #fff; */
}
.flexyx.last72 {
  background: linear-gradient(89.99deg, #a75ade 12.97%, #6290e6 81.51%);
  /* color: #fff; */
}
.flexyx.last16 {
  background: linear-gradient(89.99deg, #4c6fb3 12.97%, #3975b9 81.51%);
  /* color: #fff; */
}
.flexyx.last16_last_2_days {
  background: linear-gradient(89.99deg, #4d77cc 12.97%, #439aff 81.51%);
  /* color: #fff; */
}

.flexyx .copl {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.greenclass {
  background: #18d8b1 !important;
}
.mycs.sev2 div {
  padding: 5px 15px;
  width: 25%;
  border: 1px solid #fff;
}

.mycs.sev2 {
  background: linear-gradient(89.99deg, #c92377 12.97%, #3976b9 81.51%);
  position: fixed;
  top: 0px;
  width: inherit;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: -15px;
}
@media all and (max-width: 768px) {
  .mycs.sev2 {
    position: fixed;
    top: 0px;
    width: inherit;
    left: 0px;
    right: 0px;
    margin-left: 0px;
  }
}

.copl span strong {
  background: #fff;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-top: 6px;
}

.btnk {
  width: 100%;
  border-radius: 25px;
  margin-top: 10px;
  margin-bottom: 0px;
}

.alert.alert-all-connected.danger {
  background: #ca99bc;
}
.flowcallback {
  margin-top: 10px;
}

.book_ajax_form_calendar {
  padding-top: 20px;
  padding-bottom: 20px;
}
#book_ajax_form_calendar .tge_suc {
  padding: 5px;

    border-radius: 15px;
    padding-bottom: 0;
}
#book_outside_plan{margin:0;width:100%}
.bulk-blocks .alert-warning{
  margin-bottom: 5px;
  padding: 5px;
  border-radius:0 0 10px 10px;
}
#book_ajax_form_calendar .tge_suc .alert-warning {
  margin-bottom: 5px;
  padding: 5px;
  border-radius:0 0 10px 10px;
}

#outsideServiceGrid {
  width: 100%;
  overflow: visible;
}
.open_booking_form {
  background: #c92377;
  margin-top: 10px;
  color: #fff;
}
.booking_form_new {
  display: none;
  background: #bce5e0;
  overflow: hidden;
  padding-top: 30px;
  padding-bottom: 10px;
  margin-top: 10px;
  border-radius: 15px;
}

.booking_form_new input[type="text"],
.booking_form_new select,
.booking_form_new textarea {
  border-radius: 16px;
  border: 1px solid #ccc;
  height: 40px;
  padding: 5px 10px;
  font-size: 14px;
}
.booking_form_new input[type="submit"] {
  width: 200px;
  display: block;
  margin: 0 auto;
  border-radius: 16px;
  margin-bottom: 20px;
}
.notes_textarea {
  background: #fbcfff;
  height: 100px !important;
  font-style: italic;
}
#results .ajax-admin .alert.alert-danger p {
  color: #a94442 !important;
}
.circle-consent {
  background: red;
  padding: 5px;
  border-radius: 19px;
  width: 20px;
  height: 20px;
  font-size: 8px;
  color: #fff !important;
}
/* .circle-consent {
  background: red;
  padding: 5px;
  margin-top: 8px;
  border-radius: 19px;
  width: 20px;
  height: 20px;
  font-size: 8px;
  position: relative;
  top: -5px;
  right: 2px;
  clear: left;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
} */
/* @media all and (max-width: 768px) {
  .circle-consent {
    background: red;
    padding: 5px;
    margin-top: 8px;
    display: inline-block;
    width: auto;
    border-radius: 19px;
    width: 20px;
    height: 20px;
    font-size: 8px;
    position: relative;
    top: -5px;
    right: 2px;
  }
} */

.total_past_emsculpt {
  background: #e07200;
  color: #fff;
  padding: 5px;
  width: 100%;
  display: block;
}
.glflex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.glflex .pluz.past {
  background: #fff;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  display: flex;
  color: #8a7ec6;
  font-weight: bold;
  justify-content: center;
  align-items: center;
  font-size: 21px;
  padding-bottom: 4px;
}
.missed_calls_container {
  padding: 10px;
  background: #51a4b5;
}
.missed_calls_container .row {
  margin-bottom: 2px;

  color: #fff;
}
.missed_calls_container .bbot {
  border-bottom: 1px solid #fff;
}
.generate_consent {
  padding: 10px;
  background: #51a4b5;
}
.alert-warning2 {
  border: 1px solid #cecece;
  padding: 7px 14px;
  margin-top: 14px;
  margin-bottom: 4px;
}
.update_form {
  padding-bottom: 20px;
  /* display: inline-flex; */
  flex-direction: column;
}
.no-treatment-plan {
  width: 20px;
  height: 20px;
  background: red;
  color: #fff;
}
.section_title {
  background: #f6dafe;
}
.bg_all {
  background: #aac5e6;
}
.section_title.note_title {
  margin-top: 10px;
  margin-bottom: 10px;
}
.past_sessions {
  padding-top: 10px;
  padding-bottom: 10px;
}
/* .flex-col .btn.btn-primary:focus{
    background: #cecece;
    color: #000;
    font-weight: bold;
} */
.flex-col .btn.btn-primary:hover {
  background: #ef95de;
  color: #000;

  outline: none;
}
.flex-col .btn.btn-primary:active {
  background: #ef95de;
  color: #000;
}
.section_title h2 {
  color: #155e91;
  font-size: 16px;
  text-align: center;
  margin: 0;
  font-weight: normal;
  padding: 10px 0 15px 0;
}
.flex-col .btn {
  margin-left: 5px;
}

.credits_completed.activate {
  margin-bottom: 5px;
  background: #fff;
  border: 1px solid #34dcbd;
  color: #34dcbd;
  text-align: center;
  justify-content: center;
}
.credits_completed.ongoing_t.active {
  background: white;
  text-align: center;
  justify-content: center;
  border: 1px solid #dc34a7;
  color: #dc34a7 !important;
}
.today-btn,
.tomorrow-btn {
  background: #fbcfff;
  border: 1px solid #2e6da4;
  color: #302c2c;
  border: none;
  width: 80px;
  height: 80px;
  border-radius: 50px;
  margin: 0 auto 10px auto;
}
.today-btn.active,
.tomorrow-btn.active {
  background: #ec5ffa;
  color: #fff;
}

.callback-quickdays .callback-day-btn {
  margin-right: 5px;
  padding: 0;
  text-align: center;
  border: none;
  cursor: pointer;
  user-select: none;
  font-size: 10px;
  padding: 9px;
  border-radius: 70px;
}

/* last button no extra margin */
.callback-quickdays .callback-day-btn:last-child {
  margin-right: 0;
}

/* use flex for equal widths */
.callback-quickdays {
  display: flex;
  justify-content: space-around;
  margin-bottom: 15px !important;
  margin-top: 15px;
  padding-left: 10px;
  padding-right: 10px;
}

/* active state */
.callback-quickdays .callback-day-btn.active {
  background: #ec5ffa;
  color: #fff;
}

/* default state */
.callback-quickdays .callback-day-btn {
  background: #fbcfff;
  color: #000;
}



.booking-quickdays .booking-day-btn {
  margin-right: 5px;
  padding: 0;
  text-align: center;
  border: none;
  cursor: pointer;
  user-select: none;
  font-size: 10px;
  padding: 9px;
  border-radius: 70px;
}
/* last button no extra margin */
.booking-quickdays .booking-day-btn:last-child {
  margin-right: 0;
}
/* use flex for equal widths */
.booking-quickdays {
  display: flex;
  justify-content: space-around;
  margin-bottom: 15px !important;
  margin-top: 15px;
  padding-left: 10px;
  padding-right: 10px;
}
/* active state */
.booking-quickdays .booking-day-btn.active {
  background: #ec5ffa;
  color: #fff;
}
/* default state */
.booking-quickdays .booking-day-btn {
  background: #fbcfff;
  color: #000;
}

.bnz {
  padding: 10px;
  background: #ffffff;
  padding-top: 10px;
  display: block;
  padding-bottom: 30px;
  overflow: hidden;
}
.bnz h2 {
  font-size: 18px;
  text-align: center;
  margin-bottom: 15px;
}
.booking-time-circles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  justify-items: center;
  margin-top: 20px;
  margin-bottom: 15px;
  padding-top: 15px;
}
.booking-time-circles .time-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  line-height: 1;
  transition: background 0.2s;
  font-size: 12px;
  text-align: center;
  margin-bottom: 15px;
  background: #47ce78;

  color: #fff;
}
.bnz .booking-time-circles .time-circle {
  background: #f5c1ff;
  color: #000000;
}
.booking-time-circles .time-circle.active {
  background: #cc75e7;
  color: #ffffff;
  text-align: center;
}

.credits_completed {
  display: flex;
  justify-content: space-between;
  background: #34dcbd;
  font-size: 20px;
  color: #fff;
  padding: 5px;
}
.credits_completed.tp {
  display: flex;
  flex-direction: column;
  /* margin: 10px auto; */
  text-align: center;
  font-size: 15px;
}

.consent_frms .credits_completed.tp {
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 15px;
  height: auto;
  /* margin-top: 10px;
  margin-bottom: 10px; */
  width: 160px;
}

.credits_completed.tp a {
  color: #fff;
}
.payments_rec {
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  background: #df60ec;
  font-size: 20px;
  color: #fff;
  padding: 5px;
  border: none;
}
.consnt {
  height: auto;
  border-radius: 0;
  color: #337ab7;
  font-size: 15px;

  background: #95b3d070;
  display: flex;
  text-align: center;
  width: auto;

  /* margin-bottom: 10px; */
  font-weight: bold;
  flex-direction: column;
}
.consnt .nr_active {
  color: #ff7a7a;
  background: #fff;
}
.payments_rec.butz {
  width: 100%;
}
.payments_rec.butz:hover {
  background: #34dcbd;
}
.payments_rec a {
  color: #fff;
}
.cont_cnst {
  margin-left: 10px;
  margin-top: 10px;
  display: flex;
  align-self: end;
}
.payments_rec.consnt {
  margin-top: 0;
  width: 160px;
}
.payments_rec.consnt a {
  color: #337ab7;
}
.treat_title {
  font-size: 25px;
  color: #155e91;
}
.treat_title .small_caption {
  font-size: 20px;
  margin-bottom: 5px;
}
.treat_title .patient_n {
  color: #da2bed;
}
.treat_title .credits_completed {
  width: fit-content;
  margin-bottom: 5px;
}
.treat_title .credits_completed .nr_active {
  margin-left: 10px;
}
.treat_title .credits_completed.ongoing_t {
  background: #4485ff;
}
.treat_title img {
  height: 36px;
}
.cancel_btn {
  margin-bottom: 3px;
}
.create_t_plan {
  display: block;
  width: auto;
  margin: 0 auto;
  margin-bottom: 30px;
  border-radius: 0;
  background: #59bed2;
  border: none;
}
.update_booking {
  margin-bottom: 10px;
}
.info_btn {
  background: #ff9000;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  color: #fff;
  font-size: 20px;
  border: 1px solid #fff;
}
.edit_btn {
  background: #3379b7;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  color: #fff;
  border: none;
  border: 1px solid #fff;
  font-size: 12px;
}
.delete_btn {
  background: #af5fad;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  color: #fff;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  border: 1px solid #fff;
}
.container {
  background: #fff;
}
.all_service_areas {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-flow: wrap;
  margin-bottom: 10px;
}
.all_service_areas.single {
  justify-content: normal;
}

.sessions_selected {
  background: #000000;
}
.sessions_selected .title_area {
  color: #fff;
}

.cont_selection {
  font-size: 15px;
  /* margin-top: 10px; */
  color: #fff;
  padding: 5px 15px;
  /* margin-bottom: 5px; */
}
.areas_selection {
  background: #ba9658;
}

.text-color-areas {
  color: #ba9658;
}

.treatment_plan img {
  width: 110px;
}
.area_service {
  text-align: center;
  padding: 5px;
}
.title_area {
  text-align: center;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: bold;
}
.appt_cell.red {
  background: #bbbbbb;
  color: #fff;
}
.appt_cell {
  background: #675d97;
  color: #fff;
  border: 1px solid #ddd8d8;
  margin-bottom: 2px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 5px;
}
.customer-details {
  background: #59bed2;
  padding: 15px;
  color: #fff;
  margin-bottom: 10px;
  font-size: 22px;
}
@media all and (max-width: 768px) {
  .customer-details {
    margin-top: 10px;
  }
}
.customer-buttons {
  background: #59bed2;
  text-align: right;
  padding: 10px;
  /* marg */
}
.customer-buttons .btn {
  border-radius: 0;
  border: none;
}

.customer-buttons .btn.btn-primary:hover {
  background: #cecece;
  color: #000;

  outline: none;
}
.customer-buttons .btn.btn-primary:focus {
  background: #cecece;
  color: #000;

  outline: none;
}
.customer-buttons .btn.btn-primary:active {
  background: #cecece;
  color: #000;
}
.table-header {
  background: #baaef9;

  padding: 15px;
  color: #fff;
  margin-bottom: 5px !important;
  border-radius: 5px;
}
.table-header.past_bookings {
  background: #8a7fc6;

  padding: 15px;
  color: #fff;
}
.table-header.cancelled {
  background: #76718c;

  padding: 15px;
  color: #fff;
}
.row-plan {
  padding: 15px 0;
  background: #aac5e6;
  margin-top: 0;
  font-weight: bold;
}
.row-plan-desc {
  padding: 15px;
  background: #fff;
  /* display: flex; */
  justify-content: center;
  align-items: center;
  /* border-bottom:5px solid #D9D9D9; */
  margin-top: 10px;
}
.row-plan-desc.ze_notes {
  padding: 15px 0 15px 0;
  border-bottom: 1px solid #d9d9d9;
}

.row-plan-desc .btn {
  border-radius: 0;
  border: none;
}
.title_b {
  font-weight: bold;
  font-size: 20px;
}
.title_b.create {
  margin: 10px;
  margin-left:0;
  margin-right:17px;
}
.title_b.create span {
  background: #59bed2;
  display: inline-flex;
}
.title_b.title_plan {
  color: #155e91;
}
.title_b.create span:hover {
  background: #59bed2;
}
.title_b span {
  background: #337ab7;
  cursor: pointer;
  display: block;
  color: #fff;
  font-size: 15px;
  padding: 15px;
}
.title_b span:hover {
  background: #286090;
}
.notes {
  padding: 5px 35px;
  /* background: #e1e7f1; */
}

.the_container_tabs {
  border-bottom: 5px solid #d9d9d9;
  padding-bottom: 15px;
  background: #fff;
}

.right_pay {
  padding: 0;
}
.right_pay form {
  margin-top: 10px;
}
.left_pay {
  padding: 0;
}
.left_pay .row-plan-desc {
  border-bottom: none;
}
.flex-col {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px;
}
.flex-col .left_d {
  display: flex;
  flex-direction: row;
}
.flex-col .right_d {
  display: flex;
  flex-direction: row;
  align-self: flex-end;
}
.flex-col .notes_button {
  width: 70px;
  height: 70px;
  border-radius: 100px;
  background: #eb4ab7;
}
.flex-col .pay_button {
  width: 70px;
  height: 70px;
  border-radius: 100px;
  background: #eb4ab7;
}
.flex-col .editz_button {
  width: 30px;
  height: 30px;
  border-radius: 100px;
  background: #eb4ab7;
}
.initial_note,
.no-records {
  background: #c0cde7;
  padding: 15px;

  margin-bottom: 30px;
  margin-top: 10px;
}
.note-row {
  background: #fff;

  padding: 5px;
  padding-left: 0;
  margin: 0;
  margin-bottom: 5px;
}
.note_col {
  border-right: 1px solid #ffffff;
}
.boder-lr {
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}

.bg-create {
  background: #337ab7;
}
.services {
  padding: 15px;
}
.services label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
  font-size: 20px;
  margin-right: 10px;
}
.service_listing {
  /* margin-bottom:15px; */
  /* padding-left:15px;
    padding-right:15px; */
  padding: 0;
  margin: 0;

}
/* ordering create treatment plan */
.services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  gap: 6px;
}
/* ✅ MOBILE FIX — stack columns vertically */
@media (max-width: 768px) {
  .services {
    grid-template-columns: 1fr;   /* single column */
    grid-auto-flow: row;          /* normal vertical flow */
  }
}

.the_service input[type="radio"] { display:none; }
.the_service label {
  display:flex; align-items:center; justify-content:center;
  background:#2f6f9f; padding:10px; border-radius:10px; cursor:pointer;
  transition:transform .05s ease, box-shadow .15s ease;
}
.the_service input[type="radio"]:checked + label {
  outline:2px solid #a0e3ff; box-shadow:0 0 0 3px rgba(160,227,255,.25);
}
.preset-toolbar{background:#f4f7fb;border:1px solid #e3e9f3;border-radius:12px;padding:10px 12px;margin:10px 0 14px}
  .preset-title{font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px;color:#334}
  .preset-buttons{display:flex;flex-wrap:wrap;gap:8px}
  .preset-btn{border:1px solid #cdd7ee;background:#fff;border-radius:999px;padding:6px 10px;cursor:pointer;font-size:12px;line-height:1}
  .preset-btn:active{transform:scale(.98)}
  .flash{animation:flash-bg .8s ease}
  @keyframes flash-bg{0%{box-shadow:0 0 0 0 rgba(70,180,255,.6)}100%{box-shadow:0 0 0 14px rgba(70,180,255,0)}}

/* ordering create treatment plan */


.p0 {
  padding: 0;
}
.m0 {
  margin: 0;
}
.total_sessions {
  padding: 10px;
  font-size: 14px;
  color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.total_sessions span {
  font-size: 23px;
  background: #fff;
  border-radius: 80px;
  color: #000;
  width: 65px;
  height: 65px;
  justify-items: center;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  line-height: 1;
}
.area_total {
  background: #fff;
  padding: 10px;
  font-size: 14px;
  /* color: #fff; */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-bottom: 5px solid #d9d9d9;
}
.area_total span {
  font-size: 23px;
  /* background: #fff; */
  color: #fff;
  border-radius: 80px;

  width: 65px;
  height: 65px;
  justify-items: center;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  line-height: 1;
  align-self: flex-end;
}
.img_and_desc {
  text-align: center;
}
.img_and_desc .desc {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: bold;
}
.credit_and_used {
  display: flex;
  flex-direction: row;
  font-size: 18px;
  color: #337ab7;
  text-align: center;
}

.credit_and_used .credit {
  border-left: 1px solid #337ab7;
  border-right: 1px solid #337ab7;
  padding-left: 5px;
  padding-right: 5px;
  display: flex;
  flex-direction: column;
  justify-content: top;
}
.credit_and_used .credit .top {
  border-bottom: 1px solid #337ab7;
}
.credit_and_used .completed {
  padding-left: 5px;
  padding-right: 5px;
  display: flex;
  flex-direction: column;
  justify-content: top;
}
.credit_and_used .completed .top {
  border-bottom: 1px solid #337ab7;
}
.areas_ {
  font-size: 14px;
  color: #337ab7;
  display: flex;
  flex-direction: column;
  justify-content: top;
}
.nr_sand_area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.nr_sand_area_profile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: #ba9658;

  width: 100%;
  margin-bottom: 0;
}
.span_sess_left {
  border-radius: 70px;
  height: 70px;
  justify-content: center;
  align-items: center;
  display: flex;
  width: 70px;
  align-self: center;
  border: 2px solid #ba9658;
  margin-bottom: 37px;
}
.span_sess_left_profile {
  width: 100%;
  display: block;
  margin-top: 0;
  background: #34dcbd !important;
  color: #fff !important;
  /* border-bottom: 1px solid #fff;
    border-top: 1px solid #fff; */
}
.past_session {
  margin-bottom: 10px;
  background: #e7e3ff;
  text-transform: capitalize;
  margin-top: 40px;
}
.attended_class {
  background: #d9fff8;
  margin-top: 20px;
}

.areas_ .top {
  color: #fff;
  padding: 5px;
}
.areas_ .bottom {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-around;
}
.areas_ .bottom .active_zareas {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background: #ffffff; */
  padding: 3px;
  margin-top:10px;
}
.areas_ .bottom .active_zareas.profile_history_active_area {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 3px;
  margin-top: 10px;
  color: #fff;
}
.active_zareas form {
  text-align: center;
}
.active_zareas img {
  width: 100px;
}
.record_new_sessz {
  background: #34dcbd;
  width: 90px;
  height: 90px;
  color: #fff;
  border-radius: 100px;
  border: navajowhite;
  font-size: 30px;
}
.credit_and_used .total {
  padding-left: 5px;
  padding-right: 5px;
  display: flex;
  flex-direction: column;
  justify-content: top;
}
.credit_and_used .total .top {
  border-bottom: 1px solid #337ab7;
}
.small_g {
  font-size: 11px;
  line-height: 1;
}
.img_and_desc img {
  width: 110px;
}
.img_and_desc.sessions_selected {
  color: #fff;
}
.the_date {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 7px 7px;
  background: #baaff9;
  margin-bottom: 1px;
  color: #fff;
  align-items: center;
}
.the_date a {
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.2;
  padding: 2px;
  margin-top: -1px;
  width: 50px;
  height: 20px;
  text-align: right;
}
@media all and (max-width: 767px) {
  .the_date {
    display: flex;
    /* justify-content: center; */
  }
  .the_date a {
    width: 19px;
  }
  .credit_and_used {
    width: 100%;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .treat_title img {
    height: 36px;
    margin-bottom: 20px;
    margin-top: 10px;
  }
  .treat_title .credits_completed {
    width: 100%;
  }
  .active_zareas img {
    width: 50px;
  }
  .span_sess_left {
    width: 50px;
    height: 50px;
  }
  .record_new_sessz {
    width: 60px;
    height: 60px;
  }
}

.history_dates.small .the_date,
.completed_area {
  font-size: 12px;
}
.history_dates.small .date_single {
  margin-right: 0;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
}
.history_dates.small {
  width: 100%;
  text-align: center;
}
.completed_area {
  background: #a065db;
  color: #fff;
  padding: 5px;
  margin-top: 10px;

  width: 100%;
  text-align: center;
}

.history_title {
  font-weight: bold;
  text-align: center;
}
.completed_treatment {
  background: #1e4e7d;
  padding: 2px;
  color: #fff;
  font-size: 10px;
}
.d-none-2{display:none;}


/* .the_service label {
  display: inline-flex;
  margin: 0;
  padding: 10px;
} */
.the_service label.active_service {
  background: #59bed2;
}
.the_service label:hover {
  background: #000;
  cursor: pointer;
}

.edit_fr {
  background: #cecece;
}
@media all and (max-width: 767px) {
  .consent_frms {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .consnt.butz {
    font-size: 13px;
  }
}
.consent_frms form {
  display: flex;
  justify-content: flex-end;
  width: 160px;
}
.consent_frms {
  display: flex;
  justify-content: flex-end;
}
.consnt.butz.em {
  line-height: 1.4;
}

.consnt.butz {
  align-items: center;
  display: flex;
  flex-direction: row;

  line-height: 1.4;
  padding: 15px 10px 14px 15px;
  background: #95b3d070;
  display: flex;
  flex-direction: row;
  border: navajowhite;
  color: #337ab7;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.plus-circle {
  margin-left: 5px;
  background: #337ab7;
  width: 23px;
  height: 23px;
  border-radius: 15px;
  color: #fff;
  font-size: 14px;
}

.customer-details input[type="submit"] {
  background: #337ab7;
  color: #fff;
  border: 0;
  margin-top: 10px;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 15px;
}
.customer-details p {
  margin: 0;
}

.customer-details .success {
  color: #3c763d;
  font-size: 13px;
  background-color: #dff0d8;
  border-color: #d6e9c6;
  padding: 15px;
  margin-top: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.customer-details .error {
  color: #a94442;
  background-color: #f2dede;
  font-size: 13px;
  border-color: #ebccd1;
  padding: 15px;
  margin-top: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.flex_date_duration {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 10px;
  margin-top: 10px;
}
.flex_date_duration.no-wrap {
  justify-content: flex-start;
  align-items: center;
  z-index: 99999;
  position: relative;
}

.appt_cell .sessionDateTime {
  background: #ffffff !important;
  padding: 5px;
  border-radius: 5px;
  color: #6d6d6d;
  display: inline-block;
  font-weight: bold;
  text-align: right;
}
.appt_cell .duration_t {
  padding: 5px;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  font-weight: bold;
  text-align: right;
}
.flex_date_duration .serviceNames {
  padding: 5px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 5pc;
  width: 80px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex_date_duration .serviceNames_ {
  display: none;
}
.right_c .ajax-calendar {
  margin-bottom: 10px;
}

.circle-star {
  width: 20px;
}
@media all and (min-width: 768px) {
  .circle-star {
    margin-bottom: 2px;
    display: inline-block;
  }
}
.update_pay {
  background: #337ab7 !important;
  margin-bottom: 10px !important;
}
.update_pay:hover {
  background: #7761ec !important;
}
.circle-star img {
  width: 20px;
}

.ask_reviews input[type="submit"] {
  background: #337ab7;
  color: #fff;
  border: 0;
  margin-top: 10px;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 15px;
}
.ask_reviews .alert-success {
  color: #3c763d;
  font-size: 13px;
  background-color: #dff0d8;
  border-color: #d6e9c6;
  padding: 15px;
  margin-top: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.lead .lead_control_appts {
  font-size: 14px !important;
}
.followuptime {
  margin-bottom: 5px;
}
.bg_follow_up_cancel {
  background: #fbcfff;
  padding: 10px;
  margin-bottom: 10px;
}
.all-notes {
  padding-bottom: 15px;
}
.all-notes .note_col {
  color: #000;
  padding-right: 10px;
}
.title_notes_b {
  background: #5abed2;
  color: #fff;
  border-top: 5px solid #3479b7;
  padding-top: 5px;
  padding-bottom: 6px;
  margin-bottom: 17px;
}
.all-notes .section_title h2 {
  text-align: left;
  padding-left: 10px;
}

.all-notes .title_b {
  padding-left: 15px;
}
.form-add-note {
  margin-bottom: 10px;
  background: #f6dafd;
  padding-bottom: 10px;
}
.all-notes .row-plan-desc.ze_notes {
  padding: 15px 0 15px 0;
  border-bottom: 1px solid #d9d9d9;
  background: #95b3d0;
}

.all-notes .flex_date_duration img {
  height: 10px;
}

.all-notes .note_date {
  background: #ffffff !important;
  padding: 5px;
  border-radius: 5px;
  color: #6d6d6d;
  display: inline-block;
  font-weight: bold;
  text-align: right;
  font-size: 11px;
  width: 100%;
}
.all-notes .flex_date_duration {
  margin-top: 0;
}
.all-notes .serviceNames {
  width: auto;
  font-size: 11px;
  height: 22px;
}
.all-notes .flex_date_duration {
  align-items: center;
}

.upload_form_camera,
.photos_container {
  background: #ffffff;
}

.open_camera_btn {
  background-color: #35dcbd;
  color: white;
  text-align: center;
  border: none;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  width: 200px;
  border-radius: 35px;
  margin-top: 20px;
}
.upload_btn {
  width: 200px;
  margin: 10px auto;
  display: block;
  border-radius: 35px;
  background: #eb4ab7;
  border: 1px solid #fff;
}
.upload_btn:hover {
  background: #28a78f;
}
.open_camera_btn:hover {
  background-color: #28a78f;
  color: #fff;
}
.select_area_photo {
  width: 200px;
  margin: 10px auto;
  display: block;
  border-radius: 35px;
}
.img_preview_photo img {
  max-width: 100%; /* Responsive image */
  height: auto; /* Maintain aspect ratio */
  margin-top: 10px; /* Space above the preview image */
  margin-bottom: 10px;
  text-align: center;
}
.active_zareas .photo-item {
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px;
  /* box-shadow: 0 0 5px rgb(0 188 156); */
  border: 1px solid #baaef9;
  background: #beccca;
}
.photo-item.active {
  background: #00bc9c;
  padding: 5px;
  box-shadow: 0 0 5px rgb(0 188 156);
  border: 1px solid #baaef9;
}
.photo-item {
  padding: 5px;
  display: flex;
  flex-direction: column;
  width: 143px;
  margin: 0 auto;
}
.photo-item img {
  margin-bottom: 5px;
}
.response_photo_upload {
  display: none;
}
.response_photo_upload.alert-danger {
  display: block;
}
.response_photo_upload.alert-success {
  background: #43be94;
  color: #fff;
  display: block;
}

.modal-fullscreen {
  max-width: 100%;
  margin: 0;
}
.modal-dialog {
  width: 100%;
}
.modal-body {
  display: flex;
  justify-content: center;
  align-items: center;
  height:80vh;
}

#photoComparisonContent {
  /* display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: 100%;
  justify-content: center;
  align-items: center; */
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: 100%;
  align-items: baseline;
}

#photoComparisonContent img {
  display: block;
  max-width: 1000px;
  max-height: 600px;
  height: auto;
}

#photoComparisonContent .date_single {
  margin-top: 5px;
  font-size: 12px;
  text-align: left;
  background: #7870d2;
  padding: 5px;
  color: #fff;
}

#photoComparisonModal .modal-header .close {
  background: #f56565;
  border-radius: 30px;
  line-height: 1;
  opacity: 1;
  padding: 0px 6px 6px 5px;
}
#photoComparisonModal .modal-header .close span {
  color: #fff;
}
.load_photos {
  border-radius: 30px;
  background-color: #00bc9c;
  color: #fff;
  border: 1px solid #fff;
  width: 200px;
  margin: 10px auto;
  display: block;
  border-radius: 35px;
}

.compare_btn {
  border-radius: 30px;
  background-color: #00bc9c;
  color: #fff;
  border: 1px solid #fff;
  width: 200px;
  margin: 10px auto;
  display: block;
  border-radius: 35px;
}
.no-photos-alert {
  margin-left: 4px;
  margin-right: 5px;
  text-align: center;
}
.signature_button_with_pen.blue {
  background: #84bcf7;
}

.signature_button_with_pen {
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  background: #5aa5f2;
  font-size: 20px;
  color: #fff;
  padding: 5px;
  border: none;
  width: 380px;
  margin-bottom: 10px;
}
.signature_button_with_pen .pen_sig {
  width: 30px;
}
.signature_button_with_pen a {
  color: #fff;
}

.the_sig {
  width: 100%;
}
.tk_ph_but {
  position: relative;
  margin-left: 5px;
  cursor: pointer;
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  font-size: 20px;
  align-items: center;
}
.tk_ph_but img {
  width: 70px;
}
.tk_ph_but span {
  position: absolute;
  width: 25px;
  height: 25px;
  background: #baaef9;
  color: #fff;
  border-radius: 15px;
  top: 0px;
  right: -5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
}

.diff_bor {
  padding-top: 5px;
  padding-bottom: 5px;
  border-top: 1px solid pink;
}
#xpand_appointment_requests .appt_cell.approve_booking_cell {
  background: #aa0082 !important;
}

.access_profile {
  background: #ec4bb7;
  padding: 7px 10px;
  display: inline-block;
  border-radius: 16px;
  color: #fff;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid #fff;
}
.access_profile:hover {
  background: #5abed2;

  color: #fff;
  text-decoration: none;
}
/* .time-slots-container { display: flex; flex-wrap: wrap; gap: 10px;     justify-content: space-between;} */

.time-slots-container {
  display: flex;
  flex-direction: column; /* Stack groups vertically */
  gap: 10px;
}

.time-slot-group {
  /* display: flex; */
  grid-template-columns: repeat(3, 1fr);
  display: grid;
  gap: 10px;
  justify-content: space-between; /* Adjust as needed */
}
.time-slot-btn {
  padding: 10px 15px;
  text-align: center;
  background-color: #def9ff;
  background-color: #d1e8f2;
  background-color: #e3f2fd;
  background-color: #f5f5f5;
  background-color: #baaff9;

  color: #fff;

  border: 1px solid #ccc;
  cursor: pointer;
  border-radius: 5px;

  background-color: #e3dfff;

  background-color: #ec4bb7;
  /* background-color: #ffbae8; */
  color: #fff;
  /* color: #000000; */
  border: 1px solid #776ab6;
  cursor: pointer;
  border-radius: 20px;
}

.time-slot-btn.morning {
  background-color: #d37cfc;
}

.time-slot-btn.midday {
  background-color: #b059d9;
}

.time-slot-btn.afternoon {
  background-color: #853ca7;
}

.time-slot-btn.active {
  background-color: #71cfe4;
  background-color: #007f91;
  background-color: #ff9800;
  background-color: #4caf50;
  background-color: #eb4ab7;
  color: #fff;
  /* color: #000; */
  border-color: #024b5b;
  border-color: #ffffff;

  background-color: #baaef7;
  background-color: #41dab7;
  color: #fff;
  /* color: #000; */
  border-color: #ec4bb7;
}
#appointments_new .ui-datepicker .ui-datepicker-header,
#patient_profile_id .ui-datepicker .ui-datepicker-header {
  background: #71cfe4;
  color: #1e5d57;

  background: #86c5da;
  background: #003366;
  background: #455a64;
  background: #baaff9;
  color: #ffffff;
}

#appointments_new .ui-state-active,
#appointments_new .ui-widget-content .ui-state-active,
#appointments_new .ui-widget-header .ui-state-active,
#appointments_new a.ui-button:active,
#appointments_new .ui-button:active,
#appointments_new .ui-button.ui-state-active:hover,
#patient_profile_id .ui-state-active,
#patient_profile_id .ui-widget-content .ui-state-active,
#patient_profile_id .ui-widget-header .ui-state-active,
#patient_profile_id a.ui-button:active,
#patient_profile_id .ui-button:active,
#patient_profile_id .ui-button.ui-state-active:hover {
  border: 1px solid #ff9800 !important;
  background: #71cfe4 !important;
  background: #e3f2fd !important;
  background: #eb4ab7 !important;
  font-weight: normal !important;
  color: #000 !important;
  color: #fff !important;
}
#appointments_new .form-control {
  border: 1px solid #7869b6;
  background: #e5e2ff;
  height: 40px;
  border-radius: 20px;
}

#appointments_new #book_ajax_form_calendar .tge_suc,
#patient_profile_id #book_ajax_form_calendar .tge_suc {
  background: #5abed2;
  color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
}
#patient_profile_id #calendar-book-new .tge_suc {
  background: #8a7fc6;
  color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
}
#calendar-book-new .alert-warning {
  background-color: #5abed2;
}
.submit_new_appt {
  background: #eb4ab7 !important;
}
.book-now-btn.deny_booking_no_email {
  background: #d12377;
}

.book-now-btn.approve_booking {
  background: #35dcbd;
  color: #08382f;
}

#appointments_new .header_appts {
  padding: 10px 0;
}

#appointments_new .header_appts,
#appointments_new .header_appts .container {
  background-color: #57a7b9;
  background-color: #005f73;
  background-color: #009688;
  background-color: #1e3a8a;
  background-color: #59bed2;
}

#appointments_new .footer_f {
  padding: 30px 0;
}

#appointments_new .footer_f,
#appointments_new .footer_f .container {
  background-color: #57a7b9;
  background-color: #005f73;
  background-color: #009688;
  background-color: #1e3a8a;
  background-color: #59bed2;
  color: #fff;
  text-align: center;
}

#appointments_new .header_appts .container img {
  padding: 10px 0;
  width: 150px;
  margin: 0 auto;
}

#appointments_new h1 {
  color: #000;
  font-size: 18px;

  font-size: 18px;
  margin-bottom: 0px;
  font-weight: 400;
  margin-top: 10px;
}

#appointments_new .book_ajax_form_calendar {
  padding-top: 0;
}

#appointments_new .book-now-btn {
  background: #ec4bb7;
  border: 2px solid #baaef9;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
}
.book-now-btn.rqst {
  margin-bottom: 20px;
  background: #df60ec;
  color: #ffffff;
  height: 40px;
  font-size: 16px;
}
.book-now-btn.rqst:hover {
  margin-bottom: 20px;
  background: #59bed2;
  color: #ffffff;
  height: 40px;
  font-size: 16px;
}

#appointments_new .h1 .img-responsive {
  width: 150px;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 5px;
  filter: invert(100%) sepia(100%) saturate(1000%) hue-rotate(180deg);
}

#appointments_new .book-now-btn:hover {
  background: #5abed2;
  border: 2px solid #baaef9;
}

#appointments_new .footer_f .logo {
  width: 150px;
  margin: 0 auto;
  margin-bottom: 10px;
}

#appointments_new .hours_slots_new_booking {
  margin-top: 30px;
}

#appointments_new .right_c .ajax-calendar {
  margin-bottom: 30px;
}
#appointments_new .middle-content {
  padding-bottom: 30px;
  flex-grow: 1;
  display: flex;
  align-items: center;

  justify-content: center;
}
.middle-content .container {
  background: transparent;
}
#appointments_new .middle-content .container {
  background: #85c5d1;
}
@media all and (max-width: 768px) {
  #appointments_new .middle-content .container {
    width: 100%;
  }
  .text-center-sm {
    text-align: center;
  }
}
#appointments_new h2 {
  color: #000;
  font-size: 19px;
  font-family: "Inter", sans-serif;
  margin-top: 40px;
  color: #baaff9;
  color: #fff;
}

#appointments_new #emailForm input[type="email"] {
  margin-top: 40px;
  margin-bottom: 40px;
}
#appointments_new input[type="submit"] {
  background: #ec4bb7;
  color: #fff;
  border: 0;
  border-radius: 0;
  margin-top: 10px;
  padding: 6px 50px;
  border-radius: 15px;
  border: 2px solid #7869b6;
}

#appointments_new .success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
  padding: 15px;
  margin-top: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
#appointments_new p {
  margin: 0;
}
#appointments_new .error {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
  padding: 15px;
  margin-top: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

#appointments_new h3 {
  color: #000;
  font-size: 14px;
  font-family: "Inter", sans-serif;
}
#appointments_new {
  height: 100%;
  margin: 0;

  height: 100%;
  margin: 0;
  display: flex;

  flex-direction: column;
}
.form-control.select_pink {
  border: 3px solid #df60ec;
  height: 50px;
}

.bulk-blocks {
  display: inline-block;
  background: #f3f3f3;
  padding-top: 10px;
  border: 1px solid #c4b1b1;
  width: 100%;
}
.block .form-row {
  display: inline-block;
  background: #baadf9;
  background: #fbcfff;
  padding-top: 20px;
  margin-bottom: 10px;
  width: 100%;
}
.block .btn-danger {
  background-color: #d12277;
}
.bulk-blocks #add-next-slot,
.bulk-blocks #add-same-slot {
  background-color: #d12277;
  color: #fff;
}
.the-amount {
  display: none;
}
.bulk-blocks .psw-step-header{
  margin-left:15px;
  margin-right:15px;
}
.payments-display h3 {
  background: #3479b7;
  display: inline-flex;
  color: #fff;
  padding: 10px;
  font-size: 14px;
  border-radius: 45px;
}

.mail-wrapper {
  background: #f9fafc;

  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.card-header {
  background: #fff !important;
  border-bottom: 1px solid #e5e7eb;
  padding: 1rem 1.25rem;
}

.card-header strong {
  font-size: 1.05rem;
  color: #111827;
}

.nav-tabs {
  border: none;
}

.nav-tabs .nav-link {
  border: none;
  color: #6b7280;
  font-weight: 500;
  transition: color 0.2s, background 0.2s;
  padding: 6px 14px;
  border-radius: 6px;
}

.nav-tabs .nav-link.active {
  color: #ffffff;
  background: #59bed2;
  font-weight: 600;
  display: flex;
}

/* --- Mail list --- */
.mail-list {
  background: #fff;
}
.mail-list blockquote {
  font-size: 13px;
}
.mail-item {
  border-bottom: 1px solid #eef1f4;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  padding: 0.75rem 1.25rem;
  font-size: 13px;
}

.mail-item.unread {
  background-color: #e060ec;
  font-weight: 600;
  border-left: 4px solid #0d6efd;
}
.mail-item.unread .text-primary {
  color: #fff !important;
}
.mail-item.unread .small.text-muted {
  color: #fff !important;
}
.mail-item.unread .small.text-secondary {
  color: #fff !important;
}
.mail-item:hover {
  background-color: #e2e2e2;
}
.mail-item.unread:hover {
  background-color: #59bcd0;
}

.mail-item .text-primary,
.mail-item .text-success {
  font-size: 13px;
  font-weight: 600;
}

.mail-item .text-muted {
  font-size: 13px;
  color: #6b7280 !important;
}

.mail-body {
  display: none;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  padding: 1rem 1.5rem;
  font-size: 13px;
  line-height: 1.6;
}

.mail-body.active {
  display: block;
  animation: fadeIn 0.25s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reply-box {
  background: #e8f4fd;
  border: 1px solid #b8d4ed;
  border-radius: 8px;
  padding: 12px 15px;
  margin-bottom: 15px;
}

.reply-box__header {
  margin-bottom: 8px;
}

.reply-box__label {
  font-size: 13px;
  font-weight: 500;
  color: #1a73e8;
}

.reply-box__label i {
  margin-right: 4px;
}

.reply-box__textarea {
  width: 100%;
  resize: none;
  border-radius: 6px;
  padding: 10px 12px;
  border: 1px solid #dadce0;
  font-size: 14px;
  line-height: 1.5;
  min-height: 80px;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fff;
}

.reply-box__textarea:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.1);
  outline: none;
}

.reply-box__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  gap: 8px;
}

.reply-box__left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reply-box__attach-btn {
  background: #fff;
  border: 1px solid #dadce0;
  color: #5f6368;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.reply-box__attach-btn:hover {
  background: #f1f3f4;
  border-color: #c6c6c6;
}

.reply-box__attach-btn i {
  margin-right: 4px;
}

.reply-box__send-btn {
  background: #1a73e8;
  border: none;
  color: #fff;
  padding: 8px 18px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.reply-box__send-btn:hover {
  background: #1557b0;
}

.reply-box__send-btn:disabled {
  background: #94c4f8;
  cursor: not-allowed;
}

.reply-box__send-btn i {
  margin-right: 4px;
}

/* Attachment list and tags */
.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.attachment-list:empty {
  margin-top: 0;
}

.attachment-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e8f0fe;
  border: 1px solid #d2e3fc;
  border-radius: 4px;
  padding: 3px 6px 3px 8px;
  font-size: 12px;
  color: #1a73e8;
  max-width: 200px;
}

.attachment-tag__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-tag__remove {
  background: none;
  border: none;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
  color: #5f6368;
  cursor: pointer;
  border-radius: 2px;
}

.attachment-tag__remove:hover {
  background: #d2e3fc;
  color: #c5221f;
}

/* Mail item improvements */
.mail-item__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.mail-item__info {
  flex: 1;
  min-width: 0;
}

.mail-item__subject {
  color: #1a73e8;
  font-weight: 500;
  margin-bottom: 2px;
}

.mail-item__participants {
  font-size: 12px;
  color: #5f6368;
}

.mail-item__date {
  font-size: 12px;
  color: #70757a;
  white-space: nowrap;
}

.mail-item__body-content {
  padding: 10px 0;
  line-height: 1.6;
}

.unread-badge {
  background: #e160ec;
  color: #fff;
  font-size: 0.75rem;
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
}

/* Gmail Attachments */
.gmail-attachments {
  margin-top: 1rem;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.gmail-attachments-header {
  font-weight: 600;
  font-size: 12px;
  color: #495057;
  margin-bottom: 0.5rem;
}

.gmail-attachments-header i {
  margin-right: 4px;
}

.gmail-attachments-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gmail-attachment-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-size: 12px;
  color: #495057;
  text-decoration: none;
  transition: all 0.2s;
}

.gmail-attachment-link:hover {
  background: #e9ecef;
  border-color: #adb5bd;
  text-decoration: none;
  color: #212529;
}

.gmail-attachment-icon {
  margin-right: 6px;
  font-size: 14px;
}

.gmail-attachment-name {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gmail-attachment-size {
  color: #6c757d;
  font-size: 11px;
  margin-left: 4px;
}

/* Compose Panel (tab-based, clean Gmail-like style) */
.compose-panel {
  background: #fff;
  min-height: 400px;
}

.compose-panel__form {
  padding: 0;
}

.compose-panel__row {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid #e0e0e0;
}

.compose-panel__row--body {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  border-bottom: none;
}

.compose-panel__label {
  width: 70px;
  font-weight: 500;
  color: #5f6368;
  flex-shrink: 0;
}

.compose-panel__recipient {
  flex: 1;
  padding: 6px 0;
}

.compose-panel__recipient-name {
  font-weight: 500;
  color: #202124;
}

.compose-panel__input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  padding: 6px 0;
  background: transparent;
}

.compose-panel__input:focus {
  border: none;
  box-shadow: none;
}

/* From alias selector in compose */
.compose-panel__select {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background: #fff;
  min-width: 200px;
}

.compose-panel__select:focus {
  border-color: #d12477;
  outline: none;
}

/* Template selector in compose toolbar */
.compose-panel__template-select {
  padding: 8px 12px;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  color: #5f6368;
  cursor: pointer;
  min-width: 130px;
}

.compose-panel__template-select:hover {
  background: #f1f3f4;
  border-color: #c6c6c6;
}

.compose-panel__template-select:focus {
  border-color: #d12477;
  outline: none;
}

.compose-panel__textarea {
  border: none;
  outline: none;
  resize: none;
  min-height: 250px;
  padding: 15px;
  font-size: 14px;
  line-height: 1.6;
  font-family: inherit;
}

.compose-panel__textarea:focus {
  border: none;
  box-shadow: none;
}

.compose-panel__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border-top: 1px solid #e0e0e0;
  background: #f8f9fa;
}

.compose-panel__attachment {
  display: flex;
  align-items: center;
  gap: 10px;
}

.compose-panel__attach-btn {
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 13px;
  color: #5f6368;
  cursor: pointer;
  transition: all 0.2s;
}

.compose-panel__attach-btn:hover {
  background: #f1f3f4;
  border-color: #c6c6c6;
}

.compose-panel__attach-btn i {
  margin-right: 4px;
}

.compose-panel__attachment-name {
  font-size: 12px;
  color: #1a73e8;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compose-panel__send-btn {
  background: #1a73e8;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.compose-panel__send-btn:hover {
  background: #1557b0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.compose-panel__send-btn:disabled {
  background: #94c4f8;
  cursor: not-allowed;
}

.compose-panel__send-btn i {
  margin-right: 6px;
}

.title_b.create .badge.bg-danger {
  background: #d12477;
  border-radius: 151px;
  width: 25px;
  height: 25px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  margin-left: -10px;
  margin-top: -10px;
}
#wa-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.wa-message {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  max-width: 70%;
}

.wa-message.incoming {
  align-self: flex-start;
}

.wa-message.outgoing {
  align-self: flex-end;
}

.wa-bubble {
  padding: 8px 12px;
  border-radius: 10px;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.wa-bubble.incoming {
  background: #f1f0f0;
  color: #111;
  border-bottom-left-radius: 0;
}

.wa-bubble.outgoing {
  background: #dcf8c6;
  color: #111;
  border-bottom-right-radius: 0;
}

.wa-time {
  font-size: 0.75rem;
  color: #999;
  margin-top: 3px;
  text-align: right;
}

/* media alignment */
.wa-bubble img,
.wa-bubble video {
  border-radius: 10px;
  display: block;
  max-width: 220px;
}

/* Container layout */
#wa-input-bar {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  background: linear-gradient(to bottom, #f9f9f9, #ebebeb);
  border-top: 1px solid #ccc;
}

/* Textarea/input */
#wa-msg {
  flex: 1;
  border: 1px solid #b5b5b5;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
  color: #333;
  height: 34px;
  resize: none;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  margin-right: 6px;
}

/* Attach button */
#wa-attach {
  border: 1px solid #b5b5b5;
  border-radius: 6px;
  width: 38px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #fefefe, #e7e7e7);
  margin-right: 6px;
  cursor: pointer;
}
#wa-attach:hover {
  background: linear-gradient(to bottom, #fff, #ddd);
}

/* Send button */
#wa-send {
  border: 1px solid #b5b5b5;
  border-radius: 6px;
  height: 34px;
  padding: 0 18px;
  background: linear-gradient(to bottom, #fefefe, #e6e6e6);
  font-weight: 500;
  color: #111;
  cursor: pointer;
  transition: background 0.2s ease;
}
#wa-send:hover {
  background: linear-gradient(to bottom, #fff, #dcdcdc);
}

/* Optional for disabled states */
#wa-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Adjust child styles if necessary within the flex container */
.the-amount > input.form-control.block-amount,
.the-amount > .scheduled-payments-list {
  width: 100%; /* Ensure children take full width of the flex container */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.the-amount > input.form-control.block-amount {
  padding: 10px 12px; /* Slightly more padding for input */
  border-radius: 4px;
  border: 1px solid #ccc;
}
/* Styling for the container .scheduled-payments-list */
.scheduled-payments-list {
  background-color: #58bed2;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin-top: 0px; /* Add some space above it if needed */
}
.scheduled-payments-list h4 {
  color: #fff;
  font-size: 22px;
  font-weight: normal;
  margin-top: 0px;
}
.multi-schedule-form h4 ,.schedule-payment-wrapper h4 {
      color: #696969;
    font-size: 15px;
    text-align: center;
    font-weight: bold;
}
/* Styling for the unordered list (ul) within .scheduled-payments-list */
.scheduled-payments-list ul {
  list-style-type: none; /* This removes the bullets */
  padding: 0; /* Remove default padding */
  margin: 0; /* Remove default margin */
}

/* Styling for each list item (li) within the ul */
.scheduled-payments-list ul li {
  background-color: #d9ffac;
  border: 1px solid #eee;
  border-radius: 5px;
  margin-bottom: 8px;
  padding: 10px 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  

}

/* Optional: remove bottom margin from the last list item */
.scheduled-payments-list ul li:last-child {
  margin-bottom: 0;
}

/* Plan link above scheduled payment */
.sp-pay-plan-link {
  margin-bottom: 4px;
}
.sp-pay-plan-link .plan-link-badge {
  display: inline-block;
  font-size: 11px;
  color: #667eea;
  background: #f0f4ff;
  padding: 2px 8px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 500;
  border: 1px solid #d0d9ff;
  transition: all 0.2s ease;
}
.sp-pay-plan-link .plan-link-badge:hover {
  background: #667eea;
  color: #fff;
  border-color: #667eea;
}

/* date + amount row inside each scheduled payment */
.scheduled-payments-list ul li .sp-pay-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.scheduled-payments-list ul li .sp-pay-main > span:first-child {
  font-size: 13px;
  color: #555;
  font-weight: 500;
  flex: 1;
}

.scheduled-payments-list ul li .sp-pay-main > span:nth-child(2) {
  font-size: 14px;
  font-weight: 700;
  color: #2e7d32;
  background: #e8f5e9;
  padding: 2px 10px;
  border-radius: 12px;
  min-width: 70px;
  text-align: center;
}

/* delete payment button */
.delete-payment-form {
  display: inline-flex;
  margin-left: 8px;
  flex-shrink: 0;
}

.delete-payment-form button {
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  border-radius: 50%;
  background: #ffebee;
  color: #d32f2f;
  border: 1px solid #ef9a9a;
  cursor: pointer;
  transition: all 0.2s ease;
}

.delete-payment-form button:hover {
  background: #d32f2f;
  color: #fff;
  border-color: #d32f2f;
}

/* alert row under the main row */
.no-booking-alert-row {
  margin-top: 4px;
  font-size: 12px;
  color: #e91e63;
  font-weight: 700;
}

/* inline alerts row */
.alerts-inline-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.alert-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-block;
}

.alert-no-booking {
  background: #fce4ec;
  color: #c2185b;
  border: 1px solid #f48fb1;
}

.alert-has-booking {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #81c784;
}

.alert-one-off {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffb74d;
}


.btn.btn-primary.sched-p-but {
  color: #fff;
  background-color: #e060ec;
  background-color: #9362d2;
  border: none;
  border-radius: 29px;
  width:100%;

      border-radius: 29px;
    font-size: 16px;
    width: 100%;
    background: linear-gradient(-23deg, #b789f0 30%, #5ba1db 100%);

}
.outstanding_pp,
.scheduled_pp {
  font-size: 15px;
  color: #fff;
}
.scheduled_pp strong {
  font-size: 15px;
  color: #000;
  background: #fff;
  padding: 10px;
  display: block;
  border-radius: 30px;
  margin-top: 10px;
}
.outstanding_pp strong {
  font-size: 15px;
  color: #c1005e;
  background: #fff;
  padding: 10px;
  display: block;
  border-radius: 30px;
  margin-top: 10px;
}
.total_paid {
  background: #e91e63;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  color: #fff;
}
.total_paid strong {
  background: #fff;
  padding: 10px;
  border-radius: 30px;
  color: #000;
}

.select2-results__option {
  padding: 6px 8px !important;
  border-bottom: 1px solid #f1f1f1;
}

.select2-results__option:last-child {
  border-bottom: none;
}
/* Highlight ONLY the selected option */
.select2-container--default .select2-results__option--selected {
  background-color: #34dcbd !important;
  color: #000 !important;
}

/* Increase dropdown height */
.select2-results__options {
  max-height: 320px !important; /* Default is 200px */
}

/* Optional: add scrollbar styling (WebKit browsers) */
.select2-results__options::-webkit-scrollbar {
  width: 8px;
}

.select2-results__options::-webkit-scrollbar-thumb {
  background-color: #b3b3b3;
  border-radius: 4px;
}
.select2-search--dropdown {
  display: none !important;
}
.select2-container--default .select2-selection--single{
  height:34px !important;
  border: 1px solid #ccc!important;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color 
ease-in-out .15s, box-shadow 
ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -webkit-transition: border-color 
ease-in-out .15s, -webkit-box-shadow 
ease-in-out .15s;
    transition: border-color 
ease-in-out .15s, -webkit-box-shadow 
ease-in-out .15s;
    transition: border-color 
ease-in-out .15s, box-shadow 
ease-in-out .15s;
    transition: border-color 
ease-in-out .15s, box-shadow 
ease-in-out .15s, -webkit-box-shadow 
ease-in-out .15s;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height: 34px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
  top:5px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  padding-left:15px !important;
  text-align:left !important;
}
.follow-up-callbtn {
  background-color: #eb4ab7;
}
.customer-buttons .btn {
  border-radius: 30px;
  margin-bottom: 10px;
}

.customer-details,
.customer-buttons,
.consnt.butz,
.consent_frms .credits_completed.tp,
.title_b.create span {
  border-radius: 8px;
}
@media all and (max-width: 768px) {
  .padding-left-0 {
    margin-top: 10px;
  }
}
@media all and (min-width: 769px) {
  .padding-right-10 {
    padding-right: 10px;
  }
  .padding-left-0 {
    padding-left: 0px;
  }
}
.sched-a-payment {
  padding: 10px;

  margin-top: 5px;
}
.no-booking-alert {
  margin-left: 8px;
  color: #e91e63;
  font-weight: 700;
  font-size: 12px;
}

.sched-a-payment .bg-wt {
  background: #fff;
  padding-top:15px;
  padding-bottom:15px;
  overflow: hidden;
  border-radius: 15px;
  padding-left:10px;
  padding-right:10px;
}
.sched-a-payment .btn.btn-primary , #multi-schedule-form .btn.btn-primary {

  background: #e060ec;
  color: #fff;
  border: none;
}
.sched-a-payment .btn.btn-primary:hover , #multi-schedule-form .btn.btn-primary:hover{
  background: #d050dc;
  color: #fff;
}
.payment-summary-card.top{
  display: flex;
  padding: 12px;
  font-size: 13px;
  text-align: center;
  margin: 0;
  border-radius: 0;
  border-top: 1px solid #58bed2;
  margin-bottom: 10px;
  BACKGROUND: #f7daff;
  color: #145e91;
}
.payment-summary-card {
  display: flex;
  background: #f3e5f5;
  padding: 12px;
  border-radius: 6px;
  font-size: 13px;
  margin: 5px;
  text-align: center;
}

/* Set custom widths for each column */
.payment-summary-card > div:nth-child(1) {
  flex: 0 0 25%;
  border-right: 1px solid #57bbcf;
}
.payment-summary-card > div:nth-child(2) {
  border-right: 1px solid #57bbcf;
  flex: 0 0 35%;
}
.payment-summary-card > div:nth-child(3) {
  border-right: 1px solid #57bbcf;
  flex: 0 0 15%;
}
.payment-summary-card > div:nth-child(4) {
  flex: 0 0 25%;
  padding-left: 10px;
  padding-right: 10px
}
.tp-header .payment-summary-card .outstanding_cls {
  background: #e91e64;
  color: #fff;
  border-radius: 35px;
}
.tp-header .tp-services-block .service-row:last-child {
 border-bottom:0;
}
/* Optional: keep content centered and spaced */
.payment-summary-card > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tp-card {
  margin-top: 11px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.tp-header {
  padding: 10px 14px;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
.tp-header .payment-summary-card {
  padding: 5px 10px;
  border: 1px solid #57bbcf;
  margin: 5px 0 0 0;
  background:none;
}

/* ============================================
   NEW TP-CARD SLEEK LAYOUT
   ============================================ */

.tp-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.tp-title-row strong {
  font-size: 14px;
  color: #333;
}

.tp-summary-inline {
  color: #666;
  font-size: 13px;
  margin-left: 4px;
}

.tp-content-grid {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 20px;
  align-items: start;
}

/* Services column */
.tp-services-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tp-service-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}

.tp-service-item:last-of-type {
  border-bottom: none;
}

.tp-service-icon {
  width: 75px;
  height: 32px;
  flex-shrink: 0;
}

.tp-service-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tp-service-details {
  flex: 1;
  min-width: 0;
}

.tp-service-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tp-area-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #555;
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 3px;
}

.tp-area-tag img {
  width: 14px;
  height: 14px;
}

.tp-service-price {
  text-align: right;
  min-width: 80px;
}

.tp-price-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.tp-price-row .price-lock-btn {
  background: none;
  border: none;
  font-size: 12px;
  cursor: pointer;
  padding: 2px;
  opacity: 0.4;
  transition: opacity 0.15s;
}

.tp-price-row .price-lock-btn:hover {
  opacity: 1;
}

.tp-service-item.locked .price-lock-btn {
  opacity: 1;
}

.tp-price-row .gift-toggle {
  background: none;
  border: none;
  font-size: 12px;
  cursor: pointer;
  padding: 2px;
  opacity: 0.4;
  transition: opacity 0.15s;
}

.tp-price-row .gift-toggle:hover {
  opacity: 1;
}

.tp-service-item.is-gifted .gift-toggle {
  opacity: 1;
}

.tp-service-item.is-gifted .tp-price-display {
  text-decoration: line-through;
  color: #999;
}

.tp-price-display {
  display: none; /* Hide static display, always show inputs */
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.tp-service-item.locked .tp-price-display {
  color: #856404;
}

/* Always show price inputs by default */
.tp-price-edit {
  display: block;
}

.tp-price-edit .price-input-wrap {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 4px;
  overflow: hidden;
}

.tp-price-edit .price-currency {
  padding: 2px 4px;
  background: #e9ecef;
  color: #495057;
  font-size: 12px;
  border-right: 1px solid #ced4da;
}

.tp-price-edit .price-input {
  border: none;
  padding: 2px 4px;
  font-size: 13px;
  width: 55px;
  outline: none;
}

/* Show save button only when changes are made */
.save-price-changes {
  display: none;
}

.tp-card.editing .save-price-changes {
  display: block !important;
  margin-top: 10px;
}

/* Locked state styling */
.tp-service-item.locked .tp-price-edit .price-input-wrap {
  border-color: #ffc107;
  background: #fffef5;
}

.tp-service-item.locked .tp-price-edit .price-currency {
  background: #fff3cd;
}

.tp-services-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 2px solid #ddd;
  font-weight: 600;
  font-size: 15px;
}

.tp-total-input-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
  position: relative;
}

.tp-total-input-wrap input {
  width: 70px;
  border:1px solid #2e7e33;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  padding: 2px 4px;
  border-radius: 4px;
}

.tp-total-input-wrap input:hover,
.tp-total-input-wrap input:focus {
  border-color: #57bbcf;
  background: #fff;
  outline: none;
}

.tp-total-tooltip {
  position: absolute;
  top: 100%;
  right: 0;
  width: 220px;
  background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%);
  border: 1px solid #ffc107;
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 5px;
  font-size: 12px;
  color: #856404;
  display: none;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Summary column */
.tp-summary-col {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tp-summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.tp-summary-label {
  color: #666;
}

.tp-summary-value {
  font-weight: 600;
  color: #333;
}

.tp-summary-paid {
  color: #2e7d32;
}

.tp-summary-item--highlight {
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid #ddd;
}

.tp-summary-outstanding {
  background: #e91e64;
  color: #fff;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.tp-summary-clear {
  color: #2e7d32;
}

/* Mobile responsive for tp-card */
@media (max-width: 576px) {
  .tp-content-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .tp-summary-col {
    order: -1;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .tp-summary-item {
    flex: 0 0 48%;
  }
  
  .tp-summary-item--highlight {
    flex: 0 0 100%;
    border-top: none;
    padding-top: 0;
    margin-top: 4px;
  }
  
  .tp-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .tp-unscheduled-banner {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
}

.env-open {
  /* background-color: #fff8e1; */
  /* border-left: 6px solid #ff9800; */
  color: #333;
}

.env-closed {
  background-color: #e6ffea;
  /* border-left: 6px solid #28a745; */
  color: #333;
}

.tp-services {
  font-size: 13px;
  color: #555;
  margin-top: 3px;
}

/* Old table - hidden, replaced by compact view */
.tp-table {
  display: none;
  width: 100%;
  border-collapse: collapse;
}

.tp-table td {
  padding: 8px 14px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
  font-size: 13px;
}

.tp-date {
  width: 38%;
  font-weight: 600;
}

.tp-payment {
  width: 40%;
}

.tp-status {
  width: 30%;
  text-align: right;
}

/* ===== COMPACT PAYMENT VIEW ===== */
.tp-payments-compact {
  border-top: 1px solid #eee;
}

.tp-status-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  background: #f9f9f9;
  flex-wrap: wrap;
}

.tp-status-tab {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 600;
}

.tp-status-tab--overdue {
  background: #ffe5e5;
  color: #c0392b;
}

.tp-status-tab--overdue .tp-partial-note {
  font-weight: 400;
  opacity: 0.8;
  font-size: 10px;
}

.tp-status-tab--caught-up {
  background: #e8f5e9;
  color: #2e7d32;
}

.tp-status-tab--upcoming {
  background: #fff8e1;
  color: #f57c00;
}

.tp-status-tab--completed {
  background: #e8f5e9;
  color: #2e7d32;
}

.tp-payment-rows {
  padding: 0 14px 10px;
}

.tp-payment-row {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
}

.tp-payment-row:last-child {
  border-bottom: none;
}

.tp-row-date {
  width: 80px;
  font-weight: 600;
  color: #333;
  flex-shrink: 0;
}

.tp-row-amount {
  flex: 1;
  font-weight: 600;
}

.tp-amount-partial {
  color: #c0392b;
}

.tp-amount-detail {
  font-weight: 400;
  font-size: 11px;
  color: #888;
}

.tp-row-status {
  flex-shrink: 0;
  text-align: right;
  font-size: 12px;
}

.tp-payment-row--overdue {
  background: #fff5f5;
  margin: 0 -14px;
  padding-left: 14px;
  padding-right: 14px;
}

.tp-payment-row--overdue .tp-row-status {
  color: #c0392b;
  font-weight: 600;
}

.tp-payment-row--covered {
  background: #f0f9f0;
  margin: 0 -14px;
  padding-left: 14px;
  padding-right: 14px;
  opacity: 0.8;
}

.tp-payment-row--covered .tp-row-status {
  color: #2e7d32;
}

.tp-payment-row--upcoming .tp-row-status {
  color: #666;
  margin-left:5px;
}

.tp-payment-row--completed {
  opacity: 0.7;
}

.tp-payment-row--completed .tp-row-status {
  color: #2e7d32;
}

.tp-payment-divider {
  height: 1px;
  background: #ddd;
  margin: 8px 0;
}

.tp-completed-details {
  margin-top: 5px;
}

.tp-completed-toggle {
  font-size: 12px;
  color: #666;
  cursor: pointer;
  padding: 5px 0;
  user-select: none;
}

.tp-completed-toggle:hover {
  color: #333;
}

.tp-completed-details[open] .tp-completed-toggle {
  margin-bottom: 5px;
}

/* ===== PAYMENTS RECEIVED SECTION ===== */
.tp-payments-received {
  border-top: 1px solid #e0e0e0;
  padding: 10px 14px;
  background: #fafafa;
}

.tp-received-toggle {
  font-size: 12px;
  font-weight: 600;
  color: #1976d2;
  cursor: pointer;
  padding: 5px 0;
  user-select: none;
  display: block;
}

.tp-received-toggle:hover {
  color: #1565c0;
}

.tp-received-details[open] .tp-received-toggle {
  margin-bottom: 8px;
}

.tp-received-list {
  max-height: 200px;
  overflow-y: auto;
}

.tp-received-row {
  display: flex;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
  font-size: 12px;
  gap: 8px;
}

.tp-received-row:last-child {
  border-bottom: none;
}

.tp-received-date {
  width: 90px;
  color: #666;
  flex-shrink: 0;
}

.tp-received-amount {
  width: 60px;
  font-weight: 600;
  color: #2e7d32;
  flex-shrink: 0;
}

.tp-received-service {
  flex: 1;
  color: #888;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== WIZARD WIDTH CONSTRAINT ===== */
.tp-schedule-wizard {
  max-width: 350px;
  margin: 10px auto 0;
  padding: 15px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.tp-footer {
  background-color: #f9f9f9;
  font-weight: bold;
}
.tp-header .alert-warning {
  padding: 6px 8px;
  align-items: center;
  border-radius: 5px;
  line-height: 1;
  color: #e91e64;
  text-align: left;
  margin-top: 5px;
background:none;
border:none;
}
.tp-header .alert-warning span {
 
  margin-right: 5px;
}

.progress-bar {
  color: white;
  font-weight: bold;
}

.progress {
  background: #e9ecef;
  border-radius: 5px;
  height: 18px;
  position: relative;
  margin-bottom: 5px;
}
.progress-zero {
  text-align: center;
  font-size: 12px;
  color: #e91e64;
  font-weight: 600;
  line-height: 18px;
  background: #ebebeb;
  border-radius: 5px;
  margin-bottom: 5px;
}

.missed-row {
  background-color: #ffe5e5 !important;
}

/* Status Pill Styles */
.status-pill {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.status-pill.completed {
  background: #e6ffea;
  color: #1b5e20;
  border: 1px solid #2ecc71;
}
.status-pill.scheduled {
  background: #fff8e1;
  color: #a66d00;
  border: 1px solid #ffb74d;
}
.status-pill.unscheduled {
  background: #e3f2fd;
  color: #0d47a1;
  border: 1px solid #64b5f6;
}
.status-pill.missed {
  background: #ffebee;
  color: #c62828;
  border: 1px solid #ef5350;
}

/* Highlight missed row */
tr.missed-row td {
  background-color: #ffebee !important;
  color: #c62828;
  font-weight: 600;
}

/* Accordion style for completed plans */
.completed-section {
  margin-top: 30px;
  padding: 0;
  border-radius: 8px;
}

.completed-title {
  font-size: 18px;
  font-weight: 700;
  background: #fff;
  border-radius: 5px;
  padding: 8px

}

details summary {
  cursor: pointer;
  font-weight: bold;
  color: #58bed2;
}




.tp-services-block {
  padding: 15px 0 0 0;
}

.service-row {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  border-bottom: 1px solid #cecece;
  padding-bottom: 5px;
  gap: 10px;
}

.service-row .service-logo_tp_card {
  flex-shrink: 0;
}

.service-row .service-info {
  flex: 1;
  margin-left: 0;
}

.service-row .service-price-col {
  flex-shrink: 0;
  text-align: right;
}

.service-row .service-price-col .price {
  display: block;
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.service-row .price-edit {
  display: none;
  margin-top: 5px;
}

.tp-services-block[style*="block"] .service-row .price {
  display: none;
}

.tp-services-block[style*="block"] .service-row .price-edit {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
}

.price-input-wrap {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 5px;
  overflow: hidden;
}

.price-input-wrap .price-currency {
  padding: 4px 6px;
  background: #e9ecef;
  color: #495057;
  font-weight: 500;
  font-size: 13px;
  border-right: 1px solid #ced4da;
}

.price-input-wrap .price-input {
  border: none;
  padding: 4px 6px;
  font-size: 13px;
  width: 60px;
  outline: none;
  color: #000;
}

.price-input-wrap .price-lock-btn {
  background: #f8f9fa;
  border: none;
  border-left: 1px solid #ced4da;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: all 0.15s;
}

.price-input-wrap .price-lock-btn:hover {
  background: #e9ecef;
}

/* Locked state */
.price-input-wrap.locked {
  border-color: #ffc107;
  background: #fffef5;
}

.price-input-wrap.locked .price-currency {
  background: #fff3cd;
  border-color: #ffc107;
}

.price-input-wrap.locked .price-lock-btn {
  background: #fff3cd;
}

/* Gifted state */
.service-row.is-gifted .price-input-wrap {
  border-color: #28a745;
  background: #e6ffea;
}

.service-row.is-gifted .price-input-wrap .price-currency {
  background: #d4edda;
  border-color: #28a745;
}

/* Gift button */
.gift-toggle {
  display: inline-block;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  color: #333;
  transition: all 0.15s;
}

.gift-toggle:hover {
  background: #e9ecef;
}

.service-row.is-gifted .gift-toggle {
  background: #28a745;
  border-color: #28a745;
  color: #fff;
}

.service-logo_tp_card {
  padding: 3px 8px;
  border-radius: 8px;
  color: #f3e6f5;
}
.service-logo_tp_card img {
  max-width: 100px;
  margin-bottom: 0;
}

.service-info {
  font-size: 14px;
  margin-left: 10px;
}

.area-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.area-item {
  display: flex;
  align-items: center;
  gap: 3px;
  border-radius: 4px;
  flex-direction: column;
}

.area-item img {
  height: 22px;
  width: 22px;
  border-radius: 3px;
}

.tp-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tp-meta-row .toggle-details-btn {
  margin-bottom: 0;
  text-decoration: none;
  margin-left: 10px;
  width: 120px;
  background: #e060ec;
}

.tp-meta-row {
  margin-bottom: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.tp-meta-row .edit-link {
  text-decoration: none;
  margin-bottom: 0;
  background: #e060ec;
}
.locked-input {
  background-color: #fff4d6;
  border: 1px solid #d0a65c;
}
.payment-summary-card input[type="text"] {
  width:75px;
}


/*dropdown services*/
#toggleOutsidePlan{
  background: #fbcfff;
  border-radius: 15px;
  color: #2b6f9f;
  width: 100%;
display: flex;
}
#outsideServiceGrid.logo-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0;
}
#serviceGrid #outsideServiceGrid.logo-service-grid {
  margin-bottom:10px;
}
h3.active_tp_services_title {
  font-size: 17px;
  border-radius: 15px;
  background: #4dabe3;
  color: #fff;
  padding: 5px;
  font-weight: normal;
  margin-bottom:0;
  margin-top:0;
}
.w-100,.w-100-2{
  width:100%;
}
.w-100 .col-xs-4:first-child{
  text-align: left;
  padding-left: 0;
  padding-right: 7px;
}
.w-100-2 .col-xs-4:first-child{
  text-align: left;
  padding-left: 7px;
  padding-right: 0;
}
.ajax-admin-fetch{
  display: block;
  background: #eeeeee;
  overflow: hidden;
  padding-top: 15px;
  border-radius: 15px;
  margin-left: 14px;
  margin-right: 15px;
  border: 1px solid #d9d9d9;
  padding-bottom: 15px;
}

#book_now_outside .book-now-btn{
  width: 100% !important;
  border-radius: 15px;
  height: 48px;
  margin-top: 0;
  padding-left:7px;
}
.w-100 .book_now{
  margin-top:0;
  padding:0;
}

/* ✅ ONLY affect the TP MULTI SERVICE area */
#tpServiceLogos .logo-service-grid {
  display: grid;
  /* grid-template-columns: repeat(1, 1fr);  */
  /* gap: 0; */
  justify-items: center;
  margin-bottom: 0;
}
#tpServiceLogos .tp-service-wrapper {
  width: 100% !important;
}
#selectedServicesRow{
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* ✅ FORCE 3 COLUMNS */
  gap: 14px;
  justify-items: center;
  width:100%;
  /* margin-bottom:14px; */
}
#show-unselected-services, #reset-multi-services{
  background: #fbcfff;
  border-radius: 15px;
  color: #2b6f9f !important;
  fill: #2b6f9f !important;
  margin-bottom: 10px;
  border: none;
  margin-top: 14px;
  display: flex;
  width: 100%;
  align-items: center;
}

#show-unselected-services:focus-visible,
#show-unselected-services:focus,
#reset-multi-services:focus-visible,
#reset-multi-services:focus,
#toggleOutsidePlan:focus-visible,
#toggleOutsidePlan:focus{
  outline:none!important;
  box-shadow:none;
}
#reset-multi-services{
  margin-top:0px
}
#show-unselected-services span, #reset-multi-services span,#toggleOutsidePlan span{
  background: #fff;
  padding: 5px;
  border-radius: 30px;
  display: flex;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding-bottom:7px;
  color: #30c0ba;
}


#unselectedServicesRow {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ✅ FORCE 3 COLUMNS */
  gap: 14px;
  justify-items: center;
  width:100%;
  margin-bottom:10px;
}

.suc_book{
  border-bottom: 1px solid #c7c7c7;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 10px 10px 0px 0px;
}
.suc_book:last-child{
  border-bottom: none;
}
/* ✅ Selected TP services must align as 3-column grid */
#selectedServicesRow .tp-service-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* ✅ SERVICE | TIME | DURATION */
  gap: 14px;
  width: 100%;
  align-items: center;

}
#unselectedServicesRow {
  display: none;
  
}
/* ✅ Logo tile stays in column 1 */
#selectedServicesRow .tp-logo-tile {
  grid-column: 1;
}
/* ✅ Controls sit in columns 2 and 3 as their OWN GRID */
#selectedServicesRow .tp-controls {
  grid-column: 2 / span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;   /* ✅ Time | Duration */
  gap: 14px;                        /* ✅ THIS IS THE MISSING GAP */
  width: 100%;
  max-width: 100%;
}

/* ✅ Fix dropdown width so they fill their grid columns */
#selectedServicesRow .tp-controls select {
  width: 100%;
}

/* ✅ LOCK THE BUTTON SIZE – THIS FIXES THE HEIGHT JUMP */
#tpServiceLogos .tp-logo-tile {
  width: 100% !important;
  height: 35px !important;     /* ✅ FIXED HEIGHT */
  min-height: 35px !important;
  max-height: 35px !important;
  padding: 0 9px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}


/* ✅ NORMALIZE DROPDOWNS */
#tpServiceLogos .tp-controls select.form-control {
  height: 40px;
  font-size:12px;
  text-align:center;
  
}
#tpServiceLogos .d-none-2 {
  display: none !important;
}
.logo-tile, .tp-logo-tile {
  background: #2d6f9f;
  border: 2px solid transparent;
  border-radius: 18px;
  padding: 9px;
  cursor: pointer;
  transition: 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}


.logo-tile img, .tp-logo-tile img{
  max-height: 13px;
  max-width: 100%;
  object-fit: contain;
}

.logo-tile:hover, .tp-logo-tile:hover{
  background: #000000;
}




.type-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  /* margin-bottom: 20px; */
  margin-top:15px;
}

.type-btn {
  padding: 16px;
  border-radius: 14px;
  font-weight: 600;
  background: #2b6f9f;
  cursor: pointer;
  transition: 0.2s;
  color: #fff;
  border: navajowhite;
  font-size:12px;
}

.type-btn.active {
  background: #db2aed;
  color: white;
}
.type-btn{
  background: #ffffff;
  color: #2b6f9f;
}

/*dropdown services*/


#show-bulk-ui{
  margin-bottom: 10px;
  margin-right: auto;
  margin-left: auto;
  display: block;
  margin-top: 20px;
  border-radius: 5px;
  padding: 10px;
  background: #da2bed;
  width:100%;
  
}
#show-bulk-ui:hover{
  
  background: #337ab7;
  color:#fff;
}
.the-ui-blocks{
  margin-bottom:10px;
  margin-top:0px;
}
/* ===============================
   HIDE OLD DROPDOWN UI (incl. Select2)
   =============================== */
   .spm-select-wrap select {
    position:absolute !important;
    left:-99999px !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
  .schedule-payment-wrapper .select2,
  .schedule-payment-wrapper .select2-container {
    display:none !important;
  }
  .schedule-payment-wrapper .spm-open-btn{
    margin-bottom: 10px;;
  }
  
  /* ===============================
     MODAL SHELL
     =============================== */
  .spm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 999999;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
  }
  .spm-modal {
    background: #fff;
    width: 100%;
    max-width: 580px;
    margin: auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: spmSlideIn 0.25s ease-out;
  }
  @keyframes spmSlideIn {
    from {
      opacity: 0;
      transform: translateY(-20px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  .spm-head {
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
  }
  .spm-head strong {
    font-size: 17px;
    font-weight: 600;
  }
  .spm-body {
    padding: 16px;
    max-height: 60vh;
    overflow-y: auto;
    background: #fafafa;
  }
  .spm-close {
    border-radius: 50%;
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    font-size: 20px;
    cursor: pointer;
    transition: background 0.2s ease;
    line-height: 1;
  }
  .spm-close:hover {
    background: rgba(255, 255, 255, 0.35);
  }
  
  /* ===============================
     “TP-CARD-LIKE” SELECTOR CARD
     =============================== */
  .spm-tp-card {
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
    cursor: pointer;
    background: #fff;
    transition: all 0.2s ease;
  }
  .spm-tp-card:hover {
    background: #f8f5ff;
    border-color: #c4b5fd;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(157, 127, 239, 0.15);
  }
  .spm-tp-card.spm-selected {
    background: #f5f0ff;
    border-color: #9d7fef;
    box-shadow: 0 0 0 3px rgba(157, 127, 239, 0.2);
  }
  
  .spm-tp-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .spm-tp-title {
    flex: 1;
  }
  .spm-tp-title .alert-warning {
    padding: 6px 10px;
    align-items: center;
    border-radius: 6px;
    line-height: 1.3;
    color: #b91c1c;
    text-align: left;
    margin-top: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    font-size: 12px;
  }
  .spm-tp-title strong {
    font-size: 14px;
    color: #333;
    display: block;
    margin-bottom: 2px;
  }
  .spm-tp-sub {
    display: none;
  }
  
  /* Service icons row with session badges */
  .spm-services-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
    padding: 14px;
    background: linear-gradient(135deg, #f8f5ff 0%, #f0ebff 100%);
    border-radius: 12px;
    border: 1px solid #e6e0f5;
    justify-content: center;
    align-items: center;
  }
  .spm-service-badge {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    padding: 6px 12px 6px 15px;
    border-radius: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
  .spm-service-badge img {
    height: 15px;
    object-fit: contain;
  }
  .spm-session-count {
    background: linear-gradient(135deg, #e160ec 0%, #d31b5e 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .spm-service-name {
    font-size: 10px;
    color: #666;
    text-align: center;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* ===============================
     PAYMENT SUMMARY STRIP
     =============================== */
  .spm-payment-summary {
    margin-top: 14px;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    align-items: center;
    background: #f7f7f7;
    margin-bottom: 10px;
  }
  .spm-payment-summary .label {
    font-weight: 600;
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  .spm-payment-summary .val {
    font-size: 14px;
    font-weight: 600;
    color: #333;
  }
  
  .spm-owed-pill {
    background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
    color: #fff;
    padding: 6px 12px;
    border-radius: 999px;
    display: inline-block;
    font-weight: 700;
    font-size: 13px;
  }
  
  /* toggle wrapper for right alignment */
  .spm-toggle-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 10px;
  }
  
  /* toggle + details */
  .spm-toggle {
    margin: 0;
    text-decoration: none;
    width: auto;
    padding: 8px 16px;
    background: #e060ec;
    border-radius: 30px;
    color: #fff;
    border: none;
    display: inline-block;
    font-size: 12px;
    cursor: pointer;
    z-index: 10;
    position: relative;
  }
  .spm-toggle:hover {
    background: #c940d9;
  }
  .spm-details {
    display: none;
    margin-top: 14px;
    padding: 14px;
    background: #f9f9f9;
    border-radius: 12px;
    border: 1px solid #eee;
  }
  .spm-details.open {
    display: block;
  }
  
  /* ===============================
     SUMMARY OUTSIDE MODAL
     =============================== */
  .spm-summary-box {
    border: 2px solid #e060ec;
    background: linear-gradient(135deg, #faf7ff 0%, #fff5fd 100%);
    border-radius: 16px;
    padding: 16px 9px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(224, 96, 236, 0.15);
  }
  .spm-summary-box strong {
    color: #333;
    font-size: 14px;
  }
  .spm-summary-text {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    text-align:center;
  }
  .spm-summary-actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
  }
  
  /* ===============================
     TP SERVICES ROWS (DETAILS)
     =============================== */
  .tp-services-block {
    margin: 0;
    padding: 0;
  }
  .tp-service-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #eee;
  }
  .tp-service-row:last-child {
    margin-bottom: 0;
  }
  .tp-service-logo {
    flex-shrink: 0;
    text-align: center;
    width: 100px;
  }
  .tp-service-logo img {
    width: 100%;
    height: auto;
    display: block;
  }
  .tp-service-areas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
  }
  .tp-area-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    background: #f0f0f0;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
  }
  .tp-area-item img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 50%;
  }
  
  /* Old modal-specific service layout (kept hidden if still present in DOM) */
  .spm-service,
  .spm-service-name,
  .spm-areas,
  .spm-area-pill {
    display:none !important;
  }
  
  /* price under each service logo in modal details */
  .tp-service-price {
    margin-top: 4px;
    font-weight: 700;
    font-size: 13px;
    color: #667eea;
  }
  .spm-summary-actions .btn-link{
    background: #f5d5f8;
    border-radius: 20px;
    color: #a020a0 !important;
    fill: #a020a0 !important;
    margin-bottom: 0;
    border: 1px solid #e9b8ed;
    margin-top: 0;
    display: flex;
    width: 100%;
    align-items: center;
    padding: 8px 16px;
    justify-content: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.2s ease;
  }
  .spm-summary-actions .btn-link:hover {
    background: #f0c5f4;
    transform: translateY(-1px);
  }
  .spm-summary-actions .btn-link.text-danger {
    background: #ffebee;
    color: #d32f2f !important;
    border-color: #ffcdd2;
  }
  .spm-summary-actions .btn-link.text-danger:hover {
    background: #ffcdd2;
  }

  .spm-summary-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 8px;
  }
  .spm-summary-row span{
    display: block;
    padding: 12px 14px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #f0d5f3;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    word-break: break-word;
    overflow: hidden;
  }
  .spm-summary-row span strong {
    display: block;
    font-size: 10px;
    color: #999;
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  @media (max-width: 480px) {
    .spm-summary-row {
      grid-template-columns: 1fr;
    }
    .spm-summary-row span {
      font-size: 13px;
      padding: 10px 12px;
    }
    .spm-summary-row span strong {
      font-size: 9px;
    }
  }
  
  @media (max-width: 768px) {
    .spm-summary-row span strong {
      font-size: 9px;
    }
  }
  
  .spm-summary-separator{
    margin:10px 0 6px;
    border:none;
    border-top:1px dashed #ddd;
  }
  
  .spm-summary-future-title{
    font-size:13px;
    margin-bottom:3px;
  }
  
  .spm-summary-future-list{
    margin:0;
    padding: 0;
    font-size:13px;
  }
  .spm-summary-future-list li{
    margin:1px 0;
    padding: 0;
    list-style: none;;
  }
  .spm-open-btn{
    background: #e060ec;
    border-radius: 12px;
    color: #fff;
    border: none;
    padding: 5px 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(224, 96, 236, 0.3);
  }
  .spm-open-btn:hover {
    transform: translateY(-1px);
    background: #d050dc;
    box-shadow: 0 6px 16px rgba(224, 96, 236, 0.4);
    color: #fff;
  }

  /* ===============================
     MOBILE RESPONSIVE FIXES
     =============================== */
  @media (max-width: 576px) {
    .spm-overlay {
      padding: 10px;
    }
    .spm-modal {
      max-width: 100%;
      border-radius: 16px;
    }
    .spm-head {
      padding: 14px 16px;
    }
    .spm-head strong {
      font-size: 15px;
    }
    .spm-body {
      padding: 12px;
      max-height: 70vh;
    }
    .spm-tp-card {
      padding: 12px;
    }
    .spm-tp-title strong {
      font-size: 13px;
      line-height: 1.3;
      word-wrap: break-word;
    }
    .spm-tp-sub {
      font-size: 12px;
    }
    .spm-payment-summary {
      grid-template-columns: 1fr;
      gap: 6px;
      padding: 10px;
    }
    .spm-payment-summary > div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 0;
      border-bottom: 1px solid #eee;
    }
    .spm-payment-summary > div:last-child {
      border-bottom: none;
    }
    .spm-owed-pill {
      padding: 4px 10px;
      font-size: 12px;
    }
    .spm-toggle {
      width: auto;
      padding: 10px 18px;
      font-size: 12px;
      margin: 4px 0;
    }
    .spm-toggle-wrap {
      padding: 8px 0;
    }
    .spm-services-preview {
      gap: 8px;
      padding: 10px;
    }
    .spm-service-badge {
      padding: 5px 10px 5px 15px;
    }
    .spm-service-badge img {
      height: 18px;
    }
    .spm-session-count {
      min-width: 18px;
      height: 18px;
      font-size: 10px;
    }
    .spm-details {
      padding: 10px;
    }
    .tp-service-row {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 10px;
      padding: 10px;
    }
    .tp-service-logo {
      width: 80px;
      text-align: left;
    }
    .tp-service-logo img {
      width: 100%;
      height: auto;
    }
    .tp-service-areas {
      width: 100%;
      gap: 6px;
    }
    .tp-area-item {
      font-size: 11px;
      padding: 3px 8px;
    }
    .tp-area-item img {
      width: 16px;
      height: 16px;
    }
  }

/* ===============================
   MULTI-SCHEDULE PAYMENTS STYLES
   =============================== */
.multi-schedule-form {
     margin-top: 5px;
    padding: 0 10px;

}

.multi-schedule-form .bg-wt {
  background: #fff;
}

.sched-multi-p-but {
color: #fff;
margin-bottom:10px;
    background-color: #e060ec;
    background-color: #9362d2;
    border: none;
    border-radius: 29px;
    width:100%;
        border-radius: 29px;
    background: linear-gradient(-23deg, #9e60ed 30%, #5ba1db 100%);
    width: 100%;
    font-size: 16px;
}


.multi-sched-tp-wrapper {
  margin-bottom: 10px;
}

/* Multi-schedule date rows - matching scheduled-payments-list design */
.multi-sched-date-row {
  background-color: #d9ffac;
  border: 1px solid #eee;
  border-radius: 5px;
  margin-bottom: 8px;
  padding: 10px 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Rows without a booking get a different background */
.multi-sched-date-row.no-booking {
  background-color: #fff3e0;
  border: 1px solid #ffcc80;
}

.multi-sched-date-row:last-child {
  margin-bottom: 0;
}

.multi-sched-date-row .sp-pay-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.multi-sched-date-row .sp-pay-main .multi-sched-date-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 5px;
}

.multi-sched-date-row .sp-pay-main .multi-sched-date-label {
  font-size: 13px;
  color: #555;
  font-weight: 500;
  margin-bottom: 0;
}

.multi-sched-date-row .sp-pay-main .multi-sched-amount-input {
  width: 100%;
  max-width: 120px;
}

.multi-sched-date-row .multi-sched-amount-input {
  width: 80px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid #ccc;
  background: #fff;
}

.multi-sched-remove-date {
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  border-radius: 50%;
  background: #ffebee;
  color: #d32f2f;
  border: 1px solid #ef9a9a;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.multi-sched-remove-date:hover {
  background: #d32f2f;
  color: #fff;
  border-color: #d32f2f;
}

#multi-sched-outstanding-wrap {
  background: #e7f3ff;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #b3d7ff;
}

#multi-sched-outstanding-wrap label {
  font-weight: 600;
  color: #0056b3;
  margin-bottom: 5px;
}

#multi-sched-outstanding {
  font-size: 16px;
  font-weight: 600;
  text-align: left;
}

#multi-sched-dates-container {
  padding: 0;
}

@media (max-width: 576px) {
  .multi-sched-date-row .sp-pay-main {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .multi-sched-date-row .sp-pay-main .multi-sched-date-label {
    font-size: 11px;
    width: 100%;
  }
}

#multi-sched-add-date-wrap {
  border: 1px dashed #28a745;
}

#multi-sched-add-date-btn {
  height: 34px;
}

.datepicker-for-multiple-payments {
  height: 34px;
}

/* ============================================
   Calendar Daily Reports - Lazy Load Styles
   ============================================ */

/* Summary Cards */
.report-summary-cards .summary-card {
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 10px;
  color: #fff;
}

.report-summary-cards .summary-appointments {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.report-summary-cards .summary-expected {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.report-summary-cards .summary-outstanding {
  background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
}

.report-summary-cards .summary-number {
  font-size: 28px;
  font-weight: bold;
  line-height: 1.2;
}

.report-summary-cards .summary-label {
  font-size: 12px;
  text-transform: uppercase;
  opacity: 0.9;
  margin-top: 5px;
}

/* Report Sections */
.report-section {
  margin-bottom: 15px;
}

.report-section-header {
  margin: 0;
  padding: 10px 15px;
  background: #283050;
  color: #fff;
  font-size: 14px;
  border-radius: 4px 4px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.report-section-header:hover {
  background: #3a4266;
}

.report-section-header i {
  transition: transform 0.2s;
}

.report-section-header[aria-expanded="false"] i {
  transform: rotate(-90deg);
}

.report-section-body {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 300px;
  overflow-y: auto;
}

/* Report Items */
#reporting .report-section .separator {
  padding: 8px 10px;
  border-bottom: 1px solid #e9ecef;
}

#reporting .report-section .separator:last-child {
  border-bottom: none;
}

#reporting .report-section .appointment {
  background: transparent;
  padding: 0;
}

#reporting .report-section .appointment a {
  color: #337ab7;
  text-decoration: none;
  display: block;
}

#reporting .report-section .appointment a:hover {
  text-decoration: underline;
}

/* Override link colors when appointment has colored background */
#reporting .initial_consults .report-section-body .appointment a {
  color: #3d8b79;
}

#reporting .take_payments .report-section-body .appointment a {
  color: #337ab7;
}

#reporting .outstanding_section .report-section-body .appointment a {
  color: #d9534f;
}

/* One-off Badge */
.badge-oneoff {
  background: #f0ad4e;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 5px;
  vertical-align: middle;
}

/* No Appointment Badge */
.badge-no-appt {
  background: #5bc0de;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 5px;
  vertical-align: middle;
}

/* Row highlight for payments without appointments */
.no-appointment-row {
  background: #e8f4fc !important;
  border-left: 3px solid #5bc0de;
}

/* Outstanding High Amount Highlight */
.outstanding-high {
  background: #fff3cd !important;
  border-left: 3px solid #f0ad4e;
}

/* Report Totals */
.report-total {
  padding: 10px 15px;
  background: #e9ecef;
  font-weight: bold;
  font-size: 14px;
  border-top: 2px solid #dee2e6;
}

/* Service Counts Container */
#serviceCountsContainer {
  border-radius: 4px;
}

#serviceCountsContainer .logos_serv {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 5px;
}

#serviceCountsContainer .logos_serv span {
  padding: 8px;
  background: #269ec7;
  color: #fff;
  display: flex;
  border-radius: 35px;
  width: 35px;
  height: 35px;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
  line-height: 1;
  margin-right: 5px;
}

/* Mobile Responsive */
@media (max-width: 767px) {
  .report-summary-cards .summary-card {
    margin-bottom: 8px;
  }
  
  .report-summary-cards .summary-number {
    font-size: 22px;
  }
  
  .report-section {
    margin-bottom: 10px;
  }
  
  .report-section-body {
    max-height: 200px;
  }
  
  #serviceCountsContainer {
    flex-direction: column;
    align-items: flex-start;
  }
  
  #serviceCountsContainer .logos_serv {
    width: 100%;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
  
  #serviceCountsContainer .logos_serv img {
    max-width: 100px;
  }
}

/* ================================================
   AI Sessions Management - Card Style UI
   ================================================ */

/* AI Date Button Badge Colors */
.ai-date-btn .badge.ai { background-color: #d12477; }
.ai-date-btn.active-ai-date .badge { background-color: #fff; color: #337ab7; }

/* Treatment Plan Card Container */
.ai-session-plan {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.ai-session-plan .treat_title {
    /* display: flex;
    margin-bottom: 10px; */
    flex-wrap: wrap;
    font-size: 25px;
    color: #155e91;
}

.ai-session-plan .treat_title img {
    height: 30px;
    margin-right: 10px;
}

.ai-session-plan .treat_title strong {
    font-size: 16px;
    color: #333;
}

.ai-session-plan .treat_title .small_caption {
    font-size: 20px;
    margin-bottom: 0px;
}

/* Area Selection Pills */
.ai-area-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin: 4px;
    background: #f5f5f5;
    border: 2px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
}

.ai-area-item .area-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.ai-area-item .area-name {
    text-transform: capitalize;
}

.ai-area-item:hover {
    border-color: #d12477;
    background: #fef0f5;
}

.ai-area-item.selected {
    background: #d12477;
    color: #fff;
    border-color: #d12477;
}

.ai-area-item.selected:hover {
    background: #b01e63;
}

/* Selected Count Indicator */
#ai-selected-count {
    font-weight: bold;
    color: #d12477;
    margin-right: 15px;
}

/* Areas List Container */
.ai-areas-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px 0;
        justify-content: center;
}

/* Mobile Responsive for AI Sessions */
@media (max-width: 767px) {
    .ai-session-plan .treat_title {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .ai-session-plan .small_caption {
        margin-left: 0;
        margin-top: 5px;
    }
    
    .ai-area-item {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    .ai-area-item .area-icon {
        width: 20px;
        height: 20px;
    }
}

/* ================================================
   Multi-Session Recording Mode
   ================================================ */


.toggle-multi-session-mode{
    background: #59bed2;
    color: #fff;
    font-size: 15px;
    padding: 15px;
    border-radius: 8px;
    border: none;
    margin: 10px;
    margin-left: 0;
    font-weight: bold;
}   
.toggle-multi-session-mode.btn-warning.active,.toggle-multi-session-mode.btn-warning.active:focus,.toggle-multi-session-mode.btn-warning:hover,.toggle-multi-session-mode.btn-warning:focus{
background-color: #5aa5f2;
    border-color: #5aa5f2;
}   
.toggle-multi-session-mode.btn-success,
.toggle-multi-session-mode.btn-success:focus,
.toggle-multi-session-mode.btn-success:hover{
background-color: #59bed2;
    border-color: #59bed2;
}   
#select-all-areas-btn, #deselect-all-areas-btn,
#tp-select-all-btn, #tp-deselect-all-btn {
    background: #d12477;
    color: #fff;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 6px;
    border: none;
    margin: 5px;
    font-weight: bold;
}
/* When in multi-select mode, make areas look clickable */
body.multi-session-mode .active_zareas.selectable-area {
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;

    
}
#multi-session-bar .btn-success{
  background-color: #35dcbd;
}
#multi-session-bar .btn-warning {
    color: #fff;
    background-color: #5aa5f2;
    border-color: #5aa5f2;
}


/* Selected state - pink highlight matching AI sessions UI */
body.multi-session-mode .active_zareas.selected-area {
    background: #d12477 !important;
    /* border: 3px solid #d12477; */
    /* border-radius: 8px; */

        background: #bc9858 !important;
        background: #35dcbd !important;
    /* border: 3px solid #bb9758; */
    border-radius: 8px;
    /* margin-top: 10px; */
    /* margin-bottom: 10px; */
}

body.multi-session-mode .active_zareas.selected-area span,
body.multi-session-mode .active_zareas.selected-area .span_sess_left {
    color: #fff !important;
    border-color: #fff !important;
}

/* Disable the individual record buttons visually */
body.multi-session-mode .record_new_sessz {
    opacity: 0.3;
    pointer-events: none;
    cursor: not-allowed;
}

/* Also disable the form selects and datepickers */
body.multi-session-mode .active_zareas select,
body.multi-session-mode .active_zareas input[type="text"] {
    pointer-events: none;
    opacity: 0.3;
}

/* Fade out session history dates and disable delete links */
body.multi-session-mode .history_dates.small .date_single {
    opacity: 0.3;
    pointer-events: none;
}

body.multi-session-mode .history_dates.small .the_date a {
    pointer-events: none;
    cursor: not-allowed;
}

/* Floating Action Bar */
.multi-session-floating-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    color: #fff;
    padding: 15px 20px;
    display: none; /* Hidden by default, shown via JS */
    align-items: center;
    justify-content: center;
    gap: 20px;
    z-index: 9999;
    box-shadow: 0 -3px 10px rgba(0,0,0,0.3);
        text-align: center;
}

#multi-session-count {
    font-size: 16px;
    font-weight: bold;
    color: #d12477;
}

/* Quick access Record button inside treatment plans */
.tp-quick-record-btn {
    padding: 4px 8px;
    margin-left: 10px;
    font-size: 11px;
}

.tp-quick-record-btn.active.btn-warning {
    background: #f0ad4e;
    border-color: #eea236;
}

/* Cancel button in floating bar */
#cancel-multi-session-btn {
    margin-left: 10px;
}

/* Mobile responsive for floating bar */
@media (max-width: 767px) {
    .multi-session-floating-bar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px;
    }
    
    #multi-session-count {
        width: 100%;
        text-align: center;
    }
}

/* ============================================
   Appointment Requests Panel (Calendar & Patient History)
   ============================================ */
.requires-action{
      color: #d12477;
    font-weight: bold;
}
.appt-requests-panel {
    margin-bottom: 20px;
    border-radius: 4px;
    border: 1px solid #ddd;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        margin-top:10px;
}

.appt-requests-panel__header {
    background: linear-gradient(135deg, #337ab7 0%, #8e44ad 100%);
    color: #fff;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px 4px 0 0;

}

.appt-requests-panel__title {
    font-weight: 600;
    font-size: 14px;
}

.appt-requests-panel__title .glyphicon {
    margin-right: 8px;
}
.appt-requests-panel .table>thead:first-child>tr:first-child>th{
  background-color: #cc8dff;
  color:#fff;
}
.appt-requests-panel .table>tbody>tr>td{
background-color: #ddb4ff;
    color: #000000;
}
.appt-requests-panel__count {
    background: rgba(255, 255, 255, 0.25);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    margin-left: 8px;
}

.appt-requests-panel__body {
    padding: 0;
}

.appt-requests-panel__table {
    margin-bottom: 0;
}

.appt-requests-panel__table thead th {
    background: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: #555;
    padding: 10px 15px;
}

.appt-requests-panel__table tbody td {
    padding: 12px 15px;
    vertical-align: middle;
    border-top: 1px solid #eee;
}

.appt-requests-panel__table tbody tr:hover {
    background: #f8f9fa;
}

.appt-requests-panel__patient-link {
    color: #fff;
    font-weight: 600;
}

.appt-requests-panel__patient-link:hover {
    text-decoration: underline;
    color: #fff;

}

.appt-requests-panel__datetime {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.appt-requests-panel__date {
    font-weight: 500;
}

.appt-requests-panel__time {
    color: #fff;
    font-size: 12px;
}

.appt-requests-panel__btn {
    background: #ff7979;
    border-color: #ff7979;
}

.appt-requests-panel__btn:hover {
    background: #286090;
    border-color: #204d74;
    color: #fff;
}

/* Calendar button badge for appointment requests */
.calendar-btn-badge {
    background: #e74c3c;
    color: #fff;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    margin-left: 5px;
    font-weight: bold;
}

/* Mobile responsive */
@media (max-width: 767px) {
    .appt-requests-panel__table thead {
        display: none;
    }
    
    .appt-requests-panel__table tbody td {
        display: block;
        text-align: left;
        padding: 8px 15px;
        border-top: none;
    }
    
    .appt-requests-panel__table tbody td:first-child {
        padding-top: 15px;
        font-weight: 600;
    }
    
    .appt-requests-panel__table tbody td:last-child {
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
    }
    
    .appt-requests-panel__table tbody tr:last-child td:last-child {
        border-bottom: none;
    }
}

/* ============================================
   Appointment Requests Panel - Refined Purple Theme
   ============================================ */

.appt-requests-panel {
    border: none;
    box-shadow: 0 2px 12px rgba(142, 68, 173, 0.15);
    border-radius: 8px;
    overflow: hidden;
}

.appt-requests-panel__header {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 50%, #7d3c98 100%);
    padding: 14px 18px;
    border-radius: 8px 8px 0 0;
}

.appt-requests-panel__title {
    font-size: 15px;
    letter-spacing: 0.3px;
}

.appt-requests-panel__count {
    background: rgba(255, 255, 255, 0.3);
    padding: 3px 12px;
    font-weight: 600;
}

.appt-requests-panel .table>thead:first-child>tr:first-child>th {
    background: linear-gradient(180deg, #f3e8ff 0%, #ede4f7 100%);
    color: #5b2c6f;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 12px 15px;
    border-bottom: 2px solid #d4b8e8;
}

.appt-requests-panel .table>tbody>tr>td {
    background: linear-gradient(180deg, #faf8fc 0%, #f5f0fa 100%);
    color: #4a235a;
    border-top: 1px solid #e8daf0;
    transition: all 0.2s ease;
}

.appt-requests-panel .table>tbody>tr:hover>td {
    background: linear-gradient(180deg, #f0e6f6 0%, #e8dcf2 100%);
}

.appt-requests-panel__patient-link {
    color: #8e44ad;
    font-weight: 600;
    transition: color 0.2s ease;
}

.appt-requests-panel__patient-link:hover {
    color: #5b2c6f;
}

.appt-requests-panel__time {
    color: #7d3c98;
    font-weight: 500;
}

.appt-requests-panel__btn {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(142, 68, 173, 0.3);
    transition: all 0.2s ease;
}

.appt-requests-panel__btn:hover {
    background: linear-gradient(135deg, #8e44ad 0%, #7d3c98 100%);
    box-shadow: 0 4px 8px rgba(142, 68, 173, 0.4);
    transform: translateY(-1px);
    color: #fff;
}

/* ============================================
   CLINIC STAFF SCHEDULE STYLES
   ============================================ */

#clinic-schedule-page {
    padding: 20px;
    background: #f5f5f5;
    min-height: calc(100vh - 60px);
}

/* Navigation */
.clinic-schedule__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.clinic-schedule__nav-btn {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.clinic-schedule__nav-btn:hover {
    background: #337ab7;
    color: #fff;
    border-color: #337ab7;
}

.clinic-schedule__title {
    margin: 0;
    font-size: 24px;
    min-width: 200px;
    text-align: center;
    color: #333;
}

/* Legend */
.clinic-schedule__legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.clinic-schedule__legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.clinic-schedule__legend-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

/* Calendar Grid */
.clinic-schedule__calendar {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
}

.clinic-schedule__header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #337ab7;
    color: #fff;
}

.clinic-schedule__header-cell {
    padding: 12px 10px;
    text-align: center;
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;
}

.clinic-schedule__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.clinic-schedule__day {
    min-height: 220px;
    border: 1px solid #e0e0e0;
    border-top: none;
    border-left: none;
    padding: 8px;
    cursor: pointer;
    transition: background 0.2s;
    background: #fff;
}

.clinic-schedule__day:nth-child(7n) {
    border-right: none;
}

.clinic-schedule__day:hover {
    background: #f0f7ff;
}

.clinic-schedule__day--empty {
    background: #fafafa;
    cursor: default;
}

.clinic-schedule__day--empty:hover {
    background: #fafafa;
}

.clinic-schedule__day--today {
    background: #fffde7;
}

.clinic-schedule__day--today:hover {
    background: #fff9c4;
}

.clinic-schedule__day--has-pending {
    box-shadow: inset 0 0 0 2px #ffc107;
}

.clinic-schedule__day-number {
    display: block;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 5px;
    color: #333;
}

/* Schedule layout - no left time labels, times on bars */
.clinic-schedule__day-schedule {
    display: flex;
    justify-content: center;
    height: 180px;
    padding-top: 5px;
    padding-bottom:15px;
}

.clinic-schedule__columns {
    display: flex;
    gap: 6px;
}

.clinic-schedule__column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 32px;
}

.clinic-schedule__column-initial {
    font-size: 13px;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 14px;
}

.clinic-schedule__column-track {
    position: relative;
    width: 18px;
    flex: 1;
    background: #e8e8e8;
    border-radius: 6px;
}

.clinic-schedule__vbar {
    position: absolute;
    width: 100%;
    border-radius: 6px;
    left: 0;
    opacity: 0.9;
    transition: opacity 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    overflow: visible;
}

.clinic-schedule__vbar-start,
.clinic-schedule__vbar-end {
    position: absolute;
    font-size: 9px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.9);
    padding: 1px 3px;
    border-radius: 3px;
    line-height: 1.1;
}

.clinic-schedule__vbar-start {
    top: -1px;
    transform: translateX(-50%) translateY(-100%);
}

.clinic-schedule__vbar-end {
    bottom: -1px;
    transform: translateX(-50%) translateY(100%);
}


.clinic-schedule__vbar--modified {
    box-shadow: 0 0 0 2px #17a2b8;
}

.clinic-schedule__vbar--pending {
    box-shadow: 0 0 0 2px #ffc107;
    animation: pulse-pending 1.5s ease-in-out infinite;
}

@keyframes pulse-pending {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.5; }
}

.clinic-schedule__day-staff {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.clinic-schedule__staff-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

.clinic-schedule__staff-badge--off {
    opacity: 0.4;
    text-decoration: line-through;
}

.clinic-schedule__staff-badge--modified {
    box-shadow: 0 0 0 2px #17a2b8;
}

.clinic-schedule__staff-badge--pending {
    box-shadow: 0 0 0 2px #ffc107;
}

/* Pending Requests Panel - Full width above calendar */
.clinic-schedule__pending-panel {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 20px auto;
    background: #fff8e1;
    border: 1px solid #ffc107;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 15px;
}

.clinic-schedule__pending-panel h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
    color: #856404;
}

.clinic-schedule__pending-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.clinic-schedule__pending-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: #fff;
    border-radius: 6px;
    border-left: 4px solid #ffc107;
    flex-wrap: wrap;
    gap: 10px;
}

.clinic-schedule__pending-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
}

.clinic-schedule__pending-info strong {
    color: #333;
    font-size: 14px;
}

.clinic-schedule__pending-date {
    color: #666;
    font-size: 13px;
}

.clinic-schedule__pending-type {
    display: inline-block;
    font-size: 11px;
    background: #e9ecef;
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
}

.clinic-schedule__pending-hours {
    font-size: 13px;
    color: #17a2b8;
}

.clinic-schedule__pending-reason {
    font-size: 13px;
    color: #666;
    font-style: italic;
}

.clinic-schedule__pending-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Request History Panel (Staff) - Full width above calendar */
.clinic-schedule__history-panel {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 20px auto;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 15px;
}

.clinic-schedule__history-panel h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
    color: #495057;
}

.clinic-schedule__history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.clinic-schedule__history-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-radius: 6px;
    border-left: 4px solid #6c757d;
    background: #fff;
}

.clinic-schedule__history-item--approved {
    border-left-color: #28a745;
}

.clinic-schedule__history-item--denied {
    border-left-color: #dc3545;
}

.clinic-schedule__history-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
}

.clinic-schedule__history-date {
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.clinic-schedule__history-status {
    font-size: 11px;
    text-transform: uppercase;
}

.clinic-schedule__history-type {
    font-size: 13px;
    color: #555;
}

.clinic-schedule__history-reason {
    font-size: 13px;
    color: #666;
    font-style: italic;
}

.clinic-schedule__history-notes {
    font-size: 13px;
    color: #856404;
    background: #fff3cd;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Admin Request History (Below Calendar) */
.clinic-schedule__admin-history {
    margin: 30px auto 0 auto;
    max-width: 1200px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
}

.clinic-schedule__admin-history h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: #495057;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 10px;
}

.clinic-schedule__admin-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.clinic-schedule__admin-history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    border-radius: 6px;
    border-left: 4px solid #6c757d;
    background: #fff;
    flex-wrap: wrap;
}

.clinic-schedule__admin-history-item--approved {
    border-left-color: #28a745;
}

.clinic-schedule__admin-history-item--denied {
    border-left-color: #dc3545;
}

.clinic-schedule__admin-history-status {
    font-size: 11px;
    text-transform: uppercase;
    min-width: 70px;
}

.clinic-schedule__admin-history-date {
    font-weight: 600;
    color: #333;
    font-size: 14px;
    min-width: 120px;
}

.clinic-schedule__admin-history-type {
    font-size: 13px;
    color: #555;
    min-width: 150px;
}

.clinic-schedule__admin-history-reason {
    font-size: 13px;
    color: #666;
    font-style: italic;
    flex: 1;
}

.clinic-schedule__admin-history-notes {
    font-size: 12px;
    color: #856404;
    background: #fff3cd;
    padding: 3px 8px;
    border-radius: 4px;
}

.clinic-schedule__admin-history-reviewed {
    color: #6c757d;
    margin-left: auto;
}

/* Day Detail Modal */
.clinic-schedule__day-detail {
    padding: 0;
}

.clinic-schedule__detail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
}

.clinic-schedule__detail-item:last-child {
    border-bottom: none;
}

.clinic-schedule__detail-item--pending {
    background: #fff8e1;
}

.clinic-schedule__detail-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
}

.clinic-schedule__detail-hours {
    color: #28a745;
    font-weight: 500;
    margin-left: auto;
}

.clinic-schedule__detail-off {
    color: #dc3545;
    font-style: italic;
    margin-left: auto;
}

.clinic-schedule__detail-actions {
    width: 100%;
    margin-top: 8px;
    display: flex;
    gap: 8px;
}

/* Header Badge for Pending Requests */
.clinic-schedule-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #dc3545;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    border-radius: 10px;
    margin-left: 5px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #clinic-schedule-page {
        padding: 0 10px;
        overflow-x: hidden;
        width: 100%;
    }
    
    .clinic-schedule__pending-panel,
    .clinic-schedule__history-panel {
        margin: 0 0 15px 0;
        padding: 12px;
    }
    
    .clinic-schedule__pending-item,
    .clinic-schedule__history-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .clinic-schedule__pending-info,
    .clinic-schedule__history-info {
        width: 100%;
    }
    
    .clinic-schedule__calendar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100vw;
        margin: 0;
    }
    
    .clinic-schedule__header,
    .clinic-schedule__grid {
        min-width: 600px;
    }
    
    .clinic-schedule__day {
        min-height: 140px;
        padding: 3px;
    }
    
    .clinic-schedule__day-number {
        font-size: 12px;
    }
    
    .clinic-schedule__day-schedule {
        height: 100px;
    }
    
    .clinic-schedule__column {
        width: 18px;
    }
    
    .clinic-schedule__column-initial {
        font-size: 9px;
    }
    
    .clinic-schedule__column-track {
        width: 10px;
    }
    
    .clinic-schedule__vbar-start,
    .clinic-schedule__vbar-end {
        font-size: 7px;
        padding: 1px 2px;
    }
    
    .clinic-schedule__staff-badge {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }
    
    .clinic-schedule__header-cell {
        padding: 6px 2px;
        font-size: 10px;
    }
    
    .clinic-schedule__nav {
        gap: 8px;
        padding: 10px 5px;
    }
    
    .clinic-schedule__nav-btn {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .clinic-schedule__title {
        font-size: 16px;
        min-width: 120px;
    }
    
    .clinic-schedule__legend {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px;
        margin: 0 5px 15px 5px;
    }
    
    .clinic-schedule__legend-item {
        font-size: 12px;
    }
}

/* ============================================
   Payment Schedule Wizard (PSW)
   ============================================ */

/* Wizard container */
.tp-schedule-wizard {
    margin-top: 15px;
    padding: 20px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 12px;
}

/* Step header */
.psw-step-header {
    font-size: 13px;
    font-weight: 600;
    color: #667eea;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 20px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9ecef;
        text-align: center;
    background: #657eea;
    padding: 5px;
    border-radius: 14px;
    color: #fff;
}

.psw-step-header:first-child {
    margin-top: 0;
}

/* Step header for dates section (adds spacing above) */
.psw-step-header--dates {
    margin-top: 25px;
}

/* Simple available amount display (replaces full summary in combined view) */
.psw-available-amount {
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #333;
    text-align: center;
    margin-left:15px;
    margin-right:15px;
}

.psw-available-amount strong {
    color: #28a745;
    font-size: 18px;
    font-weight: 700;
}

/* No plan variant */
.psw-available-amount--no-plan {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    text-align: left;
}

.psw-available-amount__label {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.psw-available-amount__text {
    display: block;
    font-size: 13px;
    color: #666;
}

/* Loading state for dates */
.psw-dates-loading {
    text-align: center;
    padding: 30px;
    color: #666;
    font-size: 14px;
}

/* ============================================
   UNIFIED PLAN CARD DESIGN (used everywhere)
   ============================================ */

/* Base plan card - used in wizard, booking, single payment */
.plan-card {
    border: 2px solid #e060ec;
    background: linear-gradient(135deg, #faf7ff 0%, #fff5fd 100%);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(224, 96, 236, 0.15);
    text-align: center;
}

/* Selection mode (wizard only - shows radio/badge at top) */
.plan-card--selectable {
    cursor: pointer;
    transition: all 0.2s ease;
}

.plan-card--selectable:hover {
    border-color: #c945d9;
    box-shadow: 0 6px 16px rgba(224, 96, 236, 0.25);
    transform: translateY(-2px);
}

.plan-card--selectable.selected {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2), 0 4px 12px rgba(102, 126, 234, 0.15);
}

/* No plan variant */
.plan-card--no-plan {
    background: linear-gradient(135deg, #f8f9fa 0%, #f0f0f0 100%);
    border-style: dashed;
    border-color: #adb5bd;
}

/* Selection header - radio + badge (wizard only) */
.plan-card__selection-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.plan-card__radio {
    width: 20px;
    height: 20px;
    border: 2px solid #adb5bd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.plan-card--selectable.selected .plan-card__radio {
    border-color: #667eea;
    background: #667eea;
}

.plan-card--selectable.selected .plan-card__radio::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
}

.plan-card__selected-badge {
    background: #667eea;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.plan-card--selectable.selected .plan-card__selected-badge {
    opacity: 1;
}

/* Date and Summary - centered, full width */
.plan-card__date {
    font-weight: 700;
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
}

.plan-card__summary {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
}

/* Financials - 3 row grid layout */
.plan-card__financials {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Row 1: Total (full width) */
.plan-card__total-row {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}

.plan-card__total-row .label {
    font-size: 10px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 2px;
}

.plan-card__total-row .value {
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

/* Row 2: Paid + Outstanding (2 columns) */
.plan-card__paid-outstanding-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.plan-card__amount-box {
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}

.plan-card__amount-box .label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 2px;
}

.plan-card__amount-box .value {
    font-size: 16px;
    font-weight: 700;
}

/* Paid box - green */
.plan-card__amount-box--paid {
    background: #d4edda;
    border: 1px solid #c3e6cb;
}

.plan-card__amount-box--paid .label {
    color: #155724;
}

.plan-card__amount-box--paid .value {
    color: #155724;
}

/* Outstanding box - red */
.plan-card__amount-box--outstanding {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
}

.plan-card__amount-box--outstanding .label {
    color: #721c24;
}

.plan-card__amount-box--outstanding .value {
    color: #721c24;
}

/* Row 3: Unscheduled (full width, warning color) */
.plan-card__unscheduled-row {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.plan-card__unscheduled-row .icon {
    font-size: 16px;
}

.plan-card__unscheduled-row .label {
    font-size: 10px;
    font-weight: 600;
    color: #856404;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.plan-card__unscheduled-row .value {
    font-size: 16px;
    font-weight: 700;
    color: #856404;
}

/* Card actions (Change/Cancel buttons) */
.plan-card__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 12px;
}

.plan-card__change-btn,
.plan-card__cancel-btn {
    padding: 8px 24px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.plan-card__change-btn {
    background: #e9ecef;
    color: #28a745;
}

.plan-card__change-btn:hover {
    background: #dee2e6;
}

.plan-card__cancel-btn {
    background: #fce4ec;
    color: #dc3545;
}

.plan-card__cancel-btn:hover {
    background: #f8bbd9;
}

/* Legacy psw-plan-card - redirect to new classes */
.psw-plan-card {
    border: 2px solid #e060ec;
    background: linear-gradient(135deg, #faf7ff 0%, #fff5fd 100%);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(224, 96, 236, 0.15);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.psw-plan-card:hover {
    border-color: #c945d9;
    box-shadow: 0 6px 16px rgba(224, 96, 236, 0.25);
    
}

.psw-plan-card.selected {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2), 0 4px 12px rgba(102, 126, 234, 0.15);
}

.psw-plan-card--no-plan {
    background: linear-gradient(135deg, #f8f9fa 0%, #f0f0f0 100%);
    border-style: dashed;
    border-color: #adb5bd;
}

.psw-plan-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.psw-plan-card__date {
    font-weight: 700;
    font-size: 14px;
    color: #333;
    text-align: center;
    width: 100%;
}

.psw-plan-card__summary {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
    text-align: center;
}

.psw-plan-card__financials {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.psw-plan-card__selected-badge {
    background: #667eea;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.psw-plan-card.selected .psw-plan-card__selected-badge {
    opacity: 1;
}

.psw-plan-card__radio {
    width: 20px;
    height: 20px;
    border: 2px solid #adb5bd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.psw-plan-card.selected .psw-plan-card__radio {
    border-color: #667eea;
    background: #667eea;
}

.psw-plan-card.selected .psw-plan-card__radio::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
}

/* Plan Selection List (wizard Step 1) */
.psw-plan-list {
    border: 2px solid #e060ec;
    background: linear-gradient(135deg, #faf7ff 0%, #fff5fd 100%);
    border-radius: 16px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(224, 96, 236, 0.15);
}

.psw-plan-list .ips-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(224, 96, 236, 0.2);
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.psw-plan-list .ips-list-options {
    
    padding: 8px;
}

.psw-hide-list-btn {
    padding: 6px 16px;
    font-size: 12px;
    color: #dc3545;
    background: #fce4ec;
    border-radius: 15px;
    font-weight: 600;
}

.psw-hide-list-btn:hover {
    background: #f8bbd9;
    text-decoration: none;
}

/* Selected plan summary (Step 2) */
.psw-selected-summary {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.psw-selected-summary__title {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.psw-selected-summary__date {
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.psw-selected-summary__text {
    font-size: 13px;
    color: #555;
    margin-bottom: 12px;
}

.psw-selected-summary__financials {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 13px;
    padding: 10px 0;
    border-top: 1px solid #eee;
}

.psw-selected-summary__financials div {
    color: #555;
}

.psw-selected-summary__available {
    font-size: 14px;
    font-weight: 600;
    color: #28a745;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

/* Amount input (Step 2) */
.psw-amount-wrap {
    margin-top: 15px;
}

.psw-amount-wrap label {
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
    color: #333;
}

.psw-amount-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.psw-amount-input .currency-symbol {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.psw-amount-input input {
    flex: 1;
    font-size: 16px;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 8px;
}

.psw-amount-hint {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}

/* Info banner (Step 3) */
.psw-info-banner {
    background: #e7f3ff;
    border: 1px solid #b8daff;
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.psw-info-banner--warning {
    background: #fff8e1;
    border-color: #ffe082;
}

.psw-info-banner i,
.psw-info-banner .psw-icon {
    font-size: 18px;
    color: #0066cc;
    flex-shrink: 0;
}

.psw-info-banner--warning .psw-icon {
    color: #856404;
}

.psw-info-banner__text {
    font-size: 13px;
    color: #333;
    line-height: 1.4;
}

/* Distributing amount header */
.psw-distributing {
    font-size: 14px;
    color: #333;
    margin-bottom: 15px;
}

.psw-distributing strong {
    color: #28a745;
}

/* Date rows (Step 3) */
.psw-date-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 8px;
}

.psw-date-row__icon {
    font-size: 16px;
    flex-shrink: 0;
}

.psw-date-row__date {
    flex: 1;
    font-weight: 500;
    font-size: 14px;
}

.psw-date-row__badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 12px;
    background: #d4edda;
    color: #155724;
    flex-shrink: 0;
}

.psw-date-row__badge--no-booking {
    background: #f8f9fa;
    color: #6c757d;
}

.psw-date-row__amount {
    width: 100px;
}

.psw-date-row__amount input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    text-align: right;
    font-size: 14px;
}

.psw-date-row__remove {
    color: #dc3545;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}

.psw-date-row__remove:hover {
    color: #a71d2a;
}

/* Add date manually section */
.psw-add-date {
    background: #f8f9fa;
    border: 1px dashed #dee2e6;
    border-radius: 8px;
    padding: 12px 15px;
    margin-top: 10px;
}

.psw-add-date__label {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

.psw-add-date__row {
    display: flex;
    gap: 10px;
}

.psw-add-date__input {
    flex: 1;
}

.psw-add-date__input input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
}

.psw-add-date__btn {
    flex-shrink: 0;
}

/* Total summary (Step 3) */
.psw-total-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: #e8f5e9;
    border-radius: 8px;
    margin-top: 15px;
}

.psw-total-summary--warning {
    background: #fff3e0;
}

.psw-total-summary__label {
    font-weight: 600;
    color: #333;
}

.psw-total-summary__amount {
    font-weight: 600;
    font-size: 16px;
    color: #28a745;
}

.psw-total-summary--warning .psw-total-summary__amount {
    color: #e65100;
}

.psw-total-summary__icon {
    font-size: 18px;
    margin-left: 5px;
}

.psw-total-summary__hint {
    font-size: 12px;
    color: #666;
    margin-top: 3px;
}

/* Action buttons */
.psw-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #dee2e6;
}

.psw-actions .btn {
    padding: 10px 20px;
}
.psw-actions .btn-primary {
    background: #667eea;
    border-color: #667eea;
    color: #fff;
    font-weight: 600;
}

/* Unscheduled warning with button */
.tp-unscheduled-warning {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.tp-schedule-btn {
    white-space: nowrap;
}

/* New unscheduled banner */
.tp-unscheduled-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #fff3cd 0%, #ffe8a1 100%);
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 12px;
    font-size: 13px;
    color: #856404;
}

.tp-unscheduled-banner .tp-schedule-btn {
    background: #856404;
    border-color: #856404;
    color: #fff;
    font-weight: 500;
    background:linear-gradient(-23deg, #9e60ed 30%, #5ba1db 100%);
    margin-bottom: 0;
}

.tp-unscheduled-banner .tp-schedule-btn:hover {
    background: #9e60ed;
    border-color: #9e60ed;
}

/* Main wizard container at bottom */
.psw-main-container {
    margin-top: 15px;
    padding: 20px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 12px;
}

/* Hide progress bar on tp-card */
.tp-card .progress,
.tp-card .progress-zero {
    display: none;
}

@media (max-width: 767px) {
    .psw-date-row {
        flex-wrap: wrap;
    }
    
    .psw-date-row__date {
        flex-basis: 100%;
        margin-bottom: 5px;
    }
    
    .psw-date-row__amount {
        flex: 1;
    }
    
    .psw-plan-card__financials {
        flex-direction: column;
        gap: 5px;
    }
    
    .psw-actions {
        flex-direction: column;
    }
    
    .psw-actions .btn {
        width: 100%;
    }
}

/* ============================================
   Inline Payment Selector (IPS)
   ============================================ */

/* Hide all environment_id dropdowns - they are handled by inline selectors */
select[name="environment_id"],
select[name^="environment_id["],
.env-select.environment_trigger,
select[name="environment_id"] + .select2-container,
select[name^="environment_id["] + .select2-container,
.env-select.environment_trigger + .select2-container,
.environment_id .select2-container {
    display: none !important;
}

.inline-payment-selector {
    margin-bottom: 15px;
}

.scheduled-payments-list h4.ips-form-title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    text-align:center;
}

.ips-header {
    display: none;
}

.ips-icon {
    display: none;
}

/* Selected Plan Display - uses unified plan-card design */
.ips-selected-plan {
    border: 2px solid #e060ec;
    background: linear-gradient(135deg, #faf7ff 0%, #fff5fd 100%);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(224, 96, 236, 0.15);
    text-align: center;
}

/* Reuse plan-card styles inside ips-selected-plan */
.ips-selected-plan .psw-plan-card__date {
    font-weight: 700;
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
}

.ips-selected-plan .psw-plan-card__summary {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
}

.ips-selected-plan .psw-plan-card__financials {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Legacy ips-plan-info styles - kept for backwards compatibility */
.ips-plan-info {
    display: block;
}

.ips-plan-icon {
    display: none;
}

.ips-plan-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ips-plan-header {
    font-weight: 700;
    font-size: 14px;
    color: #333;
    margin-bottom: 2px;
}

.ips-plan-date {
    font-size: 14px;
    color: #555;
    margin-bottom: 2px;
}

.ips-plan-summary {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
}

/* Financial Grid */
.ips-plan-amounts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.ips-amount-box {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}

.ips-amount-box .label {
    font-size: 10px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    display: block;
}

.ips-amount-box .value {
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

.ips-amount-box .value.outstanding {
    color: #dc3545;
}

.ips-amount-box .value.unscheduled {
    color: #6f42c1;
}

/* Action buttons in card */
.ips-card-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.ips-change-btn,
.ips-clear-btn {
    padding: 8px 24px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

.ips-change-btn {
    background: #e9ecef;
    color: #28a745;
}

.ips-change-btn:hover {
    background: #dee2e6;
    text-decoration: none;
}

.ips-clear-btn {
    background: #fce4ec;
    color: #dc3545;
}

.ips-clear-btn:hover {
    background: #f8bbd9;
    text-decoration: none;
}

/* Plan Selection List */
.ips-plan-list {
    border: 2px solid #e060ec;
    background: linear-gradient(135deg, #faf7ff 0%, #fff5fd 100%);
    border-radius: 16px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(224, 96, 236, 0.15);
}

.ips-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(224, 96, 236, 0.2);
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.ips-cancel-change,
.ips-cancel-date-change {
    padding: 6px 16px;
    font-size: 12px;
    color: #dc3545;
    background: #fce4ec;
    border-radius: 15px;
    font-weight: 600;
}

.ips-cancel-change:hover,
.ips-cancel-date-change:hover {
    background: #f8bbd9;
    text-decoration: none;
}

/* Bulk plan list cancel button */
.bulk-plan-list-cancel {
    padding: 6px 16px;
    font-size: 12px;
    color: #dc3545;
    background: #fce4ec;
    border-radius: 15px;
    font-weight: 600;
    text-decoration: none;
}

.bulk-plan-list-cancel:hover {
    background: #f8bbd9;
    text-decoration: none;
    color: #dc3545;
}

.ips-list-options {
    
    
    padding: 8px;
}

.ips-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    cursor: pointer;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.ips-option:last-child {
    margin-bottom: 0;
}

.ips-option:hover {
    background: #f8f5ff;
    border-color: #c4b5fd;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(157, 127, 239, 0.15);
}

.ips-option.selected {
    background: #f5f0ff;
    border-color: #9d7fef;
    box-shadow: 0 0 0 2px rgba(157, 127, 239, 0.2);
}

.ips-option-radio {
    color: #667eea;
    font-size: 16px;
    width: 20px;
    flex-shrink: 0;
}

.ips-option-date {
    font-weight: 600;
    font-size: 13px;
    min-width: 90px;
    color: #333;
}

.ips-option-summary {
    flex: 1;
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ips-option-unscheduled {
    font-size: 11px;
    color: #6f42c1;
    font-weight: 600;
    white-space: nowrap;
}

.ips-option--no-plan {
    background: #fafafa;
}

.ips-option--no-plan .ips-option-date {
    color: #666;
    font-weight: 500;
}

/* Plan list option - card style (compact) */
.ips-option--card {
    display: block;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ips-option--card:hover {
    border-color: #6f42c1;
    background: #f8f5ff;
    transform: none;
    box-shadow: none;
}

.ips-option--card.selected {
    border-color: #6f42c1;
    background: #f3e8ff;
    box-shadow: none;
}

.ips-option--card:last-child {
    margin-bottom: 0;
}

.ips-option__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.ips-option__radio {
    color: #6f42c1;
    font-size: 14px;
    width: 16px;
    flex-shrink: 0;
}

.ips-option__date {
    font-weight: 600;
    font-size: 13px;
    color: #495057;
    width: 100%;
    text-align:center;
}

.ips-option__services {
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 4px;
    padding-left: 24px;
    text-align:center;
}

.ips-option__financials {
    font-size: 11px;
    color: #868e96;
    margin-bottom: 4px;
    padding-left: 24px;
}

.ips-option__unscheduled {
    font-size: 12px;
    font-weight: 500;
    color: #e67700;
    padding-left: 24px;
}

.ips-option__scheduled {
    font-size: 12px;
    color: #28a745;
    padding-left: 24px;
}

/* Total row */
.ips-option__total-row {
display: flex;
    font-size: 11px;
    color: #495057;
    margin-bottom: 4px;
    background: #fff;
    border-radius: 5px;
    padding: 2px;
    justify-content: center;
    align-items: center;
    border: 1px solid #e6e6e6;
}

.ips-option__total-row .label {
    font-weight: 500;
    color:inherit;
    font-size:inherit;
}

.ips-option__total-row .value {
    font-weight: 600;
}

/* Paid + Outstanding row */
.ips-option__paid-outstanding-row {
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
}

.ips-option__amount-box {
    flex: 1;
    padding: 4px 6px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
}

.ips-option__amount-box .label {
    font-weight: 500;
    color:inherit;
    font-size:inherit;
}

.ips-option__amount-box .value {
    font-weight: 600;
}

/* Paid box - green tint */
.ips-option__amount-box--paid {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    justify-content: center;
}

/* Outstanding box - orange/red tint */
.ips-option__amount-box--outstanding {
    background: #f8d7db;
    color: #721c25;
    border: 1px solid #f5c6cb;
    justify-content: center;
}

/* Unscheduled warning row */
.ips-option__unscheduled-row {
display: flex;
    align-items: center;
    gap: 4px;
    
    font-size: 11px;
    color: #856504;
    font-weight: 500;
    background: #fff4cd;
    margin-left: 23px;
    padding-right: 4px;
    border-radius: 5px;
    padding:2px;
    border: 1px solid #ffc206;
    justify-content: center;
}
.ips-option__unscheduled-row .label{
  color:inherit;
  font-size:inherit;
}
.ips-option__unscheduled-row .icon {
    font-size: 11px;
}

.ips-option__unscheduled-row .value {
    
    font-weight: 600;
}

/* No plan option in card style - simpler */
.ips-option--card.ips-option--no-plan .ips-option__services {
    color: #868e96;
    font-style: italic;
    margin-bottom: 0;
}

.ips-option--card.ips-option--no-plan .ips-option__date {
    color: #666;
}

/* IPS Option with booking badge below date */
.ips-option--with-badge {
    align-items: flex-start;
}

.ips-option--with-badge .ips-option-radio {
    margin-top: 2px;
}

.ips-option-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.ips-option-booking-badge {
    font-size: 10px;
    color: #155724;
    background: #d4edda;
    padding: 2px 8px;
    border-radius: 10px;
    width: fit-content;
}

/* Amount Input */
.ips-amount {
    margin-top: 0;
    margin-bottom: 15px;
}

.ips-amount label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

.ips-amount .input-group {
    max-width: 100%;
        width: 100%;
}

.ips-amount .input-group-addon {
    display: none;
}

.ips-amount input {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 14px;
    width: 100%;
}

.ips-amount input::placeholder {
    color: #999;
}

/* ============================================
   Date Selector (Single Payment Only)
   ============================================ */

.ips-date-selector {
    margin-top: 0;
    margin-bottom: 15px;
}

.ips-date-selector > label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.ips-selected-date {
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 8px;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ips-date-info {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ips-date-icon {
    font-size: 18px;
}

.ips-date-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ips-date-display {
    font-size: 14px;
    color: #333;
}

.ips-date-badge .badge {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 12px;
}

.ips-date-badge .badge-success {
    background: #d4edda;
    color: #155724;
}

.ips-date-badge .badge-warning {
    background: #fff3cd;
    color: #856404;
}

.ips-date-badge .badge-secondary {
    background: #e9ecef;
    color: #495057;
}

.ips-change-date-btn {
    padding: 8px 16px;
    font-size: 12px;
    color: #28a745;
    background: #e9ecef;
    border-radius: 15px;
    font-weight: 600;
}

.ips-change-date-btn:hover {
    background: #dee2e6;
    text-decoration: none;
}

.ips-date-list {
    border: 2px solid #e060ec;
    background: linear-gradient(135deg, #faf7ff 0%, #fff5fd 100%);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(224, 96, 236, 0.15);
}

.ips-date-options {
  
    overflow-y: auto;
    padding: 8px;
}

.ips-manual-date {
    border-top: 1px solid rgba(224, 96, 236, 0.2);
    background: rgba(255,255,255,0.5);
}

.ips-option--manual {
    background: #fafafa;
}

.ips-manual-icon {
    margin-left: auto;
    font-size: 16px;
}

.ips-datepicker {
    margin: 10px;
    width: calc(100% - 20px);
}

/* Actions row */
.ips-actions {
    margin-top: 15px;
    padding: 0;
}

/* Payment block styling for update forms */
.payment-block {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    background: #fafafa;
}

/* Mobile responsiveness for IPS */
@media (max-width: 576px) {
    .ips-selected-plan {
        padding: 12px;
    }
    
    .ips-plan-amounts {
        gap: 8px;
    }
    
    .ips-amount-box {
        padding: 8px;
    }
    
    .ips-amount-box .value {
        font-size: 16px;
    }
    
    .ips-card-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .ips-card-actions .btn {
        width: 100%;
    }
    
    .ips-selected-date {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    
    .ips-change-date-btn {
        align-self: flex-end;
    }
    
    .ips-option {
        flex-wrap: wrap;
    }
    
    .ips-option-summary {
        width: 100%;
        margin-left: 26px;
    }
    
    .ips-option-unscheduled {
        margin-left: 26px;
    }
}

/* ============================================
   Step Headers - Unified Style for Payment Wizards
   ============================================ */

/* Single payment form step headers (ips = inline payment selector) */
.ips-step-header {
    font-size: 13px;
    font-weight: 600;
    color: #667eea;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 20px 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9ecef;

    margin-top: 10px;
    text-align: center;
    background: #657eea;
    padding: 5px;
    border-radius: 14px;
    color: #fff;
}

.ips-step-header:first-of-type {
    margin-top: 10px;
}

/* ============================================
   Supporting Styles for Payment Wizard
   ============================================ */

.psw-amount-section {
    margin: 10px 0 15px 0;
}

.psw-amount-tooltip {
    background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%);
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 8px;
    font-size: 13px;
    color: #856404;
    display: none;
    animation: slideDownFade 0.2s ease-out;
}

@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.psw-dates-section {
    margin: 10px 0 15px 0;
}

.psw-no-plan-notice {
    background: #f8f9fa;
    border: 1px dashed #dee2e6;
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #666;
    text-align: center;
}

/* ============================================
   Bulk Booking UI - Plan Selector & Steps
   ============================================ */

.bulk-plan-selector {
    margin-bottom: 20px;
}

.bulk-plan-card {
    position: relative;
}

.bulk-plan-card-inner {
    border: 2px solid #e060ec;
    background: linear-gradient(135deg, #faf7ff 0%, #fff5fd 100%);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(224, 96, 236, 0.15);
    text-align: center;
}

.bulk-plan-card-inner.bulk-plan-card--empty {
    border-color: #dee2e6;
    background: #f8f9fa;
}

/* Plan selection list (dropdown-style) */
.bulk-plan-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 100;
    max-height: 350px;
    overflow-y: auto;
    padding: 10px;
}

/* Plan list item - card style */
.bulk-plan-list-item {
    padding: 12px 15px;
    margin-bottom: 8px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bulk-plan-list-item:last-child {
    margin-bottom: 0;
}

.bulk-plan-list-item:hover {
    border-color: #6f42c1;
    background: #f8f5ff;
}

/* No plan option styling */
.bulk-plan-list-item--no-plan {
    background: #f8f9fa;
    border-style: dashed;
}

.bulk-plan-list-item--no-plan:hover {
    background: #f0f0f0;
    border-color: #adb5bd;
}

.bulk-list-item-date {
    font-weight: 600;
    color: #495057;
    margin-bottom: 4px;
}

.bulk-list-item-services {
    font-size: 13px;
    color: #6c757d;
    margin-bottom: 6px;
}

.bulk-list-item-financials {
    font-size: 12px;
    color: #868e96;
    margin-bottom: 6px;
}

.bulk-list-item-unscheduled {
    font-size: 13px;
    font-weight: 500;
    color: #e67700;
}

.bulk-list-item-scheduled {
    font-size: 13px;
    color: #28a745;
}

/* Legacy classes - keep for backward compatibility */
.bulk-plan-list-item__title {
    font-weight: 600;
    font-size: 13px;
    color: #333;
}

.bulk-plan-list-item__sub {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.bulk-plan-list-item__amounts {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

/* Bulk config section */
.bulk-config {
    margin-bottom: 15px;
}

.bulk-config .starting_date {
    font-size: 13px;
    color: #666;
    margin-top: 8px;
}

/* Add buttons container */
.bulk-add-buttons {
    margin-bottom: 15px;
}

.bulk-add-buttons .btn {
    margin-right: 10px;
}

/* Payment section */
.bulk-payment-section {
margin: 0px 0 20px 0px;
    padding: 0 0 10px 0px;
}

.bulk-payment-section .form-group {
    margin-top: 10px;
        padding: 0 15px;
}

.bulk-payment-section .form-group label {
    font-size: 13px;
    color: #555;
    margin-bottom: 5px;
}

/* ============================================
   Bulk Booking Preview
   ============================================ */

.bulk-preview {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
    overflow: hidden;
}

.bulk-preview-header h4 {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.bulk-preview-list {
    margin-bottom: 15px;
    overflow: visible;
}

.bulk-preview-item {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

.bulk-preview-item:last-child {
    border-bottom: none;
}

.bulk-preview-item:hover {
    background: #f8f9fa;
}

.preview-row-main {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.preview-row-details {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 46px;
    font-size: 13px;
}

.preview-num {
    font-weight: 600;
    color: #667eea;
    min-width: 40px;
    font-size: 13px;
}

.preview-day {
    font-weight: 500;
    color: #667eea;
    min-width: 30px;
}

.preview-date {
    font-weight: 600;
    color: #333;
}

.preview-service {
    color: #555;
    flex: 1;
    text-align: left;
}

.preview-time {
    color: #888;
}

.preview-payment-assigned {
    color: #388e3c;
    font-weight: 600;
}

.preview-edit-date,
.preview-edit-time {
    padding: 2px 8px;
    font-size: 12px;
    margin-left: 5px;
}

/* Day header for grouped appointments */
.bulk-preview-day-header {
    background: #667eea;
    color: #fff;
    padding: 8px 12px;
    margin-top: 10px;
    border-radius: 6px 6px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.bulk-preview-day-header:first-child {
    margin-top: 0;
}

.preview-day-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align:left;
}

.preview-day-name {
    font-weight: 600;
    font-size: 14px;
}

.preview-day-date {
    font-size: 13px;
    opacity: 0.9;
}

/* Payment input in day header */
.preview-day-payment {
    display: flex;
    align-items: center;
    gap: 8px;
}

.preview-day-payment-label {
    font-size: 12px;
    opacity: 0.9;
}

.preview-day-payment .input-group {
    width: 90px;
}

.preview-day-payment .input-group-addon {
    padding: 4px 8px;
    font-size: 12px;
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.3);
    color: #fff;
}

.preview-day-amount {
    padding: 4px 6px;
    font-size: 13px;
    height: auto;
    text-align: right;
    background: rgba(255,255,255,0.95);
    border-color: rgba(255,255,255,0.5);
}

.preview-day-amount.locked {
    background: #fff3cd;
    border-color: #ffc107;
}

.preview-day-lock {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 4px 8px;
    font-size: 14px;
    border-radius: 4px;
}

.preview-day-lock:hover {
    background: rgba(255,255,255,0.3);
}

.preview-day-lock.active {
    background: #ffc107;
    border-color: #ffc107;
    color: #333;
}

/* Items under a day header */
.bulk-preview-day-header + .bulk-preview-item {
    border-radius: 0;
    border-top: none;
}

.bulk-preview-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    margin-bottom: 0;
    border-radius: 0;
}

.bulk-preview-item:last-child,
.bulk-preview-item:has(+ .bulk-preview-day-header) {
    border-radius: 0 0 6px 6px;
    margin-bottom: 10px;
}

/* Hide remove button on first block (template) */
#bulk-blocks .block-template .remove-block {
    display: none;
}

.bulk-date-picker-input {
    width: 100px;
    display: inline-block;
    padding: 2px 6px;
    font-size: 13px;
    height: auto;
}

.bulk-time-picker-select {
    width: 110px;
    display: inline-block;
    padding: 2px 6px;
    font-size: 13px;
    height: auto;
}

.bulk-preview-payment {
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #333;
}

.bulk-preview-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.bulk-preview-actions .btn {
    flex: 1;
}

.booking-progress {
    text-align: center;
    padding: 20px;
    color: #666;
    font-style: italic;
}

/* ===========================
   Smart Payment Scheduling - Date Rows (Multi-line layout)
   =========================== */

/* Base date row - stacked layout */
.psw-date-row {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 8px;
}

/* Line 1: Check/Date + Remove button */
.psw-date-row__line1 {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.psw-date-row__check {
    font-size: 14px;
    flex-shrink: 0;
}

.psw-date-row__date {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.psw-date-row__scheduled-amount {
    color: #28a745;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

/* Line 2: Badge + Amount input + Lock (editable) or just Badge (scheduled) */
.psw-date-row__line2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    justify-content: space-between;
    width: 100%;
}

.psw-date-row__badge {
    display: inline-block;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #d4edda;
    color: #155724;
    white-space: nowrap;
    flex-shrink: 0;
}

.psw-date-row__badge--no-booking {
    background: #f8f9fa;
    color: #6c757d;
}

/* Amount input - smaller for 2-line layout */
.psw-date-row__amount-input {
    flex: 1;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 5px;
    overflow: hidden;
    max-width: 100px;
}

.psw-date-row__currency {
    padding: 4px 6px;
    background: #e9ecef;
    color: #495057;
    font-weight: 500;
    font-size: 13px;
    border-right: 1px solid #ced4da;
}

.psw-date-row__amount-input input {
    flex: 1;
    border: none;
    padding: 4px 6px;
    font-size: 13px;
    min-width: 0;
    width: 50px;
    outline: none;
}

.psw-date-row__amount-input input:focus {
    box-shadow: none;
}

/* Already scheduled date row (read-only) */
.psw-date-row--scheduled {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    opacity: 0.85;
}

/* Editable date row */
.psw-date-row--editable {
    background: #fff;
    border: 1px solid #dee2e6;
}

/* Locked date row */
.psw-date-row--locked {
    background: #fffef5;
    border-color: #ffc107;
}

/* Lock button - smaller */
.psw-date-row__lock {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 5px;
    line-height: 1;
    transition: all 0.15s;
    flex-shrink: 0;
}

.psw-date-row__lock:hover {
    background: #e9ecef;
}

.psw-date-row--locked .psw-date-row__lock {
    background: #fff3cd;
    border-color: #ffc107;
}

/* Locked input styling */
.psw-date-row__amount-input.locked {
    border-color: #ffc107;
    background: #fffef5;
}

.psw-date-row__amount-input.locked .psw-date-row__currency {
    background: #fff3cd;
    border-color: #ffc107;
}

/* Remove button - on line 1 */
.psw-date-row__remove {
    color: #dc3545;
    background: transparent;
    border: none;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    transition: all 0.15s;
    opacity: 0.6;
    flex-shrink: 0;
}

.psw-date-row__remove:hover {
    opacity: 1;
}

/* jQuery UI Datepicker z-index fix for bulk preview */
.ui-datepicker {
    z-index: 9999 !important;
}

/* All scheduled notice */
.psw-all-scheduled-notice {
    margin-bottom: 15px;
    text-align: center;
}

/* Had treatment today checkbox (per block in bulk booking) */
.block-had-treatment-row {
    margin-top: 0;
    margin-bottom: 5px;
    padding-left: 0;
}

.block-had-treatment-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: normal;
    font-size: 13px;
    color: #6c757d;
    cursor: pointer;
}

.block-had-treatment {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.block-had-treatment-label span {
    color: #495057;
}

/* Badge for original/currently linked plan in plan selector */
.ips-badge--original {
    background: #17a2b8;
    color: white;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.3px;
    vertical-align: middle;
}

/* ===========================
   PSW: Cross-Plan Payment Warning (Issue 3)
   =========================== */
.psw-date-row__other-plans-line {
    width: 100%;
    padding: 4px 0 2px 0;
}

.psw-date-row__other-plans {
    font-size: 11px;
    color: #856404;
    background: #fff3cd;
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
    display: inline-block;
}

/* ===========================
   Unreplied Emails Panel
   =========================== */
.unreplied-emails-panel {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    margin-top: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.unreplied-emails-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #fff8e6;
    border-bottom: 1px solid #f0e5c9;
    border-radius: 6px 6px 0 0;
}

.unreplied-emails-panel__title {
    font-weight: 600;
    font-size: 14px;
    color: #856404;
    display: flex;
    align-items: center;
    gap: 8px;
}

.unreplied-emails-panel__title i {
    color: #d4a900;
}

.unreplied-emails-panel__count {
    background: #ffc107;
    color: #212529;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    min-width: 24px;
    text-align: center;
}

.unreplied-emails-panel__refresh {
    padding: 4px 8px;
}

.unreplied-emails-panel__body {
    padding: 0;
    max-height: 300px;
    overflow-y: auto;
}

.unreplied-emails-panel__table {
    margin-bottom: 0;
    font-size: 13px;
}

.unreplied-emails-panel__table thead th {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: #6c757d;
    padding: 8px 12px;
}

.unreplied-emails-panel__table tbody td {
    padding: 10px 12px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
}

.unreplied-emails-panel__table tbody tr:hover {
    background: #f8f9fa;
}

.unreplied-emails-panel__patient-link {
    color: #0d6efd;
    font-weight: 500;
    text-decoration: none;
}

.unreplied-emails-panel__patient-link:hover {
    text-decoration: underline;
}

.unreplied-emails-panel__subject {
    color: #495057;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.unreplied-emails-panel__date {
    color: #6c757d;
    font-size: 12px;
    white-space: nowrap;
}

.unreplied-emails-panel__reply-btn {
    white-space: nowrap;
}

.unreplied-emails-panel__actions {
    white-space: nowrap;
}

.unreplied-emails-panel__dismiss-btn {
    padding: 2px 6px;
}

.unreplied-emails-panel__undo-row td {
    background: #f8f9fa;
    color: #6c757d;
    font-style: italic;
    padding: 8px 12px;
}

.unreplied-emails-panel__undo-link {
    color: #337ab7;
    font-style: normal;
    font-weight: 500;
}

/* Highlight effect for unreplied email when navigating to it */
.mail-item.unreplied-highlight {
    animation: unreplied-pulse 0.5s ease-in-out 3;
    box-shadow: 0 0 10px rgba(51, 122, 183, 0.5);
}

@keyframes unreplied-pulse {
    0%, 100% { background-color: inherit; }
    50% { background-color: #d9edf7; }
}

.unreplied-emails-panel__loading,
.unreplied-emails-panel__empty,
.unreplied-emails-panel__error {
    padding: 20px;
    text-align: center;
    color: #6c757d;
}

.unreplied-emails-panel__error {
    color: #dc3545;
}

.glyphicon-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ================================================
   Treatment Plan Screenshot Attachments
   ================================================ */

/* "Attach Treatment Plans" button in compose */
.compose-panel__attach-tp-btn {
    background: #6c5ce7;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;

    cursor: pointer;
    font-size: 13px;
}

.compose-panel__attach-tp-btn:hover {
    background: #5b4cdb;
}

.compose-panel__attach-tp-btn.active {
    background: #e17055;
}

/* Selection mode - make cards selectable */
body.tp-attachment-mode .row-plan-desc.tp-selectable {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    border-radius: 8px;
}

body.tp-attachment-mode .row-plan-desc.tp-selectable:hover {
    border-color: #35dcbd;
    box-shadow: 0 0 15px rgba(53, 220, 189, 0.3);
}

/* Selected state */
body.tp-attachment-mode .row-plan-desc.tp-selected {
    border-color: #35dcbd;
    background: rgb(216 255 248);
    box-shadow: 0 0 20px rgba(53, 220, 189, 0.4);
}

body.tp-attachment-mode .row-plan-desc.tp-selected::before {
    content: '✓';
    position: absolute;
    top: 10px;
    right: 10px;
    background: #35dcbd;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    z-index: 10;
}

/* Disable interactive elements inside treatment plans during selection mode */
body.tp-attachment-mode .row-plan-desc .record_new_sessz,
body.tp-attachment-mode .row-plan-desc a[href*="delete_recorded_session"],
body.tp-attachment-mode .row-plan-desc .history_dates a,
body.tp-attachment-mode .row-plan-desc select,
body.tp-attachment-mode .row-plan-desc input {
    pointer-events: none;
    opacity: 0.4;
    cursor: not-allowed;
}

/* Make sure row-plan-desc has relative positioning for the checkmark */
.row-plan-desc[class*="identifier_"] {
    position: relative;
}

/* Standalone Save Plans as IMG button */
.tp-save-standalone-btn {
    background: #59bed2;
    color: #fff;
    font-size: 15px;
    padding: 15px;
    border-radius: 8px;
    border: none;
    margin: 10px;
    margin-left: 0;
    font-weight: bold;
}

.tp-save-standalone-btn.active {
    background: #e17055;
    border-color: #e17055;
}

/* Floating action bar */
.tp-attachment-floating-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    color: #fff;
    padding: 15px 20px;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 20px;
    z-index: 9999;
    box-shadow: 0 -3px 10px rgba(0,0,0,0.3);
    text-align: center;
}

.tp-attachment-floating-bar .btn-success {
    background-color: #35dcbd;
}

.tp-attachment-floating-bar .btn-warning {
    color: #fff;
    background-color: #5aa5f2;
    border-color: #5aa5f2;
}
.tp-attachment-floating-bar button{
  margin: 5px;
}
.tp-attachment-floating-bar #tp-cancel-btn {
     color: #fff;
    background-color: #5aa5f2;
    border-color: #5aa5f2;
}

#tp-attachment-count {
    font-size: 16px;
    font-weight: bold;
    color: #d12477;
    margin-right: 10px;
}

/* Preview panel (modal-like overlay) */
.tp-preview-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    z-index: 10001;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    min-width: 500px;
}

/* Dark backdrop behind preview panel */
.tp-preview-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
}

.tp-preview-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.tp-preview-panel__header h4 {
    margin: 0;
    font-size: 18px;
}

.tp-preview-panel__close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
}

.tp-preview-panel__close:hover {
    color: #e74c3c;
}

.tp-preview-panel__body {
    padding: 20px;
    overflow-y: auto;
    max-height: 60vh;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.tp-preview-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    width: 280px;
    position: relative;
}

.tp-preview-item__image {
    max-height: 200px;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 8px;
}

.tp-preview-item__image img {
    width: 100%;
    height: auto;
}

.tp-preview-item__filename {
    font-size: 11px;
    color: #666;
    word-break: break-word;
    padding-right: 30px;
}

.tp-preview-item__remove {
    position: absolute;
    top: 5px;
    right: 5px;
}

.tp-preview-panel__footer {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Mobile responsive */
@media (max-width: 767px) {
    .tp-attachment-floating-bar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px;
    }
    
    #tp-attachment-count {
        width: 100%;
        text-align: center;
    }
    
    .tp-preview-panel {
        min-width: auto;
        width: 95vw;
    }
    
    .tp-preview-item {
        width: 100%;
    }
    
    /* Stack compose toolbar vertically */
    .compose-panel__toolbar {
        flex-direction: column;
        gap: 10px;
    }
    
    /* Attachment buttons row */
    .compose-panel__attachment {
        width: 100%;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    /* Make attach buttons larger and tappable */
    .compose-panel__attach-btn,
    .compose-panel__attach-tp-btn,
    .compose-panel__template-select {
        flex: 1;
        min-width: 120px;
        padding: 12px 10px;
        font-size: 14px;
        text-align: center;
    }
    
    /* Full width send button */
    .compose-panel__send-btn {
        width: 100%;
        padding: 14px;
        font-size: 15px;
    }
    
    /* Stack form rows vertically on narrow screens */
    .compose-panel__row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .compose-panel__label {
        margin-bottom: 5px;
        width: 100%;
    }
    
    .compose-panel__recipient,
    .compose-panel__input,
    .compose-panel__select {
        width: 100%;
    }
    
    /* Treatment plan attachment floating bar */
    .tp-attachment-floating-bar .btn {
        flex: 1;
        min-width: 80px;
        padding: 10px 8px;
        font-size: 13px;
    }
}

/* Even smaller screens */
@media (max-width: 480px) {
    .compose-panel__attach-btn,
    .compose-panel__attach-tp-btn,
    .compose-panel__template-select {
        min-width: 100%;
    }
}

/* ===========================================
   Manage Domains Page
   =========================================== */
#manage-domains-page {
    padding-top: 20px;
    padding-bottom: 40px;
}

#manage-domains-page h2 {
    margin-bottom: 25px;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
}

.manage-domains-section {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
}

.manage-domains-section h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
}

.manage-domains-form .form-group {
    margin-bottom: 15px;
}

.manage-domains-form label {
    font-weight: 500;
    margin-bottom: 5px;
}

.manage-domains-service-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
}

.manage-domains-service-wrapper select {
    flex: 1;
}

.manage-domains-add-service-panel {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    padding: 20px;
    margin: 20px 0;
}

.manage-domains-add-service-panel h4 {
    margin-top: 0;
    color: #856404;
}

/* Embed Code Styles */
.manage-domains-embed-code {
    position: relative;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
}

.manage-domains-embed-code pre {
    margin: 0;
    padding: 10px;
    background: #2d2d2d;
    color: #f8f8f2;
    border-radius: 4px;
    font-size: 12px;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 120px;
    overflow-y: auto;
}

.manage-domains-embed-code .embed-service,
.manage-domains-embed-code .embed-location {
    color: #66d9ef;
    font-weight: bold;
}

.manage-domains-embed-code .btn-copy-embed {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Colorpicker addon styling */
.manage-domains-form .colorpicker-component .input-group-addon {
    cursor: pointer;
}

.manage-domains-form .colorpicker-component .input-group-addon i {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: text-top;
    border-radius: 2px;
    border: 1px solid #ccc;
}

/* Manage Domains - Add Service Panel */
.manage-domains-panel-hint {
    color: #856404;
    margin-bottom: 15px;
    font-size: 13px;
}

.manage-domains-panel-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e0c36a;
}

.manage-domains-status-msg {
    margin-left: 15px;
    font-weight: 500;
}

.manage-domains-status-msg.text-danger {
    color: #dc3545;
}

.manage-domains-status-msg.text-success {
    color: #28a745;
}

#add-service-panel small {
    display: block;
    margin-top: 3px;
}

/* Manage Domains - Service Areas Display */
.manage-domains-areas-info {
    background: #e8f4fd;
    border: 1px solid #b8daff;
    border-radius: 4px;
    padding: 8px 12px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.manage-domains-areas-label {
    font-weight: 500;
    color: #004085;
}

.manage-domains-areas-list {
    color: #0056b3;
    font-family: monospace;
    font-size: 12px;
}

/* Areas with Icons Display */
.manage-domains-areas-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
}

.manage-domains-area-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 16px;
    font-size: 12px;
}

.manage-domains-area-chip img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.manage-domains-icon-preview {
    margin-top: 5px;
}

.manage-domains-icon-preview img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px;
    background: #fff;
}

.manage-domains-add-area-panel {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    padding: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.manage-domains-add-area-panel small {
    display: block;
    margin-top: 3px;
}

.manage-domains-area-actions {
    padding-top: 25px;
}

/* Manage Domains - Form Validation */
#manage-domains-page .has-error input,
#manage-domains-page .has-error select,
#manage-domains-page .has-error textarea {
    border-color: #dc3545;
    background-color: #fff8f8;
}

.manage-domains-field-error {
    display: block;
    font-size: 12px;
    margin-top: 4px;
}

/* Color Preview */
.manage-domains-color-preview {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 1px solid #ccc;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 10px;
    margin-top: 5px;
}

/* Primary domain checkbox */
.manage-domains-primary-label {
    font-weight: normal;
    cursor: pointer;
}

.manage-domains-primary-label input[type="checkbox"] {
    margin-right: 5px;
}

.manage-domains-help-block {
    color: #666;
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

/* Multi-location selector (edit mode) */
.manage-domains-location-selector {
    background: #f0f7ff;
    border: 1px solid #b8daff;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
}

.manage-domains-location-selector .alert {
    margin-bottom: 10px;
    padding: 8px 12px;
    font-size: 13px;
}

.manage-domains-location-selector label {
    font-weight: 600;
    color: #004085;
}

.manage-domains-location-selector select {
    font-weight: 500;
}

/* Required field indicator */
#manage-domains-page label[for="domain"]:after,
#manage-domains-page label[for="source"]:after,
#manage-domains-page label[for="service"]:after,
#manage-domains-page label[for="country"]:after,
#manage-domains-page label[for="location"]:after,
#manage-domains-page label[for="phone"]:after,
#manage-domains-page label[for="color"]:after,
#manage-domains-page label[for="logo"]:after {
    content: " *";
    color: #dc3545;
}

/* Form submit button area */
#manage-domains-page .manage-domains-form .form-group:last-child {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #ddd;
}

/* Spinning animation for loading states */
.spinning {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Email Signature Generator */
.signature-preview-box {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 20px;
    min-height: 200px;
    margin-bottom: 15px;
}

.signature-preview-box table {
    font-family: verdana, tahoma, sans-serif !important;
}

.signature-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

#signature-copy-status {
    font-size: 13px;
}

.signature-info-box {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 15px;
    font-size: 13px;
}

.signature-info-box p {
    margin: 0 0 5px 0;
    word-break: break-all;
}

.signature-info-box p:last-of-type {
    margin-bottom: 0;
}

/* ==========================================
   Manage Domains - Service Creation Panel
   ========================================== */

.manage-domains-logo-preview {
    min-height: 30px;
    padding: 5px;
    border-radius: 4px;
    margin-top: 5px;
}

.manage-domains-logo-preview-dark {
    background: #333;
}

.manage-domains-areas-list-sortable {
    margin-bottom: 15px;
}

.manage-domains-area-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 5px;
}

.manage-domains-area-drag-handle {
    cursor: move;
    margin-right: 10px;
    color: #999;
}

.manage-domains-area-icon {
    height: 24px;
    margin-right: 8px;
}

.manage-domains-area-item:hover {
    background: #f5f5f5;
}

.manage-domains-add-area-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
}

.manage-domains-add-area-row input[type="text"] {
    width: 180px;
}

.manage-domains-add-area-row input[type="file"] {
    width: 200px;
}

#service-create-status {
    margin-top: 15px;
}

#service-create-status .alert {
    margin-bottom: 0;
}

/* Manage Domains - Image Upload with Preview */
.manage-domains-image-upload-wrapper {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.manage-domains-image-preview-box {
    width: 120px;
    height: 80px;
    border: 2px dashed #ddd;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.manage-domains-image-preview-box.manage-domains-image-preview-wide {
    width: 200px;
    height: 100px;
}

.manage-domains-image-preview-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.manage-domains-image-preview-box .manage-domains-no-image {
    color: #999;
    font-size: 11px;
    text-align: center;
    padding: 5px;
}

.manage-domains-image-preview-box .manage-domains-image-preview-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 10px;
    text-align: center;
    padding: 2px;
}

.manage-domains-image-upload-controls {
    flex: 1;
}

.manage-domains-image-upload-controls input[type="file"] {
    margin-bottom: 5px;
}

/* Preview update when new file selected */
.manage-domains-image-preview-box.has-new {
    border-color: #5cb85c;
    border-style: solid;
}

.manage-domains-image-preview-box.has-new .manage-domains-image-preview-label {
    background: #5cb85c;
}

/* =========================================
   Logo/Signature Picker Gallery
   ========================================= */

.manage-domains-logo-picker {
    margin-bottom: 10px;
}

.manage-domains-picker-label {
    font-weight: normal;
    cursor: pointer;
}

.manage-domains-picker-label input[type="checkbox"] {
    margin-right: 5px;
}

.manage-domains-logo-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
}

.manage-domains-gallery-item {
    width: 80px;
    text-align: center;
    cursor: pointer;
    padding: 5px;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: all 0.2s;
}

.manage-domains-gallery-item:hover {
    background: #fff;
    border-color: #ccc;
}

.manage-domains-gallery-item.selected {
    background: #e3f2fd;
    border-color: #2196F3;
}

.manage-domains-gallery-item img {
    max-width: 70px;
    max-height: 50px;
    object-fit: contain;
}

.manage-domains-gallery-label {
    display: block;
    font-size: 10px;
    color: #666;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================
   Manage Domains - Embed Codes Section
   ========================================= */

#embed-location-indicator {
    margin-left: 10px;
    font-size: 12px;
}

#embed-location-indicator .label {
    font-weight: normal;
    padding: 3px 8px;
}

.embed-code-field {
    font-family: Monaco, Consolas, 'Courier New', monospace;
    font-size: 12px;
    background-color: #f8f9fa;
    color: #333;
    resize: none;
}

.copy-embed-btn {
    margin-left: 10px;
    font-size: 11px;
}

.embed-code-info {
    margin-top: 15px;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 4px;
    font-size: 12px;
}

.embed-code-info ul {
    margin: 5px 0 0 0;
    padding-left: 20px;
}

.embed-code-info code {
    padding: 2px 4px;
    font-size: 11px;
}


/* =========================================
   Manage Domains - List View
   ========================================= */

.manage-domains-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.manage-domains-header h2 {
    margin: 0;
}

.manage-domains-list-container {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.manage-domains-table {
    margin-bottom: 0;
}

.manage-domains-table thead th {
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
}

.manage-domains-table tbody tr:hover {
    background-color: #f5f5f5;
}

.manage-domains-table code {
    background: #e9ecef;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
}

/* Automation toggle button */
.manage-domains-table .automation-toggle {
    min-width: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.manage-domains-table .automation-toggle:disabled {
    opacity: 0.6;
    cursor: wait;
}

.manage-domains-breadcrumb {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 15px;
}

.manage-domains-breadcrumb-title {
    margin: 0;
    display: inline-block;
}

/* Lead source label below logo in row-lead.php */
.lead-source-label {
    text-align: left;
    word-break: break-all;
    font-weight: bold;
    font-size: 15px;
    margin-top: 3px;
}

/* Leads dashboard – day group box */
.leads-day-group {
    background: #f8f9fa;
    border: 1px solid #e3e3e3;
    border-radius: 12px;
    padding: 18px 24px 14px;
    margin-top: 28px;
    margin-bottom: 16px;
}
.leads-day-group__title {
    font-size: 22px;
    font-weight: 800;
    color: #222;
    margin-bottom: 14px;
    text-align: center;
}
.leads-day-group__circles {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
}
.leads-day-group__circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
}
.leads-day-group__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}
.leads-day-group__circle-label {
    font-size: 10px;
    font-weight: 600;
    color: #666;
    text-align: center;
    line-height: 1.2;
}
@media (max-width: 768px) {
    .leads-day-group {
        padding: 10px 8px 8px;
    }
    .leads-day-group__title {
        font-size: 18px;
    }
    .leads-day-group__circle {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    .leads-day-group__circle-label {
        font-size: 8px;
    }
}

/* Leads dashboard – pagination */
.leads-pagination {
    text-align: center;
    padding: 24px 0 10px;
}
.leads-pagination a,
.leads-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 14px;
    margin: 0 3px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, box-shadow .2s;
}
.leads-pagination a {
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.leads-pagination a:hover {
    background: #f0f0f0;
    border-color: #bbb;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
    text-decoration: none;
    color: #000;
}
.leads-pagination .leads-pagination__current {
    background: #c83fce;
    color: #fff;
    border: 1px solid #c83fce;
    box-shadow: 0 2px 8px rgba(200,63,206,.3);
}
.leads-pagination .leads-pagination__disabled {
    opacity: .35;
    pointer-events: none;
    background: #f5f5f5;
    color: #999;
    border: 1px solid #e3e3e3;
    box-shadow: none;
}

/* Filter bar (above lead list) */
.lt-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
}
.lt-filter-bar__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #dee2e6;
    color: #495057;
    text-decoration: none;
    font-size: 14px;
    flex-shrink: 0;
}
.lt-filter-bar__back:hover {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
    text-decoration: none;
}
.lt-filter-bar__title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}

/* Patient Currency Badge & Form */
.patient-currency-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    background: #f0f0f0;
    color: #555;
    margin-left: 10px;
    vertical-align: middle;
}
.patient-currency-form {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 5px;
    vertical-align: middle;
}
.patient-currency-form select {
    width: 100px;
    height: 26px;
    padding: 2px 5px;
    font-size: 12px;
}

/* T-098: Patient search results */
#patient-search-results,
#menu-search-results {
    margin-top: 10px;
    text-align: left;
}
.patient-search-row {
    display: block;
    background: #3f4474;
    color: #fff;
    border: 1px solid #ddd8d8;
    border-radius: 25px;
    padding: 12px 20px;
    margin-bottom: 4px;
    text-decoration: none;
}
.patient-search-row:hover,
.patient-search-row:focus {
    background: #2d3260;
    color: #fff;
    text-decoration: none;
}
.patient-search-name {
    font-weight: 600;
    font-size: 15px;
}
.patient-search-detail {
    font-size: 13px;
    opacity: 0.85;
}
.patient-search-label-lead {
    display: inline-block;
    background: #e67e22;
    color: #fff;
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}
.patient-search-no-results {
    padding: 20px 15px;
    color: #888;
    text-align: center;
    font-size: 15px;
    background: #f8f8f8;
    border: 1px dashed #ccc;
    border-radius: 12px;
    margin-top: 10px;
}

/* Leads wrapper */
.leads-matrix-wrapper {
    padding-top: 20px;
    padding-bottom: 20px;
}
.leads-matrix-wrapper h3 {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Lead list heading badges (used in lead list section) */
.status-tile {
    display: inline-block;
    min-width: 50px;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    text-align: center;
    color: #fff !important;
}
.status-no-attempts { background: #e74c3c; }
.status-not-called  { background: #e74c3c; }
.status-first-attempt { background: #3498db; }
.status-callback { background: #f1c40f; color: #000 !important; }
.status-connected { background: #2ecc71; }
.status-booked { background: #1d6b2b; }
.status-zero { opacity: .35; }

/* =============================================
   LEAD TRACKER CARD DASHBOARD (T-109)
   ============================================= */

/* Urgency Banner */
.lt-banner {
    background: #dc3545;
    color: #fff;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin: 0 -15px 20px;
    border-radius: 0;
}
.lt-banner__dot {
    width: 10px;
    height: 10px;
    background: #ffc107;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
    flex-shrink: 0;
    animation: lt-dot-pulse 1.5s ease-in-out infinite;
}
.lt-banner--empty .lt-banner__dot {
    animation: none;
}
@keyframes lt-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(.7); }
}
.lt-banner__chevron {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #fff;
    flex-shrink: 0;
    transition: transform .2s;
}
.lt-banner--open .lt-banner__chevron {
    transform: rotate(180deg);
}

/* Header Row */
.lt-header {
    text-align: center;
    margin: 20px 0 16px;
}
.lt-header__title {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: #1a1a1a;
}

/* Location + Time Pills Row */
.lt-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.lt-search-row__location {
    flex: 1;
    min-width: 0;
}
.lt-search-row__location select {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 28px 10px 12px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
    appearance: auto;
}
.lt-time-pills {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    background: #e8e8e8;
    border-radius: 12px;
    padding: 4px;
}
.lt-time-pill {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: #555;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.lt-time-pill:hover {
    background: rgba(0,0,0,.06);
    color: #333;
    text-decoration: none;
}
.lt-time-pill--active {
    background: #3b82f6;
    color: #fff;
}
.lt-time-pill--active:hover {
    background: #2563eb;
    color: #fff;
}

/* Summary Cards */
.lt-summary {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}
.lt-summary__card {
    flex: 1;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e5e5e5;
    background: #fff;
}
.lt-summary__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 4px;
}
.lt-summary__value {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    color: #1a1a1a;
}
.lt-summary__sub {
    font-size: 14px;
    font-weight: 600;
    color: #888;
    margin-left: 4px;
}
.lt-summary__card--danger {
    background: #dc3545;
    border-color: #dc3545;
}
.lt-summary__card--danger .lt-summary__label,
.lt-summary__card--danger .lt-summary__value,
.lt-summary__card--danger .lt-summary__sub {
    color: #fff;
}
.lt-summary__card--success {
    background: #198754;
    border-color: #198754;
}
.lt-summary__card--success .lt-summary__label,
.lt-summary__card--success .lt-summary__value,
.lt-summary__card--success .lt-summary__sub {
    color: #fff;
}

/* Status Filter Tabs */
.lt-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.lt-tabs::-webkit-scrollbar {
    display: none;
}
.lt-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #555;
    transition: background .15s, color .15s;
}
.lt-tab:hover {
    background: #f5f5f5;
    color: #333;
}
.lt-tab--active {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}
.lt-tab--active:hover {
    background: #333;
    color: #fff;
}
.lt-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(0,0,0,.08);
    color: inherit;
}
.lt-tab--active .lt-tab__count {
    background: rgba(255,255,255,.2);
}

/* Tab Icons (Lucide SVGs) */
.lt-tab[data-bucket]:not([data-bucket="all"])::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.lt-tab[data-bucket="no_attempts"]::before {
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>") no-repeat center/contain;
}
.lt-tab[data-bucket="not_called"]::before {
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/></svg>") no-repeat center/contain;
}
.lt-tab[data-bucket="first_attempt"]::before {
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 6v6l4 2'/><circle cx='12' cy='12' r='10'/></svg>") no-repeat center/contain;
}
.lt-tab[data-bucket="callback"]::before {
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/></svg>") no-repeat center/contain;
}
.lt-tab[data-bucket="connected"]::before {
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23198754' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>") no-repeat center/contain;
}
.lt-tab[data-bucket="booked"]::before {
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23198754' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>") no-repeat center/contain;
}

/* Danger-colored tabs */
.lt-tab[data-bucket="no_attempts"] {
    background: #fff;
    color: #dc2626;
    border-color: #e0e0e0;
}
.lt-tab[data-bucket="no_attempts"] .lt-tab__count {
    background: rgba(220,38,38,.1);
    color: #dc2626;
}
.lt-tab[data-bucket="no_attempts"]:hover {
    background: #fef2f2;
    color: #dc2626;
}
.lt-tab[data-bucket="not_called"] {
    background: #fff;
    color: #dc2626;
    border-color: #e0e0e0;
}
.lt-tab[data-bucket="not_called"] .lt-tab__count {
    background: rgba(220,38,38,.1);
    color: #dc2626;
}
.lt-tab[data-bucket="not_called"]:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* Success-colored tabs */
.lt-tab[data-bucket="connected"],
.lt-tab[data-bucket="booked"] {
    color: #198754;
    border-color: #c3e6cb;
}
.lt-tab[data-bucket="connected"] .lt-tab__count,
.lt-tab[data-bucket="booked"] .lt-tab__count {
    background: rgba(25,135,84,.1);
    color: #198754;
}
.lt-tab[data-bucket="connected"]:hover,
.lt-tab[data-bucket="booked"]:hover {
    background: #e8f5e9;
    color: #146c43;
}

/* Service Cards */
.lt-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 14px;
    transition: box-shadow .15s;
}
.lt-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.lt-card--hidden {
    display: none;
}
/* Red left border for cards with uncalled leads */
.lt-card[data-no-attempts]:not([data-no-attempts="0"]),
.lt-card[data-not-called]:not([data-not-called="0"]) {
    border-left: 3px solid #e74c3c;
}
.lt-card__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.lt-card__name {
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    color: #1a1a1a;
    letter-spacing: 0.3px;
}
.lt-card__total {
    font-size: 13px;
    color: #888;
}

/* Badges */
.lt-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 700;
    margin-left: auto;
}
.lt-badge--red {
    background: #dc3545;
    color: #fff;
}
.lt-badge--green {
    background: #198754;
    color: #fff;
}
.lt-badge--muted {
    background: #e5e5e5;
    color: #888;
}

/* Progress Bar */
.lt-card__bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 14px;
    background: #f0f0f0;
}
.lt-bar-seg {
    height: 100%;
    transition: width .3s;
}
.lt-bar-seg--no-attempts   { background: #e74c3c; }
.lt-bar-seg--not-called    { background: #e74c3c; }
.lt-bar-seg--first-attempt { background: #3498db; }
.lt-bar-seg--callback      { background: #f1c40f; }
.lt-bar-seg--connected     { background: #2ecc71; }
.lt-bar-seg--booked        { background: #1d6b2b; }

/* Status Row */
.lt-card__statuses {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.lt-card__statuses::-webkit-scrollbar {
    display: none;
}
.lt-stat {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    font-size: 12px;
    color: #555;
    text-decoration: none;
    border-radius: 10px;
    white-space: nowrap;
    background: #f5f5f5;
    transition: background .15s;
}
.lt-stat:hover {
    background: #eaeaea;
    text-decoration: none;
    color: #333;
}
.lt-stat__count {
    font-weight: 800;
    font-size: 14px;
    color: #1a1a1a;
}
.lt-stat__arrow {
    color: #ccc;
    font-size: 14px;
}
.lt-stat--zero {
    opacity: .45;
    background: #f0f0f0;
}
.lt-stat--zero .lt-stat__count {
    color: #aaa;
}

/* Danger-colored status pills (non-zero uncalled) */
.lt-stat--no-attempts:not(.lt-stat--zero),
.lt-stat--not-called:not(.lt-stat--zero) {
    background: #fde8e8;
    color: #dc3545;
}
.lt-stat--no-attempts:not(.lt-stat--zero) .lt-stat__count,
.lt-stat--not-called:not(.lt-stat--zero) .lt-stat__count {
    color: #dc3545;
}
.lt-stat--no-attempts:not(.lt-stat--zero) .lt-stat__arrow,
.lt-stat--not-called:not(.lt-stat--zero) .lt-stat__arrow {
    color: #e8a0a0;
}

/* Filter Chips (T-110) */
.lt-filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 4px;
}
.lt-filter-chips:empty {
    display: none;
}
.lt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 8px;
    padding: 6px 8px 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}
.lt-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e9ecef;
    border: none;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    color: #666;
    padding: 0;
    flex-shrink: 0;
}
.lt-chip__remove:hover {
    background: #dc3545;
    color: #fff;
}

/* AJAX loading transition */
#lt-leads-container {
    transition: opacity .15s ease;
}

/* Banner empty state (0 leads needing action) */
.lt-banner--empty {
    background: #6c757d;
}
.lt-banner--empty .lt-banner__dot {
    background: #adb5bd;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .lt-banner {
        margin: 0 -15px 20px;
        font-size: 13px;
        padding: 8px 12px;
    }
    .lt-header__title {
        font-size: 20px;
    }
    .lt-search-row {
        gap: 8px;
    }

    /* Issue 4: Summary cards — slightly smaller values */
    .lt-summary {
        flex-direction: row;
        gap: 8px;
    }
    .lt-summary__card {
        padding: 12px;
    }
    .lt-summary__value {
        font-size: 22px;
    }
    .lt-summary__sub {
        font-size: 12px;
    }

    .lt-tabs {
        gap: 6px;
    }

    /* Issue 2: Card header — badges on same line as name */
    .lt-card {
        padding: 14px;
    }
    .lt-card__name {
        flex: 1 1 0;
        min-width: 0;
        font-size: 14px;
    }
    .lt-card__total {
        order: 1;
        width: 100%;
        font-size: 11px;
    }
    .lt-badge {
        margin-left: 0;
        font-size: 11px;
        padding: 3px 8px;
    }

    /* Status breakdown — horizontal scroll */
    .lt-stat {
        padding: 8px 12px;
    }

    /* Filter bar mobile */
    .lt-filter-bar {
        padding: 10px 12px;
        gap: 6px;
    }
    .lt-filter-bar__title {
        font-size: 14px;
    }
    .lt-search-row__location select {
        padding: 8px 28px 8px 10px;
        font-size: 13px;
    }
}