/* Phone layout as an app (2-11-2026).
   Everything that changes the look is inside the media query below (up to 767 px), so desktop
   and tablet stay exactly as they were. The markup and the Knockout bindings are the same as on
   desktop: every option of the site keeps working, only the layout differs.
   Goes with Views/Partials/MobileTabBar.cshtml and scripts/mobile-app.js.
   Design: claude/mobiel-app-ontwerp.md (project docs). */

/* Parts that only exist for the phone layout. */
.m-tabbar,
.m-view-head,
.m-acct-signout,
.sh-myaccount,
.m-acct-card,
.m-acct-hello,
.m-acct-bonus,
.m-hero-cta,
.m-list-head,
.m-login-intro,
.m-line,
.m-sheet-head,
.m-sheet-backdrop,
.m-quick-pick {
    display: none;
}

@media screen and (max-width: 767px) {
    :root {
        --m-green: #3ECD43;
        --m-green-dark: #2FAE34;
        --m-forest: #1F3A1E;
        --m-gold: #F2B705;
        --m-orange: #F28C1B;
        --m-ground: #F1F3EF;
        --m-line: #DCE3D9;
        --m-text: #1B2419;
        --m-muted: #5B6758;
        --m-tabbar: 64px;
        --m-safe: env(safe-area-inset-bottom, 0px);
    }

    body {
        padding-bottom: calc(var(--m-tabbar) + var(--m-safe));
        -webkit-tap-highlight-color: transparent;
    }

    /* ---------- Tab bar ---------- */
    .m-tabbar {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(var(--m-tabbar) + var(--m-safe));
        padding-bottom: var(--m-safe);
        box-sizing: border-box;
        background: #fff;
        border-top: 1px solid var(--m-line);
        box-shadow: 0 -4px 16px rgba(20, 40, 20, .06);
        z-index: 999; /* under the popups (1000) */
    }
    .m-tab {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 4px 3px;
        color: var(--m-muted);
        text-decoration: none;
        font: 500 11.5px/1.15 'Montserrat', sans-serif;
        text-align: center;
    }
    .m-tab > span:last-child {
        max-width: 100%;
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .m-tab.active {
        color: #1F7A23;
        font-weight: 700;
    }
    .m-tab svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .m-tab-icon {
        position: relative;
        display: flex;
    }
    .m-tab-badge {
        position: absolute;
        top: -6px;
        right: -12px;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        box-sizing: border-box;
        border-radius: 9px;
        background: var(--m-orange);
        color: #1B1B1B;
        font: 700 11px/18px 'Montserrat', sans-serif;
        text-align: center;
    }

    /* Things that sat at the bottom of the screen move up above the tab bar. */
    .ja-card {
        bottom: calc(var(--m-tabbar) + var(--m-safe)) !important;
    }
    #chat-widget-container {
        bottom: calc(var(--m-tabbar) + var(--m-safe)) !important;
    }
    /* The tab bar has the cart; the floating badge is not needed. */
    .div-order-badge {
        display: none !important;
    }

    /* ---------- Buttons: big enough to tap ---------- */
    .btn-green,
    .btn-orange,
    .btn-form-green {
        border-radius: 10px;
    }

    /* ---------- Home: lottery list as cards ---------- */
    .div-jackpot {
        margin: 0 !important;
        padding: 0 12px;
    }
    .div-jackpot-header {
        display: none !important;
    }
    .div-jackpot-row {
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        height: auto !important;
        width: auto !important;
        box-sizing: border-box;
        margin: 0 0 10px 0 !important;
        padding: 10px 10px 10px 12px !important;
        background: #fff;
        border: 1px solid var(--m-line) !important;
        border-radius: 16px;
        box-shadow: none !important;
    }
    .div-jackpot-row > div {
        float: none !important;
        width: auto !important;
        height: auto !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: normal !important;
    }
    .div-jackpot-row > div:nth-child(1) img {
        width: 48px !important;
        height: 48px !important;
        margin: 0 !important;
    }
    .div-jackpot-row > div:nth-child(2) {
        display: block !important;
        font: 500 17px/1.25 'Oswald', sans-serif;
        text-transform: uppercase;
    }
    .div-jackpot-row > div:nth-child(2) .spn-jackpot,
    .div-jackpot-row > div:nth-child(2) > span:last-child {
        display: inline-block !important;
        position: static !important;
    }
    .div-jackpot-row > div:nth-child(2) .spn-jackpot {
        font: 700 16px/1.3 'Montserrat', sans-serif;
        text-transform: none;
    }
    .div-jackpot-row > div:nth-child(2) > span:last-child {
        font: 400 12px/1.3 'Montserrat', sans-serif;
        color: var(--m-muted);
        font-variant-numeric: tabular-nums;
        text-transform: none;
    }
    .div-jackpot-row > div:nth-child(2) > span:last-child img {
        position: static !important;
        width: 12px;
        height: 12px;
        margin: 0 4px 0 0;
        vertical-align: -1px;
    }
    .div-jackpot-row > div:nth-child(3),
    .div-jackpot-row > div:nth-child(4),
    .div-jackpot-row > div:nth-child(5) {
        display: none !important;
    }
    .div-jackpot-row > div:nth-child(6) {
        display: flex !important;
        flex-direction: column;
        gap: 6px;
        width: 96px !important;
    }
    .div-jackpot-row > div:nth-child(6) .btn-green {
        display: block;
        width: 100%;
        min-width: 0;
        height: 38px;
        line-height: 38px;
        padding: 0;
        text-align: center;
        font: 700 15px/38px 'Oswald', sans-serif;
        text-transform: uppercase;
    }
    .m-quick-pick {
        display: block;
        height: 32px;
        line-height: 29px;
        box-sizing: border-box;
        border: 1.5px solid var(--m-orange);
        border-radius: 10px;
        background: #FFF4E6;
        color: #7A3E00 !important;
        font: 700 12px/29px 'Oswald', sans-serif;
        text-transform: uppercase;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
    }

    /* ---------- Play page: lottery list ---------- */
    #lottery-picker .div-lottery-picker {
        margin: 0 !important;
        padding: 0 !important;
    }
    #lottery-picker .spn-select-lottery {
        margin: 4px 0 12px 0 !important;
    }
    .div-lottery-panel-header {
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 10px;
        row-gap: 6px;
        height: auto !important;
        box-sizing: border-box;
        margin: 0 0 10px 0;
        padding: 10px 10px 10px 12px;
        background: #fff !important;
        border: 1px solid var(--m-line) !important;
        border-radius: 16px;
    }
    .div-lottery-panel-header > div {
        float: none !important;
        height: auto !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        white-space: normal !important;
    }
    .div-lottery-panel-header > div:nth-child(1),
    .div-lottery-panel-header > div:nth-child(4),
    .div-lottery-panel-header > div:nth-child(5) {
        display: none !important;
    }
    .div-lottery-panel-header > div:nth-child(2) {
        grid-column: 1;
        grid-row: 1 / span 2;
    }
    .div-lottery-panel-header > div:nth-child(2) img {
        width: 48px !important;
        height: 48px !important;
        margin: 0 !important;
    }
    .div-lottery-panel-header > div:nth-child(3) {
        grid-column: 2;
        grid-row: 1 / span 2;
        font: 500 17px/1.25 'Oswald', sans-serif !important;
    }
    .div-lottery-panel-header > div:nth-child(3) .spn-jackpot,
    .div-lottery-panel-header > div:nth-child(3) > span:last-child {
        display: inline-block !important;
        position: static !important;
    }
    .div-lottery-panel-header > div:nth-child(3) .spn-jackpot {
        font: 700 16px/1.3 'Montserrat', sans-serif !important;
        text-transform: none;
    }
    .div-lottery-panel-header > div:nth-child(3) > span:last-child {
        font: 400 12px/1.3 'Montserrat', sans-serif !important;
        color: var(--m-muted);
        text-transform: none;
        font-variant-numeric: tabular-nums;
    }
    .div-lottery-panel-header > div:nth-child(3) > span:last-child img {
        position: static !important;
        width: 12px;
        height: 12px;
        margin: 0 4px 0 0;
        vertical-align: -1px;
    }
    .div-lottery-panel-header > div:nth-child(7) {
        grid-column: 3;
        grid-row: 1;
    }
    .div-lottery-panel-header > div:nth-child(6) {
        grid-column: 3;
        grid-row: 2;
    }
    .div-lottery-panel-header .btn-play-now {
        display: block;
        width: 96px;
        min-width: 0 !important;
        height: 38px;
        line-height: 38px;
        padding: 0;
        text-align: center;
        font: 700 15px/38px 'Oswald', sans-serif;
        text-transform: uppercase;
    }
    .div-lottery-panel-header .btn-quick-pick {
        display: block;
        width: 96px;
        height: 32px;
        line-height: 29px;
        box-sizing: border-box;
        border: 1.5px solid var(--m-orange);
        background: #FFF4E6 !important;
        color: #7A3E00 !important;
        font: 700 12px/29px 'Oswald', sans-serif;
        text-align: center;
    }

    /* ---------- Play page: the open lottery ---------- */
    .div-lottery-panel {
        margin: -4px 0 14px 0;
        padding: 14px !important;
        box-sizing: border-box;
        border: 1px solid var(--m-line);
        border-radius: 16px;
        background: #fff;
    }
    .div-lottery-panel > div {
        width: 100% !important;
        float: none !important;
    }
    .div-lottery-panel .title {
        margin: 16px 0 8px 0;
        font: 700 16px/1.2 'Oswald', sans-serif;
        text-transform: uppercase;
    }
    .spn-help {
        width: 36px;
        height: 36px;
        line-height: 36px;
        border-radius: 18px;
        text-align: center;
    }

    /* Quick pick +1 ... +12: one orange block with big buttons. */
    .div-lottery-panel > .col-40:nth-child(2) > div {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
        margin: 10px 0 4px 0;
        padding: 12px;
        background: #FFF4E6;
        border: 1px solid #F5C58A;
        border-radius: 14px;
    }
    .div-lottery-panel > .col-40:nth-child(2) .btn-quick-pick-panel {
        grid-column: 1 / -1;
        float: none;
        width: auto;
        height: 40px;
        line-height: 40px;
        margin: 0 0 4px 0;
        border-radius: 10px;
        font: 700 15px/40px 'Oswald', sans-serif;
    }
    .div-lottery-panel .spn-quick-pick {
        float: none;
        width: auto;
        height: 48px;
        line-height: 44px;
        box-sizing: border-box;
        border: 2px solid var(--m-orange);
        border-radius: 12px;
        color: #7A3E00 !important;
        font-size: 18px;
    }

    /* Numbers, second numbers and draws as a grid of big tiles. */
    .div-lottery-panel div[data-bind^="foreach: primaryNumbers"],
    .div-lottery-panel div[data-bind^="foreach: secondaryNumbers"] {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 6px;
    }
    .div-lottery-panel div[data-bind^="foreach: draws"] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .div-lottery-panel .spn-number {
        float: none;
        width: auto;
        min-width: 0;
        height: 44px;
        line-height: 44px;
        margin: 0;
        border-radius: 10px;
        font-size: 16px;
    }
    .div-lottery-panel div[data-bind^="foreach: draws"] .spn-number {
        min-width: 52px;
        padding: 0 12px;
        box-sizing: border-box;
    }

    /* "Your line": one box per number, sticks under the header while scrolling through the numbers. */
    .m-line {
        display: block;
        position: -webkit-sticky;
        position: sticky;
        top: var(--m-header, 0px);
        z-index: 5;
        margin: 12px -14px 0 -14px !important;
        width: auto !important;
        padding: 10px 14px;
        background: rgba(241, 243, 239, .97);
        border-top: 1px solid var(--m-line);
        border-bottom: 1px solid var(--m-line);
    }
    .m-line-head {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }
    .m-line-title {
        font: 700 15px/1.2 'Oswald', sans-serif;
        text-transform: uppercase;
        color: var(--m-text);
    }
    .m-line-count {
        flex: 1 1 auto;
        font: 500 12px/1.2 'Montserrat', sans-serif;
        color: var(--m-muted);
    }
    .m-line-clear {
        padding: 6px 4px;
        font: 700 13px/1 'Montserrat', sans-serif;
        color: #8E2B2B;
        cursor: pointer;
    }
    .m-line-slots {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
    .m-line-slots > span {
        width: 32px;
        height: 32px;
        box-sizing: border-box;
        border-radius: 16px;
        border: 2px dashed #B5C0B1;
        background: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font: 700 14px/1 'Oswald', sans-serif;
        color: var(--m-text);
        cursor: pointer;
    }
    .m-line-slots > span.secondary {
        border-color: #E0C060;
        background: #FFFDF5;
    }
    .m-line-slots > span.first {
        margin-left: 8px;
    }
    .m-line-slots > span.filled {
        border: 0;
        background: var(--m-green);
        color: #0E2A0F;
    }
    .m-line-slots > span.filled.secondary {
        background: var(--m-gold);
        color: #1B1B1B;
    }

    /* Costs and Add to cart: a bar that stays in view above the tab bar while this lottery is open. */
    .div-lottery-panel > .col-40:last-child {
        position: -webkit-sticky;
        position: sticky;
        bottom: calc(var(--m-tabbar) + var(--m-safe));
        z-index: 6;
        margin: 14px -14px -14px -14px !important;
        width: auto !important;
        padding: 10px 14px 12px 14px;
        box-sizing: border-box;
        background: #fff;
        border-top: 1px solid var(--m-line);
        border-radius: 0 0 16px 16px;
        box-shadow: 0 -6px 18px rgba(20, 40, 20, .08);
    }
    .div-lottery-panel > .col-40:last-child > div {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }
    .div-lottery-panel > .col-40:last-child .title {
        flex: 1 1 100%;
        margin: 0;
        font: 700 18px/1.2 'Oswald', sans-serif;
    }
    .div-lottery-panel .btn-add-entry,
    .div-lottery-panel .btn-update-entry,
    .div-lottery-panel .btn-cancel {
        float: none;
        height: 50px;
        line-height: 50px;
        margin: 0;
        padding: 0 14px;
        border-radius: 12px;
        box-sizing: border-box;
        text-align: center;
        font: 700 17px/50px 'Oswald', sans-serif;
    }
    .div-lottery-panel .btn-add-entry {
        flex: 1 1 auto;
        width: auto;
    }
    .div-lottery-panel .btn-add-entry img {
        position: static;
        margin-left: 8px;
        vertical-align: -6px;
    }
    .div-lottery-panel .btn-update-entry {
        flex: 1 1 auto;
        width: auto;
    }
    .div-lottery-panel .btn-cancel {
        flex: 0 0 auto;
        width: auto;
    }

    /* EuroMillions multiple: full width, the chooser buttons big enough to tap. */
    .div-multiple-seg > span {
        min-height: 44px;
        line-height: 44px;
    }
    .btn-multiple-random,
    .btn-multiple-add {
        min-height: 46px;
        line-height: 46px;
        border-radius: 12px;
    }

    /* ---------- Cart: a sheet from the bottom ---------- */
    #lottery-picker .col-tickets {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto !important;
        max-height: 82vh;
        margin: 0 !important;
        padding: 0 0 calc(12px + var(--m-safe)) 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -12px 32px rgba(0, 0, 0, .25);
        z-index: 1002;
        transform: translateY(105%);
        transition: transform .25s ease;
        visibility: hidden;
    }
    body.m-cart-open #lottery-picker .col-tickets {
        transform: none;
        visibility: visible;
    }
    .m-sheet-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(14, 26, 13, .55);
        z-index: 1001;
    }
    body.m-cart-open .m-sheet-backdrop {
        display: block;
    }
    body.m-cart-open {
        overflow: hidden;
    }
    #lottery-picker .div-tickets {
        min-width: 0;
        margin: 0 !important;
        padding: 0 14px;
    }
    #lottery-picker .div-tickets .spn-tickets {
        display: none;
    }
    .m-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 1;
        margin: 0 -14px 8px -14px;
        padding: 18px 8px 8px 18px;
        background: #fff;
    }
    .m-sheet-grip {
        position: absolute;
        top: 7px;
        left: 50%;
        width: 40px;
        height: 5px;
        margin-left: -20px;
        border-radius: 3px;
        background: #CBD5C8;
    }
    .m-sheet-title {
        font: 700 22px/1.2 'Oswald', sans-serif;
        text-transform: uppercase;
        color: var(--m-text);
    }
    .m-sheet-close {
        width: 44px;
        height: 44px;
        border: 0;
        background: none;
        font-size: 30px;
        line-height: 44px;
        color: var(--m-text);
        cursor: pointer;
    }
    #lottery-picker .div-cart {
        position: static !important;
        width: auto !important;
    }
    .div-order-item img.btn-edit-entry,
    .div-order-item img.btn-delete-entry {
        padding: 8px;
        margin: -8px 0;
    }
    #lottery-picker .btn-checkout {
        display: block;
        height: 54px;
        line-height: 54px;
        margin: 12px 0 0 0;
        border-radius: 14px;
        font: 700 19px/54px 'Oswald', sans-serif;
        text-align: center;
    }
}

/* ==================== Second pass (2-11-2026): closer to the design ====================
   The older site styles (gradients, 3D button shadows, filled number tiles, the photo header)
   showed through. These rules bring the phone layout in line with the clickable design. */
@media screen and (max-width: 767px) {
    body,
    .div-content {
        background: var(--m-ground);
    }
    .div-block {
        min-height: 0 !important;
    }
    .div-page-content {
        padding: 16px 0 !important;
    }
    .div-container {
        padding: 0 12px;
        box-sizing: border-box;
    }

    /* ---------- Header: one dark bar (logo | language, support, balance/login | menu) ---------- */
    .site-header {
        background: var(--m-forest) !important;
    }
    .site-header.fixed {
        top: 0 !important;
    }
    .sh-inner {
        min-height: 56px !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-areas: "logo tools burger" !important;
        align-items: center;
    }
    .sh-tools {
        height: 56px !important;
        padding: 0 !important;
        background: none !important;
        justify-content: flex-end !important;
        gap: 0 !important;
    }
    .sh-account,
    .sh-login-item {
        margin-left: 0 !important;
    }
    .sh-account .sh-pill {
        height: 34px !important;
        padding: 0 12px !important;
        border: 1px solid #4E7A4C !important;
        border-radius: 17px;
        background: #2B4E2A;
        font: 600 14px/34px 'Oswald', sans-serif;
    }
    .sh-account .sh-pill .sh-icon {
        display: none;
    }
    .sh-login span:last-child {
        display: none;
    }
    .sh-logo {
        padding: 8px 12px !important;
    }
    .sh-logo img {
        height: 38px !important;
    }
    .sh-burger {
        width: 48px !important;
        height: 56px !important;
        font-size: 26px !important;
    }

    /* ---------- Home: jackpot card instead of the photo header ---------- */
    .div-header {
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 12px 12px 0 12px;
        background: none !important;
    }
    .div-header > div:not(#lottery-slide-show) {
        display: none !important;
    }
    .div-next-jackpot {
        position: static !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 16px 16px 12px 16px !important;
        background: var(--m-forest) !important;
        border-radius: 18px !important;
        color: #fff !important;
    }
    .div-next-jackpot .slideshow-container a {
        color: #fff;
        text-decoration: none;
    }
    .div-next-jackpot-lottery {
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center;
        gap: 12px;
    }
    .div-next-jackpot-lottery img {
        float: none !important;
        width: 56px !important;
        height: 56px;
    }
    .div-next-jackpot-lottery span {
        display: block !important;
        float: none !important;
        margin: 0 !important;
        font: 500 15px/1.2 'Oswald', sans-serif !important;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #CFE3CB !important;
    }
    .div-next-jackpot-amount {
        float: none !important;
        width: auto !important;
        margin: 10px 0 0 0;
    }
    .div-next-jackpot-amount > span {
        font: 500 12px/1.2 'Montserrat', sans-serif !important;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #CFE3CB;
    }
    .div-next-jackpot-amount > br {
        display: none;
    }
    .div-next-jackpot-amount div {
        transform: none !important;
        left: 0 !important;
        margin: 2px 0 0 0 !important;
    }
    .spn-jackpot-amount {
        font: 600 34px/1.1 'Oswald', sans-serif !important;
        color: #F7D569 !important;
    }
    .spn-jackpot-amount-shadow {
        display: none !important;
    }
    .div-next-jackpot-counter {
        float: none !important;
        margin: 12px 0 0 0 !important;
    }
    .div-next-jackpot-counter > span {
        font: 500 12px/1.2 'Montserrat', sans-serif !important;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #CFE3CB;
    }
    .div-next-jackpot-counter ul {
        display: flex !important;
        align-items: center;
        gap: 4px;
        margin: 6px 0 0 0 !important;
    }
    .div-next-jackpot-counter ul li {
        float: none !important;
        margin: 0 !important;
        height: 44px !important;
        line-height: 44px !important;
        font: 600 26px/44px 'Oswald', sans-serif !important;
        font-variant-numeric: tabular-nums;
    }
    .div-next-jackpot-counter ul li:nth-child(3n+1),
    .div-next-jackpot-counter ul li:nth-child(3n+2) {
        width: 34px !important;
        border-radius: 8px !important;
        background: #2E522D !important;
        color: #fff !important;
    }
    .div-next-jackpot-counter ul li:nth-child(3n+3) {
        width: 8px !important;
        color: #CFE3CB;
    }
    .slideshow-nav {
        position: static !important;
        margin: 12px 0 0 0;
    }
    .slideshow-nav .dot {
        width: 8px;
        height: 8px;
        background: #4E7A4C;
    }
    .slideshow-nav .dot.active {
        background: #F7D569;
    }

    /* The three promises: small cards with the icon on the left. */
    .div-block-usp {
        background: none !important;
        padding: 12px 0 0 0 !important;
    }
    .div-block-usp .img-3-balls,
    .div-block-usp .img-green-ball,
    .div-block-usp .img-2-balls,
    .img-2-3-balls {
        display: none !important;
    }
    .div-usp {
        display: grid !important;
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 12px;
        align-items: center;
        float: none !important;
        width: auto !important;
        margin: 0 0 8px 0 !important;
        padding: 12px 14px !important;
        box-sizing: border-box;
        text-align: left !important;
        background: #fff;
        border: 1px solid var(--m-line);
        border-radius: 14px;
    }
    .div-usp img {
        grid-row: 1 / span 2;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
    }
    .div-usp .title {
        margin: 0 !important;
        font: 600 15px/1.2 'Oswald', sans-serif !important;
        text-transform: uppercase;
        color: #2C7A2F !important;
    }
    .div-usp .content {
        margin: 2px 0 0 0 !important;
        font: 400 13px/1.4 'Montserrat', sans-serif !important;
        color: #3D4A3A !important;
    }

    /* Home lottery list: the time left was hidden by an older rule. */
    .div-jackpot-row > div:nth-child(2) > span:last-child > span {
        display: inline !important;
    }
    .div-jackpot-row a,
    .div-lottery-panel-header a {
        text-decoration: none !important;
    }

    /* ---------- Buttons: flat, as in the design ---------- */
    .div-jackpot-row .btn-green,
    #lottery-picker .btn-green {
        background: var(--m-green) !important;
        color: #0E2A0F !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }
    #lottery-picker .btn-orange {
        background: #FFF4E6 !important;
        border: 1.5px solid var(--m-orange);
        color: #7A3E00 !important;
        box-shadow: none !important;
        filter: none !important;
        box-sizing: border-box;
    }
    #lottery-picker .btn-red {
        background: #fff !important;
        border: 1px solid #CFD8CC;
        color: var(--m-text) !important;
        box-shadow: none !important;
    }

    /* ---------- Play page ---------- */
    #lottery-picker .spn-select-lottery {
        font: 600 22px/1.2 'Oswald', sans-serif !important;
        text-transform: uppercase;
    }
    .div-lottery-panel > .col-60:first-child > div {
        display: flex;
        align-items: center;
        gap: 8px;
        font: 400 13px/1.3 'Montserrat', sans-serif;
        color: var(--m-muted);
    }
    .div-lottery-panel .lottery-name {
        display: inline !important;
        font: 600 15px/1.2 'Oswald', sans-serif;
        color: var(--m-text);
    }
    .div-lottery-panel .spn-help {
        flex: 0 0 auto;
        margin-left: auto;
        float: none !important;
        position: static !important;
        background: #fff !important;
        border: 1px solid #CFD8CC;
        color: var(--m-text) !important;
        font: 700 17px/34px 'Montserrat', sans-serif;
    }
    .div-lottery-panel > .col-40:nth-child(2) .btn-quick-pick-panel {
        background: #fff !important;
        border: 2px solid var(--m-orange) !important;
        color: #7A3E00 !important;
        line-height: 36px !important;
    }
    .div-lottery-panel .spn-quick-pick {
        background: #fff !important;
    }

    /* Number tiles: white, the chosen ones green (second numbers gold), as in the design. */
    .div-lottery-panel .spn-number.bg-green {
        background: #fff !important;
        color: var(--m-text) !important;
        border: 1px solid #CFD8CC;
        box-sizing: border-box;
    }
    .div-lottery-panel .spn-number.bg-darkgreen {
        background: var(--m-green) !important;
        color: #0E2A0F !important;
        border: 1px solid var(--m-green-dark);
        box-sizing: border-box;
    }
    .div-lottery-panel div[data-bind^="foreach: secondaryNumbers"] .spn-number.bg-darkgreen {
        background: var(--m-gold) !important;
        border-color: #C48F00;
        color: #1B1B1B !important;
    }
    .div-lottery-panel div[data-bind^="foreach: draws"] .spn-number.bg-darkgreen {
        background: var(--m-forest) !important;
        border-color: var(--m-forest);
        color: #fff !important;
    }
    .div-lottery-panel .spn-number.bg-red {
        background: #E04848 !important;
        color: #fff !important;
    }
    .div-lottery-panel .title.div-numbers-title,
    .div-lottery-panel .col-40 .title,
    .div-lottery-panel .col-60 .title {
        font: 600 16px/1.2 'Oswald', sans-serif !important;
        text-transform: uppercase;
    }
}

/* ==================== Third pass (2-11-2026): alignment and the gold from the PSDs ==================== */
@media screen and (max-width: 767px) {
    :root {
        --m-gold-psd: #E8B400;
        --m-gold-light: #F7D569;
    }

    /* Jackpot card: an older rule put the lottery ball absolutely over the counter. */
    .div-header {
        box-sizing: border-box;
        width: 100% !important;
    }
    .div-next-jackpot {
        box-sizing: border-box;
        border: 2px solid var(--m-gold-psd) !important;
    }
    .div-next-jackpot-lottery {
        position: static !important;
        top: auto !important;
        left: auto !important;
    }
    .div-next-jackpot-amount,
    .div-next-jackpot-counter {
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .div-next-jackpot-counter ul li:nth-child(3n+1),
    .div-next-jackpot-counter ul li:nth-child(3n+2) {
        border-bottom: 2px solid var(--m-gold-psd) !important;
        box-sizing: border-box;
    }

    /* The promises: an older phone rule hid the text. */
    .div-usp .content {
        display: block !important;
    }
    .div-usp {
        border-left: 4px solid var(--m-gold-psd) !important;
    }

    /* Headings with the gold bar from the PSDs. */
    #lottery-picker .spn-select-lottery,
    .div-lottery-picker > .title {
        padding-bottom: 6px;
        border-bottom: 3px solid var(--m-gold-psd);
    }

    /* Quick pick in gold instead of the pale orange. */
    .m-quick-pick,
    .div-lottery-panel-header .btn-quick-pick,
    #lottery-picker .div-lottery-panel-header .btn-orange {
        background: var(--m-gold-psd) !important;
        border: 0 !important;
        color: #2A1F00 !important;
        line-height: 32px !important;
    }
    .div-lottery-panel > .col-40:nth-child(2) > div {
        background: #fff !important;
        border: 2px solid var(--m-gold-psd) !important;
    }
    #lottery-picker .div-lottery-panel > .col-40:nth-child(2) .btn-quick-pick-panel {
        background: var(--m-gold-psd) !important;
        border: 0 !important;
        color: #2A1F00 !important;
        line-height: 40px !important;
    }
    .div-lottery-panel .spn-quick-pick {
        background: #fff !important;
        border: 2px solid var(--m-gold-psd) !important;
        color: #5A4300 !important;
    }

    /* Tab bar: the active tab gets a gold line on top. */
    .m-tab {
        position: relative;
    }
    .m-tab.active::before {
        content: "";
        position: absolute;
        top: 0;
        left: 22%;
        right: 22%;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--m-gold-psd);
    }

    /* "Your line": the box border in the gold of the cards. */
    .m-line {
        border-top: 2px solid var(--m-gold-psd);
    }
}

/* Home (Daan 2-11): only Play on the lottery cards; Quick pick +1 is not shown there for now.
   The link stays in LotteryOverview, so it can be switched on again by removing this rule. */
@media screen and (max-width: 767px) {
    .div-jackpot-row .m-quick-pick {
        display: none !important;
    }
}

/* Message after a line was added, with a button to the cart (scripts/mobile-app.js). */
.m-toast {
    display: none;
}
@media screen and (max-width: 767px) {
    .m-toast {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(var(--m-tabbar) + var(--m-safe) + 96px);
        z-index: 998;
        padding: 10px 10px 10px 14px;
        border-radius: 12px;
        background: var(--m-forest);
        border-left: 4px solid var(--m-gold-psd);
        color: #fff;
        font: 500 14px/1.3 'Montserrat', sans-serif;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
        opacity: 0;
        transform: translateY(12px);
        pointer-events: none;
        transition: opacity .2s ease, transform .2s ease;
    }
    .m-toast.show {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
    .m-toast-button {
        flex: 0 0 auto;
        height: 38px;
        padding: 0 14px;
        border: 0;
        border-radius: 10px;
        background: var(--m-green);
        color: #0E2A0F;
        font: 700 14px/38px 'Oswald', sans-serif;
        text-transform: uppercase;
        cursor: pointer;
    }
}

/* Number picker, all widths: the price per draw times the draws, next to the costs. */
.spn-costs-draws {
    font-weight: 400;
    font-size: .8em;
    color: #5B6758;
    white-space: nowrap;
}

/* ==================== Typography on phones (2-11-2026) ====================
   One scale for every page, so the same kind of text always looks the same:
   - page title     Oswald 600 24px, capitals      (h1, "Select your lottery", "Lottery results", "Support")
   - section title  Oswald 600 19px, capitals      (h2, h3.subTitle, "How it works", "FAQ")
   - card title     Oswald 500 17px, capitals      (lottery names, the three promises)
   - block text     Montserrat 400 14px / 1.55     (paragraphs, tables, FAQ, forms)
   - small text     Montserrat 400 12px            (times, dates, labels, footer, disclaimer)
   - buttons        Oswald 600 16px, capitals, 12px radius; 48px high for actions, 40px in cards
   - fields         Montserrat 16px, 48px high (16px keeps iPhones from zooming in) */
@media screen and (max-width: 767px) {
    :root {
        --m-font-head: 'Oswald', sans-serif;
        --m-font-body: 'Montserrat', sans-serif;
    }

    /* Page titles */
    .div-content h1,
    .div-content h1.title,
    #lottery-picker .spn-select-lottery,
    .m-sheet-title {
        font-family: var(--m-font-head) !important;
        font-size: 24px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-transform: uppercase;
        letter-spacing: .01em;
        margin-top: 0;
    }

    /* Section titles */
    .div-content h2,
    .div-content h2.title,
    .div-content h3.subTitle,
    .div-content .div-text-content h2 {
        font-family: var(--m-font-head) !important;
        font-size: 19px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        text-transform: uppercase;
        margin: 20px 0 8px 0 !important;
    }

    /* Card titles */
    .div-jackpot-row > div:nth-child(2),
    .div-lottery-panel-header > div:nth-child(3),
    .div-usp .title,
    .div-content h3:not(.subTitle),
    .div-result-row > div > span:first-child:not(.spn-date):not(.ball),
    .div-content .lottery-name {
        font-family: var(--m-font-head) !important;
        font-size: 17px !important;
        font-weight: 500 !important;
        line-height: 1.25 !important;
    }

    /* Block text */
    .div-content p,
    .div-content li,
    .div-content td,
    .div-content th,
    .div-content .content,
    .div-content .col-85,
    .div-page-content,
    .div-text-content,
    .div-usp .content,
    .modal-body {
        font-family: var(--m-font-body) !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
    }
    .div-content th,
    .div-content td strong,
    .div-content td b {
        font-weight: 700;
    }

    /* Amounts stay bold and a little larger than block text. */
    .div-jackpot-row .spn-jackpot,
    .div-lottery-panel-header .spn-jackpot {
        font-family: var(--m-font-body) !important;
        font-size: 16px !important;
        font-weight: 700 !important;
    }

    /* Small text */
    .div-jackpot-row > div:nth-child(2) > span:last-child,
    .div-lottery-panel-header > div:nth-child(3) > span:last-child,
    .div-lottery-panel > .col-60:first-child > div,
    .m-line-count,
    .div-result-row .spn-date,
    .div-copyright,
    .div-disclaimer,
    .div-disclaimer *,
    .div-footer .content,
    .div-footer li,
    .div-footer a {
        font-family: var(--m-font-body) !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
    }
    .div-footer .title {
        font-family: var(--m-font-head) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        text-transform: uppercase;
    }
    .div-footer li,
    .div-footer a {
        font-size: 14px !important;
    }

    /* Buttons: one style everywhere. */
    .div-content .btn-green,
    .div-content .btn-orange,
    .div-content .btn-red,
    .div-content .btn-form-green,
    .div-content .btn-form-lightgrey,
    .div-content button[type="submit"],
    .modal .btn-form-green,
    .modal .btn-green,
    .m-quick-pick,
    .m-toast-button {
        font-family: var(--m-font-head) !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: .02em;
        border-radius: 12px !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }
    .div-content .btn-form-green,
    .modal .btn-form-green,
    .div-content button[type="submit"],
    .div-content .btn-orange:not(.btn-quick-pick),
    #lottery-picker .btn-checkout,
    .div-lottery-panel .btn-add-entry,
    .div-lottery-panel .btn-update-entry,
    .div-lottery-panel .btn-cancel,
    .btn-multiple-random,
    .btn-multiple-add {
        min-height: 48px !important;
        height: auto !important;
        line-height: 48px !important;
        padding: 0 18px !important;
        box-sizing: border-box;
    }
    .div-content .btn-form-green,
    .modal .btn-form-green {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        text-align: center;
    }
    .div-jackpot-row .btn-green,
    .div-lottery-panel-header .btn-play-now,
    .div-lottery-panel-header .btn-quick-pick,
    .m-quick-pick {
        height: 40px !important;
        line-height: 40px !important;
        font-size: 15px !important;
    }
    .div-lottery-panel-header .btn-quick-pick {
        height: 34px !important;
        line-height: 34px !important;
        font-size: 13px !important;
    }
    /* Number tiles and draws use the same digits. */
    .div-lottery-panel .spn-number,
    .div-lottery-panel .spn-quick-pick,
    .m-line-slots > span {
        font-family: var(--m-font-head) !important;
        font-weight: 600 !important;
    }

    /* Form fields */
    .div-content input[type="text"],
    .div-content input[type="email"],
    .div-content input[type="password"],
    .div-content input[type="tel"],
    .div-content input[type="number"],
    .div-content select,
    .modal input[type="text"],
    .modal input[type="email"],
    .modal input[type="password"],
    .modal select {
        font-family: var(--m-font-body) !important;
        font-size: 16px !important;
        min-height: 48px;
        border-radius: 10px !important;
        box-sizing: border-box;
    }
    .div-content textarea,
    .modal textarea {
        font-family: var(--m-font-body) !important;
        font-size: 16px !important;
        border-radius: 10px !important;
    }
}

/* ==================== My account on phones (phase 2, 2-11-2026) ====================
   Same bindings as on desktop: the three sections (account details with deposit, tickets,
   transactions) stay; the balance moves to a card at the top and every block becomes a card. */
@media screen and (max-width: 767px) {
    /* The dark bar with the account icon above the page is not needed on a phone. */
    .div-header-account {
        display: none !important;
    }
    #my-account .div-block {
        background: var(--m-ground) !important;
    }
    #my-account .div-account-container {
        padding: 12px !important;
    }

    /* Balance card */
    .m-acct-card {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin: 0 0 12px 0;
        padding: 16px;
        border: 2px solid var(--m-gold-psd);
        border-radius: 18px;
        background: var(--m-forest);
        color: #fff;
    }
    .m-acct-card[style*="display: none"] {
        display: none !important;
    }
    .m-acct-label {
        font: 500 12px/1.2 var(--m-font-body);
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #CFE3CB;
    }
    .m-acct-total {
        font: 600 36px/1.1 var(--m-font-head);
        color: var(--m-gold-light);
    }
    .m-acct-split {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        margin-top: 8px;
    }
    .m-acct-split > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        padding: 8px 10px;
        border-radius: 10px;
        background: #2E522D;
    }
    .m-acct-split span {
        font: 400 11px/1.2 var(--m-font-body);
        color: #CFE3CB;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .m-acct-split strong {
        font: 600 16px/1.2 var(--m-font-head);
        color: #fff;
    }
    .m-acct-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 12px;
    }
    .m-acct-btn {
        display: block;
        height: 48px;
        border: 0;
        border-radius: 12px;
        background: var(--m-green);
        color: #0E2A0F !important;
        font: 600 16px/48px var(--m-font-head);
        letter-spacing: .02em;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none !important;
        cursor: pointer;
    }
    .m-acct-ghost {
        background: transparent;
        border: 1px solid #6E9A6B;
        color: #fff !important;
        line-height: 46px;
    }
    /* The balances block at the bottom of the page is now in the card. */
    #my-account > .div-block.bg-lightgrey {
        display: none !important;
    }

    /* The three sections as a segmented control. */
    .div-account-tab-strip {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        margin: 0 0 14px 0 !important;
        padding: 4px;
        border-radius: 12px;
        background: #E3E8E0;
    }
    .div-account-tab-strip > span {
        display: flex !important;
        align-items: center;
        justify-content: center;
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 4px !important;
        border: 0 !important;
        border-radius: 9px !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #4A5547 !important;
        font: 600 13px/1.15 var(--m-font-body) !important;
        text-transform: none !important;
        text-align: center;
        white-space: normal;
    }
    .div-account-tab-strip > span.btn-form-green {
        background: #fff !important;
        color: var(--m-text) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .12) !important;
    }
    .div-account-tab-strip .btn-icon {
        display: none !important;
    }

    /* Section titles and the decorative icons beside each block. */
    #my-account .div-form-title {
        margin: 6px 0 10px 0 !important;
        padding: 0 0 6px 0 !important;
        border-bottom: 3px solid var(--m-gold-psd);
        background: none !important;
        color: var(--m-text) !important;
        font: 600 19px/1.25 var(--m-font-head) !important;
        text-transform: uppercase;
        text-align: left !important;
    }
    .div-account-icon,
    .div-deposit-icon,
    .div-tickets-icon,
    .div-transactions-icon,
    #my-account .col-15:empty {
        display: none !important;
    }
    #my-account .col-15,
    #my-account .col-70,
    #my-account .col-85,
    #my-account .col-50 {
        float: none !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Account details: one white card, fields stacked. */
    #form-my-account,
    .div-my-account-deposit,
    .div-my-account-tickets,
    .div-my-account-transactions {
        margin: 0 0 16px 0 !important;
        padding: 14px !important;
        border: 1px solid var(--m-line);
        border-radius: 16px;
        background: #fff;
        box-sizing: border-box;
    }
    #my-account .div-form-col {
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
    }
    #my-account label,
    #deposit label {
        display: block;
        margin: 0 0 5px 0 !important;
        font: 600 12px/1.3 var(--m-font-body) !important;
        color: var(--m-text);
    }
    #my-account input[type="text"],
    #my-account select {
        width: 100% !important;
        padding: 0 12px !important;
        border: 1px solid #CFD8CC !important;
        background-color: #fff;
    }
    #my-account input[readonly] {
        background: #F4F7F3 !important;
        color: var(--m-muted);
    }
    #my-account .form-dateofbirth {
        display: grid;
        grid-template-columns: 1fr 1.3fr 1.3fr;
        gap: 6px;
    }
    #my-account .form-dateofbirth select {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
    }
    #addressLine2 {
        margin-top: 6px !important;
    }
    .btn-save-my-account {
        margin: 4px 0 0 0 !important;
    }

    /* Deposit */
    .div-deposit-intro {
        margin: 0 0 12px 0 !important;
        color: #3D4A3A;
    }
    .div-deposit-buttons {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        margin: 0 0 10px 0 !important;
    }
    .div-deposit-buttons > div {
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        height: 46px !important;
        line-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #CFD8CC !important;
        border-radius: 12px !important;
        background: #fff !important;
        color: var(--m-text) !important;
        box-shadow: none !important;
        font: 600 16px/44px var(--m-font-head) !important;
        text-align: center;
    }
    .div-deposit-buttons > div.btn-form-green {
        background: var(--m-forest) !important;
        border-color: var(--m-forest) !important;
        color: #fff !important;
    }
    #deposit .form-prefix {
        position: relative;
        margin: 0 0 14px 0;
    }
    #deposit .form-prefix > span {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 16px;
    }
    #deposit #otherAmount {
        width: 100% !important;
        padding-left: 30px !important;
        border: 1px solid #CFD8CC !important;
    }
    .div-payment-method {
        display: flex !important;
        align-items: center;
        gap: 10px;
        min-height: 54px;
        margin: 0 !important;
        padding: 0 4px !important;
        border-bottom: 1px solid #EDF1EB;
        box-sizing: border-box;
    }
    .div-payment-method label {
        flex: 1 1 auto;
        margin: 0 !important;
        padding: 0 0 0 34px !important;
        font: 600 15px/54px var(--m-font-body) !important;
    }
    .div-payment-method img {
        max-height: 26px;
        width: auto;
        position: static !important;
    }
    .div-deposit-code {
        display: flex !important;
        gap: 8px;
        margin: 0 0 12px 0;
    }
    .div-deposit-code input {
        flex: 1 1 auto;
        min-width: 0;
        width: auto !important;
        padding: 0 12px !important;
        border: 1px solid #CFD8CC !important;
    }
    .div-deposit-code button {
        flex: 0 0 auto;
        min-height: 48px !important;
        padding: 0 16px !important;
        border: 2px solid var(--m-forest) !important;
        background: #fff !important;
        color: var(--m-forest) !important;
        font: 600 15px/44px var(--m-font-head) !important;
    }
    .div-deposit-note,
    .div-deposit-bonus {
        margin: 0 0 12px 0 !important;
        font-size: 13px !important;
    }

    /* My tickets: the cards that were already there, in the colours and fonts of the new layout. */
    .mt-tabs {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
        width: 100%;
        padding: 4px;
        border-radius: 12px;
        background: #E3E8E0;
        box-sizing: border-box;
    }
    .mt-tab {
        min-height: 40px;
        padding: 4px 2px !important;
        border: 0 !important;
        border-radius: 9px !important;
        background: transparent !important;
        color: #4A5547 !important;
        font: 600 12.5px/1.15 var(--m-font-body) !important;
    }
    .mt-tab.on {
        background: #fff !important;
        color: var(--m-text) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    }
    .mt-item {
        border: 1px solid var(--m-line) !important;
        border-radius: 16px !important;
        box-shadow: none !important;
    }
    .mt-item.sel {
        border: 2px solid var(--m-green-dark) !important;
    }
    .mt-lot img {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;
    }
    .mt-name {
        font: 500 17px/1.25 var(--m-font-head) !important;
        text-transform: uppercase;
    }
    .mt-ball {
        border-color: #BFE3BF !important;
        background: #E7F8E7 !important;
        color: #1F5A21;
        font-family: var(--m-font-head);
        font-weight: 600;
    }
    .mt-ball-2 {
        border-color: #C48F00 !important;
        background: var(--m-gold) !important;
        color: #1B1B1B;
    }
    .mt-btn {
        min-height: 44px;
        padding: 0 16px !important;
        border-radius: 12px !important;
        font: 600 15px/44px var(--m-font-head) !important;
        text-transform: uppercase;
        box-shadow: none !important;
    }
    .mt-bar {
        position: sticky !important;
        bottom: calc(var(--m-tabbar) + var(--m-safe)) !important;
        z-index: 6;
        border-radius: 16px 16px 0 0;
    }

    /* Syndicates and transactions: every row a card. */
    .tbl-entries tr,
    .tbl-transactions tr {
        margin: 0 0 10px 0 !important;
        padding: 10px 12px !important;
        border: 1px solid var(--m-line) !important;
        border-radius: 14px;
        background: #fff !important;
    }
    .tbl-entries td,
    .tbl-transactions td {
        padding: 4px 0 4px 45% !important;
        border: 0 !important;
        font-size: 14px !important;
    }
    .tbl-entries td:before,
    .tbl-transactions td:before {
        font: 600 12px/1.6 var(--m-font-body) !important;
        color: var(--m-muted);
    }
    .tbl-transactions tr.failed {
        opacity: .65;
    }

    /* Pagers */
    #my-account .div-pager {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin: 12px 0 0 0;
    }
    #my-account .div-pager button {
        width: 44px;
        height: 44px;
        border: 1px solid #CFD8CC;
        border-radius: 12px;
        background: #fff;
        font: 600 15px/1 var(--m-font-head);
        color: var(--m-text);
    }
    #my-account .div-pages {
        min-width: 70px;
        text-align: center;
        font: 600 14px/1 var(--m-font-body);
    }
}

/* ==================== Same fonts on every width (Daan 2-11-2026) ====================
   Desktop, tablet and phone use the same font families and weights, so the house style does
   not break between devices. Only the sizes differ (the phone sizes are in the block above). */
.div-content h1,
.div-content h1.title,
.div-content h2,
.div-content h2.title,
.div-content h3.subTitle,
#lottery-picker .spn-select-lottery {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase;
}
.div-jackpot-row > div:nth-child(2),
.div-lottery-panel-header > div:nth-child(3),
.div-usp .title,
.div-content h3:not(.subTitle),
.div-result-row > div > span:first-child:not(.spn-date):not(.ball),
.div-content .lottery-name {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 500 !important;
}
.div-content p,
.div-content li,
.div-content td,
.div-content .content,
.div-content .col-85,
.div-usp .content,
.modal-body,
.div-copyright,
.div-disclaimer,
.div-disclaimer * {
    font-family: 'Montserrat', sans-serif !important;
}
.div-next-jackpot-counter ul li {
    font-family: 'Oswald', sans-serif !important;
}
.div-footer .title {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase;
}
.div-content .btn-green,
.div-content .btn-orange,
.div-content .btn-red,
.div-content .btn-form-green,
.div-content button[type="submit"],
.modal .btn-form-green,
.modal .btn-green {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}
.div-content input,
.div-content select,
.div-content textarea,
.modal input,
.modal select,
.modal textarea {
    font-family: 'Montserrat', sans-serif !important;
}

/* ==================== Popups on phones: log in, sign up, password, help (2-11-2026) ====================
   A full screen in the page colours above the tab bar, as in the design, instead of a green
   box. The forms and their bindings are the same; only the look changes. The modal stays
   position: fixed, so popup.js leaves the page and the tab bar in place behind it. */
@media screen and (max-width: 767px) {
    #modal-popup.modal {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: calc(var(--m-tabbar) + var(--m-safe));
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        background: var(--m-ground) !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #modal-popup .modal-content {
        max-width: none !important;
        min-height: 100%;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: var(--m-ground) !important;
        animation: none !important;
    }
    #modal-popup .modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row-reverse;
        height: auto !important;
        min-height: 64px;
        padding: 20px 10px 4px 18px !important;
        background: none !important;
        filter: none !important;
        border-radius: 0 !important;
        color: var(--m-text) !important;
        font: 600 24px/1.2 var(--m-font-head) !important;
        text-transform: uppercase;
    }
    #modal-popup .close {
        float: none;
        width: 44px;
        height: 44px;
        line-height: 44px;
        text-align: center;
        color: var(--m-text) !important;
        font: 400 30px/44px var(--m-font-body);
    }
    #modal-popup .modal-body {
        padding: 12px 18px 24px 18px !important;
    }
    #modal-popup .modal-footer {
        display: none;
    }

    /* Fields */
    #modal-popup .div-form label {
        display: block;
        margin: 14px 0 6px 0 !important;
        font: 600 13px/1.3 var(--m-font-body) !important;
        color: var(--m-text);
    }
    #modal-popup .div-form input[type="text"],
    #modal-popup .div-form input[type="email"],
    #modal-popup .div-form input[type="password"],
    #modal-popup .div-form select {
        display: block;
        width: 100% !important;
        height: 50px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border: 1px solid #CFD8CC !important;
        border-radius: 12px !important;
        background: #fff !important;
        box-sizing: border-box;
    }
    #modal-popup .div-form input:focus,
    #modal-popup .div-form select:focus {
        outline: 2px solid var(--m-green);
        outline-offset: 1px;
    }
    #modal-popup label.form-checkbox {
        display: flex !important;
        align-items: flex-start;
        gap: 10px;
        font: 400 13px/1.45 var(--m-font-body) !important;
    }
    #modal-popup label.form-checkbox input {
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
        margin: 0;
        accent-color: var(--m-green-dark);
    }
    #modal-popup .error:not(:empty) {
        margin: 10px 0 0 0;
        padding: 10px 12px;
        border-radius: 10px;
        background: #FBEAEA;
        color: #8E2B2B;
        font-size: 13px;
    }

    /* Main button */
    #modal-popup .btn-login,
    #modal-popup .btn-sign-up,
    #modal-popup .btn-complete-registration,
    #modal-popup .btn-password-reset,
    #modal-popup .btn-activate-login,
    #modal-popup .btn-form-green {
        display: block !important;
        width: 100% !important;
        height: 54px !important;
        min-height: 54px !important;
        margin: 20px 0 0 0 !important;
        border: 0 !important;
        border-radius: 14px !important;
        background: var(--m-green) !important;
        color: #0E2A0F !important;
        font: 600 20px/54px var(--m-font-head) !important;
        letter-spacing: .03em;
        text-transform: uppercase;
    }

    /* "Reset your password?" centred under the button, as in the design. */
    #modal-popup .div-forgot-password {
        order: 1;
        margin: 4px 0 0 0 !important;
        text-align: center !important;
        text-decoration: none !important;
    }
    #form-login {
        display: flex;
        flex-direction: column;
    }
    #form-login .div-forgot-password {
        order: 2;
        margin-top: 14px !important;
    }
    #form-login .btn-login {
        order: 1;
    }
    #form-login .div-sign-up-today {
        order: 3;
    }
    #modal-popup .btn-forgot-password {
        display: inline-block;
        padding: 8px 4px;
        color: #2C7A2F;
        font: 600 15px/1.3 var(--m-font-body);
        text-decoration: none !important;
    }

    /* "New to WLS4YOU? Sign up today" as a divider with an outlined button. */
    #modal-popup .div-sign-up-today {
        margin: 18px 0 0 0 !important;
        padding: 18px 0 0 0;
        border-top: 1px solid var(--m-line);
        text-align: center;
        color: #4A5547;
        font: 400 15px/1.4 var(--m-font-body) !important;
    }
    #modal-popup .btn-signup-today,
    #modal-popup .btn-login-now {
        display: block;
        height: 52px;
        margin: 10px 0 0 0;
        border: 2px solid var(--m-forest);
        border-radius: 14px;
        background: #fff;
        color: var(--m-forest) !important;
        font: 600 18px/48px var(--m-font-head);
        letter-spacing: .02em;
        text-transform: uppercase;
        text-decoration: none !important;
    }
}

/* ==================== Final check against the design PDF (2-11-2026) ==================== */
@media screen and (max-width: 767px) {
    /* Header: the language code next to the globe, as in the design. */
    .sh-lang .sh-lang-code {
        display: inline !important;
        margin-left: 4px;
        font: 600 13px/1 var(--m-font-body);
    }

    /* Home: a Play button on the jackpot card. */
    .m-hero-cta {
        display: block;
        height: 50px;
        margin: 14px 0 0 0;
        border-radius: 12px;
        background: var(--m-green);
        color: #0E2A0F;
        font: 600 18px/50px var(--m-font-head);
        letter-spacing: .03em;
        text-align: center;
        text-transform: uppercase;
    }

    /* Home: "All lotteries · Sorted by next draw" above the cards. */
    .m-list-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        margin: 6px 0 10px 0;
    }
    .m-list-title {
        margin: 0 !important;
        font: 600 19px/1.25 var(--m-font-head) !important;
        text-transform: uppercase;
    }
    .m-list-sub {
        font: 400 12px/1.3 var(--m-font-body);
        color: var(--m-muted);
    }

    /* Log in: the line under the title. */
    #modal-popup .m-login-intro {
        display: block;
        margin: -4px 0 4px 0 !important;
        color: #4A5547;
        font: 400 15px/1.45 var(--m-font-body) !important;
    }

    /* Account: greeting and customer number above the balance. */
    .m-acct-hello {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        margin: 0 4px 10px 4px;
    }
    .m-acct-hello[style*="display: none"] {
        display: none !important;
    }
    .m-acct-hi {
        font: 600 24px/1.2 var(--m-font-head);
        text-transform: uppercase;
        color: var(--m-text);
    }
    .m-acct-no {
        font: 400 12px/1.3 var(--m-font-body);
        color: var(--m-muted);
    }

    /* Account: bonus banner. */
    .m-acct-bonus {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 14px 0;
        padding: 14px;
        border: 1px solid #F0D27A;
        border-left: 4px solid var(--m-gold-psd);
        border-radius: 16px;
        background: #FFF7DD;
    }
    .m-acct-bonus[style*="display: none"] {
        display: none !important;
    }
    .m-acct-bonus-text {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        gap: 2px;
        font: 400 13px/1.4 var(--m-font-body);
        color: #4A3D10;
    }
    .m-acct-bonus-text strong {
        font: 600 15px/1.25 var(--m-font-head);
        text-transform: uppercase;
        color: var(--m-text);
    }
    .m-acct-bonus-btn {
        flex: 0 0 auto;
        height: 40px;
        padding: 0 14px;
        border-radius: 10px;
        background: var(--m-forest);
        color: #fff !important;
        font: 600 15px/40px var(--m-font-head);
        text-transform: uppercase;
        text-decoration: none !important;
    }

    /* Transactions as in the design: description and date on the left, amount on the right,
       status and method small underneath. */
    .tbl-transactions tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "desc   amount"
            "date   amount"
            "meta   meta";
        column-gap: 12px;
        row-gap: 2px;
    }
    .tbl-transactions td {
        padding: 0 !important;
    }
    .tbl-transactions td:before {
        display: none !important;
    }
    .tbl-transactions td:nth-child(1) {
        grid-area: desc;
        font: 600 14px/1.35 var(--m-font-body) !important;
    }
    .tbl-transactions td:nth-child(2) {
        grid-area: date;
        font: 400 12px/1.4 var(--m-font-body) !important;
        color: var(--m-muted);
    }
    .tbl-transactions td:nth-child(3),
    .tbl-transactions td:nth-child(4) {
        grid-area: meta;
        display: inline !important;
        font: 400 12px/1.4 var(--m-font-body) !important;
        color: var(--m-muted);
    }
    .tbl-transactions td:nth-child(3) {
        justify-self: start;
    }
    .tbl-transactions td:nth-child(4) {
        justify-self: end;
    }
    .tbl-transactions td:nth-child(5) {
        grid-area: amount;
        align-self: center;
        font: 600 17px/1.2 var(--m-font-head) !important;
        text-align: right;
        white-space: nowrap;
    }

    /* Account details: first and last name, city and province, telephone and mobile side by side. */
    #form-my-account > .col-70 > div:nth-of-type(3),
    #form-my-account > .col-70 > div:nth-of-type(6),
    #form-my-account > .col-70 > div:nth-of-type(8) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 10px;
    }
    /* Save stays in view above the tab bar while scrolling through the form. */
    #form-my-account > .col-15:last-child {
        position: -webkit-sticky;
        position: sticky;
        bottom: calc(var(--m-tabbar) + var(--m-safe));
        z-index: 5;
        margin: 6px -14px -14px -14px !important;
        padding: 10px 14px 12px 14px !important;
        width: auto !important;
        background: #fff;
        border-top: 1px solid var(--m-line);
        border-radius: 0 0 16px 16px;
    }
    /* The ticket scan icon in a card as a button. */
    .mt-ticket-icon {
        width: 44px !important;
        height: 44px !important;
        padding: 9px;
        box-sizing: border-box;
        border: 1px solid #CFD8CC;
        border-radius: 12px;
        background: #fff;
    }
}

/* Account tabs: stronger selectors than the general button rules, so the three tabs look alike. */
@media screen and (max-width: 767px) {
    #my-account .div-account-tab-strip > span,
    #my-account .div-account-tab-strip > span.btn-form-green,
    #my-account .div-account-tab-strip > span.btn-form-lightgrey {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: auto !important;
        height: 42px !important;
        min-height: 0 !important;
        line-height: 1.15 !important;
        padding: 0 4px !important;
        font: 600 13px/1.15 var(--m-font-body) !important;
        letter-spacing: 0;
        text-transform: none !important;
        border-radius: 9px !important;
    }
}

/* Account lists: no card around the cards, tighter rows, flat buttons. */
@media screen and (max-width: 767px) {
    .div-my-account-transactions,
    .div-my-account-tickets {
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
    }
    .tbl-transactions,
    .tbl-entries {
        margin: 0 !important;
    }
    .tbl-transactions td,
    .tbl-entries td {
        min-height: 0 !important;
        height: auto !important;
        line-height: 1.4 !important;
    }
    .tbl-transactions tr {
        row-gap: 0;
        padding: 10px 14px !important;
    }
    .mt-btn {
        background: var(--m-green) !important;
        color: #0E2A0F !important;
        border: 0 !important;
    }
    .mt-btn.mt-btn-ghost {
        background: #fff !important;
        border: 2px solid var(--m-forest) !important;
        color: var(--m-forest) !important;
        line-height: 40px !important;
    }
    .mt-chk {
        font-size: 13px !important;
    }
    .mt-chk input {
        width: 22px;
        height: 22px;
        margin: 0;
        accent-color: var(--m-green-dark);
    }
}

/* ==================== Round 3 from Daan's screenshots (2-11-2026) ==================== */
@media screen and (max-width: 767px) {
    /* Header: the person icon goes to My Account; the sign-out icon is not shown on phones. */
    .sh-signout {
        display: none !important;
    }
    .sh-myaccount {
        display: block;
    }

    /* Popups below the site header, so the bar with the logo stays visible (as in the design). */
    #modal-popup.modal {
        top: 56px !important;
    }
    #modal-popup .modal-header {
        display: block !important;
        position: relative;
        padding: 20px 56px 4px 18px !important;
    }
    #modal-popup .modal-header * {
        color: inherit !important;
        font: inherit !important;
    }
    #modal-popup .modal-header .close {
        position: absolute;
        top: 12px;
        right: 8px;
        font: 400 30px/44px var(--m-font-body) !important;
    }

    /* Home: the "Play lottery" button next to the video keeps its own look (tilted, with shadow). */
    .div-text-content a {
        text-decoration: none !important;
    }
    .div-text-content .btn-play-lottery {
        display: inline-block !important;
        width: auto !important;
        min-width: 160px !important;
        height: 56px !important;
        line-height: 56px !important;
        margin: 8px 0 8px 12px !important;
        padding: 0 24px !important;
        font-size: 24px !important;
        background: #2cdf4a !important;
        color: #fff !important;
        box-shadow: -5px 5px 0 #25b33c !important;
        border-radius: 10px !important;
    }

    /* Christmas lottery block: the label as a proper badge and the title large again. */
    .navidad-home .nv-label {
        display: inline-block !important;
        width: auto !important;
        padding: 7px 14px !important;
        border-radius: 8px !important;
        font: 700 13px/1.2 var(--m-font-body) !important;
        letter-spacing: .08em;
        white-space: nowrap;
    }
    .div-content .navidad-home h2.nh-title {
        margin: 12px 0 10px 0 !important;
        font: 600 34px/1.05 var(--m-font-head) !important;
        color: #fff !important;
    }

    /* Account: the three sections inside the balance card; the separate strip goes. */
    #my-account .div-account-tab-strip {
        display: none !important;
    }
    .m-acct-actions {
        grid-template-columns: 1fr !important;
    }
    .m-acct-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        margin-top: 12px;
        padding: 4px;
        border-radius: 12px;
        background: #2E522D;
    }
    .m-acct-tabs button {
        min-width: 0;
        height: 42px;
        padding: 0 4px;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: #CFE3CB;
        font: 600 13px/1.15 var(--m-font-body);
        cursor: pointer;
    }
    .m-acct-tabs button.on {
        background: #fff;
        color: var(--m-text);
    }

    /* Bonus banner: can be closed. */
    .m-acct-bonus {
        position: relative;
        padding-right: 40px !important;
    }
    .m-acct-bonus-close {
        position: absolute;
        top: 2px;
        right: 2px;
        width: 36px;
        height: 36px;
        border: 0;
        background: none;
        color: #7A5A00;
        font: 400 22px/36px var(--m-font-body);
        cursor: pointer;
    }

    /* Sign out at the bottom of the account page. */
    .m-acct-signout {
        display: block;
        padding: 4px 12px 24px 12px;
        text-align: center;
    }
    .m-acct-signout a {
        display: block;
        height: 48px;
        border: 1px solid #CFD8CC;
        border-radius: 12px;
        background: #fff;
        color: #8E2B2B !important;
        font: 600 16px/46px var(--m-font-head);
        text-transform: uppercase;
        text-decoration: none !important;
    }

    /* Syndicates as compact cards: ball, numbers and status; dates and winnings; buttons. */
    .tbl-entries tr {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        grid-template-areas:
            "img   nums   status"
            "img   start  prize"
            "img   end    prize"
            "renew renew  ticket";
        column-gap: 10px;
        row-gap: 2px;
        align-items: center;
    }
    .tbl-entries td {
        padding: 0 !important;
        text-align: left !important;
    }
    .tbl-entries td:before {
        display: none !important;
    }
    .tbl-entries td:nth-child(1) { grid-area: img; }
    .tbl-entries td:nth-child(1) img { width: 40px !important; height: 40px !important; margin: 0 !important; }
    .tbl-entries td:nth-child(2) { grid-area: nums; font: 600 14px/1.35 var(--m-font-body) !important; color: #2C7A2F; }
    .tbl-entries td:nth-child(3) { grid-area: start; }
    .tbl-entries td:nth-child(4) { grid-area: end; }
    .tbl-entries td:nth-child(3),
    .tbl-entries td:nth-child(4) { font: 400 12px/1.4 var(--m-font-body) !important; color: var(--m-muted); }
    .tbl-entries td:nth-child(3):before,
    .tbl-entries td:nth-child(4):before {
        display: inline !important;
        position: static !important;
        width: auto !important;
        padding: 0 4px 0 0 !important;
        content: attr(title) ":" !important;
        font: 400 12px/1.4 var(--m-font-body) !important;
    }
    .tbl-entries td:nth-child(5) {
        grid-area: status;
        justify-self: end;
        padding: 3px 9px !important;
        border-radius: 999px;
        background: #E7F8E7;
        color: #1F5A21;
        font: 700 11px/1.2 var(--m-font-body) !important;
        text-transform: uppercase;
    }
    .tbl-entries td:nth-child(6) { grid-area: prize; justify-self: end; font: 600 15px/1.2 var(--m-font-head) !important; }
    .tbl-entries td:nth-child(7) { grid-area: renew; }
    .tbl-entries td:nth-child(8) { grid-area: ticket; justify-self: end; }
    .tbl-entries td:nth-child(7):empty,
    .tbl-entries td:nth-child(8):empty { display: none !important; }
}
/* The person icon to My Account is only for phones. */
@media screen and (min-width: 768px) {
    .sh-myaccount {
        display: none !important;
    }
}

/* Syndicates: dates on one line, long statuses (PENDING_PROCESSING) smaller. */
@media screen and (max-width: 767px) {
    .tbl-entries td:nth-child(3),
    .tbl-entries td:nth-child(4) {
        white-space: nowrap;
    }
    .tbl-entries td:nth-child(5) {
        max-width: 130px;
        font-size: 10px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ==================== My tickets: cards or a compact list at a glance (2-11-2026) ==================== */
.m-view-toggle {
    display: none;
}
@media screen and (max-width: 767px) {
    .m-view-head {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        margin: 0 0 10px 0;
    }
    .m-view-label {
        font: 600 12px/1 var(--m-font-body);
        color: var(--m-muted);
    }
    .m-view-toggle {
        display: flex;
        gap: 2px;
        padding: 3px;
        border-radius: 10px;
        background: #E3E8E0;
    }
    .m-view-toggle button {
        width: 40px;
        height: 34px;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--m-muted);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .m-view-toggle button.on {
        background: #fff;
        color: var(--m-text);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    }
    .m-view-toggle svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
    }

    /* The list: one white block, each ticket one compact row with lottery, numbers, status and
       last draw. Selecting and Play again stay in the card view. */
    .mt.m-compact #tbl-direct-entries {
        overflow: hidden;
        border: 1px solid var(--m-line);
        border-radius: 16px;
        background: #fff;
    }
    .mt.m-compact .mt-item {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "lot   status"
            "balls date" !important;
        gap: 4px 10px !important;
        margin: 0 !important;
        padding: 8px 12px !important;
        border: 0 !important;
        border-bottom: 1px solid #EDF1EB !important;
        border-radius: 0 !important;
    }
    .mt.m-compact .mt-item.sel {
        background: #F2FBF2;
    }
    .mt.m-compact .mt-lot img {
        width: 26px !important;
        height: 26px !important;
        flex-basis: 26px !important;
    }
    .mt.m-compact .mt-name {
        font-size: 15px !important;
    }
    .mt.m-compact .mt-balls {
        gap: 3px !important;
        margin: 0 !important;
    }
    .mt.m-compact .mt-ball {
        width: 22px !important;
        height: 22px !important;
        border-width: 1px !important;
        font-size: 11px !important;
    }
    .mt.m-compact .mt-date {
        justify-self: end;
        align-self: center;
        text-align: right;
        font-size: 11px !important;
    }
    .mt.m-compact .mt-date .mt-l,
    .mt.m-compact .mt-sub,
    .mt.m-compact .mt-won,
    .mt.m-compact .mt-ticket,
    .mt.m-compact .mt-sel,
    .mt.m-compact .mt-act {
        display: none !important;
    }
    .mt.m-compact .mt-badge {
        font-size: 10px !important;
        padding: 2px 7px !important;
    }

    /* Sign out in the drop-down menu. */
    .sh-nav .nav-signout a {
        color: #FF9C9C !important;
    }
}
@media screen and (min-width: 768px) {
    .sh-nav .nav-signout {
        display: none !important;
    }
}

/* My tickets: long statuses ("Refunded to balance", "In progress") stay inside the card. */
@media screen and (max-width: 767px) {
    .mt-item {
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        box-sizing: border-box;
        max-width: 100%;
    }
    .mt-lot {
        min-width: 0;
    }
    .mt-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mt-status {
        min-width: 0;
        max-width: 140px;
    }
    .mt-badge {
        max-width: 140px;
        white-space: normal !important;
        text-align: center;
        line-height: 1.25 !important;
        box-sizing: border-box;
    }
    .mt.m-compact .mt-item {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }
}

/* Account lists: pager buttons get room above the card edge, flat like the other buttons;
   "Select" keeps a gap from its checkbox (Daan 2-11-2026). */
@media screen and (max-width: 767px) {
    #my-account .mt-list .div-pager,
    #my-account .div-pager {
        margin: 0 !important;
        padding: 14px 12px 18px !important;
        gap: 8px !important;
    }
    #my-account .div-pager button {
        box-shadow: none !important;
        margin: 0 !important;
    }
    #my-account .mt-chk {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        cursor: pointer;
    }
    #my-account .mt-chk input {
        flex: 0 0 auto;
        margin: 0 !important;
    }
}