/* =========================================================
   Mossess Tours — UI/UX layer
   Loaded after main.css. Overrides + additions only.
   ========================================================= */

:root {
    --mt-primary: #D91334;
    --mt-primary-dark: #B10E2A;
    --mt-whatsapp: #1FA855;
    --mt-whatsapp-dark: #178C46;
    --mt-ink: #0F172A;
    --mt-muted: #5B6472;
    --mt-line: #E6EBF1;
    --mt-surface: #FFFFFF;
    --mt-surface-2: #F7F9FC;
    --mt-radius: 14px;
    --mt-radius-lg: 20px;
    --mt-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .05);
    --mt-shadow-md: 0 8px 28px rgba(15, 23, 42, .10);
    --mt-header-h: 84px;
}

/* ---------------------------------------------------------
   1. Accessibility foundations
   --------------------------------------------------------- */

/* main.css kills all outlines; restore a visible keyboard ring */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--mt-primary) !important;
    outline-offset: 3px;
    border-radius: 6px;
}

.mt-skip-link {
    position: absolute;
    left: 16px;
    top: -100px;
    z-index: 9999;
    padding: 12px 20px;
    background: var(--mt-ink);
    color: #fff;
    border-radius: 0 0 10px 10px;
    font-weight: 700;
    transition: top .2s ease;
}

.mt-skip-link:focus {
    top: 0;
    color: #fff;
}

.mt-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Anchor targets clear the sticky header */
section[id],
main[id] {
    scroll-margin-top: calc(var(--mt-header-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .wow {
        visibility: visible !important;
        animation-name: none !important;
    }
}

/* ---------------------------------------------------------
   2. Header — shrink the oversized sticky logo
   --------------------------------------------------------- */

.site-header .header__inner {
    flex-wrap: nowrap;
    gap: 20px;
}

/* main.css sizes the logo as `width:50%` on the box and `max-width:15%` on the
   image, which makes it 645px wide on desktop and enormous on phones.
   Size it from its own height instead. */
.site-header .header__logo {
    width: auto;
    flex: 0 0 auto;
}

.site-header .main-logo {
    max-width: none !important;
}

.site-header .main-menu>ul {
    flex-wrap: nowrap;
}

.site-header .main-menu>ul>li>a {
    white-space: nowrap;
}

.site-header .header__logo img {
    height: 66px;
    width: auto;
    transition: height .25s var(--easing);
}

@media (max-width: 767px) {
    .site-header .header__logo img {
        height: 54px;
    }
}

.stricked-menu.stricky-fixed {
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    box-shadow: 0 2px 20px rgba(15, 23, 42, .10);
}

.stricked-menu.stricky-fixed .header__logo img {
    height: 46px;
}

.stricked-menu.stricky-fixed .header__inner {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Phone + WhatsApp always reachable from the header on desktop */
.mt-header-cta {
    display: none;
    align-items: center;
    gap: 16px;
}

@media (min-width: 992px) {
    .mt-header-cta {
        display: flex;
    }
}

.mt-header-phone {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 22px;
    border: 2px solid var(--mt-primary);
    border-radius: 100px;
    background: #fff;
    font-size: 15px;
    font-weight: 700;
    color: var(--mt-primary);
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
}

.mt-header-phone:hover {
    background: var(--mt-primary);
    color: #fff;
}

.mt-btn--sm {
    min-height: 44px;
    padding: 0 20px;
    font-size: 14.5px;
}

/* --- Mobile drawer -------------------------------------------------------
   The drawer lives inside .site-header, which opens its own stacking
   context, so its z-index:1010 is scoped to that context and the fixed
   CTA bar painted over it. Lift the whole header while the drawer is open,
   and get the hamburger out of the way of the drawer's own close button. */

body.mt-menu-open .site-header {
    position: relative;
    z-index: 200;
}

body.mt-menu-open .mt-mobile-cta,
body.mt-menu-open .xb-hamburger-menu {
    display: none;
}

/* Stop the page behind the drawer from scrolling with it */
body.mt-menu-open {
    overflow: hidden;
}

/* The drawer is a fixed 100vh box with overflow hidden — on short phones the
   logo, links and contact buttons ran past the bottom edge. Let the inner
   wrapper scroll instead. */
.xb-header-menu-scroll {
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(40px + env(safe-area-inset-bottom)) !important;
}

.xb-logo-mobile img.main-logo {
    height: 84px;
    width: auto;
}

/* Contact buttons at the bottom of the mobile drawer */
.mt-menu-contact {
    display: grid;
    gap: 12px;
    margin-top: 28px;
}

@media (min-width: 1200px) {
    .mt-menu-contact {
        display: none;
    }
}

/* The hamburger sits on the hero photo, so it needs its own contrast */
.xb-nav-mobile-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 12px;
    background: rgba(15, 23, 42, .45);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 19px;
    line-height: 1;
}

.stricky-fixed .xb-nav-mobile-button {
    background: var(--mt-surface-2);
    border-color: var(--mt-line);
    color: var(--mt-ink);
}

/* Current-section highlight */
.main-menu ul li a.is-current span,
.xb-menu-primary li a.is-current span {
    color: var(--mt-primary);
}

.main-menu ul li a.is-current span::after {
    transform: scaleX(1);
}

/* ---------------------------------------------------------
   3. Hero — fluid type, legibility, dual CTA, trust row
   --------------------------------------------------------- */

.hero__style-three {
    position: relative;
}

/* Readable scrim instead of per-element text-shadow hacks */
.hero__style-three::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 17, 33, .62) 0%, rgba(9, 17, 33, .42) 45%, rgba(9, 17, 33, .72) 100%);
    z-index: 0;
    pointer-events: none;
}

.hero__style-three .container {
    position: relative;
    z-index: 2;
}

.hero__style-three .xb-hero-content2 .xb-item--holder>span {
    display: inline-block;
    text-shadow: none;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    padding: 8px 20px;
    border-radius: 100px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    margin-bottom: 22px;
}

.hero__style-three .xb-hero-content2 .xb-item--title {
    font-size: clamp(2.1rem, 5.4vw, 4rem);
    line-height: 1.12;
    color: #fff;
    margin-bottom: 6px;
    text-shadow: 0 2px 24px rgba(9, 17, 33, .55);
    text-wrap: balance;
}

.hero__style-three .xb-hero-content2 .xb-item--holder .mt-hero-sub {
    display: block;
    font-size: clamp(1.15rem, 2.4vw, 1.9rem);
    font-weight: 600;
    color: #FFD3DB;
    line-height: 1.3;
    margin: 10px 0 0;
    text-shadow: 0 2px 18px rgba(9, 17, 33, .5);
}

.hero__style-three .xb-hero-content2 .xb-item--holder .mt-hero-lede {
    max-width: 620px;
    margin: 20px auto 0;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    font-weight: 500;
    line-height: 1.65;
    color: rgba(255, 255, 255, .94);
    text-shadow: 0 2px 16px rgba(9, 17, 33, .7);
}

/* Trust chips */
.mt-trust-row {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
    margin: 26px 0 0;
    padding: 0;
}

.mt-trust-row li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .26);
    padding: 8px 16px;
    border-radius: 100px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.mt-trust-row li i {
    color: #FFC94D;
}

@media (max-width: 575px) {

    .mt-trust-row {
        gap: 8px;
        margin-top: 22px;
    }

    .mt-trust-row li {
        font-size: 12.5px;
        padding: 7px 12px;
        gap: 6px;
    }
}

/* Hero CTA pair */
.xb-hero-content2 .xb-item--btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
}

.mt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 30px;
    border: 2px solid transparent;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .01em;
    text-align: center;
    cursor: pointer;
    transition: transform .18s var(--easing), background-color .2s ease, box-shadow .2s ease, color .2s ease;
}

.mt-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--mt-shadow-md);
}

.mt-btn:active {
    transform: translateY(0);
}

.mt-btn--wa {
    background: var(--mt-whatsapp);
    color: #fff;
}

.mt-btn--wa:hover {
    background: var(--mt-whatsapp-dark);
    color: #fff;
}

.mt-btn--primary {
    background: var(--mt-primary);
    color: #fff;
}

.mt-btn--primary:hover {
    background: var(--mt-primary-dark);
    color: #fff;
}

.mt-btn--ghost {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .7);
    color: #fff;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.mt-btn--ghost:hover {
    background: #fff;
    color: var(--mt-ink);
}

.mt-btn--block {
    width: 100%;
}

.mt-btn i {
    font-size: 1.15em;
}

/* Response-time reassurance under the CTAs */
.mt-hero-note {
    margin-top: 18px;
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
}

.mt-hero-note strong {
    color: #fff;
}

/* ---------------------------------------------------------
   4. Enquiry form
   --------------------------------------------------------- */

.book-form {
    position: relative;
    z-index: 3;
}

.mt-form-card {
    background: #fff;
    border: 1px solid var(--mt-line);
    border-radius: var(--mt-radius-lg);
    box-shadow: var(--mt-shadow-md);
    padding: 34px 34px 30px;
}

/* Only the hero form lifts into the photo above it. Applying this to every
   card also dragged the footer form up under the preceding section, hiding
   its own heading behind it. */
.book-form .mt-form-card {
    margin-top: -90px;
}

.site-footer .mt-form-card {
    margin-top: 0;
    margin-bottom: 10px;
}

@media (max-width: 991px) {

    .mt-form-card {
        padding: 26px 20px 24px;
    }

    .book-form .mt-form-card {
        margin-top: 40px;
    }
}

.mt-form-head {
    margin-bottom: 22px;
}

.mt-form-head h2 {
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
    line-height: 1.25;
    color: var(--mt-ink);
    margin: 0 0 6px;
}

.mt-form-head p {
    margin: 0;
    font-size: 15px;
    color: var(--mt-muted);
}

/* Reset the template's rigid flex form into a responsive grid */
.mt-form-card .xb-book-form {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px 16px;
    padding: 0;
    align-items: start;
}

@media (max-width: 1199px) {
    .mt-form-card .xb-book-form {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .mt-form-card .xb-book-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 479px) {
    .mt-form-card .xb-book-form {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mt-form-card .xb-book-form .xb-item--field {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0;
    display: flex;
    flex-direction: column;
}

.mt-form-card .xb-book-form .xb-item--field label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--mt-ink);
    margin-bottom: 8px;
}

.mt-form-card .xb-book-form .xb-item--field label .mt-req {
    color: var(--mt-primary);
    margin-left: 2px;
}

.mt-form-card .xb-book-form .xb-item--field label .mt-optional {
    font-weight: 500;
    color: var(--mt-muted);
}

.mt-form-card .xb-book-form input,
.mt-form-card .xb-book-form select {
    width: 100%;
    height: 54px;
    padding: 0 16px 0 48px;
    font-size: 16px;
    /* 16px avoids iOS zoom-on-focus */
    color: var(--mt-ink);
    background: var(--mt-surface-2);
    border: 1px solid var(--mt-line);
    border-radius: 12px;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.mt-form-card .xb-book-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230F172A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    cursor: pointer;
}

.mt-form-card .xb-book-form input::placeholder {
    color: #9AA3B0;
}

.mt-form-card .xb-book-form input:hover,
.mt-form-card .xb-book-form select:hover {
    border-color: #C8D2DE;
}

.mt-form-card .xb-book-form input:focus,
.mt-form-card .xb-book-form select:focus {
    background: #fff;
    border-color: var(--mt-primary);
    box-shadow: 0 0 0 4px rgba(217, 19, 52, .12);
}

/* Only flag invalid fields after the user has engaged with them */
.mt-form-card .xb-book-form input:not(:placeholder-shown):invalid {
    border-color: #E11D48;
}

.mt-form-card .xb-book-form .xb-item--field .icon {
    position: absolute;
    left: 17px;
    right: auto;
    bottom: 17px;
    width: 20px;
    height: 20px;
    pointer-events: none;
    opacity: .5;
}

/* --- Travel date field ---------------------------------------------------
   The native control is a poor target: only the small calendar glyph opens
   the picker, and an empty field reads as the literal string "dd/mm/yyyy".
   Give it our own icon, make the whole field clickable (see the showPicker
   handler in index.php) and mute the placeholder text until a date is set. */

.mt-form-card .xb-book-form input[type="date"] {
    padding-left: 48px;
    cursor: pointer;
    color: #9AA3B0;
    font-variant-numeric: tabular-nums;
}

.mt-form-card .xb-book-form input[type="date"].has-value {
    color: var(--mt-ink);
    font-weight: 600;
}

/* Drop the browser's own indicator; ours sits underneath and is far bigger */
.mt-form-card .xb-book-form input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.mt-form-card .xb-book-form input[type="date"]::-webkit-datetime-edit {
    padding: 0;
}

/* The icon anchors to the input itself, not to the field (which is taller
   because of the hint line underneath). */
.mt-input-wrap {
    position: relative;
    display: block;
}

.mt-date-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--mt-primary);
    font-size: 16px;
    pointer-events: none;
}

.mt-field-hint {
    display: block;
    margin-top: 7px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--mt-muted);
}

/* Hide the number spinner — it fights the icon and adds nothing here */
.mt-form-card .xb-book-form input[type="number"] {
    -moz-appearance: textfield;
}

.mt-form-card .xb-book-form input[type="number"]::-webkit-outer-spin-button,
.mt-form-card .xb-book-form input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mt-form-card .xb-book-form .xb-item--field {
    position: relative;
}

.mt-form-card .xb-book-form .xb-item--btn {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 4px;
}

.mt-form-card .xb-book-form .xb-item--btn .mt-btn {
    min-width: 220px;
}

.mt-form-privacy {
    font-size: 13px;
    color: var(--mt-muted);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mt-form-privacy i {
    color: var(--mt-whatsapp);
}

/* Honeypot — hidden from people, visible to naive bots */
.mt-hp {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Server-side error banner */
.mt-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 20px;
}

.mt-alert--error {
    background: #FEF2F3;
    border: 1px solid #F7C9D0;
    color: #A5122C;
}

/* ---------------------------------------------------------
   5. Package cards
   --------------------------------------------------------- */

.package .row>[class*="col-"] {
    display: flex;
}

.xb-package {
    width: 100%;
}

.xb-package .xb-item--inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--mt-line);
    filter: none;
    box-shadow: var(--mt-shadow-sm);
    transition: transform .25s var(--easing), box-shadow .25s var(--easing);
    overflow: hidden;
}

.xb-package .xb-item--inner:hover,
.xb-package .xb-item--inner:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--mt-shadow-md);
}

.xb-package .xb-item--img {
    position: relative;
    border-radius: 12px;
    aspect-ratio: 4 / 3;
}

.xb-package .xb-item--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Duration badge over the photo */
.mt-card-badge {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, .78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 7px 13px;
    border-radius: 100px;
}

.xb-package .xb-item--holder {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 22px 14px 16px;
}

.xb-package .xb-item--title {
    font-size: 21px;
    line-height: 1.3;
    margin-bottom: 4px;
}

.xb-package .xb-item--title a:hover {
    color: var(--mt-primary);
}

.mt-card-route {
    display: block;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--mt-muted);
    margin-bottom: 4px;
}

.xb-package .xb-item--info {
    padding-top: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap;
}

/* Price is information, not a button — stop styling it like one */
.mt-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    margin-bottom: 16px;
    padding: 12px 14px;
    background: var(--mt-surface-2);
    border: 1px solid var(--mt-line);
    border-radius: 12px;
}

.mt-price .mt-price-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--mt-muted);
}

.mt-price .mt-price-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--mt-ink);
    letter-spacing: -.02em;
}

.mt-price .mt-price-unit {
    font-size: 13px;
    font-weight: 600;
    color: var(--mt-muted);
}

.mt-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mt-card-actions .mt-btn {
    min-height: 48px;
    padding: 0 14px;
    font-size: 14.5px;
    white-space: nowrap;
}

@media (max-width: 400px) {
    .mt-card-actions {
        grid-template-columns: 1fr;
    }
}

.mt-sec-footnote {
    margin: 46px auto 0;
    max-width: 620px;
    font-size: 16px;
    color: var(--mt-muted);
}

.mt-sec-footnote a {
    color: var(--mt-primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Busy state while the enquiry is being sent */
.mt-btn.is-loading {
    opacity: .75;
    cursor: progress;
    transform: none;
}

/* ---------------------------------------------------------
   6. Sections, destinations, counters
   --------------------------------------------------------- */

/* The template renders section eyebrows in a script face, which is illegible
   in caps. Use the body face so they read as labels. */
.sec-title--travel .subtitle {
    font-family: var(--font-body);
    color: var(--mt-primary);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 13.5px;
    margin-bottom: 10px;
    display: inline-block;
}

.mt-sec-lede {
    max-width: 620px;
    margin: 14px auto 0;
    color: var(--mt-muted);
}

.xb-destination .xb-item--img {
    position: relative;
    border-radius: var(--mt-radius-lg);
    overflow: hidden;
    aspect-ratio: 3 / 4;
}

.xb-destination .xb-item--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--easing);
}

.xb-destination:hover .xb-item--img img {
    transform: scale(1.06);
}

.xb-destination .xb-item--img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 45%, rgba(15, 23, 42, .78) 100%);
}

.xb-destination .xb-item--holder {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    z-index: 2;
    text-align: center;
    padding: 0 16px;
}

.xb-destination .xb-item--holder .xb-item--title {
    color: #fff;
    margin: 0;
}

.mt-dest-note {
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
    margin-top: 4px;
}

/* Registration / credibility strip in About */
.mt-cred {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 18px 20px;
    background: var(--mt-surface-2);
    border: 1px solid var(--mt-line);
    border-radius: var(--mt-radius);
    margin-top: 24px;
}

.mt-cred img {
    max-height: 62px;
    width: auto;
    flex: 0 0 auto;
}

.mt-cred p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--mt-muted);
    text-align: left;
}

.mt-cred p strong {
    color: var(--mt-ink);
}

/* ---------------------------------------------------------
   7. Footer
   --------------------------------------------------------- */

/* The template's footer-style-three sizes widgets for a four-column layout
   (50/25/30/20 with 85px vertical padding and cell borders). With three
   columns that leaves a stray divider and a large dead area, so lay the
   footer out on its own grid instead. */
.site-footer.footer-style-three {
    padding-top: 64px;
}

@media (max-width: 991px) {
    .site-footer.footer-style-three {
        padding-top: 48px;
    }
}

.mt-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.2fr;
    gap: 48px;
    padding: 64px 0 48px;
}

@media (max-width: 991px) {
    .mt-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px 32px;
        padding: 48px 0 36px;
    }

    .mt-footer-col--brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575px) {
    .mt-footer-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }
}

.mt-footer-logo {
    height: 74px;
    width: auto;
    margin-bottom: 20px;
}

.mt-footer-col p {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--mt-muted);
    margin: 0 0 14px;
    max-width: 46ch;
}

.mt-footer-reg {
    font-size: 13.5px !important;
    color: #7A828F !important;
}

.mt-footer-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--mt-ink);
    letter-spacing: -.01em;
    margin: 0 0 18px;
}

.mt-footer-nav li {
    padding: 6px 0;
}

.mt-footer-nav a {
    font-size: 15.5px;
    font-weight: 500;
    color: var(--mt-muted);
}

.mt-footer-nav a:hover {
    color: var(--mt-primary);
}

.mt-footer-hours {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px !important;
    font-size: 14px !important;
    font-weight: 600;
    color: var(--mt-ink) !important;
}

.mt-footer-hours i {
    color: var(--mt-primary);
}

.site-footer .footer__links a {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    padding: 5px 0;
    line-height: 1.5;
}

.site-footer .footer__links a:hover {
    color: var(--mt-primary);
}

.site-footer .footer__links i {
    color: var(--mt-primary);
    margin-top: 5px;
    flex: 0 0 18px;
}

.mt-footer-social {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
}

.mt-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--mt-surface-2);
    border: 1px solid var(--mt-line);
    color: var(--mt-ink);
    transition: background-color .2s ease, color .2s ease;
}

.mt-footer-social a:hover {
    background: var(--mt-primary);
    border-color: var(--mt-primary);
    color: #fff;
}

.copyright-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--mt-line);
    padding-top: 24px;
    margin-top: 0;
    /* Clear the fixed WhatsApp bubble, which otherwise sits on top of the
       copyright line once the page is scrolled to the bottom. */
    padding-left: 96px;
    padding-bottom: 10px;
}

.copyright-area .copyright-text {
    font-size: 14.5px;
    color: var(--mt-muted);
    margin: 0;
}

@media (max-width: 767px) {
    .copyright-area {
        padding-left: 0;
        justify-content: center;
        text-align: center;
    }
}

/* ---------------------------------------------------------
   8. Floating actions + mobile CTA bar
   --------------------------------------------------------- */

.float {
    z-index: 60;
    box-shadow: 0 6px 20px rgba(31, 168, 85, .38);
    transition: transform .2s var(--easing);
}

.float:hover {
    transform: scale(1.06);
}

.xb-backtotop {
    z-index: 60;
}

/* Sticky call/WhatsApp bar — the primary conversion path on phones */
.mt-mobile-cta {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--mt-line);
    box-shadow: 0 -4px 20px rgba(15, 23, 42, .10);
}

.mt-mobile-cta .mt-btn {
    flex: 1 1 0;
    min-height: 50px;
    padding: 0 10px;
    font-size: 15px;
}

@media (max-width: 767px) {

    .mt-mobile-cta {
        display: flex;
    }

    body.demo-travel-agency {
        padding-bottom: 74px;
    }

    /* The sticky bar already carries WhatsApp, and back-to-top competes with
       it for the same corner — both would just cover content twice over. */
    .float,
    .xb-backtotop {
        display: none;
    }
}

/* ---------------------------------------------------------
   9. Confirmation page
   --------------------------------------------------------- */

.mt-thanks {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.mt-thanks-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #E9F8EF;
    color: var(--mt-whatsapp);
    font-size: 38px;
    margin-bottom: 24px;
}

.mt-thanks h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: var(--mt-ink);
    margin-bottom: 14px;
}

.mt-thanks p {
    color: var(--mt-muted);
    font-size: 17px;
}

.mt-thanks-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 30px;
}

.mt-next-steps {
    list-style: none;
    padding: 24px;
    margin: 34px 0 0;
    text-align: left;
    background: var(--mt-surface-2);
    border: 1px solid var(--mt-line);
    border-radius: var(--mt-radius-lg);
}

.mt-next-steps li {
    display: flex;
    gap: 12px;
    padding: 9px 0;
    color: var(--mt-ink);
    font-weight: 600;
}

.mt-next-steps li i {
    color: var(--mt-whatsapp);
    margin-top: 5px;
}

.mt-next-steps li span {
    font-weight: 500;
    color: var(--mt-muted);
}

.mt-next-steps li strong {
    color: var(--mt-ink);
}

.mt-thanks-hurry {
    margin-top: 34px;
    font-weight: 600;
    color: var(--mt-ink);
}

.mt-thanks-back {
    margin-top: 26px;
}

.mt-thanks-back a {
    color: var(--mt-muted);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mt-thanks-back a:hover {
    color: var(--mt-primary);
}