/*
    KwikEat order site: the look of the KwikEat merchant portal (KwikEat.Merchant's
    wwwroot/css/kwikeat.css, itself the look of KwikEat Desktop) on top of the
    DevExpress Fluent theme with the KwikEat green as accent (App.razor). Only the
    colours, header, cards and the few helper classes these pages use - no
    Bootstrap.
*/

:root {
    --ke-red: #D42814;
    --ke-red-dark: #B3210F;
    --ke-red-darker: #931B0C;
    --ke-yellow: #FFC107;
    --ke-yellow-logo: #FCCD2A;
    --ke-green: #1E8C3A;
    --ke-green-dark: #06300B;
    --ke-green-pressed: #19772F;
    --ke-green-light: #DBEDDF;
    --ke-secondary: #DBEDDF;
    --ke-secondary-hover: #C4E1CC;
    --ke-amber: #8A6100;
    --ke-amber-light: #FFF4D6;
    --ke-red-light: #FBE2DE;
    --ke-surface: #FFFFFF;
    --ke-background: #FBF7F1;
    --ke-text: #2B2523;
    --ke-text-muted: #6E6461;
    --ke-border: #E8DFD4;
    --ke-font: "Segoe UI", "Segoe UI Variable", system-ui, -apple-system, Roboto, sans-serif;
    --ke-header-height: 56px;
    /* every DevExpress component's font, as in the merchant portal */
    --dxds-font-family-sans-serif: var(--ke-font);
}

html, body {
    margin: 0;
    background: var(--ke-background);
    color: var(--ke-text);
    font-family: var(--ke-font);
}

a {
    color: var(--ke-green);
}

/* ---- buttons: green primary, light green secondary (as KwikEat Desktop) ---- */

.dxbl-btn.dxbl-btn-primary {
    --dxbl-btn-bg: var(--ke-green);
    --dxbl-btn-border-color: var(--ke-green);
    --dxbl-btn-hover-bg: var(--ke-green-pressed);
    --dxbl-btn-hover-border-color: var(--ke-green-pressed);
    --dxbl-btn-active-bg: var(--ke-green-dark);
    --dxbl-btn-active-border-color: var(--ke-green-dark);
    --dxbl-btn-color: #fff;
    font-weight: 600;
}

.dxbl-btn.dxbl-btn-secondary {
    --dxbl-btn-bg: var(--ke-secondary);
    --dxbl-btn-border-color: var(--ke-secondary);
    --dxbl-btn-hover-bg: var(--ke-secondary-hover);
    --dxbl-btn-hover-border-color: var(--ke-secondary-hover);
    --dxbl-btn-active-bg: var(--ke-secondary-hover);
    --dxbl-btn-active-border-color: var(--ke-secondary-hover);
    --dxbl-btn-color: var(--ke-green-dark);
    font-weight: 600;
}

/* plain-anchor buttons on static SSR pages (no circuit for DxButton) */
a.ke-button {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 6px;
    background: var(--ke-green);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

a.ke-button:hover {
    background: var(--ke-green-pressed);
    color: #fff;
}

a.ke-button.ke-button-secondary {
    background: var(--ke-secondary);
    color: var(--ke-green-dark);
}

a.ke-button.ke-button-secondary:hover {
    background: var(--ke-secondary-hover);
}

/* ---- the frame: red header, page, footer ---- */

.ke-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.ke-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--ke-red);
    color: #fff;
    min-height: var(--ke-header-height);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 0 16px;
}

.ke-logo {
    display: block;
    height: 28px;
    margin-right: 12px;
}

.ke-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
}

.ke-nav-right {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

/* the header's links, as the desktop's module buttons: red, the current one yellow */
.ke-nav a, .ke-nav-right a, .ke-nav-right button {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #fff;
    font: 600 14px var(--ke-font);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.ke-nav a:hover, .ke-nav-right a:hover, .ke-nav-right button:hover {
    background: var(--ke-red-dark);
    color: #fff;
}

.ke-nav a.ke-nav-current {
    background: var(--ke-yellow);
    color: var(--ke-text);
}

.ke-nav-right form {
    margin: 0;
}

.ke-main {
    flex: 1 0 auto;
}

.ke-page {
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 20px 40px 20px;
}

.ke-page-narrow {
    max-width: 760px;
}

.ke-page-title {
    font-size: 26px;
    font-weight: 600;
    margin: 0 0 6px 0;
}

.ke-page-subtitle {
    color: var(--ke-text-muted);
    font-size: 16px;
    margin: 0 0 20px 0;
}

.ke-footer {
    border-top: 1px solid var(--ke-border);
    background: var(--ke-surface);
    color: var(--ke-text-muted);
    font-size: 13px;
    text-align: center;
    padding: 18px 16px;
}

.ke-footer a {
    color: var(--ke-text-muted);
}

/* ---- cards (FormCard on the desktop) ---- */

.ke-card {
    background: var(--ke-surface);
    border: 1px solid var(--ke-border);
    border-radius: 8px;
    padding: 24px 28px;
}

.ke-card + .ke-card {
    margin-top: 16px;
}

.ke-card h3, .ke-card-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 12px 0;
}

/* the start page: intro + feature cards */
.ke-hero {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 24px;
    align-items: center;
    margin-bottom: 24px;
}

.ke-hero-logo {
    width: 100%;
    max-width: 320px;
    justify-self: center;
}

.ke-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.ke-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.ke-feature h4 {
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ke-green-dark);
}

.ke-feature p {
    margin: 0;
    color: var(--ke-text-muted);
    font-size: 14px;
}

/* the start page's screenshots: KwikEat Desktop in a window frame, the lightbox on click (Shared/Screenshot) */
.ke-page-wide {
    max-width: 1240px;
}

.ke-shot {
    display: block;
    width: 100%;
    padding: 0;
    cursor: zoom-in;
    border: 1px solid var(--ke-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--ke-surface);
    box-shadow: 0 6px 24px rgba(43, 37, 35, .14);
    transition: box-shadow .15s, transform .15s;
}

.ke-shot:hover {
    box-shadow: 0 10px 32px rgba(43, 37, 35, .22);
    transform: translateY(-2px);
}

.ke-shot img {
    display: block;
    width: 100%;
    height: auto;
}

.ke-shot-hero {
    max-width: 860px;
    margin: 24px auto;
}

/* the lightbox: all screenshots in a carousel */
.ke-lightbox .dxbl-modal-body {
    padding: 8px;
}

.ke-lightbox .dxbl-carousel {
    background: var(--ke-background);
}

/* the four selling points under the big screenshot */
.ke-usps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.ke-usp {
    background: var(--ke-red);
    color: #fff;
    border-radius: 8px;
    padding: 18px 20px;
}

.ke-usp strong {
    display: block;
    font-size: 18px;
    margin-bottom: 4px;
    color: var(--ke-yellow-logo);
}

.ke-usp span {
    font-size: 14px;
    line-height: 1.45;
}

/* a part of KwikEat: text and screenshot side by side, every other one the other way round */
.ke-showcase {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 32px;
    align-items: center;
}

.ke-showcase:nth-of-type(even) .ke-showcase-text {
    order: 2;
}

.ke-showcase h2, .ke-cta h2, .ke-section-title {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 10px 0;
}

.ke-showcase p {
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.ke-showcase ul {
    margin: 0;
    padding-left: 20px;
    color: var(--ke-text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.ke-showcase li::marker {
    color: var(--ke-green);
}

.ke-section-title {
    margin: 32px 0 12px 0;
}

.ke-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    background: var(--ke-green-light);
    border-color: var(--ke-secondary-hover);
}

.ke-cta p {
    margin: 0;
}

.ke-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 900px) {
    .ke-showcase {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ke-showcase:nth-of-type(even) .ke-showcase-text {
        order: 0;
    }
}

@media (max-width: 720px) {
    .ke-hero {
        grid-template-columns: 1fr;
    }

    .ke-hero-logo {
        max-width: 220px;
    }

    .ke-card {
        padding: 18px 16px;
    }
}

/* the price line above the order form */
.ke-price {
    background: var(--ke-green-light);
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 24px;
}

.ke-price p {
    margin: 0;
}

/* ---- helpers the pages use (formerly Bootstrap's) ---- */

.alert {
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid transparent;
}

.alert-info {
    background: var(--ke-green-light);
    border-color: var(--ke-secondary-hover);
}

.alert-danger {
    background: var(--ke-red-light);
    border-color: #F3B8AF;
    color: var(--ke-red-darker);
}

.text-muted { color: var(--ke-text-muted); }
.text-success { color: var(--ke-green); }
.text-danger { color: var(--ke-red); }
.text-warning { color: var(--ke-amber); }

.w-100 { width: 100%; }
.p-0 { padding: 0 !important; }
.mt-3 { margin-top: 1rem; }
.pt-3 { padding-top: 1rem; }
.d-flex { display: flex; }
.flex-row-reverse { flex-direction: row-reverse; }

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th, .table td {
    text-align: left;
    padding: 8px;
    border-bottom: 1px solid var(--ke-border);
}

/* StripePaymentPanel's plain submit button (not a DxButton - Stripe.js drives it) */
.btn.btn-primary {
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    background: var(--ke-green);
    color: #fff;
    font: 600 16px var(--ke-font);
    cursor: pointer;
}

.btn.btn-primary:hover {
    background: var(--ke-green-pressed);
}

.btn.btn-primary:disabled {
    opacity: .6;
    cursor: default;
}

/* the licence terms */
.ke-terms h4 {
    margin: 20px 0 6px 0;
    font-size: 16px;
}

/* the app's privacy policy (Pages/PrivacyNl, PrivacyEn): lists and the table
   of what is sent; the table scrolls sideways on a phone */
.ke-privacy ul {
    margin: 0 0 12px 0;
    padding-left: 20px;
}

.ke-privacy li + li {
    margin-top: 4px;
}

.ke-privacy a {
    text-decoration: underline;
}

.ke-privacy-table {
    overflow-x: auto;
    margin: 0 0 12px 0;
}

.ke-privacy-table table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 14px;
}

.ke-privacy-table th, .ke-privacy-table td {
    border: 1px solid var(--ke-border);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}

.ke-privacy-table th {
    background: var(--ke-green-light);
    font-weight: 600;
}

/* Blazor's reconnect UI (App.razor) - hidden unless blazor.web.js shows it */
#components-reconnect-modal {
    display: none;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    background: rgba(43, 37, 35, .45);
}

.components-reconnect-panel {
    background: var(--ke-surface);
    border-radius: 8px;
    padding: 20px 24px;
    max-width: 420px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}

.components-reconnect-panel p {
    display: none;
    margin: 0;
}

.components-reconnect-panel button, .components-reconnect-panel a {
    margin-left: 8px;
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    background: var(--ke-green);
    color: #fff;
    font: 600 14px var(--ke-font);
    text-decoration: none;
    cursor: pointer;
}

.components-reconnect-show .status-show,
.components-reconnect-failed .status-failed,
.components-reconnect-rejected .status-rejected {
    display: block;
}