:root {
    --orange: #e77f19;
    --orange-hover: #f08b22;

    --green: #22a06b;
    --green-dark: #168255;
    --green-soft: rgba(34,160,107,.15);

    --red: #e04b43;
    --yellow: #e7b83d;

    --bg: #161616;
    --sidebar: #191919;
    --surface: #202020;
    --surface-2: #272727;
    --surface-3: #303030;

    --text: #f3f3f3;
    --muted: #a9a9a9;
    --border: #363636;

    --radius: 14px;
    --radius-sm: 9px;

    --shadow:
        0 5px 22px rgba(0,0,0,.22);
}


html[data-theme="light"] {
    --bg: #f4f5f5;
    --sidebar: #ffffff;
    --surface: #ffffff;
    --surface-2: #f1f3f2;
    --surface-3: #e8ebe9;

    --text: #202522;
    --muted: #6b746f;
    --border: #dde2df;

    --shadow:
        0 6px 24px rgba(26,40,32,.07);
}


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    min-height: 100%;
}


body {
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: var(--bg);
    color: var(--text);

    transition:
        background .15s ease,
        color .15s ease;
}


a {
    color: inherit;
    text-decoration: none;
}


button,
select,
input {
    font: inherit;
}


button,
select {
    cursor: pointer;
}


/* SHELL */

.app-shell {
    min-height: 100vh;
}


.workspace {
    min-width: 0;
}


/* TOPBAR */

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;

    height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 18px;

    background: var(--orange);
    color: white;

    box-shadow:
        0 2px 10px rgba(0,0,0,.15);
}


.topbar-left,
.topbar-actions,
.topbar-user {
    display: flex;
    align-items: center;
}


.topbar-left {
    gap: 10px;
}


.topbar-actions {
    gap: 8px;
}


.topbar-user {
    gap: 8px;

    padding:
        5px
        8px;

    border-radius: 10px;
}


.topbar-user:hover {
    background:
        rgba(255,255,255,.12);
}


.topbar-user > span {
    display: none;

    font-size: 13px;
    font-weight: 700;
}


.mobile-logo {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background:
        rgba(255,255,255,.18);

    font-weight: 900;
}


.topbar-title {
    font-weight: 800;
}


/* SIDEBAR */

.sidebar {
    display: none;
}


.sidebar-brand {
    display: flex;
    align-items: center;

    gap: 11px;

    padding:
        4px
        7px
        22px;
}


.sidebar-brand > div:last-child {
    min-width: 0;
}


.sidebar-brand strong,
.sidebar-brand span {
    display: block;
}


.sidebar-brand strong {
    font-size: 16px;
}


.sidebar-brand span {
    margin-top: 2px;

    color: var(--muted);

    font-size: 11px;
}


.brand-mark {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background: var(--orange);
    color: white;

    font-size: 20px;
    font-weight: 900;
}


.sidebar-nav {
    display: grid;
    gap: 3px;
}


.sidebar-nav a {
    min-height: 44px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding:
        0
        12px;

    border-radius: 9px;

    color: var(--muted);

    font-size: 14px;
    font-weight: 650;
}


.sidebar-nav a:hover {
    background: var(--surface-2);
    color: var(--text);
}


.sidebar-nav a.active {
    background:
        rgba(231,127,25,.16);

    color: #f09a46;
}


.nav-icon {
    width: 22px;

    text-align: center;

    font-size: 17px;
}


.sidebar-bottom {
    margin-top: auto;

    display: grid;
    gap: 9px;
}


.mealie-status {
    display: flex;
    align-items: center;

    gap: 10px;

    padding:
        10px
        11px;

    border-radius: 10px;

    background: var(--surface-2);
}


.mealie-status > div {
    flex: 1;
}


.mealie-status strong,
.mealie-status small {
    display: block;
}


.mealie-status strong {
    font-size: 12px;
}


.mealie-status small {
    margin-top: 2px;

    color: var(--muted);

    font-size: 10px;
}


.external-icon {
    color: var(--muted);
}


.online-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    display: inline-block;

    border-radius: 50%;

    background: #26b875;

    box-shadow:
        0 0 0 4px
        rgba(38,184,117,.12);
}


.user-card {
    display: flex;
    align-items: center;

    gap: 10px;

    padding:
        10px;

    border:
        1px solid var(--border);

    border-radius: 11px;

    background: var(--surface-2);
}


.avatar {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--green-soft);
    color: #59d69a;

    font-weight: 850;
}


.small-avatar {
    width: 31px;
    height: 31px;

    flex-basis: 31px;

    color: white;

    background:
        rgba(255,255,255,.17);
}


.user-info {
    min-width: 0;
    flex: 1;
}


.user-info strong,
.user-info small {
    display: block;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.user-info strong {
    font-size: 12px;
}


.user-info small {
    margin-top: 2px;

    color: var(--muted);

    font-size: 10px;
}


.icon-button {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 0;

    border-radius: 9px;

    background:
        rgba(255,255,255,.10);

    color: white;

    font-size: 17px;
}


.icon-button:hover {
    background:
        rgba(255,255,255,.18);
}


.logout-button {
    color: var(--muted);
    background: transparent;
}


.logout-button:hover {
    color: var(--text);
    background: var(--surface-3);
}


/* CONTENT */

.content {
    width: 100%;
    max-width: 1650px;

    margin: 0 auto;

    padding:
        26px
        16px
        96px;
}


/* PAGE HEADER */

.page-header {
    display: flex;
    flex-direction: column;

    gap: 14px;

    margin-bottom: 25px;
}


.eyebrow {
    display: block;

    margin-bottom: 5px;

    color: #f09a46;

    text-transform: uppercase;

    font-size: 11px;
    font-weight: 850;

    letter-spacing: .1em;
}


.page-header h1 {
    margin:
        0
        0
        7px;

    font-size:
        clamp(
            30px,
            6vw,
            44px
        );

    line-height: 1.05;

    letter-spacing: -.04em;
}


.page-header p {
    max-width: 760px;

    margin: 0;

    color: var(--muted);

    line-height: 1.5;
}


.connected {
    width: fit-content;

    display: flex;
    align-items: center;

    gap: 8px;

    padding:
        8px
        11px;

    border:
        1px solid
        rgba(38,184,117,.25);

    border-radius: 999px;

    background:
        rgba(38,184,117,.09);

    color: #55d496;

    font-size: 12px;
    font-weight: 750;
}


/* QUICK STATS */

.quick-stats {
    display: grid;

    grid-template-columns:
        1fr;

    gap: 11px;

    margin-bottom: 34px;
}


.quick-card {
    display: flex;
    align-items: center;

    gap: 14px;

    padding: 16px;

    border:
        1px solid var(--border);

    border-radius: var(--radius);

    background: var(--surface);

    box-shadow: var(--shadow);
}


.quick-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background: var(--surface-2);

    font-size: 22px;
}


.quick-card span,
.quick-card strong,
.quick-card small {
    display: block;
}


.quick-card > div:last-child > span {
    color: var(--muted);

    font-size: 11px;
}


.quick-card strong {
    margin: 2px 0;

    font-size: 22px;
}


.quick-card small {
    color: var(--muted);

    font-size: 11px;
}


/* SECTIONS */

.section {
    margin-top: 35px;
}


.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 14px;
}


.section-head h2 {
    margin:
        0
        0
        4px;

    font-size: 21px;

    letter-spacing: -.025em;
}


.section-head p {
    margin: 0;

    color: var(--muted);

    font-size: 13px;
}


.section-head > a {
    display: none;

    color: #f09a46;

    font-size: 13px;
    font-weight: 750;
}


/* OFFERS */

.offer-grid {
    display: grid;

    grid-template-columns:
        1fr;

    gap: 14px;
}


.offer-card {
    overflow: hidden;

    border:
        1px solid var(--border);

    border-radius: var(--radius);

    background: var(--surface);

    box-shadow: var(--shadow);
}


.offer-image {
    position: relative;

    min-height: 180px;

    background:
        linear-gradient(
            135deg,
            #3a342e,
            #262421
        );
}


html[data-theme="light"] .offer-image {
    background:
        linear-gradient(
            135deg,
            #eee7df,
            #d9d2c8
        );
}


.offer-image.beef {
    background:
        radial-gradient(
            circle at 25% 25%,
            rgba(255,255,255,.10),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #6c493e,
            #352a27
        );
}


.offer-image.pasta {
    background:
        radial-gradient(
            circle at 25% 25%,
            rgba(255,255,255,.10),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #75652f,
            #3a341f
        );
}


.deal-badge {
    position: absolute;

    top: 12px;
    left: 12px;

    padding:
        6px
        9px;

    border-radius: 999px;

    background: var(--red);
    color: white;

    font-size: 10px;
    font-weight: 850;

    box-shadow:
        0 5px 14px
        rgba(0,0,0,.22);
}


.deal-badge.good {
    background: var(--green);
}


.deal-badge.average {
    background: var(--yellow);
    color: #332800;
}


.offer-content {
    padding: 16px;
}


.retailer {
    width: fit-content;

    margin-bottom: 8px;

    padding:
        4px
        7px;

    border-radius: 6px;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .06em;
}


.retailer.penny {
    background: #df142b;
    color: white;
}


.retailer.hofer {
    background: #155cb4;
    color: white;
}


.retailer.lidl {
    background: #ffd800;
    color: #0b3f88;
}


.retailer.spar {
    background: #168545;
    color: white;
}


.offer-content h3 {
    margin:
        0
        0
        9px;

    font-size: 20px;

    letter-spacing: -.025em;
}


.price-row {
    display: flex;
    align-items: baseline;

    gap: 7px;

    flex-wrap: wrap;
}


.price-row strong {
    font-size: 27px;

    letter-spacing: -.04em;
}


.price-row span {
    color: var(--muted);

    font-size: 11px;
}


.price-row del {
    margin-left: auto;

    color: #858585;

    font-size: 12px;
}


.saving {
    margin-top: 9px;

    color: #55d496;

    font-size: 12px;
    font-weight: 750;
}


.comparison {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 14px;
}


.comparison span {
    padding:
        6px
        8px;

    border-radius: 6px;

    background: var(--surface-2);
    color: var(--muted);

    font-size: 10px;
}


.offer-actions {
    display: grid;

    grid-template-columns:
        1fr;

    gap: 8px;

    margin-top: 16px;
}


.offer-actions button {
    min-height: 44px;

    border-radius: 9px;

    font-weight: 750;
}


button.primary {
    border: 0;

    background: var(--green);
    color: white;
}


button.primary:hover {
    background: var(--green-dark);
}


button.secondary {
    border:
        1px solid var(--border);

    background: var(--surface-2);
    color: var(--text);
}


/* OPTIMIZER */

.optimizer {
    display: grid;

    gap: 20px;

    padding: 20px;

    border:
        1px solid var(--border);

    border-radius: var(--radius);

    background: var(--surface);

    box-shadow: var(--shadow);
}


.status-pill {
    display: inline-flex;

    padding:
        5px
        8px;

    border-radius: 999px;

    background:
        rgba(231,127,25,.15);

    color: #f09a46;

    font-size: 10px;
    font-weight: 850;
}


.optimizer-text h3 {
    margin:
        10px
        0
        7px;

    font-size: 21px;
}


.optimizer-text p {
    margin: 0;

    color: var(--muted);

    line-height: 1.5;
}


.optimizer-text a {
    display: inline-block;

    margin-top: 14px;

    color: #f09a46;

    font-weight: 750;
}


.optimizer-options {
    display: grid;
    gap: 8px;
}


.optimizer-options > div {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:
        3px
        14px;

    padding:
        12px
        13px;

    border-radius: 9px;

    background: var(--surface-2);
}


.optimizer-options .recommended {
    border:
        1px solid
        rgba(34,160,107,.36);

    background:
        rgba(34,160,107,.11);
}


.optimizer-options small {
    grid-column:
        1 / -1;

    color: var(--muted);

    font-size: 10px;
}


/* TOOLBAR */

.toolbar {
    display: flex;
    flex-direction: column;

    gap: 11px;

    margin-bottom: 18px;
}


.filters {
    display: flex;

    gap: 7px;

    overflow-x: auto;

    padding-bottom: 3px;

    scrollbar-width: none;
}


.filters::-webkit-scrollbar {
    display: none;
}


.filter {
    min-height: 38px;

    flex: 0 0 auto;

    padding:
        0
        13px;

    border:
        1px solid var(--border);

    border-radius: 999px;

    background: var(--surface);
    color: var(--muted);
}


.filter.active {
    border-color: var(--orange);

    background:
        rgba(231,127,25,.14);

    color: #f09a46;

    font-weight: 750;
}


.sort {
    min-height: 40px;

    padding:
        0
        11px;

    border:
        1px solid var(--border);

    border-radius: 9px;

    background: var(--surface);
    color: var(--text);
}


/* PLACEHOLDER */

.placeholder {
    min-height: 360px;

    display: grid;
    place-items: center;

    padding: 30px;

    border:
        1px dashed var(--border);

    border-radius: var(--radius);

    background: var(--surface);

    text-align: center;
}


.placeholder-inner {
    max-width: 500px;
}


.placeholder-icon {
    margin-bottom: 12px;

    font-size: 38px;
}


.placeholder h2 {
    margin:
        0
        0
        8px;
}


.placeholder p {
    margin: 0;

    color: var(--muted);

    line-height: 1.5;
}


.demo-note {
    margin-top: 25px;

    padding:
        10px
        13px;

    border-radius: 9px;

    background: var(--surface-2);
    color: var(--muted);

    font-size: 11px;
}


/* MOBILE NAV */

.mobile-nav {
    position: fixed;
    z-index: 50;

    left: 0;
    right: 0;
    bottom: 0;

    min-height: 70px;

    display: grid;
    grid-template-columns:
        repeat(4,1fr);

    padding:
        6px
        8px
        max(
            6px,
            env(safe-area-inset-bottom)
        );

    border-top:
        1px solid var(--border);

    background:
        rgba(25,25,25,.97);

    backdrop-filter:
        blur(16px);
}


html[data-theme="light"] .mobile-nav {
    background:
        rgba(255,255,255,.97);
}


.mobile-nav a {
    min-height: 52px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 3px;

    border-radius: 9px;

    color: var(--muted);
}


.mobile-nav a > span {
    font-size: 19px;
}


.mobile-nav small {
    font-size: 10px;
}


.mobile-nav a.active {
    color: #f09a46;

    background:
        rgba(231,127,25,.13);
}


/* TABLET */

@media (min-width: 700px) {

    .quick-stats {
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .offer-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .offer-actions {
        grid-template-columns:
            1fr
            auto;
    }

    .section-head > a {
        display: block;
    }

    .toolbar {
        flex-direction: row;

        align-items: center;
        justify-content: space-between;
    }

    .sort {
        min-width: 220px;
    }
}


/* DESKTOP */

@media (min-width: 980px) {

    .app-shell {
        display: grid;

        grid-template-columns:
            250px
            minmax(0,1fr);
    }

    .sidebar {
        position: sticky;
        top: 0;

        height: 100vh;

        display: flex;
        flex-direction: column;

        padding:
            18px
            14px
            14px;

        border-right:
            1px solid var(--border);

        background: var(--sidebar);
    }

    .workspace {
        min-width: 0;
    }

    .topbar {
        height: 54px;

        padding:
            0
            25px;
    }

    .mobile-logo,
    .topbar-title {
        display: none;
    }

    .topbar-left::before {
        content: "☰";

        font-size: 20px;
        opacity: .9;
    }

    .topbar-user > span {
        display: block;
    }

    .content {
        padding:
            33px
            38px
            70px;
    }

    .page-header {
        flex-direction: row;

        align-items: flex-start;
        justify-content: space-between;
    }

    .mobile-nav {
        display: none;
    }

    .optimizer {
        grid-template-columns:
            minmax(0,1.05fr)
            minmax(340px,.95fr);

        padding: 24px;
    }
}


/* WIDE */

@media (min-width: 1280px) {

    .app-shell {
        grid-template-columns:
            265px
            minmax(0,1fr);
    }

    .content {
        padding-left: 48px;
        padding-right: 48px;
    }

    .offer-grid {
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }
}


/* ULTRAWIDE */

@media (min-width: 1650px) {

    .content {
        padding-left: 64px;
        padding-right: 64px;
    }

    .offer-grid {
        grid-template-columns:
            repeat(4,minmax(0,1fr));
    }
}

/* =========================================================
   LOGIN
   ========================================================= */

.login-page {
    min-height: 100vh;
    background: var(--bg);
}

.login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
}

.login-hero {
    display: none;
}

.login-form-side {
    min-height: 100vh;

    display: grid;
    place-items: center;

    padding:
        28px
        18px;
}

.login-card {
    width: 100%;
    max-width: 440px;

    padding: 28px;

    border:
        1px solid var(--border);

    border-radius: 18px;

    background:
        var(--surface);

    box-shadow:
        var(--shadow);
}

.login-mobile-brand,
.login-brand {
    display: flex;
    align-items: center;

    gap: 12px;
}

.login-mobile-brand {
    margin-bottom: 32px;
}

.login-mobile-brand strong,
.login-mobile-brand span,
.login-brand strong,
.login-brand span {
    display: block;
}

.login-mobile-brand strong,
.login-brand strong {
    font-size: 16px;
}

.login-mobile-brand span,
.login-brand span {
    margin-top: 2px;

    color: var(--muted);

    font-size: 11px;
}

.login-card h2 {
    margin:
        7px
        0
        9px;

    font-size:
        clamp(
            27px,
            7vw,
            34px
        );

    letter-spacing: -.035em;
}

.login-subtitle {
    margin:
        0
        0
        27px;

    color: var(--muted);

    line-height: 1.55;
}

.login-form {
    display: grid;

    gap: 18px;
}

.login-form label {
    display: grid;

    gap: 8px;

    color: var(--text);

    font-size: 13px;
    font-weight: 750;
}

.login-form input {
    width: 100%;
    min-height: 49px;

    padding:
        0
        13px;

    border:
        1px solid var(--border);

    border-radius: 10px;

    outline: none;

    background:
        var(--surface-2);

    color:
        var(--text);

    font-size: 16px;

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

.login-form input:focus {
    border-color:
        var(--orange);

    box-shadow:
        0 0 0 4px
        rgba(231,127,25,.12);
}

.login-submit {
    min-height: 50px;

    margin-top: 5px;

    border: 0;

    border-radius: 10px;

    background:
        var(--orange);

    color: white;

    font-weight: 850;

    font-size: 14px;

    transition:
        background .15s ease,
        transform .08s ease;
}

.login-submit:hover {
    background:
        var(--orange-hover);
}

.login-submit:active {
    transform:
        translateY(1px);
}

.login-security {
    display: flex;

    gap: 10px;

    margin-top: 24px;

    padding: 13px;

    border:
        1px solid
        rgba(34,160,107,.26);

    border-radius: 10px;

    background:
        rgba(34,160,107,.08);
}

.login-security > span {
    color:
        #35bd7d;

    font-size: 12px;
}

.login-security strong,
.login-security small {
    display: block;
}

.login-security strong {
    color:
        #54d293;

    font-size: 12px;
}

.login-security small {
    margin-top: 3px;

    color:
        var(--muted);

    line-height: 1.4;

    font-size: 10px;
}

.login-error {
    margin-bottom: 19px;

    padding:
        12px
        13px;

    border:
        1px solid
        rgba(224,75,67,.28);

    border-radius: 10px;

    background:
        rgba(224,75,67,.09);

    color:
        #ff8078;

    font-size: 12px;
}


/* DESKTOP LOGIN */

@media (min-width: 900px) {

    .login-shell {
        grid-template-columns:
            minmax(430px,.9fr)
            minmax(500px,1.1fr);
    }

    .login-hero {
        position: relative;

        display: block;

        overflow: hidden;

        min-height: 100vh;

        padding:
            42px
            55px;

        background:
            linear-gradient(
                145deg,
                #241c15,
                #151515 58%,
                #171717
            );
    }

    .login-hero::before {
        content: "";

        position: absolute;

        width: 520px;
        height: 520px;

        left: -220px;
        bottom: -250px;

        border-radius: 50%;

        background:
            rgba(231,127,25,.08);

        filter:
            blur(2px);
    }

    .login-hero::after {
        content: "";

        position: absolute;

        width: 350px;
        height: 350px;

        right: -180px;
        top: -150px;

        border-radius: 50%;

        border:
            70px solid
            rgba(231,127,25,.05);
    }

    .login-hero-inner {
        position: relative;
        z-index: 2;

        height: 100%;

        display: flex;
        flex-direction: column;
    }

    .login-brand {
        margin-bottom: auto;
    }

    .login-hero-copy {
        max-width: 620px;

        padding:
            80px
            0;
    }

    .login-hero-copy h1 {
        margin:
            8px
            0
            20px;

        font-size:
            clamp(
                46px,
                4.5vw,
                72px
            );

        line-height: .98;

        letter-spacing: -.055em;
    }

    .login-hero-copy > p {
        max-width: 570px;

        margin: 0;

        color: var(--muted);

        font-size: 16px;

        line-height: 1.65;
    }

    .login-features {
        display: grid;

        gap: 10px;

        margin-top: 36px;
    }

    .login-features > div {
        display: flex;
        align-items: center;

        gap: 13px;

        max-width: 500px;

        padding: 11px;

        border-radius: 11px;

        background:
            rgba(255,255,255,.035);
    }

    .login-features > div > span {
        width: 39px;
        height: 39px;

        flex: 0 0 39px;

        display: grid;
        place-items: center;

        border-radius: 10px;

        background:
            rgba(231,127,25,.12);

        color:
            #f09a46;

        font-weight: 850;
    }

    .login-features strong,
    .login-features small {
        display: block;
    }

    .login-features strong {
        font-size: 13px;
    }

    .login-features small {
        margin-top: 2px;

        color: var(--muted);

        font-size: 11px;
    }

    .login-form-side {
        padding: 50px;
    }

    .login-card {
        padding: 38px;
    }

    .login-mobile-brand {
        display: none;
    }
}

/* === LIVE OFFERS START === */

.offer-status-tabs {
    display: flex;
    gap: 7px;
    margin-bottom: 16px;
}

.offer-status-tab {
    display: flex;
    align-items: center;
    gap: 8px;

    min-height: 40px;

    padding:
        0
        14px;

    border:
        1px solid var(--border);

    border-radius: 999px;

    background:
        var(--surface);

    color:
        var(--muted);

    text-decoration: none;

    font-size: 12px;
    font-weight: 750;
}

.offer-status-tab span {
    display: grid;
    place-items: center;

    min-width: 23px;
    height: 23px;

    padding:
        0
        6px;

    border-radius: 999px;

    background:
        var(--surface-2);

    font-size: 10px;
}

.offer-status-tab.active {
    border-color:
        var(--orange);

    background:
        rgba(231,127,25,.14);

    color:
        #f09a46;
}


.offer-search {
    display: grid;

    grid-template-columns:
        minmax(0,1fr);

    gap: 9px;

    margin-bottom: 12px;
}

.offer-search-field {
    display: flex;
    align-items: center;

    min-height: 44px;

    padding:
        0
        12px;

    gap: 8px;

    border:
        1px solid var(--border);

    border-radius: 10px;

    background:
        var(--surface);
}

.offer-search-field > span {
    color:
        var(--muted);

    font-size: 19px;
}

.offer-search-field input {
    min-width: 0;
    width: 100%;

    border: 0;
    outline: 0;

    background:
        transparent;

    color:
        var(--text);

    font-size: 14px;
}

.offer-search-field input::placeholder {
    color:
        var(--muted);
}

.offer-search-button {
    min-height: 42px;

    padding:
        0
        16px;

    border: 0;

    border-radius: 9px;

    background:
        var(--orange);

    color: white;

    font-weight: 800;
}

.filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    text-decoration: none;

    font-size: 11px;
}

.filter span {
    opacity: .68;

    font-size: 9px;
}

.offer-result-count {
    align-self: center;

    color:
        var(--muted);

    font-size: 11px;
    white-space: nowrap;
}


.live-offer-card {
    display: flex;
    flex-direction: column;
}

.live-offer-card .offer-content {
    display: flex;
    flex-direction: column;

    flex: 1;
}

.offer-image.has-product-image {
    display: grid;
    place-items: center;

    background:
        #f7f7f5;
}

.offer-product-image {
    width: 100%;
    height: 180px;

    padding: 12px;

    object-fit: contain;
}

.deal-badge.status-current {
    background:
        var(--green);
}

.deal-badge.status-upcoming {
    background:
        var(--orange);
}

.deal-badge.joe-badge {
    left: auto;
    right: 12px;

    background:
        #3473d9;
}


.offer-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 8px;
}

.offer-card-head .retailer {
    margin-bottom: 0;
}

.offer-validity {
    color:
        var(--muted);

    font-size: 10px;
    font-weight: 700;
}

.offer-meta {
    min-height: 17px;

    margin-top: -3px;
    margin-bottom: 13px;

    color:
        var(--muted);

    font-size: 11px;

    line-height: 1.45;
}

.live-price-row strong {
    font-size: 29px;
}

.normalized-price {
    margin-top: 5px;

    color:
        var(--text);

    font-size: 12px;
    font-weight: 750;
}

.offer-condition {
    width: fit-content;

    margin-top: 8px;

    padding:
        5px
        8px;

    border-radius: 6px;

    background:
        rgba(52,115,217,.12);

    color:
        #68a0ff;

    font-size: 10px;
    font-weight: 750;
}

.loyalty-comparison {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-top: 11px;

    padding:
        8px
        10px;

    border:
        1px solid
        rgba(52,115,217,.20);

    border-radius: 8px;

    background:
        rgba(52,115,217,.07);

    font-size: 10px;
}

.loyalty-comparison span {
    color:
        var(--muted);
}

.loyalty-comparison strong {
    font-size: 12px;
}

.offer-period {
    margin-top: 11px;

    color:
        var(--muted);

    font-size: 10px;
}

.live-offer-card .offer-actions {
    margin-top: auto;

    padding-top: 17px;
}

.offer-actions button:disabled {
    opacity: .62;

    cursor: not-allowed;
}

.offer-source {
    display: block;

    margin-top: 11px;

    color:
        var(--muted);

    text-align: center;

    text-decoration: none;

    font-size: 10px;
}

.offer-source:hover {
    color:
        #f09a46;
}


.offer-empty {
    min-height: 330px;

    display: grid;
    place-items: center;

    align-content: center;

    padding: 35px;

    border:
        1px dashed var(--border);

    border-radius:
        var(--radius);

    text-align: center;

    background:
        var(--surface);
}

.offer-empty-icon {
    margin-bottom: 8px;

    font-size: 32px;
}

.offer-empty h2 {
    margin:
        0
        0
        7px;

    font-size: 20px;
}

.offer-empty p {
    max-width: 430px;

    margin: 0;

    color:
        var(--muted);

    font-size: 12px;
}

.offer-empty small {
    margin-top: 10px;

    color:
        #f09a46;
}


.offer-pagination {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 12px;

    margin-top: 22px;

    padding:
        14px
        0;

    color:
        var(--muted);

    font-size: 11px;
}

.offer-pagination a {
    color:
        #f09a46;

    text-decoration: none;

    font-weight: 750;
}

.offer-pagination a:last-child {
    text-align: right;
}


@media (min-width: 700px) {

    .offer-search {
        grid-template-columns:
            minmax(260px,1fr)
            auto
            auto;

        align-items: center;
    }

    .offer-search .sort {
        min-width: 220px;
    }
}

/* === LIVE OFFERS END === */