/* Portal refresh (2026-09): motion, focus and touch polish layered over the original look.
   The digital employee ID card is deliberately left alone. Store teams check it by sight,
   so any change to it needs training first. Every animation here sits behind
   prefers-reduced-motion, and browsers that don't support a feature keep the old behaviour. */

/* Page to page (Chrome/Edge 126+, Safari 18.2+): the navbar and the tab bar hold still (their own
   view-transition names) while the page between them crossfades, quickly and evenly, the way an
   app switches tabs. Page content no longer animates in by itself on load: that ran underneath
   the crossfade, so every tab switch blinked blank for a moment. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 180ms;
        animation-timing-function: cubic-bezier(.2, .8, .2, 1);
    }
}

.navbar-fixed-top {
    view-transition-name: portal-navbar;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }

    .progress-bar {
        transition: width 1.1s cubic-bezier(.22, 1, .36, 1);
    }

    .modal.fade .modal-dialog {
        opacity: 0;
        transform: translateY(12px) scale(.97);
        transition: transform 280ms cubic-bezier(.2, .9, .3, 1), opacity 200ms ease-out;
    }

    .modal.in .modal-dialog {
        opacity: 1;
        transform: none;
    }
}

@keyframes portal-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@keyframes portal-fade-in {
    from { opacity: 0; }
}

@keyframes portal-fade-out {
    to { opacity: 0; }
}

@keyframes portal-drop-in {
    from { opacity: 0; transform: translateY(-10px) scale(.98); }
    to { opacity: 1; transform: none; }
}

/* Surfaces */
.well {
    border-color: #e9e9e9;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .04);
}

.modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

/* Buttons and fields: a press you can feel, a focus ring you can see */
.btn {
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}

    .btn:active,
    .btn.active {
        transform: scale(.97);
    }

.form-control {
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .form-control:focus {
        border-color: #1e1e1e;
        box-shadow: 0 0 0 3px rgba(169, 52, 57, .18);
    }

a:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #a93439;
    outline-offset: 2px;
}

.btn:focus:not(:focus-visible) {
    outline: 0;
}

/* Phones: 16px text stops iOS zooming into every field you tap */
@media (max-width: 767px) {
    .form-control,
    .select2-container .select2-search__field {
        font-size: 16px;
    }

    .form-control {
        height: 40px;
    }

    .input-group-btn > .btn {
        height: 40px;
    }
}

/* Employee picker (Admin) */
.employee-search-group .select2-container--default .select2-selection--single {
    height: 44px;
    border: 1px solid #ccc;
    border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .employee-search-group .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding-left: 14px;
        padding-right: 36px;
        line-height: 42px;
        font-size: 16px;
        color: #333;
    }

    .employee-search-group .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: #8a8a8a;
    }

    .employee-search-group .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 42px;
        right: 8px;
    }

.employee-search-group .select2-container--default.select2-container--focus .select2-selection--single,
.employee-search-group .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #1e1e1e;
    box-shadow: 0 0 0 3px rgba(169, 52, 57, .18);
}

.employee-search-inactive {
    margin: 0 0 8px;
}

.select2-dropdown {
    border-color: #ccc;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    height: 40px;
    padding: 6px 10px;
    border-radius: 6px;
}

.select2-container--default .select2-results > .select2-results__options {
    max-height: 50vh;
    -webkit-overflow-scrolling: touch;
}

.select2-results__option {
    padding: 10px 14px;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #1e1e1e;
}

.employee-result-name {
    font-weight: 600;
}

.employee-result-details {
    margin-top: 2px;
    font-size: 12px;
    color: #777;
}

.select2-results__option--highlighted .employee-result-details {
    color: rgba(255, 255, 255, .8);
}

/* Install banner (Views/Shared/_Layout.cshtml): one slim row, phones and tablets only (Portal.js).
   It sits in the page flow, so it never covers the ID. */
.install-banner[hidden] {
    display: none !important;
}

.install-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 6px 4px 6px 8px;
    font-size: 13px;
    line-height: 1.3;
    color: #fff;
    background: #1e1e1e;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
}

@media (prefers-reduced-motion: no-preference) {
    .install-banner.is-visible {
        animation: portal-drop-in 380ms cubic-bezier(.2, .9, .3, 1.15) both;
    }
}

.install-banner-icon {
    flex: none;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 7px;
}

.install-banner-text {
    flex: 1 1 auto;
    min-width: 0;
}

.install-banner-text-ios {
    display: none;
}

.install-banner--ios .install-banner-text-default,
.install-banner--ios .install-banner-action {
    display: none;
}

.install-banner--ios .install-banner-text-ios {
    display: inline;
}

.install-banner-share {
    width: 11px;
    height: 14px;
    vertical-align: -2px;
}

.install-banner-action {
    flex: none;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    color: #1e1e1e;
    background: #fff;
    border: 0;
    border-radius: 999px;
}

    .install-banner-action:hover,
    .install-banner-action:focus {
        color: #1e1e1e;
        background: #eee;
    }

.install-banner-close {
    flex: none;
    min-width: 32px;
    padding: 0 6px;
    font-size: 22px;
    line-height: 28px;
    color: #fff;
    text-shadow: none;
    opacity: .7;
}

    .install-banner-close:hover,
    .install-banner-close:focus {
        color: #fff;
        opacity: 1;
    }

/* ---------------------------------------------------------------------------------------
   Dashboard: usage meter (Views/Home/Index.cshtml)
   --------------------------------------------------------------------------------------- */
.usage-meter {
    margin-bottom: 22px;
}

.usage-meter-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
}

.usage-meter-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.usage-meter-period {
    font-size: 13px;
    color: #777;
}

.usage-meter-figures {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.usage-meter-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #777;
}

.usage-meter-amount {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: #188519;
    font-variant-numeric: tabular-nums;
}

.usage-meter-limit {
    padding-bottom: 6px;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
}

    .usage-meter-limit small {
        font-weight: 500;
        color: #888;
    }

.usage-meter-track {
    position: relative;
    height: 14px;
    margin-top: 12px;
    overflow: hidden;
    background: #e4e4e4;
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
}

.usage-meter-fill {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(90deg, #1e1e1e, #555);
    border-radius: inherit;
}

.usage-meter.is-high .usage-meter-fill {
    background: linear-gradient(90deg, #d98b00, #f2b233);
}

.usage-meter.is-maxed .usage-meter-fill {
    background: linear-gradient(90deg, #a93439, #d9483b);
}

.usage-meter.is-maxed .usage-meter-amount {
    color: #a93439;
}

.usage-meter.is-inactive .usage-meter-amount,
.usage-meter.is-waiting .usage-meter-amount {
    color: #999;
}

.usage-meter.is-inactive .usage-meter-fill,
.usage-meter.is-waiting .usage-meter-fill {
    background: #bbb;
}

.usage-meter-foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    font-size: 13px;
    color: #777;
}

.usage-meter-alert {
    margin-top: 12px;
    padding: 10px 12px;
    font-weight: 600;
    color: #a93439;
    background: rgba(169, 52, 57, .08);
    border-radius: 10px;
}

/* A new hire's start date: good news, not a problem. */
.usage-meter-alert--soon {
    color: #146c15;
    background: rgba(24, 133, 25, .09);
}

@media (prefers-reduced-motion: no-preference) {
    .usage-meter {
        animation: portal-rise 320ms cubic-bezier(.2, .8, .2, 1) both;
    }

    .usage-meter-fill {
        animation: portal-meter-fill 1.2s cubic-bezier(.22, 1, .36, 1) .25s both;
    }

        .usage-meter-fill::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%);
            transform: translateX(-100%);
            animation: portal-sheen 1.3s ease-in-out 1.35s both;
        }
}

@keyframes portal-meter-fill {
    from { width: 0; }
}

@keyframes portal-sheen {
    to { transform: translateX(100%); }
}

/* ---------------------------------------------------------------------------------------
   Dashboard: how to use your discount, with a real button for online codes
   --------------------------------------------------------------------------------------- */
/* Under the ID: two lines (in store / online) and the online-code button. */
.discount-strip {
    margin: 18px 0 4px;
}

.discount-strip-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px;
    color: #444;
}

.discount-strip-icon {
    flex: none;
    width: 18px;
    margin-top: 3px;
    color: #1e1e1e;
    text-align: center;
}

.discount-strip .discount-cta {
    margin-top: 14px;
}

.discount-ways-note {
    padding: 10px 12px;
    color: #6b4e00;
    background: #fff6dc;
    border-radius: 10px;
}

.discount-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    overflow: hidden;
    font-weight: 700;
    color: #fff;
    background: #1e1e1e;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(30, 30, 30, .25);
}

    .discount-cta:hover,
    .discount-cta:focus {
        color: #fff;
        background: #000;
    }

.discount-cta-arrow {
    transition: transform .2s ease;
}

.discount-cta:hover .discount-cta-arrow {
    transform: translateX(4px);
}

/* "Back to ..." buttons: the arrow leads and points back. */
.discount-cta:hover .discount-cta-arrow--back {
    transform: translateX(-4px);
}

.discount-cta.is-disabled,
.discount-cta.is-disabled:hover,
.discount-cta.is-disabled:active {
    color: #777;
    background: #ececec;
    box-shadow: none;
    transform: none;
    cursor: default;
}

.discount-cta-note {
    margin: 8px 0 0;
    font-size: 13px;
    color: #777;
    text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
    /* One sweep of light across the button after it lands: it reads as something to press. */
    .discount-cta:not(.is-disabled)::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 60%;
        background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent);
        transform: translateX(-120%);
        animation: portal-cta-shine 1.1s ease-in-out 1.1s both;
        pointer-events: none;
    }
}

@keyframes portal-cta-shine {
    to { transform: translateX(260%); }
}

/* ---------------------------------------------------------------------------------------
   Online code request and confirmation (Views/Home/RequestDiscount*.cshtml)
   --------------------------------------------------------------------------------------- */
/* One header for every tab (Views/Home/Index, RequestDiscount, Raffles, Uniforms, FAQ and
   Account/MyAccount): an icon tile matching the tab bar, then a title that stays on one line. */
.page-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin: 22px 0 16px;
}

    .page-head h2 {
        min-width: 0;
        margin: 0;
        overflow: hidden;
        font-size: 26px;
        font-weight: 800;
        line-height: 1.25;
        letter-spacing: -.01em;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.page-head-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 19px;
    color: #fff;
    background: #1e1e1e;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(30, 30, 30, .22);
}

.page-head-lede {
    margin: -6px 0 18px;
    font-size: 15px;
    color: #555;
}

/* Admin Tools (Views/Admin/Index.cshtml): the Bootstrap tabs are one segmented control that
   never wraps. Bootstrap's tab plugin only needs the data-toggle links, so panes still switch. */
.admin-tabs {
    display: flex;
    gap: 4px;
    max-width: 560px;
    padding: 4px;
    margin: 0 0 4px;
    list-style: none;
    background: #efefef;
    border-radius: 14px;
}

    .admin-tabs > li {
        flex: 1 1 auto;
        min-width: 0;
    }

        .admin-tabs > li > a {
            display: block;
            padding: 9px 6px;
            overflow: hidden;
            font-size: 14px;
            font-weight: 700;
            color: #555;
            text-align: center;
            text-decoration: none;
            white-space: nowrap;
            text-overflow: ellipsis;
            border-radius: 10px;
            transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
        }

            .admin-tabs > li > a:hover,
            .admin-tabs > li > a:focus {
                color: #1e1e1e;
                background: rgba(255, 255, 255, .6);
            }

        .admin-tabs > li.active > a,
        .admin-tabs > li.active > a:hover,
        .admin-tabs > li.active > a:focus {
            color: #1e1e1e;
            background: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
        }

.adminHeader {
    margin: 20px 0 12px;
    font-size: 19px;
    font-weight: 800;
}

.well > .adminHeader:first-child {
    margin-top: 0;
}

/* Headings inside a page sit below the page title, never above it. */
.section-title {
    margin: 26px 0 12px;
    font-size: 19px;
    font-weight: 800;
}

@media (max-width: 767px) {
    .page-head {
        margin: 16px 0 14px;
    }

        .page-head h2 {
            font-size: 22px;
        }

    .section-title,
    .adminHeader {
        font-size: 18px;
    }

    .setup-step h2,
    .request-success h2 {
        font-size: 22px;
    }

    .admin-tabs > li > a {
        font-size: 13px;
    }
}

.discount-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 22px;
}

.discount-summary-item {
    padding: 12px 6px;
    text-align: center;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
}

.discount-summary-value {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: #1e1e1e;
    font-variant-numeric: tabular-nums;
}

.discount-summary-label {
    display: block;
    font-size: 12px;
    color: #777;
}

.request-step {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
}

.delivery-options {
    display: grid;
    gap: 10px;
}

.delivery-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    margin: 0;
    padding: 14px 16px;
    font-weight: 600;
    background: #fff;
    border: 2px solid #e3e3e3;
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

    .delivery-option:active {
        transform: scale(.985);
    }

    /* The radio stays in the form (and in the keyboard order) but is drawn by the check circle. */
    .delivery-option input[type=radio] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

.delivery-option-icon {
    font-size: 18px;
    color: #999;
}

.delivery-option-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.delivery-option-check {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 12px;
    color: transparent;
    border: 2px solid #cfcfcf;
    border-radius: 50%;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .25s cubic-bezier(.2, .9, .3, 1.4);
}

.delivery-option input:checked ~ .delivery-option-check {
    color: #fff;
    background: #1e1e1e;
    border-color: #1e1e1e;
    transform: scale(1.1);
}

.delivery-option input:checked ~ .delivery-option-icon {
    color: #1e1e1e;
}

.delivery-option input:focus-visible ~ .delivery-option-check {
    box-shadow: 0 0 0 3px rgba(169, 52, 57, .35);
}

.delivery-option:has(input:checked) {
    border-color: #1e1e1e;
    box-shadow: 0 0 0 3px rgba(30, 30, 30, .08);
}

.request-footnote {
    margin-top: 10px;
}

.request-success {
    max-width: 460px;
    margin: 32px auto 8px;
    text-align: center;
}

    .request-success h2 {
        margin: 16px 0 8px;
        font-size: 24px;
        font-weight: 800;
    }

    .request-success p {
        font-size: 15px;
        color: #555;
    }

    .request-success .request-success-how {
        font-weight: 600;
        color: #333;
    }

.request-success-actions {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

    .request-success-actions .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 52px;
        margin: 0;
        border-radius: 14px;
    }

.request-success-check {
    width: 84px;
    height: 84px;
}

    .request-success-check circle {
        fill: none;
        stroke: #188519;
        stroke-width: 3;
    }

    .request-success-check path {
        fill: none;
        stroke: #188519;
        stroke-width: 4;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

@media (prefers-reduced-motion: no-preference) {
    .request-success-check {
        animation: portal-success-pop .5s cubic-bezier(.2, .9, .3, 1.4) .85s both;
    }

        .request-success-check circle {
            stroke-dasharray: 151;
            stroke-dashoffset: 151;
            animation: portal-draw .6s cubic-bezier(.65, 0, .45, 1) .1s forwards;
        }

        .request-success-check path {
            stroke-dasharray: 34;
            stroke-dashoffset: 34;
            animation: portal-draw .35s cubic-bezier(.65, 0, .45, 1) .6s forwards;
        }
}

@keyframes portal-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes portal-success-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* ---------------------------------------------------------------------------------------
   Phones: app-style tab bar (Views/Shared/_Layout.cshtml)
   --------------------------------------------------------------------------------------- */
.tab-bar {
    display: none;
}

/* Phones and tablets in portrait (up to 991px, the width where the top menu collapses). */
@media (max-width: 991px) {
    body.has-tab-bar {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }

    .tab-bar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1030;
        display: flex;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
        background: rgba(30, 30, 30, .94);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        backdrop-filter: saturate(180%) blur(16px);
        box-shadow: 0 -1px 0 rgba(255, 255, 255, .06), 0 -8px 24px rgba(0, 0, 0, .12);
        view-transition-name: portal-tabbar;
    }

    .tab-bar-item {
        position: relative;
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-height: 54px;
        padding: 6px 2px;
        font-size: 11px;
        font-weight: 600;
        color: #9a9a9a;
        text-decoration: none;
        border-radius: 12px;
        -webkit-tap-highlight-color: transparent;
        transition: color .15s ease, background-color .15s ease;
    }

        .tab-bar-item .fa {
            font-size: 22px;
            line-height: 1;
            transition: transform .25s cubic-bezier(.2, .9, .3, 1.4);
        }

        .tab-bar-item {
            min-width: 0;
        }

    .tab-bar-label {
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
    }

        .tab-bar-item:hover,
        .tab-bar-item:focus {
            color: #fff;
            text-decoration: none;
        }

        .tab-bar-item:active {
            background: rgba(255, 255, 255, .08);
        }

            .tab-bar-item:active .fa {
                transform: scale(.86);
            }

        .tab-bar-item.is-active {
            color: #fff;
        }

            .tab-bar-item.is-active::before {
                content: "";
                position: absolute;
                top: -6px;
                left: 50%;
                width: 22px;
                height: 3px;
                margin-left: -11px;
                background: #d9483b;
                border-radius: 0 0 3px 3px;
            }
}

@media (max-width: 991px) and (prefers-reduced-motion: no-preference) {
    .tab-bar-item.is-active .fa {
        animation: portal-tab-pop .45s cubic-bezier(.2, .9, .3, 1.4) both;
    }
}

@keyframes portal-tab-pop {
    0% { transform: scale(.8); }
    60% { transform: scale(1.14); }
    100% { transform: none; }
}

/* ---------------------------------------------------------------------------------------
   Digital ID: a live holographic sheen (Views/Home/Partials/IdCard.cshtml adds .id-live)
   A band of light sweeps across the card over a faint iridescent wash that drifts and, on
   Android, follows the phone's tilt (Portal.js). A screenshot freezes it, so a copy is easy to
   spot at the register. The card's layout, text and colours are unchanged, and the barcode is
   raised ABOVE the sheen so its pixels never change and scanning is unaffected.
   Approved by Josh 2026-09-24. Tell stores before changing how the ID looks.
   --------------------------------------------------------------------------------------- */
.id-live {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
    border-radius: 12px;
    pointer-events: none;
    /* Overlay blending tints the light card and leaves dark text dark, so everything stays readable. */
    mix-blend-mode: overlay;
    --id-tilt-x: 0;
    --id-tilt-y: 0;
}

    .id-live ~ barcode {
        position: relative;
        z-index: 2;
    }

    /* The iridescent wash: faint, and it moves with the tilt. */
    .id-live::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(115deg,
            rgba(255, 255, 255, 0) 22%,
            rgba(255, 90, 190, .45) 32%,
            rgba(90, 170, 255, .5) 42%,
            rgba(90, 255, 200, .45) 52%,
            rgba(255, 215, 90, .45) 62%,
            rgba(255, 255, 255, 0) 72%);
        transform: translate(calc(var(--id-tilt-x) * 14%), calc(var(--id-tilt-y) * 10%));
        transition: transform .25s ease-out;
        animation: id-live-drift 8s ease-in-out infinite alternate;
    }

    /* The band of light that keeps sweeping across. */
    .id-live::after {
        content: "";
        position: absolute;
        top: -25%;
        bottom: -25%;
        left: 0;
        width: 34%;
        background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0));
        transform: translateX(-160%) skewX(-14deg);
        animation: id-live-sweep 3.4s cubic-bezier(.45, 0, .55, 1) infinite;
    }

@keyframes id-live-drift {
    from { translate: -12% -6%; }
    to { translate: 12% 6%; }
}

@keyframes id-live-sweep {
    0% { transform: translateX(-160%) skewX(-14deg); }
    55%, 100% { transform: translateX(420%) skewX(-14deg); }
}

/* Reduced motion keeps the ID visibly live (that is its job) but slow and soft. */
@media (prefers-reduced-motion: reduce) {
    .id-live::before {
        animation-duration: 16s;
    }

    .id-live::after {
        opacity: .6;
        animation-duration: 9s;
    }
}

/* ---------------------------------------------------------------------------------------
   Log in and the other account pages (Views/Account/*.cshtml): the page header, then one
   clean white card in a centred column. The same look signed in (Change Password) or out.
   Confirmations and errors use the setup-step card below.
   --------------------------------------------------------------------------------------- */
.auth-page {
    max-width: 480px;
    margin: 0 auto;
}

.login-card {
    position: relative;
    padding: 22px 20px 20px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);
}

.login-intro {
    margin: 0 0 16px;
    font-size: 15px;
    color: #555;
}

.login-label {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #555;
}

.login-card .input-group-addon {
    min-width: 44px;
    color: #888;
    background: #f6f6f6;
    border-radius: 12px 0 0 12px;
    transition: color .15s ease, border-color .15s ease;
}

.login-card .form-control {
    height: 48px;
    font-size: 16px;
    color: #1e1e1e;
    border-radius: 0 12px 12px 0;
}

    .login-card .input-group .form-control:not(:last-child) {
        border-radius: 0;
    }

.login-card .input-group:focus-within .input-group-addon {
    color: #1e1e1e;
    border-color: #1e1e1e;
}

.login-card .input-group-btn > .login-reveal {
    height: 48px;
    min-width: 48px;
    color: #888;
    border-radius: 0 12px 12px 0;
}

.login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0 16px;
    font-size: 14px;
}

.login-row--end {
    justify-content: flex-end;
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 500;
    cursor: pointer;
}

    .login-remember input[type=checkbox] {
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: #1e1e1e;
    }

.login-forgot {
    font-weight: 700;
    color: #a93439;
}

.login-card .loginError {
    float: none;
    margin: 0 0 14px;
    padding: 10px 12px;
    font-weight: 600;
    color: #a93439;
    background: rgba(199, 64, 41, .08);
    border-radius: 10px;
}

.login-hint {
    margin: -6px 0 14px;
    font-size: 13px;
    color: #777;
}

/* Forgot password: the first-time password, called out before anyone asks for a link. */
.login-firsttime {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 16px;
    padding: 12px 14px;
    background: #f5f5f7;
    border-radius: 12px;
}

    .login-firsttime .fa {
        flex: none;
        margin-top: 2px;
        font-size: 16px;
        color: #1e1e1e;
    }

    .login-firsttime p {
        margin: 0;
        font-size: 14px;
        line-height: 1.45;
        color: #333;
    }

.login-error-tips {
    margin: -6px 0 14px;
    padding-left: 20px;
    font-size: 13px;
    color: #666;
}

.login-submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    overflow: hidden;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(180deg, #2b2b2b, #111);
    border: 0;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}

    .login-submit:hover,
    .login-submit:focus {
        color: #fff;
        background: #000;
    }

.login-submit-arrow {
    transition: transform .2s ease;
}

.login-submit:hover .login-submit-arrow {
    transform: translateX(4px);
}

.login-help {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

    .login-help summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 32px;
        font-weight: 700;
        color: #333;
        list-style: none;
        cursor: pointer;
    }

        .login-help summary::-webkit-details-marker {
            display: none;
        }

        .login-help summary::after {
            content: "\f107";
            font-family: FontAwesome;
            color: #999;
            transition: transform .2s ease;
        }

    .login-help[open] summary::after {
        transform: rotate(180deg);
    }

    .login-help ul {
        margin-top: 6px;
        margin-bottom: 4px;
        font-size: 13px;
        color: #666;
    }

.login-faq {
    margin: 18px 0 0;
    color: #777;
    text-align: center;
}

.setup-step .setup-step-icon--ok {
    background: #188519;
    box-shadow: 0 8px 20px rgba(24, 133, 25, .3);
}

.setup-step .setup-step-icon--alert {
    background: #a93439;
    box-shadow: 0 8px 20px rgba(169, 52, 57, .3);
}

@media (prefers-reduced-motion: no-preference) {
    .login-card {
        animation: portal-rise .5s cubic-bezier(.2, .8, .2, 1) .1s both;
    }

        .login-card.has-error {
            animation: login-shake .5s cubic-bezier(.36, .07, .19, .97) .2s both;
        }

    .login-submit::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 60%;
        background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .25), transparent);
        transform: translateX(-120%);
        animation: portal-cta-shine 1.1s ease-in-out 1.4s both;
        pointer-events: none;
    }
}

@keyframes login-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(3px); }
    30%, 50%, 70% { transform: translateX(-6px); }
    40%, 60% { transform: translateX(6px); }
}

/* ---------------------------------------------------------------------------------------
   Log in: a three-scene loop over the portal's draws. Employee discounts (a Jordan-style
   high-top draws itself in and the EMPLOYEE PRICE tag swings on) whirls away; Raffles (a box
   draws in and a ticket drops through the slot) whooshes away; Company updates (documents
   flip, the news bubble pings) spins away. Portal.js runs the loop and the lean. With no
   script, or under prefers-reduced-motion, the discount scene shows fully drawn and still.
   No Swoosh, Wings or AIR JORDAN wordmark: those are Nike marks.
   --------------------------------------------------------------------------------------- */
.login-art {
    position: relative;
    width: 330px;
    margin: 10px 0 0 calc(50% - 165px);
}

/* Narrow phones (under 370px): the whole piece scales down rather than overflowing. */
@media (max-width: 369px) {
    .login-art {
        transform: scale(.86);
        transform-origin: 50% 0;
        margin-bottom: -34px;
    }
}

/* Clipped, so scenes leave through the edge and the streaks never widen the page. */
.login-art-stage {
    position: relative;
    height: 158px;
    overflow: hidden;
}

.login-art svg {
    display: block;
    overflow: visible;
}

.login-art text {
    font-family: inherit;
    font-weight: 800;
    text-anchor: middle;
}

.login-art-scene {
    position: absolute;
    inset: 0;
    visibility: hidden;
    opacity: 0;
}

    .login-art-scene.is-active {
        visibility: visible;
        opacity: 1;
    }

/* Discounts: the shoe and its tag */
.login-art-shoe,
.login-art-tagwrap,
.login-art-shadow {
    position: absolute;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

.login-art-shoe {
    left: 51px;
    top: 8px;
    width: 228px;
    height: 135px;
    transform: translate(calc(var(--px, 0) * 7px), calc(var(--py, 0) * 4px));
}

.login-art-shadow {
    left: 58px;
    top: 132px;
    width: 216px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .2), transparent);
    transform: translateX(calc(var(--px, 0) * -4px));
}

.login-art-tagwrap {
    left: 137px;
    top: 44px;
    width: 46px;
    height: 69px;
    transform: translate(calc(var(--px, 0) * 13px), calc(var(--py, 0) * 7px));
}

.login-art-tag-hop,
.login-art-tag {
    width: 46px;
    height: 69px;
    transform-origin: 50% 0;
}

.login-art-line {
    fill: none;
    stroke: #1e1e1e;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-art-thin {
    stroke-width: 1.1;
}

.login-art-lace {
    stroke-width: 3.4;
}

.login-art-detail {
    fill: none;
    stroke-linecap: round;
}

.login-art-tread {
    stroke: rgba(0, 0, 0, .22);
    stroke-width: 1;
}

.login-art-padding {
    stroke: #4a4a4a;
    stroke-width: 1.2;
}

.login-art-fold {
    stroke: #d8d8d8;
    stroke-width: 1;
}

.login-art-fill-white {
    fill: url(#login-art-white);
}

.login-art-fill-black {
    fill: #1e1e1e;
}

.login-art-fill-red {
    fill: url(#login-art-red);
}

.login-art-stitch {
    fill: none;
    stroke: #b5b5b5;
    stroke-width: .8;
    stroke-dasharray: 2.4 2;
}

.login-art-eyelet {
    fill: #5c0612;
}

.login-art-perf {
    fill: #9a9a9a;
}

.login-art-tongue-text {
    font-size: 3.6px;
    fill: #fff;
    letter-spacing: .15px;
}

.login-art-tag-body {
    fill: #a93439;
    stroke: #fff;
    stroke-width: 1.6;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
}

.login-art-tag-string {
    fill: none;
    stroke: #1e1e1e;
    stroke-width: 1.4;
}

.login-art-tag text {
    fill: #fff;
}

.login-art-scan {
    stroke: #ff3b2f;
    stroke-width: 1.4;
    opacity: 0;
    filter: drop-shadow(0 0 2px #ff3b2f);
}

/* Raffles: the box, the ticket and the sparkle */
.login-art-boxwrap {
    position: absolute;
    left: 90px;
    top: 38px;
    width: 150px;
    height: 112px;
    transform-origin: 50% 100%;
}

.login-art-box {
    width: 150px;
    height: 112px;
}

.login-art-box-top {
    fill: #f3f3f3;
}

.login-art-box-side {
    fill: #cfcfcf;
}

.login-art-box-label {
    fill: #a93439;
}

.login-art-box text {
    fill: #fff;
}

.login-art-box-slot {
    fill: none;
    stroke: #1e1e1e;
    stroke-width: 3.6;
    stroke-linecap: round;
}

/* The ticket is clipped at the slot, so it disappears into the box. */
.login-art-slotclip {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 74px;
    overflow: hidden;
}

.login-art-ticket-drop {
    position: absolute;
    left: 138px;
    top: 46px;
    width: 54px;
    height: 28px;
    transform: translateY(-22px);
}

.login-art-ticket {
    width: 54px;
    height: 28px;
}

.login-art-ticket-body {
    fill: #fff;
    stroke: #1e1e1e;
    stroke-width: 1.6;
}

.login-art-ticket-perf {
    fill: none;
    stroke: #1e1e1e;
    stroke-width: 1.2;
    stroke-dasharray: 2 2.4;
}

.login-art-ticket text {
    fill: #1e1e1e;
}

.login-art-ticket-small {
    opacity: .75;
}

.login-art-ticket-star {
    fill: #a93439;
}

.login-art-spark {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    fill: #a93439;
    opacity: 0;
}

/* Company updates: the documents and the news bubble */
.login-art-docs {
    position: absolute;
    left: 121px;
    top: 18px;
    width: 88px;
    height: 112px;
    perspective: 520px;
}

.login-art-doc {
    position: absolute;
    inset: 0;
    transform-origin: 50% 0;
    backface-visibility: hidden;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .12));
}

    .login-art-doc svg {
        width: 88px;
        height: 112px;
    }

.login-art-doc--3 {
    transform: translate(9px, 7px) rotate(5deg);
}

.login-art-doc--2 {
    transform: translate(4px, 3px) rotate(2deg);
}

.login-art-bubblewrap {
    position: absolute;
    left: 200px;
    top: 8px;
    width: 58px;
    height: 49px;
    transform-origin: 20% 90%;
}

.login-art-bubble {
    width: 58px;
    height: 49px;
}

.login-art-bubble-body {
    fill: #fff;
    stroke: #1e1e1e;
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.login-art-bubble-lines {
    fill: none;
    stroke: #c9c9c9;
    stroke-width: 2.6;
    stroke-linecap: round;
}

.login-art-dot {
    fill: #a93439;
    stroke: #fff;
    stroke-width: 1.5;
}

.login-art-ping {
    fill: none;
    stroke: #a93439;
    stroke-width: 1.5;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

/* Speed streaks between scenes */
.login-art-whoosh span {
    position: absolute;
    left: 50%;
    width: 130px;
    height: 2px;
    margin-left: -65px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(30, 30, 30, .35), transparent);
    opacity: 0;
}

    .login-art-whoosh span:nth-child(1) { top: 42px; }
    .login-art-whoosh span:nth-child(2) { top: 70px; width: 170px; margin-left: -85px; }
    .login-art-whoosh span:nth-child(3) { top: 96px; }
    .login-art-whoosh span:nth-child(4) { top: 120px; width: 90px; margin-left: -45px; }

/* Caption and progress dots */
.login-art-captions {
    position: relative;
    height: 44px;
    margin-top: 2px;
    text-align: center;
}

.login-art-caption {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
}

    .login-art-caption.is-active {
        opacity: 1;
        visibility: visible;
    }

    .login-art-caption strong {
        display: block;
        font-size: 17px;
        font-weight: 800;
        line-height: 1.3;
        color: #1e1e1e;
    }

    .login-art-caption span {
        display: block;
        font-size: 13px;
        color: #666;
    }

.login-art-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    height: 6px;
    margin-top: 4px;
}

    .login-art-dots span {
        width: 6px;
        height: 6px;
        border-radius: 3px;
        background: #d6d6d6;
        transition: width .3s ease, background-color .3s ease;
    }

        .login-art-dots span.is-active {
            width: 18px;
            background: #a93439;
        }

/* Before the loop starts (no script, or reduced motion) there is one scene and no dots. */
.login-art:not(.is-live) .login-art-dots {
    visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    .login-art-scene.is-active {
        animation: login-art-enter .35s ease-out both;
    }

    .login-art-caption.is-active {
        animation: login-art-caption-in .4s ease-out both;
    }

    .login-art-caption.is-leaving {
        animation: login-art-caption-out .35s ease-in both;
    }

    /* Discounts */
    .login-art-scene--discount.is-active .login-art-line {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: login-art-draw 1.1s cubic-bezier(.6, 0, .2, 1) forwards;
    }

    .login-art-scene--discount.is-active .login-art-fill,
    .login-art-scene--discount.is-active .login-art-detail,
    .login-art-scene--discount.is-active .login-art-stitch,
    .login-art-scene--discount.is-active .login-art-eyelet,
    .login-art-scene--discount.is-active .login-art-perf,
    .login-art-scene--discount.is-active .login-art-tongue-text {
        opacity: 0;
        animation: login-art-fade .5s ease 1.1s forwards;
    }

    .login-art-scene--discount.is-active .login-art-tag {
        opacity: 0;
        animation: login-art-swing 1.8s cubic-bezier(.3, .7, .3, 1) 1.45s forwards;
    }

    .login-art-scene--discount.is-active .login-art-scan {
        animation: login-art-scan 1.2s ease-in-out 3.4s both;
    }

    .login-art-scene--discount.is-leaving {
        animation: login-art-whirl-left .65s cubic-bezier(.5, 0, .75, 0) forwards;
    }

    /* Raffles */
    .login-art-scene--raffle.is-active .login-art-line {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: login-art-draw .9s cubic-bezier(.6, 0, .2, 1) forwards;
    }

    .login-art-scene--raffle.is-active .login-art-fill {
        opacity: 0;
        animation: login-art-fade .45s ease .8s forwards;
    }

    .login-art-scene--raffle.is-active .login-art-ticket-drop {
        animation: login-art-ticket-drop 2s cubic-bezier(.3, .6, .4, 1) 1.1s both;
    }

    .login-art-scene--raffle.is-active .login-art-boxwrap {
        animation: login-art-shake .45s ease-in-out 3.05s both;
    }

    .login-art-scene--raffle.is-active .login-art-spark {
        animation: login-art-spark .8s ease-out both;
    }

    .login-art-scene--raffle.is-leaving {
        animation: login-art-whirl-up .65s cubic-bezier(.5, 0, .75, 0) forwards;
    }

    /* Company updates */
    .login-art-scene--news.is-active .login-art-doc {
        animation: login-art-deal .5s cubic-bezier(.2, .8, .2, 1) both;
    }

    .login-art-scene--news.is-active .login-art-doc--2 {
        animation: login-art-deal-2 .5s cubic-bezier(.2, .8, .2, 1) .1s both, login-art-flip-2 .75s ease-in 2.45s forwards;
    }

    .login-art-scene--news.is-active .login-art-doc--3 {
        animation: login-art-deal-3 .5s cubic-bezier(.2, .8, .2, 1) .2s both;
    }

    .login-art-scene--news.is-active .login-art-doc--1 {
        animation: login-art-deal .5s cubic-bezier(.2, .8, .2, 1) both, login-art-flip .75s ease-in 1.5s forwards;
    }

    .login-art-scene--news.is-active .login-art-bubblewrap {
        opacity: 0;
        animation: login-art-pop .5s cubic-bezier(.3, 1.5, .5, 1) 3.25s forwards;
    }

    .login-art-scene--news.is-active .login-art-ping {
        animation: login-art-ping 2s ease-out 3.6s infinite;
    }

    .login-art-scene--news.is-leaving {
        animation: login-art-whirl-spin .65s cubic-bezier(.5, 0, .75, 0) forwards;
    }

    .login-art.is-whooshing .login-art-whoosh span {
        animation: login-art-streak .6s ease-out both;
    }

        .login-art.is-whooshing .login-art-whoosh span:nth-child(2) { animation-delay: .06s; }
        .login-art.is-whooshing .login-art-whoosh span:nth-child(3) { animation-delay: .12s; }
        .login-art.is-whooshing .login-art-whoosh span:nth-child(4) { animation-delay: .18s; }
}

@keyframes login-art-enter { from { opacity: 0; transform: scale(.92); } }
@keyframes login-art-caption-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes login-art-caption-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes login-art-draw { to { stroke-dashoffset: 0; } }
@keyframes login-art-fade { to { opacity: 1; } }

@keyframes login-art-swing {
    0% { opacity: 0; transform: rotate(38deg) translateY(-6px); }
    12% { opacity: 1; }
    32% { transform: rotate(-20deg); }
    52% { transform: rotate(11deg); }
    70% { transform: rotate(-5deg); }
    86% { transform: rotate(2deg); }
    100% { opacity: 1; transform: rotate(0); }
}

@keyframes login-art-scan {
    0%, 100% { opacity: 0; transform: translateY(0); }
    10% { opacity: 1; }
    45% { opacity: 1; transform: translateY(12px); }
    90% { opacity: 1; transform: translateY(0); }
}

@keyframes login-art-whirl-left {
    to { opacity: 0; transform: translateX(-150px) rotate(-24deg) scale(.5); filter: blur(3px); }
}

@keyframes login-art-whirl-up {
    to { opacity: 0; transform: translateY(-80px) rotate(12deg) scale(.6); filter: blur(3px); }
}

@keyframes login-art-whirl-spin {
    to { opacity: 0; transform: rotate(220deg) scale(.2); filter: blur(2px); }
}

@keyframes login-art-ticket-drop {
    0% { opacity: 0; transform: translate(110px, -60px) rotate(200deg) scale(.6); }
    20% { opacity: 1; }
    50% { transform: translate(0, -24px) rotate(-8deg) scale(1); }
    62% { transform: translate(0, -22px) rotate(0); }
    72% { transform: translate(0, -22px) rotate(0); }
    100% { opacity: 1; transform: translate(0, 32px); }
}

@keyframes login-art-shake {
    0%, 100% { transform: none; }
    25% { transform: rotate(-2.5deg); }
    50% { transform: rotate(2deg); }
    75% { transform: rotate(-1deg); }
}

@keyframes login-art-spark {
    0% { opacity: 0; transform: scale(0) rotate(0); }
    40% { opacity: 1; transform: scale(1.2) rotate(45deg); }
    100% { opacity: 0; transform: scale(.4) rotate(90deg) translateY(-8px); }
}

@keyframes login-art-deal { from { opacity: 0; transform: translateY(34px) rotate(-6deg); } }
@keyframes login-art-deal-2 { from { opacity: 0; transform: translate(4px, 37px) rotate(-4deg); } }
@keyframes login-art-deal-3 { from { opacity: 0; transform: translate(9px, 41px) rotate(-1deg); } }

@keyframes login-art-flip {
    0% { transform: rotateX(0); }
    100% { transform: rotateX(180deg); }
}

@keyframes login-art-flip-2 {
    0% { transform: translate(4px, 3px) rotate(2deg) rotateX(0); }
    100% { transform: translate(4px, 3px) rotate(2deg) rotateX(180deg); }
}

@keyframes login-art-pop {
    from { opacity: 0; transform: scale(.3); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes login-art-ping {
    0% { opacity: .9; transform: scale(1); }
    70%, 100% { opacity: 0; transform: scale(2.6); }
}

@keyframes login-art-streak {
    0% { opacity: 0; transform: translateX(170px); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: translateX(-170px); }
}

/* ---------------------------------------------------------------------------------------
   First-time setup steps (add your email, pick your uniform size) and the size picker
   (Views/Error/MissingEmailAddress.cshtml, Views/Account/UpdateUniformPreferences.cshtml,
   and the dashboard's Uniforms tab)
   --------------------------------------------------------------------------------------- */
.setup-step {
    max-width: 460px;
    margin: 26px auto 8px;
    padding: 26px 22px 18px;
    text-align: center;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);
}

    .setup-step h2 {
        margin: 14px 0 6px;
        font-size: 24px;
        font-weight: 800;
    }

    .setup-step p {
        font-size: 15px;
        color: #555;
    }

.setup-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    font-size: 24px;
    color: #fff;
    background: #1e1e1e;
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(30, 30, 30, .25);
}

.setup-step-actions {
    display: grid;
    gap: 14px;
    margin-top: 20px;
}

    .setup-step-actions .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 52px;
        margin: 0;
        border-radius: 14px;
    }

.setup-step-link {
    font-weight: 700;
}

/* The reset confirmation's guidance for people a link can't reach. */
.setup-step-callout {
    margin: 14px 0 6px;
    padding: 12px 14px;
    text-align: left;
    background: #f5f5f7;
    border-radius: 12px;
}

    .setup-step .setup-step-callout p {
        margin: 0;
        font-size: 14px;
        line-height: 1.45;
        color: #333;
    }

        .setup-step .setup-step-callout p + p {
            margin-top: 8px;
        }

.setup-step p.setup-step-note {
    font-size: 13px;
    color: #777;
}

.setup-step-form {
    margin-top: 16px;
    text-align: left;
}

    .setup-step-form .form-control {
        height: 48px;
        font-size: 16px;
        border-radius: 12px;
    }

    .setup-step-form .discount-cta {
        margin-top: 14px;
    }

.size-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 6px 0 4px;
}

.size-option {
    position: relative;
    margin: 0;
    font-weight: 700;
    cursor: pointer;
}

    .size-option input {
        position: absolute;
        opacity: 0;
    }

    .size-option span {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 48px;
        color: #333;
        background: #fff;
        border: 2px solid #e3e3e3;
        border-radius: 12px;
        transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .2s cubic-bezier(.2, .9, .3, 1.4);
    }

    .size-option:active span {
        transform: scale(.95);
    }

    .size-option input:checked + span {
        color: #fff;
        background: #1e1e1e;
        border-color: #1e1e1e;
        transform: scale(1.04);
    }

    .size-option input:focus-visible + span {
        outline: 2px solid #a93439;
        outline-offset: 2px;
    }

.size-options--compact .size-option span {
    height: 42px;
}

.uniform-size-card {
    margin-bottom: 18px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 18px rgba(0, 0, 0, .05);
}

.uniform-size-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}

    .uniform-size-head h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
    }

.uniform-size-current {
    font-weight: 800;
    color: #1e1e1e;
}

.uniform-size-save {
    min-height: 44px;
    margin-top: 10px;
}

.uniform-history-title {
    margin: 4px 0 10px;
    font-size: 16px;
    font-weight: 700;
}

/* ---------------------------------------------------------------------------------------
   Tablets in portrait (768-991px, e.g. iPad): the full top menu doesn't fit on one line there
   and wrapped under the logo, over the page. They get the phone layout instead: the menu
   button and the bottom tab bar. Landscape tablets and computers keep the full top menu.
   (Bootstrap 3 only collapses the navbar below 768px, hence the overrides.)
   --------------------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
    .navbar-header {
        float: none;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    }

        .navbar-collapse.collapse {
            display: none !important;
        }

            .navbar-collapse.collapse.in {
                display: block !important;
                overflow-y: auto !important;
            }

    .container > .navbar-collapse {
        margin-right: -15px;
        margin-left: -15px;
    }

    .navbar-nav,
    .navbar-right {
        float: none !important;
        margin: 7.5px 0;
    }

        .navbar-nav > li {
            float: none;
        }

            .navbar-nav > li > a {
                padding-top: 10px;
                padding-bottom: 10px;
            }

    .navbar-nav.navbar-right:last-child {
        margin-right: 0;
    }

    /* The bar spans the screen; the tabs stay a thumb's width apart in the middle. */
    .tab-bar {
        justify-content: center;
    }

    .tab-bar-item {
        max-width: 132px;
    }
}

/* ---------------------------------------------------------------------------------------
   Phones and tablets: no menu button. Signed in, the tab bar is the navigation (Help, Admin
   Tools and Log Out are on the Account page); signed out, the pages link to each other (log
   in, forgot password, FAQ). Same bar on every page.
   --------------------------------------------------------------------------------------- */
@media (max-width: 991px) {
    body .navbar-toggle {
        display: none;
    }

    body .navbar-collapse.collapse {
        display: none !important;
    }
}

/* The month links land on the transactions, below the navbar. */
.dash-history {
    scroll-margin-top: 70px;
}

/* ---------------------------------------------------------------------------------------
   Account page: Help, Admin Tools and Log Out as a settings-style list
   --------------------------------------------------------------------------------------- */
.account-links {
    margin: 6px 0 24px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
}

.account-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 12px 16px;
    font-weight: 600;
    color: #1e1e1e;
    text-decoration: none;
    border-top: 1px solid #efefef;
    transition: background-color .15s ease;
}

    .account-link:first-child {
        border-top: 0;
    }

    .account-link:hover,
    .account-link:focus {
        color: #1e1e1e;
        text-decoration: none;
        background: #f7f7f7;
    }

    .account-link:active {
        background: #efefef;
    }

.account-link-icon {
    width: 20px;
    font-size: 17px;
    color: #777;
    text-align: center;
}

.account-link-text {
    flex: 1 1 auto;
}

.account-link--logout,
.account-link--logout:hover,
.account-link--logout:focus {
    color: #a93439;
}

    .account-link--logout .account-link-icon {
        color: #a93439;
    }

/* ---------------------------------------------------------------------------------------
   Phones and tablets, signed in or out: the top bar is just the brand, centred: the DTLR
   wordmark, a hairline, and EMPLOYEE PORTAL (the login page's tagline).
   --------------------------------------------------------------------------------------- */
.navbar-tagline {
    display: none;
}

@media (max-width: 991px) {
    body .navbar-header {
        display: flex;
        float: none;
        align-items: center;
        justify-content: center;
        height: 50px;
    }

    body .navbar-header .navbar-brand {
        display: flex;
        float: none;
        align-items: center;
        height: 50px;
        margin: 0 !important;
        padding: 0;
    }

        body .navbar-header .navbar-brand img {
            height: 26px;
        }

    body .navbar-tagline {
        display: inline-block;
        margin-left: 12px;
        padding-left: 12px;
        font-size: 11px;
        font-weight: 700;
        line-height: 20px;
        letter-spacing: .28em;
        text-transform: uppercase;
        white-space: nowrap;
        color: rgba(255, 255, 255, .72);
        border-left: 1px solid rgba(255, 255, 255, .3);
    }
}

/* New hires, on every signed-in page until their discount starts (Views/Shared/_Layout.cshtml): a
   full-width band under the menu, so it reads as a notice for the whole portal rather than part of
   the page below it. Phones: the date and countdown sit under the label. Wider: one centred line. */
.newhire-strip {
    background: #eaf5ea;
    border-bottom: 1px solid #d2e7d2;
    view-transition-name: portal-newhire;
}

.newhire-strip-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.newhire-strip-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 15px;
    color: #fff;
    background: #188519;
    border-radius: 10px;
}

.newhire-strip-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.newhire-strip-label {
    font-size: 13px;
    color: #3f5e3f;
}

.newhire-strip-when {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

    .newhire-strip-when strong {
        font-size: 15px;
        color: #1e1e1e;
    }

.newhire-strip-count {
    padding: 2px 9px;
    font-size: 12px;
    font-weight: 700;
    color: #188519;
    white-space: nowrap;
    background: #fff;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px #cde5cd;
}

@media (min-width: 768px) {
    .newhire-strip-inner {
        justify-content: center;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .newhire-strip-text {
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }

    .newhire-strip-label {
        font-size: 15px;
        color: #1e1e1e;
    }
}

/* The request page's link to change the delivery email. */
.delivery-manage {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 14px;
    font-weight: 600;
    color: #a93439;
    white-space: nowrap;
}

    .delivery-manage:hover,
    .delivery-manage:focus {
        color: #7e272b;
    }

/* ---------------------------------------------------------------------------------------
   Raffles (Views/Home/Raffles.cshtml): the open styles at a glance, then the slider
   --------------------------------------------------------------------------------------- */
.raffle-strip {
    display: flex;
    gap: 10px;
    margin: 0 -15px 14px;
    padding: 4px 15px 10px;
    overflow-x: auto;
    scroll-padding: 0 15px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .raffle-strip::-webkit-scrollbar {
        display: none;
    }

.raffle-chip {
    position: relative;
    display: flex;
    flex: 0 0 150px;
    flex-direction: column;
    gap: 4px;
    padding: 8px 8px 10px;
    text-align: left;
    background: #fff;
    border: 2px solid #e6e6e6;
    border-radius: 16px;
    scroll-snap-align: start;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    -webkit-tap-highlight-color: transparent;
}

    .raffle-chip:active {
        transform: scale(.97);
    }

    .raffle-chip.is-active {
        border-color: #1e1e1e;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
    }

    .raffle-chip:focus-visible {
        outline: 2px solid #a93439;
        outline-offset: 2px;
    }

.raffle-chip-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 86px;
    overflow: hidden;
    background: #f4f4f4;
    border-radius: 11px;
}

    .raffle-chip-image img {
        max-width: 100%;
        max-height: 86px;
    }

.raffle-chip-name {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    color: #1e1e1e;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.raffle-chip-meta {
    font-size: 12px;
    color: #777;
}

.raffle-chip-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #188519;
    border-radius: 999px;
}

/* The slide: a card like the rest of the portal, with the details as a clean list. */
.raffles-page .swiper-container {
    padding-bottom: 36px;
}

.raffles-page .swiper-slide {
    min-height: 0;
    padding: 16px 12px 20px;
    font-size: 15px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 18px;
}

    .raffles-page .swiper-slide img {
        max-height: 280px;
        border-radius: 14px;
        box-shadow: none;
    }

    .raffles-page .swiper-slide .releaseImageContainer,
    .raffles-page .swiper-slide .releaseDetailsContainer {
        margin-right: 8px;
        margin-left: 8px;
    }

    .raffles-page .swiper-slide .releaseImageContainer .bannerOverlay {
        overflow: hidden;
        background: #f4f4f4;
        border-radius: 14px;
    }

    .raffles-page .swiper-slide .releaseImageContainer h4 {
        top: auto;
        bottom: 0;
    }

        .raffles-page .swiper-slide .releaseImageContainer h4 span {
            padding: 24px 12px 10px;
            font-size: 16px;
            letter-spacing: 0;
            text-align: left;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .78));
            border-radius: 0;
        }

    .raffles-page .swiper-slide .releaseDetailsContainer table {
        margin-bottom: 14px;
        border: 0;
    }

        .raffles-page .swiper-slide .releaseDetailsContainer table td {
            padding: 9px 4px;
            border: 0;
            border-bottom: 1px solid #efefef;
        }

            .raffles-page .swiper-slide .releaseDetailsContainer table td:first-child {
                width: 40%;
                color: #777;
            }

    .raffles-page .swiper-slide .input-group-addon {
        min-width: 128px;
        font-size: 13px;
        font-weight: 600;
        color: #555;
        text-align: left;
        background: #f6f6f6;
        border-radius: 12px 0 0 12px;
    }

    .raffles-page .swiper-slide .input-group .form-control {
        height: 44px;
        border-radius: 0 12px 12px 0;
    }

    .raffles-page .swiper-slide .registerEvent,
    .raffles-page .swiper-slide .disabledButton {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 50px;
        font-weight: 700;
        border: 0;
        border-radius: 14px;
    }

    .raffles-page .swiper-slide .registerEvent {
        color: #fff;
        background: #1e1e1e;
        box-shadow: 0 6px 16px rgba(30, 30, 30, .25);
    }

        .raffles-page .swiper-slide .registerEvent:hover,
        .raffles-page .swiper-slide .registerEvent:focus {
            background: #000;
        }

    .raffles-page .swiper-slide .disabledButton {
        color: #188519;
        background: rgba(24, 133, 25, .1);
        opacity: 1;
    }

.raffles-page .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #bbb;
    opacity: 1;
    transition: width .25s ease, background-color .25s ease;
}

.raffles-page .swiper-pagination-bullet-active {
    width: 22px;
    background: #1e1e1e;
    border-radius: 999px;
}

.raffles-page .swiper-button-next,
.raffles-page .swiper-button-prev {
    top: 96px;
    width: 38px;
    height: 38px;
    margin-top: 0;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

    .raffles-page .swiper-button-next::after,
    .raffles-page .swiper-button-prev::after {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        font-family: FontAwesome;
        font-size: 20px;
        color: #1e1e1e;
    }

    .raffles-page .swiper-button-next::after {
        content: "\f105";
    }

    .raffles-page .swiper-button-prev::after {
        content: "\f104";
    }

.raffles-page .swiper-button-disabled {
    opacity: 0;
}

.raffles-empty {
    padding: 34px 20px;
    text-align: center;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 18px;
}

    .raffles-empty h3 {
        margin: 14px 0 6px;
        font-weight: 800;
    }

    .raffles-empty p {
        color: #666;
    }

.raffles-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    font-size: 24px;
    color: #fff;
    background: #1e1e1e;
    border-radius: 18px;
}

/* What someone entered a raffle with (Views/Home/Raffles.cshtml, and after registering). */
.raffle-entry {
    padding: 14px 16px;
    text-align: left;
    background: rgba(24, 133, 25, .07);
    border: 1px solid rgba(24, 133, 25, .25);
    border-radius: 14px;
}

.raffle-entry-head {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 800;
    color: #188519;
}

.raffle-entry-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    margin: 0 0 10px;
    font-size: 14px;
}

    .raffle-entry-list dt {
        font-weight: 600;
        color: #666;
    }

    .raffle-entry-list dd {
        margin: 0;
        font-weight: 700;
        color: #1e1e1e;
    }

/* Bootstrap's .btn-block display beats the plain [hidden] rule. */
.raffle-entry [hidden] {
    display: none !important;
}

.raffle-entry-change {
    min-height: 44px;
    font-weight: 700;
    color: #1e1e1e;
    background: #fff;
    border: 1px solid #d6d6d6;
    border-radius: 12px;
}

    .raffle-entry-change:hover,
    .raffle-entry-change:focus {
        color: #1e1e1e;
        background: #f6f6f6;
    }

.raffle-entry-edit {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(24, 133, 25, .2);
}

    .raffle-entry-edit .form-control {
        height: 44px;
        margin-bottom: 10px;
        font-size: 16px;
        border-radius: 12px;
    }

.raffle-entry-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.raffle-entry-save {
    flex: 1 1 auto;
    min-height: 46px;
    font-weight: 700;
    color: #fff;
    background: #1e1e1e;
    border: 0;
    border-radius: 12px;
}

    .raffle-entry-save:hover,
    .raffle-entry-save:focus {
        color: #fff;
        background: #000;
    }

.raffle-entry-error {
    margin-bottom: 10px;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 600;
    color: #a93439;
    background: rgba(169, 52, 57, .08);
    border-radius: 10px;
}

@media (prefers-reduced-motion: no-preference) {
    .raffle-entry.is-updated {
        animation: raffle-entry-saved 1.1s ease-out;
    }
}

@keyframes raffle-entry-saved {
    0% { box-shadow: 0 0 0 0 rgba(24, 133, 25, .45); }
    100% { box-shadow: 0 0 0 14px rgba(24, 133, 25, 0); }
}

/* Six tabs on a phone: smaller labels and icons so each keeps a full word. */
@media (max-width: 419px) {
    .tab-bar {
        padding-right: 2px;
        padding-left: 2px;
    }

    .tab-bar-item {
        gap: 3px;
        padding-right: 0;
        padding-left: 0;
    }

        .tab-bar-item .fa {
            font-size: 20px;
        }

    .tab-bar-label {
        font-size: 10px;
        letter-spacing: -.01em;
    }
}

@media (max-width: 349px) {
    .tab-bar-label {
        font-size: 9px;
    }
}

/* ---------------------------------------------------------------------------------------
   App feel on phones. No rubber-band bounce past the top or bottom of the page (iOS 16+,
   Android), so the fixed bars stay put. With viewport-fit=cover (layout) the tab bar runs to the
   bottom edge of the installed app while content keeps clear of the notch in landscape. Chrome
   on iOS draws its own toolbar under the page, and no site can restyle or hide it; the installed
   app (Share, then Add to Home Screen) has no browser bars at all.
   --------------------------------------------------------------------------------------- */
@media (max-width: 991px) {
    html,
    body {
        overscroll-behavior-y: none;
    }
}

.navbar-fixed-top > .container,
.body-content {
    padding-right: max(15px, env(safe-area-inset-right));
    padding-left: max(15px, env(safe-area-inset-left));
}

/* Desktop: EMPLOYEE PORTAL beside the logo from 1200px, tucked under it at 992-1199px where the
   menu leaves no room beside it. */
@media (min-width: 992px) {
    .navbar-header {
        position: relative;
    }

    .navbar-tagline {
        position: absolute;
        right: 0;
        bottom: 8px;
        left: 0;
        display: block;
        padding: 0 15px;
        font-size: 7.5px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .2em;
        text-transform: uppercase;
        white-space: nowrap;
        color: rgba(255, 255, 255, .62);
        pointer-events: none;
    }

    .navbar-header .navbar-brand {
        padding-top: 11px;
        padding-bottom: 19px;
    }
}

@media (min-width: 1200px) {
    .navbar-tagline {
        position: static;
        float: left;
        margin: 20px 18px 0 0;
        padding: 0 0 0 14px;
        font-size: 11px;
        line-height: 20px;
        letter-spacing: .28em;
        color: rgba(255, 255, 255, .72);
        border-left: 1px solid rgba(255, 255, 255, .3);
    }

    .navbar-header .navbar-brand {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

/* The desktop bar is 60px plus its 1px border (the brand's padding above), so the page starts
   below it rather than 11px under it (Site.css assumes Bootstrap's 50px). */
@media (min-width: 992px) {
    body {
        padding-top: 61px;
    }
}

/* ---------------------------------------------------------------------------------------
   Transaction history (Views/Home/Index.cshtml): a month switcher. Portal.js swaps the month in
   place, sliding it in from the side that was tapped; without script the arrows are links.
   --------------------------------------------------------------------------------------- */
.dash-month {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 12px;
}

.dash-month-name {
    font-size: 16px;
    font-weight: 800;
    color: #1e1e1e;
}

.dash-month-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #1e1e1e;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 12px;
    transition: background-color .15s ease, transform .15s ease;
    -webkit-tap-highlight-color: transparent;
}

    .dash-month-step:hover,
    .dash-month-step:focus {
        color: #1e1e1e;
        text-decoration: none;
        background: #f4f4f4;
    }

    .dash-month-step:active {
        transform: scale(.94);
    }

    .dash-month-step.is-disabled {
        opacity: .35;
        pointer-events: none;
    }

.dash-history.is-loading .table {
    opacity: .45;
    transition: opacity .15s ease;
}

@media (prefers-reduced-motion: no-preference) {
    .dash-history.is-swapped-prev .table {
        animation: dash-month-in-prev .28s cubic-bezier(.2, .8, .2, 1) both;
    }

    .dash-history.is-swapped-next .table {
        animation: dash-month-in-next .28s cubic-bezier(.2, .8, .2, 1) both;
    }
}

@keyframes dash-month-in-prev {
    from { opacity: 0; transform: translateX(-18px); }
}

@keyframes dash-month-in-next {
    from { opacity: 0; transform: translateX(18px); }
}

/* ---------------------------------------------------------------------------------------
   Raffles (Views/Home/Raffles.cshtml): photos in a fixed frame with a sneaker outline when one
   is missing, and an entry form that fits a phone. The pickup store is a line (HomeController
   narrows it to the employee's own), sizes are chips, and the backup size is optional.
   --------------------------------------------------------------------------------------- */
.raffle-chip-image {
    position: relative;
}

.raffles-page .swiper-slide .releaseImageContainer .bannerOverlay {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
}

.raffles-page .swiper-slide .releaseImageContainer .imagePop {
    display: block;
    width: 100%;
    height: 100%;
}

/* The shop's product shots are portrait (about 393 x 500) with the shoe centred, so they fill the
   frame (cover) instead of sitting in it with grey bands either side. */
.raffles-page .swiper-slide .releaseImageContainer .bannerOverlay img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
}

.raffle-chip-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.raffle-no-photo {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-bottom: 46px;
}

.raffle-chip-image .raffle-no-photo {
    padding-bottom: 0;
}

.raffle-no-photo-shoe {
    width: 58%;
    max-width: 230px;
    height: auto;
    fill: #d9d9d9;
}

.raffle-chip-image .raffle-no-photo-shoe {
    width: 78%;
}

.raffle-no-photo-text {
    font-size: 13px;
    font-weight: 700;
    color: #9a9a9a;
}

/* As specific as the frame rules above, so a missing photo's link and broken image really go. */
.raffle-chip-image.is-missing > img,
.raffles-page .swiper-slide .releaseImageContainer .bannerOverlay.is-missing > .imagePop {
    display: none;
}

.raffle-chip-image.is-missing > .raffle-no-photo,
.raffles-page .swiper-slide .releaseImageContainer .bannerOverlay.is-missing > .raffle-no-photo {
    display: flex;
}

.raffle-form {
    text-align: left;
}

    .raffle-form [hidden] {
        display: none !important;
    }

.raffle-price-note {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    color: #6b6b6b;
}

.raffle-pickup {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 2px 0 14px;
    padding: 11px 12px;
    font-size: 14px;
    line-height: 1.35;
    color: #444;
    background: #f5f5f5;
    border-radius: 12px;
}

    .raffle-pickup .fa {
        margin-top: 1px;
        font-size: 17px;
        color: #a93439;
    }

.raffle-field {
    min-width: 0;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}

    .raffle-field legend {
        display: block;
        width: auto;
        margin: 0 0 6px;
        padding: 0;
        font-size: 13px;
        line-height: inherit;
        border: 0;
    }

    .raffle-field .form-control {
        height: 48px;
        font-size: 16px;
        border-radius: 12px;
    }

.raffle-entry-edit > .login-label {
    display: block;
    margin: 10px 0 6px;
}

.size-options--shoe {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

    .size-options--shoe .size-option span {
        height: 44px;
        font-size: 14px;
    }

.size-option--none span {
    font-weight: 600;
    color: #777;
}

.size-option.is-disabled {
    cursor: not-allowed;
}

    .size-option.is-disabled span {
        color: #c4c4c4;
        background: #f6f6f6;
        border-style: dashed;
    }

.raffle-backup {
    margin: 2px 0 14px;
}

    .raffle-backup summary {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        font-weight: 700;
        color: #1e1e1e;
        list-style: none;
        cursor: pointer;
    }

        .raffle-backup summary::-webkit-details-marker {
            display: none;
        }

        .raffle-backup summary::before {
            content: "\f067";
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            font-family: FontAwesome;
            font-size: 10px;
            color: #1e1e1e;
            background: #efefef;
            border-radius: 50%;
        }

    .raffle-backup[open] summary::before {
        content: "\f068";
    }

.raffle-backup-optional {
    font-size: 13px;
    font-weight: 500;
    color: #888;
}

.raffle-form-error {
    margin: 0 0 12px;
    padding: 10px 12px;
    font-weight: 600;
    color: #a93439;
    background: rgba(199, 64, 41, .08);
    border-radius: 10px;
}

.raffle-busy {
    margin-right: 8px;
}

/* ---------------------------------------------------------------------------------------
   Footer (Views/Shared/_Layout.cshtml). The page fills the screen, so on a short page the
   copyright sits below the fold instead of floating under the content. On phones and tablets,
   signed in, the tab bar replaces the footer and the copyright shows once, at the bottom of
   My Account (.account-copyright), the way an app keeps it on its settings screen.
   --------------------------------------------------------------------------------------- */
.site-main {
    min-height: calc(100vh - 50px);
    min-height: calc(100svh - 50px);
}

.account-copyright {
    display: none;
}

@media (max-width: 991px) {
    body.has-tab-bar .site-main {
        min-height: 0;
    }

    body.has-tab-bar .site-footer-rule,
    body.has-tab-bar .site-footer {
        display: none;
    }

    body.has-tab-bar .account-copyright {
        display: block;
        margin: 22px 0 4px;
        font-size: 12px;
        color: #9a9a9a;
        text-align: center;
    }
}

/* ---------------------------------------------------------------------------------------
   Dashboard balance: when it was read, with the date, and a live clock (Views/Home/Index.cshtml,
   Portal.js). A screenshot freezes the seconds and shows its own day, so an old or copied one is
   easy to spot at the register. The ID card itself is untouched.
   --------------------------------------------------------------------------------------- */
.usage-meter-when {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.usage-meter-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: #188519;
    font-variant-numeric: tabular-nums;
}

    .usage-meter-live[hidden] {
        display: none;
    }

.usage-meter-live-dot {
    width: 7px;
    height: 7px;
    background: #188519;
    border-radius: 50%;
}

@media (prefers-reduced-motion: no-preference) {
    .usage-meter-live-dot {
        animation: usage-live-pulse 1.6s ease-out infinite;
    }
}

@keyframes usage-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(24, 133, 25, .55); }
    100% { box-shadow: 0 0 0 7px rgba(24, 133, 25, 0); }
}