/* Booking Page Styles */

/* Import variables */
@import url('booking-variables.css');

/* International Telephone Input */
.iti {
    --iti-path-flags-1x: url('/assets/intl-tel-input/build/img/flags.png');
    --iti-path-flags-2x: url('/assets/intl-tel-input/build/img/flags@2x.png');
    --iti-path-globe-1x: url('/assets/intl-tel-input/build/img/globe.png');
    --iti-path-globe-2x: url('/assets/intl-tel-input/build/img/globe@2x.png');
    width: 100%;
}

/* Portfolio Photo */
.portfolio-photo {
    border: var(--booking-border-width) solid var(--booking-border-color);
    border-radius: 50%;
    min-width: 128px;
    max-width: 128px;
    margin-bottom: var(--booking-spacing-lg);
}

/* Calendar Date Picker */
.calendarDatePicker {
    width: 100%;
    height: 230px;
    font-size: 12px;
}

.calendarContOuter {
    width: 100%;
    height: calc(100vh - 1rem);
    font-size: 14px;
}

.cElemDatePicker {
    font-size: 14px;
}

.calendarDatePicker .cContHeader {
    padding: 0;
}

/* Add Group */
.addGroup {
    width: 100%;
    height: calc(100vh - 230px - 1rem);
    border: 1px solid #ddd;
}

/* Indicator */
.indicator {
    width: 16px;
}

/* Lead Modal */
#leadModal .modal-body {
    height: calc(100vh - 136px);
}

/* Tables */
table {
    font-size: 10px;
    width: auto;
}

.table > :not(caption) > * > * {
    padding: 2px 1px;
    cursor: pointer;
}

thead tr {
    height: 12px;
}

thead tr th {
    text-align: center;
}

tbody td {
    width: 14%;
    max-width: 14%;
}

.event-types {
    cursor: pointer;
}

/* Calendar Header */
.cContHeader {
    font-size: 12px;
}

/* Popover Content */
.popover-content img {
    border-radius: 50%;
    height: 64px;
    width: 64px;
}

.popover-content hr {
    border-top: dashed silver 1px;
    margin: 5px;
    padding: 0;
}

/* Multiselect */
.multiselect-container {
    max-height: 16.875em;
    overflow-y: auto;
    padding: 0.5rem;
}

.multiselect-item:hover {
    background-color: #f8f9fa;
}

/* Modal Z-Index Management */
#leadModal.fade.show {
    z-index: 1050; /* стандартное значение для первого модального окна */
}

#infoModal.fade.show ~ .modal.fade.show {
    z-index: 1055; /* увеличенное значение для второго модального окна */
}

#leadModal .modal-backdrop.fade.show {
    z-index: 1040; /* стандартное значение для бэкдропа */
}

#infoModal .modal-backdrop.fade.show ~ .modal-backdrop.fade.show {
    z-index: 1045; /* увеличенное значение для второго бэкдропа */
}

/* Suggestions */
.suggestion {
    border-radius: 1.25rem;
}

.suggestion .sugg-photo {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 12.5rem;
    height: 12.5rem;
    border-radius: 1.25rem;
    overflow: hidden;
    margin: 1.25rem 1.25rem 1.625rem 1.25rem;
}

.suggestion .sugg-avatar {
    width: 2.5rem;
    height: 2.5rem;
}

.suggestion .sugg-guide-avatar img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.suggestion .sugg-guide {
    height: 2.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    margin: 0 1.25rem 1.625rem 1.25rem;
}

.suggestion .sugg-guide-rating {
    font-weight: 400;
    font-size: 0.625rem;
}

.suggestion .sugg-title {
    font-weight: 600;
    font-size: 1.5625rem;
    line-height: 1;
    margin: 2rem 0 0.375rem 0;
}

.suggestion .sugg-info {
    height: 1.5625rem;
    margin-bottom: 0.75rem;
}

.suggestion .sugg-info div:first-child {
    padding-right: 1.25rem;
    border-right: 1px solid #C3C5C9;
}

.suggestion .sugg-info div:last-child {
    padding-left: 1.25rem;
}

.suggestion .btn-link {
    padding: .188rem 0;
    line-height: 1;
}

.suggestion .sugg-excursions-label {
    font-weight: 400;
    font-size: .75rem;
    line-height: 1;
    margin: 0 0 .75rem 0;
}

.suggestion .sugg-timeline-label {
    color: #939393;
    font-weight: 600;
    font-size: .875rem;
    line-height: 0.9375rem;
}

.sugg-begin-time, .sugg-end-time {
    font-weight: 400;
    font-size: 1.375rem;
    line-height: 0.94;
    margin: 0 0 0.625rem 0;
}

.sugg-place {
    font-weight: 600;
    font-size: 0.917rem;
}

.sugg-begin-date, .sugg-end-date, .sugg-begin-wday, .sugg-end-wday {
    font-weight: 400;
    font-size: 0.917rem;
    line-height: 0.81;
    /* margin: 0 0 0.625rem 0; */
}



.suggestion .sugg-footer {
    gap: 0.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

.suggestion .sugg-footer .sugg-footer-header {
    font-weight: 400;
    font-size: 0.75rem;
}

.suggestion .sugg-footer .sugg-en {
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.25rem;
}

.suggestion .sugg-summary {
    width: 14.375rem;
    min-width: 14.375rem;
    padding: 1.75rem 1.25rem 1.625rem 1.625rem;
    margin-left: 1.125rem;
    border-top-right-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
    color: #ffffff;
    font-weight: 400;
    font-size: 0.75rem;
}

.suggestion .sugg-summary .sugg-start-dt, .suggestion .sugg-summary .sugg-end-dt {
    font-weight: 600;
    font-size: 1.25rem;
    text-align: center;
    margin-bottom: 1.125rem;
}

.suggestion .sugg-summary .sugg-price {
    font-weight: 700;
    font-size: 1.875rem;
    text-align: center;
}

.suggestion .sugg-summary .tour-select-label {
    color: #ffffff;
    border-color: #ffffff;
    border-radius: 6.188rem;
    font-weight: 600;
    font-size: 0.93rem;
    line-height: 1.25rem;
    margin-top: 1rem;
    padding: 0.813rem;
}

.sugg-excursion .sugg-summary {
    background-color: #3F9CFF;
}

.sugg-package .sugg-summary {
    background-color: #2867DF;
}


.tour-select:checked + .tour-select-label {
    background-color: #EC2A4D !important;
}
.tour-select:checked + .tour-select-label:hover {
    background-color: #B92349 !important;
}

.directions-hover .card {
    border-radius: 1.25rem;
}

.directions-hover .card-text {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25rem;
}

/* Timeline component styles */
.timeline-container {
  width: 100%;
  padding: 0 0.5rem;
  margin: 0 auto;
  position: relative;
}

.timeline-line {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  padding-top: 0.8rem;
}

.timeline-line::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: #dee2e6;
  z-index: 1;
  transform: translateY(-50%);
}

.timeline-point {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
}

.timeline-point::before {
  content: '';
  display: block;
  width: 0.688rem;
  height: 0.688rem;
  background: #0d6efd;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: background 0.2s;
  border: none;
  /* margin-bottom: 8px; */
}

.timeline-point:hover::before,
.timeline-point:focus::before {
  background: #0a58ca;
}

.timeline-label {
  font-weight: 600;
  font-size: 0.688rem;
  line-height: 1;
  margin-top: 0.188rem;
  color: #1E1E1E;
  cursor: pointer;
  white-space: nowrap;
}

/*
 * ТЗ
 */

 .tz {
    height: 5rem;
    /*margin-top: 6.56rem;*/
    margin-bottom: 1.25rem;
}
.tz .col {
    height: 5rem;
    padding: 1.25rem;
    font-weight: 400;
    font-size: 0.75rem;
    letter-spacing: 0;
}

.tz .two-rows div:last-child {
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.25;
}
.tz .col:not(:first-child):not(:last-child) {
    border-left: 1px solid #C3C5C9;
}
.tz .row {
    margin-left: 0;
    margin-right: 0;
}
.tz .col:first-child, .tz .col:last-child {
    padding: 0;
}
.tz .col:first-child {
    background: transparent;
}
.tz .col:last-child {
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
    color: #ffffff;
}
.tz .col img {
    width: 1.25rem;
}

.tz .hover-container {
    height: 5rem;
}
.tz .hover-trigger {
    height: 5rem;
    padding: 1.25rem;
}

.tz .directions-hover {
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}
.tz .directions-hover .card {
    width: 14.625rem;
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}

.tz .cart-hover {
    background-color: #2866DF;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
    line-height: 1.65;
    /*padding: 1.25rem;*/
}
.tz .cart-hover:hover {
    background-color: #EC2A4D;
}
.tz .cart-hover .form-switch .form-check-input {
    height: 1.5rem;
    width: 2.7rem;
    margin-top: .5rem !important;
    margin-bottom: .5rem !important;
}
.tz .cart-hover .form-select {
    height: 3rem;
    /*margin-top: .5rem !important;*/
    /*margin-bottom: .5rem !important;*/
}
.tz .cart-hover .hover-popup {
    border-radius: 12px;
    width: 40rem;
    top: 100%;
    right: 0;
    left: auto;
 }
 .tz .cart-hover .hover-popup .card img[src="/images/union.svg"] {
    height: .625rem;
    width: .625rem;
    filter: brightness(0) saturate(100%) invert(12%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(12%) contrast(100%);
}
.tz .hover-popup .excursions {
    margin: -1.56rem -1.1875rem 0 -1.875rem;
    padding-top: .5rem;
}
.tz .hover-popup .excursions > div {
    border-bottom: 1px solid #C3C5C9;
    padding: 1.125rem 1.25rem;
    font-size: 1rem;
    line-height: 1.25;
}

.cart-hover #order {
    height: 3.75rem;
    font-size: 1rem;
    font-weight: 600;
}

.cart-hover-total {
    padding: 1.25rem 0 1.875rem 0;
}
.cart-hover-total div:first-child {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25rem;
}
.cart-hover-total div:last-child {
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.25rem;
}

.package-excursions .date, .cart-hover .excursions .date {
    padding-right: 0.5rem;
}

 .cart-total {
    background: #1A49A6 !important;
    color: #ffffff;
}

.cart-total .card-body {
    padding: 2.5rem 1.875rem;
}

.cart-total .light {
    background: #2867DF;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}

.cart-total .excursions > div {
    border-bottom: 1px solid #1A49A6;
    padding: 1.875rem;
}
.cart-total .excursions .date {
    padding-right: 1.56rem;
}
/*.cart-total .excursions .border-bottom {*/

.cart-total .excursions button img {
    height: .625rem;
}

.cart-total .total {
    /*border-top: #1A49A6;*/
    padding: 2.5rem 1.875rem;
}

.cart-total .leadPrice {
    font-weight: bold;
    font-size: 1.875rem;
}

.cart-total legend {
    color: #ffffff;
    font-weight: bold;
    font-size: 1.125rem;
    padding: 0 0 1.5rem 0;
}

.cart-total .form-check-label {
    color: #ffffff;
    font-weight: 400;
    font-size: 1rem;
    /*line-height: 1;*/
    letter-spacing: 0;
    padding: .5rem 1rem;
}

.cart-total .prepayments {
    padding-bottom: 2.25rem;
}

.cart-total .btn-link {
    color: #ffffff;
}

.cart-total .lead-price-label {
    font-weight: bold;
    font-size: 1.125rem;
}

.cart-total .partner-commission-label {
    font-weight: 400;
    font-size: .8rem;
}

.sugg-en {
    color: rgb(236, 42, 77);
}

/* Responsive Design */
@media (max-width: 768px) {
    .calendarDatePicker {
        height: 200px;
    }

    .addGroup {
        height: calc(100vh - 200px - 1rem);
    }

    .portfolio-photo {
        min-width: 100px;
        max-width: 100px;
    }
}

@media (max-width: 576px) {
    table {
        font-size: 8px;
    }

    .table > :not(caption) > * > * {
        padding: 1px;
    }

    tbody td {
        width: 12%;
        max-width: 12%;
    }
}