:root {
    --night: #182520;
    --panel: #ffffff;
    --panel2: #eef2eb;
    --text: #1a2723;
    --muted: #64736d;
    --lime: #c9ff55;
    --orange: #e8912f;
    --red: #dd4b46;
    --purple: #7764a7;
    --line: rgba(28, 49, 41, .12);
}

body {
    background:
        radial-gradient(circle at 5% 0%, rgba(201, 255, 85, .15), transparent 32rem),
        #f5f6f0;
    color: var(--text);
}

.site-header {
    background: rgba(250, 251, 246, .9);
    border-bottom-color: rgba(28, 49, 41, .09);
    box-shadow: 0 6px 26px rgba(37, 55, 48, .04);
}

.brand { color: #17251f; }
.site-nav { color: #5e6d67; }
.site-nav .partner-link,
.ejk-primary-actions .ejk-locate,
.ejk-searchbar button:last-child,
.ejk-quick-actions a.primary,
.ejk-public-form button,
.ejk-button {
    color: #172119;
    box-shadow: 0 5px 18px rgba(122, 156, 43, .14);
}

.hero.hero-realtime {
    position: relative;
}

.hero.hero-realtime::after {
    content: "";
    position: absolute;
    right: 4%;
    top: 18px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: var(--lime);
    opacity: .16;
    filter: blur(2px);
    pointer-events: none;
}

.hero h1 { color: #17251f; }
.eyebrow { color: #66861d; }

.ejk-primary-actions button,
.ejk-chips button,
.ejk-searchbar,
.ejk-searchbar input,
.ejk-searchbar button,
.ejk-filters select,
.ejk-view-toggle,
.ejk-public-form input,
.ejk-public-form textarea {
    color: var(--text);
}

.ejk-primary-actions button,
.ejk-searchbar,
.ejk-searchbar input,
.ejk-filters select,
.ejk-view-toggle,
.ejk-public-form,
.ejk-partner-place,
.ejk-panel,
.place-panel {
    background: rgba(255, 255, 255, .9);
}

.ejk-primary-actions button:not(.ejk-locate):hover,
.ejk-chips button:hover,
.ejk-chips button.active {
    background: #21332c;
    color: #fff;
}

.ejk-card {
    background: #fff;
    border-color: rgba(28, 49, 41, .1);
    box-shadow: 0 15px 45px rgba(34, 55, 47, .08);
}

.ejk-card:hover {
    border-color: rgba(114, 146, 42, .32);
    box-shadow: 0 19px 52px rgba(34, 55, 47, .12);
}

.ejk-card.featured {
    border-color: rgba(148, 188, 55, .42);
    box-shadow: 0 0 0 1px rgba(201, 255, 85, .23), 0 18px 50px rgba(34, 55, 47, .1);
}

.ejk-card-img,
.place-photo { background: #e7ece4; }
.ejk-category,
.ejk-address,
.ejk-venue-time,
.ejk-trust,
.ejk-app #ejk-summary p { color: var(--muted); }

.ejk-offer {
    background: linear-gradient(135deg, rgba(201, 255, 85, .2), rgba(237, 247, 208, .7));
    border-color: rgba(126, 158, 51, .22);
}
.ejk-offer small,
.ejk-offer b,
.ejk-card-cta { color: #587516; }

.ejk-time-meter {
    --time-color: #58a65c;
    --time-pct: 100%;
    margin: 17px 0 11px;
    padding: 13px 14px;
    border: 1px solid color-mix(in srgb, var(--time-color) 24%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--time-color) 8%, white);
}

.ejk-time-meter__copy {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.ejk-time-meter__copy small {
    color: #60706a;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.ejk-time-meter__copy strong {
    color: var(--time-color);
    font-size: 13px;
    text-align: right;
}

.ejk-time-meter__track {
    position: relative;
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(28, 49, 41, .09);
}

.ejk-time-meter__track::after {
    content: "";
    display: block;
    width: max(4%, var(--time-pct));
    height: 100%;
    border-radius: inherit;
    background: var(--time-color);
    box-shadow: 0 0 13px color-mix(in srgb, var(--time-color) 35%, transparent);
    transition: width .45s ease, background-color .45s ease;
}

.ejk-time-meter__scale {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    color: #89938f;
    font-size: 9px;
}

.place-state {
    background: #edf5e6;
    color: #397643;
}
.place-state.closing {
    background: #fff0e7;
    color: #b85a2d;
}
.place-venue-note { color: var(--muted); }

.site-footer {
    background: #edf0e8;
    border-top-color: rgba(28, 49, 41, .09);
}

@supports not (color: color-mix(in srgb, red, white)) {
    .ejk-time-meter { background: #f5f7f1; border-color: rgba(28, 49, 41, .12); }
}

@media (max-width: 600px) {
    .hero.hero-realtime::after { width: 110px; height: 110px; opacity: .12; }
    .ejk-time-meter { padding: 11px 12px; }
    .ejk-time-meter__copy { display: block; }
    .ejk-time-meter__copy strong { display: block; margin-top: 3px; text-align: left; }
}