/* =====================================================================
   Shared UI
   =====================================================================
   Loaded on every page from includes/header_navbar.php, cache-busted by
   mtime. Small on purpose: only things that must look identical
   everywhere belong here.
   ===================================================================== */

/* ══ THE CTA ════════════════════════════════════════════════════════════
   One button for every "do the thing" moment on the site, so a safari card,
   a hero and a departure row all read as the same offer. Bootstrap's
   btn-sm btn-primary inherited the theme's generic styling and looked like a
   secondary action sitting next to its own price.

   The --kt-* tokens are scoped to .kt-group, so every one carries a fallback:
   this button is used well outside the group safari pages. */

.kt-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;              /* a comfortable tap target */
    padding: .6rem 1.15rem;
    border: 0;
    border-radius: 999px;
    background: var(--kt-orange, #f4732b);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 8px var(--kt-orange-glow, rgba(244, 115, 43, .34));
    transition: transform 140ms cubic-bezier(.4,0,.2,1),
                box-shadow 140ms cubic-bezier(.4,0,.2,1),
                filter     140ms cubic-bezier(.4,0,.2,1);
}
.kt-cta:hover,
.kt-cta:focus {
    color: #fff;
    filter: brightness(1.05);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--kt-orange-glow, rgba(244, 115, 43, .34));
}
.kt-cta:active { transform: translateY(0); }
.kt-cta:focus-visible { outline: 3px solid var(--kt-navy, #1d3b53); outline-offset: 3px; }
.kt-cta i { transition: transform 140ms cubic-bezier(.4,0,.2,1); }
.kt-cta:hover i { transform: translateX(3px); }

.kt-cta--lg    { min-height: 52px; padding: .8rem 1.6rem; font-size: 1.05rem; }
.kt-cta--ghost { background: transparent; color: var(--kt-orange-ink, #a8460f); box-shadow: inset 0 0 0 2px var(--kt-orange, #f4732b); }
.kt-cta--ghost:hover { background: var(--kt-orange-soft, rgba(244,115,43,.12)); color: var(--kt-orange-ink, #a8460f); }
.kt-cta--quiet { background: var(--kt-navy, #1d3b53); box-shadow: none; }

@media (max-width: 575.98px) {
    .kt-card__foot .kt-cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .kt-cta, .kt-cta i { transition: none; }
    .kt-cta:hover { transform: none; }
}


/* A card footer sitting beside its own price wants a slightly smaller button
   than a hero does. */
.kt-cta--sm { min-height: 38px; padding: .42rem .9rem; font-size: .86rem; }