.tl-view { min-height: 60vh; }
.tl-view:not(.splash-page) {
    background-color: transparent;
}
.cover-container { background: transparent; }
.font-12 { font-size: 12px; }
.font-14 { font-size: 14px; }
.inputLabel { font-weight: 600; margin-bottom: 0.25rem; display: block; }

:root {
    --merchant-primary: #3a8aeb;
    --tl-primary: var(--merchant-primary);
    --tl-accent: var(--tl-primary);
    --tl-white: #ffffff;
    --tl-on-light: #444444;
    --tl-white-tinted: color-mix(in srgb, var(--tl-white) 95%, var(--tl-primary) 5%);
    --tl-black-tinted: color-mix(in srgb, #000000 95%, var(--tl-primary) 5%);
    --tl-text-on-bg: var(--tl-black-tinted);
    --tl-text-muted-on-bg: #696969;
    --tl-bg: var(--tl-white);
    --tl-bg-soft: color-mix(in srgb, var(--tl-primary) 6%, var(--tl-white));
    --tl-bg-desktop-frame: #bdbdbd;
    --tl-bar-bg: var(--tl-white);
    --tl-surface-muted: #f2f2f2;
    --tl-surface-muted-hover: #e8e8e8;
    --tl-border: #e0e0e0;
    --tl-border-input: #ced4da;
    --tl-border-strong: #282828;
    --tl-line: #3a3a3a;
    --tl-input-bg: var(--tl-white);
    --tl-input-border: #E1E1E1;
    --tl-primary-tint: color-mix(in srgb, var(--tl-primary) 10%, var(--tl-white));
    --tl-primary-glow: color-mix(in srgb, var(--tl-primary) 25%, transparent);
    --tl-primary-pressed: color-mix(in srgb, var(--tl-primary) 15%, transparent);
    --tl-nav-disabled: #c8c8c8;
    --tl-phone-width: 430px;
    --tl-bottom-nav-height: 72px;
    --tl-browser-chrome-bottom: 0px;
    --tl-radius-card: 14px;
    --tl-card-light-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    --tl-chrome-shadow-down: 0 2px 8px rgba(0, 0, 0, 0.12);
    --tl-chrome-shadow-up: 0 -2px 8px rgba(0, 0, 0, 0.12);
    --bs-light: var(--tl-surface-muted);
    --bs-primary: var(--tl-primary);
    --bs-link-color: var(--tl-primary);
}

html.dark-mode-active {
    --tl-accent: color-mix(in srgb, var(--tl-primary) 48%, var(--tl-white));
    --tl-bg: #262626;
    --tl-bg-soft: var(--tl-bg);
    --tl-bg-desktop-frame: var(--tl-bg);
    --tl-bar-bg: var(--tl-bg);
    --tl-surface-muted: var(--tl-bg);
    --tl-surface-muted-hover: var(--tl-bg);
    --tl-border-strong: #777777;
    --tl-border: var(--tl-border-strong);
    --tl-text-on-bg: var(--tl-white-tinted);
    --tl-text-muted-on-bg: #D8D8D8;
    --tl-input-bg: color-mix(in srgb, var(--tl-white) 7%, var(--tl-bg));
    --tl-input-border: var(--tl-line);
    --tl-chrome-shadow-down: 0 2px 10px rgba(0, 0, 0, 0.35);
    --tl-chrome-shadow-up: 0 -2px 10px rgba(0, 0, 0, 0.35);
    --bs-light: var(--tl-bg);
}

.text-on-light { color: var(--tl-on-light) !important; }
.text-on-bg { color: var(--tl-text-on-bg) !important; }
.text-primary { color: var(--tl-accent) !important; }
.text-white { color: var(--tl-white) !important; }
.text-white-tinted { color: var(--tl-white-tinted) !important; }
.text-black-tinted { color: var(--tl-black-tinted) !important; }
.text-muted { color: var(--tl-text-muted-on-bg) !important; }
.text-secondary,
a.text-secondary { color: var(--tl-text-on-bg) !important; }
.text-dark,
a.text-dark { color: var(--tl-on-light) !important; }
.text-light,
a.text-light { color: var(--tl-white) !important; }

.card-light .text-primary,
.splash-page .text-primary,
.splash-page a.text-primary {
    color: var(--tl-primary) !important;
}

body,
#appCapsule,
.tl-view:not(.splash-page),
.section-title {
    color: var(--tl-text-on-bg);
}

:is(h1, h2, h3, h4, h5, h6) {
    color: inherit;
}

:is(h1, h2, h3, h4, h5, h6) small {
    color: inherit;
    opacity: 0.6;
}

.card-light,
.splash-card,
.splash-body,
.splash-icon-card {
    color: var(--tl-on-light);
}

.card-light .text-muted,
:is(.splash-card, .splash-body, .splash-icon-card) .text-muted {
    color: #757575 !important;
}

.listview.image-listview > li a.item,
.listview.image-listview > li .item,
.listview.image-listview .item .in > div:not(.text-muted) {
    color: var(--tl-text-on-bg) !important;
}

.listview.image-listview .text-muted,
.listview .text-muted {
    color: var(--tl-text-muted-on-bg) !important;
}

:is(
    .card:not(.card-primary) .card-title,
    .card:not(.card-primary) .card-subtitle,
    .header-large-title :is(.title, .subtitle),
    .tl-progress-copy,
    .tl-progress-donut .inner,
    .tl-status-page .text,
    .tl-home-offer-text,
    .tl-history-detail-title,
    .tl-history-detail-label,
    .tl-history-detail-value,
    .tl-profile-label,
    .tl-profile-value
) {
    color: inherit;
}

.card-light {
    background: linear-gradient(180deg, var(--tl-primary-tint) 0%, var(--tl-white) 100%) !important;
    background-color: var(--tl-white) !important;
    color: var(--tl-on-light);
    border: 0;
    border-radius: var(--tl-radius-card);
    box-shadow: var(--tl-card-light-shadow);
}

.card-light .card-title,
.card-light .card-text,
.card-light .card-subtitle {
    color: var(--tl-on-light) !important;
}

.card-primary,
.tl-featured-card.card-primary {
    background: var(--tl-primary) !important;
    background-color: var(--tl-primary) !important;
    color: var(--tl-white);
    border: 0;
    border-radius: var(--tl-radius-card);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}

.card-primary .card-title,
.card-primary .card-text,
.card-primary .card-subtitle,
.tl-featured-card.card-primary .tl-featured-copy {
    color: var(--tl-white) !important;
}

.card-transparent,
a.card-transparent {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--tl-accent) !important;
    border-radius: var(--tl-radius-card);
    box-shadow: none;
    color: var(--tl-accent);
}

.card-transparent .card-title,
.card-transparent .card-text,
.card-transparent .card-subtitle {
    color: inherit;
}

.card-transparent .text-primary,
a.card-transparent .text-primary {
    color: var(--tl-accent) !important;
}

html,
body {
    height: 100%;
    overflow: hidden;
}

body {
    background-color: var(--tl-bg-soft) !important;
}

.tl-rotate-device {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 20000;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    background: var(--tl-primary);
    color: var(--tl-white);
    pointer-events: auto;
}

.tl-rotate-device ion-icon {
    font-size: 64px;
    margin-bottom: 16px;
    display: block;
}

.tl-rotate-device p {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    max-width: 16rem;
}

@media screen and (orientation: landscape) and (hover: none) and (pointer: coarse) {
    .tl-rotate-device {
        display: flex;
        flex-direction: column;
    }

    .tl-device-shell {
        visibility: hidden;
    }
}

.tl-device-shell {
    position: relative;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

#appCapsule {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    box-sizing: border-box;
    background-color: var(--tl-bg-soft) !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#appCapsule.has-app-header {
    padding-top: 56px !important;
    margin-top: env(safe-area-inset-top) !important;
}

#appCapsule.has-bottom-nav {
    padding-bottom: calc(var(--tl-bottom-nav-height) + env(safe-area-inset-bottom)) !important;
}

/* Phones & installed PWA: margin-top on the scroll root steals reach; room for raised check-in tab. */
@media (max-width: 499px), (display-mode: standalone), (display-mode: fullscreen) {
    #appCapsule.has-app-header {
        margin-top: 0 !important;
        padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
    }

    #appCapsule.has-bottom-nav {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Viewport height must differ by install mode */
@media (display-mode: standalone), (display-mode: fullscreen) {
    html,
    body,
    .app-container,
    .tl-device-shell {
        height: 100vh;
        height: 100lvh;
        max-height: 100vh;
        max-height: 100lvh;
        min-height: 100vh;
        min-height: 100lvh;
    }

    #appCapsule {
        --tl-browser-chrome-bottom: 0px !important;
    }
}

@media (max-width: 499px) and (not (display-mode: standalone)) and (not (display-mode: fullscreen)) {
    html,
    body,
    .app-container,
    .tl-device-shell,
    #appCapsule {
        height: 100svh;
        max-height: 100svh;
    }

    #appCapsule.has-bottom-nav {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px) + var(--tl-browser-chrome-bottom, 0px)) !important;
    }
}

@media (min-width: 500px) {
    html, body, .app-container {
        height: 100vh;
        max-height: none;
    }

    body {
        background: var(--tl-bg-desktop-frame) !important;
        min-height: 100vh;
        height: 100%;
        padding: 20px 16px !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    .tl-device-shell {
        width: 100%;
        max-width: var(--tl-phone-width);
        height: calc(100vh - 40px);
        max-height: calc(100vh - 40px);
        min-height: 0;
        margin: 0 auto;
        position: relative;
        transform: translateZ(0);
        overflow: hidden;
        border: 10px solid #1c1c1e;
        border-radius: 36px;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.12),
            0 12px 40px rgba(0, 0, 0, 0.28);
        background: var(--tl-bg-soft);
    }

    .tl-device-shell .offcanvas-start {
        width: min(300px, 85%) !important;
    }
}

ion-icon {
  vertical-align: middle;
  --ionicon-stroke-width: 32;
}

ion-icon.icon-lg,
.icon-lg > ion-icon {
  font-size: 40px;
}

ion-icon.icon-md,
.icon-md > ion-icon {
  font-size: 30px;
}

ion-icon.icon-sm,
.icon-sm > ion-icon {
  font-size: 20px;
}

.punchCardDisplay .icon-lg > ion-icon,
.punchCardDisplay ion-icon.icon-lg {
  font-size: 75px;
}

.punchCardDisplay .icon-md > ion-icon,
.punchCardDisplay ion-icon.icon-md {
  font-size: 56px;
}

.punchCardDisplay .icon-sm > ion-icon,
.punchCardDisplay ion-icon.icon-sm {
  font-size: 36px;
}

.noPunch,
.noPunch ion-icon,
.tl-progress-icon.noPunch ion-icon {
  color: color-mix(in srgb, currentColor 35%, transparent);
}

.splash-page {
    min-height: 100vh;
    width: 100%;
    background-color: var(--tl-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 28px 14px 32px;
    margin: 0;
}

/* Make sure the background on splash matches the page background */
body:has(#Home:not([style*="display: none"])) {
    background-color: var(--tl-primary) !important;
}

body:has(#Home:not([style*="display: none"])) .tl-device-shell,
body:has(#Home:not([style*="display: none"])) #appCapsule {
    background-color: var(--tl-primary) !important;
}

@media (min-width: 500px) {
    body:has(#Home:not([style*="display: none"])) {
        background: var(--tl-primary) !important;
    }
}

.splash-card {
    width: 100%;
    max-width: 420px;
    background: var(--tl-white);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

.splash-hero {
    position: relative;
    width: 100%;
}

.splash-hero-bg {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.splash-icon-card {
    position: absolute;
    right: 18px;
    bottom: -30px;
    width: 88px;
    height: 88px;
    background: var(--tl-white);
    border-radius: var(--tl-radius-card);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 2;
}

.splash-icon-card img {
    max-width: 78%;
    max-height: 78%;
    object-fit: contain;
}

.splash-body {
    background: var(--tl-white);
    position: relative;
    z-index: 1;
    padding: 34px 26px 26px;
}

.splash-hero + .splash-body {
    padding-top: 44px;
}

.offer-fit {
    display: block;
    width: 100%;
    max-width: 100%;
    line-height: 1.15;
    text-wrap: balance;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.offer-fit--inline {
    display: inline-block;
    width: auto;
    max-width: 100%;
    vertical-align: bottom;
}

.offer-fit--lg {
    font-size: clamp(1.25rem, 8vw, 2.5rem);
    letter-spacing: 0.5px;
}

.offer-fit--md {
    font-size: clamp(1.125rem, 6vw, 2rem);
}

.offer-fit--sm {
    font-size: clamp(1rem, 5vw, 1.5rem);
}

.loyalty-offer .offer-fit {
    margin-bottom: 0;
}

.loyalty-offer-checkins {
    line-height: 1.2;
    margin-top: 0;
}

#NavHeader.appHeader:before {
    background: var(--tl-primary) !important;
}

#NavHeader.appHeader,
#NavHeader.appHeader.bg-primary {
    background: var(--tl-primary) !important;
    background-color: var(--tl-primary) !important;
    min-height: 56px !important;
    height: auto !important;
    border-bottom-color: transparent !important;
    box-shadow: var(--tl-chrome-shadow-down) !important;
}

#NavHeader.appHeader .pageTitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tl-white) !important;
    opacity: 1 !important;
}

#NavHeader.appHeader .headerButton,
#NavHeader.appHeader .headerButton ion-icon {
    color: var(--tl-white) !important;
    opacity: 1 !important;
}

/* PWA: iOS status-bar blur extends slightly past env(safe-area-inset-top). */
@media (display-mode: standalone), (display-mode: fullscreen) {
    /* Controls the height of the app header */
    #NavHeader.appHeader:before {
        height: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    }

    /* Controls the relative height of the header content (button and title) */
    #NavHeader.appHeader {
        top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    }

    /* Controls padding for the body content of each page */
    #appCapsule.has-app-header {
        padding-top: calc(56px + env(safe-area-inset-top, 0px) + 10px) !important;
        margin-top: 0 !important;
    }

    /* Splash and other headerless views: keep content within the safe zones */
    #appCapsule:not(.has-app-header) {
        padding-top: env(safe-area-inset-top, 0px) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    /* Offsets the sidebar header to avoid the same issue */
    body #sidebarPanel.offcanvas {
        padding-top: 16px !important;
    }

    #AppBottomMenu.appBottomMenu {
        padding-bottom: 16px !important;
    }
}

.splash-body hr {
    border: 0;
    border-top: 1px solid #d7d7d7;
    margin: 18px 0;
}

.splash-body .form-signin .form-control {
    background: var(--tl-white);
    background-color: var(--tl-white);
    border: 1px solid #d7d7d7;
    color: var(--tl-on-light);
    border-radius: 8px;
    padding: 12px 14px;
    height: auto;
}

.splash-body .form-signin .form-control:focus {
    border-color: var(--tl-primary);
    box-shadow: 0 0 0 0.15rem rgba(122, 31, 43, 0.15);
}

.splash-body .btn-block {
    display: block;
    width: 100%;
    border-radius: 10px;
    padding: 14px;
    font-weight: 600;
}

.splash-body .btn-block[aria-busy="true"] {
    opacity: 0.72;
}

@keyframes splash-auth-reveal {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.splash-auth-reveal {
    animation: splash-auth-reveal 0.22s ease-out;
}

.splash-login-links {
    display: none;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.splash-login-links a,
#SplashSmsSignInGroup a {
    color: var(--tl-primary);
}

.tl-register-skip-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.tl-register-skip-row .tl-register-skip-info {
    color: var(--tl-accent) !important;
    line-height: 1;
}

.tl-register-skip-row .tl-register-skip-info ion-icon {
    font-size: 1.25rem;
    vertical-align: middle;
}

.splash-body .toggleSect { color: var(--tl-primary); }

.splash-disclaimer {
    font-size: 8px;
    text-align: left;
    line-height: 1.25;
    margin-top: 10px;
    margin-bottom: 0;
}

.mwa-enrollment-highlight,
.text-muted .mwa-enrollment-highlight {
    color: var(--tl-primary) !important;
    font-weight: 800;
}

#loader {
    display: none;
}

html.tl-app-loading #loader {
    display: flex;
}

html.tl-app-loading #Home {
    display: none !important;
}

.tl-device-shell > #AppBottomMenu.appBottomMenu {
    position: absolute !important;
    bottom: 0 !important;
    left: 0;
    right: 0;
    z-index: 1000;
}

#AppBottomMenu.tl-bottom-nav {
    border-top: 1px solid var(--tl-primary) !important;
    background: var(--tl-bar-bg) !important;
    box-shadow: var(--tl-chrome-shadow-up) !important;
}

#AppBottomMenu.tl-bottom-nav .item ion-icon,
#AppBottomMenu.tl-bottom-nav .item strong {
    color: var(--tl-text-muted-on-bg) !important;
}

#AppBottomMenu.tl-bottom-nav .item.active ion-icon,
#AppBottomMenu.tl-bottom-nav .item.active strong {
    color: var(--tl-accent) !important;
}

#AppBottomMenu.tl-bottom-nav .action-button.large,
#AppBottomMenu.tl-bottom-nav #FooterCheckInBtn {
    background: var(--tl-primary) !important;
    box-shadow: var(--tl-chrome-shadow-up) !important;
}

#AppBottomMenu.tl-bottom-nav .action-button.large.is-disabled,
#AppBottomMenu.tl-bottom-nav #FooterCheckInBtn.is-disabled,
.tl-bottom-nav .item .action-button.large.is-disabled {
    background: var(--tl-nav-disabled) !important;
    box-shadow: var(--tl-chrome-shadow-up) !important;
    pointer-events: none;
    opacity: 1;
}

.tl-bottom-nav .item .col {
    position: relative;
}

#AppBottomMenu.tl-bottom-nav .item ion-icon {
    width: 26px !important;
    height: 26px !important;
    font-size: 26px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
    margin-right: auto;
    --ionicon-stroke-width: 32;
}

#AppBottomMenu.tl-bottom-nav .action-button.large ion-icon,
#AppBottomMenu.tl-bottom-nav #FooterCheckInTab.item.active ion-icon {
    color: var(--tl-white) !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 32px !important;
    --ionicon-stroke-width: 40;
}

#AppBottomMenu.tl-bottom-nav #FooterOffersBadge.tl-footer-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(8px);
    min-width: 18px;
    height: 18px;
    padding: 0 4px !important;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1 !important;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
}

#AppBottomMenu.tl-bottom-nav #FooterOffersBadge.tl-footer-badge.is-visible {
    display: inline-flex !important;
}

#AppBottomMenu.tl-bottom-nav #FooterCheckInTab,
#AppBottomMenu.tl-bottom-nav .item .action-button.large {
    position: relative;
    z-index: 2;
}

.tl-bottom-nav .item.is-disabled {
    pointer-events: none;
    opacity: 1;
}

.tl-bottom-nav .item.tl-bottom-nav-placeholder {
    pointer-events: none;
}

.connect-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 8px 0 24px;
}

.connect-box {
    width: 100%;
    aspect-ratio: 1;
    min-height: 140px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    padding: 16px 12px;
    box-sizing: border-box;
}

.connect-label {
    color: var(--tl-text-on-bg);
}

.connect-box ion-icon {
     color: var(--tl-accent);
}

.connect-box ion-icon {
    font-size: 56px;
    width: 56px;
    height: 56px;
}

.connect-box img {
    max-width: 56px;
    max-height: 56px;
    object-fit: contain;
}

.connect-website-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
}

.connect-website-icon [data-tl-capp="connect-icon"] {
    max-width: 56px;
    max-height: 56px;
    object-fit: contain;
}

.connect-website-icon [data-tl-capp="connect-icon-fallback"] {
    font-size: 56px;
    width: 56px;
    height: 56px;
}

.connect-label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

.tl-home-logo-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 16px 12px;
    background: transparent;
}

.tl-home-logo {
    width: 100%;
    max-width: 280px;
    max-height: 120px;
    object-fit: contain;
}

.tl-merchant-logo-dark-wrap {
    display: none;
}

html.dark-mode-active .tl-home-logo-banner.has-merchant-logo-dark .tl-merchant-logo-light {
    display: none;
}

html.dark-mode-active .tl-home-logo-banner.has-merchant-logo-dark .tl-merchant-logo-dark-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.card-light .card-body {
    padding: 24px 20px;
}

.tl-home-checkin-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--tl-primary);
    color: var(--tl-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.tl-home-connect-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--tl-white);
    color: var(--tl-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

:is(.tl-home-checkin-btn, .tl-offer-redeem-btn, .tl-offers-toggle .btn, .progressWidget .btn-outline-light) {
    border-radius: 12px;
    font-weight: 600;
}

.tl-home-checkin-btn {
    padding: 14px;
}

.tl-member-home .card {
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    background: var(--tl-bg-soft);
    border: 1px solid var(--tl-border);
}

.progressWidget .card.card-primary {
    padding: 20px 16px;
    text-align: center;
    margin-bottom: 12px;
}

.progressWidget .tl-home-reward-next-visit {
    color: var(--tl-white) !important;
    font-size: 0.95rem;
    opacity: 0.95;
}

.progressWidget .card-subtitle {
    opacity: 0.85;
}

.progressWidget .punchFilled {
    color: var(--tl-white) !important;
}

.progressWidget .noPunch {
    color: color-mix(in srgb, var(--tl-white) 35%, transparent) !important;
}

.progressWidget .btn-outline-light {
    border-width: 1px;
}

.progressWidget .btn-outline-light:hover,
.progressWidget .btn-outline-light:focus {
    background: var(--tl-white);
    color: var(--tl-primary);
    border-color: var(--tl-white);
}

.tl-home-punchcard,
.tl-progress-icons,
.tl-widget-punchcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
}

.tl-widget-punchcard {
    gap: 5px;
    margin-bottom: 4px;
}

.tl-sidebar-progress .tl-widget-punchcard {
    margin-bottom: 0;
    gap: 5px;
}

.tl-home-punchcard-row,
.tl-progress-icons-row,
.tl-widget-punchcard-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.tl-progress-icons-row {
    gap: 14px;
}

.tl-progress-icons {
    gap: 12px;
    max-width: 340px;
    margin: 0 auto;
}

.tl-progress-icons.punchCardDisplay {
    container-type: inline-size;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    --tl-punch-gap: 14px;
}

.tl-home-punchcard .tl-home-punch ion-icon,
.tl-home-punchcard .icon-md > ion-icon,
.tl-home-punchcard ion-icon.icon-md { font-size: 26px; }

.tl-home-punchcard .icon-sm > ion-icon,
.tl-home-punchcard ion-icon.icon-sm { font-size: 18px; }

.tl-progress-icons.punchCardDisplay .icon-lg > ion-icon,
.tl-progress-icons.punchCardDisplay ion-icon.icon-lg,
.tl-progress-icon.icon-lg > ion-icon { font-size: 72px; }

.tl-progress-icons.punchCardDisplay .icon-md > ion-icon,
.tl-progress-icons.punchCardDisplay ion-icon.icon-md,
.tl-progress-icon.icon-md > ion-icon { font-size: 48px; }

.tl-progress-icons.punchCardDisplay .icon-sm > ion-icon,
.tl-progress-icons.punchCardDisplay ion-icon.icon-sm,
.tl-progress-icon.icon-sm > ion-icon { font-size: 32px; }

.tl-progress-icon,
.tl-home-punch,
.tl-widget-punch {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex: 0 0 auto;
}

.tl-widget-punch.icon-md > ion-icon { font-size: 26px; }
.tl-widget-punch.icon-sm > ion-icon { font-size: 20px; }
.tl-widget-punch.icon-lg > ion-icon { font-size: 32px; }

.tl-home-offer-item {
    border: 1px dotted var(--tl-border);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--tl-bg-soft);
}

.tl-home-offer-text {
    margin-bottom: 4px;
}

.tl-offers-page {
    padding-bottom: 16px;
}

#Offers-View.cover-container.h-100,
#Punch-Card-View.cover-container.h-100,
#Completion-View.cover-container.h-100 {
    height: auto !important;
    min-height: 0;
}

.tl-offer-card,
.card-transparent.tl-offer-card {
    margin: 0 0 14px;
}

.tl-offer-card .card-body {
    padding: 20px 16px;
}

.tl-offer-card-text {
    margin-bottom: 8px;
}

.tl-offer-card-expires,
.tl-home-offer-expires {
    color: var(--tl-text-muted-on-bg);
}

.card-light .tl-home-offer-expires {
    color: #757575;
}

.tl-offer-card-expires {
    font-size: 0.85rem;
    font-weight: 300;
    margin-bottom: 16px;
}

.tl-offer-redeem-btn {
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
}

.dialogbox .modal-body.tl-dialog-scroll {
    max-height: 50vh;
    overflow-y: auto;
    text-align: left;
}

.dialogbox.tl-feedback-info .modal-body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 0px 0px;
    margin-bottom: 0px !important;
    text-align: center;
    min-height: 5rem;
}

.dialogbox.tl-feedback-info .modal-body #ErrorMsg {
    width: 100%;
    margin: 0;
    line-height: 1.5;
    text-align: center;
}

.dialogbox .modal-footer .btn ion-icon {
    font-size: 18px;
    vertical-align: middle;
    margin-right: 4px;
}

.modal.dialogbox,
.tl-device-shell .modal {
    z-index: 1055;
}

.tl-device-shell > .modal-backdrop,
.modal-backdrop {
    z-index: 1050;
}

.tl-device-shell > .modal.show {
    display: block;
    pointer-events: auto;
}

.tl-device-shell > .modal.show .modal-dialog {
    pointer-events: auto;
}

#sidebarPanel,
#sidebarPanel.offcanvas,
#sidebarPanel .offcanvas-body,
#sidebarPanel .listview,
#sidebarPanel .listview.transparent {
    background: var(--tl-bg-soft) !important;
    background-color: var(--tl-bg-soft) !important;
}

#sidebarPanel,
#sidebarPanel.offcanvas {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#sidebarPanel.offcanvas {
    top: 0;
    bottom: 0;
    height: auto !important;
    max-height: none !important;
}

#sidebarPanel .offcanvas-body.tl-sidebar-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 !important;
    margin-top: 0 !important;
    overflow: hidden;
}

#sidebarPanel .profileBox .image-wrapper .imaged {
    width: 42px;
    height: 42px;
    object-fit: contain;
    background: var(--tl-white);
}

#sidebarPanel .profileBox {
    position: relative !important;
    width: 100% !important;
    margin-top: 0 !important;
    padding: env(safe-area-inset-top) 10px 0 16px;
    box-sizing: border-box;
    overflow: hidden;
}

#sidebarPanel .profileBox:before {
    display: none;
}

#sidebarPanel .profileBox .in {
    flex: 1;
    min-width: 0;
}

#sidebarPanel .profileBox .in strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tl-white) !important;
}

#sidebarPanel .close-sidebar-button {
    position: static !important;
    flex: 0 0 36px;
    margin: 0 !important;
}

#appCapsule.tl-sidebar-open {
    overflow: hidden !important;
}

#sidebarPanel .tl-sidebar-panel__scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
}

#sidebarPanel .tl-sidebar-panel__footer {
    flex: 0 0 auto;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--tl-border);
    background: var(--tl-bg-soft);
}

#sidebarPanel .tl-sidebar-nav .item ion-icon {
    font-size: 22px;
    color: var(--tl-white);
}

#sidebarPanel .tl-sidebar-nav .item.active .in {
    color: var(--tl-accent);
    font-weight: 600;
}

#sidebarPanel .tl-sidebar-checkin {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    margin: 8px 12px 12px;
    background: var(--tl-primary);
    border-radius: 14px;
    color: var(--tl-white);
}

#sidebarPanel .tl-sidebar-dev-title {
    padding-bottom: 6px;
}

#sidebarPanel .tl-sidebar-dev-previews {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 16px 12px;
}

#sidebarPanel .tl-sidebar-dev-previews .btn {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    padding: 8px 6px;
    border-radius: 10px;
    white-space: normal;
    min-height: 40px;
}

#sidebarPanel .tl-sidebar-dev-previews .btn:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* PWA install prompt — card layout + slide animation (theme handles footer/button flex) */
#notification-welcome.tl-pwa-install-banner {
    top: 0;
    margin-top: 0;
    padding: calc(10px + env(safe-area-inset-top)) 14px 0;
    background: transparent;
    box-shadow: none;
    transform: translateY(calc(-100% - 24px));
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.35s ease;
    pointer-events: none;
}

#notification-welcome.tl-pwa-install-banner.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

#notification-welcome .tl-pwa-install-notification {
    position: relative;
    max-width: var(--tl-phone-width);
    margin: 0 auto;
    padding: 0;
    border-radius: var(--tl-radius-card);
    background: var(--tl-bar-bg);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22), 0 8px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

#notification-welcome .tl-pwa-install-notification__head {
    padding: 16px 16px 0;
}

#notification-welcome .tl-pwa-install-notification__title-row {
    padding: 0 36px;
    text-align: center;
}

#notification-welcome .tl-pwa-install-notification__title-row .subtitle,
#notification-welcome .tl-pwa-install-notification__title-sub {
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
    text-align: center;
}

#notification-welcome .tl-pwa-install-notification__title-sub {
    margin-top: 2px;
}

#notification-welcome .tl-pwa-install-notification__close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    display: flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--tl-text-muted-on-bg);
    text-decoration: none;
}

#notification-welcome .tl-pwa-install-notification__close:hover,
#notification-welcome .tl-pwa-install-notification__close:active {
    color: var(--tl-text-on-bg);
}

#notification-welcome .tl-pwa-install-notification .notification-content {
    margin-top: 10px;
    justify-content: center;
    text-align: center;
}

#notification-welcome .tl-pwa-install-notification .notification-content .in {
    padding: 0 16px 4px;
    width: 100%;
}

#notification-welcome .tl-pwa-merchant-name {
    color: var(--tl-accent);
    font-weight: 700;
}

#notification-welcome .tl-pwa-install-notification .notification-footer {
    margin: 12px 0 0;
    padding: 0;
    align-items: center;
    border-top: none;
    position: relative;
}

#notification-welcome .tl-pwa-install-notification .notification-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 1px;
    background: var(--tl-border);
}

#notification-welcome .notification-footer .notification-button,
#sidebarPanel .tl-sidebar-panel__footer .notification-button {
    display: flex;
    width: 100%;
    color: var(--tl-accent) !important;
    font-weight: 600;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: 12px 16px;
    box-sizing: border-box;
    border-right: 0;
}

#notification-welcome .notification-footer .notification-button:hover,
#notification-welcome .notification-footer .notification-button:active,
#sidebarPanel .tl-sidebar-panel__footer .notification-button:hover,
#sidebarPanel .tl-sidebar-panel__footer .notification-button:active {
    color: var(--tl-accent) !important;
    background: rgba(225, 225, 225, 0.3);
}

#notification-welcome .tl-pwa-install-icon,
#sidebarPanel .tl-sidebar-panel__footer .tl-pwa-install-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin-right: 10px;
    background: var(--tl-white);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#notification-welcome .tl-pwa-install-icon img,
#sidebarPanel .tl-sidebar-panel__footer .tl-pwa-install-icon img {
    max-width: 78%;
    max-height: 78%;
    object-fit: contain;
}

#ios-add-to-home-screen .imaged,
#android-add-to-home-screen .imaged {
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: var(--tl-white);
}

#sidebarPanel .tl-sidebar-checkin #SidebarCheckInBtn {
    font-size: 16px;
    font-weight: 600;
}

#sidebarPanel .tl-sidebar-progress-caption {
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.35;
    font-weight: 400;
    color: var(--tl-white);
}

#sidebarPanel .tl-sidebar-progress-caption strong {
    font-weight: 700;
}

.tl-progress-page {
    padding-bottom: 24px;
}

.tl-progress-chart {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px 12px;
}

.tl-progress-donut {
    width: 220px;
    height: 220px;
    margin: 0 auto;
}

.tl-progress-icon.noPunch ion-icon {
    color: inherit;
}

.tl-progress-donut .js-tl-progress-donut,
.tl-progress-donut .js-tl-branding-donut,
.tl-progress-donut #tlProgressCircle {
    position: relative;
    width: 100%;
    height: 100%;
}

.tl-progress-donut .js-tl-progress-donut > svg,
.tl-progress-donut .js-tl-branding-donut > svg,
.tl-progress-donut #tlProgressCircle > svg {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.tl-progress-donut .inner {
    font-size: 16px !important;
    white-space: nowrap;
}

.tl-progress-donut .inner h4 {
    color: var(--tl-accent);
    font-size: 42px;
    line-height: 1;
    margin-bottom: 2px;
}

.tl-progress-copy {
    padding: 20px 24px 8px;
    font-size: 1.25rem;
}

.tl-progress-remaining {
    font-size: 1.45rem;
}

.tl-progress-offer {
    margin: 16px 24px 8px;
    padding: 18px 16px;
    border-radius: 14px;
    text-align: center;
}

.tl-progress-offer .offer-fit {
    font-size: 1.75rem;
    line-height: 1.2;
    border-radius: 14px;
}

.tl-home-progress-donut {
    width: 100px;
    height: 100px;
    margin: 8px auto 12px;
}

.tl-home-progress-donut .inner,
.tl-sidebar-progress-donut .inner {
    color: color-mix(in srgb, var(--tl-white) 85%, transparent);
}

.tl-home-progress-donut .inner h4,
.tl-sidebar-progress-donut .inner h4 {
    color: var(--tl-white);
}

.tl-home-progress-donut .inner h4 {
    font-size: 32px;
}

.tl-sidebar-progress-donut .inner h4 {
    font-size: 28px;
}

#sidebarPanel .tl-sidebar-progress-donut .inner,
#sidebarPanel .tl-sidebar-progress-donut .inner h4 {
    color: var(--tl-white) !important;
}

.tl-sidebar-progress {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    text-align: center;
}

.tl-sidebar-progress .tl-confetti-host {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.tl-sidebar-progress .tl-confetti-host canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.tl-sidebar-progress-body {
    position: relative;
    z-index: 1;
}

.tl-reward-earned-copy h3 {
    font-size: 1.35rem;
}

.tl-completion-page {
    padding-bottom: 16px;
}

.tl-sidebar-progress-donut {
    width: 96px;
    height: 96px;
    margin: 0 auto;
}

.tl-sidebar-progress .punchFilled ion-icon,
.tl-sidebar-progress .punchFilled {
    color: var(--tl-white) !important;
}

.tl-sidebar-progress .noPunch ion-icon,
.tl-sidebar-progress .noPunch {
    color: color-mix(in srgb, var(--tl-white) 40%, transparent) !important;
}

.tl-history-page {
    min-height: 60vh;
    padding-bottom: 8px;
}

.tl-history-section-title {
    padding: 16px 16px 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 500;
}

.listview.image-listview .item .in > div:first-child {
    font-weight: 600;
    line-height: 1.25;
}

#Info-View .listview.image-listview .item .in {
    justify-content: flex-start;
    column-gap: 12px;
    min-width: 0;
}

#Info-View .listview.image-listview .item .in > div:first-child {
    flex: 0 0 auto;
    min-width: 0;
}

#Info-View .listview.image-listview .item .in > .text-muted,
#Info-View .listview.image-listview .item .in > .mwa-info-hours-lines {
    flex: 1 1 0;
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
}

#Info-View .mwa-info-hours-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.tl-history-empty .in {
    padding: 8px 0;
    font-size: 14px;
}

.tl-history-detail-back {
    padding: 4px 8px 0;
}

.tl-history-detail-back .headerButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    padding: 8px;
}

.tl-history-detail-back .headerButton ion-icon {
    width: 28px;
    height: 28px;
}

.tl-history-detail-body {
    padding: 24px 24px 48px;
}

.tl-history-detail-icon {
    width: 88px;
    height: 88px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tl-history-detail-icon ion-icon {
    font-size: 44px;
    width: 44px;
    height: 44px;
    color: var(--tl-white);
}

.tl-history-detail-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 28px;
    line-height: 1.3;
}

.tl-history-detail-meta {
    margin-bottom: 22px;
}

.tl-history-detail-label {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 4px;
}

.tl-history-detail-value {
    font-size: 0.95rem;
}

.tl-profile-page .header-large-title,
.tl-data-collection .header-large-title {
    padding-left: 16px;
    padding-right: 16px;
}

.tl-profile-block,
.tl-data-collection-block {
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.tl-profile-field {
    margin-bottom: 22px;
}

.tl-profile-label {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 4px;
    line-height: 1.25;
}

.tl-profile-value {
    font-size: 0.95rem;
    line-height: 1.35;
}

.tl-profile-page .form-group.boxed,
.tl-data-collection .form-group.boxed {
    margin-bottom: 16px;
}

.tl-profile-page .form-button-group,
.tl-data-collection .form-button-group,
#appCapsule.has-bottom-nav .form-button-group {
    position: static;
    min-height: 0;
    padding: 8px 0 0;
    background: transparent;
    display: block;
    width: 100%;
}

:is(.tl-sms-verification, #Register-View) .form-button-group {
    background: var(--tl-bar-bg, #fff);
    z-index: 1020;
    box-shadow: var(--tl-chrome-shadow-up, 0 -2px 12px rgba(0, 0, 0, 0.08));
}

#Register-View .login-form > .section:last-child {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px) + 56px);
}

#Reset-Password-View .login-form > .section {
    padding-left: 0;
    padding-right: 0;
}

.tl-password-requirements {
    margin: 4px 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--tl-border);
    border-radius: 12px;
    font-size: 13px;
}

.tl-password-requirements__title {
    margin: 0 0 8px;
    font-weight: 600;
}

.tl-password-requirements__list {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--tl-muted, #6c757d);
}

.tl-password-requirements__list li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.tl-password-requirements__list li:last-child {
    margin-bottom: 0;
}

.tl-password-requirements__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    opacity: 0.45;
    flex-shrink: 0;
}

.tl-password-requirements__check {
    display: none;
    width: 12px;
    height: 12px;
}

.tl-password-requirements__list li.is-met {
    color: var(--tl-text-on-bg);
}

.tl-password-requirements__list li.is-met .tl-password-requirements__icon {
    border-color: #5cb85c;
    background: #5cb85c;
    opacity: 1;
}

.tl-password-requirements__list li.is-met .tl-password-requirements__check {
    display: block;
}

:is(.tl-chrome-form, .tl-view:not(.splash-page)) .form-group.boxed .form-control,
:is(.tl-chrome-form, .tl-view:not(.splash-page)) .form-group.boxed .form-select {
    background: var(--tl-input-bg) !important;
    background-color: var(--tl-input-bg) !important;
    border-color: var(--tl-input-border) !important;
    color: var(--tl-text-on-bg) !important;
}

:is(.tl-chrome-form, .tl-view:not(.splash-page)) .form-group .form-label,
:is(.tl-chrome-form, .tl-view:not(.splash-page)) .form-group .tl-profile-label {
    color: var(--tl-text-on-bg) !important;
}

:is(.tl-chrome-form, .tl-view:not(.splash-page)) .form-group.boxed .form-control:focus,
:is(.tl-chrome-form, .tl-view:not(.splash-page)) .form-group.boxed .form-select:focus {
    border-color: var(--tl-primary) !important;
    box-shadow: 0 0 0 0.2rem var(--tl-primary-glow);
}

:is(.tl-chrome-form, .tl-view:not(.splash-page)) .form-group .input-wrapper.active .form-label,
:is(.tl-chrome-form, .tl-view:not(.splash-page)) .form-group .input-wrapper.active .tl-profile-label {
    color: var(--tl-accent) !important;
}

:is(.tl-chrome-form, .tl-view:not(.splash-page)) .form-group .clear-input {
    color: var(--tl-text-muted-on-bg);
}

:is(.tl-chrome-form, .tl-view:not(.splash-page)) .form-control::placeholder {
    color: var(--tl-text-muted-on-bg);
    opacity: 1;
}

html.dark-mode-active body :is(.tl-chrome-form, .tl-view:not(.splash-page)) .form-group.boxed .form-control,
html.dark-mode-active body :is(.tl-chrome-form, .tl-view:not(.splash-page)) .form-group.boxed .form-select {
    background: var(--tl-input-bg) !important;
    background-color: var(--tl-input-bg) !important;
    border-color: var(--tl-input-border) !important;
    color: var(--tl-text-on-bg) !important;
}

html.dark-mode-active body :is(.tl-chrome-form, .tl-view:not(.splash-page)) select option {
    background: var(--tl-input-bg) !important;
    background-color: var(--tl-input-bg) !important;
    color: var(--tl-text-on-bg) !important;
}

html.dark-mode-active body :is(.tl-chrome-form, .tl-view:not(.splash-page)) input[type="date"] {
    color-scheme: dark;
}

.tl-birthday-row {
    display: flex;
    gap: 10px;
}

.tl-birthday-row .form-select {
    flex: 1;
    min-width: 0;
}

.tl-featured-view {
    padding-bottom: 24px;
}

.tl-featured-card {
    margin: 0 16px;
    padding: 28px 22px;
    border-radius: 14px;
}

.tl-featured-card.card-primary {
    color: var(--tl-white);
}

.tl-featured-copy {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.35;
}

.tl-featured-actions {
    padding: 8px 16px 8px;
    margin: 0 auto;
    width: 100%;
}

.tl-featured-view .tl-featured-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.tl-end-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 16px 8px;
    max-width: 320px;
    margin: 0 auto;
    width: 100%;
}

.tl-end-socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px 8px;
}

.tl-end-social-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--tl-accent);
    background: var(--tl-white);
    color: var(--tl-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
}

.tl-end-social-btn:hover,
.tl-end-social-btn:focus {
    background: var(--tl-white);
    color: var(--tl-accent);
    opacity: 0.9;
}

.tl-end-social-btn ion-icon {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: inherit;
}

.tl-end-view .tl-featured-card:empty {
    min-height: 88px;
}

.btn-primary, .bg-primary, .alert-primary,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
    background-color: var(--tl-primary) !important;
    border-color: var(--tl-primary) !important;
    color: var(--tl-white) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
    filter: brightness(0.92);
}
.btn-primary:disabled, .btn-primary.disabled { opacity: 0.5; }

.border-primary { border-color: var(--tl-accent) !important; }

.btn-outline-primary {
    color: var(--tl-accent) !important;
    border-color: var(--tl-accent) !important;
    background: transparent !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-outline-primary:active, .btn-outline-primary.active {
    color: var(--tl-white) !important;
    background-color: var(--tl-primary) !important;
    border-color: var(--tl-primary) !important;
}

.btn-text-primary, .btn-text-primary:active, .btn-text-primary.active,
.btn-text-primary:disabled, .btn-text-primary.disabled {
    color: var(--tl-accent) !important;
}
.btn-text-primary:active, .btn-text-primary.active {
    background: var(--tl-primary-pressed) !important;
    border-color: transparent !important;
}

.modal-icon:not(.text-danger):not(.text-success):not(.text-warning),
.modal-icon:not(.text-danger):not(.text-success):not(.text-warning) ion-icon {
    color: var(--tl-accent) !important;
}

.spinner-border.text-primary {
    color: var(--tl-accent) !important;
    border-color: var(--tl-accent) !important;
    border-right-color: transparent !important;
}

.bg-light {
    background-color: var(--tl-white-tinted) !important;
}
.btn-light, .btn-light:hover, .btn-light:focus, .btn-light:active, .btn-light.active {
    background-color: var(--tl-white-tinted) !important;
    border-color: var(--tl-white-tinted) !important;
    color: var(--tl-on-light) !important;
    filter: none;
}
    .btn-light:hover, .btn-light:focus, .btn-light:active, .btn-light.active {
        background-color: var(--tl-primary-tint) !important;
        border-color: var(--tl-primary-tint) !important;
    }
.btn-outline-light {
    color: var(--tl-white) !important;
    border-color: var(--tl-surface-muted) !important;
    background: transparent !important;
}
.btn-outline-light:hover, .btn-outline-light:focus,
.btn-outline-light:active, .btn-outline-light.active {
    color: var(--tl-white) !important;
    background-color: color-mix(in srgb, transparent 90%, black) !important;
    border-color: color-mix(in srgb, var(--tl-surface-muted) 90%, black) !important;
}

.btn-secondary, .btn-secondary:hover, .btn-secondary:focus,
.btn-secondary:active, .btn-secondary.active {
    background-color: var(--tl-surface-muted) !important;
    border-color: var(--tl-white-tinted) !important;
    color: var(--tl-text-on-bg) !important;
    filter: none;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active {
    background-color: var(--tl-surface-muted-hover) !important;
}
.btn-outline-secondary {
    color: var(--tl-text-on-bg) !important;
    border-color: var(--tl-text-on-bg) !important;
    background: transparent !important;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus,
.btn-outline-secondary:active, .btn-outline-secondary.active {
    color: var(--tl-text-on-bg) !important;
    background-color: var(--tl-surface-muted) !important;
    border-color: var(--tl-text-on-bg) !important;
}
.btn-text-secondary, .btn-text-secondary:active, .btn-text-secondary.active,
.btn-text-secondary:disabled, .btn-text-secondary.disabled {
    color: var(--tl-text-on-bg) !important;
}
.btn-text-secondary:active, .btn-text-secondary.active {
    background: color-mix(in srgb, var(--tl-text-on-bg) 15%, transparent) !important;
    border-color: transparent !important;
}

html.dark-mode-active body .btn-secondary,
html.dark-mode-active body .btn-secondary:hover,
html.dark-mode-active body .btn-secondary:focus,
html.dark-mode-active body .btn-secondary:active,
html.dark-mode-active body .btn-secondary.active {
    border-color: var(--tl-text-on-bg) !important;
}

#sidebarPanel .profileBox,
#sidebarPanel .profileBox:before,
#sidebarPanel .icon-box.bg-primary,
.tl-home-checkin-icon {
    background: var(--tl-primary) !important;
}

html.dark-mode-active body :is(
    #appCapsule,
    .tl-device-shell,
    #loader,
    .preloader,
    .appFooter,
    .section .wide-block,
    .listview,
    .listview.transparent,
    #sidebarPanel,
    #sidebarPanel.offcanvas,
    #sidebarPanel .offcanvas-body,
    #sidebarPanel .listview,
    #sidebarPanel .listview.transparent,
    .card:not(.card-light):not(.card-primary):not(.card-transparent),
    .tl-member-home .card:not(.card-light):not(.card-primary):not(.card-transparent),
    .tl-end-social-btn,
    .tl-home-offer-item,
    .tl-offers-toggle .btn:not(.active),
    .modal.dialogbox .modal-content,
    .dialogbox .modal-dialog .modal-content .btn-inline,
    .dialogbox .modal-dialog .modal-content .btn-inline .btn,
    .sidebar-buttons
) {
    background: var(--tl-bg) !important;
    background-color: var(--tl-bg) !important;
}

html.dark-mode-active body .tl-view:not(.splash-page) .form-group:not(.boxed) :is(.form-control, .form-select) {
    background: var(--tl-bg) !important;
    background-color: var(--tl-bg) !important;
}

html.dark-mode-active #NavHeader.appHeader,
html.dark-mode-active #NavHeader.appHeader:before {
    background: var(--tl-primary) !important;
    background-color: var(--tl-primary) !important;
}

html.dark-mode-active body .tl-offers-toggle .btn:not(.active) {
    border-color: var(--tl-line);
}

html.dark-mode-active body .progressWidget .btn-outline-light:hover,
html.dark-mode-active body .progressWidget .btn-outline-light:focus {
    background: color-mix(in srgb, var(--tl-white) 12%, transparent) !important;
    color: var(--tl-white);
    border-color: var(--tl-white);
}

html.dark-mode-active body .tl-sidebar-progress :is(.noPunch, .noPunch ion-icon) {
    color: color-mix(in srgb, var(--tl-white) 40%, transparent) !important;
}

html.dark-mode-active body #sidebarPanel .profileBox .image-wrapper .imaged {
    background: var(--tl-white) !important;
}

html.dark-mode-active body #sidebarPanel :is(.tl-sidebar-nav .item .in, .listview .item .in) {
    color: var(--tl-white);
}

html.dark-mode-active body #sidebarPanel .tl-sidebar-panel__footer {
    background: var(--tl-bg) !important;
}

html.dark-mode-active body .dialogbox .modal-dialog .modal-content .modal-footer {
    border-top-color: var(--tl-line);
}

html.dark-mode-active body .fixed-footer {
    background: var(--tl-bg) !important;
}

html.dark-mode-active body .tl-view:not(.splash-page) .tl-info-footer-link {
    color: var(--tl-text-on-bg) !important;
}

html.dark-mode-active body :is(
    .notification-dialog,
    .notification-dialog.android-style,
    .notification-dialog.ios-style
) {
    background: #000000 !important;
}

html.dark-mode-active body .notification-dialog.android-style .notification-footer,
html.dark-mode-active body .notification-dialog.ios-style .notification-footer {
    border-top-color: #333333;
}

html.dark-mode-active body .notification-dialog.android-style .notification-footer .notification-button {
    border-right-color: #333333;
}

html.dark-mode-active body .notification-dialog.android-style .notification-footer .notification-button:hover,
html.dark-mode-active body .notification-dialog.android-style .notification-footer .notification-button:active {
    background: rgba(255, 255, 255, 0.06);
}

html.dark-mode-active body #notification-welcome .tl-pwa-install-notification {
    background: color-mix(in srgb, var(--tl-white) 1%, var(--tl-bg)) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.35);
}

html.dark-mode-active body #notification-welcome .tl-pwa-install-notification .notification-footer::before {
    background: color-mix(in srgb, var(--tl-border) 45%, transparent);
}

html.dark-mode-active body #notification-welcome .tl-pwa-install-icon,
html.dark-mode-active body #sidebarPanel .tl-sidebar-panel__footer .tl-pwa-install-icon {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

html.dark-mode-active body #sidebarPanel .tl-sidebar-panel__footer .notification-button:hover,
html.dark-mode-active body #sidebarPanel .tl-sidebar-panel__footer .notification-button:active {
    background: rgba(255, 255, 255, 0.06);
}

.tl-status-page {
    padding-bottom: 100px;
}

.tl-status-page .icon-box {
    color: var(--tl-accent);
}

.tl-status-page .icon-box ion-icon {
    width: 86px;
    height: 86px;
    font-size: 86px;
}

.tl-info-footer-link {
    color: var(--tl-on-light) !important;
}

.tl-progress-icon .mdi,
.tl-home-punch .mdi,
.tl-widget-punch .mdi {
    line-height: 1;
    vertical-align: middle;
}

.tl-home-punchcard.punchCardDisplay {
    container-type: inline-size;
    width: 100%;
}

.tl-home-punchcard.punchCardDisplay .icon-lg { --tl-punch-max: 64px; }
.tl-home-punchcard.punchCardDisplay .icon-md { --tl-punch-max: 52px; }
.tl-home-punchcard.punchCardDisplay .icon-sm { --tl-punch-max: 36px; }

.tl-home-punchcard.punchCardDisplay .icon-lg .mdi,
.tl-home-punchcard.punchCardDisplay .icon-md .mdi,
.tl-home-punchcard.punchCardDisplay .icon-sm .mdi {
    font-size: min(
        var(--tl-punch-max),
        calc((100cqw - (var(--tl-punch-count, 1) - 1) * 6px) / var(--tl-punch-count, 1))
    );
}

.tl-progress-icons.punchCardDisplay .icon-lg { --tl-punch-max: 64px; }
.tl-progress-icons.punchCardDisplay .icon-md { --tl-punch-max: 52px; }
.tl-progress-icons.punchCardDisplay .icon-sm { --tl-punch-max: 36px; }

.tl-progress-icons.punchCardDisplay .tl-progress-icon .mdi {
    font-size: min(
        var(--tl-punch-max),
        calc((100cqw - (var(--tl-punch-count, 1) - 1) * var(--tl-punch-gap, 14px)) / var(--tl-punch-count, 1))
    );
}

.tl-widget-punchcard {
    container-type: inline-size;
    width: 100%;
}

.tl-widget-punchcard .icon-lg { --tl-punch-max: 64px; }
.tl-widget-punchcard .icon-md { --tl-punch-max: 52px; }
.tl-widget-punchcard .icon-sm { --tl-punch-max: 36px; }

.tl-widget-punchcard .tl-widget-punch .mdi {
    font-size: min(
        var(--tl-punch-max),
        calc((100cqw - (var(--tl-punch-count) - 1) * 6px) / var(--tl-punch-count))
    );
}

.tl-progress-icon.noPunch .mdi,
.tl-home-punch .noPunch .mdi,
.tl-widget-punch.noPunch .mdi,
.tl-widget-punch:not(.punchFilled) .mdi {
    opacity: 0.35;
}

.square-nav-button {
    width: 100%;
    height: 100%;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .square-nav-button ion-icon {
        font-size: 2rem;
        margin: 0px !important;
    }

    .square-nav-button p {
        font-size: 0.9rem;
        margin: 5px 0px 0px 0px !important;
    }