/* ==========================================================================
   Tour detail page: visual layer
   Loaded only by view/client/detailTour.tpl, after tour.css.

   Presentation only. Every id, class and data-* hook used by customForTour.js
   stays as it is, and nothing here restyles a state the JS does not set.

   - Colours inherit each agency's --mainColor / --secondColor.
   - Logical properties (margin-inline, ...) keep fa/RTL and en/LTR working
     from this one file.
   - Every declaration is !important except the --td-* variables, so states
     the JS sets need their own rule here: see "State guards" at the end.
   ========================================================================== */

:root {
    --td-ink: #1b2430;
    --td-ink-soft: #566171;
    --td-line: #e7eaef;
    --td-surface: #fff;
    --td-canvas: #f6f7f9;
    --td-tint: #f1f4f8;
    --td-tint: color-mix(in srgb, var(--mainColor) 9%, #fff);
    --td-tint-strong: #e4e9f0;
    --td-tint-strong: color-mix(in srgb, var(--mainColor) 16%, #fff);
    --td-radius: 16px;
    --td-radius-sm: 10px;
    --td-shadow: 0 1px 2px rgba(27, 36, 48, .04), 0 8px 24px rgba(27, 36, 48, .05);
    --td-shadow-raised: 0 2px 4px rgba(27, 36, 48, .05), 0 16px 40px rgba(27, 36, 48, .1);
    --td-gap: 20px;
}

/* -- Shared card surface --------------------------------------------------- */

.parent-title-tour,
.tour-more-data-new,
.box-hotel1,
.box-hotel2,
.box-hotel3,
.flight-tour,
.flight-tour-mobile,
.travel-program,
.parent-documents-tour,
.tour-information {
    border: 1px solid var(--td-line) !important;
    border-radius: var(--td-radius) !important;
    box-shadow: var(--td-shadow) !important;
}

.parent_comment_form {
    border: 1px solid var(--td-line) !important;
    border-radius: var(--td-radius) !important;
    box-shadow: var(--td-shadow) !important;
}

.tour-more-data-new,
.box-hotel1,
.box-hotel2,
.box-hotel3,
.flight-tour,
.travel-program,
.documents-tour {
    margin-block: 0 var(--td-gap) !important;
}

.title-tour-detail-section,
.header-travel-program h4,
.tour-more-data-new h4 {
    color: var(--td-ink) !important;
    font-family: var(--fontFamilyBold) !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    margin-block: 0 14px !important;
}

.tour-more-data-new h4 {
    justify-content: flex-start !important;
}

/* -- Keyboard focus -------------------------------------------------------- */

.parent-date-link:focus-visible,
.item-btn-click-bottom-tour:focus-visible,
.reservation-btn-tour:focus-visible,
.reservation-fix:focus-visible,
.parent-share-tour:focus-visible,
.btn-Reservation-bed:focus-visible,
.btn-option:focus-visible,
.btn-details:focus-visible,
.open-accordion:focus-visible,
#pills-tab-rules .nav-link:focus-visible {
    outline: 2px solid var(--mainColor) !important;
    outline-offset: 2px !important;
}

.parent-accordion-travel-program .btn-link:focus-visible {
    box-shadow: inset 0 0 0 2px var(--mainColor) !important;
}

/* -- Cover ----------------------------------------------------------------- */

.cover-img-tour:not(.cover-img-tour-3i) {
    height: 380px !important;
    overflow: hidden !important;
}

.cover-img-tour:not(.cover-img-tour-3i) > img {
    filter: none !important;
}

.cover-img-tour:not(.cover-img-tour-3i)::after {
    background: linear-gradient(to bottom, rgba(14, 20, 30, .42), rgba(14, 20, 30, 0) 34%, rgba(14, 20, 30, .28)) !important;
    content: "" !important;
    inset: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    z-index: 1 !important;
}

/* The cover image sits behind the breadcrumb, so it needs a solid backing. */
.cover-img-tour:not(.cover-img-tour-3i) .parent-breadcrumb-item {
    backdrop-filter: blur(8px) !important;
    background: rgba(255, 255, 255, .9) !important;
    border-radius: 999px !important;
    margin-block: 14px 0 !important;
    padding: 6px 14px !important;
    width: fit-content !important;
}

.cover-img-tour:not(.cover-img-tour-3i) .my-breadcrumbs {
    left: 0 !important;
    margin-inline: auto !important;
    max-width: 1140px !important;
    padding-inline: 15px !important;
    position: absolute !important;
    z-index: 2 !important; /* public.css forces 1, which puts it under the scrim */
}

/* -- Title card ------------------------------------------------------------ */

/* The endless rotating glow ran for as long as the page was open. */
.parent-title-tour::after {
    animation: none !important;
    display: none !important;
}

/* Compact card: title on the first row; trip facts, links and the main button
   share the second row and wrap only when the width runs out. */
.parent-title-tour {
    padding: 13px 16px !important;
}

/* Beside the dates panel the three rows spread to its height, so no gaps. */
.parent-package:not(.parent-package-tour) > div:nth-child(1) {
    align-items: stretch !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
}

.parent-package > div:nth-child(1) {
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px 12px !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
}

.parent-new-titr {
    flex: 1 1 100% !important;
}

.parent-package:not(.parent-package-tour) {
    padding-inline-end: 20px !important;
}

.parent-package-tour > div:first-child {
    flex: 1 1 0 !important;
}

/* Title on one side; rating and share together as one action row. */
.parent-new-titr {
    align-items: flex-start !important;
    gap: 8px !important;
}

/* Tour names were cut to one line and to a 150-180px box on smaller screens. */
.main-title {
    color: var(--td-ink) !important;
    flex: 1 1 0 !important;
    font-size: 24px !important;
    -webkit-line-clamp: 2 !important;
    line-height: 1.45 !important;
    margin-inline-end: 12px !important;
    min-width: 0 !important;
    text-align: start !important;
    width: auto !important;
}

.parent-share-tour {
    background: var(--td-surface) !important;
    border: 1px solid var(--td-line) !important;
    color: var(--td-ink-soft) !important;
    flex: none !important;
    height: 32px !important;
    padding: 0 12px !important;
}

.parent-share-tour:hover {
    background: var(--td-tint) !important;
    border-color: var(--mainColor) !important;
    color: var(--mainColor) !important;
}

/* Rating: same height and shape as the share button beside it. The stars stay
   clickable; rates.js and doRate() are untouched. */
.parent-new-titr > .parent-rate-subscription {
    flex: none !important;
    order: 1 !important;
}

.parent-rate-subscription > .w-100 {
    width: auto !important;
}

.parent-rate-subscription .parent-rate-subscription {
    background: var(--td-surface) !important;
    border: 1px solid var(--td-line) !important;
    border-radius: 999px !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    height: 38px !important;
    padding: 0 14px !important;
}

.start-color {
    align-items: center !important;
    display: flex !important;
    gap: 1px !important;
}

.start-color label {
    cursor: pointer !important;
    line-height: 1 !important;
}

.start-color i {
    font-size: 13px !important;
}

.text-rate-tour {
    color: var(--td-ink-soft) !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}

/* Trip facts read as small stats: label above, value below. */
.parent-item-data-title-tour {
    gap: 14px !important;
}

.item-data-title-tour {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    flex-direction: row !important;
    gap: 6px !important;
    padding: 0 !important;
}

.item-data-title-tour + .item-data-title-tour {
    border-inline-start: 1px solid var(--td-line) !important;
    padding-inline-start: 14px !important;
}

.item-data-title-tour div {
    border: 0 !important;
    color: var(--td-ink-soft) !important;
    font-size: 13px !important;
    gap: 6px !important;
    padding: 0 !important;
}

.item-data-title-tour div i,
.residence div i,
.departure-date div i {
    color: var(--mainColor) !important;
    margin: 0 !important;
}

.item-data-title-tour div svg {
    fill: var(--mainColor) !important;
    margin: 0 !important;
}

.item-data-title-tour p {
    color: var(--td-ink) !important;
    font-family: var(--fontFamilyBold) !important;
    font-size: 14px !important;
    padding: 0 !important;
}

/* In-page links and the page's main action. */
.btn-click-bottom-tour {
    border-block-start: 1px solid var(--td-line) !important;
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
    justify-content: flex-start !important;
    padding-block-start: 10px !important;
}

/* This column is vertical, so a 100% basis would mean full height. */
.parent-package:not(.parent-package-tour) .btn-click-bottom-tour {
    flex: none !important;
}

.item-btn-click-bottom-tour {
    border-radius: 999px !important;
    color: var(--td-ink-soft) !important;
    font-size: 13px !important;
    min-height: 32px !important;
    padding: 4px 10px !important;
    transition: background-color .2s ease, color .2s ease !important;
}

.item-btn-click-bottom-tour i {
    display: none !important;
}

.item-btn-click-bottom-tour:hover {
    background: var(--td-tint) !important;
    color: var(--mainColor) !important;
    text-decoration: none !important;
}

.parent-reservation-btn-tour {
    margin-inline-start: auto !important;
}

/* This was a pale grey link, the weakest element on the card. */
.btn-click-bottom-tour .reservation-btn-tour {
    background: var(--mainColor) !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-family: var(--fontFamilyBold) !important;
    font-size: 14px !important;
    gap: 6px !important;
    min-height: 40px !important;
    padding: 6px 18px !important;
    transition: box-shadow .2s ease, filter .2s ease !important;
}

.btn-click-bottom-tour .reservation-btn-tour:hover {
    box-shadow: 0 8px 20px var(--td-tint-strong) !important;
    color: #fff !important;
    filter: brightness(.94) !important;
    text-decoration: none !important;
}

.reservation-btn-tour i {
    margin: 0 !important;
}

/* -- Dates and starting price ---------------------------------------------- */

/* A quiet side panel, so the date choice reads as its own step. */
.div-date-tour {
    background: var(--td-surface) !important;
    border: 1px solid var(--td-line) !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding: 8px 10px !important;
}

.div-date-tour .parent-price-first {
    border-block-start: 1px solid var(--td-line) !important;
    margin-block-start: auto !important;
    padding-block-start: 6px !important;
}

/* One-line dates: the day name goes, the date itself stays. */
.div-date-tour .parent-date-link {
    padding: 4px 10px !important;
}

.div-date-tour .round-trip-date {
    gap: 0 !important;
}

.div-date-tour .day-item {
    display: none !important;
}

.div-date-tour .date-item {
    font-size: 12px !important;
}

.div-date-tour h5 {
    color: var(--td-ink) !important;
    font-size: 13px !important;
    text-align: start !important;
}

.parent-date {
    gap: 4px !important;
    max-height: 84px !important;
    padding: 1px !important;
}

.parent-date-link {
    border: 1.5px solid var(--td-line) !important;
    border-radius: 12px !important;
    color: var(--td-ink) !important;
    cursor: pointer !important;
    overflow: hidden !important;
    position: relative !important;
    transition: background-color .2s ease, border-color .2s ease !important;
}

.parent-date-link:hover {
    border-color: var(--mainColor) !important;
}

.parent-date-link.active {
    background: var(--td-tint) !important;
    border-color: var(--mainColor) !important;
}

.day-item,
.tour-more-data-new .title-item {
    color: var(--td-ink-soft) !important;
    font-family: inherit !important;
}

.date-item {
    color: var(--td-ink) !important;
    font-family: var(--fontFamilyBold) !important;
}

.parent-date-link:disabled {
    background: var(--td-canvas) !important;
    cursor: not-allowed !important;
}

.parent-date-link:disabled:hover {
    border-color: var(--td-line) !important;
}

.parent-date-link.fullCapacity::after {
    backdrop-filter: none !important;
    background: rgba(246, 247, 249, .55) !important;
}

/* Replaces the rotated red sticker with a flat label. */
.parent-date-link.fullCapacity > div.text_fullCapacity {
    background: #b42318 !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    left: 50% !important;
    padding: 1px 7px !important;
    right: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    white-space: nowrap !important;
}

.parent-price-first h5 {
    color: var(--td-ink-soft) !important;
    flex-wrap: wrap !important;
    font-size: 13px !important;
    gap: 2px 8px !important;
}

.flex-row-alone-rial {
    color: var(--td-ink-soft) !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
    justify-content: flex-start !important;
}

.parent-price-first h5 > span {
    color: var(--mainColor) !important;
    font-family: var(--fontFamilyBold) !important;
    font-size: 18px !important;
}

.parent-price-first h5 > span span {
    color: var(--td-ink-soft) !important;
    font-family: inherit !important;
    font-size: 13px !important;
}

.parent-start-price {
    align-items: flex-start !important;
    flex: none !important;
    background: var(--td-surface) !important;
    border: 1px solid var(--td-line) !important;
    border-radius: 12px !important;
    justify-content: center !important;
    margin-inline: 14px 0 !important;
    padding: 10px 14px !important;
}

.parent-start-price .parent-price-first h5 {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 0 !important;
}

/* Three or more dates: carousel strip. */
.tour-more-data-new {
    padding: 20px 24px !important;
}

.tour-more-data-new .parent-date-link {
    border-radius: 12px !important;
    gap: 6px !important;
    padding: 0 0 8px !important;
}

.tour-more-data-new .parent-title-data-count {
    background: var(--td-canvas) !important;
    border-radius: 0 !important;
    color: var(--td-ink-soft) !important;
    font-family: var(--fontFamilyBold) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 5px 8px !important;
}

.tour-more-data-new .parent-data-count {
    padding-inline: 12px !important;
}

.parent-date-link.active .parent-title-data-count {
    background: var(--mainColor) !important;
    color: #fff !important;
}

.tour-more-data-new .date-item {
    color: var(--td-ink) !important;
    font-size: 20px !important;
}

/* -- Packages -------------------------------------------------------------- */

.box-hotel1,
.box-hotel2,
.box-hotel3 {
    padding: 20px !important;
}

.hotel-tour {
    border: 1px solid var(--td-line) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    margin-block-end: 10px !important;
    padding-inline-end: 0 !important;
}

.hotel-star-tour,
.hotel-option-tour {
    padding-inline: 16px !important;
}

.hotel-star-tour h2 {
    color: var(--td-ink) !important;
    cursor: pointer !important;
    font-family: var(--fontFamilyBold) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
}

.hotel-star-tour h6 {
    color: var(--td-ink-soft) !important;
    font-size: 13px !important;
}

.parent-hotel-tour-img img {
    filter: none !important;
}

.a_phone_for_tour {
    background: var(--td-tint) !important;
    color: var(--mainColor) !important;
    direction: ltr !important;
    font-family: var(--fontFamilyBold) !important;
    font-size: 13px !important;
}

.a_phone_for_tour:hover {
    background: var(--mainColor) !important;
    color: #fff !important;
}

.a_phone_for_tour:hover svg {
    fill: #fff !important;
}

.a_phone_for_tour svg {
    fill: var(--mainColor) !important;
    width: 13px !important;
}

.hotel-option-tour span,
.city-name-hotel-tour,
.night-hotel-tour {
    color: var(--td-ink-soft) !important;
    font-size: 13px !important;
}

.city-name-hotel-tour i,
.night-hotel-tour i {
    color: var(--mainColor) !important;
}

.btn-option,
.btn-details {
    border-radius: 8px !important;
    color: var(--td-ink-soft) !important;
    font-size: 13px !important;
    gap: 5px !important;
    min-height: 32px !important;
}

.btn-option i,
.btn-details i {
    margin: 0 !important;
}

.btn-option:hover,
.btn-details:hover {
    background: var(--td-tint) !important;
    color: var(--mainColor) !important;
}

.box-bed-money {
    margin-block-start: 14px !important;
}

.parent-grid-price {
    gap: 10px !important;
    overflow: visible !important;
}

.box-number-beds {
    background: var(--td-surface) !important;
    border: 1px solid var(--td-line) !important;
    border-radius: 12px !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
}

.box-number-beds:hover {
    border-color: var(--mainColor) !important;
    box-shadow: var(--td-shadow) !important;
}

.head-number-beds {
    background: var(--mainColor) !important;
    border: 0 !important;
    color: #fff !important;
    font-size: 13px !important;
    height: auto !important;
    line-height: 1.6 !important;
    padding: 8px 6px !important;
}

.box-number-beds.is-preferred-room {
    background: var(--td-tint-strong) !important;
    border-color: var(--mainColor) !important;
    border-color: color-mix(in srgb, var(--mainColor) 75%, #000) !important;
}

.box-number-beds.is-preferred-room .head-number-beds {
    background: var(--mainColor) !important;
    background: color-mix(in srgb, var(--mainColor) 75%, #000) !important;
}

.box-number-beds.is-preferred-room .parent-btn-number-beds {
    border-block-start-color: var(--mainColor) !important;
    border-block-start-color: color-mix(in srgb, var(--mainColor) 35%, #fff) !important;
}

.first-price {
    flex-grow: 1 !important;
    padding: 10px 6px !important;
}

.first-price span {
    color: var(--td-ink) !important;
    font-family: var(--fontFamilyBold) !important;
}

.first-price i {
    color: var(--td-ink-soft) !important;
    font-size: 12px !important;
    font-style: normal !important;
}

.first-price.check_exist_discount {
    padding-block-end: 0 !important;
}

.first-price.check_exist_discount span,
.first-price.check_exist_discount i {
    color: #8a93a0 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    text-decoration: line-through !important;
}

.parent-btn-number-beds {
    border-block-start: 1px solid var(--td-line) !important;
    height: auto !important;
    justify-content: space-between !important;
    padding: 6px 8px !important;
}

.enter-number-beds {
    background: var(--td-tint) !important;
    border-radius: 8px !important;
    color: var(--mainColor) !important;
    font-size: 13px !important;
    height: 34px !important;
    line-height: 1 !important;
    width: 34px !important;
}

.enter-number-beds:hover {
    background: var(--mainColor) !important;
    color: #fff !important;
}

.number-beds-counter {
    color: var(--td-ink) !important;
    font-family: var(--fontFamilyBold) !important;
    font-size: 17px !important;
}

.parent-tour-price {
    background: var(--td-tint) !important;
    border: 0 !important;
    border-radius: 12px !important;
    gap: 6px !important;
    margin-inline: 10px 0 !important;
    padding: 16px !important;
}

.parent-tour-price .titr-data {
    margin-block-end: 0 !important;
}

.titr-data h5 {
    color: var(--td-ink-soft) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

.price-all-tour {
    color: var(--td-ink) !important;
    font-family: var(--fontFamilyBold) !important;
    font-size: 21px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.price-prepayment-tour {
    color: var(--td-ink-soft) !important;
}

.btn-Reservation-bed {
    background: var(--mainColor) !important; /* style-en/tour.css forces green */
    border-radius: 10px !important;
    font-family: var(--fontFamilyBold) !important;
    font-size: 15px !important;
    margin-block-start: auto !important;
    min-height: 46px !important;
    padding: 8px 12px !important;
    width: 100% !important;
}

.btn-Reservation-bed:hover {
    background: var(--secondColor) !important;
}

.parent-tour-data {
    border: 1px solid var(--td-line) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.parent-calendar {
    border-color: var(--td-line) !important;
    border-radius: 10px !important;
}

/* -- Transport timeline ----------------------------------------------------
   A solid rail replaces the dotted line and keeps the original stop icons.
   update_route_data_tour() only rewrites text, src and the vehicle icon class,
   so all of this is safe across date changes. Hidden below 992px by tour.css. */

.flight-tour {
    padding-block: 20px 24px !important;
}

/* The heading starts at the card edge, level with the rail, not the content. */
.flight-tour .title-tour-detail-section {
    margin-block: 0 16px !important;
    margin-inline-start: -56px !important;
}

.flight-tour-mobile .title-tour-detail-section {
    margin: 0 !important;
}

.flight-tour::after {
    background: var(--td-tint-strong) !important;
    background-image: none !important;
    border-radius: 2px !important;
    bottom: 40px !important;
    height: auto !important;
    inset-inline: 38px auto !important;
    top: 78px !important;
    width: 2px !important;
}

.dates {
    background: var(--td-tint) !important;
    border-radius: 0 0 10px 10px !important;
    color: var(--mainColor) !important;
    font-family: var(--fontFamilyBold) !important;
    margin: 0 !important;
    padding: 6px 14px !important;
}

.tour-travel-parent {
    gap: 12px !important;
}

.tour-travel-item {
    gap: 12px !important;
}

/* The icons themselves come from tour.css; this only seats them on the rail. */
.label-tour-travel::after,
.label-tour-travel-two::after,
.label-ending::after {
    background-color: var(--td-surface) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 4px var(--td-surface) !important;
    height: 30px !important;
    inset-inline: -56px auto !important;
    top: 0 !important;
    width: 30px !important;
}

.origin,
.label-tour-travel-two .origin,
.label-ending .origin-ending {
    align-items: baseline !important;
    color: var(--td-ink) !important;
    font-size: 16px !important;
    gap: 8px !important;
}

.origin i,
.origin-ending i {
    color: var(--td-ink-soft) !important;
    font-family: var(--fontFamily) !important;
    font-size: 12px !important;
    font-style: normal !important;
}

/* Leg card */
.card-tour {
    background: var(--td-surface) !important;
    border: 1px solid var(--td-line) !important;
    border-radius: 12px !important;
    height: auto !important;
    min-height: 76px !important;
    padding-block: 12px !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
}

.card-tour:hover {
    border-color: var(--mainColor) !important;
    box-shadow: var(--td-shadow) !important;
}

.card-col-flight,
.card-col-flight-flex {
    align-self: stretch !important;
    border: 0 !important;
    border-inline-end: 1px solid var(--td-line) !important;
    gap: 2px !important;
    justify-content: center !important;
    min-height: 50px !important;
}

.card-tour-body > div:last-child {
    border-inline-end: 0 !important;
}

/* Route: code, rail with vehicle, code. */
.card-col-flight-flex {
    column-gap: 14px !important;
    grid-template-columns: minmax(64px, auto) minmax(48px, 1fr) minmax(64px, auto) !important;
    padding-inline: 20px !important;
}

.airport-of-origin,
.destination-airport {
    justify-content: center !important;
}

.airport-of-origin div:first-child,
.destination-airport div:first-child {
    color: var(--td-ink) !important;
    direction: ltr !important;
    font-family: var(--fontFamilyBold) !important;
    font-size: 19px !important;
    line-height: 1.3 !important;
}

.airport-of-origin div:last-child,
.destination-airport div:last-child {
    color: var(--td-ink-soft) !important;
    font-size: 12px !important;
}

.card-col-flight-flex > div:nth-child(2) {
    align-items: center !important;
    position: relative !important;
}

.card-col-flight-flex > div:nth-child(2)::before {
    border-block-start: 1.5px dashed var(--td-tint-strong) !important;
    content: "" !important;
    inset-inline: 0 !important;
    position: absolute !important;
    top: 50% !important;
}

.custom-bg-svg {
    background-color: var(--td-tint) !important;
    background-size: 24px !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 5px var(--td-surface) !important;
    height: 40px !important;
    width: 40px !important;
    z-index: 1 !important;
}

.card-col-flight img {
    height: 26px !important;
    margin-block-end: 2px !important;
    width: 26px !important;
}

.name-airline,
.value-bar,
.small-title {
    color: var(--td-ink-soft) !important;
    font-size: 12px !important;
}

.title-bar,
.fly-time,
.flight-duration {
    color: var(--td-ink) !important;
    direction: ltr !important;
    font-family: var(--fontFamilyBold) !important;
    font-size: 17px !important;
}

/* Mobile route list */
.flight-tour-mobile {
    gap: 10px !important;
    padding: 16px !important;
}

.box-flight-mobile {
    border-radius: 12px !important;
}

/* -- Travel program -------------------------------------------------------- */

.travel-program {
    padding: 24px !important;
}

.header-travel-program {
    margin-block-end: 8px !important;
}

.header-travel-program h4 {
    margin: 0 !important;
}

.open-accordion {
    border-radius: 999px !important;
    color: var(--mainColor) !important;
    font-size: 13px !important;
    gap: 6px !important;
    min-height: 34px !important;
    padding: 5px 12px !important;
}

.open-accordion i {
    margin: 0 !important;
}

.open-accordion:hover {
    background: var(--td-tint) !important;
    color: var(--mainColor) !important;
}

#accordion-travel-program .card {
    border: 1px solid var(--td-line) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    margin: 0 0 10px !important;
    overflow: hidden !important;
}

#accordion-travel-program .card:last-child {
    margin-block-end: 0 !important;
}

.card-header-travel-program {
    background: transparent !important;
}

.parent-accordion-travel-program .btn-link {
    color: var(--td-ink) !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    text-align: start !important;
}

.parent-accordion-travel-program .btn-link:hover {
    background: var(--td-canvas) !important;
}

.parent-accordion-travel-program i {
    flex: none !important;
    font-size: 16px !important;
    height: 34px !important;
    margin: 0 !important;
    width: 34px !important;
}

.icone-start,
.icone-tour-day,
.icone-final {
    background: var(--td-tint) !important;
    color: var(--mainColor) !important;
    margin: 0 !important;
}

.icone-arrow-travel-program {
    color: var(--td-ink-soft) !important;
    margin-inline-start: auto !important;
}

.internal-headline-accordion {
    color: var(--mainColor) !important;
    flex: none !important;
    font-family: var(--fontFamilyBold) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin: 0 !important;
}

.parent-collapse-accordion {
    background: var(--td-surface) !important;
    border-block-start: 1px solid var(--td-line) !important;
    border-radius: 0 !important;
}

.parent-text-accordion-day,
.parent-text-accordion-day p {
    color: #3a4452 !important;
    font-size: 15px !important;
    line-height: 2 !important;
    text-align: start !important;
}

.parent-text-accordion-day {
    padding: 16px 18px !important;
}

.parent-owl-accordion .owl-accordion-day img {
    filter: none !important;
    border-radius: 10px !important;
}

/* -- Details tabs ---------------------------------------------------------- */

.parent-documents-tour {
    background: var(--td-surface) !important;
}

.svg-tab-rules {
    display: none !important;
}

#pills-tab-rules {
    border-block-end: 1px solid var(--td-line) !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    padding: 12px 16px 0 !important;
    scrollbar-width: none !important;
}

#pills-tab-rules::-webkit-scrollbar {
    display: none !important;
}

#pills-tab-rules .nav-item {
    flex: none !important;
}

/* Underline tabs: bootstrap ships this as a filled pill. */
#pills-tab-rules .nav-link,
#pills-tab-rules .nav-link:hover,
#pills-tab-rules .nav-link.active,
#pills-tab-rules .nav-link.active:hover,
.nav-pills .show > .nav-link {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow:none !important;
}

#pills-tab-rules .nav-link {
    border-block-end: 2.5px solid transparent !important;
    color: var(--td-ink-soft) !important;
    font-size: 14px !important;
    gap: 8px !important;
    justify-content: center !important;
    padding: 10px 14px 12px !important;
    white-space: nowrap !important;
}

#pills-tab-rules .nav-link:hover {
    color: var(--td-ink) !important;
}

#pills-tab-rules .nav-link.active,
#pills-tab-rules .nav-link.active:hover {
    border-block-end-color: var(--mainColor) !important;
    color: var(--mainColor) !important;
    font-family: var(--fontFamilyBold) !important;
}

#pills-tab-rules .nav-link i {
    font-size: 16px !important;
    margin: 0 !important;
}

.parent-content-tab-rules {
    min-height: 0 !important;
    padding: 20px 24px 24px !important;
}

/* The old 45px line height spread paragraphs across twice the space. */

#content-tab-description .parent-content {
    max-width: none !important;
}

/* -- Tour facts ------------------------------------------------------------ */
.tour-Internal{
    padding:0 !important;
    margin-top: 20px !important;
}
.tour-information {
    padding: 24px !important;
}

.box-data-top {
    border-block-end: 1px solid var(--td-line) !important;
    padding-block-end: 20px !important;
    row-gap: 14px !important;
}

.box-data-top-item {
    align-items: center !important;
    gap: 12px !important;
}

.icone-data-tour {
    background: var(--td-tint) !important;
    border: 0 !important;
    border-radius: 10px !important;
    flex: none !important;
    height: 42px !important;
    margin: 0 !important;
    width: 42px !important;
}

.icone-data-tour i {
    color: var(--mainColor) !important;
    font-size: 18px !important;
}

.text-data-tour {
    min-width: 0 !important;
}

/* The label was styled louder than its value. */
.box-data-top-titr {
    color: var(--td-ink-soft) !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

.text-data-tour span {
    color: var(--td-ink) !important;
    font-family: var(--fontFamilyBold) !important;
    font-size: 14px !important;
}

.box-data-bottom {
    margin-block-start: 18px !important;
}

.include {
    column-gap: 24px !important;
    columns: 3 220px !important;
}

.include .list-unstyled {
    break-inside: avoid !important;
    color: #3a4452 !important;
    font-size: 14px !important;
    gap: 10px !important;
    line-height: 1.8 !important;
    padding-block: 4px !important;
}

.include .list-unstyled i {
    background: transparent !important;
    color: #12805c !important;
    font-size: 12px !important;
    line-height: 1.8rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* -- Comment form: stacked fields beside an illustration ---------------------
   The markup already orders name, email, comment and leaves the second grid
   column empty, so the picture is a pseudo element there. The SVG is
   transparent, so each agency's own gradient colours it. */

.parent_comment_form .form-tour {
    border: 0 !important;
    column-gap: 28px !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr) !important;
    margin-block-end: 0 !important;
    padding: 4px 24px 24px !important;
    margin:0 !important;
}

.parent_comment_form .form-tour::after {
    background: url(../images/tour-comment.png) center center / cover no-repeat, linear-gradient(165deg, var(--mainColor), var(--secondColor)) !important;
    border-radius: 14px !important;
    content: "" !important;
    margin-block-start: 20px !important;
    min-height: 380px !important;
}

.parent_comment_form .input_comment {
    display: block !important;
    margin: 0 !important;
}

.parent_comment_form .form_comment label {
    color: var(--td-ink) !important;
    font-family: var(--fontFamilyBold) !important;
    font-size: 14px !important;
    gap: 3px !important;
    margin-block: 16px 6px !important;
}

.parent_comment_form .form_comment label span {
    color: #b42318 !important;
}

.parent_comment_form .input_comment input,
.parent_comment_form .div_area textarea {
    background: var(--td-surface) !important;
    border: 1px solid var(--td-line) !important;
    border-radius: 10px !important;
    color: var(--td-ink) !important;
    display: block !important;
    font-size: 14px !important;
    outline: 0 !important;
    padding: 10px 14px !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
    width: 100% !important;
}

.parent_comment_form .input_comment input {
    height: 46px !important;
}

.parent_comment_form .div_area {
    margin: 0 !important;
}

.parent_comment_form .div_area textarea {
    line-height: 1.8 !important;
    margin: 0 !important;
    min-height: 130px !important;
    resize: vertical !important;
}

.parent_comment_form .input_comment input:focus,
.parent_comment_form .div_area textarea:focus {
    border-color: var(--mainColor) !important;
    box-shadow: 0 0 0 3px var(--td-tint-strong) !important;
}

.parent_comment_form .input_comment input:disabled {
    background: var(--td-canvas) !important;
    color: var(--td-ink-soft) !important;
}

.parent_comment_form .btn_submit {
    background: var(--mainColor) !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-family: var(--fontFamilyBold) !important;
    font-size: 15px !important;
    height: 46px !important;
    margin-block-start: 16px !important;
    padding: 0 30px !important;
    width: 100% !important;
}

.parent_comment_form .btn_submit:hover {
    background: var(--secondColor) !important;
}

@media (max-width: 991px) {
    .parent_comment_form .form-tour {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 4px 16px 20px !important;
    }

    .parent_comment_form .form-tour::after {
        display: none !important;
    }
}

/* -- Loading state --------------------------------------------------------- */

.loader-parent {
    color: var(--td-ink-soft) !important;
}

/* -- Up to 1200px ---------------------------------------------------------- */

@media (max-width: 1200px) {
    .parent-share-tour i,
    .parent-share-tour span {
        font-size: 13px !important;
    }

    .item-data-title-tour div {
        font-size: 12px !important;
    }

    .item-data-title-tour p {
        font-size: 13px !important;
    }

    .parent-grid-price {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* -- Up to 991px ----------------------------------------------------------- */

@media (max-width: 991px) {
    .main-title {
        font-size: 19px !important;
        -webkit-line-clamp: 4 !important;
    }

    .cover-img-tour:not(.cover-img-tour-3i) {
        height: 320px !important;
    }

    .parent-title-tour {
        padding: 18px !important;
    }

    .parent-package:not(.parent-package-tour) {
        padding-inline-end: 14px !important;
    }

    .div-date-tour {
        padding: 12px !important;
    }

    /* With the dates column beside it the title is too narrow for one row.
       The 3+ dates layout has the width, and its rating sits in the next column. */
    .parent-package:not(.parent-package-tour) .parent-new-titr {
        flex-wrap: wrap !important;
    }

    .parent-package:not(.parent-package-tour) .main-title {
        flex-basis: 100% !important;
        margin-inline-end: 0 !important;
    }

    .parent-tour-price {
        margin-inline: 0 !important;
        margin-top: 10px;
    }

    .box-number-beds {
        margin-block-end: 0 !important;
    }

    .parent-grid-price {
        grid-row-gap: 10px !important;
    }

    /* tour.css restores a four-column grid here; let the tabs scroll instead. */
    #pills-tab-rules {
        display: flex !important;
    }

    #pills-tab-rules .nav-link {
        align-items: center !important;
        flex-direction: row !important;
        font-size: 14px !important;
        padding: 10px 12px 12px !important;
    }
}

/* -- Up to 767px: JS pins .box-title-tour, so no transforms on it here ------ */

@media (max-width: 767px) {
    /* tour.css hides the title card here, leaving the name as a 13px crumb.
       Show the page's h1 (last breadcrumb) as a heading over the cover. */
    .cover-img-tour:not(.cover-img-tour-3i) {
        height: 300px !important;
    }
    .mBox-owl{
        height:unset !important;
    }

    .cover-img-tour:not(.cover-img-tour-3i)::after {
        background: linear-gradient(to bottom, rgba(14, 20, 30, 0) 40%, rgba(14, 20, 30, .78)) !important;
    }

    .cover-img-tour:not(.cover-img-tour-3i) .my-breadcrumbs {
        bottom: 34px !important;
        max-width: 100% !important;
        padding-inline: 16px !important;
        top: auto !important;
    }

    .cover-img-tour:not(.cover-img-tour-3i) .parent-breadcrumb-item {
        backdrop-filter: none !important;
        background: transparent !important;
        border-radius: 0 !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: normal !important;
        width: auto !important;
    }

    .cover-img-tour:not(.cover-img-tour-3i) .breadcrumb-item:not(.active) {
        display: none !important;
    }

    .cover-img-tour:not(.cover-img-tour-3i) .breadcrumb-item.active::before {
        display: none !important;
    }

    .cover-img-tour:not(.cover-img-tour-3i) .breadcrumb-item.active h1 {
        color: #fff !important;
        font-family: var(--fontFamilyBold) !important;
        font-size: 22px !important;
        line-height: 1.5 !important;
    }

    .parent-title-tour_res {
        border: 1px solid var(--td-line) !important;
        border-radius: var(--td-radius) !important;
        box-shadow: var(--td-shadow) !important;
        padding: 12px !important;
    }

    .carousel {
        gap: 8px !important;
        scrollbar-width: none !important;
        width: 100% !important;
    }

    .carousel__item {
        min-width: 132px !important;
        width: 132px !important;
    }

    .card.select-date {
        border: 1.5px solid var(--td-line) !important;
        border-radius: 12px !important;
        box-shadow: none !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .carousel__item.active .select-date .active {
        border-radius: 0 !important;
    }

    .select-date__item {
        color: var(--td-ink-soft) !important;
        font-size: 12px !important;
    }

    .select-date__item span:first-of-type {
        color: var(--td-ink) !important;
        font-size: 15px !important;
    }

    .carousel__item.active .select-date__item span:first-of-type {
        color: #fff !important;
    }

    /* tour.css places this button only up to 576px, so 577-767px showed it
       unstyled in the page flow. */
    .reservation-fix {
        align-items: center !important;
        background: var(--mainColor) !important;
        border-radius: 999px !important;
        bottom: 65px !important;
        box-shadow: 0 8px 20px rgba(27, 36, 48, .22) !important;
        color: #fff !important;
        font-family: var(--fontFamilyBold) !important;
        font-size: 15px !important;
        gap: 6px !important;
        height: 50px !important;
        left: 15px !important;
        padding: 5px 22px !important;
        position: fixed !important;
        width: auto !important;
        z-index: 100 !important;
    }

    .reservation-fix i {
        margin: 0 !important;
    }

    .box-title-tour.darkHeader .parent-title-tour_res {
        box-shadow: var(--td-shadow-raised) !important;
    }
}

/* -- Up to 576px ----------------------------------------------------------- */

@media (max-width: 576px) {
    :root {
        --td-gap: 14px;
        --td-radius: 14px;
    }

    .title-tour-detail-section,
    .header-travel-program h4 {
        font-size: 18px !important;
    }

    .box-hotel1,
    .box-hotel2,
    .box-hotel3,
    .travel-program,
    .tour-information {
        padding: 14px !important;
    }

    .hotel-star-tour,
    .hotel-option-tour {
        padding-inline: 12px !important;
    }

    .hotel-tour-option-box1 {
        flex-wrap: wrap !important;
        gap: 6px 14px !important;
    }

    .parent-grid-price {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-column-gap: 8px !important;
        grid-row-gap: 8px !important;
    }

    .box-number-beds .first-price {
        height: auto !important;
        line-height: 1.6 !important;
        min-height: 44px !important;
        padding: 8px 6px !important;
    }

    .box-number-beds .first-price.check_exist_discount {
        min-height: 0 !important;
        padding-block-end: 0 !important;
    }

    /* Stepper targets reach 44px where fingers are the input. */
    .enter-number-beds {
        height: 44px !important;
        width: 44px !important;
    }

    .btn-Reservation-bed {
        min-height: 50px !important;
    }

    #pills-tabContent-rules .parent-content {
        font-size: 14px !important;
        line-height: 2 !important;
        text-align: start !important;
    }

    .parent-content-tab-rules {
        padding: 16px !important;
    }

    .parent-text-accordion-day,
    .parent-text-accordion-day p {
        font-size: 14px !important;
    }

    .box-data-top > div {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* -- Larger screens: the card overlaps the cover ---------------------------- */

@media (min-width: 768px) {
    .box-title-tour:not(.box-title-tour-3i) {
        transform: translateY(-52px) !important;
        margin-block-end: -34px !important;
    }

    .box-title-tour:not(.box-title-tour-3i) .parent-title-tour {
        box-shadow: var(--td-shadow-raised) !important;
    }
}

/* -- Reduced motion -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .parent-date-link,
    .item-btn-click-bottom-tour,
    .btn-click-bottom-tour .reservation-btn-tour,
    .box-number-beds,
    .parent-accordion-travel-program i {
        transition: none !important;
    }
}

/* -- State guards: classes the JS toggles must beat the rules above --------- */

/* customForTour.js adds .tooltip-green once a package is selected. */
.btn-click-bottom-tour .reservation-btn-tour.tooltip-green,
.reservation-fix.tooltip-green {
    background: #10b510 !important;
    color: #fff !important;
}

.reservation-btn-tour .tooltiptext-green {
    background-color: #10b510 !important;
}

/* Selected date, set by the date buttons. */
.parent-date-link.active .date-item,
.parent-date-link.active .arrow-date {
    color: var(--mainColor) !important;
}

.carousel__item.active .select-date__item,
.carousel__item.active .select-date__item span {
    color: #fff !important;
}

.d-none {
    display: none !important;
}