/**
 * Site-wide motion, layout, and theme consistency.
 * Loaded last so tokens from color.css win.
 */

.spacer {
    height: var(--ttms-header-height, 5em);
    min-height: var(--ttms-header-height, 5em);
}

html, body {
    scroll-padding-top: calc(var(--ttms-header-height, 5em) + 0.5em);
}

/* Page titles — don’t stretch edge-to-edge on ultrawide */
h1.title {
    max-width: min(var(--ttms-title-max, 1120px), calc(100% - 1.25rem)) !important;
    width: 100%;
    margin-inline: auto;
}

[data-theme="dark"] h1.title {
    background: color-mix(in srgb, var(--bg-surface) 78%, transparent);
    border-color: var(--border-light);
}

/* Shared primary / secondary CTAs */
.client-pricing-sales__cta--primary {
    background: var(--cta-primary-bg) !important;
    color: var(--cta-primary-ink, #fff) !important;
}

.client-pricing-sales__cta--primary:hover {
    box-shadow: 0 10px 24px color-mix(in srgb, var(--primary-blue-dark) 28%, transparent);
}

.client-pricing-sales__cta--secondary {
    background: var(--hub-panel-icon-bg) !important;
    color: var(--hub-panel-ink, var(--text-primary)) !important;
    border-color: var(--hub-panel-icon-border) !important;
}

.client-pricing-sales__cta--secondary:hover {
    border-color: color-mix(in srgb, var(--primary-orange) 55%, var(--hub-panel-border)) !important;
    background: var(--hub-panel-icon-hover-bg) !important;
}

/* Cards + buttons: light lift */
.client-card,
.client-pricing-sales__plan,
.onboarding .ttms-onboarding-plan-card,
.ttms-location-card,
.locations-list-container .location-card {
    transition:
        transform var(--dur, 0.32s) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        box-shadow var(--dur, 0.32s) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        border-color var(--dur-fast, 0.18s) ease,
        background var(--dur, 0.32s) ease;
}

.client-card:hover,
.onboarding .ttms-onboarding-plan-card:hover,
:is(body.frontpage, body.pricing-page) .client-pricing-sales__plan:hover {
    transform: translateY(-3px);
}

.menu-toggle-btn,
.main-header .account-btn,
.main-header .notification-btn {
    transition:
        transform var(--dur-fast, 0.18s) var(--ease-spring, cubic-bezier(0.34, 1.4, 0.64, 1)),
        background var(--dur-fast, 0.18s) ease,
        border-color var(--dur-fast, 0.18s) ease,
        box-shadow var(--dur, 0.32s) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        color var(--dur-fast, 0.18s) ease;
}

.menu-toggle-btn .icon {
    fill: currentColor;
    color: inherit;
}

/* Menu panel uses hub tokens */
.menu-panel {
    background: var(--hub-panel-bg-gradient, rgba(255, 255, 255, 0.96)) !important;
    border-left-color: var(--hub-panel-border-subtle, rgba(0, 0, 0, 0.1)) !important;
    box-shadow: var(--hub-panel-shadow, var(--shadow-medium)) !important;
    color: var(--hub-panel-ink, var(--text-primary));
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.menu-panel .menu-header {
    background: var(--hub-panel-header-gradient, transparent);
    border-bottom: 1px solid var(--hub-panel-border, transparent);
}

.menu-panel #navigation > li:nth-child(1) { --nav-i: 0; }
.menu-panel #navigation > li:nth-child(2) { --nav-i: 1; }
.menu-panel #navigation > li:nth-child(3) { --nav-i: 2; }
.menu-panel #navigation > li:nth-child(4) { --nav-i: 3; }
.menu-panel #navigation > li:nth-child(5) { --nav-i: 4; }
.menu-panel #navigation > li:nth-child(6) { --nav-i: 5; }
.menu-panel #navigation > li:nth-child(7) { --nav-i: 6; }
.menu-panel #navigation > li:nth-child(8) { --nav-i: 7; }
.menu-panel #navigation > li:nth-child(9) { --nav-i: 8; }
.menu-panel #navigation > li:nth-child(10) { --nav-i: 9; }

.menu-panel.menu-open .menu-heading {
    animation: menu-tray-heading-in 0.46s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.menu-panel.menu-open .menu-header-trailing {
    animation: menu-tray-heading-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
}

.menu-panel.menu-open #navigation > li {
    animation: menu-nav-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(0.08s + (var(--nav-i, 0) * 0.04s));
}

.menu-panel.menu-open #navigation > li .icon {
    animation: menu-nav-icon-in 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(0.2s + (var(--nav-i, 0) * 0.055s));
}

@keyframes menu-tray-heading-in {
    from {
        opacity: 0;
        transform: translate3d(18px, -8px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes menu-nav-in {
    0% {
        opacity: 0;
        transform: translate3d(24px, 10px, 0) scale(0.92);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes menu-nav-icon-in {
    0% {
        opacity: 0.35;
        transform: scale(0.55) rotate(-14deg);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

#ttms-guest-taste-modal [data-guest-taste-tag-list].is-taste-tags-in .ttms-guest-taste-modal__tag {
    animation: menu-nav-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(0.1s + (var(--i, 0) * 0.055s));
}

#ttms-guest-taste-modal .ttms-guest-taste-modal__tag.is-taste-tag-enter {
    animation: menu-nav-in 0.56s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0s;
}

.menu-panel #navigation a {
    transition:
        transform var(--dur-fast, 0.18s) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        background var(--dur-fast, 0.18s) ease,
        color var(--dur-fast, 0.18s) ease,
        box-shadow var(--dur-fast, 0.18s) ease;
}

.menu-panel #navigation a:hover {
    transform: translateY(-3px) scale(1.03);
}

/* Footer socials */
.site-footer .footer-links--socials .social-link {
    transition:
        transform var(--dur-fast, 0.18s) var(--ease-spring, cubic-bezier(0.34, 1.4, 0.64, 1)),
        background var(--dur-fast, 0.18s) ease,
        color var(--dur-fast, 0.18s) ease;
}

.site-footer .footer-links--socials .social-link:hover {
    transform: translateY(-3px) scale(1.06);
}

.site-footer .footer-links--nav a {
    transition: color var(--dur-fast, 0.18s) ease, transform var(--dur-fast, 0.18s) ease;
}

.site-footer .footer-links--nav a:hover {
    color: var(--primary-orange);
}

/* Guest notify settings — tokenized */
.ttms-guest-notify-settings {
    border-color: var(--hub-panel-border) !important;
    background: var(--hub-panel-surface) !important;
}

.ttms-guest-notify-settings__summary {
    color: var(--hub-panel-ink) !important;
}

.ttms-guest-notify-settings__summary::after {
    border-color: var(--hub-panel-ink-muted) !important;
}

.ttms-guest-notify-settings__body {
    border-top-color: var(--hub-panel-border-subtle) !important;
}

/* Onboarding / marketing page links */
.simple-marketing-page__body a {
    color: color-mix(in srgb, var(--primary-orange) 55%, var(--primary-blue));
}

[data-theme="dark"] .simple-marketing-page__body a {
    color: var(--primary-orange-light);
}

/* Content columns at large widths */
.location-container,
.clients-container,
.locations-list-container {
    max-width: var(--ttms-header-max, 1400px);
}

/* Icon buttons press */
.ttms-icon-btn:active,
.menu-toggle-btn:active,
.main-header .account-btn:active,
.main-header .notification-btn:active {
    transform: scale(0.96);
}

@keyframes ttms-place-in {
    from {
        opacity: 0;
        transform: translateY(0.55rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ttms-place-out {
    to {
        opacity: 0;
        transform: translateX(0.7rem) scale(0.98);
    }
}

@keyframes ttms-place-pulse {
    50% {
        transform: scale(0.985);
    }
}

.ttms-guest-notify-venues__item {
    animation: ttms-place-in 0.45s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both;
    animation-delay: calc(min(var(--i, 0), 12) * 38ms);
    transition:
        transform var(--dur, 0.32s) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        box-shadow var(--dur, 0.32s) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        border-color var(--dur-fast, 0.18s) ease,
        background var(--dur, 0.32s) ease,
        opacity var(--dur-fast, 0.18s) ease;
}

.ttms-guest-notify-venues__item.is-settled {
    animation: none;
}

.ttms-guest-notify-venues__item.is-leaving {
    animation: ttms-place-out 0.32s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
    pointer-events: none;
}

.ttms-guest-notify-venues__item.is-updating {
    animation: ttms-place-pulse 0.42s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

.ttms-guest-notify-venues__btn {
    transition:
        transform var(--dur-fast, 0.18s) var(--ease-spring, cubic-bezier(0.34, 1.4, 0.64, 1)),
        background var(--dur-fast, 0.18s) ease,
        border-color var(--dur-fast, 0.18s) ease,
        color var(--dur-fast, 0.18s) ease,
        box-shadow var(--dur-fast, 0.18s) ease;
}

.ttms-guest-notify-venues__btn:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary-orange, #f8af18) 45%, rgba(17, 24, 39, .16));
}

.ttms-guest-notify-venues__btn:active {
    transform: scale(0.97);
}

.ttms-guest-notify-venues__btn--danger:hover {
    border-color: rgba(155, 28, 28, .45);
    background: color-mix(in srgb, #9b1c1c 8%, #fff);
}

@media (hover: hover) {
    .ttms-guest-notify-venues__item:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px color-mix(in srgb, var(--text-primary, #111827) 8%, transparent);
    }

    .ttms-guest-notify-venues__item.is-leaving:hover,
    .ttms-guest-notify-venues__item.is-updating:hover {
        transform: none;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .client-card,
    .client-pricing-sales__plan,
    .onboarding .ttms-onboarding-plan-card,
    .menu-toggle-btn,
    .main-header .account-btn,
    .main-header .notification-btn,
    .menu-panel #navigation a,
    .menu-panel #navigation > li,
    .menu-panel #navigation > li .icon,
    .menu-panel.menu-open .menu-heading,
    .menu-panel.menu-open .menu-header-trailing,
    #ttms-guest-taste-modal .ttms-guest-taste-modal__tag,
    .site-footer .footer-links--socials .social-link,
    .ttms-guest-notify-venues__item,
    .ttms-guest-notify-venues__btn {
        transition: none;
        animation: none !important;
    }

    .client-card:hover,
    .onboarding .ttms-onboarding-plan-card:hover,
    .menu-panel #navigation a:hover,
    .site-footer .footer-links--socials .social-link:hover,
    .ttms-guest-notify-venues__item:hover,
    .ttms-guest-notify-venues__btn:hover {
        transform: none;
    }
}