/* Corrections layered on top of the extracted site stylesheet.
   tours.css is generated; this file is hand-written and safe to edit.

   Values below were read from the LIVE site with the browser (computed
   styles on /events/upcoming-events/), not guessed. */

/* ---------------------------------------------------------------------------
   Page background.
   Live value:  .kh-home_bg { background-image:url(dist/img/dc88886.jpg);
                              background-size:100%; background-repeat:repeat-y }
   The URL is spliced into the bundle as a JS variable, so the CSS extraction
   could not carry it over - it is restored here.
   --------------------------------------------------------------------------- */
.kh-home_bg {
    background-image: url("../dist/img/dc88886.jpg");
    background-size: 100%;
    background-repeat: repeat-y;
    background-position: 0 0;
}

/* The header is position:fixed (z-index 1030); the site compensates with
   padding on <main>. Live value: 114px. */
.tours-page main { padding-top: 114px; }

/* The header is transparent, so page content scrolled visibly underneath it.
   Give it the same texture, and pin BOTH the page background and the header
   background to the viewport so the two stay in register at any scroll
   position - the header then reads as solid and seamless. */
.tours-page .kh-home_bg { background-attachment: fixed; }
.tours-page header.fixed-top {
    background-image: url("../dist/img/dc88886.jpg");
    background-size: 100%;
    background-repeat: repeat-y;
    background-attachment: fixed;
    background-position: 0 0;
}

/* Images must not render at intrinsic size. */
.tours-page .responsive-image img,
.tours-page .desc img { max-width: 100%; height: auto; }
.tours-page .responsive-image img { width: 100%; display: block; }

/* Mobile: the nav is a slide-in panel in the SPA; ours toggles a class. */
@media (max-width: 991px) {
    .tours-page .nav-container:not(.opened) .nav-links { display: none; }
}

/* The body text was running straight into the copyright line. */
.tours-page .single-pg .desc { padding-bottom: 60px; }
.tours-page .single-pg .desc p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Header geometry.

   tours.css concatenates the bundle's CSS modules in file order, which is not
   the order the SPA loads them in - so Bootstrap's own .navbar-brand rule ends
   up AFTER the site's override and wins. That left the brand at display:block
   with no right margin, which moved the whole nav.

   Values below are the live site's computed values, measured on /crafts:
     header height 114   brand top 27   nav-container top 56 / left 255
   --------------------------------------------------------------------------- */
.tours-page nav.navbar {
    align-items: flex-end;
    padding: 27px 0 30px;
    max-width: 1200px;
}
.tours-page .navbar-brand {
    display: flex;
    flex: 0 0 90px;
    width: 90px;
    margin-right: 30px;
    padding: 4.375px 0;
    align-self: flex-end;
}
.tours-page .nav-container {
    width: auto;
    flex: 1 1 auto;
    align-items: flex-end;
}
.tours-page .nav-links { align-items: flex-end; }

/* ===========================================================================
   Tours carousel.

   The markup uses the site's own carousel classes, so nearly all styling comes
   from tours.css for free:
     .orange-cricle                              #ff8317 opacity .28, centred
                                                 (size/shape overridden below)
     .carousel-wrapper .responsive-image img     margin-top:50px
     .carousel-wrapper .swiper-slide:not(.active) opacity .4, image 70%
     .carousel-wrapper .swiper-slide.active .desc-outer  display:block
     .swiper-pagination                          right:50%; translateX(50%)
     .desc-outer / .additional-info              fonts and spacing
   Only what Swiper would have supplied is added below.
   =========================================================================== */

/* Section switching from the sidebar (no page reload) */
.tours-page .kh-section { display: none; }
.tours-page .kh-section.is-active { display: block; animation: fade-in .6s both; }

/* Swiper sets the slide width and the viewport inline; we do it in CSS. The
   container is padded by half its width minus half a slide, so slide 0 is
   centred with no transform and each step is exactly one slide. */
.tours-page .carousel-wrapper .swiper-container {
    overflow: hidden;
    padding: 0 calc(50% - 113.5px);
}
.tours-page .carousel-wrapper .swiper-wrapper {
    display: flex;
    transition: transform .3s ease;
    will-change: transform;
}
.tours-page .carousel-wrapper .swiper-slide {
    flex: 0 0 227px;
    width: 227px;
    height: auto;
}

/* Tour photos stay rectangles - they are ordinary landscape uploads, not the
   circular cut-outs the Events section uses - so the orange behind them is a
   rectangle too, concentric with the photo rather than a circle it sits in.

   "Soft mat" geometry. The slide width (227px) and the photo's margin-top (50px)
   are the live Events values and are unchanged; everything else below is the
   soft-mat treatment, with the arithmetic each number comes from:

     photo            227 x 151, margin-top 50  -> 50..201   (3:2 of the 227
                                                              slide width)
     orange block     265 x 189, top 31         -> 31..220   (an even 19px band:
                                                              227+2*19 = 265,
                                                              151+2*19 = 189,
                                                              50-19 = 31)
     70% neighbours   photo 159 x 106                        (3:2 of the site's
                                                              70% of 227)
     image-desc_wrapper 194px, which is 244 - 50: the caption is .desc-outer's
                        margin-top (50) below the wrapper, and 244 puts it 24px
                        under the orange block's bottom edge at 220. The mat, not
                        the photo, is the visible bottom edge now, so it is the
                        one the caption is spaced from. */
.tours-page .carousel-wrapper .orange-cricle {
    top: 31px;                          /* photo top 50 minus the 19px band */
    width: 265px;                       /* 227 + 2 * 19 */
    height: 189px;                      /* 151 + 2 * 19 */
    border-radius: 10px;                /* soft mat; site value was 50% (a circle) */
    /* The site paints #ff8317 and thins it with opacity:.28 on the element.
       Carry the alpha in the colour instead and reset opacity, so the two do
       not multiply into something darker than intended. */
    background-color: rgba(255, 131, 23, .34);
    opacity: 1;
    /* Same direction-safe centring the site uses; half-width constant only,
       265 / 2 = 132.5 (was 127.5 for the 255px block). */
    right: calc(50% - 132.5px);
    transform: translateX(calc(50% - 132.5px));
    transition: width .3s ease, height .3s ease, top .3s ease,
                border-radius .3s ease;
}
.tours-page .carousel-wrapper .image-desc_wrapper { height: 194px; }

/* The two 70% neighbours sat 34px off their own slide's centre, so the gap on
   one side of the centred tour was 68px wider than on the other.

   It is not the column. .image-desc_wrapper is display:flex and the site forces
   .carousel-wrapper .swiper-slide .row.w-100 { width:auto!important }, so on a
   non-active slide the row shrinks to its content - measured 189px inside a
   227px slide - and, being a flex item with no grow, parks at the flex-start
   edge: the right in Arabic, the left in English. All 68px of slack ends up on
   one side. The active slide never showed it because its column is
   flex-basis:100%, so its row already measured the full 257px.

   flex-grow makes the row fill on every slide; the column's own margin:auto
   then centres it, and the photo centres on that. Measured on the live page
   before -> after: row widths 257/189/189 -> 257/257/257, and photo centre
   minus slide centre 0/34/34 -> 0/0/0. It also removes the 19px the mat used to
   run into the near neighbour, since that neighbour moves 34px outward. */
.tours-page .carousel-wrapper .image-desc_wrapper > .row { flex-grow: 1; }

/* Centre the photo on the slide from the flex container, not from margin:auto -
   a fixed-size box wider than its column overflows right under margin:auto but
   stays centred under justify-content. */
.tours-page .carousel-wrapper .responsive-image { display: flex; justify-content: center; }
.tours-page .carousel-wrapper .responsive-image a { display: block; line-height: 0; flex: 0 0 auto; }
.tours-page .carousel-wrapper .responsive-image img {
    width: 227px;                       /* the slide width, unchanged */
    height: 151px;                      /* 3:2 of 227 (was 170, i.e. 4:3) */
    max-width: 100%;
    object-fit: cover;
    border-radius: 4px;                 /* photo corners, inside the 10px mat */
    box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .3);   /* lifts it off the mat */
    transition: width .3s ease, height .3s ease, border-radius .3s ease;
}
.tours-page .carousel-wrapper .swiper-slide:not(.swiper-slide-active) .responsive-image img {
    width: 159px;                       /* the site's 70% of 227 */
    height: 106px;                      /* 3:2 of 159 (was 119, i.e. 4:3) */
}

/* Arrows - live values: 27x44, #707070. Swiper's own margin-top:-22px makes the
   `top` value the arrow's centre line. Events uses 170, which is 6.5px below the
   centre of a 227px photo starting at 50; our photo is 170px tall (centre 135),
   so 141 reproduces that offset exactly. */
.tours-page .carousel-wrapper .swiper-button-prev,
.tours-page .carousel-wrapper .swiper-button-next {
    position: absolute; top: 141px; width: 27px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    color: #707070; font-size: 30px; text-decoration: none; z-index: 10;
    background-image: none;
}
.tours-page .carousel-wrapper .swiper-button-prev { left: 0; right: auto; }
.tours-page .carousel-wrapper .swiper-button-next { right: 0; left: auto; }
.tours-page .carousel-wrapper .swiper-button-prev::after,
.tours-page .carousel-wrapper .swiper-button-next::after { content: none; }
.tours-page .carousel-wrapper .swiper-button-prev:hover,
.tours-page .carousel-wrapper .swiper-button-next:hover { color: #000; }

/* Dots are clickable here (Swiper would have bound them). */
.tours-page .carousel-wrapper .swiper-pagination-bullet { cursor: pointer; }

/* The archive column is deliberately NOT .single-pg: that class carries
   .single-pg .ImageWithText-wrapper{padding-top:120px!important}, which pushed
   the photo away from the circle. */
.tours-page .archive-content { position: relative; }

/* ===========================================================================
   Single tour page.
   Measured on the live single-event page:
     .responsive-image  681x373 full column width, image on top
     .post-title        681x31, below the image
     .desc              below the title
     .copyright         last, at the bottom of the content column
     .booking-left_card 222 wide, in the LEFT column under the section links,
                        margin-top 30px
   =========================================================================== */
/* On the real single-event page the featured image renders 681x373. Event
   photos are wide; a square tour image at full column width would be 681 tall
   and dominate the page, so cap the height at the same 373 and centre it. */
.tours-page .single-pg .responsive-image { width: 100%; text-align: center; }
.tours-page .single-pg .responsive-image img {
    width: auto; max-width: 100%; max-height: 373px;
    height: auto; display: block; margin: 0 auto;
}
/* Live rule: .post-title{font-size:1.78571rem;font-weight:700;
   line-height:2.21429rem;color:#000} - it is BOLD, not light. */
.tours-page .single-pg .post-title {
    font-family: Roboto, sans-serif;
    font-size: 1.78571rem;
    font-weight: 700;
    line-height: 2.21429rem;
    color: #000;
    margin: 0 0 14px;
    /* no text-align: dir="rtl" aligns to the start on its own, and forcing
       left was what left the Arabic title stranded mid-column. */
}
/* The body text was running straight into the copyright line. */
.tours-page .single-pg .desc { padding-bottom: 60px; }
.tours-page .single-pg .desc p:last-child { margin-bottom: 0; }
.tours-page .single-pg .desc p { font-family: Lato, sans-serif; line-height: 1.71429rem; }

/* ===========================================================================
   Tour details panel  -  .booking-left_card, left column of the single-tour
   page, below the section links.

   Direction 1B, "two-column fact table, outlined plate". This block REPLACES
   the earlier one-column stack that copied the Events panel; it is a deliberate
   departure from Events and the only place the Tours pages differ from it.

   Three ideas do the work:
     - labels and values sit side by side, so the eye scans one column of facts
       instead of eight stacked pairs;
     - the per-row hairline is gone. A single hairline marks where the linked
       rows end and the plain data begins, and it is CONTENT-DRIVEN via :has(a)
       - no per-row class, no PHP flag, so it lands wherever the editor happens
       to fill URLs in;
     - Book a Seat is an outlined plate separated by empty space rather than a
       divider, so it cannot read as one more row.

   Two things worth knowing:
     - The card's translucency moved from opacity:.75 (the site's own rule,
       which fades the CARD'S CONTENT too and capped the contrast of everything
       inside) to an alpha background. Same tint, crisp content.
     - Row rhythm is gap:1px + 4px top and bottom row padding = 9px. If you
       change the padding, change the gap so the total stays 9px.
   =========================================================================== */
.tours-page .booking-left_card {
    width: 222px;
    margin: 30px 0 0;
    padding: 15px;
    box-sizing: border-box;
    /* translucency moves to the background so content keeps full contrast */
    background-color: rgba(255, 255, 255, .78);
    opacity: 1;
    border-radius: 4px;

    /* Declared on the card so both the row links and the button's sub-label
       can reach it. The arrow is drawn as a mask over a background-color, which
       is how it inherits #ff8317 in the rows and currentColor in the button. */
    --arrow-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M2.6 6.4 6.4 2.6'/%3E%3Cpath d='M3.4 2.6h3v3'/%3E%3C/svg%3E");
}

/* ---------- heading + orange rule ---------- */
.tours-page .booking-left_card h3 {
    font-family: Roboto, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
    margin: 0 0 16px;
}
.tours-page .booking-left_card h3::after {
    content: "";
    display: block;
    width: 26px;
    height: 2px;
    margin-top: 4px;
    background: #ff8317;
}

/* ---------- fact rows: two columns, no per-row hairline ---------- */
.tours-page .booking-left_card .details-rows {
    display: flex;
    flex-direction: column;
    gap: 1px;                       /* 1px + 4px + 4px row padding = 9px rhythm */
}
.tours-page .booking-left_card .detail-row {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin: 0 -6px;                 /* lets the hover wash bleed past the text */
    padding: 4px 6px;
    border-radius: 3px;
    border-bottom: none;            /* kills tours.css's per-row hairline */
    transition: background-color .15s ease;
}
/* tours.css: .booking-left_card .detail-row + .detail-row { margin-top: 10px } */
.tours-page .booking-left_card .detail-row + .detail-row { margin-top: 0; }

.tours-page .booking-left_card .detail-row span {
    display: block;
    flex: 0 0 80px;                 /* label column */
    font-family: Roboto, sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
    margin-bottom: 0;
    color: #6c757d;
}
.tours-page .booking-left_card .detail-row p {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;                   /* lets a long unbroken value wrap, not overflow */
    font-family: Lato, sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: #212529;
    overflow-wrap: break-word;
}

/* One hairline where the linked rows end and the plain data begins. Driven by
   the presence of an <a>, so it follows whatever the editor fills in rather
   than a hard-coded row position. */
.tours-page .booking-left_card .detail-row:has(a) + .detail-row:not(:has(a)) {
    margin-top: 3px;
    padding-top: 9px;
    border-top: 1px solid rgba(112, 112, 112, .22);
}

/* ---------- linked values ---------- */
.tours-page .booking-left_card .detail-row p a {
    color: #212529;
    text-decoration: underline;
    text-decoration-color: rgba(255, 131, 23, .8);
    text-underline-offset: 2px;
}
/* The arrow hangs off the <a>, not the row, so it exists only where a link
   exists.

   It is deliberately NOT an inline-block. An inline-block is an atomic box and
   the browser will happily break the line before it, so on a value that wrapped
   to fill its last line the arrow orphaned onto a line of its own. A trailing
   &nbsp; in the markup did not stop that either - the break was taken between
   the space and the atomic box.

   So the pseudo-element stays display:inline and its CONTENT is the
   non-breaking space, which makes it part of the same text run as the value.
   The arrow itself is painted into the box's padding by the mask. There is no
   break opportunity inside an inline box, so the arrow now wraps together with
   the last word, always. */
.tours-page .booking-left_card .detail-row p a::after {
    content: "\00a0";
    display: inline;
    padding-right: 9px;             /* the space the arrow is painted into */
    background-color: #ff8317;
    -webkit-mask: var(--arrow-out) no-repeat right center / 9px 9px;  /* older Safari */
            mask: var(--arrow-out) no-repeat right center / 9px 9px;
}

/* Hover: only rows that contain a link react. */
.tours-page .booking-left_card .detail-row:has(a):hover {
    background-color: rgba(255, 131, 23, .1);
}
.tours-page .booking-left_card .detail-row:has(a):hover p a,
.tours-page .booking-left_card .detail-row p a:hover {
    color: #ff8317;
    text-decoration-color: #ff8317;
}

/* ---------- Book a Seat: outlined plate ---------- */
/* The anchor keeps the site's own .btn look (2px #4b4a4b, radius 10px,
   3px 3px offset shadow) - values .workshop-btn.btn-transparent was
   suppressing with border:none - and gains a two-line label from the
   .btn-label / .btn-sub spans emitted by single-ktours.php. */
.tours-page .booking-left_card .workshop-btn {
    margin: 26px 0 0;               /* the empty space IS the separator */
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 14px 10px;
    background: #fff;
    border: 2px solid #4b4a4b;
    border-radius: 10px;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, .13);
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tours-page .booking-left_card .workshop-btn .btn-label {
    font-family: Roboto, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #4b4a4b;
}
.tours-page .booking-left_card .workshop-btn .btn-sub {
    font-family: Lato, sans-serif;
    font-size: 10px;
    color: #6c757d;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tours-page .booking-left_card .workshop-btn .btn-sub::after {
    content: "";
    width: 9px;
    height: 9px;
    background-color: currentColor;
    -webkit-mask: var(--arrow-out) no-repeat center / 9px 9px;
            mask: var(--arrow-out) no-repeat center / 9px 9px;
}
.tours-page .booking-left_card .workshop-btn:hover {
    border-color: #ff8317;
    box-shadow: 3px 3px 0 0 rgba(255, 131, 23, .25);
}
.tours-page .booking-left_card .workshop-btn:hover .btn-label,
.tours-page .booking-left_card .workshop-btn:hover .btn-sub { color: #ff8317; }
.tours-page .booking-left_card .workshop-btn:focus-visible {
    outline: 2px solid #ff8317;
    outline-offset: 2px;
}

/* ---------- Arabic ----------
   Supersedes the four font-family-only rules that used to live in the Arabic
   section further down this file. */
html[dir=rtl][lang=ar] .tours-page .booking-left_card { text-align: right; }
html[dir=rtl][lang=ar] .tours-page .booking-left_card h3 {
    font-family: Tajawal, sans-serif; font-size: 16px; line-height: 22px;
}
html[dir=rtl][lang=ar] .tours-page .booking-left_card .detail-row span {
    flex: 0 0 72px;                 /* Arabic values are taller, not wider */
    font-family: Tajawal, sans-serif; font-size: 12px; line-height: 22px;
}
html[dir=rtl][lang=ar] .tours-page .booking-left_card .detail-row p {
    font-family: Almarai, sans-serif; font-size: 14px; line-height: 22px;
}
html[dir=rtl][lang=ar] .tours-page .booking-left_card .workshop-btn .btn-sub::after {
    transform: scaleX(-1);          /* arrow points up-left in RTL */
}
html[dir=rtl][lang=ar] .tours-page .booking-left_card .detail-row p a::after {
    padding-right: 0;
    padding-left: 9px;
    -webkit-mask-position: left center;
            mask-position: left center;
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
}

html[dir=rtl][lang=ar] .tours-page .booking-left_card .workshop-btn {
    box-shadow: -3px 3px 0 0 rgba(0, 0, 0, .13);
}
html[dir=rtl][lang=ar] .tours-page .booking-left_card .workshop-btn:hover {
    box-shadow: -3px 3px 0 0 rgba(255, 131, 23, .25);
}
html[dir=rtl][lang=ar] .tours-page .booking-left_card .workshop-btn .btn-label {
    font-family: Tajawal, sans-serif; font-size: 13px;
    letter-spacing: 0; text-transform: none;
}
html[dir=rtl][lang=ar] .tours-page .booking-left_card .workshop-btn .btn-sub {
    font-family: Almarai, sans-serif; font-size: 11px;
}

/* NOT applied: bolding the Fees value with .detail-row:last-child p. Fees is
   not reliably the last row - single-ktours.php renders the repeatable
   tour_extrainfo_group AFTER it, so any extra row an editor adds would take
   the bold instead. */

/* Copyright - live values: text-align left, margin 50px 0 -80px, 12px, and
   NO border of its own. The single horizontal line above it is the carousel
   wrapper's border-bottom, not a border here. */
.tours-page .single-pg .copyright {
    font-family: Roboto, sans-serif; font-size: 12px; color: #212529;
    margin: 50px 0 -80px; padding: 0; border: none;
}

/* ---------------------------------------------------------------------------
   Arabic.
   The site keys its RTL rules off html[dir=rtl][lang=ar], and our pages set
   exactly that on <html>, so its own Arabic styling already applies -
   .bottom-line{flex-direction:row-reverse;bottom:75px;width:180px;right:-50px},
   .carousel-title{text-align:right}, .left-links a{font-family:Tajawal},
   .desc-outer{font-family:Tajawal}, .single-title{1.42857rem;700} and so on.
   Earlier overrides here used .tours-page[dir="rtl"], which targets <body> and
   never matched. Only the genuine gaps are filled below.
   --------------------------------------------------------------------------- */
html[dir=rtl][lang=ar] .tours-page .single-pg .post-title { font-family: Tajawal, sans-serif; }
html[dir=rtl][lang=ar] .tours-page .single-pg .desc { font-family: Almarai, sans-serif; }

/* ---------------------------------------------------------------------------
   Page entry animation.

   Every page on this site rises into place on load - the site's own
   .slide-enter-active does it with:
       animation: slide-in-bottom 2s cubic-bezier(.25,.46,.45,.94) both
       @keyframes slide-in-bottom { 0%{translateY(1000px);opacity:0}
                                     to{translateY(0);opacity:1} }

   Applied to .event-page > .row - the content and sidebar together - and NOT
   to .event-page itself, because an animated ancestor becomes the containing
   block for position:fixed children, which would break the fixed "go back"
   link that sits beside the row.
   --------------------------------------------------------------------------- */
.tours-page .event-page > .row {
    animation: slide-in-bottom 2s cubic-bezier(.25, .46, .45, .94) both;
}

/* Switching sections in the sidebar is the in-page equivalent of a route
   change, so it fades like the SPA does. */
.tours-page .kh-section.is-active {
    animation: fade-in .6s cubic-bezier(.39, .575, .565, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .tours-page .event-page > .row,
    .tours-page .kh-section.is-active { animation: none; }
}

/* ===========================================================================
   Right-hand calendar.

   The wrapper classes are the site's own (.col-md-3.right-col >
   .right-sidebar > .calender-container), so the heading, bottom border and
   spacing come from tours.css. Only the grid itself is ours, sized to the
   live values: 20x20 cells, margin 5px auto, font-size .78571rem.
   =========================================================================== */

/* On desktop the right column is a normal column. The site also carries a
   mobile rule that turns it into an off-canvas panel (position:fixed,
   translateX(1000px)); pin the desktop behaviour so that cannot leak in. */
@media (min-width: 992px) {
    .tours-page .main-page .col-md-3.right-col {
        position: static; transform: none; z-index: auto; background: none;
        height: auto; flex: 0 0 21%; max-width: 21%;
    }
}
@media (max-width: 991px) {
    .tours-page .main-page .col-md-3.right-col { display: none; }
}

/* The calendar itself is LTR in both languages - matching the live site,
   and keeping the month arrows as  <  left  /  >  right. Without this the
   RTL flex row reverses them into  >  <  . */
.tours-page .kh-cal {
    position: relative;
    font-family: Lato, sans-serif;
    direction: ltr;
}

.tours-page .kh-cal-nav {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.tours-page .kh-cal-nav a {
    flex: 0 0 50px;
    display: flex; align-items: center; justify-content: center;
    color: #6c757d; text-decoration: none; line-height: 1;
}
.tours-page .kh-cal-nav a svg { display: block; }
.tours-page .kh-cal-nav a:hover { color: #000; }
.tours-page .kh-cal-caption { font-size: .92857rem; text-align: center; }

.tours-page .kh-cal-weekdays,
.tours-page .kh-cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
}
/* Weekday row: b-calendar renders these as <small>, i.e. 80% of the inherited
   size, in .text-muted (#6c757d). */
.tours-page .kh-cal-weekdays span {
    font-size: 80%; line-height: 1; font-weight: 400; color: #6c757d;
    padding: 6px 0;
}

/* Day cells - live rule:
   .calender-container .form-control .b-calendar-grid-body .col[data-date] .btn
   { width:20px; height:20px; margin:5px auto; padding:0;
     font-size:.78571rem; line-height:.78571rem; display:flex;
     justify-content:center; align-items:center }                              */
.tours-page .kh-cal-day {
    width: 20px; height: 20px; margin: 5px auto; padding: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .78571rem; line-height: .78571rem;
    color: #212529;
    border-radius: 50%;
}
/* Days from the neighbouring months carry .text-muted on the real calendar. */
.tours-page .kh-cal-day.is-muted { color: #6c757d; }
/* Today carries .text-info. */
.tours-page .kh-cal-day.is-today { color: #17a2b8; }
/* The site tints a day on hover with #fcb40b. */
.tours-page .kh-cal-day:not(.is-muted):hover { background-color: #fcb40b; }

/* .b-calendar-inner is min-width:250px on the site, widened to 100% inside
   .calender-container - keep ours from collapsing narrower than that. */
.tours-page .kh-cal { min-width: 250px; }

html[dir=rtl][lang=ar] .tours-page .calender-container h4 { font-family: Tajawal, sans-serif; }
/* legend text is translated, so it follows the page direction */
html[dir=rtl][lang=ar] .tours-page .calender-container .calendar-info {
    direction: rtl; font-family: Almarai, sans-serif;
}

/* ---------------------------------------------------------------------------
   Gap between the tour title and the body text.

   .single-pg .ImageWithText-wrapper carries padding-top:120px!important, which
   made our gap far larger than the Events single page (measured there: title
   bottom 560, body top 601 - about 40px).
   --------------------------------------------------------------------------- */
.tours-page .single-pg .ImageWithText-wrapper { padding-top: 40px !important; }

/* The legend dots need a visible edge - on the Events sidebar the white
   "upcoming" dot reads against the panel; ours sits on the page texture. */
.tours-page .calender-container .calendar-info p span {
    border: 1px solid #4b4a4b;
    box-sizing: border-box;
}
.tours-page .calender-container .calendar-info p span.black { border-color: #4b4a4b; }