#online_new {
    -webkit-tap-highlight-color: transparent;
}

.result_data {
  display: flex;
  gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;
  min-height: 200px;
  position: relative;
}

/* Прелоадер */
.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #0073aa;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.category_list {
  width: 250px;
  border-right: 1px solid #ddd;
  padding-right: 10px;
}

.category_item {
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 8px;
  margin-bottom: 6px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  line-height: 20px;
}

.category_item:hover {
  background: #f8f9fa;
  border-color: #e9ecef;
  transform: translateX(2px);
}

.category_item.active {
  background: #426514;
  color: #fff;
}

.services_list {
  flex: 1;
  padding-left: 20px;
}

.service_item {
  border-bottom: 1px solid #eee;
  padding: 12px 0;
  transition: padding 0.2s ease;
  cursor:pointer;
}
.service_item .title_service_row{
	display:flex;
	flex-direction: row;
    align-items: center;
    justify-content: space-between;
    scroll-margin-top: 170px;
}
.service_item .title_service_row:after{
	background-image: url("data:image/svg+xml,%3Csvg class='dropdown-arrow' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8.5L2.5 5h7L6 8.5z' fill='%23426514 '%3E%3C/path%3E%3C/svg%3E");
    content: '';
    display: block;
    width: 20px;
    min-width: 20px;
    height: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.service_item.active .title_service_row:after{
	transform: rotate(180deg);
}

.service_item strong {
  display: block;
  color: #333;
  font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.02em;
  margin-bottom: 4px;
  font-weight:500;
}

.service_item span {
  color: #666;
  font-size: 14px;
}

.specialists_list {
  margin-top: 15px;
  padding: 15px;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  background: #fafafa;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.specialist_item {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  transition: background 0.2s ease;
}

.specialist_item:last-child {
  border-bottom: none;
}

 .doctor_card{
    display: flex;
    gap: 20px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
 .doctor_card img{
	width: 150px;
    height: 150px;
    border-radius: 4px;
    object-fit: contain;
}
 .doctor_card .doctor_datos{
	
}
 .doctor_card .doctor_datos .specialist_position{
	display:flex;
	flex-direction:column;
	row-gap:2px;
}
 .doctor_card .doctor_datos .specialist_position .post_doc{
	font-size: 16px;
    text-transform: uppercase;
    line-height: 1.2em;
    font-weight: 500;
    color: #4c5e6e;
    display: block;
}
 .doctor_card .doctor_datos .specialist_stage{
	font-size: 18px;
    line-height: 1.2em;
    font-weight: 400;
    color: #4c5e6e;
    display: block;
}

.specialist_name {
    font-size: 20px;
    line-height: 1.1em;
    font-weight: 500;
    margin-bottom: 10px;
    display: block;
}

/* Улучшенная навигация по дням - максимум 7 дней в ряду */
.slot_nav_container {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  background: #f8f9fa;
  border-radius: 12px;
  padding: 8px;
}

.slot_nav {
	border: none;
    min-width: 36px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    padding: 10px;
    background: #426514;
    position: relative;
    top: unset;
    transform: unset;
    border-radius: 5px;
    background-position: center;
    background-size: 20px;
    background-repeat: no-repeat;
}
.slot_nav.prev{
	background-image: url(left-arrow.png);
}
.slot_nav.next{
	background-image: url(right-arrow.png);
}



.slot_nav:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.slot_tabs_wrapper {
  display: flex;
  overflow: hidden;
  flex: 1;
  margin: 0 8px;
  position: relative;
  padding: 5px 0;
  gap:8px;
  justify-content: space-between;
}

.slot_tabs_container {
  display: flex;
  transition: transform 0.3s ease;
  gap: 8px;
}


.slot_tab {
  flex: 0 0 calc((100% - -48px) / 6);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  padding: 10px 15px;
    border-radius: 10px;
    min-width: calc((100% / 6) - 10px);
    width: calc((100% / 6) - 10px);
    text-align: center;
    background: #f3f4f9;
    color: #000;
    text-decoration: none;
}

.slot_tab:hover {
  background: #426514;
    color: #fff;
    transition: 0.3s;
}

.slot_tab.active {
  
      background: #426514;
    color: #fff;
    transition: 0.3s;
}

.slot_tab .weekday {
	font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 2px;
}

.slot_tab .date {
  font-size: 16px;
  font-weight: 400;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  .doctor_card {
    flex-direction: column;
    align-items: center;
  }
  .doctor_card img {
    height: 200px;
    width: 200px;
  }
  .doctor_datos {
    text-align: center;
  }
  .service_price {
    text-align: center;
    margin-right: 0 !important;
  }
  .doctor_arrow {
    margin: 0 0 15px 0 !important;
  }
  .spec_slots {
    max-width: 100vw !important;
  }
  .slot_tabs_wrapper {
    justify-content: space-evenly;
  }
  .slot_tab {
    flex: 0 0 calc(50% - 8px); 
    min-width: 60px;
    padding: 8px 0;
  }
  .slot_nav_container {
    padding: 6px 0;
  }

  .result_data {
    flex-direction: column;
    gap: 15px;
  }

  .category_list {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #ddd;
    padding-right: 0;
    padding-bottom: 15px;
  }

  .services_list {
    padding-left: 0;
  }
  .booking_form {
    padding: 10px !important;
  }
  .booking_form_inner {
    grid-template-columns: 1fr !important;
  }
  .form_booking_submit {
    width: 100% !important;
    margin-top: 0px !important;
    margin-bottom: 25px !important;
  }
  .selected_date_to_go {
    line-height: 140%;
  }
  .form-columns.birthday-gender {
    flex-direction: column;
    gap: 15px !important;
  }
}

@media screen and (max-width: 370px) {
  .slot_tab .weekday,
  .slot_tab .date {
    font-size: 15px;
  }

  .slot_tabs_wrapper {
    gap: 6px;
    margin: 0 6px;
  }
}

.slot_times {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;
}

.slot_item {

  margin: 0;

  border-radius: 8px;
  cursor: pointer;
  display: inline-block;
  transition: all 0.2s ease;
  min-width: 80px;
  text-align: center;
  
      background: #f3f4f9;
    color: #426514;
    padding: 10px 15px;
    text-decoration: none;
    font-weight: 500;
    border-radius: 15px;
}

.slot_item:hover {
      color: #FFF;
    transition: 0.3s;
    background: #426514;

}
.slot_item.active{
	  color: #FFF;
    transition: 0.3s;
    background: #426514;
}
.booking_form {
  margin-top: 20px;
  padding: 20px;
}

.booking_form_inner {
  display: grid;
  gap: 15px;
  grid-template-columns: 1fr 1fr;
}

.form-columns.birthday-gender {
    gap: 10px;
}

.form-columns {
    display: flex;
    justify-content: space-between;
    gap: 35px;
}

.form_row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

@media (max-width: 600px) {
  .form_row {
    grid-template-columns: 1fr;
  }
}

.booking_form_inner label .required:after{
	    color: red;
		content:'*';
}
.form-row.submit-button,
.form-row.full{
	grid-column: 1 / -1;
}
.form-row .required:after{
	    color: red;
		content:'*';
}
.booking_form_inner label {
font-size: 14px;
    line-height: 1.2em;
    font-weight: 500;
    margin-bottom: 10px;
    color: #4c5e6e;
    display: block;
}

.booking_form_inner input,
.booking_form_inner textarea {
  width: 100%!important;
  margin-top: 0!important;
  margin-bottom: 0!important;
  padding: 12px 16px!important;
  box-sizing: border-box!important;
  border: 2px solid #e9ecef!important;
  border-radius: 8px!important;
  font-size: 14px!important;
  transition: all 0.2s ease!important;
	background: #FFF !important;
}

.booking_form_inner input:focus,
.booking_form_inner textarea:focus {
  outline: none!important;
  border-color: #0073aa!important;
  box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1)!important;
}

.comment_toggle {
  color: #0073aa;
  cursor: pointer;
  text-decoration: underline;
  font-size: 14px;
  margin-bottom: 10px;
  display: inline-block;
}

.comment_toggle:hover {
  color: #005a87;
}

.comment_field {
  display: none;
}

.comment_field.show {
  display: block;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 200px;
  }
}

.form_message {
  margin-top: 10px;
  padding: 10px 15px;
  border-radius: 6px;
  font-size: 14px;
}

.form_message.error {
  color: #dc3545;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
}

.form_message.success {
  color: #155724;
  background: #d4edda;
  border: 1px solid #c3e6cb;
}

.spec_loader {
  text-align: center;
  padding: 20px;
}

.time_indicator:before{
	content:'';
	display:block;
	width:45px;
	height:45px;
	background-image: url("data:image/svg+xml,%3Csvg _ngcontent-serverApp-c1327206358='' width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath _ngcontent-serverApp-c1327206358='' d='M7.5 0C3.3645 0 0 3.3645 0 7.5C0 11.6355 3.3645 15 7.5 15C11.6355 15 15 11.6355 15 7.5C15 3.3645 11.6355 0 7.5 0ZM7.5 13.4041C4.24449 13.4041 1.59572 10.7557 1.59572 7.5C1.59572 4.24434 4.24449 1.59587 7.5 1.59587C10.7555 1.59587 13.4043 4.24434 13.4043 7.5C13.4043 10.7557 10.7555 13.4041 7.5 13.4041Z' fill='%23426514'%3E%3C/path%3E%3Cpath _ngcontent-serverApp-c1327206358='' d='M11.4083 7.26845H8.03781V3.21586C8.03781 2.87482 7.76131 2.59832 7.42027 2.59832C7.07924 2.59832 6.80273 2.87482 6.80273 3.21586V7.88599C6.80273 8.22702 7.07924 8.50353 7.42027 8.50353H11.4083C11.7494 8.50353 12.0259 8.22702 12.0259 7.88599C12.0259 7.54495 11.7494 7.26845 11.4083 7.26845Z' fill='%23426514'%3E%3C/path%3E%3C/svg%3E");
	margin-right:15px;
	border-radius: 5px;
    background-color: #f3f4f9;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
	margin-top: 3px;
}
.time_indicator {
    align-items: flex-start;
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 18px;
    color: #000;
    color: #426514;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    position: relative;
    margin-bottom: 40px;
}

.time_indicator span {
    margin-left: 5px;
    
	color: #6f3887;
    position: absolute;
    top: 35px;
    left: 55px;
}
.time_indicator span.selected_time.selected {
   color: #4c5e6e;
}
.selected_date_to_go{
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 18px;
    color: #426514;
    margin-bottom: 40px;
}
.heading_form{
	    font-weight: 700;
    padding-bottom: 15px;
    margin-bottom: 20px;
    font-size: 25px;
    color: #000;
    color: #426514;
    border-bottom: 1px solid rgb(136 149 194 / 10%);
}

.form-row select{
    font-weight: 400;
    font-size: 14px;
    color: #1a1a1a;
    display: block;
    line-height: 20px;
	height:47px;
    padding: 12px 30px 12px 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    box-shadow: none;
    border-radius: 5px;
    border: 1px solid rgb(136 149 194 / 30%);
    outline: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #FFFFFF;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 10 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5.00065 3L9 1' stroke='%23969696' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
	font-size: 14px;
	line-height: 1em;
	color: rgb(117, 117, 117);
}


.add_comment_link{
	    color: #426514;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 10px;
    display: inline-flex;
    gap: 10px;
    align-items: baseline;
    position: relative;
    padding-right: 20px;
}
.add_comment_link::after {
    content: '»';
    font-size: 24px;
    position: absolute;
    right: 0;
    top: -4px;
    display: inline-block;
    width: 8px;
    height: 8px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
textarea{resize: none;}
.add_comment_link:hover:after{
	transform: translateX(3px);
}
.form_booking_submit {
    display: block;
    background-color: #6f3887;
    border: 1px solid #6f3887;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    padding: 0 30px;
    line-height: 40px;
    font-weight: 600;
    transition: .2s;
    text-align: center;
    max-width: 100%;
    width: 300px;
    text-decoration: none;
    margin: 30px auto 50px;
    text-transform: uppercase;
}
.form-column.right{
	width:100%;
}

/* Added styles for animated arrows */
.doctor_arrow {
  margin-left: auto;
  margin-right:20px;
  display: flex;
  align-items: center;
  color: #666;
  opacity: 1;
  animation: pulse 2s infinite;
  
  
  height: 50px;
    width: 50px;

    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 50%;
    background-color: #426514;
    box-shadow: 0 2px 8px rgba(34, 34, 34, 0.18);
    transition: all 0.25s 
ease-in-out;
    animation: gentleBounce 2s 
ease-in-out infinite;
}
.doctor_arrow.opened{
	display:none;
}

.doctor_arrow svg {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.specialist_item:hover .doctor_arrow {
  color: #007cba;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

.doctor_card {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.doctor_datos {
  flex: 1;
}

.service_price{
	display: block;
    font-size: 18px;
    margin-top: 5px;
    font-weight: 500;
    color: #4c5e6e;
    margin-right: 50px;
}
.service_price span.cost_number{
	font-weight: 800;
    font-size: 20px;
}

.service_description{
	width: 100%;
    font-size: 18px;
    line-height: 1.2em;
    font-weight: 400;
    color: #4c5e6e;
    max-width: 240px;
	margin-top: 10px;
}




















.modal.hidden,
.modal-overlay.hidden {
	display: none;
}

.modal {
	position: relative;

	/* background: linear-gradient(135deg, #8b9dc3 0%, #6b7db3 30%, #5a6ba3 100%); */
	background-color: #6b7db3;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	border-radius: 16px;
	max-width: 420px;
	width: 90%;
	padding: 24px;

	display: flex;
	flex-direction: column;
	align-items: center;

	z-index: 999;

	animation: slideIn 0.3s ease-out 0s 1;
}

.modal-close {
	position: absolute;
	right: 16px;
	top: 16px;
	cursor: pointer;

	padding: 5px;
	border-radius: 5px;

	font-size: 24px;
	color: #fff;

	transition: all 0.2s ease-out;
}

.modal-close:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.modal-button {
	display: block;
	padding: 0 30px;
	line-height: 40px;
  	text-align: center;
  	text-decoration: none;
  	color: #FFF!important;
  	background: #6f3887;
  	border: 1px solid #6f3887;
  	border-radius: 10px;
  	text-transform: uppercase;
	cursor: pointer;
}

.modal-button:hover {
	color: #6f3887;
  	background: #FFF;
  	transition: 0.3s;
}

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 99999999999999;

	display: flex;
	justify-content: center;
	align-items: center;

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

	animation: fadeIn 0.3s ease-out 0s 1;
}







.form-submit-success .modal-icon {
	width: 64px;
	height: 64px;

	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.2);

	display: flex;
	justify-content: center;
	align-items: center;

	margin-top: 16px;
	margin-bottom: 40px;
 
	color: #fff;
	font-size: 32px;
}

.form-submit-success .modal-title {
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 12px;
	text-align: center
}

.form-submit-success .modal-subtitle {
	color: #fff;
	font-size: 16px;
	opacity: 0.9;
	margin-bottom: 32px;
	line-height: 1.4;
	text-align: center;
}


.form-submit-success .modal-info-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	background-color: rgba(255, 255, 255, 0.15);
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 24px;
	backdrop-filter: blur(10px);

	width: 100%;
}

.form-submit-success .doc-container {
	display: flex;
	gap: 24px;

	margin-bottom: 20px;
}

.form-submit-success .doc-container .doc-img {
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 12px;
    height: 150px;
    overflow: hidden;
}


.form-submit-success .doc-container .doc-img img {
	width: 100%;
	height: 150px;
	border-radius: 4px;
	object-fit: contain;
	/* margin-top: -15px; */
}

.form-submit-success .doc-container .doc-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
}

.form-submit-success .doc-container .doc-info .doc-name {
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	line-height: 150%;
	margin-bottom:10px;
}

.form-submit-success .doc-container .doc-info .doc-post,
.form-submit-success .doc-container .doc-info .doc-exp {
	font-size: 16px;
	opacity: 0.9;
	color: #fff;
}

.form-submit-success .date-time-container {
	background: rgba(255, 255, 255, 0.1);
	padding: 12px;
    border-radius: 8px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.form-submit-success .date-time-container .date-time-label {
	font-size: 14px;
	text-transform: uppercase;
	opacity: 0.8;
	color: #fff;
	width:65px;
	max-width:65px;
	line-height:16px;
    margin: unset;
}

.form-submit-success .date-time-container .date-time-value {
	font-size: 16px;
	color: #fff;
	font-weight: 600;
}





.form-submit-error .modal-icon {
	width: 64px;
	height: 64px;

	border-radius: 50%;
	background-color: rgba(231, 76, 60, 0.2);
	color: #e74c3c;
	font-size: 32px;

	display: flex;
	justify-content: center;
	align-items: center;

	margin-top: 16px;
	margin-bottom: 40px;

	animation: shake 0.3s ease-out 0.15s 1;
}

.form-submit-error .modal-title {
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 12px;
	text-align: center
}

.form-submit-error .modal-subtitle {
	color: #fff;
	font-size: 16px;
	opacity: 0.9;
	margin-bottom: 32px;
	line-height: 1.4;
	text-align: center;
}

.form-submit-error .modal-info-container {
	background-color: rgba(255, 255, 255, 0.15);
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 24px;
	backdrop-filter: blur(10px);

	width: 100%;
}

.form-submit-error .modal-info-container p,
.form-submit-error .modal-info-container ul {
	color: #fff;
	font-size: 16px;
	opacity: 0.9;
	line-height: 1.4;
}

.form-submit-error .modal-info-container p {
	margin-bottom: 5px;
}

.form-submit-error .modal-info-container ul li {
	padding-left: 16px;
	position: relative;
}

.form-submit-error .modal-info-container ul li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: #e67e22;
	font-weight: bold;
}

.form-submit-error .modal-info-container ul .phone {
	text-decoration: none;
	color: #fff;
	opacity: 0.9;
	font-weight: 700;
}



@media screen and (max-width: 690px){
	.modal {
		margin-top: 40px;
	}

	.modal .modal-icon {
		margin-top: 0px;
		margin-bottom: 24px;
	}

	.modal .modal-subtitle {
		margin-bottom: 24px;
	}

	.form-submit-success .doc-container .doc-img img {
		height: 130px;
		min-width: 90px;
		width: unset;
		object-position: bottom;
	}

	

	.form-submit-success .doc-container .doc-info {
		gap: 8px;
	}

	.form-submit-success .doc-container .doc-info .doc-name {
		line-height: 125%;
		font-size: 16px;
	}

	.form-submit-success .doc-container .doc-info .doc-post, 
	.form-submit-success .doc-container .doc-info .doc-exp {
		font-size: 14px;
	}

	.form-submit-success .modal-info-container .date-time-container .date-time-label {
		line-height: 125%;
	}

	.form-submit-success .modal-info-container .date-time-container .date-time-value {
		line-height: 125%;
		font-size: 14px;
	}

	.form-submit-success .modal-info-container .date-time-container .separator {
		display: none;
	}


	.form-submit-error .modal-info-container p,
	.form-submit-error .modal-info-container ul {
		font-size: 14px;
	}
}