/* =================================================================
   Tusk Travel shared footer
   Replace this file together with includes/footer.php and footer.js.
   ================================================================= */

.ttf-cta {
  position: relative;
  overflow: hidden;
  padding: 48px 0;
  background: #f4eee7;
}

.ttf-cta::before {
  position: absolute;
  top: -140px;
  left: -110px;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(18, 63, 70, .1);
  border-radius: 50%;
  content: "";
}

.ttf-cta__card {
  position: relative;
  display: grid;
  overflow: hidden;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
  align-items: center;
  gap: 40px;
  border-radius: 22px;
  padding: 34px 40px;
  color: #fff;
  background: linear-gradient(130deg, #123f46 0%, #0b3036 70%);
  box-shadow: 0 24px 60px rgba(8, 39, 44, .17);
}

.ttf-cta__card::before {
  position: absolute;
  top: -115px;
  right: -65px;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(244, 197, 111, .24);
  border-radius: 50%;
  content: "";
}

.ttf-cta__card::after {
  position: absolute;
  right: 82px;
  bottom: -130px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  content: "";
  background: rgba(244, 197, 111, .06);
}

.ttf-cta__copy,
.ttf-cta__actions { position: relative; z-index: 1; }
.ttf-cta__copy > span { color: #f4c56f; font-size: .76rem; font-weight: 850; text-transform: uppercase; letter-spacing: .12em; }
.ttf-cta__copy h2 { max-width: 680px; margin: 8px 0 9px; color: #fff; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.1; }
.ttf-cta__copy p { max-width: 720px; margin: 0; color: rgba(255, 255, 255, .8); font-size: .98rem; line-height: 1.6; }
.ttf-cta__actions { display: grid; gap: 9px; }
.ttf-cta__actions small { margin-top: 3px; color: rgba(255, 255, 255, .66); font-size: .75rem; line-height: 1.45; text-align: center; }

.ttf-button {
  display: flex;
  min-height: 45px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 11px 20px;
  font-size: .88rem;
  font-weight: 850;
  transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}
.ttf-button:hover { transform: translateY(-1px); }
.ttf-button--primary { color: #173b40; background: #f4c56f; }
.ttf-button--primary:hover { background: #ffcf78; }
.ttf-button--primary span { transition: transform .18s ease; }
.ttf-button--primary:hover span { transform: translateX(3px); }
.ttf-button--secondary { border-color: rgba(255, 255, 255, .25); color: #fff; background: rgba(255, 255, 255, .06); }
.ttf-button--secondary:hover { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .1); }

.ttf-footer { color: rgba(255, 255, 255, .68); background: #072a30; }
.ttf-footer a { color: inherit; }

.ttf-footer__main {
  display: grid;
  grid-template-columns: minmax(270px, 1.05fr) minmax(0, 1.95fr);
  gap: 56px;
  padding-block: 34px 30px;
}

.ttf-brand__logo { display: inline-block; margin-bottom: 12px; }
.ttf-brand__logo img { width: 150px; height: auto; filter: brightness(0) invert(1); }
.ttf-brand > p { max-width: 410px; margin: 0 0 14px; color: rgba(255, 255, 255, .76); font-size: .92rem; line-height: 1.65; }
.ttf-brand address { max-width: 420px; margin: 10px 0 0; color: rgba(255, 255, 255, .62); font-size: .74rem; font-style: normal; line-height: 1.5; }

.ttf-brand__contact { display: flex; flex-wrap: wrap; gap: 7px 18px; }
.ttf-brand__contact > a { display: flex; align-items: center; gap: 11px; width: fit-content; color: #fff; }
.ttf-brand__contact svg { width: 26px; height: 26px; flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; padding: 6px; fill: none; stroke: #f4c56f; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ttf-brand__contact span { display: grid; gap: 1px; font-size: .8rem; font-weight: 700; }
.ttf-brand__contact small { display: none; }

.ttf-social { display: flex; gap: 6px; margin-top: 12px; }
.ttf-social a { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; color: rgba(255, 255, 255, .78); transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease; }
.ttf-social a:hover { border-color: #f4c56f; color: #173b40; background: #f4c56f; transform: translateY(-2px); }
.ttf-social svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 1.6; }

.ttf-primary-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.ttf-primary-links section { display: flex; align-items: flex-start; flex-direction: column; }
.ttf-primary-links section > span { display: none; }
.ttf-primary-links h2 { margin: 0 0 11px; color: #fff; font-family: var(--font-serif, Georgia), serif; font-size: 1.04rem; }
.ttf-primary-links a { position: relative; margin: 0 0 7px; padding-right: 15px; color: rgba(255, 255, 255, .7); font-size: .84rem; line-height: 1.45; transition: color .18s ease, transform .18s ease; }
.ttf-primary-links a::after { position: absolute; top: .05em; right: 0; color: #f4c56f; content: "›"; opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease; }
.ttf-primary-links a:hover { color: #fff; transform: translateX(3px); }
.ttf-primary-links a:hover::after { opacity: 1; transform: translateX(0); }

.ttf-directory { border-block: 1px solid rgba(255, 255, 255, .1); background: #092f35; }
.ttf-directory__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding-block: 0; }
.ttf-directory details { min-width: 0; border-right: 1px solid rgba(255, 255, 255, .09); transition: background .18s ease; }
.ttf-directory details:last-child { border-right: 0; }
.ttf-directory details[open] { background: rgba(255, 255, 255, .035); }
.ttf-directory summary { display: flex; min-height: 60px; align-items: center; justify-content: space-between; gap: 14px; padding: 0 17px; color: #fff; cursor: pointer; font-family: var(--font-serif, Georgia), serif; font-size: .96rem; font-weight: 600; list-style: none; }
.ttf-directory summary::-webkit-details-marker { display: none; }
.ttf-directory summary span { position: relative; display: block; width: 25px; height: 25px; flex: 0 0 auto; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.ttf-directory summary span::before,
.ttf-directory summary span::after { position: absolute; top: 50%; left: 50%; width: 10px; height: 1px; content: ""; transform: translate(-50%, -50%); background: #f4c56f; transition: transform .18s ease; }
.ttf-directory summary span::after { transform: translate(-50%, -50%) rotate(90deg); }
.ttf-directory details[open] summary span::after { transform: translate(-50%, -50%) rotate(0); }
.ttf-directory details > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 13px; margin: 0; border-top: 1px solid rgba(255, 255, 255, .07); padding: 15px 17px 18px; }
.ttf-directory details a { width: fit-content; color: rgba(255, 255, 255, .7); font-size: .8rem; line-height: 1.45; transition: color .18s ease; }
.ttf-directory details a:hover { color: #f4c56f; }

.ttf-trust { padding-block: 28px; }
.ttf-trust__grid { display: grid; grid-template-columns: 1.05fr .55fr 1.4fr; align-items: center; gap: 30px; }
.ttf-trust__copy > span { color: #f4c56f; font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }
.ttf-trust__copy h2 { max-width: 420px; margin: 6px 0 6px; color: #fff; font-size: 1.35rem; line-height: 1.22; }
.ttf-trust__copy p { max-width: 460px; margin: 0; color: rgba(255, 255, 255, .68); font-size: .82rem; line-height: 1.62; }

.ttf-rating { display: grid; justify-items: start; border-left: 1px solid rgba(255, 255, 255, .12); padding-left: 24px; }
.ttf-rating > span { color: rgba(255, 255, 255, .66); font-size: .7rem; }
.ttf-rating > div:not(.ttf-rating__stars) { display: flex; align-items: baseline; gap: 3px; margin: 3px 0 0; }
.ttf-rating strong { color: #fff; font-family: var(--font-serif, Georgia), serif; font-size: 2.2rem; line-height: 1; }
.ttf-rating small { color: rgba(255, 255, 255, .45); font-size: .72rem; }
.ttf-rating__stars { color: #f4c56f; font-size: .77rem; letter-spacing: .12em; }
.ttf-rating p { margin: 3px 0 0; color: rgba(255, 255, 255, .6); font-size: .7rem; }

.ttf-trust-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 11px; }
.ttf-trust-logo { display: grid; min-height: 78px; place-items: center; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; padding: 7px; background: rgba(255, 255, 255, .035); }
.ttf-trust-logo img { width: auto; max-width: 100%; max-height: 57px; object-fit: contain; }
.ttf-trust-logo--large img { max-height: 68px; }

.ttf-bottom { border-top: 1px solid rgba(255, 255, 255, .1); background: #06262b; }
.ttf-bottom__inner { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 25px; }
.ttf-bottom__copy { display: flex; align-items: center; gap: 14px; color: rgba(255, 255, 255, .68); font-size: .74rem; }
.ttf-bottom__copy small { position: relative; padding-left: 14px; color: rgba(255, 255, 255, .37); }
.ttf-bottom__copy small::before { position: absolute; top: 50%; left: 0; width: 3px; height: 3px; border-radius: 50%; content: ""; background: #f4c56f; }
.ttf-bottom__links { display: flex; align-items: center; gap: 18px; }
.ttf-bottom__links > a { color: rgba(255, 255, 255, .64); font-size: .74rem; transition: color .18s ease; }
.ttf-bottom__links > a:hover { color: #fff; }
.ttf-payment { display: flex; align-items: center; gap: 6px; border: 1px solid rgba(244, 197, 111, .22); border-radius: 999px; padding: 7px 10px; color: #f4c56f!important; }
.ttf-payment svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.ttf-mobile-cta { display: none; }

@media (max-width: 1050px) {
  .ttf-cta__card { grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 30px; padding: 32px; }
  .ttf-footer__main { grid-template-columns: minmax(240px, .8fr) minmax(0, 1.7fr); gap: 45px; }
  .ttf-primary-links { gap: 22px; }
  .ttf-directory__grid { gap: 0; }
  .ttf-trust__grid { grid-template-columns: 1fr .55fr; }
  .ttf-trust-logos { grid-column: 1 / -1; max-width: 720px; }
}

@media (max-width: 760px) {
  body { padding-bottom: 66px; }

  .ttf-cta { padding: 36px 0; }
  .ttf-cta__card { grid-template-columns: 1fr; gap: 23px; border-radius: 20px; padding: 26px 20px; }
  .ttf-cta__copy h2 { margin-top: 8px; font-size: 2rem; }
  .ttf-cta__copy p { font-size: 1rem; }
  .ttf-cta__actions { gap: 8px; }

  .ttf-footer__main { grid-template-columns: 1fr; gap: 35px; padding-block: 42px 34px; }
  .ttf-brand__logo img { width: 150px; }
  .ttf-brand > p { font-size: .96rem; }
  .ttf-brand address { font-size: .78rem; }
  .ttf-primary-links { grid-template-columns: 1fr 1fr; gap: 32px 22px; }
  .ttf-primary-links section:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; }
  .ttf-primary-links section:last-child h2 { grid-column: 1 / -1; }
  .ttf-primary-links h2 { font-size: 1.06rem; }
  .ttf-primary-links a { font-size: .9rem; }

  .ttf-directory__grid { grid-template-columns: 1fr; gap: 0; padding-block: 7px; }
  .ttf-directory details { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .09); }
  .ttf-directory details:last-child { border-bottom: 0; }
  .ttf-directory summary { min-height: 55px; padding: 0 3px; font-size: .98rem; }
  .ttf-directory details > div { grid-template-columns: 1fr 1fr; gap: 10px 20px; margin: 0; padding: 14px 3px 18px; }
  .ttf-directory details a { font-size: .88rem; }

  .ttf-trust { padding-block: 34px; }
  .ttf-trust__grid { grid-template-columns: 1fr; gap: 28px; }
  .ttf-trust__copy h2 { font-size: 1.55rem; }
  .ttf-trust__copy p { font-size: .88rem; }
  .ttf-rating { border-top: 1px solid rgba(255, 255, 255, .1); border-left: 0; padding: 24px 0 0; }
  .ttf-trust-logos { grid-column: auto; grid-template-columns: 1fr 1fr; gap: 9px; width: 100%; }
  .ttf-trust-logo { min-height: 100px; }
  .ttf-trust-logo img { max-height: 67px; }
  .ttf-trust-logo--large img { max-height: 82px; }

  .ttf-bottom__inner { align-items: flex-start; flex-direction: column; gap: 17px; padding-block: 22px 25px; }
  .ttf-bottom__copy { align-items: flex-start; flex-direction: column; gap: 5px; }
  .ttf-bottom__copy small { padding-left: 0; }
  .ttf-bottom__copy small::before { display: none; }
  .ttf-bottom__links { flex-wrap: wrap; gap: 11px 16px; }
  .ttf-payment { width: fit-content; }
}

@media (prefers-reduced-motion: reduce) {
  .ttf-footer *,
  .ttf-cta *,
  .ttf-mobile-cta,
  .ttf-whatsapp-float { scroll-behavior: auto!important; transition: none!important; }
}


/* =================================================================
   Footer clarity refinement - 2026-10
   Preserves the existing .ttf layout and structure.
   ================================================================= */

/* Higher contrast for easier reading */
.ttf-footer {
  color: rgba(255, 255, 255, .78);
}

.ttf-brand > p {
  color: rgba(255, 255, 255, .88);
  font-size: .96rem;
  line-height: 1.7;
}

.ttf-brand__contact > a {
  color: #fff;
  font-size: .9rem;
  font-weight: 750;
}

.ttf-primary-links h2 {
  font-size: 1.08rem;
}

.ttf-primary-links a {
  color: rgba(255, 255, 255, .82);
  font-size: .9rem;
  line-height: 1.5;
}

.ttf-directory details a {
  color: rgba(255, 255, 255, .82);
  font-size: .86rem;
}

.ttf-trust__copy p {
  color: rgba(255, 255, 255, .78);
  font-size: .86rem;
}

.ttf-rating > span,
.ttf-rating p {
  color: rgba(255, 255, 255, .74);
}

.ttf-bottom__copy,
.ttf-bottom__links > a {
  color: rgba(255, 255, 255, .76);
}

/* Social area */
.ttf-social-block {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.ttf-social-label {
  color: rgba(255, 255, 255, .72);
  font-size: .76rem;
  font-weight: 750;
}

.ttf-social {
  gap: 9px;
  margin-top: 0;
}

.ttf-social a {
  width: 40px;
  height: 40px;
  border-color: rgba(255, 255, 255, .24);
  color: #fff;
  background: rgba(255, 255, 255, .045);
}

.ttf-social a:hover,
.ttf-social a:focus-visible {
  border-color: #f4c56f;
  color: #173b40;
  background: #f4c56f;
  outline: none;
  transform: translateY(-1px);
}

.ttf-social svg {
  width: 18px;
  height: 18px;
}

/* Instagram should use stroke, not solid fill */
.ttf-social svg rect,
.ttf-social svg circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

/* Facebook / LinkedIn / YouTube body paths remain filled */
.ttf-social svg path {
  fill: currentColor;
  stroke: none;
}

.ttf-social .ttf-social__youtube-play {
  fill: #072a30;
}

/* Buttons: support both <a> and <button> consistently */
button.ttf-button,
button.ttf-mobile-cta__enquiry {
  appearance: none;
  font-family: inherit;
  cursor: pointer;
}

button.ttf-button {
  width: 100%;
}

.ttf-mobile-cta__enquiry {
  border: 0;
}

/* Slightly clearer accordion headings */
.ttf-directory summary {
  font-size: 1rem;
}

/* Improve legal text without making footer visually heavy */
.ttf-bottom__copy,
.ttf-bottom__links > a {
  font-size: .78rem;
}

@media (max-width: 760px) {
  .ttf-brand > p {
    font-size: .96rem;
  }

  .ttf-brand__contact > a {
    font-size: .92rem;
  }

  .ttf-social-block {
    margin-top: 18px;
  }

  .ttf-social a {
    width: 42px;
    height: 42px;
  }

  .ttf-social svg {
    width: 19px;
    height: 19px;
  }

  .ttf-primary-links a {
    font-size: .92rem;
  }

  .ttf-directory details a {
    font-size: .9rem;
  }

  .ttf-mobile-cta__enquiry {
    min-height: 50px;
    color: #fff;
    background: var(--tt-coral, #d7654d);
    font-size: .84rem;
    font-weight: 850;
  }
}


/* ================================================================
   Footer legal cleanup + mobile CTA icon refinement
   ================================================================ */

/* Secure payment belongs with Empresa now, not as a separate bottom pill. */
.ttf-company-payment {
  margin-top: 3px !important;
  color: #f4c56f !important;
  font-weight: 800;
}

.ttf-company-payment::before {
  display: inline-block;
  margin-right: 6px;
  content: "✓";
  font-size: .78em;
}

.ttf-company-payment:hover {
  color: #ffd689 !important;
}

/* Bottom row is now copyright-only. */
.ttf-bottom__inner {
  justify-content: flex-start;
}

.ttf-bottom__copy {
  width: 100%;
}



/* ================================================================
   Mobile footer trust copy refinement
   ================================================================ */

.ttf-trust__copy h2 {
  max-width: 440px;
}

@media (max-width: 760px) {
  .ttf-trust {
    padding-block: 30px;
  }

  .ttf-trust__grid {
    gap: 24px;
  }

  .ttf-trust__copy > span {
    font-size: .69rem;
    letter-spacing: .09em;
  }

  .ttf-trust__copy h2 {
    max-width: 310px;
    margin: 6px 0 8px;
    font-size: 1.42rem;
    line-height: 1.16;
  }

  .ttf-trust__copy p {
    max-width: 315px;
    font-size: .86rem;
    line-height: 1.62;
  }

  .ttf-rating {
    padding-top: 21px;
  }

  .ttf-rating > span {
    font-size: .72rem;
  }

  .ttf-rating strong {
    font-size: 2.1rem;
  }

  .ttf-rating p {
    font-size: .72rem;
  }

  .ttf-trust-logo {
    min-height: 92px;
  }

  .ttf-trust-logo img {
    max-height: 62px;
  }

  .ttf-trust-logo--large img {
    max-height: 76px;
  }

  .ttf-bottom__copy small {
    color: rgba(255,255,255,.5);
    font-size: .74rem;
  }
}

/* =================================================================
   Mobile conversion actions — single quote CTA + floating WhatsApp
   ================================================================= */

.ttf-whatsapp-float {
  display: none;
}

@media (max-width: 760px) {
  /* Space for the single fixed CTA. */
  body {
    padding-bottom: 74px;
  }

  /* Bottom bar: one action only. */
  .ttf-mobile-cta {
    position: fixed;
    z-index: 120;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    padding:
      8px
      max(10px, env(safe-area-inset-right))
      calc(8px + env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 -8px 26px rgba(7, 42, 48, .14);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  }

  .ttf-mobile-cta.is-hidden {
    visibility: hidden;
    opacity: 0;
    transform: translateY(110%);
  }

  .ttf-mobile-cta__enquiry {
    appearance: none;
    display: flex;
    width: 100%;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    padding: 0 18px;
    color: #fff;
    background: var(--tt-coral, #d7654d);
    box-shadow: 0 5px 16px rgba(189, 76, 56, .16);
    font-family: inherit;
    font-size: .9rem;
    font-weight: 850;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
  }

  .ttf-mobile-cta__enquiry:focus-visible {
    outline: 3px solid rgba(215, 101, 77, .25);
    outline-offset: 2px;
  }

  /* WhatsApp is separate from the enquiry CTA. */
  .ttf-whatsapp-float {
    position: fixed;
    z-index: 119;
    right: 14px;
    bottom: calc(80px + env(safe-area-inset-bottom));
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 999px;
    padding: 0 15px 0 12px;
    color: #fff !important;
    background: #168a4e;
    box-shadow: 0 10px 28px rgba(7, 42, 48, .22);
    font-size: .8rem;
    font-weight: 800;
    line-height: 1.15;
    text-decoration: none;
    transition: background .18s ease, opacity .2s ease, transform .2s ease, visibility .2s ease;
  }

  .ttf-whatsapp-float.is-hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px);
  }

  .ttf-whatsapp-float svg {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    fill: currentColor;
  }

  .ttf-whatsapp-float:hover,
  .ttf-whatsapp-float:focus-visible {
    color: #fff !important;
    background: #117b45;
    outline: none;
    transform: translateY(-1px);
  }
}

@media (max-width: 360px) {
  .ttf-mobile-cta__enquiry {
    font-size: .86rem;
  }

  .ttf-whatsapp-float {
    right: 10px;
    padding-inline: 11px 13px;
    font-size: .76rem;
  }

  .ttf-whatsapp-float svg {
    width: 20px;
    height: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ttf-mobile-cta,
  .ttf-mobile-cta *,
  .ttf-whatsapp-float {
    transition: none !important;
  }
}