/* =========================================================
   FOODDEY GLOBAL STYLES
   ========================================================= */

:root {
    --primary: #ff6b00;
    --primary-dark: #e85f00;
    --secondary: #111111;

    --background: #f7f7f7;
    --surface: #ffffff;

    --text: #171717;
    --muted: #737373;

    --border: #e8e8e8;

    --success: #16803c;
    --danger: #d93025;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;

    --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
    --shadow-md: 0 8px 25px rgba(0,0,0,0.08);

    --max-width: 1200px;
}

/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

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

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

    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
}

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

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

img {
    display: block;
    max-width: 100%;
}

ul,
ol {
    list-style: none;
}

/* =========================================================
   APP SHELL
   ========================================================= */

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

.main-content {
    flex: 1;
}

/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    background: #ffffff;
    border-bottom: 1px solid var(--border);

    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-inner {
    width: 100%;
    max-width: var(--max-width);

    margin: 0 auto;

    min-height: 64px;

    padding: 0 18px;

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

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-size: 21px;
    font-weight: 800;
}

.brand-icon {
    font-size: 22px;
}

.menu-toggle {
    border: 0;
    background: transparent;

    font-size: 25px;

    width: 44px;
    height: 44px;

    border-radius: 10px;
}

.menu-toggle:hover {
    background: #f3f3f3;
}

/* =========================================================
   MOBILE NAV
   ========================================================= */

.main-nav {
    display: none;

    position: absolute;

    left: 12px;
    right: 12px;
    top: 70px;

    background: #ffffff;

    padding: 10px;

    border-radius: 14px;

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

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

.main-nav.active {
    display: flex;
    flex-direction: column;
}

.main-nav a {
    padding: 13px 14px;
    border-radius: 9px;

    font-weight: 600;
}

.main-nav a:hover {
    background: #f6f6f6;
}

.main-nav .nav-register {
    background: var(--primary);
    color: #ffffff;
    text-align: center;
}

.main-nav .nav-register:hover {
    background: var(--primary-dark);
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    margin-top: 50px;

    background: #111111;
    color: #ffffff;
}

.footer-inner {
    max-width: var(--max-width);

    margin: 0 auto;

    padding: 35px 18px 20px;
}

.footer-logo {
    font-size: 20px;
    font-weight: 800;
}

.footer-brand p {
    color: #bdbdbd;
    margin-top: 7px;
}

.footer-links {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-top: 25px;
}

.footer-links a {
    color: #dddddd;
}

.footer-links a:hover {
    color: #ffffff;
}

.footer-bottom {
    border-top: 1px solid #333333;

    margin-top: 30px;
    padding-top: 18px;

    color: #999999;

    font-size: 13px;
}

/* =========================================================
   CONTAINERS
   ========================================================= */

.container {
    width: 100%;
    max-width: var(--max-width);

    margin: 0 auto;

    padding-left: 18px;
    padding-right: 18px;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
    display: inline-flex;

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

    min-height: 46px;

    padding: 0 18px;

    border: 0;

    border-radius: 10px;

    font-weight: 700;

    transition:
        transform 0.15s ease,
        background 0.15s ease;
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background: var(--primary);
    color: #ffffff;
}

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

.btn-secondary {
    background: #111111;
    color: #ffffff;
}

.btn-outline {
    background: #ffffff;
    color: var(--text);

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

/* =========================================================
   FORMS
   ========================================================= */

.form-group {
    margin-bottom: 17px;
}

.form-label {
    display: block;

    margin-bottom: 7px;

    font-weight: 600;

    font-size: 14px;
}

.form-control {
    width: 100%;

    min-height: 48px;

    padding: 0 14px;

    border: 1px solid #dcdcdc;

    border-radius: 10px;

    background: #ffffff;

    outline: none;

    transition: border-color 0.15s ease;
}

textarea.form-control {
    padding-top: 12px;
    padding-bottom: 12px;
    min-height: 110px;
}

.form-control:focus {
    border-color: var(--primary);
}

/* =========================================================
   CARDS
   ========================================================= */

.card {
    background: var(--surface);

    border-radius: var(--radius-md);

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

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

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (min-width: 768px) {

    .header-inner {
        min-height: 72px;
        padding: 0 24px;
    }

    .menu-toggle {
        display: none;
    }

    .main-nav {
        display: flex;

        position: static;

        padding: 0;

        border: 0;

        box-shadow: none;

        background: transparent;

        flex-direction: row;

        align-items: center;

        gap: 5px;
    }

    .main-nav a {
        padding: 9px 13px;
    }

    .main-nav .nav-register {
        padding-left: 18px;
        padding-right: 18px;
    }

    .footer-inner {
        padding-left: 24px;
        padding-right: 24px;
    }

    .footer-links {
        flex-direction: row;
        gap: 25px;
    }

}

@media (min-width: 1024px) {

    .header-inner {
        padding: 0 30px;
    }

    .container {
        padding-left: 30px;
        padding-right: 30px;
    }

}


/* =========================================================
   FOODDEY HOMEPAGE
   ========================================================= */

.fooddey-hero {
    background: #111111;
    color: #ffffff;

    padding: 18px 0 35px;
}

.location-bar {
    display: flex;
    align-items: center;

    gap: 10px;

    background: rgba(255,255,255,0.08);

    border: 1px solid rgba(255,255,255,0.12);

    padding: 10px 12px;

    border-radius: 12px;
}

.location-icon {
    font-size: 20px;
}

.location-content {
    flex: 1;

    min-width: 0;

    display: flex;
    flex-direction: column;
}

.location-content span {
    font-size: 11px;
    color: #aaaaaa;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}

.location-content strong {
    font-size: 13px;

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

.location-button {
    border: 0;

    background: transparent;

    color: #ff8a3d;

    font-weight: 700;

    font-size: 13px;
}

.hero-content {
    padding-top: 40px;
    padding-bottom: 25px;
}

.hero-label {
    display: inline-block;

    font-size: 11px;

    letter-spacing: 1.5px;

    font-weight: 800;

    color: #ff8a3d;

    margin-bottom: 8px;
}

.hero-content h1 {
    font-size: clamp(34px, 10vw, 56px);

    line-height: 1.05;

    letter-spacing: -1.5px;

    font-weight: 850;
}

.hero-content h1 span {
    color: #ff7419;
}

.hero-content p {
    margin-top: 15px;

    color: #cfcfcf;

    font-size: 15px;

    max-width: 500px;
}

/* SEARCH */

.food-search {
    display: flex;

    align-items: center;

    background: #ffffff;

    border-radius: 13px;

    padding: 5px;

    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}

.search-icon {
    padding-left: 11px;

    font-size: 18px;
}

.food-search input {
    flex: 1;

    min-width: 0;

    border: 0;

    outline: 0;

    padding: 13px 10px;

    color: #111111;

    background: transparent;
}

.food-search input::placeholder {
    color: #999999;
}

.food-search button {
    border: 0;

    background: var(--primary);

    color: #ffffff;

    border-radius: 9px;

    padding: 12px 15px;

    font-weight: 700;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.categories-section,
.nearby-section {
    padding: 32px 0;
}

.nearby-section {
    padding-top: 10px;
}

.section-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 18px;
}

.section-kicker {
    font-size: 10px;

    color: var(--primary);

    font-weight: 800;

    letter-spacing: 1.4px;
}

.section-heading h2 {
    font-size: 21px;

    line-height: 1.2;

    margin-top: 3px;

    letter-spacing: -0.4px;
}

.view-all {
    color: var(--primary);

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   CATEGORY CARDS
   ========================================================= */

.categories-scroll {
    display: flex;

    gap: 10px;

    overflow-x: auto;

    padding-bottom: 7px;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
}

.categories-scroll::-webkit-scrollbar {
    display: none;
}

.category-card {
    flex: 0 0 86px;

    text-align: center;

    background: #ffffff;

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

    border-radius: 13px;

    padding: 12px 6px;

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

    transition: transform 0.15s ease;
}

.category-card:active {
    transform: scale(0.96);
}

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

    margin: 0 auto 7px;

    display: flex;

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

    border-radius: 50%;

    background: #fff3ea;

    font-size: 25px;
}

.category-icon img {
    width: 100%;
    height: 100%;

    border-radius: 50%;

    object-fit: cover;
}

.category-card span {
    display: block;

    font-size: 11px;

    font-weight: 700;

    line-height: 1.2;
}


/* =========================================================
   EMPTY VENDORS
   ========================================================= */

.empty-vendors {
    background: #ffffff;

    border: 1px dashed #d9d9d9;

    border-radius: 16px;

    padding: 35px 20px;

    text-align: center;
}

.empty-vendors-icon {
    font-size: 42px;

    margin-bottom: 10px;
}

.empty-vendors h3 {
    font-size: 17px;
}

.empty-vendors p {
    color: var(--muted);

    font-size: 13px;

    max-width: 330px;

    margin: 6px auto 18px;
}

.empty-small {
    color: var(--muted);

    font-size: 13px;

    padding: 15px;
}


/* =========================================================
   MAP
   ========================================================= */

.map-section {
    padding: 5px 0 30px;
}

.map-card {
    background: #181818;

    color: #ffffff;

    border-radius: 18px;

    padding: 20px;

    display: flex;

    flex-direction: column;

    gap: 18px;
}

.map-card-content {
    display: flex;

    align-items: center;

    gap: 13px;
}

.map-icon {
    width: 45px;
    height: 45px;

    border-radius: 12px;

    background: rgba(255,255,255,0.08);

    display: flex;

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

    font-size: 22px;
}

.map-card h2 {
    font-size: 17px;
}

.map-card p {
    color: #aaaaaa;

    font-size: 12px;

    margin-top: 2px;
}

.map-button {
    display: flex;

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

    min-height: 44px;

    background: var(--primary);

    border-radius: 10px;

    font-size: 14px;

    font-weight: 700;
}


/* =========================================================
   JOIN CARDS
   ========================================================= */

.join-section {
    padding: 0 0 35px;
}

.join-grid {
    display: grid;

    gap: 12px;
}

.join-card {
    display: flex;

    gap: 14px;

    padding: 18px;

    border-radius: 16px;

    color: #ffffff;
}

.vendor-join {
    background: #ff6b00;
}

.agent-join {
    background: #202020;
}

.join-icon {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

    display: flex;

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

    border-radius: 12px;

    background: rgba(255,255,255,0.12);

    font-size: 22px;
}

.join-card span {
    display: block;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

    opacity: 0.75;
}

.join-card h3 {
    font-size: 17px;

    margin-top: 2px;
}

.join-card p {
    font-size: 12px;

    margin-top: 5px;

    opacity: 0.8;
}

.join-card strong {
    display: block;

    margin-top: 12px;

    font-size: 12px;
}


/* =========================================================
   MOBILE BOTTOM NAVIGATION
   ========================================================= */

.mobile-bottom-nav {
    position: fixed;

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

    z-index: 1500;

    height: 65px;

    background: rgba(255,255,255,0.97);

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

    display: flex;

    align-items: stretch;

    justify-content: space-around;

    padding-bottom: env(safe-area-inset-bottom);

    backdrop-filter: blur(10px);
}

.bottom-nav-item {
    flex: 1;

    max-width: 100px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 2px;

    color: #888888;
}

.bottom-nav-item span {
    font-size: 18px;

    line-height: 1;
}

.bottom-nav-item small {
    font-size: 10px;

    font-weight: 600;
}

.bottom-nav-item.active {
    color: var(--primary);
}


/* =========================================================
   EXTRA MOBILE SPACING
   ========================================================= */

@media (max-width: 767px) {

    .main-content {
        padding-bottom: 70px;
    }

}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 768px) {

    .fooddey-hero {
        padding-top: 30px;
        padding-bottom: 50px;
    }

    .hero-content {
        padding-top: 55px;
    }

    .categories-section {
        padding-top: 45px;
    }

    .categories-scroll {
        display: grid;

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

        overflow: visible;
    }

    .category-card {
        width: 100%;
    }

    .vendor-grid {
        display: grid;

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

        gap: 16px;
    }

    .empty-vendors {
        grid-column: 1 / -1;
    }

    .map-card {
        flex-direction: row;

        align-items: center;

        justify-content: space-between;
    }

    .map-button {
        padding: 0 25px;
    }

    .join-grid {
        grid-template-columns: 1fr 1fr;
    }

    .mobile-bottom-nav {
        display: none;
    }

}

/* =========================================================
   VENDOR REGISTRATION
   ========================================================= */

.registration-page {
    padding: 30px 0 50px;
}

.registration-wrapper {
    max-width: 1050px;
    margin: 0 auto;
}

.registration-intro {
    margin-bottom: 25px;
}

.registration-intro h1 {
    font-size: 32px;
    line-height: 1.1;
    margin-top: 6px;
    letter-spacing: -1px;
}

.registration-intro > p {
    color: var(--muted);
    margin-top: 12px;
    font-size: 14px;
    max-width: 600px;
}

.registration-benefits {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.registration-benefits div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.registration-benefits strong {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 10px;

    background: #fff3ea;
}

.registration-benefits span {
    font-size: 13px;
    font-weight: 600;
}

.registration-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;

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

.registration-heading {
    border-bottom: 1px solid var(--border);
    padding-bottom: 18px;
    margin-bottom: 22px;
}

.registration-heading h2 {
    font-size: 21px;
}

.registration-heading p {
    color: var(--muted);
    font-size: 13px;
    margin-top: 5px;
}

.registration-heading strong {
    color: var(--primary);
}

.form-errors {
    background: #fff0f0;
    border: 1px solid #ffd2d2;
    color: #b42318;

    border-radius: 10px;

    padding: 12px 14px;

    margin-bottom: 20px;

    font-size: 13px;
}

.form-errors div + div {
    margin-top: 5px;
}

.form-section {
    border-bottom: 1px solid var(--border);

    padding-bottom: 22px;
    margin-bottom: 22px;
}

.form-section:last-of-type {
    border-bottom: 0;
}

.form-section h3 {
    font-size: 16px;
    margin-bottom: 14px;
}

.form-help {
    color: var(--muted);
    font-size: 12px;
    margin: -5px 0 14px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.location-detect-button {
    width: 100%;

    min-height: 48px;

    border: 1px solid #ffd0b0;

    background: #fff6ef;

    color: var(--primary);

    border-radius: 10px;

    font-weight: 700;

    margin-bottom: 10px;
}

.location-status {
    background: #f7f7f7;

    border-radius: 9px;

    padding: 10px 12px;

    font-size: 12px;

    color: var(--muted);

    margin-bottom: 15px;
}

.checkbox-option {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px 0;

    font-size: 13px;

    font-weight: 600;
}

.checkbox-option input {
    width: 19px;
    height: 19px;

    accent-color: var(--primary);
}

.referral-notice {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px;

    background: #f1f8ff;

    border: 1px solid #d6eaff;

    border-radius: 10px;

    font-size: 12px;

    margin-bottom: 18px;
}

.registration-submit {
    width: 100%;

    min-height: 52px;

    font-size: 15px;
}

.registration-note {
    text-align: center;

    color: var(--muted);

    font-size: 11px;

    margin-top: 12px;

    line-height: 1.5;
}

@media (min-width: 768px) {

    .registration-page {
        padding: 55px 0 70px;
    }

    .registration-wrapper {
        display: grid;

        grid-template-columns: 0.85fr 1.15fr;

        gap: 45px;

        align-items: start;
    }

    .registration-intro {
        position: sticky;
        top: 100px;
    }

    .registration-intro h1 {
        font-size: 42px;
    }

    .registration-benefits {
        margin-top: 30px;
    }

    .registration-card {
        padding: 30px;
    }

    .form-row {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

}

/* =========================================================
   STATUS PAGE
   ========================================================= */

.status-page {
    padding: 45px 0 70px;
}

.status-card {
    max-width: 600px;

    margin: 0 auto;

    background: #ffffff;

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

    border-radius: 20px;

    padding: 30px 20px;

    text-align: center;

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

.status-icon {
    width: 64px;
    height: 64px;

    margin: 0 auto 18px;

    display: flex;

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

    border-radius: 50%;

    background: #eaf8ef;

    color: var(--success);

    font-size: 28px;

    font-weight: 800;
}

.status-card h1 {
    font-size: 27px;

    line-height: 1.15;

    margin-top: 7px;

    letter-spacing: -0.7px;
}

.status-card > p {
    color: var(--muted);

    font-size: 14px;

    margin: 12px auto 25px;

    max-width: 480px;
}

.status-steps {
    text-align: left;

    background: #f8f8f8;

    border-radius: 14px;

    padding: 15px;

    margin-bottom: 25px;
}

.status-step {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 11px 0;
}

.status-step + .status-step {
    border-top: 1px solid #e5e5e5;
}

.status-step > span {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    display: flex;

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

    border-radius: 50%;

    background: #e4e4e4;

    color: #777;

    font-size: 12px;

    font-weight: 800;
}

.status-step.complete > span {
    background: #eaf8ef;

    color: var(--success);
}

.status-step strong {
    display: block;

    font-size: 13px;
}

.status-step small {
    display: block;

    color: var(--muted);

    font-size: 11px;

    margin-top: 1px;
}

.status-card .btn {
    width: 100%;
}

@media (min-width: 768px) {

    .status-card {
        padding: 45px;
    }

    .status-card h1 {
        font-size: 34px;
    }

}

/* =========================================================
   VENDOR PAYMENT
   ========================================================= */

.payment-page {
    padding: 35px 0 60px;
}

.payment-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.payment-intro {
    text-align: center;
    margin-bottom: 25px;
}

.payment-intro h1 {
    font-size: 30px;
    line-height: 1.1;
    margin-top: 6px;
    letter-spacing: -0.8px;
}

.payment-intro p {
    color: var(--muted);
    font-size: 14px;
    max-width: 550px;
    margin: 12px auto 0;
}

.payment-card {
    max-width: 520px;
    margin: 0 auto;

    background: #ffffff;

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

    border-radius: 20px;

    padding: 22px;

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

.payment-vendor {
    display: flex;

    align-items: center;

    gap: 12px;

    padding-bottom: 20px;

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

.payment-vendor-icon {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

    display: flex;

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

    background: #fff3ea;

    border-radius: 13px;

    font-size: 24px;
}

.payment-vendor span {
    display: block;

    color: var(--muted);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;
}

.payment-vendor h2 {
    font-size: 18px;

    margin-top: 2px;
}

.payment-summary {
    padding: 20px 0;
}

.payment-summary-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    font-size: 14px;

    color: var(--muted);
}

.payment-summary-row strong {
    color: var(--text);
}

.payment-summary-row.total {
    border-top: 1px solid var(--border);

    margin-top: 15px;

    padding-top: 15px;

    font-size: 16px;

    color: var(--text);
}

.payment-summary-row.total strong {
    color: var(--primary);

    font-size: 20px;
}

.payment-notice {
    display: flex;

    gap: 10px;

    background: #f7f9fb;

    border: 1px solid #e4e8ec;

    border-radius: 11px;

    padding: 12px;

    margin-bottom: 18px;
}

.payment-notice span {
    font-size: 18px;
}

.payment-notice p {
    color: var(--muted);

    font-size: 11px;

    line-height: 1.5;
}

.payment-button {
    width: 100%;

    min-height: 52px;

    font-size: 15px;
}

.payment-note {
    color: var(--muted);

    font-size: 11px;

    text-align: center;

    line-height: 1.5;

    margin-top: 12px;
}

.payment-back {
    display: block;

    text-align: center;

    margin-top: 20px;

    font-size: 13px;

    color: var(--muted);

    font-weight: 600;
}

.payment-back:hover {
    color: var(--primary);
}

@media (min-width: 768px) {

    .payment-page {
        padding: 60px 0 80px;
    }

    .payment-intro h1 {
        font-size: 38px;
    }

    .payment-card {
        padding: 30px;
    }

}

/* =========================================================
   MANUAL PAYMENT
   ========================================================= */

.manual-payment-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 15px;

    background: #fff8f2;

    border: 1px solid #ffe0c7;

    border-radius: 12px;

    margin-bottom: 20px;
}

.manual-payment-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 10px;

    background: #ffffff;

    font-size: 20px;
}

.manual-payment-box h3 {
    font-size: 14px;
}

.manual-payment-box p {
    color: var(--muted);

    font-size: 11px;

    margin-top: 4px;

    line-height: 1.5;
}

.payment-field-help {
    display: block;

    color: var(--muted);

    font-size: 11px;

    margin-top: 5px;
}


/* =========================================================
   FAST ACTIVATION
   ========================================================= */

.fast-activation-box {
    margin-top: 25px;

    padding: 17px;

    background: #fff8e8;

    border: 1px solid #f5dfad;

    border-radius: 14px;
}

.fast-activation-icon {
    font-size: 24px;

    margin-bottom: 7px;
}

.fast-activation-box h3 {
    font-size: 15px;
}

.fast-activation-box p {
    color: #777;

    font-size: 12px;

    line-height: 1.5;

    margin-top: 4px;
}

.fast-activation-button {
    width: 100%;

    margin-top: 14px;

    background: #25D366;

    color: #ffffff;
}

.fast-activation-button:hover {
    background: #1ebe5d;

    color: #ffffff;
}

/* =========================================================
   FAST ACTIVATION PAGE
   ========================================================= */

.fast-page {
    padding: 40px 0 70px;
}

.fast-card {
    max-width: 560px;

    margin: 0 auto;

    background: #ffffff;

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

    border-radius: 20px;

    padding: 28px 20px;

    text-align: center;

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

.fast-main-icon {
    width: 65px;
    height: 65px;

    margin: 0 auto 17px;

    display: flex;

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

    border-radius: 50%;

    background: #fff4d8;

    font-size: 30px;
}

.fast-card h1 {
    font-size: 28px;

    line-height: 1.1;

    margin-top: 7px;

    letter-spacing: -0.7px;
}

.fast-card > p {
    color: var(--muted);

    font-size: 13px;

    line-height: 1.6;

    margin: 12px auto 22px;

    max-width: 470px;
}

.fast-details {
    text-align: left;

    background: #f7f7f7;

    border-radius: 13px;

    padding: 5px 15px;

    margin-bottom: 18px;
}

.fast-details div {
    padding: 11px 0;
}

.fast-details div + div {
    border-top: 1px solid #e4e4e4;
}

.fast-details span {
    display: block;

    color: var(--muted);

    font-size: 10px;
}

.fast-details strong {
    display: block;

    font-size: 13px;

    margin-top: 2px;

    word-break: break-word;
}

.fast-warning {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 12px;

    background: #fff8e8;

    border: 1px solid #f1dfae;

    border-radius: 10px;

    color: #7b6427;

    font-size: 11px;

    margin-bottom: 15px;
}

.whatsapp-activation-button {
    width: 100%;

    min-height: 52px;

    background: #25D366;

    color: #ffffff;

    font-size: 14px;
}

.whatsapp-activation-button:hover {
    background: #1ebe5d;

    color: #ffffff;
}

.fast-note {
    font-size: 10px !important;

    color: var(--muted);

    margin-top: 13px !important;
}

.fast-back {
    display: block;

    margin-top: 20px;

    color: var(--muted);

    font-size: 12px;

    font-weight: 600;
}

.fast-back:hover {
    color: var(--primary);
}

@media (min-width: 768px) {

    .fast-card {
        padding: 40px;
    }

    .fast-card h1 {
        font-size: 35px;
    }

}

/* =========================================================
   ACTIVATION STATUS
   ========================================================= */

.activation-status-box {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    text-align: left;

    padding: 15px;

    margin-bottom: 20px;

    background: #f7f9fb;

    border: 1px solid #e1e6eb;

    border-radius: 13px;
}

.activation-status-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: flex;

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

    background: #fff4d8;

    border-radius: 10px;

    font-size: 19px;
}

.activation-status-box strong {
    display: block;

    font-size: 13px;
}

.activation-status-box p {
    color: var(--muted);

    font-size: 11px;

    line-height: 1.5;

    margin-top: 3px;
}

.fast-action-section {
    text-align: left;

    padding: 18px;

    background: #fff8e8;

    border: 1px solid #f2dfaf;

    border-radius: 14px;

    margin-bottom: 16px;
}

.fast-action-section h3 {
    font-size: 15px;
}

.fast-action-section > p {
    color: var(--muted);

    font-size: 11px;

    line-height: 1.5;

    margin: 5px 0 13px;
}

/* =========================================================
   FOODDEY ADMIN — VENDOR MANAGEMENT
   Complete replacement styling
   ========================================================= */


/* =========================================================
   ADMIN PAGE
   ========================================================= */

.admin-page {
    min-height: 100vh;
    padding: 32px 0 70px;
    background: #f7f7f8;
}

.admin-page .container {
    width: min(1120px, calc(100% - 28px));
    margin: 0 auto;
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.admin-page-header {
    margin-bottom: 24px;
}

.admin-page-header .section-kicker {
    display: inline-block;

    margin-bottom: 6px;

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

    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.admin-page-header h1 {
    margin: 0;

    font-size: clamp(28px, 4vw, 38px);
    line-height: 1.1;

    letter-spacing: -1px;
}

.admin-page-header p {
    margin: 7px 0 0;

    max-width: 650px;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.5;
}


/* =========================================================
   ADMIN STAT CARDS
   ========================================================= */

.admin-page .admin-stats {
    display: grid;

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

    gap: 12px;

    margin-bottom: 18px;
}

.admin-page .admin-stat-card {
    display: block;

    min-width: 0;

    padding: 18px;

    background: #ffffff;

    border: 1px solid #e5e5e7;

    border-radius: 14px;

    text-decoration: none;

    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);

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

.admin-page .admin-stat-card:hover {
    transform: translateY(-1px);

    border-color: #d8d8db;

    box-shadow: 0 5px 16px rgba(0, 0, 0, .05);
}

.admin-page .admin-stat-card span {
    display: block;

    color: #777;

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

.admin-page .admin-stat-card strong {
    display: block;

    margin-top: 5px;

    color: #171717;

    font-size: 27px;
    line-height: 1;
}


/* =========================================================
   ALERTS
   ========================================================= */

.admin-page .admin-alert {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 16px;

    padding: 13px 15px;

    border-radius: 10px;

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

.admin-page .admin-alert-success {
    background: #edf9f1;

    border: 1px solid #d2eedb;

    color: #237540;
}

.admin-page .admin-alert-error {
    background: #fff1f1;

    border: 1px solid #f1d1d1;

    color: #a43d3d;
}


/* =========================================================
   SEARCH / FILTER AREA
   ========================================================= */

.admin-page .vendor-filters {
    margin-bottom: 18px;

    padding: 16px;

    background: #ffffff;

    border: 1px solid #e5e5e7;

    border-radius: 15px;

    box-shadow: 0 1px 2px rgba(0, 0, 0, .025);
}

.admin-page .vendor-filters form {
    margin: 0;
}

.admin-page .vendor-search {
    display: flex;

    align-items: center;

    gap: 9px;

    max-width: 760px;
}

.admin-page .vendor-search .form-control {
    flex: 1;

    min-width: 0;

    height: 46px;

    background: #fafafa;

    border: 1px solid #dedee1;

    border-radius: 10px;

    font-size: 12px;
}

.admin-page .vendor-search .form-control:focus {
    background: #ffffff;

    border-color: var(--primary);

    outline: none;

    box-shadow: 0 0 0 3px rgba(255, 102, 0, .08);
}

.admin-page .vendor-search .btn {
    flex: 0 0 auto;

    height: 46px;

    padding: 0 20px;

    border-radius: 10px;
}


/* =========================================================
   FILTER TABS
   ========================================================= */

.admin-page .vendor-filter-links {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 13px;

    overflow-x: auto;

    scrollbar-width: none;
}

.admin-page .vendor-filter-links::-webkit-scrollbar {
    display: none;
}

.admin-page .vendor-filter-links a {
    flex: 0 0 auto;

    padding: 7px 13px;

    background: #f4f4f5;

    border: 1px solid transparent;

    border-radius: 30px;

    color: #6d6d70;

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

    text-decoration: none;

    transition: .15s ease;
}

.admin-page .vendor-filter-links a:hover {
    background: #eeeeef;

    color: #333;
}

.admin-page .vendor-filter-links a.active {
    background: var(--primary);

    color: #ffffff;
}


/* =========================================================
   MAIN VENDOR SECTION
   ========================================================= */

.admin-page .admin-section {
    padding: 0;

    background: transparent;

    border: 0;

    border-radius: 0;

    box-shadow: none;
}

.admin-page .admin-section-header {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    margin-bottom: 13px;
}

.admin-page .admin-section-header h2 {
    margin: 0;

    font-size: 19px;

    letter-spacing: -.3px;
}

.admin-page .admin-section-header p {
    margin: 4px 0 0;

    color: var(--muted);

    font-size: 11px;
}


/* =========================================================
   VENDOR LIST
   ========================================================= */

.admin-page .vendor-admin-list {
    display: grid;

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

    gap: 14px;
}


/* =========================================================
   VENDOR CARD
   ========================================================= */

.admin-page .vendor-admin-card {
    display: block;

    min-width: 0;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e3e3e5;

    border-radius: 16px;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, .03);

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

.admin-page .vendor-admin-card:hover {
    transform: translateY(-1px);

    box-shadow:
        0 7px 22px rgba(0, 0, 0, .06);
}


/* =========================================================
   CARD HEADER
   ========================================================= */

.admin-page .vendor-admin-top {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

    padding: 18px;

    border-bottom: 1px solid #eeeeef;
}

.admin-page .vendor-admin-label {
    display: block;

    margin-bottom: 4px;

    color: #999;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.2px;
}

.admin-page .vendor-admin-top h3 {
    margin: 0;

    color: #161616;

    font-size: 17px;
    font-weight: 750;

    line-height: 1.25;
}

.admin-page .vendor-admin-top p {
    margin: 4px 0 0;

    color: #929296;

    font-size: 10px;
}


/* =========================================================
   STATUS BADGE
   ========================================================= */

.admin-page .vendor-status-badge {
    flex: 0 0 auto;

    display: inline-flex;

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

    min-height: 25px;

    padding: 5px 9px;

    border-radius: 30px;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .4px;

    text-transform: uppercase;

    white-space: nowrap;
}

.admin-page .vendor-status-inactive {
    background: #fff4df;

    color: #8a651d;
}

.admin-page .vendor-status-active {
    background: #eaf8ef;

    color: #237842;
}


/* =========================================================
   VENDOR DETAILS GRID
   ========================================================= */

.admin-page .vendor-admin-details {
    display: grid;

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

    margin: 0;

    background: #ffffff;

    border: 0;
}

.admin-page .vendor-admin-details > div {
    min-width: 0;

    padding: 13px 16px;

    border: 0;
}

.admin-page .vendor-admin-details > div:nth-child(odd) {
    border-right: 1px solid #eeeeef;
}

.admin-page .vendor-admin-details > div:nth-child(-n+2) {
    border-bottom: 1px solid #eeeeef;
}

.admin-page .vendor-admin-details span,
.admin-page .vendor-payment-status span,
.admin-page .vendor-agent-info span {
    display: block;

    margin-bottom: 3px;

    color: #9a9a9e;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .6px;

    text-transform: uppercase;
}

.admin-page .vendor-admin-details strong,
.admin-page .vendor-payment-status strong,
.admin-page .vendor-agent-info strong {
    display: block;

    overflow: hidden;

    color: #222;

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

    line-height: 1.4;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =========================================================
   PAYMENT SECTION
   ========================================================= */

.admin-page .vendor-payment-status {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 0;

    margin: 0;

    padding: 13px 16px;

    background: #fafafa;

    border-top: 1px solid #eeeeef;

    border-bottom: 1px solid #eeeeef;
}

.admin-page .vendor-payment-status > div:first-child {
    padding-right: 12px;

    border-right: 1px solid #e7e7e8;
}

.admin-page .vendor-payment-status > div:last-child {
    padding-left: 12px;
}

.admin-page .vendor-payment-status strong {
    font-size: 12px;
}


/* =========================================================
   AGENT SECTION
   ========================================================= */

.admin-page .vendor-agent-info {
    display: grid;

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

    gap: 0;

    margin: 0;

    padding: 13px 16px;

    background: #fffaf2;

    border: 0;

    border-bottom: 1px solid #f0e6d7;
}

.admin-page .vendor-agent-info > div {
    min-width: 0;

    padding-right: 10px;
}

.admin-page .vendor-agent-info > div + div {
    padding-left: 10px;

    border-left: 1px solid #eadfce;
}

.admin-page .vendor-agent-info strong {
    color: #6d551f;
}

.admin-page .vendor-no-agent {
    margin: 0;

    padding: 12px 16px;

    background: #fafafa;

    border-bottom: 1px solid #eeeeef;

    color: #929296;

    font-size: 10px;
}


/* =========================================================
   FAST ACTIVATION REQUEST
   ========================================================= */

.admin-page .vendor-fast-request {
    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0;

    padding: 10px 16px;

    background: #fff7dc;

    border-bottom: 1px solid #efdfb2;

    color: #765d1e;

    font-size: 10px;
}

.admin-page .vendor-fast-request strong {
    font-weight: 800;
}


/* =========================================================
   ACTION AREA
   ========================================================= */

.admin-page .vendor-admin-action {
    margin: 0;

    padding: 14px 16px;

    background: #ffffff;
}

.admin-page .vendor-admin-action form {
    width: 100%;

    margin: 0;
}

.admin-page .vendor-activate-button,
.admin-page .vendor-deactivate-button {
    width: 100%;

    min-height: 46px;

    border-radius: 10px;

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


/* =========================================================
   EMPTY STATE
   ========================================================= */

.admin-page .admin-empty {
    padding: 55px 20px;

    background: #ffffff;

    border: 1px solid #e5e5e7;

    border-radius: 16px;

    text-align: center;
}

.admin-page .admin-empty > div {
    width: 50px;
    height: 50px;

    display: flex;

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

    margin: 0 auto 12px;

    background: #f4f4f5;

    border-radius: 50%;

    font-size: 20px;
}

.admin-page .admin-empty h3 {
    margin: 0;

    font-size: 15px;
}

.admin-page .admin-empty p {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 11px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .admin-page .vendor-admin-list {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .admin-page {
        padding: 24px 0 55px;
    }

    .admin-page .container {
        width: min(100% - 20px, 540px);
    }


    /* Header */

    .admin-page-header {
        margin-bottom: 18px;
    }

    .admin-page-header h1 {
        font-size: 27px;

        letter-spacing: -.7px;
    }

    .admin-page-header p {
        font-size: 11px;
    }


    /* Stats */

    .admin-page .admin-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;

        margin-bottom: 12px;
    }

    .admin-page .admin-stat-card {
        padding: 13px;
    }

    .admin-page .admin-stat-card span {
        font-size: 9px;
    }

    .admin-page .admin-stat-card strong {
        font-size: 22px;
    }


    /* Search */

    .admin-page .vendor-filters {
        padding: 12px;

        border-radius: 13px;

        margin-bottom: 16px;
    }

    .admin-page .vendor-search {
        gap: 6px;
    }

    .admin-page .vendor-search .form-control {
        height: 43px;

        font-size: 11px;
    }

    .admin-page .vendor-search .btn {
        height: 43px;

        padding: 0 14px;

        font-size: 11px;
    }


    /* Section */

    .admin-page .admin-section-header {
        margin-bottom: 10px;
    }

    .admin-page .admin-section-header h2 {
        font-size: 17px;
    }


    /* Card */

    .admin-page .vendor-admin-card {
        border-radius: 14px;
    }

    .admin-page .vendor-admin-top {
        padding: 15px;

        gap: 10px;
    }

    .admin-page .vendor-admin-top h3 {
        font-size: 16px;
    }


    /* Details */

    .admin-page .vendor-admin-details > div {
        padding: 11px 13px;
    }

    .admin-page .vendor-admin-details strong {
        font-size: 10px;
    }


    /* Payment */

    .admin-page .vendor-payment-status {
        padding: 12px 13px;
    }


    /* Agent */

    .admin-page .vendor-agent-info {
        grid-template-columns:
            1fr 1fr 1fr;

        padding: 12px 13px;
    }

    .admin-page .vendor-agent-info > div {
        padding-right: 7px;
    }

    .admin-page .vendor-agent-info > div + div {
        padding-left: 7px;
    }


    /* Action */

    .admin-page .vendor-admin-action {
        padding: 12px 13px;
    }

    .admin-page .vendor-activate-button,
    .admin-page .vendor-deactivate-button {
        min-height: 45px;

        font-size: 11px;
    }

}

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

.admin-login-page {
    padding: 45px 0 70px;
}

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

    margin: 0 auto;

    padding: 28px 20px;

    background: #ffffff;

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

    border-radius: 20px;

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

    text-align: center;
}

.admin-login-icon {
    width: 58px;
    height: 58px;

    margin: 0 auto 15px;

    display: flex;

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

    border-radius: 15px;

    background: #f3f5f7;

    font-size: 24px;
}

.admin-login-card h1 {
    font-size: 27px;

    margin-top: 7px;

    letter-spacing: -0.7px;
}

.admin-login-intro {
    color: var(--muted);

    font-size: 12px;

    line-height: 1.5;

    margin: 8px auto 23px;
}

.admin-login-card form {
    text-align: left;
}

.admin-login-button {
    width: 100%;

    min-height: 50px;

    margin-top: 5px;
}

.admin-login-back {
    display: block;

    margin-top: 20px;

    color: var(--muted);

    font-size: 12px;

    font-weight: 600;
}

.admin-login-back:hover {
    color: var(--primary);
}

@media (min-width: 768px) {

    .admin-login-page {
        padding: 70px 0 90px;
    }

    .admin-login-card {
        padding: 40px;
    }

    .admin-login-card h1 {
        font-size: 33px;
    }

}

/* =========================================================
   FOODDEY ADMIN DASHBOARD
   ========================================================= */

.admin-dashboard {
    min-height: 100vh;
    padding: 32px 0 70px;
    background: #f7f7f8;
}

.admin-dashboard .container {
    width: min(1120px, calc(100% - 28px));
    margin: 0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.admin-dashboard-header {
    margin-bottom: 24px;
}

.admin-dashboard-header h1 {
    margin: 5px 0 0;

    font-size: clamp(28px, 4vw, 38px);

    line-height: 1.1;

    letter-spacing: -1px;
}

.admin-dashboard-header p {
    margin-top: 7px;

    color: var(--muted);

    font-size: 13px;
}


/* =========================================================
   STAT GRID
   ========================================================= */

.dashboard-stats {
    display: grid;

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

    gap: 12px;

    margin-bottom: 30px;
}

.dashboard-stat {
    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 0;

    padding: 17px;

    background: #ffffff;

    border: 1px solid #e4e4e6;

    border-radius: 15px;

    color: inherit;

    text-decoration: none;

    transition: .15s ease;
}

.dashboard-stat:hover {
    transform: translateY(-1px);

    border-color: #d7d7da;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, .05);
}

.dashboard-stat-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;

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

    background: #f5f5f6;

    border-radius: 11px;

    font-size: 17px;
}

.dashboard-stat span {
    display: block;

    color: #858589;

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

.dashboard-stat strong {
    display: block;

    margin-top: 4px;

    color: #171717;

    font-size: 25px;

    line-height: 1;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.dashboard-section {
    margin-bottom: 30px;
}

.dashboard-section-heading {
    margin-bottom: 13px;
}

.dashboard-section-heading .section-kicker {
    font-size: 9px;
}

.dashboard-section-heading h2 {
    margin-top: 4px;

    font-size: 19px;

    letter-spacing: -.3px;
}


/* =========================================================
   OPERATIONS
   ========================================================= */

.dashboard-operation-grid {
    display: grid;

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

    gap: 11px;
}

.dashboard-operation-card {
    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;

    padding: 15px;

    background: #ffffff;

    border: 1px solid #e4e4e6;

    border-radius: 14px;

    color: inherit;

    text-decoration: none;

    transition: .15s ease;
}

.dashboard-operation-card:hover {
    border-color: #d5d5d8;

    box-shadow:
        0 5px 16px rgba(0, 0, 0, .04);
}

.dashboard-operation-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: flex;

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

    background: #f6f6f7;

    border-radius: 10px;

    font-size: 17px;
}

.dashboard-operation-card > div:nth-child(2) {
    min-width: 0;

    flex: 1;
}

.dashboard-operation-card strong {
    display: block;

    font-size: 12px;
}

.dashboard-operation-card span {
    display: block;

    margin-top: 3px;

    overflow: hidden;

    color: var(--muted);

    font-size: 10px;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.dashboard-operation-card b {
    color: #aaa;

    font-size: 18px;
}


/* =========================================================
   QUICK ACTIONS
   ========================================================= */

.dashboard-quick-actions {
    display: grid;

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

    gap: 11px;
}

.dashboard-quick-action {
    display: block;

    padding: 17px;

    background: #ffffff;

    border: 1px solid #e4e4e6;

    border-radius: 14px;

    color: inherit;

    text-decoration: none;
}

.dashboard-quick-action:hover {
    border-color: var(--primary);
}

.dashboard-quick-action > span {
    display: flex;

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

    width: 38px;
    height: 38px;

    margin-bottom: 11px;

    background: #f5f5f6;

    border-radius: 10px;

    font-size: 17px;
}

.dashboard-quick-action strong {
    display: block;

    font-size: 12px;
}

.dashboard-quick-action small {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 9px;

    line-height: 1.4;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .admin-dashboard {
        padding: 24px 0 55px;
    }

    .admin-dashboard .container {
        width: min(100% - 20px, 540px);
    }


    .admin-dashboard-header {
        margin-bottom: 18px;
    }

    .admin-dashboard-header h1 {
        font-size: 27px;
    }

    .admin-dashboard-header p {
        font-size: 11px;
    }


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

        gap: 8px;

        margin-bottom: 25px;
    }

    .dashboard-stat {
        gap: 9px;

        padding: 13px;
    }

    .dashboard-stat-icon {
        width: 35px;
        height: 35px;

        flex-basis: 35px;

        font-size: 14px;
    }

    .dashboard-stat span {
        font-size: 8px;
    }

    .dashboard-stat strong {
        font-size: 21px;
    }


    .dashboard-section {
        margin-bottom: 25px;
    }

    .dashboard-section-heading h2 {
        font-size: 17px;
    }


    .dashboard-operation-grid {
        grid-template-columns: 1fr;
    }


    .dashboard-operation-card {
        padding: 13px;
    }


    .dashboard-quick-actions {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;
    }

    .dashboard-quick-action {
        padding: 14px;
    }

}

/* ============================================================
   FOODDEY CLEAN AGENT DASHBOARD
   ============================================================ */

.agent-dashboard-page {
    width: 100%;
    padding: 25px 0 70px;
}

.agent-dashboard-page .container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}


/* ============================================================
   HEADER
   ============================================================ */

.agent-clean-header {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 22px;
}

.agent-clean-header h1 {
    margin: 6px 0 6px;
    font-size: clamp(27px, 6vw, 38px);
    line-height: 1.15;
    font-weight: 800;
}

.agent-clean-header p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}

.agent-code-display {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    width: fit-content;
    padding: 12px 15px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
}

.agent-code-display span {
    color: #6b7280;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.agent-code-display strong {
    font-size: 17px;
    letter-spacing: 0.5px;
}


/* ============================================================
   FINANCIAL SUMMARY
   ============================================================ */

.agent-financial-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 15px;
}

.agent-financial-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
}

.agent-financial-card span {
    display: block;
    margin-bottom: 9px;
    color: #6b7280;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.agent-financial-card strong {
    display: block;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 800;
    word-break: break-word;
}

.agent-financial-card small {
    display: block;
    margin-top: 8px;
    color: #9ca3af;
    font-size: 11px;
}

.agent-balance-card {
    border-color: #dfe4e8;
}


/* ============================================================
   PAYOUT BAR
   ============================================================ */

.agent-payout-bar {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 15px;
    background: #ffffff;
}

.agent-payout-bar > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.agent-payout-bar strong {
    font-size: 14px;
}

.agent-payout-bar span {
    color: #6b7280;
    font-size: 12px;
}

.agent-payout-bar .btn {
    width: 100%;
    text-align: center;
}

.agent-payout-not-ready {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 43px;
    padding: 10px 15px;
    border-radius: 10px;
    background: #f3f4f6;
    color: #6b7280 !important;
    font-weight: 700;
}


/* ============================================================
   REFERRAL BOX
   ============================================================ */

.agent-referral-box {
    margin-bottom: 25px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 17px;
    background: #ffffff;
}

.agent-referral-heading h2 {
    margin: 5px 0 6px;
    font-size: 21px;
}

.agent-referral-heading p {
    margin: 0 0 17px;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.6;
}

.agent-link-row {
    display: flex;
    gap: 8px;
    width: 100%;
}

.agent-link-row input {
    min-width: 0;
    flex: 1;
    height: 44px;
    padding: 0 11px;
    border: 1px solid #dfe3e8;
    border-radius: 9px;
    background: #f8fafc;
    color: #374151;
    font-size: 12px;
    outline: none;
}

.agent-link-row .btn {
    flex-shrink: 0;
}

.agent-referral-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.agent-secondary-button {
    min-height: 40px;
    padding: 8px 13px;
    border: 1px solid #dfe3e8;
    border-radius: 9px;
    background: #ffffff;
    color: #374151;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}


/* ============================================================
   EARNING HISTORY
   ============================================================ */

.agent-history-section {
    width: 100%;
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 17px;
    background: #ffffff;
}

.agent-history-header {
    margin-bottom: 17px;
}

.agent-history-header h2 {
    margin: 5px 0 6px;
    font-size: 21px;
}

.agent-history-header p {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
}


/* ============================================================
   EARNING ROW
   ============================================================ */

.agent-earning-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.agent-earning-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 15px;
    border: 1px solid #edf0f2;
    border-radius: 12px;
    background: #fafbfc;
}

.agent-earning-row > div {
    min-width: 0;
}

.agent-earning-row span {
    display: block;
    margin-bottom: 4px;
    color: #8a929b;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.7px;
}

.agent-earning-row strong {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    word-break: break-word;
}

.agent-earning-amount strong {
    font-size: 16px;
}

.agent-earning-date strong {
    font-weight: 700;
}


/* ============================================================
   STATUS
   ============================================================ */

.earning-status {
    display: inline-flex !important;
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280 !important;
    font-size: 10px !important;
    letter-spacing: 0 !important;
}

.earning-status-approved {
    background: #ecfdf3;
    color: #15803d !important;
}

.earning-status-paid {
    background: #eff6ff;
    color: #2563eb !important;
}


/* ============================================================
   EMPTY HISTORY
   ============================================================ */

.agent-history-empty {
    padding: 35px 15px;
    text-align: center;
    border: 1px dashed #dfe3e8;
    border-radius: 13px;
    background: #fafafa;
}

.agent-history-empty div {
    margin-bottom: 8px;
    font-size: 30px;
}

.agent-history-empty h3 {
    margin: 0 0 6px;
    font-size: 16px;
}

.agent-history-empty p {
    max-width: 400px;
    margin: 0 auto;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.6;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (min-width: 600px) {

    .agent-dashboard-page {
        padding-top: 35px;
    }

    .agent-dashboard-page .container {
        padding-left: 22px;
        padding-right: 22px;
    }

    .agent-clean-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

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

    .agent-payout-bar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .agent-payout-bar .btn,
    .agent-payout-not-ready {
        width: auto;
        flex-shrink: 0;
    }

    .agent-earning-row {
        grid-template-columns:
            minmax(0, 2fr)
            minmax(110px, 1fr)
            minmax(110px, 1fr)
            auto;

        align-items: center;
    }

}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 900px) {

    .agent-dashboard-page {
        padding: 45px 0 80px;
    }

    .agent-dashboard-page .container {
        max-width: 1100px;
    }

    .agent-financial-card {
        padding: 24px;
    }

    .agent-financial-card strong {
        font-size: 29px;
    }

    .agent-referral-box,
    .agent-history-section {
        padding: 25px;
    }

}

/* ============================================================
   AGENT PAYOUT PAGE
   ============================================================ */

.agent-payout-page {
    width: 100%;
    padding: 25px 0 70px;
}

.agent-payout-page .container {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 16px;
}


/* ============================================================
   HEADER
   ============================================================ */

.agent-payout-header {
    margin-bottom: 20px;
}

.agent-back-link {
    display: inline-block;
    margin-bottom: 20px;
    color: #6b7280;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.agent-back-link:hover {
    text-decoration: underline;
}

.agent-payout-header h1 {
    margin: 6px 0 7px;
    font-size: clamp(27px, 7vw, 38px);
    line-height: 1.15;
    font-weight: 800;
}

.agent-payout-header p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}


/* ============================================================
   BALANCE
   ============================================================ */

.agent-payout-balance {
    margin-bottom: 15px;
    padding: 22px;
    border: 1px solid #e5e7eb;
    border-radius: 17px;
    background: #ffffff;
}

.agent-payout-balance span {
    display: block;
    margin-bottom: 8px;
    color: #6b7280;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.agent-payout-balance strong {
    display: block;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 800;
}

.agent-payout-balance small {
    display: block;
    margin-top: 8px;
    color: #9ca3af;
    font-size: 11px;
}


/* ============================================================
   ALERTS
   ============================================================ */

.agent-payout-alert {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 13px;
    font-size: 13px;
    line-height: 1.5;
}

.agent-payout-success {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.agent-payout-error {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
}


/* ============================================================
   EXISTING PAYOUT
   ============================================================ */

.agent-existing-payout {
    padding: 20px;
    margin-bottom: 15px;
    border: 1px solid #fed7aa;
    border-radius: 16px;
    background: #fff7ed;
}

.agent-existing-payout > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 15px;
}

.agent-existing-payout span {
    color: #9a3412;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.7px;
}

.agent-existing-payout strong {
    font-size: 19px;
}

.agent-existing-payout p {
    margin: 0;
    color: #9a3412;
    font-size: 13px;
    line-height: 1.6;
}


/* ============================================================
   BELOW MINIMUM
   ============================================================ */

.agent-payout-notice {
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
}

.agent-payout-notice strong {
    display: block;
    margin-bottom: 7px;
    font-size: 15px;
}

.agent-payout-notice p {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.6;
}


/* ============================================================
   FORM CARD
   ============================================================ */

.agent-payout-form-card {
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 17px;
    background: #ffffff;
}

.agent-payout-form-heading {
    margin-bottom: 20px;
}

.agent-payout-form-heading h2 {
    margin: 5px 0 7px;
    font-size: 21px;
    line-height: 1.3;
}

.agent-payout-form-heading p {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.6;
}


/* ============================================================
   FORM
   ============================================================ */

.agent-payout-form {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.agent-payout-form-group {
    width: 100%;
}

.agent-payout-form-group label {
    display: block;
    margin-bottom: 7px;
    color: #374151;
    font-size: 13px;
    font-weight: 700;
}

.agent-payout-form-group input {
    box-sizing: border-box;
    width: 100%;
    height: 46px;
    padding: 0 13px;
    border: 1px solid #dfe3e8;
    border-radius: 10px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease,
                box-shadow 0.2s ease;
}

.agent-payout-form-group input:focus {
    border-color: #ff6900;
    box-shadow: 0 0 0 3px rgba(255, 105, 0, 0.1);
}

.agent-payout-form-group small {
    display: block;
    margin-top: 6px;
    color: #9ca3af;
    font-size: 11px;
}


/* ============================================================
   AMOUNT INPUT
   ============================================================ */

.agent-amount-input {
    display: flex;
    align-items: center;
    width: 100%;
    height: 46px;
    border: 1px solid #dfe3e8;
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
}

.agent-amount-input:focus-within {
    border-color: #ff6900;
    box-shadow: 0 0 0 3px rgba(255, 105, 0, 0.1);
}

.agent-amount-input span {
    padding-left: 13px;
    color: #6b7280;
    font-size: 15px;
    font-weight: 700;
}

.agent-amount-input input {
    flex: 1;
    width: auto;
    height: 44px;
    padding: 0 10px;
    border: 0;
    box-shadow: none !important;
    outline: none;
    font-size: 15px;
}


/* ============================================================
   WARNING
   ============================================================ */

.agent-payout-warning {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 13px;
    border-radius: 10px;
    background: #f9fafb;
}

.agent-payout-warning strong {
    color: #374151;
    font-size: 12px;
}

.agent-payout-warning span {
    color: #6b7280;
    font-size: 11px;
    line-height: 1.5;
}


/* ============================================================
   SUBMIT
   ============================================================ */

.agent-submit-payout {
    width: 100%;
    min-height: 48px;
    margin-top: 2px;
    border: 0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 700px) {

    .agent-payout-page {
        padding-top: 40px;
    }

    .agent-payout-page .container {
        max-width: 720px;
    }

    .agent-payout-balance {
        padding: 27px;
    }

    .agent-payout-balance strong {
        font-size: 36px;
    }

    .agent-payout-form-card {
        padding: 27px;
    }

}

/* ============================================================
   ADMIN AGENT PAYOUTS
   ============================================================ */

.admin-payout-page {
    padding-bottom: 70px;
}


/* ============================================================
   STATS
   ============================================================ */

.admin-payout-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 18px;
}


/* ============================================================
   FILTERS
   ============================================================ */

.admin-payout-filters {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.admin-payout-filters a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 7px 13px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.admin-payout-filters a.active {
    background: #ff6900;
    color: #ffffff;
}


/* ============================================================
   PAYOUT LIST
   ============================================================ */

.admin-payout-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.admin-payout-card {
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
}


/* ============================================================
   CARD HEADER
   ============================================================ */

.admin-payout-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eef0f2;
}

.admin-payout-card-header > div {
    min-width: 0;
}

.admin-payout-card-header span {
    display: block;
    margin-bottom: 5px;
    color: #9ca3af;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.admin-payout-card-header h3 {
    margin: 0 0 5px;
    font-size: 17px;
    line-height: 1.3;
}

.admin-payout-card-header p {
    margin: 0;
    color: #6b7280;
    font-size: 12px;
}

.admin-payout-status {
    flex-shrink: 0;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.admin-payout-status-pending {
    background: #fff7ed;
    color: #c2410c;
}

.admin-payout-status-processing {
    background: #eff6ff;
    color: #2563eb;
}

.admin-payout-status-paid {
    background: #ecfdf3;
    color: #15803d;
}

.admin-payout-status-rejected {
    background: #fef2f2;
    color: #dc2626;
}


/* ============================================================
   AMOUNT
   ============================================================ */

.admin-payout-amount {
    padding: 18px 0;
}

.admin-payout-amount span,
.admin-payout-bank span,
.admin-payout-meta span {
    display: block;
    margin-bottom: 5px;
    color: #9ca3af;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.7px;
}

.admin-payout-amount strong {
    display: block;
    font-size: 27px;
    line-height: 1.2;
}


/* ============================================================
   BANK
   ============================================================ */

.admin-payout-bank {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 15px;
    border-radius: 12px;
    background: #f8fafc;
}

.admin-payout-bank > div {
    min-width: 0;
}

.admin-payout-bank strong {
    display: block;
    color: #374151;
    font-size: 13px;
    word-break: break-word;
}


/* ============================================================
   META
   ============================================================ */

.admin-payout-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 15px 0;
}

.admin-payout-meta strong {
    display: block;
    font-size: 12px;
}


/* ============================================================
   ADMIN NOTE
   ============================================================ */

.admin-payout-note {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 15px;
    padding: 13px;
    border-radius: 10px;
    background: #fef2f2;
}

.admin-payout-note strong {
    color: #991b1b;
    font-size: 11px;
}

.admin-payout-note span {
    color: #7f1d1d;
    font-size: 12px;
    line-height: 1.5;
}


/* ============================================================
   ACTIONS
   ============================================================ */

.admin-payout-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 15px;
    border-top: 1px solid #eef0f2;
}

.admin-payout-actions form {
    margin: 0;
}

.admin-payout-actions button {
    width: 100%;
    min-height: 43px;
    padding: 9px 14px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.admin-payout-processing-button {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #2563eb;
}

.admin-payout-paid-button {
    border: 0;
    background: #ff6900;
    color: #ffffff;
}

.admin-payout-reject-button {
    border: 1px solid #fecaca;
    background: #ffffff;
    color: #dc2626;
}


/* ============================================================
   MODAL
   ============================================================ */

.admin-payout-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.admin-payout-modal.is-open {
    display: flex;
}

.admin-payout-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.admin-payout-modal-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 460px;
    padding: 22px;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.admin-payout-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #f3f4f6;
    color: #374151;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.admin-payout-modal-card h2 {
    margin: 6px 40px 7px 0;
    font-size: 21px;
}

.admin-payout-modal-card > p {
    margin: 0 0 17px;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.6;
}

.admin-payout-modal-card textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 110px;
    padding: 12px;
    resize: vertical;
    border: 1px solid #dfe3e8;
    border-radius: 10px;
    outline: none;
    font-family: inherit;
    font-size: 13px;
}

.admin-payout-modal-card textarea:focus {
    border-color: #ff6900;
    box-shadow: 0 0 0 3px rgba(255, 105, 0, 0.1);
}

.admin-payout-modal-actions {
    display: flex;
    gap: 8px;
    margin-top: 13px;
}

.admin-payout-modal-actions button {
    flex: 1;
    min-height: 43px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.admin-payout-modal-cancel {
    border: 1px solid #dfe3e8;
    background: #ffffff;
    color: #374151;
}

.admin-payout-modal-confirm {
    border: 0;
    background: #dc2626;
    color: #ffffff;
}

body.payout-modal-open {
    overflow: hidden;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (min-width: 600px) {

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

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

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

    .admin-payout-actions {
        flex-direction: row;
        justify-content: flex-end;
    }

    .admin-payout-actions form {
        flex: 0 0 auto;
    }

    .admin-payout-actions button {
        width: auto;
        min-width: 130px;
    }

}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 900px) {

    .admin-payout-stats {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));
    }

    .admin-payout-card {
        padding: 22px;
    }

    .admin-payout-bank {
        padding: 18px;
    }

}

/* ============================================================
   FOODDEY ADMIN NAVIGATION
   ============================================================ */

.admin-navigation {
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.admin-navigation-inner {
    width: 100%;
    max-width: 1180px;
    min-height: 64px;
    margin: 0 auto;
    padding: 0 20px;

    display: flex;
    align-items: center;
    gap: 25px;
}


/* BRAND */

.admin-nav-brand {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #111827;
    text-decoration: none;

    font-size: 17px;
    font-weight: 800;

    flex-shrink: 0;
}

.admin-nav-brand-icon {
    font-size: 20px;
}

.admin-nav-brand small {
    display: block;
    margin-top: 1px;

    color: #ff6900;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}


/* LINKS */

.admin-nav-links {
    display: flex;
    align-items: center;
    gap: 3px;

    flex: 1;
}

.admin-nav-links a {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-height: 38px;
    padding: 0 12px;

    border-radius: 8px;

    color: #6b7280;
    text-decoration: none;

    font-size: 12px;
    font-weight: 700;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.admin-nav-links a span {
    font-size: 14px;
}

.admin-nav-links a:hover {
    background: #f8fafc;
    color: #111827;
}

.admin-nav-links a.active {
    background: #fff3eb;
    color: #ff6900;
}


/* ACCOUNT */

.admin-nav-account {
    display: flex;
    align-items: center;
    gap: 15px;

    flex-shrink: 0;
}

.admin-nav-user {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-nav-user-icon {
    width: 31px;
    height: 31px;

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

    border-radius: 50%;
    background: #111827;
    color: #ffffff;

    font-size: 11px;
    font-weight: 800;
}

.admin-nav-user strong {
    display: block;
    color: #111827;
    font-size: 11px;
}

.admin-nav-user small {
    display: block;
    margin-top: 1px;

    color: #9ca3af;
    font-size: 9px;
}

.admin-nav-logout {
    color: #dc2626;
    text-decoration: none;

    font-size: 11px;
    font-weight: 800;
}

.admin-nav-logout:hover {
    text-decoration: underline;
}


/* ============================================================
   ADMIN DASHBOARD
   ============================================================ */

.admin-dashboard {
    padding: 35px 0 70px;
    background: #f8fafc;
}

.admin-dashboard .container {
    max-width: 1180px;
}


/* HEADER */

.admin-dashboard-header {
    margin-bottom: 25px;
}

.admin-dashboard-header h1 {
    margin: 6px 0 6px;

    font-size: clamp(28px, 5vw, 38px);
    line-height: 1.15;
    font-weight: 800;
}

.admin-dashboard-header p {
    margin: 0;

    color: #6b7280;
    font-size: 14px;
}


/* ============================================================
   OVERVIEW
   ============================================================ */

.admin-overview-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-bottom: 35px;
}

.admin-overview-card {
    display: flex;
    align-items: center;
    gap: 14px;

    min-height: 105px;
    padding: 18px;

    border: 1px solid #e5e7eb;
    border-radius: 15px;

    background: #ffffff;

    color: #111827;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.admin-overview-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.06);
}

.admin-overview-icon {
    width: 43px;
    height: 43px;

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

    flex-shrink: 0;

    border-radius: 11px;
    background: #f3f4f6;

    font-size: 20px;
}

.admin-overview-card span {
    display: block;

    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
}

.admin-overview-card strong {
    display: block;

    margin-top: 3px;

    font-size: 25px;
    line-height: 1.1;
}

.admin-overview-card small {
    display: block;

    margin-top: 4px;

    color: #9ca3af;
    font-size: 10px;
}

.admin-overview-warning {
    border-color: #fed7aa;
}

.admin-overview-warning .admin-overview-icon {
    background: #fff7ed;
}

.admin-overview-money .admin-overview-icon {
    background: #ecfdf3;
}


/* ============================================================
   DASHBOARD SECTIONS
   ============================================================ */

.admin-dashboard-section {
    margin-bottom: 35px;
}

.admin-dashboard-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 15px;
}

.admin-dashboard-section-heading h2 {
    margin: 5px 0 0;

    font-size: 20px;
    line-height: 1.3;
}

.admin-view-all {
    color: #ff6900;
    text-decoration: none;

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

.admin-view-all:hover {
    text-decoration: underline;
}


/* ============================================================
   ATTENTION
   ============================================================ */

.admin-attention-grid {
    display: grid;

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

    gap: 12px;
}

.admin-attention-card {
    display: grid;

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

    align-items: center;

    gap: 12px;

    padding: 16px;

    border: 1px solid #e5e7eb;
    border-radius: 13px;

    background: #ffffff;

    color: #111827;
    text-decoration: none;
}

.admin-attention-card:hover {
    border-color: #ff6900;
}

.admin-attention-icon {
    width: 43px;
    height: 43px;

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

    border-radius: 10px;
    background: #f8fafc;

    font-size: 19px;
}

.admin-attention-card strong {
    display: block;

    font-size: 13px;
}

.admin-attention-card span {
    display: block;

    margin-top: 3px;

    color: #6b7280;
    font-size: 11px;
}

.admin-attention-card b {
    color: #9ca3af;
    font-size: 18px;
}


/* ============================================================
   RECENT VENDORS
   ============================================================ */

.admin-recent-vendors {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid #e5e7eb;
    border-radius: 14px;

    background: #ffffff;
}

.admin-recent-vendor {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 14px 16px;

    border-bottom: 1px solid #f1f5f9;

    color: #111827;
    text-decoration: none;
}

.admin-recent-vendor:last-child {
    border-bottom: 0;
}

.admin-recent-vendor:hover {
    background: #fafafa;
}

.admin-recent-vendor-icon {
    width: 38px;
    height: 38px;

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

    flex-shrink: 0;

    border-radius: 9px;
    background: #f3f4f6;
}

.admin-recent-vendor-info {
    flex: 1;
    min-width: 0;
}

.admin-recent-vendor-info strong {
    display: block;

    overflow: hidden;

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

    font-size: 13px;
}

.admin-recent-vendor-info span {
    display: block;

    margin-top: 3px;

    color: #9ca3af;
    font-size: 10px;
}

.admin-mini-status {
    padding: 5px 8px;

    border-radius: 999px;

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

    flex-shrink: 0;
}

.admin-mini-active {
    background: #ecfdf3;
    color: #15803d;
}

.admin-mini-pending {
    background: #fff7ed;
    color: #c2410c;
}

.admin-mini-inactive {
    background: #f3f4f6;
    color: #6b7280;
}

.admin-recent-arrow {
    color: #9ca3af;
}


/* ============================================================
   MANAGEMENT
   ============================================================ */

.admin-management-grid {
    display: grid;

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

    gap: 13px;
}

.admin-management-card {
    display: flex;
    flex-direction: column;

    padding: 20px;

    border: 1px solid #e5e7eb;
    border-radius: 14px;

    background: #ffffff;

    color: #111827;
    text-decoration: none;
}

.admin-management-card:hover {
    border-color: #ff6900;
}

.admin-management-card > span {
    margin-bottom: 13px;

    font-size: 22px;
}

.admin-management-card strong {
    font-size: 14px;
}

.admin-management-card small {
    margin-top: 5px;

    color: #6b7280;
    font-size: 11px;
    line-height: 1.5;
}


/* ============================================================
   EMPTY
   ============================================================ */

.admin-dashboard-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 180px;
    padding: 25px;

    border: 1px solid #e5e7eb;
    border-radius: 14px;

    background: #ffffff;

    text-align: center;
}

.admin-dashboard-empty > span {
    font-size: 28px;
}

.admin-dashboard-empty strong {
    margin-top: 8px;
    font-size: 14px;
}

.admin-dashboard-empty p {
    margin: 5px 0 0;

    color: #9ca3af;
    font-size: 11px;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .admin-navigation-inner {
        flex-wrap: wrap;
        padding-top: 10px;
        padding-bottom: 10px;
        gap: 10px;
    }

    .admin-nav-links {
        order: 3;
        width: 100%;

        overflow-x: auto;

        padding-bottom: 2px;
    }

    .admin-nav-account {
        margin-left: auto;
    }

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

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .admin-navigation {
        position: relative;
    }

    .admin-navigation-inner {
        padding-left: 14px;
        padding-right: 14px;
    }

    .admin-nav-brand {
        font-size: 15px;
    }

    .admin-nav-user {
        display: none;
    }

    .admin-nav-account {
        margin-left: auto;
    }

    .admin-nav-links {
        gap: 4px;

        scrollbar-width: none;
    }

    .admin-nav-links::-webkit-scrollbar {
        display: none;
    }

    .admin-nav-links a {
        flex-shrink: 0;

        min-height: 36px;
        padding: 0 10px;

        font-size: 11px;
    }

    .admin-dashboard {
        padding-top: 25px;
    }

    .admin-dashboard-header {
        margin-bottom: 20px;
    }

    .admin-dashboard-header h1 {
        font-size: 29px;
    }

    .admin-overview-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 28px;
    }

    .admin-overview-card {
        min-height: 82px;
    }

    .admin-attention-grid {
        grid-template-columns: 1fr;
    }

    .admin-management-grid {
        grid-template-columns: 1fr;
    }

    .admin-dashboard-section-heading h2 {
        font-size: 18px;
    }

    .admin-recent-vendor {
        padding: 13px;
    }

    .admin-mini-status {
        display: none;
    }

}

/* ============================================================
   FOODDEY AUTHENTICATION
   ============================================================ */

.fooddey-auth-page {
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 35px 15px 60px;

    background: #f8fafc;
}

.fooddey-auth-container {
    width: 100%;
    max-width: 430px;
}

.fooddey-auth-card {
    width: 100%;
    box-sizing: border-box;

    padding: 27px;

    border: 1px solid #e5e7eb;
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.05);
}


/* ============================================================
   HEADER
   ============================================================ */

.fooddey-auth-header {
    margin-bottom: 22px;
    text-align: center;
}

.fooddey-auth-logo {
    width: 52px;
    height: 52px;

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

    margin: 0 auto 12px;

    border-radius: 14px;

    background: #fff3eb;

    font-size: 24px;
}

.fooddey-auth-header h1 {
    margin: 6px 0 7px;

    color: #111827;

    font-size: 27px;
    line-height: 1.2;
    font-weight: 800;
}

.fooddey-auth-header p {
    max-width: 340px;
    margin: 0 auto;

    color: #6b7280;

    font-size: 13px;
    line-height: 1.6;
}

.fooddey-auth-back {
    display: inline-block;

    margin-bottom: 15px;

    color: #6b7280;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;
}

.fooddey-auth-back:hover {
    color: #ff6900;
}


/* ============================================================
   MESSAGES
   ============================================================ */

.fooddey-auth-notice,
.fooddey-auth-error {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    margin-bottom: 17px;

    padding: 12px 13px;

    border-radius: 10px;

    font-size: 12px;
    line-height: 1.5;
}

.fooddey-auth-notice {
    border: 1px solid #bbf7d0;

    background: #f0fdf4;

    color: #166534;
}

.fooddey-auth-error {
    border: 1px solid #fecaca;

    background: #fef2f2;

    color: #991b1b;
}

.fooddey-auth-notice > span,
.fooddey-auth-error > span {
    flex-shrink: 0;

    font-weight: 800;
}


/* ============================================================
   FORM
   ============================================================ */

.fooddey-login-form {
    display: flex;
    flex-direction: column;

    gap: 17px;
}

.fooddey-auth-field {
    width: 100%;
}

.fooddey-auth-field label {
    display: block;

    margin-bottom: 7px;

    color: #374151;

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

.fooddey-auth-field input {
    box-sizing: border-box;

    width: 100%;
    height: 47px;

    padding: 0 13px;

    border: 1px solid #dfe3e8;
    border-radius: 10px;

    background: #ffffff;

    color: #111827;

    font-family: inherit;
    font-size: 13px;

    outline: none;

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

.fooddey-auth-field input:focus {
    border-color: #ff6900;

    box-shadow:
        0 0 0 3px rgba(
            255,
            105,
            0,
            0.10
        );
}


/* ============================================================
   PASSWORD LABEL
   ============================================================ */

.fooddey-password-label {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 7px;
}

.fooddey-password-label label {
    margin: 0;
}

.fooddey-password-label a {
    color: #ff6900;

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

    text-decoration: none;
}

.fooddey-password-label a:hover {
    text-decoration: underline;
}


/* ============================================================
   PASSWORD INPUT
   ============================================================ */

.fooddey-password-input {
    position: relative;
}

.fooddey-password-input input {
    padding-right: 60px;
}

.fooddey-password-input button {
    position: absolute;

    top: 50%;
    right: 10px;

    transform: translateY(-50%);

    padding: 4px 5px;

    border: 0;

    background: transparent;

    color: #ff6900;

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

    cursor: pointer;
}


/* ============================================================
   BUTTON
   ============================================================ */

.fooddey-login-button {
    width: 100%;
    min-height: 48px;

    margin-top: 2px;

    border: 0;
    border-radius: 10px;

    font-size: 13px;
    font-weight: 800;

    text-align: center;
    text-decoration: none;

    cursor: pointer;
}


/* ============================================================
   FOOTER
   ============================================================ */

.fooddey-auth-footer {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 5px;

    margin-top: 21px;
    padding-top: 19px;

    border-top: 1px solid #f0f2f4;

    color: #6b7280;

    font-size: 11px;

    text-align: center;
}

.fooddey-auth-footer a {
    color: #ff6900;

    font-weight: 800;

    text-decoration: none;
}

.fooddey-auth-footer a:hover {
    text-decoration: underline;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 500px) {

    .fooddey-auth-page {
        min-height: auto;

        padding:
            25px 12px 50px;
    }

    .fooddey-auth-card {
        padding: 22px 17px;

        border-radius: 15px;
    }

    .fooddey-auth-header h1 {
        font-size: 25px;
    }

}

/* ============================================================
   FOODDEY PASSWORD RECOVERY
   ============================================================ */

.optional-label {
    margin-left: 4px;

    color: #9ca3af;

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


/* ============================================================
   DIVIDER
   ============================================================ */

.fooddey-auth-divider {
    display: flex;
    align-items: center;

    gap: 12px;

    margin: 4px 0 0;

    color: #9ca3af;

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

    text-transform: uppercase;
    letter-spacing: .05em;
}

.fooddey-auth-divider::before,
.fooddey-auth-divider::after {
    content: "";

    flex: 1;

    height: 1px;

    background: #e5e7eb;
}


/* ============================================================
   TEXTAREA
   ============================================================ */

.fooddey-auth-textarea {
    box-sizing: border-box;

    width: 100%;

    padding: 12px 13px;

    border: 1px solid #dfe3e8;
    border-radius: 10px;

    background: #ffffff;

    color: #111827;

    font-family: inherit;
    font-size: 13px;

    line-height: 1.55;

    resize: vertical;

    outline: none;

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

.fooddey-auth-textarea:focus {
    border-color: #ff6900;

    box-shadow:
        0 0 0 3px rgba(
            255,
            105,
            0,
            .10
        );
}


/* ============================================================
   ACCOUNT RECOVERY OPTION
   ============================================================ */

.fooddey-recovery-option {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin-top: 24px;
    padding: 15px;

    border: 1px solid #e5e7eb;
    border-radius: 13px;

    background: #fafafa;
}

.fooddey-recovery-icon {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

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

    border-radius: 10px;

    background: #fff7ed;

    font-size: 17px;
}

.fooddey-recovery-content {
    min-width: 0;
}

.fooddey-recovery-content strong {
    display: block;

    margin-bottom: 3px;

    color: #111827;

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

.fooddey-recovery-content p {
    margin: 0 0 6px;

    color: #6b7280;

    font-size: 11px;

    line-height: 1.5;
}

.fooddey-recovery-content a {
    color: #ff6900;

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

    text-decoration: none;
}

.fooddey-recovery-content a:hover {
    text-decoration: underline;
}


/* ============================================================
   RECOVERY WARNING
   ============================================================ */

.fooddey-recovery-warning {
    padding: 13px 14px;

    border: 1px solid #fed7aa;
    border-radius: 10px;

    background: #fff7ed;
}

.fooddey-recovery-warning strong {
    display: block;

    margin-bottom: 3px;

    color: #9a3412;

    font-size: 11px;
    font-weight: 800;
}

.fooddey-recovery-warning p {
    margin: 0;

    color: #9a3412;

    font-size: 11px;

    line-height: 1.5;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 500px) {

    .fooddey-recovery-option {
        padding: 13px;
    }

}

/* ============================================================
   FOODDEY ADMIN LAYOUT
   ============================================================ */

:root {
    --fooddey-admin-sidebar: 235px;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.fooddey-admin-sidebar {
    position: fixed;

    top: 0;
    left: 0;
    bottom: 0;

    width: var(--fooddey-admin-sidebar);

    z-index: 2000;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border-right: 1px solid #e5e7eb;
}


/* ============================================================
   BRAND
   ============================================================ */

.admin-sidebar-brand {
    height: 70px;

    display: flex;
    align-items: center;

    justify-content: space-between;

    padding: 0 18px;

    border-bottom: 1px solid #f0f1f3;
}

.admin-brand-link {
    display: flex;
    align-items: center;

    gap: 9px;

    color: #111827;

    text-decoration: none;
}

.admin-brand-icon {
    width: 35px;
    height: 35px;

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

    border-radius: 9px;

    background: #fff3eb;

    font-size: 16px;
}

.admin-brand-text {
    font-size: 14px;
    font-weight: 900;
}

.admin-brand-text small {
    display: block;

    margin-top: 1px;

    color: #9ca3af;

    font-size: 7px;

    letter-spacing: .12em;
}


/* ============================================================
   CLOSE BUTTON
   ============================================================ */

.admin-sidebar-close {
    display: none;

    width: 32px;
    height: 32px;

    border: 0;
    border-radius: 8px;

    background: #f3f4f6;

    color: #374151;

    font-size: 20px;

    cursor: pointer;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.admin-sidebar-nav {
    flex: 1;

    padding: 18px 11px;

    overflow-y: auto;
}

.admin-sidebar-label {
    padding: 0 10px;

    margin: 3px 0 8px;

    color: #9ca3af;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .1em;
}

.admin-sidebar-label-settings {
    margin-top: 25px;
}

.admin-sidebar-link {
    display: flex;
    align-items: center;

    gap: 10px;

    width: 100%;

    box-sizing: border-box;

    padding: 10px;

    margin-bottom: 3px;

    border-radius: 8px;

    color: #6b7280;

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

    text-decoration: none;

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

.admin-sidebar-link:hover {
    background: #f8fafc;

    color: #111827;
}

.admin-sidebar-link.active {
    background: #fff3eb;

    color: #ff6900;
}

.admin-sidebar-icon {
    width: 21px;

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

    font-size: 14px;
}


/* ============================================================
   SIDEBAR BOTTOM
   ============================================================ */

.admin-sidebar-bottom {
    padding: 12px;

    border-top: 1px solid #f0f1f3;
}

.admin-sidebar-logout {
    color: #b91c1c;
}

.admin-sidebar-logout:hover {
    background: #fef2f2;

    color: #991b1b;
}

.admin-sidebar-footer {
    padding: 9px 10px 3px;

    color: #9ca3af;

    font-size: 8px;
}


/* ============================================================
   MOBILE BAR
   ============================================================ */

.admin-mobile-bar {
    display: none;
}


/* ============================================================
   OVERLAY
   ============================================================ */

.admin-sidebar-overlay {
    display: none;
}


/* ============================================================
   ADMIN PAGE OFFSET
   ============================================================ */

.fooddey-admin-dashboard,
.admin-page {
    margin-left: var(--fooddey-admin-sidebar);
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 800px) {

    .fooddey-admin-sidebar {
        transform:
            translateX(-100%);

        transition:
            transform .25s ease;

        box-shadow:
            8px 0 30px rgba(
                0,
                0,
                0,
                .08
            );
    }

    .fooddey-admin-sidebar.open {
        transform:
            translateX(0);
    }

    .admin-sidebar-close {
        display: block;
    }


    .admin-sidebar-overlay {
        position: fixed;

        inset: 0;

        z-index: 1900;

        background:
            rgba(
                15,
                23,
                42,
                .35
            );

        opacity: 0;
        visibility: hidden;

        transition:
            opacity .2s ease,
            visibility .2s ease;
    }

    .admin-sidebar-overlay.open {
        display: block;

        opacity: 1;

        visibility: visible;
    }


    .admin-mobile-bar {
        position: sticky;

        top: 0;

        z-index: 1500;

        height: 58px;

        display: flex;
        align-items: center;

        justify-content: space-between;

        padding: 0 15px;

        background: #ffffff;

        border-bottom: 1px solid #e5e7eb;
    }

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

        gap: 7px;

        color: #111827;

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

        text-decoration: none;
    }

    .admin-mobile-menu-button {
        width: 38px;
        height: 38px;

        padding: 8px;

        border: 1px solid #e5e7eb;
        border-radius: 8px;

        background: #ffffff;

        cursor: pointer;
    }

    .admin-mobile-menu-button span {
        display: block;

        width: 19px;
        height: 2px;

        margin: 4px auto;

        background: #374151;

        border-radius: 2px;
    }


    .fooddey-admin-dashboard,
    .admin-page {
        margin-left: 0;
    }

}


/* ============================================================
   VERY SMALL DEVICES
   ============================================================ */

@media (max-width: 480px) {

    :root {
        --fooddey-admin-sidebar: 260px;
    }

}

/* ============================================================
   ACCOUNT RECOVERY
   ============================================================ */

.recovery-summary {
    display: flex;

    gap: 10px;

    margin-bottom: 20px;
}

.recovery-summary-card {
    min-width: 130px;

    padding: 13px 16px;

    border: 1px solid #e5e7eb;
    border-radius: 11px;

    background: #ffffff;

    text-decoration: none;
}

.recovery-summary-card span {
    display: block;

    color: #6b7280;

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

.recovery-summary-card strong {
    display: block;

    margin-top: 3px;

    color: #111827;

    font-size: 20px;
}


/* ============================================================
   FILTER
   ============================================================ */

.recovery-filters {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;

    margin-bottom: 15px;
}

.recovery-filters a {
    padding: 7px 10px;

    border-radius: 7px;

    color: #6b7280;

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

    text-decoration: none;
}

.recovery-filters a:hover {
    background: #f3f4f6;
}

.recovery-filters a.active {
    background: #111827;

    color: #ffffff;
}


/* ============================================================
   RECOVERY CARD
   ============================================================ */

.recovery-list {
    display: grid;

    gap: 12px;
}

.recovery-card {
    padding: 18px;

    border: 1px solid #e5e7eb;
    border-radius: 13px;

    background: #ffffff;
}

.recovery-card-header {
    display: flex;
    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 15px;
}

.recovery-label {
    display: block;

    margin-bottom: 4px;

    color: #9ca3af;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .08em;
}

.recovery-card h2 {
    margin: 0;

    color: #111827;

    font-size: 17px;
}


/* ============================================================
   STATUS
   ============================================================ */

.recovery-status {
    padding: 5px 8px;

    border-radius: 20px;

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

    white-space: nowrap;
}

.recovery-status-pending {
    background: #fff7ed;

    color: #c2410c;
}

.recovery-status-investigating {
    background: #eff6ff;

    color: #1d4ed8;
}

.recovery-status-resolved {
    background: #f0fdf4;

    color: #15803d;
}

.recovery-status-rejected {
    background: #fef2f2;

    color: #b91c1c;
}


/* ============================================================
   DETAILS
   ============================================================ */

.recovery-details {
    display: grid;

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

    gap: 10px;

    padding: 13px;

    border-radius: 10px;

    background: #f8fafc;
}

.recovery-details span,
.recovery-problem > span {
    display: block;

    margin-bottom: 4px;

    color: #9ca3af;

    font-size: 8px;
    font-weight: 800;

    text-transform: uppercase;
}

.recovery-details strong {
    display: block;

    color: #374151;

    font-size: 10px;

    word-break: break-word;
}


/* ============================================================
   PROBLEM
   ============================================================ */

.recovery-problem {
    margin-top: 13px;

    padding: 13px;

    border-left: 3px solid #ff6900;

    background: #fffaf7;
}

.recovery-problem p {
    margin: 0;

    color: #374151;

    font-size: 11px;

    line-height: 1.55;
}


/* ============================================================
   META
   ============================================================ */

.recovery-meta {
    margin-top: 10px;

    color: #9ca3af;

    font-size: 9px;
}


/* ============================================================
   ACTION
   ============================================================ */

.recovery-action-form {
    margin-top: 15px;
}

.recovery-action-form textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 10px;

    border: 1px solid #e5e7eb;
    border-radius: 8px;

    resize: vertical;

    font-family: inherit;
    font-size: 10px;

    outline: none;
}

.recovery-action-form textarea:focus {
    border-color: #ff6900;
}

.recovery-action-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 7px;
}

.recovery-action-button {
    padding: 8px 11px;

    border: 0;
    border-radius: 7px;

    background: #f3f4f6;

    color: #374151;

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

    cursor: pointer;
}

.recovery-action-button:hover {
    background: #e5e7eb;
}

.recovery-action-success {
    background: #ecfdf5;

    color: #047857;
}

.recovery-action-danger {
    background: #fef2f2;

    color: #b91c1c;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .recovery-details {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 480px) {

    .recovery-summary {
        width: 100%;
    }

    .recovery-summary-card {
        flex: 1;
    }

    .recovery-card {
        padding: 14px;
    }

    .recovery-card-header {
        flex-direction: column;
    }

    .recovery-details {
        grid-template-columns: 1fr;
    }

    .recovery-action-buttons {
        display: grid;

        grid-template-columns: 1fr;
    }

    .recovery-action-button {
        width: 100%;
    }

}

/* ============================================================
   ADMIN SETTINGS
   ============================================================ */

.admin-settings-card {
    max-width: 650px;

    padding: 22px;

    border: 1px solid #e5e7eb;
    border-radius: 14px;

    background: #ffffff;
}

.admin-settings-heading {
    margin-bottom: 22px;
}

.admin-settings-heading > span {
    color: #9ca3af;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .1em;
}

.admin-settings-heading h2 {
    margin: 5px 0 4px;

    color: #111827;

    font-size: 18px;
}

.admin-settings-heading p {
    margin: 0;

    color: #6b7280;

    font-size: 10px;
}

.admin-settings-form {
    display: grid;

    gap: 18px;
}

.admin-setting-field label {
    display: block;

    margin-bottom: 6px;

    color: #374151;

    font-size: 11px;
    font-weight: 800;
}

.admin-money-input {
    display: flex;
    align-items: center;

    border: 1px solid #dfe3e8;
    border-radius: 9px;

    overflow: hidden;

    background: #ffffff;
}

.admin-money-input span {
    padding: 11px 12px;

    border-right: 1px solid #e5e7eb;

    background: #f8fafc;

    color: #6b7280;

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

.admin-money-input input {
    width: 100%;

    padding: 11px;

    border: 0;

    outline: none;

    color: #111827;

    font-family: inherit;

    font-size: 12px;
}

.admin-setting-field small {
    display: block;

    margin-top: 5px;

    color: #9ca3af;

    font-size: 9px;
}

.admin-settings-save {
    width: fit-content;

    margin-top: 2px;
}


@media (max-width: 480px) {

    .admin-settings-card {
        padding: 16px;
    }

    .admin-settings-save {
        width: 100%;
    }

}

/* ============================================================
   FOODDEY ADMIN SYSTEM
   ============================================================ */

.fooddey-admin-body {
    margin: 0;

    background: #f7f7f8;

    color: #111827;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* ============================================================
   MAIN CONTENT
   ============================================================ */

.fooddey-admin-main {
    min-height: calc(100vh - 45px);

    margin-left: 235px;
}


/* ============================================================
   ADMIN CONTAINER
   ============================================================ */

.admin-container {
    width: min(
        100% - 36px,
        1050px
    );

    margin: 0 auto;

    padding: 35px 0 45px;
}


/* ============================================================
   WELCOME
   ============================================================ */

.admin-welcome {
    margin-bottom: 25px;
}

.admin-welcome h1 {
    margin: 5px 0 5px;

    font-size: 30px;

    line-height: 1.1;
}

.admin-welcome p {
    margin: 0;

    color: #6b7280;

    font-size: 13px;
}


/* ============================================================
   DASHBOARD STATS
   ============================================================ */

.admin-dashboard-stats {
    display: grid;

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

    gap: 12px;

    margin-bottom: 30px;
}

.admin-dashboard-stat {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 16px;

    border: 1px solid #e5e7eb;
    border-radius: 12px;

    background: #ffffff;

    color: #111827;

    text-decoration: none;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.admin-dashboard-stat:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(
            0,
            0,
            0,
            .05
        );
}

.admin-dashboard-stat-icon {
    width: 38px;
    height: 38px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background: #fff3eb;

    font-size: 16px;
}

.admin-dashboard-stat > div > span {
    display: block;

    margin-bottom: 3px;

    color: #6b7280;

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

.admin-dashboard-stat strong {
    font-size: 21px;
}

.admin-stat-warning .admin-dashboard-stat-icon {
    background: #fff7ed;
}


/* ============================================================
   SECTIONS
   ============================================================ */

.admin-dashboard-section {
    margin-top: 25px;
}

.admin-dashboard-section-heading {
    margin-bottom: 12px;
}

.admin-dashboard-section-heading .section-kicker {
    font-size: 8px;
}

.admin-dashboard-section-heading h2 {
    margin: 4px 0 0;

    font-size: 18px;
}


/* ============================================================
   ATTENTION
   ============================================================ */

.admin-attention-grid {
    display: grid;

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

    gap: 12px;
}

.admin-attention-card {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 16px;

    border: 1px solid #e5e7eb;
    border-radius: 12px;

    background: #ffffff;

    color: #111827;

    text-decoration: none;
}

.admin-attention-card:hover {
    border-color: #d1d5db;
}

.admin-attention-icon {
    width: 38px;
    height: 38px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background: #f8fafc;
}

.admin-attention-card div:nth-child(2) {
    flex: 1;
}

.admin-attention-card strong {
    display: block;

    margin-bottom: 3px;

    font-size: 12px;
}

.admin-attention-card span {
    color: #6b7280;

    font-size: 10px;
}

.admin-attention-card b {
    color: #9ca3af;

    font-size: 16px;
}


/* ============================================================
   QUICK ACCESS
   ============================================================ */

.admin-quick-grid {
    display: grid;

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

    gap: 12px;
}

.admin-quick-card {
    padding: 16px;

    border: 1px solid #e5e7eb;
    border-radius: 12px;

    background: #ffffff;

    color: #111827;

    text-decoration: none;
}

.admin-quick-card:hover {
    border-color: #d1d5db;
}

.admin-quick-card > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;

    margin-bottom: 13px;

    border-radius: 8px;

    background: #f8fafc;
}

.admin-quick-card strong {
    display: block;

    margin-bottom: 4px;

    font-size: 11px;
}

.admin-quick-card small {
    color: #6b7280;

    font-size: 9px;
}


/* ============================================================
   ADMIN FOOTER
   ============================================================ */

.fooddey-admin-footer {
    margin-left: 235px;

    min-height: 45px;

    display: flex;
    align-items: center;

    justify-content: space-between;

    padding: 0 25px;

    box-sizing: border-box;

    border-top: 1px solid #e5e7eb;

    background: #ffffff;

    color: #9ca3af;

    font-size: 9px;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 800px) {

    .fooddey-admin-main {
        margin-left: 0;
    }

    .fooddey-admin-footer {
        margin-left: 0;
    }

    .admin-container {
        width: min(
            100% - 28px,
            650px
        );

        padding-top: 25px;
    }

    .admin-dashboard-stats {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .admin-quick-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 520px) {

    .admin-container {
        width: calc(
            100% - 22px
        );
    }

    .admin-dashboard-stats {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 8px;
    }

    .admin-dashboard-stat {
        padding: 12px;

        gap: 9px;
    }

    .admin-dashboard-stat-icon {
        width: 32px;
        height: 32px;

        font-size: 13px;
    }

    .admin-dashboard-stat strong {
        font-size: 18px;
    }

    .admin-attention-grid {
        grid-template-columns: 1fr;
    }

    .admin-quick-grid {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 8px;
    }

    .admin-quick-card {
        padding: 13px;
    }

    .admin-welcome h1 {
        font-size: 26px;
    }

    .fooddey-admin-footer {
        padding: 0 12px;
    }

}

/* ============================================================
   FOODDEY ADMIN - AGENT MANAGEMENT
   ============================================================ */

.admin-agents-page {
    width: 100%;
    box-sizing: border-box;
}


/* ============================================================
   ADMIN CONTAINER
   ============================================================ */

.admin-agents-page .container {
    width: min(
        calc(100% - 40px),
        1100px
    );

    margin: 0 auto;

    padding: 35px 0 50px;
}


/* ============================================================
   PAGE HEADER
   ============================================================ */

.admin-agents-page .admin-page-header {
    margin-bottom: 24px;
}

.admin-agents-page .admin-page-header .section-kicker {
    display: block;

    margin-bottom: 6px;

    color: #ff6900;

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

    letter-spacing: .13em;
}

.admin-agents-page .admin-page-header h1 {
    margin: 0 0 6px;

    color: #111827;

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

    line-height: 1.15;
}

.admin-agents-page .admin-page-header p {
    max-width: 650px;

    margin: 0;

    color: #6b7280;

    font-size: 12px;

    line-height: 1.5;
}


/* ============================================================
   ALERTS
   ============================================================ */

.admin-agents-page .admin-alert {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 18px;

    padding: 11px 13px;

    border-radius: 9px;

    font-size: 11px;
    font-weight: 600;
}

.admin-agents-page .admin-alert-success {
    border: 1px solid #bbf7d0;

    background: #f0fdf4;

    color: #166534;
}

.admin-agents-page .admin-alert-error {
    border: 1px solid #fecaca;

    background: #fef2f2;

    color: #991b1b;
}


/* ============================================================
   STATISTICS
   ============================================================ */

.admin-agents-page .admin-stats {
    display: grid;

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

    gap: 12px;

    margin-bottom: 22px;
}


.admin-agents-page .admin-stat-card {
    min-width: 0;

    padding: 16px;

    box-sizing: border-box;

    border: 1px solid #e5e7eb;
    border-radius: 12px;

    background: #ffffff;
}


.admin-agents-page .admin-stat-card span {
    display: block;

    margin-bottom: 6px;

    color: #6b7280;

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

    text-transform: uppercase;

    letter-spacing: .04em;
}


.admin-agents-page .admin-stat-card strong {
    display: block;

    color: #111827;

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

    line-height: 1;
}


/* ============================================================
   SEARCH / FILTER BOX
   ============================================================ */

.admin-agents-page .vendor-filters {
    margin-bottom: 24px;

    padding: 15px;

    border: 1px solid #e5e7eb;
    border-radius: 12px;

    background: #ffffff;
}


.admin-agents-page .vendor-filters form {
    margin: 0;
}


/* ============================================================
   SEARCH
   ============================================================ */

.admin-agents-page .vendor-search {
    display: flex;

    gap: 8px;

    width: 100%;
}


.admin-agents-page .vendor-search .form-control {
    flex: 1;

    min-width: 0;

    height: 42px;

    box-sizing: border-box;

    padding: 0 13px;

    border: 1px solid #dfe3e8;
    border-radius: 8px;

    background: #ffffff;

    color: #111827;

    font-family: inherit;

    font-size: 11px;

    outline: none;

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


.admin-agents-page .vendor-search .form-control:focus {
    border-color: #ff6900;

    box-shadow:
        0 0 0 3px rgba(
            255,
            105,
            0,
            .08
        );
}


.admin-agents-page .vendor-search .btn {
    height: 42px;

    padding: 0 18px;

    border: 0;
    border-radius: 8px;

    background: #ff6900;

    color: #ffffff;

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

    cursor: pointer;
}


/* ============================================================
   FILTER LINKS
   ============================================================ */

.admin-agents-page .vendor-filter-links {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 11px;
}


.admin-agents-page .vendor-filter-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 30px;

    box-sizing: border-box;

    padding: 0 12px;

    border-radius: 7px;

    background: #f3f4f6;

    color: #6b7280;

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

    text-decoration: none;

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


.admin-agents-page .vendor-filter-links a:hover {
    background: #e5e7eb;

    color: #111827;
}


.admin-agents-page .vendor-filter-links a.active {
    background: #ff6900;

    color: #ffffff;
}


/* ============================================================
   AGENTS SECTION
   ============================================================ */

.admin-agents-page .admin-section {
    width: 100%;
}


.admin-agents-page .admin-section-header {
    display: flex;
    align-items: center;

    justify-content: space-between;

    margin-bottom: 12px;
}


.admin-agents-page .admin-section-header h2 {
    margin: 0 0 3px;

    color: #111827;

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


.admin-agents-page .admin-section-header p {
    margin: 0;

    color: #9ca3af;

    font-size: 9px;
}


/* ============================================================
   AGENT LIST
   ============================================================ */

.admin-agents-page .agent-admin-list {
    display: grid;

    grid-template-columns: 1fr;

    gap: 12px;
}


/* ============================================================
   AGENT CARD
   ============================================================ */

.admin-agents-page .agent-admin-card {
    width: 100%;

    box-sizing: border-box;

    padding: 18px;

    border: 1px solid #e5e7eb;
    border-radius: 13px;

    background: #ffffff;

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


.admin-agents-page .agent-admin-card:hover {
    border-color: #d6d9dd;

    box-shadow:
        0 6px 20px rgba(
            0,
            0,
            0,
            .035
        );
}


/* ============================================================
   CARD TOP
   ============================================================ */

.admin-agents-page .agent-admin-top {
    display: flex;
    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

    padding-bottom: 15px;

    border-bottom: 1px solid #f0f1f3;
}


.admin-agents-page .agent-admin-label {
    display: block;

    margin-bottom: 5px;

    color: #9ca3af;

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

    letter-spacing: .09em;
}


.admin-agents-page .agent-admin-top h3 {
    margin: 0 0 4px;

    color: #111827;

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


.admin-agents-page .agent-admin-top p {
    margin: 0;

    color: #9ca3af;

    font-size: 9px;
}


/* ============================================================
   STATUS BADGES
   ============================================================ */

.admin-agents-page .agent-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    padding: 5px 9px;

    border-radius: 20px;

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

    text-transform: uppercase;
}


.admin-agents-page .agent-status-active {
    background: #ecfdf5;

    color: #047857;
}


.admin-agents-page .agent-status-pending {
    background: #fff7ed;

    color: #c2410c;
}


.admin-agents-page .agent-status-inactive {
    background: #f3f4f6;

    color: #6b7280;
}


/* ============================================================
   REFERRAL CODE
   ============================================================ */

.admin-agents-page .agent-code-section {
    display: flex;
    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-top: 14px;

    padding: 11px 12px;

    border: 1px solid #f0f1f3;
    border-radius: 9px;

    background: #fafafa;
}


.admin-agents-page .agent-code-section > div {
    min-width: 0;
}


.admin-agents-page .agent-code-section span {
    display: block;

    margin-bottom: 4px;

    color: #9ca3af;

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

    letter-spacing: .08em;
}


.admin-agents-page .agent-code-section strong {
    display: block;

    color: #111827;

    font-family:
        monospace;

    font-size: 13px;

    letter-spacing: .04em;
}


.admin-agents-page .agent-copy-code {
    flex-shrink: 0;

    padding: 7px 10px;

    border: 1px solid #e5e7eb;
    border-radius: 7px;

    background: #ffffff;

    color: #374151;

    font-family: inherit;

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

    cursor: pointer;
}


.admin-agents-page .agent-copy-code:hover {
    border-color: #ff6900;

    color: #ff6900;
}


/* ============================================================
   CONTACT DETAILS
   ============================================================ */

.admin-agents-page .agent-admin-details {
    display: grid;

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

    gap: 10px;

    margin-top: 14px;
}


.admin-agents-page .agent-admin-details > div {
    min-width: 0;

    padding: 11px 12px;

    border-radius: 8px;

    background: #f8fafc;
}


.admin-agents-page .agent-admin-details span {
    display: block;

    margin-bottom: 4px;

    color: #9ca3af;

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

    letter-spacing: .06em;
}


.admin-agents-page .agent-admin-details strong {
    display: block;

    overflow-wrap: anywhere;

    color: #374151;

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


/* ============================================================
   PERFORMANCE
   ============================================================ */

.admin-agents-page .agent-performance {
    display: grid;

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

    gap: 8px;

    margin-top: 14px;

    padding-top: 14px;

    border-top: 1px solid #f0f1f3;
}


.admin-agents-page .agent-performance > div {
    min-width: 0;
}


.admin-agents-page .agent-performance span {
    display: block;

    margin-bottom: 5px;

    color: #9ca3af;

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

    letter-spacing: .04em;
}


.admin-agents-page .agent-performance strong {
    display: block;

    color: #111827;

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

    overflow-wrap: anywhere;
}


/* ============================================================
   ACTION
   ============================================================ */

.admin-agents-page .agent-admin-action {
    display: flex;
    justify-content: flex-end;

    margin-top: 15px;

    padding-top: 14px;

    border-top: 1px solid #f0f1f3;
}


.admin-agents-page .agent-admin-action form {
    margin: 0;
}


.admin-agents-page .agent-action-button,
.admin-agents-page .agent-deactivate-button {
    min-height: 36px;

    padding: 0 14px;

    border-radius: 8px;

    font-family: inherit;

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

    cursor: pointer;
}


.admin-agents-page .agent-action-button {
    border: 0;

    background: #ff6900;

    color: #ffffff;
}


.admin-agents-page .agent-action-button:hover {
    background: #e85d00;
}


.admin-agents-page .agent-deactivate-button {
    border: 1px solid #fecaca;

    background: #ffffff;

    color: #b91c1c;
}


.admin-agents-page .agent-deactivate-button:hover {
    background: #fef2f2;
}


/* ============================================================
   EMPTY STATE
   ============================================================ */

.admin-agents-page .admin-empty {
    padding: 45px 20px;

    border: 1px solid #e5e7eb;
    border-radius: 13px;

    background: #ffffff;

    text-align: center;
}


.admin-agents-page .admin-empty > div {
    margin-bottom: 8px;

    font-size: 25px;
}


.admin-agents-page .admin-empty h3 {
    margin: 0 0 5px;

    color: #111827;

    font-size: 14px;
}


.admin-agents-page .admin-empty p {
    margin: 0;

    color: #9ca3af;

    font-size: 10px;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .admin-agents-page .admin-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .admin-agents-page .agent-performance {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        row-gap: 13px;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 800px) {

    .admin-agents-page .container {
        width: calc(100% - 28px);

        padding-top: 25px;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 520px) {

    .admin-agents-page .container {
        width: calc(100% - 20px);

        padding-top: 20px;
    }


    .admin-agents-page .admin-page-header h1 {
        font-size: 24px;
    }


    .admin-agents-page .admin-page-header p {
        font-size: 10px;
    }


    .admin-agents-page .admin-stats {
        gap: 8px;

        margin-bottom: 15px;
    }


    .admin-agents-page .admin-stat-card {
        padding: 13px 12px;
    }


    .admin-agents-page .admin-stat-card span {
        font-size: 8px;
    }


    .admin-agents-page .admin-stat-card strong {
        font-size: 20px;
    }


    .admin-agents-page .vendor-filters {
        padding: 11px;

        margin-bottom: 18px;
    }


    .admin-agents-page .vendor-search {
        display: grid;

        grid-template-columns: 1fr;
    }


    .admin-agents-page .vendor-search .btn {
        width: 100%;
    }


    .admin-agents-page .vendor-filter-links {
        gap: 5px;
    }


    .admin-agents-page .vendor-filter-links a {
        flex: 1;

        min-width: 60px;

        padding: 0 8px;
    }


    .admin-agents-page .agent-admin-card {
        padding: 14px;
    }


    .admin-agents-page .agent-admin-top {
        gap: 10px;
    }


    .admin-agents-page .agent-admin-top h3 {
        font-size: 14px;
    }


    .admin-agents-page .agent-code-section {
        align-items: flex-end;
    }


    .admin-agents-page .agent-admin-details {
        grid-template-columns: 1fr;
    }


    .admin-agents-page .agent-performance {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .admin-agents-page .agent-admin-action {
        justify-content: stretch;
    }


    .admin-agents-page .agent-admin-action form {
        width: 100%;
    }


    .admin-agents-page .agent-action-button,
    .admin-agents-page .agent-deactivate-button {
        width: 100%;
    }

}


/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media (max-width: 360px) {

    .admin-agents-page .admin-stats {
        grid-template-columns: 1fr;
    }


    .admin-agents-page .agent-performance {
        grid-template-columns: 1fr 1fr;
    }

}

/* ============================================================
   FOODDEY AGENT LOGIN & REGISTRATION
   ============================================================ */


/* ------------------------------------------------------------
   AGENT LOGIN PAGE
   ------------------------------------------------------------ */

.agent-login-page {
    min-height: calc(100vh - 80px);
    padding: 55px 20px 70px;
    background: #f7f7f7;
}


.agent-login-page > .container {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}


.agent-login-card {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;

    padding: 42px;

    background: #ffffff;

    border: 1px solid #eeeeee;
    border-radius: 20px;

    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.07);

    text-align: center;
}


/* ------------------------------------------------------------
   LOGIN ICON
   ------------------------------------------------------------ */

.agent-login-icon {
    width: 68px;
    height: 68px;

    margin: 0 auto 18px;

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

    background: #fff3e8;

    border-radius: 18px;

    font-size: 32px;
}


/* ------------------------------------------------------------
   LOGIN HEADING
   ------------------------------------------------------------ */

.agent-login-card .section-kicker {
    display: block;

    margin-bottom: 8px;
}


.agent-login-card h1 {
    margin: 0 0 10px;

    font-size: 32px;
    line-height: 1.2;

    color: #171717;
}


.agent-login-card > p {
    margin: 0 auto 28px;

    max-width: 430px;

    color: #707070;

    font-size: 15px;
    line-height: 1.6;
}


/* ------------------------------------------------------------
   ERROR MESSAGES
   ------------------------------------------------------------ */

.agent-login-card .form-errors {
    width: 100%;

    margin: 0 0 22px;

    padding: 14px 16px;

    background: #fff2f2;

    border: 1px solid #f3caca;
    border-radius: 10px;

    text-align: left;

    color: #a40000;

    font-size: 14px;
    line-height: 1.5;
}


.agent-login-card .form-errors div + div {
    margin-top: 5px;
}


/* ------------------------------------------------------------
   LOGIN FORM
   ------------------------------------------------------------ */

.agent-login-card form {
    width: 100%;

    text-align: left;
}


.agent-login-card .form-group {
    margin-bottom: 20px;
}


.agent-login-card .form-label {
    display: block;

    margin-bottom: 8px;

    font-size: 14px;
    font-weight: 600;

    color: #252525;
}


.agent-login-card .form-control {
    width: 100%;

    min-height: 51px;

    padding: 13px 15px;

    border: 1px solid #d8d8d8;

    border-radius: 10px;

    background: #ffffff;

    color: #222222;

    font-family: inherit;

    font-size: 15px;

    outline: none;

    box-sizing: border-box;

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


.agent-login-card .form-control:focus {
    border-color: #ff6b00;

    box-shadow:
        0 0 0 3px rgba(255, 107, 0, 0.10);

    background: #fff;
}


/* ------------------------------------------------------------
   LOGIN BUTTON
   ------------------------------------------------------------ */

.agent-login-button {
    width: 100%;

    min-height: 52px;

    margin-top: 5px;

    border: none;
    border-radius: 10px;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}


.agent-login-button:hover {
    transform: translateY(-1px);

    box-shadow:
        0 8px 20px rgba(255, 107, 0, 0.20);
}


.agent-login-button:active {
    transform: translateY(0);
}


/* ------------------------------------------------------------
   LOGIN FOOTER
   ------------------------------------------------------------ */

.agent-login-footer {
    margin-top: 26px;

    padding-top: 23px;

    border-top: 1px solid #eeeeee;

    color: #666666;

    font-size: 14px;

    line-height: 1.6;
}


.agent-login-footer a {
    margin-left: 5px;

    color: #ff6b00;

    font-weight: 700;

    text-decoration: none;
}


.agent-login-footer a:hover {
    text-decoration: underline;
}


/* ------------------------------------------------------------
   BACK HOME
   ------------------------------------------------------------ */

.agent-back-home {
    display: inline-block;

    margin-top: 20px;

    color: #666666;

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;
}


.agent-back-home:hover {
    color: #ff6b00;
}


/* ============================================================
   AGENT REGISTRATION
   ============================================================ */

.agent-registration-page {
    width: 100%;

    padding: 55px 20px 80px;

    background: #f7f7f7;
}


.agent-registration-page > .container {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;
}


.agent-registration-wrapper {
    display: grid;

    grid-template-columns:
        minmax(280px, 0.8fr)
        minmax(400px, 1.2fr);

    gap: 45px;

    align-items: start;
}


/* ------------------------------------------------------------
   REGISTRATION INTRO
   ------------------------------------------------------------ */

.agent-registration-intro {
    padding: 30px 10px;
}


.agent-registration-intro .section-kicker {
    display: block;

    margin-bottom: 10px;
}


.agent-registration-intro h1 {
    margin: 0 0 18px;

    max-width: 480px;

    font-size: 42px;
    line-height: 1.12;

    color: #171717;
}


.agent-registration-intro > p {
    max-width: 470px;

    margin: 0 0 32px;

    color: #686868;

    font-size: 16px;

    line-height: 1.7;
}


/* ------------------------------------------------------------
   BENEFITS
   ------------------------------------------------------------ */

.agent-benefits {
    display: flex;

    flex-direction: column;

    gap: 16px;

    max-width: 470px;
}


.agent-benefits > div {
    display: flex;

    align-items: center;

    gap: 14px;

    padding: 15px 16px;

    background: #ffffff;

    border: 1px solid #eeeeee;

    border-radius: 12px;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.04);
}


.agent-benefits strong {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: flex;

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

    background: #fff3e8;

    border-radius: 10px;

    font-size: 20px;
}


.agent-benefits span {
    color: #333333;

    font-size: 14px;

    line-height: 1.5;
}


/* ------------------------------------------------------------
   REGISTRATION CARD
   ------------------------------------------------------------ */

.agent-registration-card {
    width: 100%;

    padding: 38px;

    background: #ffffff;

    border: 1px solid #eeeeee;

    border-radius: 20px;

    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.07);

    box-sizing: border-box;
}


/* ------------------------------------------------------------
   REGISTRATION HEADING
   ------------------------------------------------------------ */

.agent-registration-heading {
    margin-bottom: 28px;
}


.agent-registration-heading h2 {
    margin: 0 0 8px;

    color: #171717;

    font-size: 27px;

    line-height: 1.25;
}


.agent-registration-heading p {
    margin: 0;

    color: #707070;

    font-size: 14px;

    line-height: 1.5;
}


/* ------------------------------------------------------------
   REGISTRATION ERRORS
   ------------------------------------------------------------ */

.agent-registration-card .form-errors {
    margin-bottom: 24px;

    padding: 14px 16px;

    background: #fff2f2;

    border: 1px solid #f3caca;

    border-radius: 10px;

    color: #a40000;

    font-size: 14px;

    line-height: 1.5;
}


.agent-registration-card .form-errors div + div {
    margin-top: 5px;
}


/* ------------------------------------------------------------
   FORM SECTIONS
   ------------------------------------------------------------ */

.agent-registration-card .form-section {
    margin-bottom: 30px;

    padding-bottom: 26px;

    border-bottom: 1px solid #eeeeee;
}


.agent-registration-card .form-section:last-of-type {
    margin-bottom: 22px;

    padding-bottom: 0;

    border-bottom: none;
}


.agent-registration-card .form-section h3 {
    margin: 0 0 18px;

    color: #222222;

    font-size: 18px;

    line-height: 1.3;
}


/* ------------------------------------------------------------
   FORM ROW
   ------------------------------------------------------------ */

.agent-registration-card .form-row {
    display: grid;

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

    gap: 16px;
}


/* ------------------------------------------------------------
   FORM GROUP
   ------------------------------------------------------------ */

.agent-registration-card .form-group {
    margin-bottom: 18px;
}


.agent-registration-card .form-label {
    display: block;

    margin-bottom: 8px;

    color: #252525;

    font-size: 14px;

    font-weight: 600;
}


.agent-registration-card .form-control {
    width: 100%;

    min-height: 50px;

    padding: 13px 14px;

    box-sizing: border-box;

    border: 1px solid #d8d8d8;

    border-radius: 10px;

    background: #ffffff;

    color: #222222;

    font-family: inherit;

    font-size: 15px;

    outline: none;

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


.agent-registration-card .form-control:focus {
    border-color: #ff6b00;

    box-shadow:
        0 0 0 3px rgba(255, 107, 0, 0.10);
}


/* ------------------------------------------------------------
   REGISTRATION BUTTON
   ------------------------------------------------------------ */

.agent-registration-submit {
    width: 100%;

    min-height: 53px;

    border: none;

    border-radius: 10px;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.agent-registration-submit:hover {
    transform: translateY(-1px);

    box-shadow:
        0 8px 20px rgba(255, 107, 0, 0.20);
}


.agent-registration-submit:active {
    transform: translateY(0);
}


/* ------------------------------------------------------------
   REGISTRATION NOTE
   ------------------------------------------------------------ */

.agent-registration-card .registration-note {
    margin: 14px 0 0;

    color: #777777;

    font-size: 12px;

    line-height: 1.6;

    text-align: center;
}


/* ------------------------------------------------------------
   LOGIN LINK
   ------------------------------------------------------------ */

.agent-login-link {
    margin-top: 26px;

    padding-top: 22px;

    border-top: 1px solid #eeeeee;

    text-align: center;

    color: #666666;

    font-size: 14px;

    line-height: 1.6;
}


.agent-login-link a {
    margin-left: 5px;

    color: #ff6b00;

    font-weight: 700;

    text-decoration: none;
}


.agent-login-link a:hover {
    text-decoration: underline;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 850px) {

    .agent-registration-wrapper {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .agent-registration-intro {
        padding: 10px 0;

        text-align: center;
    }


    .agent-registration-intro h1 {
        margin-left: auto;
        margin-right: auto;

        font-size: 36px;
    }


    .agent-registration-intro > p {
        margin-left: auto;
        margin-right: auto;
    }


    .agent-benefits {
        margin-left: auto;
        margin-right: auto;

        text-align: left;
    }


    .agent-registration-card {
        max-width: 650px;

        margin: 0 auto;
    }

}


/* ============================================================
   MOBILE PHONE
   ============================================================ */

@media (max-width: 600px) {

    .agent-login-page {
        min-height: calc(100vh - 70px);

        padding: 30px 14px 50px;
    }


    .agent-login-card {
        padding: 28px 20px;

        border-radius: 15px;
    }


    .agent-login-icon {
        width: 58px;
        height: 58px;

        font-size: 28px;

        border-radius: 15px;
    }


    .agent-login-card h1 {
        font-size: 27px;
    }


    .agent-login-card > p {
        font-size: 14px;
    }


    .agent-registration-page {
        padding: 30px 14px 55px;
    }


    .agent-registration-intro {
        padding: 0;
    }


    .agent-registration-intro h1 {
        font-size: 30px;
    }


    .agent-registration-intro > p {
        font-size: 14px;
    }


    .agent-registration-card {
        padding: 25px 19px;

        border-radius: 15px;
    }


    .agent-registration-heading h2 {
        font-size: 24px;
    }


    .agent-registration-card .form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .agent-registration-card .form-control {
        min-height: 49px;

        font-size: 16px;
    }


    .agent-registration-card .form-section h3 {
        font-size: 17px;
    }


    .agent-registration-submit {
        min-height: 51px;
    }

}


/* ============================================================
   SMALL PHONES
   ============================================================ */

@media (max-width: 380px) {

    .agent-login-page {
        padding-left: 10px;
        padding-right: 10px;
    }


    .agent-login-card {
        padding: 24px 16px;
    }


    .agent-registration-page {
        padding-left: 10px;
        padding-right: 10px;
    }


    .agent-registration-card {
        padding: 22px 15px;
    }


    .agent-registration-intro h1 {
        font-size: 27px;
    }

}

/* =========================================================
   AGENT HEADER ACTIONS
   ========================================================= */

.agent-header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}


/* =========================================================
   AGENT LOGOUT
   ========================================================= */

.agent-logout-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 0 18px;

    border: 1px solid #e5e7eb;
    border-radius: 10px;

    background: #ffffff;

    color: #b42318;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.agent-logout-link:hover {
    background: #fff5f5;
    border-color: #f3b4b4;
    color: #9f1c13;

    transform: translateY(-1px);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .agent-header-actions {
        width: 100%;

        justify-content: space-between;

        gap: 12px;
    }

    .agent-code-display {
        flex: 1;
    }

    .agent-logout-link {
        flex-shrink: 0;

        min-height: 40px;
        padding: 0 14px;

        font-size: 13px;
    }

}

/* ============================================================
   FOODDEY VENDOR DASHBOARD
   ============================================================ */

.vendor-dashboard-layout {
    min-height: 100vh;
    display: flex;
    background: #f7f7f8;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.vendor-sidebar {
    width: 260px;
    min-height: 100vh;
    background: #ffffff;
    border-right: 1px solid #e8e8e8;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.vendor-sidebar-brand {
    padding: 24px 22px;
    border-bottom: 1px solid #eeeeee;
}

.vendor-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #171717;
    font-size: 22px;
    font-weight: 800;
}

.vendor-brand-icon {
    font-size: 25px;
}

.vendor-sidebar-business {
    padding: 22px;
    border-bottom: 1px solid #eeeeee;
}

.vendor-sidebar-business span {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #999999;
    margin-bottom: 7px;
}

.vendor-sidebar-business strong {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    color: #222222;
    word-break: break-word;
}


/* ============================================================
   SIDEBAR NAVIGATION
   ============================================================ */

.vendor-sidebar-nav {
    flex: 1;
    padding: 16px 12px;
    overflow-y: auto;
}

.vendor-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 10px 13px;
    margin-bottom: 4px;
    border-radius: 9px;
    text-decoration: none;
    color: #555555;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.vendor-sidebar-nav a:hover {
    background: #fff4eb;
    color: #ff6b00;
}

.vendor-sidebar-nav a.active {
    background: #ff6b00;
    color: #ffffff;
}

.vendor-nav-icon {
    width: 22px;
    min-width: 22px;
    text-align: center;
    font-size: 17px;
}

.vendor-nav-count {
    margin-left: auto;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: 20px;
    background: #ff6b00;
    color: #ffffff;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vendor-sidebar-nav a.active .vendor-nav-count {
    background: #ffffff;
    color: #ff6b00;
}


/* ============================================================
   SIDEBAR BOTTOM
   ============================================================ */

.vendor-sidebar-bottom {
    padding: 16px 12px;
    border-top: 1px solid #eeeeee;
}

.vendor-logout-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 13px;
    border-radius: 9px;
    text-decoration: none;
    color: #d33a3a;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s ease;
}

.vendor-logout-link:hover {
    background: #fff1f1;
}


/* ============================================================
   MAIN AREA
   ============================================================ */

.vendor-dashboard-main {
    margin-left: 260px;
    width: calc(100% - 260px);
    min-width: 0;
}


/* ============================================================
   TOP BAR
   ============================================================ */

.vendor-dashboard-topbar {
    height: 72px;
    background: #ffffff;
    border-bottom: 1px solid #e9e9e9;
    display: flex;
    align-items: center;
    padding: 0 30px;
    position: sticky;
    top: 0;
    z-index: 500;
}

.vendor-topbar-title {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.vendor-topbar-title span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #999999;
}

.vendor-topbar-title strong {
    font-size: 14px;
    color: #222222;
}

.vendor-notification-button {
    width: 42px;
    height: 42px;
    margin-left: auto;
    border-radius: 50%;
    background: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 19px;
    position: relative;
}

.vendor-notification-button span {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 20px;
    background: #ff6b00;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ============================================================
   MOBILE MENU BUTTON
   ============================================================ */

.vendor-menu-toggle {
    display: none;
    border: 0;
    background: transparent;
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
    margin-right: 12px;
}


/* ============================================================
   CONTENT
   ============================================================ */

.vendor-dashboard-content {
    padding: 36px;
    max-width: 1500px;
    margin: 0 auto;
}


/* ============================================================
   WELCOME
   ============================================================ */

.vendor-dashboard-welcome {
    margin-bottom: 30px;
}

.vendor-dashboard-welcome .section-kicker {
    display: inline-block;
    margin-bottom: 8px;
}

.vendor-dashboard-welcome h1 {
    margin: 0 0 8px;
    font-size: 32px;
    line-height: 1.2;
    color: #171717;
}

.vendor-dashboard-welcome p {
    margin: 0;
    color: #777777;
    font-size: 15px;
}


/* ============================================================
   STATISTICS
   ============================================================ */

.vendor-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 30px;
}

.vendor-dashboard-stat {
    background: #ffffff;
    border: 1px solid #e9e9e9;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.vendor-dashboard-stat > span {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #999999;
    margin-bottom: 12px;
}

.vendor-dashboard-stat > strong {
    display: block;
    font-size: 28px;
    line-height: 1.2;
    color: #181818;
    margin-bottom: 7px;
}

.vendor-dashboard-stat small {
    display: block;
    color: #888888;
    font-size: 12px;
}

.vendor-stat-warning {
    border-color: #ffd7b8;
    background: #fffaf6;
}

.vendor-stat-warning > strong {
    color: #e85c00;
}


/* ============================================================
   DASHBOARD SECTIONS
   ============================================================ */

.vendor-dashboard-section {
    background: #ffffff;
    border: 1px solid #e9e9e9;
    border-radius: 14px;
    margin-bottom: 25px;
    overflow: hidden;
}

.vendor-dashboard-section-header {
    min-height: 85px;
    padding: 22px 25px;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.vendor-dashboard-section-header .section-kicker {
    display: block;
    margin-bottom: 5px;
}

.vendor-dashboard-section-header h2 {
    margin: 0;
    font-size: 20px;
    color: #202020;
}

.vendor-view-all {
    color: #ff6b00;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.vendor-view-all:hover {
    text-decoration: underline;
}


/* ============================================================
   EMPTY STATE
   ============================================================ */

.vendor-empty-state {
    padding: 55px 25px;
    text-align: center;
}

.vendor-empty-state > div {
    font-size: 42px;
    margin-bottom: 12px;
}

.vendor-empty-state h3 {
    margin: 0 0 7px;
    color: #222222;
    font-size: 18px;
}

.vendor-empty-state p {
    margin: 0 auto;
    max-width: 430px;
    color: #888888;
    font-size: 14px;
    line-height: 1.6;
}


/* ============================================================
   ORDER LIST
   ============================================================ */

.vendor-order-list {
    width: 100%;
}

.vendor-order-card {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 120px 80px;
    align-items: center;
    gap: 20px;
    padding: 18px 25px;
    border-bottom: 1px solid #eeeeee;
    transition: background 0.2s ease;
}

.vendor-order-card:last-child {
    border-bottom: 0;
}

.vendor-order-card:hover {
    background: #fafafa;
}

.vendor-order-main strong {
    display: block;
    color: #202020;
    font-size: 14px;
    margin-bottom: 4px;
}

.vendor-order-main span {
    display: block;
    color: #888888;
    font-size: 12px;
}

.vendor-order-amount strong {
    display: block;
    color: #202020;
    font-size: 14px;
    margin-bottom: 4px;
}

.vendor-order-amount span {
    color: #888888;
    font-size: 11px;
}

.vendor-order-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 20px;
    background: #f1f1f1;
    color: #555555;
    font-size: 11px;
    font-weight: 700;
}

.vendor-order-status-pending,
.vendor-order-status-new,
.vendor-order-status-awaiting_confirmation {
    background: #fff1e5;
    color: #e85c00;
}

.vendor-order-status-confirmed,
.vendor-order-status-processing {
    background: #eaf4ff;
    color: #2774b8;
}

.vendor-order-status-completed {
    background: #eaf8ef;
    color: #218346;
}

.vendor-order-status-cancelled,
.vendor-order-status-rejected {
    background: #fff0f0;
    color: #c73a3a;
}

.vendor-order-date {
    color: #888888;
    font-size: 12px;
}

.vendor-order-view {
    color: #ff6b00;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
}

.vendor-order-view:hover {
    text-decoration: underline;
}


/* ============================================================
   QUICK ACTIONS
   ============================================================ */

.vendor-quick-actions {
    padding: 22px 25px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.vendor-quick-action {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    border: 1px solid #e8e8e8;
    border-radius: 11px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.vendor-quick-action:hover {
    border-color: #ff6b00;
    background: #fffaf6;
    transform: translateY(-2px);
}

.vendor-quick-action > span {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #fff1e6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.vendor-quick-action strong {
    display: block;
    color: #222222;
    font-size: 14px;
    margin-bottom: 4px;
}

.vendor-quick-action small {
    display: block;
    color: #888888;
    font-size: 11px;
    line-height: 1.4;
}


/* ============================================================
   MOBILE OVERLAY
   ============================================================ */

.vendor-sidebar-overlay {
    display: none;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {

    .vendor-dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .vendor-order-card {
        grid-template-columns: 1.4fr 1fr 1fr;
    }

    .vendor-order-date {
        display: none;
    }

    .vendor-order-view {
        text-align: left;
    }

    .vendor-quick-actions {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 800px) {

    .vendor-sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 8px 0 25px rgba(0, 0, 0, 0.08);
    }

    .vendor-sidebar.open {
        transform: translateX(0);
    }

    .vendor-sidebar-overlay.active {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 900;
    }

    .vendor-dashboard-main {
        margin-left: 0;
        width: 100%;
    }

    .vendor-menu-toggle {
        display: block;
    }

    .vendor-dashboard-topbar {
        padding: 0 18px;
    }

    .vendor-dashboard-content {
        padding: 25px 18px;
    }

    .vendor-dashboard-welcome h1 {
        font-size: 27px;
    }

}


@media (max-width: 600px) {

    .vendor-dashboard-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .vendor-dashboard-stat {
        padding: 18px;
    }

    .vendor-dashboard-stat > strong {
        font-size: 25px;
    }

    .vendor-dashboard-section-header {
        padding: 18px;
        min-height: auto;
    }

    .vendor-dashboard-section-header h2 {
        font-size: 18px;
    }

    .vendor-order-card {
        display: block;
        padding: 18px;
    }

    .vendor-order-main,
    .vendor-order-amount,
    .vendor-order-status,
    .vendor-order-view {
        margin-bottom: 10px;
    }

    .vendor-order-view {
        display: inline-block;
        margin-bottom: 0;
    }

    .vendor-quick-actions {
        padding: 15px;
    }

    .vendor-quick-action {
        padding: 15px;
    }

}

/* ============================================================
   VENDOR ORDERS
   ============================================================ */

.vendor-order-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 20px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.vendor-order-filters a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    padding: 9px 13px;
    border-radius: 8px;
    background: #f6f6f6;
    color: #666666;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.vendor-order-filters a:hover {
    background: #fff1e6;
    color: #ff6b00;
}

.vendor-order-filters a.active {
    background: #ff6b00;
    color: #ffffff;
}

.vendor-order-filters a span {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 20px;
    background: #ffffff;
    color: #666666;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.vendor-order-filters a.active span {
    color: #ff6b00;
}

.vendor-order-phone {
    display: block;
    margin-top: 4px;
    color: #999999;
    font-size: 11px;
}

.vendor-order-type span {
    display: block;
    margin-bottom: 4px;
    color: #999999;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.7px;
}

.vendor-order-type strong {
    display: block;
    color: #444444;
    font-size: 12px;
}

.vendor-order-date small {
    display: block;
    margin-top: 3px;
    color: #aaaaaa;
    font-size: 10px;
}


/* ============================================================
   ORDERS RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {

    .vendor-order-card {
        grid-template-columns: 1.5fr 1fr 1fr;
    }

    .vendor-order-type {
        display: none;
    }

}


@media (max-width: 700px) {

    .vendor-order-filters {
        padding: 12px;
    }

    .vendor-order-card {
        display: block;
        padding: 18px;
    }

    .vendor-order-main,
    .vendor-order-amount,
    .vendor-order-status,
    .vendor-order-date {
        margin-bottom: 12px;
    }

    .vendor-order-type {
        display: block;
        margin-bottom: 12px;
    }

    .vendor-order-view {
        display: inline-block;
        margin-top: 3px;
    }

}

/* ============================================================
   FOODDEY VENDOR
   ADD FOOD PAGE
   ============================================================ */


/* ============================================================
   MENU FORM CARD
   ============================================================ */

.vendor-menu-form-card {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 32px;
    box-sizing: border-box;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
}


/* ============================================================
   FORM HEADING
   ============================================================ */

.vendor-menu-form-heading {
    padding-bottom: 24px;
    margin-bottom: 28px;
    border-bottom: 1px solid #e5e7eb;
}

.vendor-menu-form-heading h2 {
    margin: 6px 0 8px;
    color: #111827;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
}

.vendor-menu-form-heading p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}


/* ============================================================
   FORM
   ============================================================ */

.vendor-menu-form {
    width: 100%;
}


/* ============================================================
   FORM GROUP
   ============================================================ */

.vendor-menu-form .form-group {
    margin-bottom: 24px;
}

.vendor-menu-form .form-group:last-child {
    margin-bottom: 0;
}


/* ============================================================
   FORM LABEL
   ============================================================ */

.vendor-menu-form .form-label {
    display: block;
    margin-bottom: 8px;
    color: #1f2937;
    font-size: 14px;
    font-weight: 600;
}


/* ============================================================
   INPUTS
   ============================================================ */

.vendor-menu-form .form-control {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #ffffff;
    color: #111827;
    font-family: inherit;
    font-size: 15px;
    padding: 12px 14px;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.vendor-menu-form textarea.form-control {
    min-height: 130px;
    resize: vertical;
    line-height: 1.6;
}

.vendor-menu-form .form-control::placeholder {
    color: #9ca3af;
}

.vendor-menu-form .form-control:focus {
    border-color: #111827;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
}


/* ============================================================
   FORM HELP
   ============================================================ */

.vendor-menu-form .form-help {
    display: block;
    margin-top: 7px;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.5;
}


/* ============================================================
   CATEGORY + PRICE ROW
   ============================================================ */

.vendor-menu-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}


/* ============================================================
   PRICE INPUT
   ============================================================ */

.vendor-price-input {
    position: relative;
    width: 100%;
}

.vendor-price-input > span {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    z-index: 2;
    color: #6b7280;
    font-size: 15px;
    font-weight: 600;
    pointer-events: none;
}

.vendor-price-input .form-control {
    padding-left: 34px;
}


/* ============================================================
   AVAILABILITY OPTIONS
   ============================================================ */

.vendor-menu-status-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* ============================================================
   STATUS OPTION
   ============================================================ */

.vendor-menu-status-option {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.vendor-menu-status-option:hover {
    border-color: #9ca3af;
    background: #f9fafb;
}


/* ============================================================
   RADIO BUTTON
   ============================================================ */

.vendor-menu-status-option input[type="radio"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin: 2px 0 0;
    accent-color: #111827;
    cursor: pointer;
}


/* ============================================================
   STATUS TEXT
   ============================================================ */

.vendor-menu-status-option > span {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.vendor-menu-status-option strong {
    color: #111827;
    font-size: 14px;
    line-height: 1.4;
}

.vendor-menu-status-option small {
    color: #6b7280;
    font-size: 13px;
    line-height: 1.5;
}


/* ============================================================
   SELECTED STATUS
   ============================================================ */

.vendor-menu-status-option:has(
    input[type="radio"]:checked
) {
    border-color: #111827;
    background: #f9fafb;
    box-shadow: 0 0 0 1px #111827;
}


/* ============================================================
   FORM ACTIONS
   ============================================================ */

.vendor-menu-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}


/* ============================================================
   SECONDARY BUTTON
   ============================================================ */

.vendor-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 20px;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #ffffff;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.vendor-secondary-button:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    color: #111827;
    transform: translateY(-1px);
}


/* ============================================================
   PRIMARY SUBMIT BUTTON
   ============================================================ */

.vendor-menu-form-actions .btn {
    min-height: 46px;
    padding: 0 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}


/* ============================================================
   ERROR AREA
   ============================================================ */

.vendor-dashboard-content .form-errors {
    max-width: 850px;
    margin: 0 auto 24px;
    padding: 15px 18px;
    box-sizing: border-box;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 14px;
    line-height: 1.6;
}

.vendor-dashboard-content .form-errors div + div {
    margin-top: 5px;
}


/* ============================================================
   PAGE HEADER BUTTON
   ============================================================ */

.vendor-dashboard-welcome > div:last-child {
    flex-shrink: 0;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {

    .vendor-menu-form-card {
        padding: 24px 20px;
        border-radius: 14px;
    }


    .vendor-menu-form .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }


    .vendor-menu-form .form-group {
        margin-bottom: 20px;
    }


    .vendor-menu-form-heading {
        padding-bottom: 20px;
        margin-bottom: 24px;
    }


    .vendor-menu-form-heading h2 {
        font-size: 20px;
    }


    .vendor-menu-status-option {
        padding: 15px;
    }


    .vendor-menu-form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }


    .vendor-menu-form-actions .btn,
    .vendor-menu-form-actions .vendor-secondary-button {
        width: 100%;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .vendor-menu-form-card {
        padding: 20px 16px;
    }


    .vendor-menu-form-heading h2 {
        font-size: 19px;
    }


    .vendor-menu-form .form-control {
        font-size: 16px;
    }


    .vendor-dashboard-welcome {
        gap: 18px;
    }


    .vendor-dashboard-welcome > div:last-child {
        width: 100%;
    }


    .vendor-dashboard-welcome > div:last-child
    .vendor-secondary-button {
        width: 100%;
    }

}

/* ================================================================
   FOODDEY VENDOR PROFILE
   Sleek Mobile-First Profile Design
   ================================================================ */


/* ================================================================
   PROFILE PAGE BASE
   ================================================================ */

.vendor-profile-success {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0 0 18px;

    padding: 13px 15px;

    border-radius: 12px;

    background: #ecfdf3;
    border: 1px solid #bbf7d0;

    color: #166534;

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


/* ================================================================
   BUSINESS STATUS CARD
   ================================================================ */

.vendor-profile-status-card {
    background: #ffffff;

    border: 1px solid #e9e9e9;

    border-radius: 16px;

    padding: 16px;

    margin-bottom: 22px;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.04);
}


.vendor-profile-status-main {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 15px;
}


.vendor-profile-status-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    border-radius: 12px;

    background: #f7f3eb;

    font-size: 20px;
}


.vendor-profile-status-main .section-kicker {
    display: block;

    margin-bottom: 3px;

    font-size: 9px;
    letter-spacing: 1.3px;
}


.vendor-profile-status-main h2 {
    margin: 0;

    font-size: 17px;

    line-height: 1.3;

    color: #171717;

    word-break: break-word;
}


/* ================================================================
   STATUS GRID
   ================================================================ */

.vendor-profile-status-grid {
    display: grid;

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

    gap: 8px;

    padding-top: 13px;

    border-top: 1px solid #eeeeee;
}


.vendor-profile-status-grid > div {
    min-width: 0;

    padding: 9px 7px;

    border-radius: 9px;

    background: #fafafa;
}


.vendor-profile-status-grid span {
    display: block;

    margin-bottom: 4px;

    font-size: 8px;

    letter-spacing: 0.7px;

    color: #888;

    font-weight: 700;
}


.vendor-profile-status-grid strong {
    display: block;

    font-size: 11px;

    line-height: 1.3;

    color: #222;

    word-break: break-word;
}


/* ================================================================
   PROFILE SECTION
   ================================================================ */

.vendor-profile-form-card {
    background: #ffffff;

    border: 1px solid #e8e8e8;

    border-radius: 16px;

    padding: 17px;

    margin-bottom: 15px;

    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.035);
}


/* ================================================================
   FORM CARD HEADING
   ================================================================ */

.vendor-profile-form-card-heading {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    margin-bottom: 19px;
}


.vendor-profile-form-card-heading > span {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

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

    border-radius: 10px;

    background: #f7f3eb;

    font-size: 17px;
}


.vendor-profile-form-card-heading h3 {
    margin: 0 0 3px;

    font-size: 15px;

    line-height: 1.3;

    color: #181818;
}


.vendor-profile-form-card-heading p {
    margin: 0;

    font-size: 11px;

    line-height: 1.5;

    color: #858585;
}


/* ================================================================
   REGISTERED INFORMATION
   ================================================================ */

.vendor-profile-locked-grid {
    display: grid;

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

    gap: 9px;
}


.vendor-profile-locked-card {
    min-width: 0;

    padding: 13px;

    background: #fafafa;

    border: 1px solid #eeeeee;

    border-radius: 12px;
}


.vendor-profile-locked-card > span {
    display: block;

    margin-bottom: 5px;

    color: #8b8b8b;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.7px;
}


.vendor-profile-locked-card strong {
    display: block;

    color: #222;

    font-size: 12px;

    line-height: 1.4;

    overflow-wrap: anywhere;
}


.vendor-profile-locked-card small {
    display: block;

    margin-top: 6px;

    color: #999;

    font-size: 9px;

    line-height: 1.3;
}


/* ================================================================
   FORM
   ================================================================ */

.vendor-profile-form {
    width: 100%;
}


.vendor-profile-form .form-group {
    margin-bottom: 17px;
}


.vendor-profile-form .form-group:last-child {
    margin-bottom: 0;
}


/* ================================================================
   LABELS
   ================================================================ */

.vendor-profile-form .form-label {
    display: block;

    margin-bottom: 7px;

    color: #333;

    font-size: 12px;

    font-weight: 700;
}


/* ================================================================
   INPUTS
   ================================================================ */

.vendor-profile-form .form-control {
    width: 100%;

    min-height: 46px;

    padding: 11px 13px;

    border: 1px solid #dedede;

    border-radius: 10px;

    background: #ffffff;

    color: #222;

    font-family: inherit;

    font-size: 13px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;

    box-sizing: border-box;
}


.vendor-profile-form textarea.form-control {
    min-height: 120px;

    resize: vertical;

    line-height: 1.5;
}


.vendor-profile-form .form-control:focus {
    border-color: #b88a44;

    box-shadow:
        0 0 0 3px rgba(184, 138, 68, 0.10);
}


.vendor-profile-form .form-control::placeholder {
    color: #aaa;
}


/* ================================================================
   FORM HELP
   ================================================================ */

.vendor-profile-form .form-help {
    display: block;

    margin-top: 6px;

    color: #8a8a8a;

    font-size: 10px;

    line-height: 1.45;
}


/* ================================================================
   PHONE PASSWORD SECURITY
   ================================================================ */

.vendor-profile-password-box {
    display: none;

    margin-top: 5px;

    padding: 13px;

    border-radius: 11px;

    background: #fffaf1;

    border: 1px solid #f0dfbd;
}


.vendor-profile-password-box.active {
    display: block;
}


.vendor-profile-password-box::before {
    content: "🔐 Phone number security";

    display: block;

    margin-bottom: 9px;

    color: #7a5727;

    font-size: 11px;

    font-weight: 700;
}


.vendor-profile-password-box .form-label {
    margin-bottom: 6px;
}


/* ================================================================
   FORM ROW
   ================================================================ */

.vendor-profile-form .form-row {
    display: grid;

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

    gap: 12px;
}


/* ================================================================
   LOCATION BUTTON
   ================================================================ */

.vendor-profile-form .location-detect-button {
    width: 100%;

    min-height: 44px;

    margin-bottom: 9px;

    padding: 10px 13px;

    border: 1px solid #dedede;

    border-radius: 10px;

    background: #fafafa;

    color: #333;

    font-family: inherit;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease;
}


.vendor-profile-form .location-detect-button:hover {
    background: #f4f4f4;

    border-color: #cfcfcf;
}


.vendor-profile-form .location-detect-button:active {
    transform: scale(0.98);
}


.vendor-profile-form .location-detect-button:disabled {
    opacity: 0.6;

    cursor: wait;
}


/* ================================================================
   LOCATION STATUS
   ================================================================ */

.vendor-profile-form .location-status {
    margin-bottom: 15px;

    padding: 9px 11px;

    border-radius: 8px;

    background: #f7f7f7;

    color: #777;

    font-size: 10px;

    line-height: 1.4;
}


/* ================================================================
   CHECKBOX OPTIONS
   ================================================================ */

.vendor-profile-form .checkbox-option {
    display: flex;
    align-items: center;

    gap: 10px;

    min-height: 46px;

    padding: 11px 12px;

    margin-bottom: 9px;

    border: 1px solid #e5e5e5;

    border-radius: 10px;

    background: #fff;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}


.vendor-profile-form .checkbox-option:last-child {
    margin-bottom: 0;
}


.vendor-profile-form .checkbox-option:hover {
    background: #fafafa;
}


.vendor-profile-form .checkbox-option input {
    width: 17px;
    height: 17px;

    margin: 0;

    accent-color: #b88a44;

    flex: 0 0 17px;
}


.vendor-profile-form .checkbox-option span {
    font-size: 12px;

    color: #333;

    font-weight: 600;
}


/* ================================================================
   SAVE AREA
   ================================================================ */

.vendor-profile-save-area {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 5px;

    padding: 15px;

    border-radius: 14px;

    background: #f8f8f8;

    border: 1px solid #e9e9e9;
}


.vendor-profile-save-area > div {
    min-width: 0;
}


.vendor-profile-save-area strong {
    display: block;

    margin-bottom: 3px;

    color: #222;

    font-size: 12px;
}


.vendor-profile-save-area small {
    display: block;

    color: #888;

    font-size: 9px;

    line-height: 1.4;
}


.vendor-profile-save-area .btn {
    flex: 0 0 auto;

    min-height: 42px;

    padding: 10px 17px;

    border-radius: 9px;

    white-space: nowrap;

    font-size: 11px;
}


/* ================================================================
   BUSINESS FLYER CARD
   ================================================================ */

.vendor-profile-flyer-card {
    display: flex;
    flex-direction: column;

    padding: 15px;

    background: #ffffff;

    border: 1px solid #e7e7e7;

    border-radius: 16px;

    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.035);

    overflow: hidden;
}


/* ================================================================
   FLYER PREVIEW
   ================================================================ */

.vendor-profile-flyer-preview {
    width: 100%;

    max-width: 360px;

    margin: 0 auto 14px;

    border-radius: 12px;

    overflow: hidden;

    background: #f4f4f4;

    border: 1px solid #eeeeee;
}


.vendor-profile-flyer-preview img {
    display: block;

    width: 100%;

    height: auto;

    max-height: 280px;

    object-fit: contain;

    object-position: center;

    background: #f7f7f7;
}


/* ================================================================
   FLYER ACTIONS
   ================================================================ */

.vendor-profile-flyer-actions {
    display: flex;
    flex-direction: column;

    gap: 8px;

    width: 100%;
}


.vendor-profile-flyer-upload-form {
    display: flex;

    align-items: center;

    gap: 8px;

    width: 100%;
}


.vendor-profile-upload-button {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 1;

    min-height: 42px;

    padding: 10px 12px;

    border-radius: 9px;

    border: 1px solid #dedede;

    background: #fafafa;

    color: #333;

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;

    text-align: center;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.vendor-profile-upload-button:hover {
    background: #f3f3f3;

    border-color: #cfcfcf;
}


.vendor-profile-save-flyer {
    min-height: 42px;

    padding: 10px 15px;

    border: 0;

    border-radius: 9px;

    background: #b88a44;

    color: #ffffff;

    font-family: inherit;

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;

    white-space: nowrap;
}


.vendor-profile-remove-flyer {
    width: 100%;

    min-height: 38px;

    border: 1px solid #f0d0d0;

    border-radius: 9px;

    background: #fff7f7;

    color: #b42318;

    font-family: inherit;

    font-size: 10px;

    font-weight: 700;

    cursor: pointer;
}


.vendor-profile-flyer-card > small {
    display: block;

    margin-top: 10px;

    color: #999;

    font-size: 9px;

    text-align: center;
}


/* ================================================================
   NO FLYER STATE
   ================================================================ */

.vendor-profile-no-flyer {
    padding: 25px 15px;

    text-align: center;

    border: 1px dashed #d7d7d7;

    border-radius: 12px;

    background: #fafafa;
}


.vendor-profile-no-flyer > div {
    width: 48px;
    height: 48px;

    margin: 0 auto 10px;

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

    border-radius: 12px;

    background: #f0f0f0;

    font-size: 22px;
}


.vendor-profile-no-flyer h3 {
    margin: 0 0 5px;

    font-size: 14px;

    color: #222;
}


.vendor-profile-no-flyer p {
    max-width: 320px;

    margin: 0 auto 15px;

    color: #888;

    font-size: 10px;

    line-height: 1.5;
}


.vendor-profile-no-flyer .vendor-profile-flyer-upload-form {
    max-width: 350px;

    margin: 0 auto;
}


/* ================================================================
   OWNERSHIP NOTICE
   ================================================================ */

.vendor-profile-ownership-notice {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    margin-top: 20px;

    padding: 14px;

    border-radius: 13px;

    background: #fafafa;

    border: 1px solid #e7e7e7;
}


.vendor-profile-ownership-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

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

    border-radius: 9px;

    background: #f1f1f1;

    font-size: 16px;
}


.vendor-profile-ownership-notice strong {
    display: block;

    margin-bottom: 4px;

    color: #333;

    font-size: 11px;
}


.vendor-profile-ownership-notice p {
    margin: 0;

    color: #888;

    font-size: 9px;

    line-height: 1.55;
}


/* ================================================================
   ERROR BOX
   ================================================================ */

.vendor-dashboard-content .form-errors {
    margin-bottom: 18px;

    padding: 12px 14px;

    border-radius: 11px;

    background: #fff5f5;

    border: 1px solid #f1caca;

    color: #a61b1b;

    font-size: 11px;

    line-height: 1.5;
}


.vendor-dashboard-content .form-errors div {
    margin-bottom: 4px;
}


.vendor-dashboard-content .form-errors div:last-child {
    margin-bottom: 0;
}


/* ================================================================
   MOBILE OPTIMIZATION
   ================================================================ */

@media (max-width: 600px) {

    .vendor-dashboard-content {
        padding-left: 14px;
        padding-right: 14px;
    }


    .vendor-dashboard-welcome {
        margin-bottom: 18px;
    }


    .vendor-dashboard-welcome h1 {
        font-size: 24px;
    }


    .vendor-profile-status-card {
        padding: 14px;

        border-radius: 14px;
    }


    .vendor-profile-status-main h2 {
        font-size: 16px;
    }


    .vendor-profile-status-grid {
        gap: 6px;
    }


    .vendor-profile-status-grid > div {
        padding: 8px 6px;
    }


    .vendor-profile-status-grid strong {
        font-size: 10px;
    }


    .vendor-profile-locked-grid {
        grid-template-columns: 1fr 1fr;

        gap: 8px;
    }


    .vendor-profile-locked-card {
        padding: 11px;
    }


    .vendor-profile-locked-card strong {
        font-size: 11px;
    }


    .vendor-profile-form-card {
        padding: 14px;

        border-radius: 14px;
    }


    .vendor-profile-form .form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .vendor-profile-form .form-row .form-group {
        margin-bottom: 17px;
    }


    .vendor-profile-form .form-row .form-group:last-child {
        margin-bottom: 0;
    }


    .vendor-profile-save-area {
        align-items: stretch;

        flex-direction: column;

        gap: 11px;
    }


    .vendor-profile-save-area .btn {
        width: 100%;
    }


    .vendor-profile-flyer-preview {
        max-width: 300px;
    }


    .vendor-profile-flyer-preview img {
        max-height: 240px;
    }

}


/* ================================================================
   VERY SMALL PHONES
   ================================================================ */

@media (max-width: 380px) {

    .vendor-profile-status-grid {
        grid-template-columns: 1fr;
    }


    .vendor-profile-status-grid > div {
        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 10px;
    }


    .vendor-profile-status-grid span {
        margin: 0;
    }


    .vendor-profile-status-grid strong {
        text-align: right;
    }


    .vendor-profile-locked-grid {
        grid-template-columns: 1fr;
    }


    .vendor-profile-flyer-upload-form {
        flex-direction: column;
    }


    .vendor-profile-upload-button,
    .vendor-profile-save-flyer {
        width: 100%;
    }


    .vendor-profile-ownership-notice {
        padding: 12px;
    }

}


/* ================================================================
   TABLET / DESKTOP
   ================================================================ */

@media (min-width: 768px) {

    .vendor-profile-status-card {
        padding: 20px;
    }


    .vendor-profile-status-main h2 {
        font-size: 19px;
    }


    .vendor-profile-form-card {
        padding: 21px;
    }


    .vendor-profile-flyer-preview {
        max-width: 420px;
    }


    .vendor-profile-flyer-preview img {
        max-height: 340px;
    }


    .vendor-profile-flyer-actions {
        flex-direction: row;

        align-items: center;
    }


    .vendor-profile-flyer-actions
    .vendor-profile-flyer-upload-form {
        flex: 1;
    }


    .vendor-profile-remove-flyer {
        width: auto;

        padding: 0 15px;
    }

}


/* ================================================================
   ACCESSIBILITY
   ================================================================ */

.vendor-profile-form button:focus-visible,
.vendor-profile-form input:focus-visible,
.vendor-profile-form textarea:focus-visible,
.vendor-profile-flyer-card button:focus-visible,
.vendor-profile-flyer-card label:focus-visible {
    outline: 3px solid rgba(184, 138, 68, 0.22);

    outline-offset: 2px;
}


/* ================================================================
   REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {

    .vendor-profile-form .form-control,
    .vendor-profile-form .location-detect-button,
    .vendor-profile-upload-button {
        transition: none;
    }

}

/* ============================================================
   FOODDEY VENDOR SETTINGS
   Sleek + Mobile First
   ============================================================ */


/* ============================================================
   SETTINGS SUCCESS MESSAGE
   ============================================================ */

.vendor-settings-success {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;
    margin-bottom: 18px;
    padding: 13px 15px;

    border: 1px solid rgba(34, 197, 94, 0.22);
    border-radius: 12px;

    background: rgba(34, 197, 94, 0.07);
    color: #15803d;

    font-size: 13px;
    line-height: 1.45;
}

.vendor-settings-success:first-letter {
    font-weight: 800;
}


/* ============================================================
   SETTINGS SECTIONS
   ============================================================ */

.vendor-dashboard-content
.vendor-dashboard-section {
    margin-bottom: 18px;
}


/* ============================================================
   SECTION HEADER
   ============================================================ */

.vendor-dashboard-section-header {
    margin-bottom: 14px;
}

.vendor-dashboard-section-header h2 {
    margin: 3px 0 0;

    font-size: 20px;
    line-height: 1.25;
    font-weight: 750;

    letter-spacing: -0.02em;
}

.vendor-dashboard-section-header .section-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
}


/* ============================================================
   LOCKED ACCOUNT INFORMATION
   ============================================================ */

.vendor-settings-locked-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}


/* ============================================================
   LOCKED CARD
   ============================================================ */

.vendor-settings-locked-card {
    min-width: 0;
    padding: 13px 14px;

    border: 1px solid #e8e8e8;
    border-radius: 13px;

    background: #fff;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.035);
}

.vendor-settings-locked-card span {
    display: block;

    margin-bottom: 5px;

    color: #888;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.vendor-settings-locked-card strong {
    display: block;

    overflow: hidden;

    color: #222;

    font-size: 13px;
    line-height: 1.35;
    font-weight: 650;

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


/* ============================================================
   SECURITY / LOCKED INFORMATION NOTE
   ============================================================ */

.vendor-settings-info-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    margin-top: 12px;
    padding: 11px 13px;

    border-radius: 11px;

    background: #f7f7f7;

    color: #707070;

    font-size: 11px;
    line-height: 1.5;
}

.vendor-settings-info-note:first-letter {
    font-size: 13px;
}


/* ============================================================
   SETTINGS FORM
   ============================================================ */

.vendor-settings-form {
    width: 100%;
}


/* ============================================================
   FORM GROUP
   ============================================================ */

.vendor-settings-form .form-group {
    margin-bottom: 17px;
}


/* ============================================================
   FORM LABEL
   ============================================================ */

.vendor-settings-form .form-label {
    display: block;

    margin-bottom: 7px;

    color: #303030;

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


/* ============================================================
   FORM INPUT
   ============================================================ */

.vendor-settings-form .form-control {
    width: 100%;
    min-height: 46px;

    padding: 11px 13px;

    border: 1px solid #dedede;
    border-radius: 11px;

    background: #fff;

    color: #222;

    font-family: inherit;
    font-size: 14px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.vendor-settings-form .form-control::placeholder {
    color: #aaa;
}

.vendor-settings-form .form-control:focus {
    border-color: #222;

    box-shadow:
        0 0 0 3px rgba(0, 0, 0, 0.06);
}


/* ============================================================
   FORM HELP
   ============================================================ */

.vendor-settings-form .form-help {
    display: block;

    margin-top: 6px;

    color: #888;

    font-size: 10px;
    line-height: 1.45;
}


/* ============================================================
   PREFERENCES
   ============================================================ */

.vendor-settings-preferences {
    display: flex;
    flex-direction: column;
    gap: 9px;

    margin-top: 4px;
}


/* ============================================================
   CHECKBOX OPTION
   ============================================================ */

.vendor-settings-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    padding: 13px;

    border: 1px solid #e6e6e6;
    border-radius: 12px;

    background: #fafafa;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.vendor-settings-checkbox:hover {
    border-color: #d5d5d5;
}

.vendor-settings-checkbox input {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    margin: 1px 0 0;

    accent-color: #111;

    cursor: pointer;
}

.vendor-settings-checkbox > span {
    display: flex;
    flex-direction: column;

    gap: 3px;

    min-width: 0;
}

.vendor-settings-checkbox strong {
    color: #252525;

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

.vendor-settings-checkbox small {
    color: #858585;

    font-size: 10px;
    line-height: 1.45;
}


/* ============================================================
   FORM ACTIONS
   ============================================================ */

.vendor-settings-form-actions {
    display: flex;
    justify-content: flex-start;

    margin-top: 20px;
}

.vendor-settings-form-actions .btn {
    min-height: 44px;

    padding: 11px 18px;

    border-radius: 10px;

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


/* ============================================================
   ACCOUNT STATUS CARD
   ============================================================ */

.vendor-settings-status-card {
    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 12px;

    padding: 15px;

    border: 1px solid #e7e7e7;
    border-radius: 14px;

    background: #fff;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.04);
}


/* ============================================================
   STATUS ICON
   ============================================================ */

.vendor-settings-status-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: #f1f8f3;

    color: #16803c;

    font-size: 15px;
    font-weight: 800;
}


/* ============================================================
   STATUS CONTENT
   ============================================================ */

.vendor-settings-status-content {
    display: flex;
    flex-direction: column;

    justify-content: center;

    min-width: 0;
}

.vendor-settings-status-content strong {
    color: #222;

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

.vendor-settings-status-content span {
    margin-top: 2px;

    color: #888;

    font-size: 10px;
}


/* ============================================================
   STATUS DETAILS
   ============================================================ */

.vendor-settings-status-details {
    grid-column: 1 / -1;

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

    gap: 8px;

    padding-top: 12px;

    margin-top: 1px;

    border-top: 1px solid #eeeeee;
}

.vendor-settings-status-details > div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.vendor-settings-status-details span {
    color: #999;

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

    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.vendor-settings-status-details strong {
    color: #333;

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


/* ============================================================
   SUPPORT NOTE
   ============================================================ */

.vendor-settings-support-note {
    margin-top: 4px;
    margin-bottom: 25px;

    padding: 14px;

    border: 1px solid #ececec;
    border-radius: 12px;

    background: #fafafa;
}

.vendor-settings-support-note strong {
    display: block;

    margin-bottom: 5px;

    color: #333;

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

.vendor-settings-support-note p {
    margin: 0;

    color: #858585;

    font-size: 10px;
    line-height: 1.55;
}


/* ============================================================
   ERROR BOX
   ============================================================ */

.vendor-dashboard-content .form-errors {
    margin-bottom: 18px;

    padding: 12px 14px;

    border: 1px solid rgba(220, 38, 38, 0.15);
    border-radius: 11px;

    background: rgba(220, 38, 38, 0.055);

    color: #b42318;

    font-size: 11px;
    line-height: 1.55;
}

.vendor-dashboard-content .form-errors div + div {
    margin-top: 4px;
}


/* ============================================================
   MOBILE OPTIMISATION
   ============================================================ */

@media (max-width: 600px) {

    .vendor-dashboard-content {
        padding-left: 14px;
        padding-right: 14px;
    }


    .vendor-dashboard-welcome {
        margin-bottom: 18px;
    }


    .vendor-dashboard-welcome h1 {
        font-size: 25px;
        line-height: 1.15;
    }


    .vendor-dashboard-welcome p {
        max-width: 330px;

        font-size: 12px;
        line-height: 1.55;
    }


    .vendor-dashboard-section {
        padding: 15px;

        border-radius: 14px;
    }


    .vendor-settings-locked-grid {
        grid-template-columns: 1fr 1fr;

        gap: 8px;
    }


    .vendor-settings-locked-card {
        padding: 11px 12px;

        border-radius: 11px;
    }


    .vendor-settings-locked-card span {
        font-size: 8px;
    }


    .vendor-settings-locked-card strong {
        font-size: 11px;
    }


    .vendor-settings-form .form-control {
        min-height: 45px;

        font-size: 14px;
    }


    .vendor-settings-form-actions {
        width: 100%;
    }


    .vendor-settings-form-actions .btn {
        width: 100%;
    }


    .vendor-settings-status-card {
        padding: 13px;
    }

}


/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media (max-width: 380px) {

    .vendor-settings-locked-grid {
        grid-template-columns: 1fr;
    }


    .vendor-settings-locked-card strong {
        white-space: normal;
        word-break: break-word;
    }


    .vendor-settings-status-details {
        grid-template-columns: 1fr;
    }

}


/* ============================================================
   TABLET / DESKTOP
   ============================================================ */

@media (min-width: 768px) {

    .vendor-settings-locked-grid {
        grid-template-columns:
            repeat(4, 1fr);
    }


    .vendor-settings-status-card {
        grid-template-columns:
            auto 1fr auto;

        align-items: center;
    }


    .vendor-settings-status-details {
        grid-column: auto;

        display: flex;

        gap: 28px;

        padding-top: 0;
        margin-top: 0;

        border-top: 0;
    }


    .vendor-settings-form {
        max-width: 700px;
    }


    .vendor-settings-form-actions .btn {
        width: auto;
        min-width: 150px;
    }

}

/* ============================================================
   FOODDEY CUSTOMER PAGES
   Vendor Storefront
   Checkout
   Order Tracking
   Mobile First
   ============================================================ */


/* ============================================================
   CUSTOMER VENDOR PAGE
   ============================================================ */

.customer-vendor-page {
    min-height: 100vh;
    background: #f7f8fa;
    color: #17202a;
    padding-bottom: 90px;
}


/* ============================================================
   VENDOR TOP BAR
   ============================================================ */

.customer-vendor-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid #e8eaed;
}


.customer-back-button,
.customer-cart-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    text-decoration: none;
    font-size: 20px;
    color: #17202a;
    background: #f2f4f6;
    position: relative;
}


.customer-back-button:active,
.customer-cart-button:active {
    transform: scale(0.95);
}


.customer-vendor-topbar-brand strong {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.4px;
}


.customer-cart-button span {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: #111827;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    border: 2px solid #fff;
}


/* ============================================================
   VENDOR HERO
   ============================================================ */

.customer-vendor-hero {
    background: #fff;
}


.customer-vendor-flyer {
    width: 100%;
    height: 205px;
    overflow: hidden;
    background: #e9ecef;
}


.customer-vendor-flyer img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.customer-vendor-flyer-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    color: #697386;
}


.customer-vendor-flyer-placeholder span {
    font-size: 38px;
}


.customer-vendor-flyer-placeholder strong {
    font-size: 16px;
}


.customer-vendor-hero-content {
    padding: 18px 16px 20px;
}


.customer-vendor-title-row {
    display: flex;
    align-items: center;
    gap: 7px;
}


.customer-vendor-title-row h1 {
    margin: 0;
    font-size: 25px;
    line-height: 1.15;
    letter-spacing: -0.7px;
    font-weight: 850;
}


.customer-vendor-verified {
    width: 21px;
    height: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1769e0;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}


.customer-vendor-open-row {
    margin-top: 9px;
}


.customer-vendor-open-status {
    font-size: 12px;
    font-weight: 750;
}


.customer-vendor-open {
    color: #16834b;
}


.customer-vendor-closed {
    color: #c24141;
}


.customer-vendor-location {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    margin-top: 10px;
    color: #687282;
    font-size: 13px;
    line-height: 1.5;
}


.customer-vendor-options {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}


.customer-vendor-options span {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 9px;
    background: #f3f5f7;
    color: #3c4653;
    font-size: 11px;
    font-weight: 700;
}


/* ============================================================
   ADDED TO CART MESSAGE
   ============================================================ */

.customer-vendor-added-message {
    margin: 12px 14px 0;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #d8eee2;
    border-radius: 13px;
    background: #f0faf4;
    color: #17633d;
    transition: opacity 0.25s ease,
                transform 0.25s ease;
}


.customer-vendor-added-message.hide {
    opacity: 0;
    transform: translateY(-5px);
}


.customer-vendor-added-message > span {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #16834b;
    color: #fff;
    font-weight: 900;
}


.customer-vendor-added-message div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}


.customer-vendor-added-message strong {
    font-size: 12px;
}


.customer-vendor-added-message small {
    font-size: 11px;
    color: #4e765f;
}


/* ============================================================
   BUSINESS INFORMATION
   ============================================================ */

.customer-vendor-info {
    margin-top: 10px;
    padding: 20px 16px;
    background: #fff;
}


.customer-vendor-description h2,
.customer-menu-heading h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.4px;
}


.customer-vendor-description p {
    margin: 9px 0 0;
    color: #687282;
    font-size: 13px;
    line-height: 1.7;
}


.customer-vendor-details {
    margin-top: 18px;
    display: grid;
    gap: 12px;
}


.customer-vendor-detail {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px;
    border: 1px solid #edf0f2;
    border-radius: 12px;
    background: #fafbfc;
}


.customer-vendor-detail > span {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #fff;
}


.customer-vendor-detail div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.customer-vendor-detail small {
    color: #89929f;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
}


.customer-vendor-detail strong,
.customer-vendor-detail a {
    color: #202833;
    font-size: 12px;
    line-height: 1.5;
    text-decoration: none;
}


/* ============================================================
   MENU
   ============================================================ */

.customer-vendor-menu {
    padding: 24px 14px 30px;
}


.customer-menu-heading {
    margin-bottom: 22px;
}


.customer-menu-heading .section-kicker {
    display: block;
    margin-bottom: 6px;
}


.customer-menu-heading p {
    margin: 7px 0 0;
    color: #7a8491;
    font-size: 12px;
    line-height: 1.6;
}


.customer-menu-category {
    margin-bottom: 28px;
}


.customer-menu-category-heading {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e8ebee;
}


.customer-menu-category-heading h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 850;
    color: #202833;
}


.customer-food-list {
    display: grid;
    gap: 9px;
}


.customer-food-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e7eaed;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(20, 30, 40, 0.03);
}


.customer-food-card-content {
    min-width: 0;
    flex: 1;
}


.customer-food-card-content h4 {
    margin: 0;
    color: #202833;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 800;
}


.customer-food-card-content p {
    margin: 5px 0 0;
    color: #7b8490;
    font-size: 11px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.customer-food-price {
    display: block;
    margin-top: 8px;
    color: #111827;
    font-size: 14px;
    font-weight: 850;
}


.customer-food-add-form {
    flex-shrink: 0;
}


.customer-food-add-button {
    min-width: 62px;
    min-height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: #111827;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}


.customer-food-add-button:active {
    transform: scale(0.95);
}


.customer-vendor-empty {
    padding: 45px 20px;
    text-align: center;
    border: 1px dashed #d9dee3;
    border-radius: 16px;
    background: #fff;
}


.customer-vendor-empty > div {
    font-size: 35px;
}


.customer-vendor-empty h3 {
    margin: 10px 0 5px;
    font-size: 17px;
}


.customer-vendor-empty p {
    margin: 0;
    color: #7b8490;
    font-size: 12px;
    line-height: 1.6;
}


/* ============================================================
   STICKY CART
   ============================================================ */

.customer-sticky-cart {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 120;
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px 9px 14px;
    border-radius: 16px;
    background: #111827;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}


.customer-sticky-cart-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}


.customer-sticky-cart-info strong {
    color: #fff;
    font-size: 12px;
}


.customer-sticky-cart-info span {
    color: #d5dae0;
    font-size: 12px;
    font-weight: 700;
}


.customer-sticky-cart-button {
    flex-shrink: 0;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border-radius: 11px;
    background: #fff;
    color: #111827;
    text-decoration: none;
    font-size: 12px;
    font-weight: 850;
}


/* ============================================================
   CHECKOUT PAGE
   ============================================================ */

.customer-checkout-page {
    min-height: 100vh;
    background: #f6f7f9;
    color: #17202a;
    padding-bottom: 35px;
}


.customer-checkout-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid #e8eaed;
}


.customer-checkout-back {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f1f3f5;
    color: #17202a;
    text-decoration: none;
    font-size: 20px;
}


.customer-checkout-topbar > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}


.customer-checkout-topbar > div:nth-child(2) span {
    color: #89929f;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 1px;
}


.customer-checkout-topbar > div:nth-child(2) strong {
    font-size: 15px;
    font-weight: 850;
}


.customer-checkout-lock {
    width: 40px;
    text-align: center;
    font-size: 16px;
}


.customer-checkout-content {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 22px 14px 40px;
}


.customer-checkout-heading {
    margin-bottom: 20px;
}


.customer-checkout-heading h1 {
    margin: 4px 0 0;
    font-size: 25px;
    letter-spacing: -0.6px;
}


.customer-checkout-heading p {
    margin: 7px 0 0;
    color: #737d89;
    font-size: 12px;
    line-height: 1.6;
}


/* ============================================================
   CHECKOUT ERRORS
   ============================================================ */

.customer-checkout-errors {
    margin-bottom: 14px;
    padding: 13px;
    border: 1px solid #f1caca;
    border-radius: 13px;
    background: #fff5f5;
    color: #9f3434;
}


.customer-checkout-errors strong {
    font-size: 12px;
}


.customer-checkout-errors ul {
    margin: 7px 0 0;
    padding-left: 18px;
}


.customer-checkout-errors li {
    margin: 3px 0;
    font-size: 11px;
    line-height: 1.5;
}


/* ============================================================
   CHECKOUT VENDOR CARD
   ============================================================ */

.customer-checkout-vendor-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
    margin-bottom: 12px;
    border: 1px solid #e6e9ec;
    border-radius: 14px;
    background: #fff;
}


.customer-checkout-vendor-icon {
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f1f3f5;
    font-size: 20px;
}


.customer-checkout-vendor-card > div:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}


.customer-checkout-vendor-card span {
    color: #89929f;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.7px;
}


.customer-checkout-vendor-card strong {
    color: #202833;
    font-size: 14px;
}


.customer-checkout-vendor-card small {
    color: #7b8490;
    font-size: 10px;
}


/* ============================================================
   CHECKOUT SECTIONS
   ============================================================ */

.customer-checkout-section {
    margin-top: 12px;
    padding: 17px 14px;
    border: 1px solid #e6e9ec;
    border-radius: 15px;
    background: #fff;
}


.customer-checkout-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
}


.customer-checkout-section-heading > span {
    width: 27px;
    height: 27px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f0f2f4;
    color: #4c5662;
    font-size: 10px;
    font-weight: 850;
}


.customer-checkout-section-heading h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 850;
}


.customer-checkout-section-heading p {
    margin: 3px 0 0;
    color: #7b8490;
    font-size: 10px;
    line-height: 1.5;
}


/* ============================================================
   CHECKOUT FORM
   ============================================================ */

.customer-checkout-form-group {
    margin-bottom: 14px;
}


.customer-checkout-form-group:last-child {
    margin-bottom: 0;
}


.customer-checkout-form-group label {
    display: block;
    margin-bottom: 6px;
    color: #303945;
    font-size: 11px;
    font-weight: 800;
}


.customer-checkout-form-group label b {
    color: #b53c3c;
}


.customer-checkout-form-group input,
.customer-checkout-form-group textarea {
    width: 100%;
    min-height: 46px;
    padding: 11px 12px;
    border: 1px solid #dfe3e7;
    border-radius: 10px;
    outline: none;
    background: #fbfcfd;
    color: #202833;
    font-family: inherit;
    font-size: 13px;
    box-sizing: border-box;
    transition: border-color 0.2s ease,
                box-shadow 0.2s ease,
                background 0.2s ease;
}


.customer-checkout-form-group textarea {
    min-height: 95px;
    resize: vertical;
    line-height: 1.5;
}


.customer-checkout-form-group input:focus,
.customer-checkout-form-group textarea:focus {
    border-color: #8f98a3;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(40, 50, 60, 0.06);
}


.customer-checkout-form-group small {
    display: block;
    margin-top: 5px;
    color: #8a939f;
    font-size: 9px;
    line-height: 1.5;
}


/* ============================================================
   ORDER TYPE
   ============================================================ */

.customer-order-type-options {
    display: grid;
    gap: 9px;
}


.customer-order-type-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e1e5e8;
    border-radius: 12px;
    cursor: pointer;
    background: #fbfcfd;
}


.customer-order-type-option:has(input:checked) {
    border-color: #252d36;
    background: #f7f8fa;
}


.customer-order-type-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


.customer-order-type-icon {
    width: 37px;
    height: 37px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff;
    font-size: 17px;
}


.customer-order-type-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.customer-order-type-text strong {
    color: #202833;
    font-size: 12px;
}


.customer-order-type-text small {
    color: #7c8591;
    font-size: 9px;
    line-height: 1.4;
}


.customer-order-type-check {
    margin-left: auto;
    width: 19px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d3d8dd;
    border-radius: 50%;
    color: transparent;
    font-size: 10px;
    font-weight: 900;
}


.customer-order-type-option:has(input:checked)
.customer-order-type-check {
    background: #202833;
    border-color: #202833;
    color: #fff;
}


/* ============================================================
   DELIVERY FIELDS
   ============================================================ */

.customer-checkout-delivery-fields {
    margin-top: 14px;
}


/* ============================================================
   CHECKOUT SUMMARY
   ============================================================ */

.customer-checkout-summary {
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid #e3e7ea;
    border-radius: 15px;
    background: #fff;
}


.customer-checkout-summary-heading {
    padding: 15px 14px;
    border-bottom: 1px solid #edf0f2;
}


.customer-checkout-summary-heading > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.customer-checkout-summary-heading span {
    color: #89929f;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.7px;
}


.customer-checkout-summary-heading strong {
    color: #555f6b;
    font-size: 10px;
}


.customer-checkout-items {
    padding: 4px 14px;
}


.customer-checkout-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f2f4;
}


.customer-checkout-item:last-child {
    border-bottom: 0;
}


.customer-checkout-item > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.customer-checkout-item > div strong {
    color: #28313b;
    font-size: 12px;
}


.customer-checkout-item > div span {
    color: #8a939f;
    font-size: 9px;
}


.customer-checkout-item > strong {
    flex-shrink: 0;
    color: #202833;
    font-size: 12px;
}


.customer-checkout-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 14px;
    border-top: 1px solid #e7eaed;
    background: #fafbfc;
}


.customer-checkout-total span {
    color: #525c68;
    font-size: 11px;
    font-weight: 750;
}


.customer-checkout-total strong {
    color: #111827;
    font-size: 18px;
    font-weight: 900;
}


/* ============================================================
   PLACE ORDER
   ============================================================ */

.customer-place-order-button {
    width: 100%;
    min-height: 54px;
    margin-top: 14px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 0;
    border-radius: 13px;
    background: #111827;
    color: #fff;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 7px 18px rgba(17, 24, 39, 0.14);
}


.customer-place-order-button span {
    font-size: 13px;
    font-weight: 850;
}


.customer-place-order-button strong {
    font-size: 12px;
}


.customer-place-order-button:active {
    transform: scale(0.985);
}


.customer-checkout-note {
    margin: 10px 12px 0;
    text-align: center;
    color: #8a939f;
    font-size: 9px;
    line-height: 1.6;
}


/* ============================================================
   CUSTOMER ORDER / TRACKING PAGE
   ============================================================ */

.customer-order-page {
    min-height: 100vh;
    background: #f6f7f9;
    color: #17202a;
    padding-bottom: 40px;
}


.customer-order-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid #e8eaed;
}


.customer-order-back,
.customer-order-cart {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f1f3f5;
    color: #17202a;
    text-decoration: none;
    font-size: 19px;
}


.customer-order-topbar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}


.customer-order-topbar-brand strong {
    font-size: 15px;
    font-weight: 850;
}


.customer-order-topbar-brand span {
    color: #8a939f;
    font-size: 8px;
    font-weight: 750;
}


.customer-order-content {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 18px 14px 45px;
}


/* ============================================================
   ORDER STATUS CARD
   ============================================================ */

.customer-order-status-card {
    padding: 24px 17px 20px;
    border: 1px solid #e3e7ea;
    border-radius: 18px;
    background: #fff;
    text-align: center;
}


.customer-order-status-success {
    background: #fff;
}


.customer-order-status-failed {
    background: #fffafa;
    border-color: #f0d7d7;
}


.customer-order-status-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eaf7ef;
    color: #16834b;
    font-size: 21px;
    font-weight: 900;
}


.customer-order-status-failed
.customer-order-status-icon {
    background: #fbeaea;
    color: #bd4242;
}


.customer-order-status-kicker {
    color: #89929f;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 1px;
}


.customer-order-status-card h1 {
    margin: 5px 0 0;
    color: #202833;
    font-size: 21px;
    letter-spacing: -0.4px;
}


.customer-order-status-card > p {
    max-width: 420px;
    margin: 7px auto 0;
    color: #737d89;
    font-size: 11px;
    line-height: 1.6;
}


.customer-order-number {
    margin: 17px auto 0;
    padding: 10px 14px;
    width: fit-content;
    max-width: 100%;
    border: 1px dashed #d7dce1;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.customer-order-number span {
    color: #929aa4;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.8px;
}


.customer-order-number strong {
    color: #202833;
    font-size: 13px;
    letter-spacing: 0.6px;
}


/* ============================================================
   ORDER TRACKING
   ============================================================ */

.customer-order-tracking-card {
    margin-top: 12px;
    padding: 17px 14px;
    border: 1px solid #e3e7ea;
    border-radius: 15px;
    background: #fff;
}


.customer-order-section-heading {
    margin-bottom: 16px;
}


.customer-order-section-heading .section-kicker {
    display: block;
    margin-bottom: 4px;
}


.customer-order-section-heading h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 850;
}


.customer-order-timeline {
    position: relative;
}


.customer-order-timeline-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 54px;
}


.customer-order-timeline-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 29px;
    bottom: -1px;
    width: 1px;
    background: #e0e4e8;
}


.customer-order-timeline-marker {
    position: relative;
    z-index: 2;
    width: 29px;
    height: 29px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dfe3e7;
    border-radius: 50%;
    background: #fff;
    color: #a0a8b2;
    font-size: 10px;
}


.customer-order-timeline-text {
    padding-top: 2px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}


.customer-order-timeline-text strong {
    color: #9aa2ab;
    font-size: 11px;
}


.customer-order-timeline-text small {
    color: #a2a9b2;
    font-size: 9px;
    line-height: 1.4;
}


.customer-order-timeline-step.completed
.customer-order-timeline-marker,
.customer-order-timeline-step.current
.customer-order-timeline-marker {
    border-color: #202833;
    background: #202833;
    color: #fff;
}


.customer-order-timeline-step.completed
.customer-order-timeline-text strong,
.customer-order-timeline-step.current
.customer-order-timeline-text strong {
    color: #202833;
}


.customer-order-timeline-step.current
.customer-order-timeline-text strong {
    font-weight: 900;
}


.customer-order-timeline-step.completed:not(:last-child)::before {
    background: #202833;
}


/* ============================================================
   ORDER VENDOR CARD
   ============================================================ */

.customer-order-vendor-card {
    margin-top: 12px;
    padding: 13px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid #e3e7ea;
    border-radius: 15px;
    background: #fff;
}


.customer-order-vendor-image {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f0f2f4;
    font-size: 23px;
}


.customer-order-vendor-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.customer-order-vendor-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.customer-order-vendor-info > span {
    color: #89929f;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.7px;
}


.customer-order-vendor-info h2 {
    margin: 0;
    color: #202833;
    font-size: 14px;
}


.customer-order-vendor-info small {
    color: #7c8591;
    font-size: 9px;
}


.customer-order-vendor-link {
    width: fit-content;
    margin-top: 3px;
    color: #4c5662;
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
}


/* ============================================================
   CUSTOMER DETAILS
   ============================================================ */

.customer-order-details-card {
    margin-top: 12px;
    padding: 17px 14px;
    border: 1px solid #e3e7ea;
    border-radius: 15px;
    background: #fff;
}


.customer-order-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}


.customer-order-contact-grid > div {
    min-width: 0;
    padding: 11px;
    border-radius: 10px;
    background: #f8f9fa;
}


.customer-order-contact-grid > div > span {
    display: block;
    margin-bottom: 4px;
    color: #939ba5;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 0.6px;
}


.customer-order-contact-grid > div > strong,
.customer-order-contact-grid > div > a {
    display: block;
    overflow-wrap: anywhere;
    color: #303945;
    font-size: 10px;
    line-height: 1.45;
    text-decoration: none;
}


.customer-order-contact-full {
    grid-column: 1 / -1;
}


/* ============================================================
   ORDER TYPE CARD
   ============================================================ */

.customer-order-type-card {
    margin-top: 12px;
    padding: 13px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid #e3e7ea;
    border-radius: 15px;
    background: #fff;
}


.customer-order-type-card
.customer-order-type-icon {
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #f1f3f5;
    font-size: 19px;
}


.customer-order-type-card > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.customer-order-type-card > div:last-child span {
    color: #89929f;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.6px;
}


.customer-order-type-card > div:last-child strong {
    color: #202833;
    font-size: 12px;
}


.customer-order-type-card > div:last-child small {
    color: #7c8591;
    font-size: 9px;
    line-height: 1.4;
}


/* ============================================================
   ORDER ITEMS
   ============================================================ */

.customer-order-items-card {
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid #e3e7ea;
    border-radius: 15px;
    background: #fff;
}


.customer-order-items-card
.customer-order-section-heading {
    padding: 17px 14px 0;
}


.customer-order-items {
    padding: 0 14px;
}


.customer-order-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 0;
    border-bottom: 1px solid #edf0f2;
}


.customer-order-item:last-child {
    border-bottom: 0;
}


.customer-order-item-quantity {
    width: 29px;
    height: 29px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f1f3f5;
    color: #4f5965;
    font-size: 9px;
    font-weight: 850;
}


.customer-order-item-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.customer-order-item-info strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #303945;
    font-size: 11px;
}


.customer-order-item-info small {
    color: #8a939f;
    font-size: 8px;
}


.customer-order-item-total {
    flex-shrink: 0;
    color: #202833;
    font-size: 11px;
}


.customer-order-total {
    margin-top: 2px;
    padding: 15px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #e5e8eb;
    background: #fafbfc;
}


.customer-order-total span {
    color: #525c68;
    font-size: 10px;
    font-weight: 750;
}


.customer-order-total strong {
    color: #111827;
    font-size: 18px;
    font-weight: 900;
}


/* ============================================================
   CUSTOMER NOTE
   ============================================================ */

.customer-order-note-card {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #e3e7ea;
    border-radius: 14px;
    background: #fff;
}


.customer-order-note-card > span {
    color: #89929f;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.7px;
}


.customer-order-note-card p {
    margin: 7px 0 0;
    color: #4d5763;
    font-size: 11px;
    line-height: 1.6;
}


/* ============================================================
   ORDER DATE
   ============================================================ */

.customer-order-created {
    margin-top: 15px;
    text-align: center;
    color: #929aa4;
    font-size: 9px;
}


.customer-order-created strong {
    color: #626c78;
}


/* ============================================================
   ORDER ACTIONS
   ============================================================ */

.customer-order-actions {
    margin-top: 16px;
    display: grid;
    gap: 9px;
}


.customer-order-contact-button,
.customer-order-shop-button {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 11px;
    font-weight: 850;
}


.customer-order-contact-button {
    background: #111827;
    color: #fff;
}


.customer-order-shop-button {
    border: 1px solid #dfe3e7;
    background: #fff;
    color: #303945;
}


/* ============================================================
   TABLET / DESKTOP
   ============================================================ */

@media (min-width: 700px) {


    .customer-vendor-page {
        padding-bottom: 110px;
    }


    .customer-vendor-topbar {
        padding-left: calc((100% - 900px) / 2);
        padding-right: calc((100% - 900px) / 2);
    }


    .customer-vendor-flyer {
        height: 330px;
        max-width: 900px;
        margin: 0 auto;
    }


    .customer-vendor-hero-content,
    .customer-vendor-info,
    .customer-vendor-menu {
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }


    .customer-vendor-hero-content {
        padding: 24px 20px;
    }


    .customer-vendor-title-row h1 {
        font-size: 30px;
    }


    .customer-vendor-details {
        grid-template-columns: repeat(2, 1fr);
    }


    .customer-food-list {
        grid-template-columns: repeat(2, 1fr);
    }


    .customer-sticky-cart {
        width: 430px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }


    .customer-checkout-content,
    .customer-order-content {
        padding-left: 20px;
        padding-right: 20px;
    }

}

/* =========================================================
   FOODDEY — CUSTOMER VENDOR DIRECTORY
   Mobile-first design
   ========================================================= */


/* =========================================================
   PAGE
   ========================================================= */

.customer-vendors-page {
    min-height: 100vh;
    background: #f8f8f6;
    padding-bottom: 90px;
}


/* =========================================================
   TOP BAR
   ========================================================= */

.customer-vendors-topbar {
    position: sticky;
    top: 0;
    z-index: 100;

    height: 64px;

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

    padding: 0 16px;

    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #eeeeeb;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


.customer-vendors-back,
.customer-vendors-cart {
    width: 40px;
    height: 40px;

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

    border-radius: 12px;

    color: #222;
    text-decoration: none;

    background: #f5f5f2;

    font-size: 20px;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.customer-vendors-back:active,
.customer-vendors-cart:active {
    transform: scale(0.94);
}


.customer-vendors-topbar > div {
    min-width: 0;

    display: flex;
    flex-direction: column;

    align-items: center;
}


.customer-vendors-topbar strong {
    font-size: 18px;
    font-weight: 800;
    color: #171717;
    line-height: 1.1;
}


.customer-vendors-topbar small {
    margin-top: 3px;

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

    color: #8a8a84;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}


/* =========================================================
   HERO
   ========================================================= */

.customer-vendors-hero {
    padding: 34px 0 28px;

    background:
        linear-gradient(
            180deg,
            #fffdf8 0%,
            #f8f8f6 100%
        );
}


.customer-vendors-hero .container {
    width: min(100% - 32px, 1100px);
    margin: 0 auto;
}


.customer-vendors-hero .section-kicker {
    display: inline-block;

    margin-bottom: 8px;

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

    color: #a36a00;

    letter-spacing: 0.12em;
}


.customer-vendors-hero h1 {
    margin: 0;

    color: #171717;

    font-size: clamp(
        32px,
        8vw,
        52px
    );

    line-height: 1.05;

    letter-spacing: -0.04em;
}


.customer-vendors-hero p {
    max-width: 500px;

    margin: 12px 0 22px;

    color: #777772;

    font-size: 15px;
    line-height: 1.6;
}


/* =========================================================
   SEARCH
   ========================================================= */

.customer-vendors-search {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.customer-vendors-search-input {
    height: 54px;

    display: flex;
    align-items: center;

    padding: 0 15px;

    background: #ffffff;

    border: 1px solid #e7e7e2;

    border-radius: 15px;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.04);
}


.customer-vendors-search-input span {
    flex: 0 0 auto;

    margin-right: 10px;

    font-size: 17px;
}


.customer-vendors-search-input input {
    width: 100%;
    min-width: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: #222;

    font-size: 14px;
}


.customer-vendors-search-input input::placeholder {
    color: #aaa9a2;
}


.customer-vendors-search > button {
    height: 52px;

    border: 0;
    border-radius: 14px;

    background: #151515;
    color: #ffffff;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


.customer-vendors-search > button:active {
    transform: scale(0.98);
}


.customer-vendors-search > button:hover {
    opacity: 0.92;
}


/* =========================================================
   FILTER SECTION
   ========================================================= */

.customer-vendors-filters {
    padding: 16px 0;

    background: #ffffff;

    border-top: 1px solid #eeeeea;
    border-bottom: 1px solid #eeeeea;
}


.customer-vendors-filters .container {
    width: min(100% - 32px, 1100px);
    margin: 0 auto;
}


.customer-vendors-filter-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}


.customer-vendors-filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


.customer-vendors-filter-field label {
    font-size: 10px;
    font-weight: 800;

    color: #777770;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}


.customer-vendors-filter-field select {
    width: 100%;
    height: 48px;

    padding: 0 13px;

    border: 1px solid #e4e4df;
    border-radius: 12px;

    background: #fafaf8;

    color: #272727;

    font-size: 13px;

    outline: none;

    cursor: pointer;
}


.customer-vendors-filter-field select:focus {
    border-color: #b47a12;

    box-shadow:
        0 0 0 3px rgba(
            180,
            122,
            18,
            0.10
        );
}


.customer-vendors-filter-button {
    min-height: 48px;

    border: 0;
    border-radius: 12px;

    background: #f0a500;
    color: #171717;

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;
}


.customer-vendors-clear {
    display: inline-flex;

    margin-top: 12px;

    color: #8a5b00;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;
}


/* =========================================================
   CATEGORY QUICK LINKS
   ========================================================= */

.customer-vendors-categories {
    padding: 14px 0;

    background: #ffffff;

    overflow: hidden;
}


.customer-vendors-categories .container {
    width: 100%;
}


.customer-vendors-category-scroll {
    display: flex;
    gap: 8px;

    padding: 0 16px;

    overflow-x: auto;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
}


.customer-vendors-category-scroll::-webkit-scrollbar {
    display: none;
}


.customer-vendors-category-scroll a {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;

    min-height: 38px;

    padding: 0 14px;

    border: 1px solid #e7e7e2;
    border-radius: 999px;

    background: #fafaf8;

    color: #66665f;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}


.customer-vendors-category-scroll a.active {
    background: #171717;
    border-color: #171717;

    color: #ffffff;
}


/* =========================================================
   RESULTS
   ========================================================= */

.customer-vendors-results {
    padding: 28px 0 40px;
}


.customer-vendors-results .container {
    width: min(100% - 32px, 1100px);
    margin: 0 auto;
}


.customer-vendors-results-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 20px;
}


.customer-vendors-results-heading > div:first-child {
    min-width: 0;
}


.customer-vendors-results-heading .section-kicker {
    display: block;

    margin-bottom: 5px;

    color: #a36a00;

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

    letter-spacing: 0.12em;
}


.customer-vendors-results-heading h2 {
    margin: 0;

    color: #191919;

    font-size: 24px;
    line-height: 1.15;

    letter-spacing: -0.025em;
}


.customer-vendors-results-heading p {
    margin: 7px 0 0;

    color: #888881;

    font-size: 12px;
    line-height: 1.5;
}


.customer-vendors-result-count {
    flex: 0 0 auto;

    padding: 7px 10px;

    border-radius: 999px;

    background: #eeeeeb;

    color: #66665f;

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


/* =========================================================
   VENDOR GRID
   ========================================================= */

.customer-vendors-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}


/* =========================================================
   VENDOR CARD
   ========================================================= */

.customer-vendor-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e9e9e5;

    border-radius: 18px;

    box-shadow:
        0 7px 25px rgba(
            0,
            0,
            0,
            0.045
        );

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.customer-vendor-card:active {
    transform: scale(0.99);
}


/* =========================================================
   VENDOR IMAGE
   ========================================================= */

.customer-vendor-card-image {
    position: relative;

    display: block;

    width: 100%;

    height: 190px;

    overflow: hidden;

    background: #eeeeea;

    text-decoration: none;
}


.customer-vendor-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.35s ease;
}


.customer-vendor-card:hover
.customer-vendor-card-image img {
    transform: scale(1.03);
}


.customer-vendor-card-placeholder {
    width: 100%;
    height: 100%;

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

    background:
        linear-gradient(
            135deg,
            #f2f2ed,
            #e7e7e1
        );
}


.customer-vendor-card-placeholder span {
    font-size: 48px;
    opacity: 0.65;
}


/* =========================================================
   OPEN / CLOSED BADGES
   ========================================================= */

.customer-vendor-card-open,
.customer-vendor-card-closed {
    position: absolute;

    top: 12px;
    left: 12px;

    display: inline-flex;
    align-items: center;

    min-height: 27px;

    padding: 0 9px;

    border-radius: 999px;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

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

    letter-spacing: 0.02em;
}


.customer-vendor-card-open {
    background: rgba(
        255,
        255,
        255,
        0.92
    );

    color: #28753c;
}


.customer-vendor-card-closed {
    background: rgba(
        25,
        25,
        25,
        0.78
    );

    color: #ffffff;
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.customer-vendor-card-content {
    padding: 16px;
}


.customer-vendor-card-title {
    display: flex;
    align-items: flex-start;

    margin-bottom: 8px;
}


.customer-vendor-card-title h3 {
    display: flex;
    align-items: center;
    gap: 6px;

    margin: 0;

    font-size: 17px;
    line-height: 1.25;

    letter-spacing: -0.015em;
}


.customer-vendor-card-title h3 a {
    color: #171717;

    text-decoration: none;
}


.customer-vendor-card-verified {
    flex: 0 0 auto;

    width: 19px;
    height: 19px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #1877f2;
    color: #ffffff;

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


/* =========================================================
   LOCATION
   ========================================================= */

.customer-vendor-card-location {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #777770;

    font-size: 12px;
    line-height: 1.4;
}


.customer-vendor-card-location:first-letter {
    font-size: 13px;
}


.customer-vendor-card-location span {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =========================================================
   ORDER OPTIONS
   ========================================================= */

.customer-vendor-card-options {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 12px;
}


.customer-vendor-card-options span {
    display: inline-flex;
    align-items: center;

    min-height: 27px;

    padding: 0 8px;

    border-radius: 7px;

    background: #f5f5f1;

    color: #66665f;

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


/* =========================================================
   VIEW MENU BUTTON
   ========================================================= */

.customer-vendor-card-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 45px;

    margin-top: 15px;

    border-radius: 11px;

    background: #171717;
    color: #ffffff;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


.customer-vendor-card-button:hover {
    opacity: 0.92;
}


.customer-vendor-card-button:active {
    transform: scale(0.98);
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.customer-vendors-empty {
    max-width: 480px;

    margin: 30px auto;

    padding: 42px 24px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #e9e9e5;

    border-radius: 20px;

    box-shadow:
        0 8px 25px rgba(
            0,
            0,
            0,
            0.035
        );
}


.customer-vendors-empty-icon {
    width: 64px;
    height: 64px;

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

    margin: 0 auto 16px;

    border-radius: 18px;

    background: #f5f3ed;

    font-size: 30px;
}


.customer-vendors-empty h3 {
    margin: 0;

    color: #202020;

    font-size: 19px;
}


.customer-vendors-empty p {
    margin: 9px auto 22px;

    max-width: 350px;

    color: #888881;

    font-size: 13px;
    line-height: 1.6;
}


.customer-vendors-empty .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 45px;

    padding: 0 18px;

    border-radius: 11px;

    text-decoration: none;
}


/* =========================================================
   MOBILE BOTTOM NAV
   ========================================================= */

.customer-vendors-page .mobile-bottom-nav {
    position: fixed;

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

    z-index: 200;

    height: 66px;

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

    background: rgba(
        255,
        255,
        255,
        0.97
    );

    border-top: 1px solid #e8e8e3;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    padding-bottom: env(
        safe-area-inset-bottom
    );
}


.customer-vendors-page
.mobile-bottom-nav
.bottom-nav-item {
    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 3px;

    height: 100%;

    color: #888881;

    text-decoration: none;
}


.customer-vendors-page
.mobile-bottom-nav
.bottom-nav-item span {
    font-size: 18px;

    line-height: 1;
}


.customer-vendors-page
.mobile-bottom-nav
.bottom-nav-item small {
    font-size: 9px;
    font-weight: 700;
}


.customer-vendors-page
.mobile-bottom-nav
.bottom-nav-item.active {
    color: #171717;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (
    min-width: 600px
) {

    .customer-vendors-search {
        flex-direction: row;
        align-items: stretch;
    }


    .customer-vendors-search-input {
        flex: 1;
    }


    .customer-vendors-search > button {
        flex: 0 0 110px;
    }


    .customer-vendors-filter-form {
        grid-template-columns:
            1fr
            1fr
            auto;

        align-items: end;
    }


    .customer-vendors-filter-button {
        padding: 0 18px;
    }


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

}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (
    min-width: 900px
) {

    .customer-vendors-page {
        padding-bottom: 30px;
    }


    .customer-vendors-topbar {
        padding-left: max(
            24px,
            calc(
                (100vw - 1100px) / 2
            )
        );

        padding-right: max(
            24px,
            calc(
                (100vw - 1100px) / 2
            )
        );
    }


    .customer-vendors-hero {
        padding: 60px 0 45px;
    }


    .customer-vendors-hero .container {
        width: min(
            100% - 48px,
            1100px
        );
    }


    .customer-vendors-hero h1 {
        font-size: 52px;
    }


    .customer-vendors-hero p {
        font-size: 16px;
    }


    .customer-vendors-filters .container,
    .customer-vendors-results .container {
        width: min(
            100% - 48px,
            1100px
        );
    }


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

        gap: 20px;
    }


    .customer-vendor-card-image {
        height: 210px;
    }


    .customer-vendors-page
    .mobile-bottom-nav {
        display: none;
    }

}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (
    min-width: 1200px
) {

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


    .customer-vendor-card-image {
        height: 200px;
    }

}

/* =========================================================
   FOODDEY MAP
   ========================================================= */

.fooddey-map-page {
    padding: 40px 0 100px;
    background: #f7f8fa;
    min-height: 80vh;
}

.fooddey-map-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 25px;
}

.fooddey-map-header h1 {
    margin: 5px 0 8px;
    font-size: 32px;
    line-height: 1.15;
}

.fooddey-map-header p {
    margin: 0;
    color: #6b7280;
}

.fooddey-map-list-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 12px;
    background: #fff;
    color: #111827;
    text-decoration: none;
    font-weight: 700;
    border: 1px solid #e5e7eb;
    white-space: nowrap;
}

.fooddey-map-list-button:hover {
    border-color: #111827;
}

.fooddey-map {
    width: 100%;
    height: 600px;
    border-radius: 22px;
    overflow: hidden;
    background: #e5e7eb;
    box-shadow: 0 15px 40px rgba(0,0,0,.08);
}

.fooddey-map-status {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #fff;
    color: #6b7280;
    font-size: 14px;
}

.fooddey-map-popup {
    min-width: 180px;
}

.fooddey-map-popup strong {
    display: block;
    font-size: 16px;
    margin-bottom: 7px;
    color: #111827;
}

.fooddey-map-popup div {
    color: #6b7280;
    font-size: 13px;
    line-height: 1.5;
}

.fooddey-map-popup a {
    display: inline-block;
    margin-top: 10px;
    color: #111827;
    font-weight: 700;
    text-decoration: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .fooddey-map-page {
        padding: 25px 0 90px;
    }

    .fooddey-map-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .fooddey-map-header h1 {
        font-size: 26px;
    }

    .fooddey-map {
        height: 70vh;
        min-height: 430px;
        border-radius: 16px;
    }

    .fooddey-map-list-button {
        width: 100%;
    }

}

/* =========================================================
   FOODDEY CUSTOMER CART
   ========================================================= */

.customer-cart-page {
    min-height: 100vh;
    background: #f7f8fa;
    padding-bottom: 80px;
}


/* =========================================================
   TOP BAR
   ========================================================= */

.customer-cart-topbar {
    position: sticky;
    top: 0;
    z-index: 100;

    min-height: 68px;
    padding: 0 24px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);

    border-bottom: 1px solid #e7e9ed;
}

.customer-cart-back {
    width: 42px;
    height: 42px;

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

    border-radius: 12px;

    background: #f2f3f5;

    color: #17191d;

    text-decoration: none;

    font-size: 22px;
    font-weight: 700;

    transition: .2s ease;
}

.customer-cart-back:hover {
    background: #e6e8eb;
    transform: translateX(-2px);
}


.customer-cart-topbar-title {
    text-align: center;
}

.customer-cart-topbar-title strong {
    display: block;

    font-size: 18px;
    line-height: 1.2;

    color: #15181c;
}

.customer-cart-topbar-title span {
    display: block;

    margin-top: 3px;

    font-size: 11px;

    color: #8a9098;
}


.customer-cart-clear {
    justify-self: end;

    padding: 8px 12px;

    border-radius: 9px;

    color: #b33b3b;

    background: #fff2f2;

    text-decoration: none;

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

    transition: .2s ease;
}

.customer-cart-clear:hover {
    background: #ffe5e5;
}


.customer-cart-topbar-spacer {
    display: block;

    width: 45px;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.customer-cart-content {
    width: min(1000px, calc(100% - 32px));

    margin: 0 auto;

    padding-top: 30px;
}


/* =========================================================
   EMPTY CART
   ========================================================= */

.customer-cart-empty {
    max-width: 560px;

    margin: 70px auto;

    padding: 55px 30px;

    text-align: center;

    background: #fff;

    border: 1px solid #e6e8ec;

    border-radius: 24px;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, .045);
}

.customer-cart-empty-icon {
    width: 82px;
    height: 82px;

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

    margin: 0 auto 22px;

    border-radius: 24px;

    background: #f2f3f5;

    font-size: 36px;
}

.customer-cart-empty h1 {
    margin: 0;

    color: #15181c;

    font-size: 27px;
    line-height: 1.2;
}

.customer-cart-empty p {
    max-width: 430px;

    margin: 12px auto 25px;

    color: #727983;

    font-size: 14px;

    line-height: 1.65;
}

.customer-cart-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 0 25px;

    border-radius: 12px;

    background: #111827;

    color: #fff;

    text-decoration: none;

    font-size: 14px;
    font-weight: 800;

    transition: .2s ease;
}

.customer-cart-primary-button:hover {
    transform: translateY(-1px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .12);
}


/* =========================================================
   VENDOR CARD
   ========================================================= */

.customer-cart-vendor-card {
    display: flex;
    align-items: center;

    gap: 15px;

    padding: 17px 19px;

    margin-bottom: 18px;

    background: #fff;

    border: 1px solid #e5e7eb;

    border-radius: 18px;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, .035);
}

.customer-cart-vendor-icon {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

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

    overflow: hidden;

    border-radius: 14px;

    background: #f1f3f5;

    font-size: 25px;
}

.customer-cart-vendor-icon img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.customer-cart-vendor-info {
    flex: 1;
    min-width: 0;
}

.customer-cart-vendor-info > span {
    display: block;

    margin-bottom: 4px;

    color: #9298a0;

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

    letter-spacing: .1em;
}

.customer-cart-vendor-info > strong {
    display: block;

    color: #15181c;

    font-size: 17px;
    font-weight: 800;

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

.customer-cart-vendor-info small {
    display: block;

    margin-top: 4px;

    color: #737a84;

    font-size: 12px;
}


.customer-cart-vendor-link {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding: 0 15px;

    border-radius: 10px;

    background: #f2f3f5;

    color: #252930;

    text-decoration: none;

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

    transition: .2s ease;
}

.customer-cart-vendor-link:hover {
    background: #e7e9ec;
}


/* =========================================================
   WARNING
   ========================================================= */

.customer-cart-warning {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    padding: 14px 16px;

    margin-bottom: 18px;

    border: 1px solid #f0d8a4;

    border-radius: 14px;

    background: #fff9eb;

    color: #71531b;
}

.customer-cart-warning > span {
    width: 25px;
    height: 25px;

    flex: 0 0 25px;

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

    border-radius: 50%;

    background: #f5d98d;

    color: #684a12;

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

.customer-cart-warning strong {
    display: block;

    margin-bottom: 3px;

    font-size: 13px;

    color: #63470f;
}

.customer-cart-warning small {
    display: block;

    font-size: 12px;

    line-height: 1.5;
}


/* =========================================================
   ITEMS CARD
   ========================================================= */

.customer-cart-items-card {
    overflow: hidden;

    background: #fff;

    border: 1px solid #e5e7eb;

    border-radius: 20px;

    box-shadow:
        0 7px 28px rgba(0, 0, 0, .04);
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.customer-cart-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 20px 22px;

    border-bottom: 1px solid #eceef1;
}

.customer-cart-section-heading > div span {
    display: block;

    margin-bottom: 4px;

    color: #9298a0;

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

    letter-spacing: .11em;
}

.customer-cart-section-heading h1,
.customer-cart-section-heading h2 {
    margin: 0;

    color: #16191d;

    font-size: 19px;
    line-height: 1.25;
}

.customer-cart-section-heading > span {
    flex-shrink: 0;

    color: #858c95;

    font-size: 12px;
}


/* =========================================================
   CART ITEMS
   ========================================================= */

.customer-cart-items {
    width: 100%;
}


.customer-cart-item {
    position: relative;

    display: grid;

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

    column-gap: 25px;

    padding: 22px;

    border-bottom: 1px solid #eceef1;

    transition: .2s ease;
}

.customer-cart-item:last-child {
    border-bottom: 0;
}


/* =========================================================
   ITEM INFORMATION
   ========================================================= */

.customer-cart-item-info {
    min-width: 0;
}

.customer-cart-item-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.customer-cart-item-title h2 {
    margin: 0;

    color: #171a1e;

    font-size: 16px;
    font-weight: 800;

    line-height: 1.35;
}

.customer-cart-item-title > span {
    display: inline-flex;
    align-items: center;

    padding: 4px 8px;

    border-radius: 6px;

    background: #fff0f0;

    color: #b63d3d;

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

    text-transform: uppercase;
}


.customer-cart-item-info > small {
    display: block;

    margin-top: 7px;

    color: #777e88;

    font-size: 12px;
}

.customer-cart-item-info > p {
    max-width: 650px;

    margin: 7px 0 0;

    color: #7a818a;

    font-size: 12px;

    line-height: 1.55;
}


/* =========================================================
   ITEM CONTROLS
   ========================================================= */

.customer-cart-item-controls {
    display: flex;
    align-items: center;

    gap: 18px;

    align-self: center;
}

.customer-cart-quantity {
    display: flex;
    align-items: center;

    height: 40px;

    overflow: hidden;

    border: 1px solid #dfe2e6;

    border-radius: 10px;

    background: #fafafa;
}

.customer-cart-quantity-button {
    width: 38px;
    height: 40px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #20242a;

    font-size: 19px;
    font-weight: 700;

    cursor: pointer;

    transition: .15s ease;
}

.customer-cart-quantity-button:hover {
    background: #e9ebee;
}


.customer-cart-quantity input {
    width: 38px;
    height: 40px;

    padding: 0;

    border: 0;

    outline: 0;

    background: transparent;

    color: #171a1e;

    text-align: center;

    font-size: 13px;
    font-weight: 800;

    -moz-appearance: textfield;
}

.customer-cart-quantity input::-webkit-inner-spin-button,
.customer-cart-quantity input::-webkit-outer-spin-button {
    margin: 0;

    -webkit-appearance: none;
}


.customer-cart-item-subtotal {
    min-width: 105px;

    color: #171a1e;

    text-align: right;

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


/* =========================================================
   REMOVE
   ========================================================= */

.customer-cart-remove {
    grid-column: 1 / -1;

    justify-self: start;

    margin-top: 12px;

    color: #a74646;

    text-decoration: none;

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

    transition: .2s ease;
}

.customer-cart-remove:hover {
    color: #d22f2f;

    text-decoration: underline;
}


/* =========================================================
   UNAVAILABLE ITEM
   ========================================================= */

.customer-cart-item-unavailable {
    background: #fffafa;
}

.customer-cart-item-unavailable
.customer-cart-item-info {
    opacity: .65;
}

.customer-cart-item-unavailable
.customer-cart-quantity {
    opacity: .5;
}


/* =========================================================
   UPDATE AREA
   ========================================================= */

.customer-cart-update {
    display: flex;
    justify-content: flex-end;

    padding: 15px 22px;

    border-top: 1px solid #eceef1;

    background: #fafbfc;
}

.customer-cart-update-button {
    min-height: 40px;

    padding: 0 17px;

    border: 1px solid #dfe2e6;

    border-radius: 10px;

    background: #fff;

    color: #252930;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;

    transition: .2s ease;
}

.customer-cart-update-button:hover {
    background: #f0f1f3;

    border-color: #d5d8dd;
}


/* =========================================================
   ORDER SUMMARY
   ========================================================= */

.customer-cart-summary {
    margin-top: 18px;

    padding: 0;

    overflow: hidden;

    background: #fff;

    border: 1px solid #e5e7eb;

    border-radius: 20px;

    box-shadow:
        0 7px 28px rgba(0, 0, 0, .04);
}


/* =========================================================
   SUMMARY ROW
   ========================================================= */

.customer-cart-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 17px 22px;
}

.customer-cart-summary-row span {
    color: #6f7680;

    font-size: 13px;
}

.customer-cart-summary-row strong {
    color: #20242a;

    font-size: 14px;
}


/* =========================================================
   DELIVERY NOTE
   ========================================================= */

.customer-cart-summary-note {
    margin: 0 22px;

    padding: 14px 15px;

    border-radius: 12px;

    background: #f5f6f8;
}

.customer-cart-summary-note > span {
    display: block;

    margin-bottom: 5px;

    color: #858c95;

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

    letter-spacing: .1em;
}

.customer-cart-summary-note p {
    margin: 0;

    color: #666d77;

    font-size: 12px;

    line-height: 1.55;
}


/* =========================================================
   TOTAL
   ========================================================= */

.customer-cart-summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 18px;

    padding: 19px 22px;

    border-top: 1px solid #eceef1;
}

.customer-cart-summary-total span {
    color: #272b31;

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

.customer-cart-summary-total strong {
    color: #111827;

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


/* =========================================================
   CHECKOUT
   ========================================================= */

.customer-cart-checkout-button {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    width: 100%;

    min-height: 58px;

    margin-top: 18px;

    padding: 0 22px;

    border-radius: 14px;

    background: #111827;

    color: #fff;

    text-decoration: none;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, .12);

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.customer-cart-checkout-button:hover {
    background: #202631;

    transform: translateY(-1px);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, .16);
}

.customer-cart-checkout-button span {
    font-size: 14px;
    font-weight: 800;
}

.customer-cart-checkout-button strong {
    font-size: 15px;
    font-weight: 850;
}


/* =========================================================
   CHECKOUT DISABLED
   ========================================================= */

.customer-cart-checkout-disabled {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 54px;

    margin-top: 18px;

    padding: 0 20px;

    border-radius: 13px;

    background: #e8eaed;

    color: #777e87;

    text-align: center;

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


/* =========================================================
   CONTINUE BROWSING
   ========================================================= */

.customer-cart-continue {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 45px;

    margin-top: 7px;

    color: #676e78;

    text-decoration: none;

    font-size: 12px;
    font-weight: 700;

    transition: .2s ease;
}

.customer-cart-continue:hover {
    color: #171a1e;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 760px) {

    .customer-cart-content {
        width: min(
            100% - 24px,
            1000px
        );

        padding-top: 22px;
    }

    .customer-cart-item {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .customer-cart-item-controls {
        justify-content: space-between;

        width: 100%;
    }

    .customer-cart-item-subtotal {
        min-width: auto;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 520px) {

    .customer-cart-page {
        padding-bottom: 40px;
    }


    .customer-cart-topbar {
        min-height: 62px;

        padding: 0 13px;
    }


    .customer-cart-topbar-title strong {
        font-size: 16px;
    }


    .customer-cart-topbar-title span {
        font-size: 10px;
    }


    .customer-cart-content {
        width: calc(100% - 18px);

        padding-top: 17px;
    }


    /* Vendor */

    .customer-cart-vendor-card {
        align-items: flex-start;

        padding: 14px;

        gap: 12px;
    }


    .customer-cart-vendor-icon {
        width: 50px;
        height: 50px;

        flex-basis: 50px;
    }


    .customer-cart-vendor-info > strong {
        font-size: 15px;
    }


    .customer-cart-vendor-link {
        align-self: center;

        min-height: 36px;

        padding: 0 12px;
    }


    /* Item */

    .customer-cart-item {
        padding: 17px 15px;
    }


    .customer-cart-section-heading {
        padding: 17px 15px;
    }


    .customer-cart-section-heading h1,
    .customer-cart-section-heading h2 {
        font-size: 17px;
    }


    .customer-cart-item-title h2 {
        font-size: 15px;
    }


    .customer-cart-item-controls {
        gap: 12px;
    }


    .customer-cart-quantity {
        height: 38px;
    }


    .customer-cart-quantity-button {
        width: 35px;
        height: 38px;
    }


    .customer-cart-quantity input {
        width: 35px;
        height: 38px;
    }


    .customer-cart-item-subtotal {
        font-size: 14px;
    }


    .customer-cart-update {
        padding: 13px 15px;
    }


    .customer-cart-update-button {
        width: 100%;
    }


    /* Summary */

    .customer-cart-summary-row {
        padding: 15px;
    }


    .customer-cart-summary-note {
        margin: 0 15px;
    }


    .customer-cart-summary-total {
        padding: 17px 15px;
    }


    .customer-cart-summary-total strong {
        font-size: 21px;
    }


    /* Checkout */

    .customer-cart-checkout-button {
        min-height: 55px;

        padding: 0 17px;
    }


    .customer-cart-checkout-button span {
        font-size: 13px;
    }


    .customer-cart-checkout-button strong {
        font-size: 14px;
    }


    /* Empty */

    .customer-cart-empty {
        margin: 45px auto;

        padding: 42px 20px;
    }


    .customer-cart-empty h1 {
        font-size: 23px;
    }


    .customer-cart-primary-button {
        width: 100%;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

    .customer-cart-vendor-card {
        flex-wrap: wrap;
    }

    .customer-cart-vendor-info {
        width: calc(100% - 65px);
    }

    .customer-cart-vendor-link {
        width: 100%;
    }

    .customer-cart-checkout-button {
        gap: 8px;
    }

}

/* =========================================================
   FOODDEY VENDOR ORDERS
   ========================================================= */

.vendor-dashboard-layout {
    min-height: 100vh;
    background: #f7f8fa;
    color: #17202a;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.vendor-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 255px;
    background: #ffffff;
    border-right: 1px solid #e8eaed;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}


.vendor-sidebar-brand {
    padding: 25px 22px 20px;
    border-bottom: 1px solid #f0f1f3;
}


.vendor-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #15191e;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
}


.vendor-brand-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #ff6b35;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}


.vendor-sidebar-business {
    padding: 22px;
    border-bottom: 1px solid #f0f1f3;
}


.vendor-sidebar-business span {
    display: block;
    margin-bottom: 6px;
    color: #9098a2;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
}


.vendor-sidebar-business strong {
    display: block;
    color: #20262d;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
}


/* =========================================================
   SIDEBAR NAV
   ========================================================= */

.vendor-sidebar-nav {
    padding: 16px 12px;
    flex: 1;
}


.vendor-sidebar-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    margin-bottom: 5px;
    padding: 0 13px;
    border-radius: 11px;
    color: #626b75;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}


.vendor-sidebar-nav a:hover {
    background: #f7f8fa;
    color: #20262d;
}


.vendor-sidebar-nav a.active {
    background: #fff1eb;
    color: #ef5b27;
}


.vendor-sidebar-nav a.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: #ff6b35;
}


.vendor-nav-icon {
    width: 25px;
    text-align: center;
    font-size: 17px;
}


.vendor-nav-count {
    margin-left: auto;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: 20px;
    background: #ff6b35;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
}


.vendor-sidebar-bottom {
    padding: 15px 12px 22px;
    border-top: 1px solid #f0f1f3;
}


.vendor-logout-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 13px;
    border-radius: 10px;
    color: #7b838d;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: .2s ease;
}


.vendor-logout-link:hover {
    background: #fff1f1;
    color: #d94a4a;
}


/* =========================================================
   SIDEBAR OVERLAY
   ========================================================= */

.vendor-sidebar-overlay {
    display: none;
}


/* =========================================================
   MAIN
   ========================================================= */

.vendor-dashboard-main {
    margin-left: 255px;
    min-height: 100vh;
}


/* =========================================================
   TOP BAR
   ========================================================= */

.vendor-dashboard-topbar {
    position: sticky;
    top: 0;
    z-index: 900;
    min-height: 72px;
    padding: 0 34px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid #e9ebee;
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
}


.vendor-menu-toggle {
    display: none;
}


.vendor-topbar-title {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.vendor-topbar-title span {
    color: #9aa1a9;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.3px;
}


.vendor-topbar-title strong {
    color: #20262d;
    font-size: 15px;
    font-weight: 750;
}


.vendor-notification-button {
    position: relative;
    margin-left: auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #f7f8fa;
    color: #555e68;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: .2s ease;
}


.vendor-notification-button:hover {
    background: #fff1eb;
    color: #ef5b27;
}


.vendor-notification-button > span {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 20px;
    background: #ef5b27;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    border: 2px solid #ffffff;
}


/* =========================================================
   CONTENT
   ========================================================= */

.vendor-dashboard-content {
    width: min(1400px, calc(100% - 68px));
    margin: 0 auto;
    padding: 42px 0 70px;
}


.vendor-dashboard-welcome {
    margin-bottom: 30px;
}


.vendor-dashboard-welcome .section-kicker {
    display: block;
    margin-bottom: 7px;
    color: #ff6b35;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}


.vendor-dashboard-welcome h1 {
    margin: 0;
    color: #171c21;
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.05;
    letter-spacing: -1.5px;
    font-weight: 800;
}


.vendor-dashboard-welcome p {
    margin: 10px 0 0;
    color: #7a838d;
    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
   STAT CARDS
   ========================================================= */

.vendor-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}


.vendor-dashboard-stat {
    min-height: 145px;
    padding: 21px;
    background: #ffffff;
    border: 1px solid #e9ebee;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(25, 32, 38, .035);
    display: flex;
    flex-direction: column;
}


.vendor-dashboard-stat > span {
    color: #929aa3;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.1px;
}


.vendor-dashboard-stat > strong {
    margin-top: 13px;
    color: #1c2228;
    font-size: 31px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -1px;
}


.vendor-dashboard-stat > small {
    margin-top: auto;
    padding-top: 13px;
    color: #89919a;
    font-size: 11px;
}


.vendor-dashboard-stat.vendor-stat-warning {
    border-color: #ffe0d4;
    background: linear-gradient(
        145deg,
        #ffffff 0%,
        #fff9f6 100%
    );
}


.vendor-stat-warning > strong {
    color: #ef5b27;
}


/* =========================================================
   GENERIC SECTION
   ========================================================= */

.vendor-dashboard-section {
    margin-top: 22px;
    background: #ffffff;
    border: 1px solid #e8eaed;
    border-radius: 18px;
    box-shadow: 0 5px 25px rgba(25, 32, 38, .035);
    overflow: hidden;
}


.vendor-dashboard-section-header {
    padding: 25px 26px 20px;
    border-bottom: 1px solid #f0f1f3;
}


.vendor-dashboard-section-header .section-kicker {
    color: #a0a7af;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}


.vendor-dashboard-section-header h2 {
    margin: 5px 0 0;
    color: #20262d;
    font-size: 20px;
    font-weight: 780;
    letter-spacing: -.5px;
}


/* =========================================================
   FILTERS
   ========================================================= */

.vendor-order-filters {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 18px;
    overflow-x: auto;
    scrollbar-width: none;
}


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


.vendor-order-filters a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid #e5e7ea;
    border-radius: 9px;
    background: #ffffff;
    color: #6c747d;
    text-decoration: none;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
    transition: .2s ease;
}


.vendor-order-filters a:hover {
    border-color: #ffb89e;
    color: #ef5b27;
    background: #fffaf7;
}


.vendor-order-filters a.active {
    border-color: #ff6b35;
    background: #ff6b35;
    color: #ffffff;
}


.vendor-order-filters a span {
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 20px;
    background: #f1f2f4;
    color: #707983;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
}


.vendor-order-filters a.active span {
    background: rgba(255,255,255,.22);
    color: #ffffff;
}


/* =========================================================
   ORDER LIST
   ========================================================= */

.vendor-order-list {
    width: 100%;
}


.vendor-order-card {
    display: grid;
    grid-template-columns:
        minmax(170px, 1.5fr)
        minmax(115px, .8fr)
        minmax(125px, .8fr)
        minmax(110px, .7fr)
        minmax(115px, .8fr)
        75px;

    align-items: center;
    gap: 18px;
    padding: 18px 26px;
    border-top: 1px solid #f0f1f3;
    transition: background .2s ease;
}


.vendor-order-card:first-child {
    border-top: 0;
}


.vendor-order-card:hover {
    background: #fcfcfd;
}


/* =========================================================
   ORDER MAIN
   ========================================================= */

.vendor-order-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.vendor-order-main > strong {
    color: #222930;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .2px;
}


.vendor-order-main > span {
    color: #505a64;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.vendor-order-phone {
    color: #949ca4;
    font-size: 10px;
}


/* =========================================================
   AMOUNT
   ========================================================= */

.vendor-order-amount {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.vendor-order-amount strong {
    color: #20262d;
    font-size: 14px;
    font-weight: 800;
}


.vendor-order-amount span {
    color: #9aa1a8;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight: 750;
}


/* =========================================================
   ORDER TYPE
   ========================================================= */

.vendor-order-type {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.vendor-order-type span {
    color: #a0a7ae;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .9px;
}


.vendor-order-type strong {
    color: #4e5862;
    font-size: 11px;
    font-weight: 700;
}


/* =========================================================
   STATUS
   ========================================================= */

.vendor-order-status {
    display: flex;
    align-items: center;
}


.vendor-order-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 0 9px;
    border-radius: 7px;
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    text-transform: capitalize;
    white-space: nowrap;
}


/* Pending */

.vendor-order-status-pending {
    background: #fff4dc;
    color: #a66b00;
}


/* Accepted */

.vendor-order-status-accepted {
    background: #eaf3ff;
    color: #3572bd;
}


/* Preparing */

.vendor-order-status-preparing {
    background: #f0eaff;
    color: #7654bd;
}


/* Ready */

.vendor-order-status-ready {
    background: #e7f8ee;
    color: #27804d;
}


/* Out for delivery */

.vendor-order-status-out_for_delivery {
    background: #e7f7f8;
    color: #25777b;
}


/* Completed */

.vendor-order-status-completed {
    background: #e5f7eb;
    color: #237644;
}


/* Rejected */

.vendor-order-status-rejected {
    background: #fff0f0;
    color: #c54d4d;
}


/* Cancelled */

.vendor-order-status-cancelled {
    background: #f1f2f3;
    color: #727981;
}


/* =========================================================
   DATE
   ========================================================= */

.vendor-order-date {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: #555f69;
    font-size: 11px;
    font-weight: 600;
}


.vendor-order-date small {
    color: #a0a7ae;
    font-size: 9px;
}


/* =========================================================
   VIEW BUTTON
   ========================================================= */

.vendor-order-view {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 9px;
    background: #f7f8fa;
    color: #555e68;
    text-decoration: none;
    font-size: 10px;
    font-weight: 750;
    white-space: nowrap;
    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}


.vendor-order-view:hover {
    background: #fff0e9;
    color: #ef5b27;
    transform: translateX(2px);
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.vendor-empty-state {
    min-height: 300px;
    padding: 50px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}


.vendor-empty-state > div {
    width: 65px;
    height: 65px;
    margin-bottom: 18px;
    border-radius: 18px;
    background: #f7f8fa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}


.vendor-empty-state h3 {
    margin: 0;
    color: #252b31;
    font-size: 17px;
    font-weight: 750;
}


.vendor-empty-state p {
    max-width: 400px;
    margin: 8px auto 0;
    color: #929aa3;
    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 1100px) {

    .vendor-order-card {
        grid-template-columns:
            minmax(160px, 1.4fr)
            minmax(110px, .8fr)
            minmax(110px, .8fr)
            minmax(105px, .7fr)
            70px;
    }

    .vendor-order-date {
        display: none;
    }

}


@media (max-width: 900px) {

    .vendor-sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 10px 0 35px rgba(0,0,0,.08);
    }


    .vendor-sidebar.open {
        transform: translateX(0);
    }


    .vendor-sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 950;
        background: rgba(15,20,25,.42);
        backdrop-filter: blur(2px);
    }


    .vendor-sidebar-overlay.active {
        display: block;
    }


    .vendor-dashboard-main {
        margin-left: 0;
    }


    .vendor-menu-toggle {
        width: 40px;
        height: 40px;
        margin-right: 14px;
        border: 0;
        border-radius: 10px;
        background: #f7f8fa;
        color: #414a53;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 19px;
        cursor: pointer;
    }


    .vendor-dashboard-topbar {
        padding: 0 20px;
    }


    .vendor-dashboard-content {
        width: min(100% - 40px, 720px);
        padding-top: 32px;
    }


    .vendor-dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }


    .vendor-order-card {
        grid-template-columns:
            1fr auto;

        gap: 13px 18px;
        padding: 18px 20px;
    }


    .vendor-order-main {
        grid-column: 1;
    }


    .vendor-order-amount {
        grid-column: 2;
        grid-row: 1;
        align-items: flex-end;
    }


    .vendor-order-type {
        grid-column: 1;
    }


    .vendor-order-status {
        grid-column: 2;
        grid-row: 2;
        justify-content: flex-end;
    }


    .vendor-order-view {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 39px;
        background: #f7f8fa;
    }

}


@media (max-width: 600px) {

    .vendor-dashboard-topbar {
        min-height: 64px;
        padding: 0 14px;
    }


    .vendor-menu-toggle {
        width: 37px;
        height: 37px;
        margin-right: 10px;
    }


    .vendor-topbar-title span {
        font-size: 8px;
    }


    .vendor-topbar-title strong {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
    }


    .vendor-notification-button {
        width: 38px;
        height: 38px;
    }


    .vendor-dashboard-content {
        width: calc(100% - 24px);
        padding: 25px 0 55px;
    }


    .vendor-dashboard-welcome {
        margin-bottom: 22px;
    }


    .vendor-dashboard-welcome h1 {
        font-size: 31px;
    }


    .vendor-dashboard-welcome p {
        font-size: 12px;
    }


    .vendor-dashboard-stats {
        gap: 10px;
    }


    .vendor-dashboard-stat {
        min-height: 125px;
        padding: 16px;
        border-radius: 14px;
    }


    .vendor-dashboard-stat > strong {
        margin-top: 11px;
        font-size: 25px;
    }


    .vendor-dashboard-stat > small {
        font-size: 9px;
    }


    .vendor-dashboard-section {
        border-radius: 14px;
    }


    .vendor-dashboard-section-header {
        padding: 20px 17px 16px;
    }


    .vendor-dashboard-section-header h2 {
        font-size: 18px;
    }


    .vendor-order-filters {
        padding: 11px 12px;
    }


    .vendor-order-filters a {
        min-height: 34px;
        padding: 0 11px;
        font-size: 11px;
    }


    .vendor-order-card {
        padding: 17px 15px;
    }


    .vendor-order-main > strong {
        font-size: 12px;
    }


    .vendor-order-main > span {
        font-size: 12px;
    }


    .vendor-order-amount strong {
        font-size: 13px;
    }


    .vendor-order-type strong {
        font-size: 10px;
    }


    .vendor-order-status-badge {
        min-height: 25px;
        padding: 0 8px;
        font-size: 8px;
    }


    .vendor-order-view {
        min-height: 38px;
    }

}


@media (max-width: 380px) {

    .vendor-dashboard-stats {
        grid-template-columns: 1fr;
    }


    .vendor-dashboard-stat {
        min-height: 110px;
    }


    .vendor-order-card {
        grid-template-columns: 1fr;
    }


    .vendor-order-amount {
        grid-column: 1;
        grid-row: auto;
        align-items: flex-start;
    }


    .vendor-order-status {
        grid-column: 1;
        grid-row: auto;
        justify-content: flex-start;
    }

}

/* ============================================================
   FOODDEY — VENDOR ORDER VIEW
   COMPACT ORDER CARD DESIGN
   ============================================================ */

/*
|--------------------------------------------------------------------------
| Main Order View Width
|--------------------------------------------------------------------------
*/

.vendor-dashboard-main {
    min-width: 0;
}

.vendor-dashboard-content {
    max-width: 1100px;
}


/*
|--------------------------------------------------------------------------
| Back Link
|--------------------------------------------------------------------------
*/

.vendor-order-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    color: #666;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.vendor-order-back-link:hover {
    color: #111;
}


/*
|--------------------------------------------------------------------------
| ORDER HEADER
|--------------------------------------------------------------------------
*/

.vendor-order-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 14px;

    padding: 16px 20px;
    margin-bottom: 12px;

    box-shadow: 0 3px 15px rgba(0,0,0,0.04);
}

.vendor-order-view-header .section-kicker {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #999;
    margin-bottom: 3px;
}

.vendor-order-view-header h1 {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    color: #171717;
}

.vendor-order-view-header p {
    margin: 5px 0 0;
    color: #888;
    font-size: 12px;
}


/*
|--------------------------------------------------------------------------
| STATUS BADGE
|--------------------------------------------------------------------------
*/

.vendor-order-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 6px 11px;
    border-radius: 999px;

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

.vendor-order-status-pending {
    background: #fff4d6;
    color: #9a6800;
}

.vendor-order-status-accepted {
    background: #e9f4ff;
    color: #1769aa;
}

.vendor-order-status-preparing {
    background: #f0eaff;
    color: #6845a5;
}

.vendor-order-status-ready {
    background: #e8f8ee;
    color: #18733c;
}

.vendor-order-status-completed {
    background: #e4f7eb;
    color: #146c35;
}

.vendor-order-status-rejected,
.vendor-order-status-cancelled {
    background: #ffe9e9;
    color: #b42323;
}


/*
|--------------------------------------------------------------------------
| ACTIONS
|--------------------------------------------------------------------------
|
| Keep actions compact and place them BELOW the order information.
|
*/

.vendor-order-actions-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 14px;

    padding: 14px 18px;
    margin-bottom: 12px;

    box-shadow: 0 3px 15px rgba(0,0,0,0.035);
}

.vendor-order-actions-card > div:first-child {
    margin-bottom: 10px;
}

.vendor-order-actions-card .section-kicker {
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.1px;
    color: #999;
}

.vendor-order-actions-card h2 {
    margin: 2px 0 0;
    font-size: 15px;
    color: #222;
}

.vendor-order-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vendor-order-action-buttons form {
    margin: 0;
}

.vendor-order-action-buttons button {
    border: 0;
    border-radius: 8px;

    padding: 9px 13px;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
    transition: transform .15s ease, opacity .15s ease;
}

.vendor-order-action-buttons button:hover {
    opacity: .9;
    transform: translateY(-1px);
}

.vendor-order-action-primary {
    background: #111;
    color: #fff;
}

.vendor-order-action-danger {
    background: #fff0f0;
    color: #c62828;
    border: 1px solid #ffd2d2 !important;
}


/*
|--------------------------------------------------------------------------
| CUSTOMER + FULFILMENT GRID
|--------------------------------------------------------------------------
*/

.vendor-order-view-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;

    margin-bottom: 12px;
}


/*
|--------------------------------------------------------------------------
| GENERAL DETAIL CARD
|--------------------------------------------------------------------------
*/

.vendor-order-detail-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 14px;

    padding: 16px 18px;

    margin-bottom: 12px;

    box-shadow: 0 3px 15px rgba(0,0,0,0.035);
}


/*
|--------------------------------------------------------------------------
| REMOVE EXTRA MARGINS INSIDE GRID
|--------------------------------------------------------------------------
*/

.vendor-order-view-grid .vendor-order-detail-card {
    margin-bottom: 0;
}


/*
|--------------------------------------------------------------------------
| DETAIL HEADING
|--------------------------------------------------------------------------
*/

.vendor-order-detail-heading {
    margin-bottom: 12px;
}

.vendor-order-detail-heading > span {
    display: block;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.1px;

    color: #999;

    margin-bottom: 3px;
}

.vendor-order-detail-heading h2 {
    margin: 0;

    font-size: 15px;
    line-height: 1.2;

    color: #222;
}


/*
|--------------------------------------------------------------------------
| CUSTOMER DETAILS
|--------------------------------------------------------------------------
*/

.vendor-order-customer-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.vendor-order-customer-details > div {
    min-width: 0;
}

.vendor-order-customer-details span {
    display: block;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: .8px;

    color: #aaa;

    margin-bottom: 3px;
}

.vendor-order-customer-details strong,
.vendor-order-customer-details a {
    display: block;

    font-size: 12px;
    line-height: 1.3;

    color: #222;
    text-decoration: none;

    overflow-wrap: anywhere;
}

.vendor-order-customer-details a:hover {
    text-decoration: underline;
}


/*
|--------------------------------------------------------------------------
| FULFILMENT
|--------------------------------------------------------------------------
*/

.vendor-order-fulfilment {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vendor-order-fulfilment-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 10px;
    background: #f5f5f5;

    font-size: 19px;
}

.vendor-order-fulfilment strong {
    display: block;

    font-size: 13px;
    color: #222;
}

.vendor-order-fulfilment span {
    display: block;

    margin-top: 2px;

    font-size: 11px;
    color: #888;
}


/*
|--------------------------------------------------------------------------
| DELIVERY ADDRESS
|--------------------------------------------------------------------------
*/

.vendor-order-address {
    margin-top: 12px;

    padding-top: 11px;

    border-top: 1px solid #eee;
}

.vendor-order-address span {
    display: block;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: .8px;

    color: #aaa;

    margin-bottom: 4px;
}

.vendor-order-address strong {
    display: block;

    font-size: 11px;
    line-height: 1.45;

    color: #444;
}


/*
|--------------------------------------------------------------------------
| FOOD ITEMS CARD
|--------------------------------------------------------------------------
*/

.vendor-order-items-card {
    padding-bottom: 14px;
}


/*
|--------------------------------------------------------------------------
| FOOD TABLE
|--------------------------------------------------------------------------
*/

.vendor-order-items-table {
    width: 100%;
}


/*
|--------------------------------------------------------------------------
| TABLE HEADER
|--------------------------------------------------------------------------
*/

.vendor-order-items-header {
    display: grid;

    grid-template-columns: minmax(0, 1fr) 100px 55px 110px;

    gap: 10px;

    padding: 7px 0;

    border-bottom: 1px solid #eee;

    color: #999;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: .8px;
}


/*
|--------------------------------------------------------------------------
| ITEM ROW
|--------------------------------------------------------------------------
*/

.vendor-order-item-row {
    display: grid;

    grid-template-columns: minmax(0, 1fr) 100px 55px 110px;

    align-items: center;

    gap: 10px;

    padding: 10px 0;

    border-bottom: 1px solid #f1f1f1;

    font-size: 11px;
    color: #555;
}

.vendor-order-item-row:last-child {
    border-bottom: 0;
}

.vendor-order-item-row strong {
    color: #222;
}

.vendor-order-item-row > div {
    min-width: 0;
}

.vendor-order-item-row > div strong {
    display: block;

    font-size: 12px;

    overflow-wrap: anywhere;
}


/*
|--------------------------------------------------------------------------
| TOTALS
|--------------------------------------------------------------------------
*/

.vendor-order-total-box {
    width: 280px;
    max-width: 100%;

    margin-left: auto;
    margin-top: 10px;

    padding-top: 8px;

    border-top: 1px solid #ddd;
}

.vendor-order-total-box > div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 4px 0;

    font-size: 11px;
}

.vendor-order-total-box span {
    color: #888;
}

.vendor-order-total-box strong {
    color: #222;
}

.vendor-order-grand-total {
    margin-top: 5px;
    padding-top: 8px !important;

    border-top: 1px solid #eee;

    font-size: 14px !important;
}

.vendor-order-grand-total span {
    color: #222;
    font-weight: 700;
}

.vendor-order-grand-total strong {
    font-size: 16px;
}


/*
|--------------------------------------------------------------------------
| CUSTOMER NOTE
|--------------------------------------------------------------------------
*/

.vendor-order-note-card {
    padding-bottom: 14px;
}

.vendor-order-note {
    background: #fafafa;

    border: 1px solid #eee;
    border-radius: 9px;

    padding: 10px 12px;

    font-size: 12px;
    line-height: 1.5;

    color: #555;
}


/*
|--------------------------------------------------------------------------
| TIMELINE
|--------------------------------------------------------------------------
*/

.vendor-order-timeline-info {
    display: grid;

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

    gap: 10px;
}

.vendor-order-timeline-info > div {
    padding: 9px 10px;

    background: #fafafa;

    border-radius: 8px;
}

.vendor-order-timeline-info span {
    display: block;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: .7px;

    color: #aaa;

    margin-bottom: 4px;
}

.vendor-order-timeline-info strong {
    display: block;

    font-size: 10px;
    line-height: 1.35;

    color: #333;
}


/*
|--------------------------------------------------------------------------
| EMPTY STATE
|--------------------------------------------------------------------------
*/

.vendor-order-detail-card .vendor-empty-state {
    padding: 25px 15px;
    text-align: center;
}

.vendor-order-detail-card .vendor-empty-state h3 {
    margin: 7px 0 4px;
    font-size: 14px;
}

.vendor-order-detail-card .vendor-empty-state p {
    margin: 0;
    font-size: 11px;
    color: #888;
}


/*
|--------------------------------------------------------------------------
| DESKTOP — MAKE EVERYTHING COMPACT
|--------------------------------------------------------------------------
*/

@media (min-width: 901px) {

    .vendor-dashboard-content {
        padding-top: 18px;
        padding-bottom: 35px;
    }

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .vendor-order-view-grid {
        grid-template-columns: 1fr;
    }

    .vendor-order-view-grid
    .vendor-order-detail-card {
        margin-bottom: 12px;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .vendor-dashboard-content {
        padding-left: 12px;
        padding-right: 12px;
    }


    .vendor-order-view-header {
        padding: 13px 14px;

        align-items: flex-start;

        border-radius: 11px;
    }


    .vendor-order-view-header h1 {
        font-size: 18px;
    }


    .vendor-order-view-header p {
        font-size: 10px;
    }


    .vendor-order-detail-card,
    .vendor-order-actions-card {
        border-radius: 11px;
        padding: 13px;
    }


    .vendor-order-customer-details {
        grid-template-columns: 1fr 1fr;
    }


    .vendor-order-items-header {
        grid-template-columns: minmax(0, 1fr) 75px 40px 80px;
        gap: 6px;
    }


    .vendor-order-item-row {
        grid-template-columns: minmax(0, 1fr) 75px 40px 80px;
        gap: 6px;
    }


    .vendor-order-items-header,
    .vendor-order-item-row {
        font-size: 9px;
    }


    .vendor-order-item-row > div strong {
        font-size: 11px;
    }


    .vendor-order-total-box {
        width: 100%;
    }


    .vendor-order-timeline-info {
        grid-template-columns: 1fr;
    }


    .vendor-order-action-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }


    .vendor-order-action-buttons form,
    .vendor-order-action-buttons button {
        width: 100%;
    }


    .vendor-order-action-buttons button {
        padding: 9px 8px;
        font-size: 11px;
    }

}


/*
|--------------------------------------------------------------------------
| VERY SMALL PHONES
|--------------------------------------------------------------------------
*/

@media (max-width: 400px) {

    .vendor-order-customer-details {
        grid-template-columns: 1fr;
    }


    .vendor-order-items-header {
        grid-template-columns: minmax(0, 1fr) 62px 35px 68px;
        gap: 4px;
    }


    .vendor-order-item-row {
        grid-template-columns: minmax(0, 1fr) 62px 35px 68px;
        gap: 4px;
    }


    .vendor-order-action-buttons {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   FOODDEY ORDER TRACKER
   ========================================================= */

.fooddey-order-tracker {
    padding: 32px 0;
    background: #f7f8fa;
}

.fooddey-tracker-card {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px 32px;
    background: #ffffff;
    border: 1px solid #e8eaed;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}

.fooddey-tracker-icon {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff4e8;
    border-radius: 16px;
    font-size: 30px;
}

.fooddey-tracker-content {
    flex: 1;
    min-width: 0;
}

.fooddey-tracker-content .section-kicker {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.fooddey-tracker-content h2 {
    margin: 0 0 6px;
    font-size: 24px;
    line-height: 1.2;
    color: #171717;
}

.fooddey-tracker-content p {
    margin: 0 0 18px;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}

.fooddey-tracker-form {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}

.fooddey-tracker-form input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 16px;
    border: 1px solid #dfe3e8;
    border-radius: 10px;
    background: #fafafa;
    color: #171717;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease,
                box-shadow 0.2s ease,
                background 0.2s ease;
}

.fooddey-tracker-form input::placeholder {
    color: #9ca3af;
}

.fooddey-tracker-form input:focus {
    background: #ffffff;
    border-color: #f28c28;
    box-shadow: 0 0 0 3px rgba(242, 140, 40, 0.12);
}

.fooddey-tracker-form button {
    height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    background: #f28c28;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.2s ease,
                opacity 0.2s ease,
                box-shadow 0.2s ease;
}

.fooddey-tracker-form button:hover {
    opacity: 0.94;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(242, 140, 40, 0.2);
}

.fooddey-tracker-form button:active {
    transform: translateY(0);
}

.fooddey-tracker-help {
    display: block;
    margin-top: 10px;
    color: #9ca3af;
    font-size: 11px;
    line-height: 1.5;
}

.fooddey-tracker-error {
    margin-bottom: 14px;
    padding: 11px 14px;
    border: 1px solid #fecaca;
    border-radius: 9px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 600;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .fooddey-order-tracker {
        padding: 24px 0;
    }

    .fooddey-tracker-card {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 22px 18px;
        border-radius: 15px;
    }

    .fooddey-tracker-icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
        border-radius: 13px;
        font-size: 24px;
    }

    .fooddey-tracker-content h2 {
        font-size: 21px;
    }

    .fooddey-tracker-content p {
        font-size: 13px;
        margin-bottom: 15px;
    }

    .fooddey-tracker-form {
        flex-direction: column;
    }

    .fooddey-tracker-form input,
    .fooddey-tracker-form button {
        width: 100%;
        height: 46px;
    }

    .fooddey-tracker-form button {
        padding: 0 16px;
    }

}

/* =========================================================
   MOBILE CATEGORY HORIZONTAL SLIDER
   ========================================================= */

.categories-scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    padding: 4px 2px 14px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Chrome / Edge / Safari */
.categories-scroll::-webkit-scrollbar {
    height: 6px;
}

.categories-scroll::-webkit-scrollbar-track {
    background: #eeeeee;
    border-radius: 20px;
}

.categories-scroll::-webkit-scrollbar-thumb {
    background: #c7c7c7;
    border-radius: 20px;
}

.categories-scroll::-webkit-scrollbar-thumb:hover {
    background: #999999;
}


/* =========================================================
   CATEGORY CARDS
   ========================================================= */

.category-card {
    flex: 0 0 auto;
    width: 105px;
    min-width: 105px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .categories-section {
        overflow: hidden;
    }

    .categories-section .container {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .categories-scroll {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 12px;
        padding: 4px 4px 14px;
        margin: 0;
        scrollbar-width: thin;
        touch-action: pan-x;
    }

    .category-card {
        flex: 0 0 95px;
        width: 95px;
        min-width: 95px;
    }

}

/* =========================================================
   LEGAL PAGES
   ========================================================= */

.legal-page {
    background: #f7f7f7;
    min-height: 70vh;
    padding: 70px 20px;
}

.legal-container {
    max-width: 900px;
    margin: 0 auto;
}

.legal-hero {
    text-align: center;
    margin-bottom: 35px;
}

.legal-hero h1 {
    margin: 8px 0 12px;
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.1;
}

.legal-hero p {
    max-width: 650px;
    margin: auto;
    color: #666;
    font-size: 16px;
}

.legal-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 8px 35px rgba(0,0,0,.06);
}

.legal-card h2 {
    margin: 32px 0 10px;
    font-size: 21px;
}

.legal-card h2:first-of-type {
    margin-top: 25px;
}

.legal-card p {
    color: #555;
    line-height: 1.8;
    margin: 0 0 14px;
}


/* =========================================================
   AGENT PAGE
   ========================================================= */

.agent-page {
    background: #fff;
}

.agent-container {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   AGENT HERO
   ========================================================= */

.agent-hero {
    background: linear-gradient(
        135deg,
        #111,
        #242424
    );
    color: #fff;
    padding: 95px 0;
}

.agent-hero-content {
    max-width: 780px;
}

.agent-hero .section-kicker {
    color: #f5a623;
}

.agent-hero h1 {
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1.02;
    margin: 15px 0 25px;
    letter-spacing: -2px;
}

.agent-hero h1 span {
    display: block;
    color: #f5a623;
}

.agent-hero p {
    max-width: 700px;
    color: #d5d5d5;
    font-size: 19px;
    line-height: 1.7;
}

.agent-hero-actions {
    margin-top: 30px;
}


/* =========================================================
   BUTTON
   ========================================================= */

.agent-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 23px;
    border-radius: 10px;
    background: #f5a623;
    color: #111;
    text-decoration: none;
    font-weight: 800;
    transition: .2s ease;
}

.agent-primary-button:hover {
    transform: translateY(-2px);
    opacity: .92;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.agent-section {
    padding: 80px 0;
}

.agent-benefits-section {
    padding: 80px 0;
    background: #f7f7f7;
}

.agent-section-heading {
    max-width: 700px;
    margin-bottom: 40px;
}

.agent-section-heading h2 {
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.1;
    margin: 8px 0 15px;
}

.agent-section-heading p {
    color: #666;
    line-height: 1.7;
    font-size: 16px;
}


/* =========================================================
   AGENT ROLE CARDS
   ========================================================= */

.agent-role-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.agent-role-card {
    border: 1px solid #e8e8e8;
    border-radius: 18px;
    padding: 25px;
    background: #fff;
    transition: .2s ease;
}

.agent-role-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,.07);
}

.agent-role-number {
    font-weight: 900;
    font-size: 13px;
    color: #f5a623;
    margin-bottom: 18px;
}

.agent-role-card h3 {
    margin: 0 0 10px;
    font-size: 19px;
}

.agent-role-card p {
    color: #666;
    line-height: 1.65;
    font-size: 14px;
    margin: 0;
}


/* =========================================================
   BENEFITS
   ========================================================= */

.agent-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.agent-benefit {
    display: flex;
    gap: 18px;
    padding: 25px;
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 17px;
}

.agent-benefit > span {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: grid;
    place-items: center;
    background: #fff4dc;
    border-radius: 12px;
    font-size: 23px;
}

.agent-benefit h3 {
    margin: 0 0 7px;
}

.agent-benefit p {
    margin: 0;
    color: #666;
    line-height: 1.6;
}


/* =========================================================
   COMMISSION
   ========================================================= */

.agent-commission-section {
    padding: 80px 0;
}

.agent-commission-card {
    background: #111;
    color: #fff;
    padding: 45px;
    border-radius: 24px;
}

.agent-commission-card .agent-section-heading {
    margin-bottom: 35px;
}

.agent-commission-card .agent-section-heading h2 {
    color: #fff;
}

.agent-commission-card .agent-section-heading p {
    color: #cfcfcf;
}

.agent-commission-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.agent-commission-steps > div {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
}

.agent-commission-steps strong {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f5a623;
    color: #111;
}

.agent-commission-steps span {
    color: #ddd;
    line-height: 1.6;
    font-size: 14px;
}


/* =========================================================
   EARNINGS
   ========================================================= */

.agent-earnings-section {
    padding: 80px 0;
    background: #f7f7f7;
}

.agent-earnings-card {
    background: #fff;
    border-radius: 24px;
    padding: 45px;
    border: 1px solid #e8e8e8;
}

.agent-earnings-content {
    max-width: 750px;
}

.agent-earnings-content h2 {
    font-size: clamp(28px, 4vw, 43px);
    line-height: 1.15;
    margin: 8px 0 15px;
}

.agent-earnings-content p {
    color: #666;
    line-height: 1.7;
}

.agent-earnings-calculation {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 35px;
}

.agent-earnings-calculation > div {
    background: #f7f7f7;
    padding: 22px;
    border-radius: 15px;
}

.agent-earnings-calculation span {
    display: block;
    color: #777;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 8px;
}

.agent-earnings-calculation strong {
    font-size: 24px;
}

.agent-earnings-total {
    background: #111 !important;
    color: #fff;
}

.agent-earnings-total span {
    color: #bbb;
}

.agent-earnings-total strong {
    color: #f5a623;
}

.agent-earnings-note {
    margin-top: 22px;
    padding: 15px 18px;
    background: #fff8e9;
    border-radius: 10px;
    color: #66552f;
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   IDEAL AGENT
   ========================================================= */

.agent-ideal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.agent-ideal-grid > div {
    padding: 25px;
    border: 1px solid #e7e7e7;
    border-radius: 17px;
}

.agent-ideal-grid > div:first-letter {
    font-size: 25px;
}

.agent-ideal-grid strong {
    display: block;
    margin: 15px 0 7px;
}

.agent-ideal-grid span {
    display: block;
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.agent-final-cta {
    text-align: center;
    padding: 90px 20px;
    background: #111;
    color: #fff;
}

.agent-final-cta .section-kicker {
    color: #f5a623;
}

.agent-final-cta h2 {
    font-size: clamp(30px, 5vw, 50px);
    max-width: 750px;
    margin: 10px auto 15px;
    line-height: 1.1;
}

.agent-final-cta p {
    color: #ccc;
    max-width: 600px;
    margin: 0 auto 30px;
    line-height: 1.7;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 850px) {

    .agent-role-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .agent-commission-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .agent-earnings-calculation {
        grid-template-columns: repeat(2, 1fr);
    }

    .agent-ideal-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .legal-page {
        padding: 45px 15px;
    }

    .legal-card {
        padding: 25px 20px;
        border-radius: 15px;
    }

    .legal-card h2 {
        font-size: 19px;
    }


    .agent-container {
        width: min(100% - 30px, 1120px);
    }

    .agent-hero {
        padding: 65px 0;
    }

    .agent-hero h1 {
        letter-spacing: -1px;
    }

    .agent-hero p {
        font-size: 16px;
    }

    .agent-section,
    .agent-benefits-section,
    .agent-commission-section,
    .agent-earnings-section {
        padding: 55px 0;
    }

    .agent-role-grid,
    .agent-benefits-grid,
    .agent-commission-steps,
    .agent-earnings-calculation,
    .agent-ideal-grid {
        grid-template-columns: 1fr;
    }

    .agent-commission-card,
    .agent-earnings-card {
        padding: 25px 20px;
        border-radius: 18px;
    }

    .agent-final-cta {
        padding: 65px 15px;
    }

}

/* =========================================================
   FOODDEY VENDOR MENU
   Sleek / Compact / Professional
   ========================================================= */


/* =========================================================
   MENU PAGE HEADER
   ========================================================= */

.vendor-dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 28px;
}

.vendor-dashboard-welcome h1 {
    margin: 5px 0 8px;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.5px;
}

.vendor-dashboard-welcome p {
    margin: 0;
    color: #777;
    font-size: 15px;
    line-height: 1.6;
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.vendor-dashboard-welcome .btn-primary,
.vendor-empty-state .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #111;
    color: #fff;
    text-decoration: none;
    padding: 12px 19px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid #111;
    transition: all .2s ease;
    white-space: nowrap;
}

.vendor-dashboard-welcome .btn-primary:hover,
.vendor-empty-state .btn-primary:hover {
    background: #f5a623;
    border-color: #f5a623;
    color: #111;
    transform: translateY(-1px);
}


/* =========================================================
   SUCCESS MESSAGE
   ========================================================= */

.agent-login-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 13px 16px;
    border: 1px solid #dcebdc;
    background: #f4fbf4;
    color: #28652d;
    border-radius: 11px;
    font-size: 14px;
}

.agent-login-notice > span {
    width: 27px;
    height: 27px;
    min-width: 27px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #28652d;
    color: #fff;
    font-weight: 800;
}


/* =========================================================
   MENU STATISTICS
   ========================================================= */

.vendor-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 28px;
}

.vendor-dashboard-stat {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 15px;
    padding: 20px;
    min-width: 0;
    box-shadow: 0 4px 18px rgba(0,0,0,.035);
}

.vendor-dashboard-stat > span {
    display: block;
    color: #888;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
    margin-bottom: 8px;
}

.vendor-dashboard-stat > strong {
    display: block;
    color: #111;
    font-size: 28px;
    line-height: 1.1;
    margin-bottom: 7px;
}

.vendor-dashboard-stat > small {
    display: block;
    color: #999;
    font-size: 12px;
}


/* =========================================================
   MENU SECTION
   ========================================================= */

.vendor-dashboard-section {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 18px;
    padding: 25px;
    box-shadow: 0 5px 22px rgba(0,0,0,.035);
}

.vendor-dashboard-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.vendor-dashboard-section-header h2 {
    margin: 5px 0 0;
    font-size: 22px;
    line-height: 1.2;
}

.vendor-view-all {
    color: #111;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.vendor-view-all:hover {
    color: #f5a623;
}


/* =========================================================
   MENU LIST
   ========================================================= */

.vendor-menu-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}


/* =========================================================
   CATEGORY HEADING
   ========================================================= */

.vendor-menu-category {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid #eeeeee;
    color: #777;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.vendor-menu-category:first-child {
    margin-top: 0;
}

.vendor-menu-category::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #eeeeee;
}


/* =========================================================
   FOOD ITEM
   ========================================================= */

.vendor-menu-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px auto;
    align-items: center;
    gap: 20px;
    padding: 18px 4px;
    border-bottom: 1px solid #eeeeee;
    transition: background .2s ease;
}

.vendor-menu-item:last-child {
    border-bottom: none;
}

.vendor-menu-item:hover {
    background: #fafafa;
}


/* =========================================================
   FOOD INFORMATION
   ========================================================= */

.vendor-menu-item-info {
    min-width: 0;
}

.vendor-menu-item-title {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.vendor-menu-item-title h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.35;
    color: #171717;
}

.vendor-menu-item-info p {
    margin: 6px 0 0;
    color: #777;
    font-size: 13px;
    line-height: 1.55;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* =========================================================
   AVAILABILITY STATUS
   ========================================================= */

.vendor-menu-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.vendor-menu-status-active {
    background: #eaf7ed;
    color: #28733a;
}

.vendor-menu-status-inactive {
    background: #f1f1f1;
    color: #777;
}


/* =========================================================
   PRICE
   ========================================================= */

.vendor-menu-item-price {
    text-align: right;
    min-width: 110px;
}

.vendor-menu-item-price span {
    display: block;
    color: #999;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .7px;
    margin-bottom: 4px;
}

.vendor-menu-item-price strong {
    display: block;
    color: #111;
    font-size: 16px;
    white-space: nowrap;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.vendor-menu-item-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}

.vendor-menu-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid #dedede;
    border-radius: 8px;
    background: #fff;
    color: #333;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    transition: all .2s ease;
    white-space: nowrap;
}

.vendor-menu-action:hover {
    border-color: #111;
    background: #111;
    color: #fff;
}

.vendor-menu-action-danger {
    color: #c43b3b;
    border-color: #f0d1d1;
    background: #fff8f8;
}

.vendor-menu-action-danger:hover {
    background: #c43b3b;
    border-color: #c43b3b;
    color: #fff;
}


/* =========================================================
   EMPTY MENU
   ========================================================= */

.vendor-empty-state {
    text-align: center;
    padding: 55px 20px;
    border: 1px dashed #dddddd;
    border-radius: 15px;
    background: #fafafa;
}

.vendor-empty-state > div:first-child {
    width: 55px;
    height: 55px;
    margin: 0 auto 15px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid #eeeeee;
    border-radius: 14px;
    font-size: 25px;
}

.vendor-empty-state h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.vendor-empty-state p {
    max-width: 480px;
    margin: 0 auto 20px;
    color: #777;
    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 850px) {

    .vendor-dashboard-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .vendor-menu-item {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 14px;
    }

    .vendor-menu-item-price {
        grid-column: 2;
        grid-row: 1;
    }

    .vendor-menu-item-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-top: 4px;
    }

}


@media (max-width: 600px) {

    .vendor-dashboard-welcome {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .vendor-dashboard-welcome h1 {
        font-size: 27px;
    }

    .vendor-dashboard-welcome p {
        font-size: 13px;
    }

    .vendor-dashboard-welcome > div:last-child {
        width: 100%;
    }

    .vendor-dashboard-welcome .btn-primary {
        width: 100%;
    }


    /* Statistics */

    .vendor-dashboard-stats {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .vendor-dashboard-stat {
        padding: 16px;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .vendor-dashboard-stat > span {
        grid-column: 1;
        margin: 0;
    }

    .vendor-dashboard-stat > strong {
        grid-column: 2;
        grid-row: 1 / span 2;
        font-size: 25px;
        margin: 0;
    }

    .vendor-dashboard-stat > small {
        grid-column: 1;
        margin-top: 4px;
    }


    /* Section */

    .vendor-dashboard-section {
        padding: 17px 14px;
        border-radius: 15px;
    }

    .vendor-dashboard-section-header {
        margin-bottom: 16px;
    }

    .vendor-dashboard-section-header h2 {
        font-size: 19px;
    }


    /* Food item */

    .vendor-menu-item {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 12px;
        padding: 16px 2px;
    }

    .vendor-menu-item-title h3 {
        font-size: 15px;
    }

    .vendor-menu-item-info p {
        font-size: 12px;
    }

    .vendor-menu-item-price {
        min-width: auto;
        text-align: right;
    }

    .vendor-menu-item-price strong {
        font-size: 15px;
    }

    .vendor-menu-item-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        width: 100%;
    }

    .vendor-menu-action {
        width: 100%;
        padding: 8px 5px;
        font-size: 10px;
    }


    /* Category */

    .vendor-menu-category {
        margin-top: 18px;
        font-size: 10px;
    }


    /* Empty state */

    .vendor-empty-state {
        padding: 40px 15px;
    }

}

/* ============================================================
   FOODDEY INFORMATION PAGES
   ABOUT / CONTACT / TERMS / PRIVACY
   ============================================================ */

.fd-info-page {
    width: 100%;
    min-height: calc(100vh - 80px);
    padding: 70px 20px 100px;
    background: #f7f8fa;
    box-sizing: border-box;
}

.fd-info-page *,
.fd-info-page *::before,
.fd-info-page *::after {
    box-sizing: border-box;
}


/* ============================================================
   MAIN CONTAINER
   ============================================================ */

.fd-info-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}


/* ============================================================
   HERO
   ============================================================ */

.fd-info-hero {
    width: 100%;
    max-width: 720px;
    margin: 0 auto 45px;
    text-align: center;
}

.fd-info-kicker {
    display: inline-block;
    margin-bottom: 12px;
    color: #ff6b00;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.fd-info-hero h1 {
    display: block;
    width: 100%;
    margin: 0 0 18px;
    padding: 0;
    color: #171717;
    font-size: clamp(36px, 6vw, 58px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1.8px;
}

.fd-info-hero p {
    display: block;
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    padding: 0;
    color: #6b7280;
    font-size: 17px;
    line-height: 1.75;
}


/* ============================================================
   CONTACT CARD
   ============================================================ */

.fd-contact-card {
    display: block;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 45px 40px;
    background: #ffffff;
    border: 1px solid #e7e9ed;
    border-radius: 22px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.06);
    text-align: center;
}

.fd-contact-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff1e7;
    border-radius: 18px;
    font-size: 28px;
}

.fd-contact-card .fd-info-kicker {
    margin-bottom: 8px;
}

.fd-contact-card h2 {
    display: block;
    width: 100%;
    margin: 0 0 14px;
    padding: 0;
    color: #171717;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
}

.fd-contact-card p {
    display: block;
    width: 100%;
    max-width: 550px;
    margin: 0 auto 25px;
    padding: 0;
    color: #6b7280;
    font-size: 15px;
    line-height: 1.7;
}


/* ============================================================
   EMAIL ADDRESS
   ============================================================ */

.fd-contact-email {
    display: block;
    width: 100%;
    max-width: 480px;
    margin: 0 auto 25px;
    padding: 17px 20px;
    background: #f8f9fb;
    border: 1px solid #e3e5e9;
    border-radius: 12px;
    color: #171717;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    word-break: break-word;
}


/* ============================================================
   EMAIL BUTTON
   ============================================================ */

.fd-contact-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 200px;
    min-height: 50px;
    margin: 0 !important;
    padding: 14px 25px !important;
    background: #ff6b00 !important;
    border: 0 !important;
    border-radius: 11px !important;
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    box-shadow: none;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.fd-contact-button:hover {
    background: #e85f00 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 107, 0, .20);
}


/* ============================================================
   SUPPORT NOTE
   ============================================================ */

.fd-contact-note {
    width: 100%;
    max-width: 680px;
    margin: 25px auto 0;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    background: transparent;
    text-align: center;
}

.fd-contact-note strong {
    display: inline;
    margin: 0;
    color: #333333;
    font-size: 14px;
}

.fd-contact-note span {
    display: inline;
    color: #7a7f87;
    font-size: 14px;
    line-height: 1.5;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .fd-info-page {
        padding: 45px 15px 80px;
    }

    .fd-info-hero {
        margin-bottom: 30px;
    }

    .fd-info-hero h1 {
        font-size: 38px;
        letter-spacing: -1px;
    }

    .fd-info-hero p {
        font-size: 15px;
        line-height: 1.65;
    }

    .fd-contact-card {
        padding: 32px 20px;
        border-radius: 18px;
    }

    .fd-contact-icon {
        width: 56px;
        height: 56px;
        border-radius: 15px;
        font-size: 24px;
    }

    .fd-contact-card h2 {
        font-size: 25px;
    }

    .fd-contact-card p {
        font-size: 14px;
    }

    .fd-contact-email {
        font-size: 14px;
        padding: 15px;
    }

    .fd-contact-button {
        width: 100% !important;
    }

    .fd-contact-note {
        padding: 15px 10px;
    }

}

/* ============================================================
   FOODDEY ABOUT PAGE
   ISOLATED STYLES
   ============================================================ */

.fd-about-page {
    width: 100%;
    min-height: calc(100vh - 80px);
    padding: 70px 20px 100px;
    background: #f7f8fa;
}

.fd-about-page *,
.fd-about-page *::before,
.fd-about-page *::after {
    box-sizing: border-box;
}


/* ============================================================
   CONTAINER
   ============================================================ */

.fd-about-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}


/* ============================================================
   HERO
   ============================================================ */

.fd-about-hero {
    width: 100%;
    max-width: 750px;
    margin: 0 auto 50px;
    text-align: center;
}

.fd-about-kicker {
    display: inline-block;
    margin-bottom: 12px;
    color: #ff6b00;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.fd-about-hero h1 {
    display: block;
    width: 100%;
    margin: 0 0 20px;
    padding: 0;
    color: #171717;
    font-size: clamp(38px, 6vw, 60px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -2px;
}

.fd-about-hero h1 span {
    display: block;
    color: #ff6b00;
}

.fd-about-hero p {
    display: block;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    color: #6b7280;
    font-size: 17px;
    line-height: 1.75;
}


/* ============================================================
   INFORMATION CARDS
   ============================================================ */

.fd-about-card {
    width: 100%;
    margin-bottom: 22px;
    padding: 35px;
    display: flex;
    align-items: flex-start;
    gap: 28px;
    background: #ffffff;
    border: 1px solid #e7e9ed;
    border-radius: 20px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, .045);
}

.fd-about-card-reverse {
    flex-direction: row-reverse;
}

.fd-about-card-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff1e7;
    border-radius: 18px;
    font-size: 28px;
}

.fd-about-card-content {
    flex: 1;
    min-width: 0;
}

.fd-about-card-content .fd-about-kicker {
    margin-bottom: 7px;
}

.fd-about-card-content h2 {
    display: block;
    width: 100%;
    margin: 0 0 14px;
    padding: 0;
    color: #171717;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.2;
}

.fd-about-card-content p {
    display: block;
    width: 100%;
    margin: 0 0 13px;
    padding: 0;
    color: #6b7280;
    font-size: 15px;
    line-height: 1.75;
}

.fd-about-card-content p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   VENDOR CTA
   ============================================================ */

.fd-about-vendor-cta {
    width: 100%;
    margin: 35px 0 22px;
    padding: 40px;
    display: flex;
    align-items: center;
    gap: 28px;
    background: #171717;
    border-radius: 22px;
    color: #ffffff;
}

.fd-about-vendor-icon {
    width: 68px;
    height: 68px;
    min-width: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff6b00;
    border-radius: 18px;
    font-size: 30px;
}

.fd-about-vendor-content {
    flex: 1;
    min-width: 0;
}

.fd-about-vendor-content .fd-about-kicker {
    color: #ff9b55;
}

.fd-about-vendor-content h2 {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    padding: 0;
    color: #ffffff;
    font-size: 29px;
    font-weight: 800;
    line-height: 1.2;
}

.fd-about-vendor-content > p {
    display: block;
    width: 100%;
    max-width: 650px;
    margin: 0 0 15px;
    color: #c9c9c9;
    font-size: 15px;
    line-height: 1.7;
}


/* ============================================================
   PRICE
   ============================================================ */

.fd-about-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 20px 0 2px;
}

.fd-about-price strong {
    color: #ffffff;
    font-size: 34px;
    font-weight: 800;
}

.fd-about-price span {
    color: #bdbdbd;
    font-size: 14px;
}

.fd-about-price-note {
    margin-bottom: 22px !important;
    font-size: 13px !important;
    color: #a9a9a9 !important;
}


/* ============================================================
   VENDOR BUTTON
   ============================================================ */

.fd-about-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-height: 48px;
    padding: 13px 22px !important;
    background: #ff6b00 !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: .2s ease;
}

.fd-about-button:hover {
    background: #e85f00 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}


/* ============================================================
   AGENT CARD
   ============================================================ */

.fd-about-agent-card {
    width: 100%;
    margin: 22px 0;
    padding: 30px 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    background: #ffffff;
    border: 1px solid #e7e9ed;
    border-radius: 20px;
}

.fd-about-agent-card > div {
    min-width: 0;
}

.fd-about-agent-card h2 {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    color: #171717;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
}

.fd-about-agent-card p {
    display: block;
    width: 100%;
    max-width: 600px;
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.7;
}

.fd-about-agent-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 48px;
    padding: 12px 20px !important;
    background: #ffffff !important;
    border: 1px solid #ff6b00 !important;
    border-radius: 10px !important;
    color: #ff6b00 !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
}

.fd-about-agent-button:hover {
    background: #fff1e7 !important;
    color: #e85f00 !important;
}


/* ============================================================
   CLOSING
   ============================================================ */

.fd-about-closing {
    width: 100%;
    padding: 45px 20px 0;
    text-align: center;
}

.fd-about-closing h2 {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    color: #171717;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.25;
}

.fd-about-closing p {
    display: block;
    width: 100%;
    margin: 0;
    color: #7a7f87;
    font-size: 14px;
    line-height: 1.6;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .fd-about-page {
        padding: 45px 15px 80px;
    }

    .fd-about-hero {
        margin-bottom: 32px;
    }

    .fd-about-hero h1 {
        font-size: 39px;
        letter-spacing: -1.2px;
    }

    .fd-about-hero p {
        font-size: 15px;
    }


    .fd-about-card,
    .fd-about-card-reverse {
        display: block;
        padding: 27px 20px;
        border-radius: 17px;
    }

    .fd-about-card-icon {
        margin-bottom: 20px;
    }

    .fd-about-card-content h2 {
        font-size: 24px;
    }

    .fd-about-card-content p {
        font-size: 14px;
    }


    .fd-about-vendor-cta {
        display: block;
        padding: 30px 20px;
        border-radius: 18px;
    }

    .fd-about-vendor-icon {
        margin-bottom: 20px;
    }

    .fd-about-vendor-content h2 {
        font-size: 25px;
    }

    .fd-about-price strong {
        font-size: 30px;
    }

    .fd-about-button {
        width: 100% !important;
    }


    .fd-about-agent-card {
        display: block;
        padding: 27px 20px;
        border-radius: 17px;
    }

    .fd-about-agent-card h2 {
        font-size: 23px;
    }

    .fd-about-agent-button {
        width: 100%;
        margin-top: 20px;
    }


    .fd-about-closing {
        padding-top: 30px;
    }

    .fd-about-closing h2 {
        font-size: 22px;
    }

}