:root {
    --vp-primary: #4f46e5;
    --vp-primary-dark: #312e81;
    --vp-text: #172033;
    --vp-muted: #667085;
    --vp-border: #e5e7eb;
    --vp-bg: #f5f7fb;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--vp-text);
    font-family: Arial, Helvetica, sans-serif;
}

.vendor-login-body,
.vendor-panel-body {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at top right,
            rgba(79, 70, 229, 0.12),
            transparent 31%
        ),
        var(--vp-bg);
}

.vendor-login-wrapper {
    min-height: 100vh;
    display: grid;
    grid-template-columns:
        minmax(330px, 0.9fr)
        minmax(0, 1.1fr);
}

.vendor-login-brand {
    display: flex;
    align-items: center;
    padding: 55px;
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            #111827,
            #312e81 55%,
            #4f46e5
        );
}

.vendor-login-brand > div {
    max-width: 560px;
}

.vendor-panel-badge {
    display: inline-flex;
    padding: 6px 11px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border: 1px solid currentColor;
    border-radius: 999px;
}

.vendor-login-brand h1 {
    margin: 20px 0 15px;
    font-size: clamp(35px, 5vw, 59px);
    font-weight: 900;
    line-height: 1.12;
}

.vendor-login-brand p {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    line-height: 1.8;
}

.vendor-login-feature-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 11px;
    margin-top: 30px;
}

.vendor-login-feature-list div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.09);
}

.vendor-login-form-section {
    display: grid;
    place-items: center;
    padding: 30px;
}

.vendor-login-card {
    width: 100%;
    max-width: 510px;
    padding: 30px;
    border: 1px solid var(--vp-border);
    border-radius: 23px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(17, 24, 39, 0.09);
}

.vendor-login-card-header {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 24px;
    padding-bottom: 19px;
    border-bottom: 1px solid #eef0f3;
}

.vendor-login-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    color: var(--vp-primary);
    font-size: 22px;
    border-radius: 15px;
    background: #eef2ff;
}

.vendor-login-card-header h2 {
    margin: 0 0 5px;
    font-size: 24px;
    font-weight: 900;
}

.vendor-login-card-header p {
    margin: 0;
    color: var(--vp-muted);
    font-size: 11px;
}

.vendor-login-alert {
    display: flex;
    gap: 9px;
    font-size: 12px;
    border-radius: 12px;
}

.vendor-login-label {
    display: block;
    margin-bottom: 7px;
    color: #344054;
    font-size: 11px;
    font-weight: 800;
}

.vendor-login-input {
    position: relative;
    display: flex;
    align-items: center;
    height: 46px;
    border: 1px solid #dfe3ea;
    border-radius: 11px;
    background: #ffffff;
}

.vendor-login-input:focus-within {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.10);
}

.vendor-login-input > i {
    margin-left: 14px;
    color: #98a2b3;
}

.vendor-login-input input {
    width: 100%;
    height: 100%;
    padding: 0 12px;
    font-size: 12px;
    border: none;
    outline: none;
    background: transparent;
}

.vendor-login-input button {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    color: #667085;
    border: none;
    background: transparent;
}

.vendor-login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 15px 0;
    color: #667085;
    font-size: 11px;
}

.vendor-login-submit {
    width: 100%;
    min-height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    border: none;
    border-radius: 11px;
    background: linear-gradient(
        135deg,
        var(--vp-primary-dark),
        var(--vp-primary)
    );
}

.vendor-login-footer {
    margin-top: 20px;
    padding-top: 18px;
    color: var(--vp-muted);
    font-size: 11px;
    text-align: center;
    border-top: 1px solid #eef0f3;
}

.vendor-login-footer a {
    color: var(--vp-primary);
    font-weight: 800;
    text-decoration: none;
}

.vendor-panel-header {
    min-height: 75px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 30px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #111827,
        #312e81
    );
}

.vendor-panel-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #ffffff;
    text-decoration: none;
}

.vendor-panel-brand > div {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    font-size: 19px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.12);
}

.vendor-panel-brand strong,
.vendor-panel-brand small,
.vendor-panel-user strong,
.vendor-panel-user small {
    display: block;
}

.vendor-panel-brand strong {
    font-size: 14px;
}

.vendor-panel-brand small,
.vendor-panel-user small {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.67);
    font-size: 9px;
}

.vendor-panel-user {
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: right;
}

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

.vendor-panel-user button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.09);
}

.vendor-panel-main {
    width: min(1450px, calc(100% - 32px));
    margin: 0 auto;
    padding: 27px 0 45px;
}

.vendor-dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 28px;
    color: #ffffff;
    border-radius: 21px;
    background: linear-gradient(
        135deg,
        #111827,
        #312e81 52%,
        #4f46e5
    );
}

.vendor-dashboard-hero h1 {
    margin: 14px 0 8px;
    font-size: 31px;
    font-weight: 900;
}

.vendor-dashboard-hero p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
}

.vendor-dashboard-status {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 190px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.10);
}

.vendor-dashboard-status > span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 5px rgba(74, 222, 128, 0.14);
}

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

.vendor-dashboard-status strong {
    font-size: 11px;
}

.vendor-dashboard-status small {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 9px;
}

.vendor-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.vendor-dashboard-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 120px;
    padding: 19px;
    border: 1px solid var(--vp-border);
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 11px 28px rgba(17, 24, 39, 0.05);
}

.vendor-dashboard-card span,
.vendor-dashboard-card strong {
    display: block;
}

.vendor-dashboard-card span {
    margin-bottom: 8px;
    color: var(--vp-muted);
    font-size: 11px;
    font-weight: 800;
}

.vendor-dashboard-card strong {
    font-size: 26px;
}

.vendor-dashboard-card > i {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: var(--vp-primary);
    font-size: 20px;
    border-radius: 13px;
    background: #eef2ff;
}

.vendor-dashboard-section {
    margin-top: 27px;
}

.vendor-dashboard-section-title span {
    color: var(--vp-primary);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.vendor-dashboard-section-title h2 {
    margin: 4px 0 14px;
    font-size: 20px;
    font-weight: 900;
}

.vendor-dashboard-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.vendor-dashboard-action {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 88px;
    padding: 16px;
    border: 1px solid var(--vp-border);
    border-radius: 15px;
    background: #ffffff;
}

.vendor-dashboard-action > i {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    color: var(--vp-primary);
    font-size: 18px;
    border-radius: 12px;
    background: #eef2ff;
}

.vendor-dashboard-action strong,
.vendor-dashboard-action span {
    display: block;
}

.vendor-dashboard-action strong {
    margin-bottom: 4px;
    font-size: 12px;
}

.vendor-dashboard-action span {
    color: var(--vp-muted);
    font-size: 10px;
}

.vendor-dashboard-action.disabled {
    opacity: 0.65;
}

@media (max-width: 991.98px) {
    .vendor-login-wrapper {
        grid-template-columns: 1fr;
    }

    .vendor-login-brand {
        min-height: 410px;
    }

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

@media (max-width: 575.98px) {
    .vendor-login-brand,
    .vendor-login-form-section {
        padding: 22px;
    }

    .vendor-login-feature-list,
    .vendor-dashboard-grid,
    .vendor-dashboard-actions {
        grid-template-columns: 1fr;
    }

    .vendor-login-card {
        padding: 21px;
    }

    .vendor-panel-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 15px;
    }

    .vendor-panel-user {
        width: 100%;
        justify-content: space-between;
        text-align: left;
    }

    .vendor-dashboard-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .vendor-dashboard-status {
        width: 100%;
    }
}

/* ==============================================================
   VENDOR NAVIGATION
============================================================== */

.vendor-panel-navigation {
    display: flex;
    gap: 7px;
    padding: 9px 30px;
    overflow-x: auto;
    border-bottom: 1px solid var(--vp-border);
    background: #ffffff;
}

.vendor-panel-navigation a,
.vendor-panel-navigation span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 9px 13px;
    color: #667085;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    border-radius: 9px;
}

.vendor-panel-navigation a:hover,
.vendor-panel-navigation a.active {
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--vp-primary-dark),
        var(--vp-primary)
    );
}

.vendor-panel-navigation span.disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.vendor-dashboard-action {
    color: var(--vp-text);
    text-decoration: none;
}

/* ==============================================================
   GLOBAL CATALOG
============================================================== */

.vendor-products-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 26px;
    color: #ffffff;
    border-radius: 20px;
    background: linear-gradient(
        135deg,
        #111827,
        #312e81 52%,
        #4f46e5
    );
}

.vendor-products-header h1 {
    margin: 14px 0 7px;
    font-size: 30px;
    font-weight: 900;
}

.vendor-products-header p {
    max-width: 750px;
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    line-height: 1.7;
}

.vendor-catalog-header-status {
    min-width: 240px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.10);
}

.vendor-catalog-header-status > i {
    font-size: 22px;
}

.vendor-catalog-header-status strong,
.vendor-catalog-header-status small {
    display: block;
}

.vendor-catalog-header-status strong {
    font-size: 11px;
}

.vendor-catalog-header-status small {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 9px;
}

.vendor-product-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 13px;
    margin-top: 19px;
}

.vendor-product-summary-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 103px;
    padding: 17px;
    border: 1px solid var(--vp-border);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(17, 24, 39, 0.05);
}

.vendor-product-summary-card span,
.vendor-product-summary-card strong {
    display: block;
}

.vendor-product-summary-card span {
    margin-bottom: 7px;
    color: var(--vp-muted);
    font-size: 10px;
    font-weight: 800;
}

.vendor-product-summary-card strong {
    font-size: 24px;
}

.vendor-product-summary-card > i {
    width: 41px;
    height: 41px;
    display: grid;
    place-items: center;
    color: var(--vp-primary);
    font-size: 18px;
    border-radius: 12px;
    background: #eef2ff;
}

.vendor-product-filter-card {
    margin-top: 19px;
    padding: 18px;
    border: 1px solid var(--vp-border);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(17, 24, 39, 0.04);
}

.vendor-product-label {
    display: block;
    margin-bottom: 7px;
    color: #344054;
    font-size: 10px;
    font-weight: 800;
}

.vendor-product-search {
    position: relative;
}

.vendor-product-search i {
    position: absolute;
    top: 50%;
    left: 13px;
    color: #98a2b3;
    transform: translateY(-50%);
}

.vendor-product-search input,
.vendor-product-control {
    width: 100%;
    height: 43px;
    color: #344054;
    font-size: 11px;
    border: 1px solid #dfe3ea;
    border-radius: 10px;
    background: #ffffff;
}

.vendor-product-search input {
    padding: 0 13px 0 38px;
    outline: none;
}

.vendor-product-search input:focus,
.vendor-product-control:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.10);
}

.vendor-product-filter-actions {
    display: flex;
    gap: 8px;
}

.vendor-product-filter-actions button,
.vendor-product-filter-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 39px;
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    border-radius: 9px;
}

.vendor-product-filter-actions button {
    color: #ffffff;
    border: none;
    background: linear-gradient(
        135deg,
        var(--vp-primary-dark),
        var(--vp-primary)
    );
}

.vendor-product-filter-actions a {
    color: #475467;
    border: 1px solid #dfe3ea;
    background: #ffffff;
}

.vendor-catalog-section {
    margin-top: 24px;
}

.vendor-products-result-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 13px;
}

.vendor-products-result-heading span {
    display: block;
    margin-bottom: 4px;
    color: var(--vp-primary);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.vendor-products-result-heading h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 900;
}

.vendor-products-result-heading small {
    color: var(--vp-muted);
    font-size: 10px;
}

.vendor-catalog-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.vendor-catalog-card {
    overflow: hidden;
    border: 1px solid var(--vp-border);
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 11px 28px rgba(17, 24, 39, 0.05);
}

.vendor-catalog-image {
    position: relative;
    height: 210px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--vp-primary);
    font-size: 40px;
    background: #eef2ff;
}

.vendor-catalog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vendor-catalog-access-badge {
    position: absolute;
    top: 11px;
    right: 11px;
    padding: 6px 9px;
    font-size: 9px;
    font-weight: 900;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.10);
}

.access-not_requested {
    color: #475467;
    background: #ffffff;
}

.access-pending {
    color: #b45309;
    background: #fef3c7;
}

.access-reviewing {
    color: #1d4ed8;
    background: #dbeafe;
}

.access-approved {
    color: #047857;
    background: #d1fae5;
}

.access-rejected,
.access-suspended {
    color: #b91c1c;
    background: #fee2e2;
}

.vendor-catalog-content {
    padding: 16px;
}

.vendor-catalog-code {
    margin-bottom: 6px;
    color: #98a2b3;
    font-size: 9px;
    font-weight: 800;
}

.vendor-catalog-content h3 {
    min-height: 39px;
    margin: 0 0 7px;
    color: var(--vp-text);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.4;
}

.vendor-catalog-content > p {
    min-height: 48px;
    margin: 0 0 13px;
    color: var(--vp-muted);
    font-size: 10px;
    line-height: 1.6;
}

.vendor-catalog-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 13px;
}

.vendor-catalog-meta > div {
    padding: 10px;
    border-radius: 10px;
    background: #f8fafc;
}

.vendor-catalog-meta span,
.vendor-catalog-meta strong {
    display: block;
}

.vendor-catalog-meta span {
    margin-bottom: 4px;
    color: #98a2b3;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.vendor-catalog-meta strong {
    color: #344054;
    font-size: 11px;
}

.vendor-product-request-form textarea {
    width: 100%;
    padding: 10px;
    resize: vertical;
    color: #344054;
    font-size: 10px;
    border: 1px solid #dfe3ea;
    border-radius: 10px;
    outline: none;
}

.vendor-product-request-form textarea:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.10);
}

.vendor-product-request-form button {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 8px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
    border: none;
    border-radius: 10px;
    background: linear-gradient(
        135deg,
        var(--vp-primary-dark),
        var(--vp-primary)
    );
}

.vendor-approved-access-box,
.vendor-request-waiting,
.vendor-request-rejected,
.vendor-request-suspended {
    padding: 11px;
    border-radius: 11px;
}

.vendor-approved-access-box {
    color: #065f46;
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
}

.vendor-approved-access-box > div:first-child {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 900;
}

.vendor-approved-access-box > small {
    display: block;
    margin-top: 6px;
    font-size: 9px;
}

.vendor-selling-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 9px;
}

.vendor-selling-tools span {
    padding: 5px 7px;
    color: #98a2b3;
    font-size: 8px;
    font-weight: 800;
    border-radius: 7px;
    background: #ffffff;
}

.vendor-selling-tools span.enabled {
    color: #047857;
    background: #d1fae5;
}

.vendor-request-waiting,
.vendor-request-rejected,
.vendor-request-suspended {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 9px;
}

.vendor-request-waiting {
    color: #92400e;
    border: 1px solid #fde68a;
    background: #fffbeb;
}

.vendor-request-rejected,
.vendor-request-suspended {
    color: #991b1b;
    border: 1px solid #fecaca;
    background: #fef2f2;
}

.vendor-request-waiting strong,
.vendor-request-waiting span,
.vendor-request-rejected strong,
.vendor-request-rejected span,
.vendor-request-suspended strong,
.vendor-request-suspended span {
    display: block;
}

.vendor-request-waiting strong,
.vendor-request-rejected strong,
.vendor-request-suspended strong {
    margin-bottom: 3px;
    font-size: 10px;
}

.vendor-request-waiting span,
.vendor-request-rejected span,
.vendor-request-suspended span {
    font-size: 9px;
    line-height: 1.5;
}

.vendor-catalog-empty {
    grid-column: 1 / -1;
    padding: 65px 20px;
    text-align: center;
    border: 1px dashed #cbd5e1;
    border-radius: 17px;
    background: #ffffff;
}

.vendor-catalog-empty i {
    font-size: 38px;
    color: var(--vp-primary);
}

.vendor-catalog-empty h3 {
    margin: 13px 0 6px;
    font-size: 17px;
    font-weight: 900;
}

.vendor-catalog-empty p {
    margin: 0;
    color: var(--vp-muted);
    font-size: 11px;
}

.vendor-product-pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 17px;
}

@media (max-width: 1199.98px) {
    .vendor-product-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

@media (max-width: 991.98px) {
    .vendor-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .vendor-products-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .vendor-catalog-header-status {
        width: 100%;
    }

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

@media (max-width: 575.98px) {
    .vendor-panel-navigation {
        padding-right: 15px;
        padding-left: 15px;
    }

    .vendor-products-header {
        padding: 20px;
    }

    .vendor-catalog-grid,
    .vendor-product-summary-grid {
        grid-template-columns: 1fr;
    }

    .vendor-catalog-image {
        height: 245px;
    }
}


/* ==============================================================
   VENDOR DASHBOARD SHELL V2
============================================================== */

.vendor-dashboard-body {
    margin: 0;
    color: #101828;
    background: #f3f6fb;
}

.vendor-dashboard-shell {
    min-height: 100vh;
}

.vendor-dashboard-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    width: 245px;
    display: flex;
    flex-direction: column;
    color: #ffffff;
    background:
        linear-gradient(
            180deg,
            #101528 0%,
            #151b34 100%
        );
}

.vendor-sidebar-brand {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 17px;
    border-bottom: 1px solid
        rgba(255, 255, 255, 0.08);
}

.vendor-sidebar-brand > a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #ffffff;
    text-decoration: none;
}

.vendor-sidebar-brand-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: grid;
    place-items: center;
    font-size: 16px;
    border-radius: 11px;
    background:
        linear-gradient(
            135deg,
            #4f46e5,
            #7c3aed
        );
}

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

.vendor-sidebar-brand strong {
    max-width: 145px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vendor-sidebar-brand small {
    margin-top: 2px;
    color: #98a2b3;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
}

.vendor-sidebar-close {
    display: none;
    color: #ffffff;
    border: 0;
    background: transparent;
}

.vendor-sidebar-store-card {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px;
    padding: 12px;
    border: 1px solid
        rgba(255, 255, 255, 0.08);
    border-radius: 13px;
    background:
        rgba(255, 255, 255, 0.045);
}

.vendor-sidebar-store-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 900;
    border-radius: 10px;
    background: #4f46e5;
}

.vendor-sidebar-store-card strong,
.vendor-sidebar-store-card span,
.vendor-sidebar-store-card small {
    display: block;
}

.vendor-sidebar-store-card strong {
    max-width: 140px;
    overflow: hidden;
    font-size: 10px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vendor-sidebar-store-card span {
    margin-top: 2px;
    color: #a5b4fc;
    font-size: 8px;
}

.vendor-sidebar-store-card small {
    margin-top: 4px;
    color: #98a2b3;
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
}

.vendor-sidebar-navigation {
    flex: 1;
    overflow-y: auto;
    padding: 2px 11px 16px;
}

.vendor-sidebar-menu-label {
    display: block;
    padding: 10px 9px 7px;
    color: #667085;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vendor-sidebar-menu-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 39px;
    margin-bottom: 3px;
    padding: 8px 11px;
    color: #cbd5e1;
    font-size: 9px;
    font-weight: 750;
    border-radius: 9px;
    text-decoration: none;
    transition: 0.2s ease;
}

.vendor-sidebar-menu-item > i {
    width: 17px;
    color: #818cf8;
    font-size: 13px;
    text-align: center;
}

.vendor-sidebar-menu-item > small {
    margin-left: auto;
    color: #667085;
    font-size: 7px;
}

.vendor-sidebar-menu-item:hover {
    color: #ffffff;
    background:
        rgba(255, 255, 255, 0.06);
}

.vendor-sidebar-menu-item.active {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #4f46e5,
            #6366f1
        );
}

.vendor-sidebar-menu-item.active > i {
    color: #ffffff;
}

.vendor-sidebar-menu-item.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.vendor-sidebar-footer {
    padding: 13px;
    border-top: 1px solid
        rgba(255, 255, 255, 0.08);
}

.vendor-sidebar-footer > div {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 9px;
    color: #a5b4fc;
    border-radius: 9px;
    background:
        rgba(255, 255, 255, 0.045);
}

.vendor-sidebar-footer strong,
.vendor-sidebar-footer small {
    display: block;
}

.vendor-sidebar-footer strong {
    color: #ffffff;
    font-size: 8px;
}

.vendor-sidebar-footer small {
    margin-top: 2px;
    color: #98a2b3;
    font-size: 7px;
}

.vendor-sidebar-footer form button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px;
    color: #fecaca;
    font-size: 9px;
    font-weight: 800;
    border: 1px solid
        rgba(239, 68, 68, 0.3);
    border-radius: 9px;
    background:
        rgba(239, 68, 68, 0.08);
}

.vendor-dashboard-content {
    min-height: 100vh;
    margin-left: 245px;
}

.vendor-dashboard-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 22px;
    border-bottom: 1px solid #e4e7ec;
    background:
        rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
}

.vendor-header-left {
    display: flex;
    align-items: center;
    gap: 11px;
}

.vendor-header-left span {
    display: block;
    color: #667085;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.vendor-header-left h1 {
    margin: 3px 0 0;
    color: #101828;
    font-size: 18px;
    font-weight: 900;
}

.vendor-mobile-menu-button {
    display: none;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #344054;
    border: 1px solid #e4e7ec;
    border-radius: 9px;
    background: #ffffff;
}

.vendor-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vendor-header-action-button {
    position: relative;
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    color: #475467;
    border: 1px solid #e4e7ec;
    border-radius: 9px;
    background: #ffffff;
    text-decoration: none;
}

.vendor-header-notification-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 6px;
    height: 6px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    background: #ef4444;
}

.vendor-header-user {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-left: 3px;
    padding: 5px 9px 5px 6px;
    border: 1px solid #e4e7ec;
    border-radius: 11px;
    background: #ffffff;
}

.vendor-header-user-avatar {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
    border-radius: 9px;
    background: #4f46e5;
}

.vendor-header-user strong,
.vendor-header-user small {
    display: block;
}

.vendor-header-user strong {
    max-width: 120px;
    overflow: hidden;
    color: #344054;
    font-size: 9px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vendor-header-user small {
    margin-top: 2px;
    color: #98a2b3;
    font-size: 7px;
    font-weight: 750;
}

.vendor-header-user > i {
    color: #98a2b3;
    font-size: 8px;
}

.vendor-dashboard-main {
    padding: 22px;
}

.vendor-panel-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 9px;
    border-radius: 10px;
}

.vendor-impersonation-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 10px 22px;
    color: #7c2d12;
    border-bottom: 1px solid #fed7aa;
    background: #fff7ed;
}

.vendor-impersonation-banner > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vendor-impersonation-banner strong {
    margin-right: 5px;
}

.vendor-impersonation-banner span {
    font-size: 8px;
}

.vendor-dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 27px;
    color: #ffffff;
    border-radius: 17px;
    background:
        linear-gradient(
            135deg,
            #171d38 0%,
            #4f46e5 100%
        );
}

.vendor-dashboard-welcome-badge {
    display: inline-flex;
    padding: 5px 9px;
    font-size: 7px;
    font-weight: 900;
    border: 1px solid
        rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    text-transform: uppercase;
}

.vendor-dashboard-welcome h2 {
    margin: 10px 0 5px;
    font-size: 24px;
    font-weight: 900;
}

.vendor-dashboard-welcome p {
    max-width: 650px;
    margin: 0;
    color: #dbeafe;
    font-size: 9px;
    line-height: 1.7;
}

.vendor-dashboard-live-status {
    min-width: 160px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px;
    border: 1px solid
        rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background:
        rgba(255, 255, 255, 0.09);
}

.vendor-dashboard-live-status > span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow:
        0 0 0 5px
        rgba(34, 197, 94, 0.16);
}

.vendor-dashboard-live-status strong,
.vendor-dashboard-live-status small {
    display: block;
}

.vendor-dashboard-live-status strong {
    font-size: 9px;
}

.vendor-dashboard-live-status small {
    margin-top: 3px;
    color: #c7d2fe;
    font-size: 7px;
}

.vendor-dashboard-stat-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 13px;
    margin-top: 17px;
}

.vendor-dashboard-stat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 105px;
    padding: 17px;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    background: #ffffff;
    box-shadow:
        0 8px 25px
        rgba(16, 24, 40, 0.04);
}

.vendor-dashboard-stat-card span,
.vendor-dashboard-stat-card strong {
    display: block;
}

.vendor-dashboard-stat-card span {
    color: #667085;
    font-size: 8px;
    font-weight: 800;
}

.vendor-dashboard-stat-card strong {
    margin-top: 8px;
    color: #101828;
    font-size: 21px;
    font-weight: 900;
}

.vendor-dashboard-stat-card > i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #4f46e5;
    font-size: 16px;
    border-radius: 12px;
    background: #eef2ff;
}

.vendor-dashboard-content-section {
    margin-top: 23px;
}

.vendor-dashboard-section-heading span {
    display: block;
    color: #4f46e5;
    font-size: 7px;
    font-weight: 900;
    text-transform: uppercase;
}

.vendor-dashboard-section-heading h2 {
    margin: 4px 0 0;
    font-size: 17px;
    font-weight: 900;
}

.vendor-dashboard-quick-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 13px;
}

.vendor-dashboard-quick-card {
    display: grid;
    grid-template-columns:
        38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 80px;
    padding: 14px;
    color: #344054;
    border: 1px solid #e4e7ec;
    border-radius: 13px;
    background: #ffffff;
    text-decoration: none;
    transition: 0.2s ease;
}

.vendor-dashboard-quick-card:hover {
    color: #344054;
    border-color: #c7d2fe;
    transform: translateY(-2px);
    box-shadow:
        0 10px 25px
        rgba(79, 70, 229, 0.08);
}

.vendor-dashboard-quick-card > i:first-child {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #4f46e5;
    font-size: 14px;
    border-radius: 11px;
    background: #eef2ff;
}

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

.vendor-dashboard-quick-card strong {
    font-size: 9px;
    font-weight: 900;
}

.vendor-dashboard-quick-card span {
    margin-top: 4px;
    color: #98a2b3;
    font-size: 7px;
    line-height: 1.5;
}

.vendor-dashboard-quick-card > i:last-child {
    color: #98a2b3;
    font-size: 9px;
}

.vendor-dashboard-quick-card.disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.vendor-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 1030;
    display: none;
    background:
        rgba(15, 23, 42, 0.55);
}

.vendor-sidebar-overlay.active {
    display: block;
}

@media (max-width: 1199.98px) {
    .vendor-dashboard-stat-grid,
    .vendor-dashboard-quick-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .vendor-dashboard-sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .vendor-dashboard-sidebar.open {
        transform: translateX(0);
    }

    .vendor-sidebar-close,
    .vendor-mobile-menu-button {
        display: grid;
    }

    .vendor-dashboard-content {
        margin-left: 0;
    }

    .vendor-sidebar-open {
        overflow: hidden;
    }
}

@media (max-width: 767.98px) {
    .vendor-dashboard-header {
        min-height: 67px;
        padding: 10px 14px;
    }

    .vendor-dashboard-main {
        padding: 14px;
    }

    .vendor-header-action-button {
        display: none;
    }

    .vendor-header-user > div:not(
        .vendor-header-user-avatar
    ),
    .vendor-header-user > i {
        display: none;
    }

    .vendor-dashboard-welcome {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }

    .vendor-dashboard-live-status {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .vendor-dashboard-stat-grid,
    .vendor-dashboard-quick-grid {
        grid-template-columns: 1fr;
    }

    .vendor-dashboard-welcome h2 {
        font-size: 20px;
    }
}

/* ==============================================================
   ADMIN IMPERSONATION
============================================================== */

.vendor-impersonation-banner form {
    margin: 0;
}

.vendor-impersonation-banner form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 11px;
    color: #ffffff;
    font-size: 8px;
    font-weight: 900;
    border: 0;
    border-radius: 8px;
    background: #ea580c;
}

.vendor-impersonation-banner form button:hover {
    background: #c2410c;
}

@media (max-width: 767.98px) {
    .vendor-impersonation-banner {
        align-items: flex-start;
        flex-direction: column;
        padding: 10px 14px;
    }

    .vendor-impersonation-banner form,
    .vendor-impersonation-banner form button {
        width: 100%;
    }
}

/* ==============================================================
   PRODUCT COMMERCE
============================================================== */

.vendor-product-header-button,
.vendor-product-primary-button,
.vendor-product-submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 14px;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    border: 0;
    border-radius: 9px;
    background: #4f46e5;
    text-decoration: none;
}

.vendor-product-secondary-button {
    display: inline-flex;
    padding: 10px 14px;
    color: #344054;
    font-size: 9px;
    font-weight: 850;
    border: 1px solid #d0d5dd;
    border-radius: 9px;
    background: #fff;
    text-decoration: none;
}

.vendor-product-filter-card,
.vendor-product-form-card,
.vendor-my-products-section {
    margin-top: 17px;
    padding: 17px;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    background: #fff;
}

.vendor-catalog-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.vendor-catalog-card {
    overflow: hidden;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    background: #fff;
}

.vendor-catalog-image {
    position: relative;
    height: 185px;
    display: grid;
    place-items: center;
    background: #f8fafc;
}

.vendor-catalog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vendor-product-owner-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 8px;
    color: #fff;
    font-size: 7px;
    font-weight: 900;
    border-radius: 999px;
}

.vendor-product-owner-badge.platform {
    background: #4f46e5;
}

.vendor-product-owner-badge.vendor {
    background: #059669;
}

.vendor-catalog-content {
    padding: 15px;
}

.vendor-catalog-content h3 {
    margin: 7px 0;
    font-size: 13px;
    font-weight: 900;
}

.vendor-catalog-content p {
    min-height: 42px;
    color: #667085;
    font-size: 8px;
    line-height: 1.6;
}

.vendor-catalog-meta {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0;
}

.vendor-catalog-meta > div {
    padding: 10px;
    border-radius: 9px;
    background: #f8fafc;
}

.vendor-catalog-meta span,
.vendor-catalog-meta strong {
    display: block;
}

.vendor-catalog-meta span {
    color: #667085;
    font-size: 7px;
}

.vendor-catalog-meta strong {
    margin-top: 4px;
    font-size: 11px;
}

.vendor-product-action-form {
    display: grid;
    gap: 8px;
}

.vendor-product-action-form label,
.vendor-product-create-form label {
    color: #344054;
    font-size: 8px;
    font-weight: 850;
}

.vendor-product-action-form input,
.vendor-product-action-form textarea,
.vendor-product-create-form input,
.vendor-product-create-form select,
.vendor-product-create-form textarea {
    width: 100%;
    padding: 10px 11px;
    font-size: 9px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
}

.vendor-product-action-form button {
    padding: 10px;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    border: 0;
    border-radius: 8px;
    background: #4f46e5;
}

.vendor-product-success-box,
.vendor-request-waiting,
.vendor-request-rejected {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px;
    border-radius: 9px;
}

.vendor-product-success-box {
    color: #065f46;
    background: #ecfdf3;
}

.vendor-request-waiting {
    color: #92400e;
    background: #fffbeb;
}

.vendor-request-rejected {
    color: #991b1b;
    background: #fef2f2;
}

.vendor-form-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.vendor-form-page-header span {
    color: #4f46e5;
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
}

.vendor-form-page-header h2 {
    margin: 4px 0;
    font-size: 20px;
    font-weight: 900;
}

.vendor-form-page-header p {
    margin: 0;
    color: #667085;
    font-size: 9px;
}

.vendor-product-form-card h3,
.vendor-my-products-section h3 {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 900;
}

.vendor-product-form-card label {
    display: block;
    margin: 9px 0 5px;
}

.vendor-product-checkbox {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-top: 15px !important;
}

.vendor-product-checkbox input {
    width: 16px;
}

.vendor-product-submit-button {
    margin-top: 17px;
}

.vendor-my-product-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.vendor-my-product-card {
    display: grid;
    grid-template-columns:
        95px minmax(0, 1fr);
    gap: 12px;
    padding: 11px;
    border: 1px solid #e4e7ec;
    border-radius: 11px;
}

.vendor-my-product-card img {
    width: 95px;
    height: 95px;
    object-fit: cover;
    border-radius: 9px;
}

.vendor-my-product-card h4 {
    margin: 7px 0 4px;
    font-size: 11px;
    font-weight: 900;
}

.vendor-product-status {
    display: inline-flex;
    padding: 4px 7px;
    font-size: 7px;
    font-weight: 900;
    border-radius: 999px;
}

.status-pending {
    color: #92400e;
    background: #fef3c7;
}

.status-approved {
    color: #065f46;
    background: #d1fae5;
}

.status-rejected {
    color: #991b1b;
    background: #fee2e2;
}

@media (max-width: 1199.98px) {
    .vendor-catalog-grid,
    .vendor-my-product-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .vendor-catalog-grid,
    .vendor-my-product-grid {
        grid-template-columns: 1fr;
    }

    .vendor-form-page-header {
        align-items: stretch;
        flex-direction: column;
    }
}
/* ==============================================================
   PRODUCT MARKETPLACE — STOREFRONT CARD DESIGN
============================================================== */

.vendor-catalog-section {
    margin-top: 18px;
}

.vendor-products-result-heading {
    margin-bottom: 12px;
}

.vendor-products-result-heading span {
    display: block;
    margin-bottom: 3px;
    color: #4f46e5;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.vendor-products-result-heading h2 {
    margin: 0;
    color: #101828;
    font-size: 17px;
    font-weight: 900;
}

/*
|--------------------------------------------------------------------------
| Product Grid
|--------------------------------------------------------------------------
*/

.vendor-catalog-grid {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 13px;
}

/*
|--------------------------------------------------------------------------
| Product Card
|--------------------------------------------------------------------------
*/

.vendor-catalog-card {
    min-width: 0;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid #e5e7eb;
    border-radius: 15px;
    background: #ffffff;
    box-shadow:
        0 5px 16px rgba(15, 23, 42, 0.045);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.vendor-catalog-card:hover {
    border-color: #c7d2fe;
    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.10);
    transform: translateY(-3px);
}

/*
|--------------------------------------------------------------------------
| Product Image
|--------------------------------------------------------------------------
*/

.vendor-catalog-image {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #f8fafc;
}

.vendor-catalog-image > img {
    width: 100%;
    height: 100%;
    display: block;
    padding: 9px;
    object-fit: contain;
    background: #ffffff;
    transition: transform 0.25s ease;
}

.vendor-catalog-card:hover
.vendor-catalog-image > img {
    transform: scale(1.035);
}

.vendor-product-image-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 7px;
    color: #98a2b3;
}

.vendor-product-image-placeholder i {
    font-size: 30px;
}

.vendor-product-image-placeholder span {
    font-size: 9px;
    font-weight: 800;
}

.vendor-product-owner-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 5px 9px;
    color: #ffffff;
    font-size: 7px;
    font-weight: 900;
    line-height: 1;
    border-radius: 999px;
    box-shadow:
        0 4px 12px rgba(15, 23, 42, 0.15);
}

.vendor-product-owner-badge.platform {
    background: #ef3340;
}

.vendor-product-owner-badge.vendor {
    background: #059669;
}

/*
|--------------------------------------------------------------------------
| Product Information
|--------------------------------------------------------------------------
*/

.vendor-catalog-content {
    min-width: 0;
    flex: 1;
    display: flex;
    padding: 13px;
    flex-direction: column;
}

.vendor-catalog-content > small {
    display: block;
    overflow: hidden;
    color: #98a2b3;
    font-size: 7px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vendor-catalog-content h3 {
    min-height: 36px;
    margin: 7px 0 5px;
    overflow: hidden;
    display: -webkit-box;
    color: #172033;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.vendor-catalog-description {
    min-height: 33px !important;
    max-height: 33px;
    margin: 0 0 9px !important;
    overflow: hidden;
    display: -webkit-box;
    color: #667085 !important;
    font-size: 7px !important;
    line-height: 1.55 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/*
|--------------------------------------------------------------------------
| Product Price and Stock
|--------------------------------------------------------------------------
*/

.vendor-catalog-meta {
    display: grid;
    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(0, 0.7fr);
    gap: 7px;
    margin: 0 0 10px;
}

.vendor-catalog-meta > div {
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid #edf0f4;
    border-radius: 9px;
    background: #f8fafc;
}

.vendor-catalog-meta span {
    display: block;
    overflow: hidden;
    color: #98a2b3;
    font-size: 6px;
    font-weight: 850;
    letter-spacing: 0.025em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.vendor-catalog-meta strong {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: #f97316;
    font-size: 10px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vendor-catalog-meta > div:last-child strong {
    color: #344054;
}

/*
|--------------------------------------------------------------------------
| Bottom Action
|--------------------------------------------------------------------------
*/

.vendor-catalog-action-area {
    margin-top: auto;
    padding-top: 2px;
}

.vendor-product-action-form {
    display: grid;
    gap: 6px;
}

.vendor-product-action-form > label {
    margin: 0;
    color: #344054;
    font-size: 7px;
    font-weight: 850;
}

.vendor-catalog-price-action {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) 65px;
    gap: 7px;
}

.vendor-catalog-price-input {
    min-width: 0;
    min-height: 34px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #ffffff;
}

.vendor-catalog-price-input:focus-within {
    border-color: #6366f1;
    box-shadow:
        0 0 0 3px rgba(99, 102, 241, 0.10);
}

.vendor-catalog-price-input > span {
    height: 100%;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    color: #f97316;
    font-size: 10px;
    font-weight: 900;
    border-right: 1px solid #e5e7eb;
    background: #fff7ed;
}

.vendor-catalog-price-input input {
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0 8px;
    color: #101828;
    font-size: 9px;
    font-weight: 800;
    border: 0;
    outline: 0;
    background: transparent;
}

.vendor-product-action-form > textarea {
    width: 100%;
    min-height: 46px;
    padding: 8px 9px;
    resize: vertical;
    color: #344054;
    font-size: 8px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    outline: none;
}

.vendor-product-action-form > textarea:focus {
    border-color: #6366f1;
    box-shadow:
        0 0 0 3px rgba(99, 102, 241, 0.10);
}

.vendor-product-action-form button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 9px;
    color: #ffffff;
    font-size: 7.5px;
    font-weight: 900;
    border: 0;
    border-radius: 8px;
    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1677ff
        );
    cursor: pointer;
}

.vendor-product-action-form button:hover {
    background:
        linear-gradient(
            135deg,
            #1d4ed8,
            #2563eb
        );
}

/*
|--------------------------------------------------------------------------
| Status Boxes
|--------------------------------------------------------------------------
*/

.vendor-product-success-box,
.vendor-request-waiting,
.vendor-request-rejected {
    min-height: 50px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px;
    border-radius: 9px;
}

.vendor-product-success-box {
    color: #065f46;
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
}

.vendor-request-waiting {
    color: #92400e;
    border: 1px solid #fde68a;
    background: #fffbeb;
}

.vendor-request-rejected {
    color: #991b1b;
    border: 1px solid #fecaca;
    background: #fef2f2;
}

.vendor-product-success-box strong,
.vendor-product-success-box span,
.vendor-request-waiting strong,
.vendor-request-waiting span,
.vendor-request-rejected strong,
.vendor-request-rejected span {
    display: block;
}

.vendor-product-success-box strong,
.vendor-request-waiting strong,
.vendor-request-rejected strong {
    font-size: 8px;
    font-weight: 900;
}

.vendor-product-success-box span,
.vendor-request-waiting span,
.vendor-request-rejected span {
    margin-top: 3px;
    font-size: 7px;
    line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Filter
|--------------------------------------------------------------------------
*/

.vendor-product-filter-card {
    padding: 14px;
    border-radius: 14px;
}

.vendor-product-filter-card .form-control,
.vendor-product-filter-card .form-select {
    min-height: 36px;
    font-size: 8px;
    border-color: #d0d5dd;
    border-radius: 8px;
}

.vendor-product-label {
    display: block;
    margin-bottom: 5px;
    color: #344054;
    font-size: 7px;
    font-weight: 850;
}

.vendor-product-primary-button,
.vendor-product-secondary-button {
    min-height: 34px;
    padding: 8px 12px;
    font-size: 8px;
}

/*
|--------------------------------------------------------------------------
| Empty and Pagination
|--------------------------------------------------------------------------
*/

.vendor-catalog-empty {
    grid-column: 1 / -1;
    padding: 55px 20px;
    color: #667085;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
    border: 1px dashed #d0d5dd;
    border-radius: 14px;
    background: #ffffff;
}

.vendor-product-pagination {
    margin-top: 18px;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 1499.98px) {
    .vendor-catalog-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1199.98px) {
    .vendor-catalog-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .vendor-catalog-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .vendor-catalog-grid {
        grid-template-columns: 1fr;
    }

    .vendor-catalog-image {
        height: 210px;
    }
}

/* ==============================================================
   MY PRODUCTS MANAGEMENT
============================================================== */

.vendor-my-products-block {
    margin-top: 18px;
}

.vendor-my-products-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 11px;
}

.vendor-my-products-heading span {
    display: block;
    margin-bottom: 3px;
    color: #4f46e5;
    font-size: 7px;
    font-weight: 900;
    text-transform: uppercase;
}

.vendor-my-products-heading h3 {
    margin: 0;
    color: #101828;
    font-size: 16px;
    font-weight: 900;
}

.vendor-my-products-heading > strong {
    min-width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    color: #4338ca;
    font-size: 11px;
    font-weight: 900;
    border-radius: 10px;
    background: #eef2ff;
}

.vendor-managed-products-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 13px;
}

.vendor-managed-product-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    background: #fff;
    box-shadow:
        0 5px 16px rgba(15, 23, 42, 0.045);
}

.vendor-managed-product-image {
    position: relative;
    height: 165px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #f8fafc;
}

.vendor-managed-product-image > img {
    width: 100%;
    height: 100%;
    padding: 9px;
    object-fit: contain;
    background: #fff;
}

.vendor-managed-product-image
.vendor-product-status,
.vendor-catalog-source-badge {
    position: absolute;
    top: 9px;
    left: 9px;
}

.vendor-catalog-source-badge {
    z-index: 2;
    padding: 5px 8px;
    color: #fff;
    font-size: 6.5px;
    font-weight: 900;
    border-radius: 999px;
}

.vendor-catalog-source-badge.owned {
    background: #059669;
}

.vendor-catalog-source-badge.platform {
    background: #ef3340;
}

.vendor-catalog-source-badge.resell {
    background: #7c3aed;
}

.vendor-catalog-source-badge.default {
    background: #475467;
}

.vendor-managed-product-content {
    padding: 13px;
}

.vendor-managed-product-content > small,
.vendor-managed-product-topline > small {
    overflow: hidden;
    display: block;
    color: #98a2b3;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vendor-managed-product-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
}

.vendor-managed-product-content h4 {
    min-height: 35px;
    margin: 7px 0 10px;
    overflow: hidden;
    display: -webkit-box;
    color: #101828;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.vendor-managed-price-row {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 10px;
}

.vendor-managed-price-row > div {
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid #eef2f6;
    border-radius: 8px;
    background: #f8fafc;
}

.vendor-managed-price-row span,
.vendor-managed-price-row strong {
    display: block;
}

.vendor-managed-price-row span {
    color: #98a2b3;
    font-size: 6px;
    font-weight: 850;
    text-transform: uppercase;
}

.vendor-managed-price-row strong {
    margin-top: 3px;
    overflow: hidden;
    color: #f97316;
    font-size: 9px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vendor-managed-price-row > div:last-child strong {
    color: #344054;
}

.vendor-managed-price-form {
    margin-top: 8px;
}

.vendor-managed-price-form > label {
    display: block;
    margin-bottom: 5px;
    color: #344054;
    font-size: 7px;
    font-weight: 850;
}

.vendor-managed-price-form > div {
    min-height: 34px;
    display: grid;
    overflow: hidden;
    grid-template-columns:
        30px minmax(0, 1fr) 58px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
}

.vendor-managed-price-form span {
    display: grid;
    place-items: center;
    color: #f97316;
    font-size: 10px;
    font-weight: 900;
    border-right: 1px solid #e5e7eb;
    background: #fff7ed;
}

.vendor-managed-price-form input {
    min-width: 0;
    padding: 0 8px;
    font-size: 8px;
    font-weight: 800;
    border: 0;
    outline: 0;
}

.vendor-managed-price-form button {
    color: #fff;
    font-size: 7px;
    font-weight: 900;
    border: 0;
    background: #4f46e5;
}

.vendor-managed-product-actions {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 9px;
}

.vendor-managed-product-actions form {
    margin: 0;
}

.vendor-managed-product-actions button {
    width: 100%;
    min-height: 33px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px;
    font-size: 7px;
    font-weight: 900;
    border-radius: 8px;
    cursor: pointer;
}

.vendor-managed-product-actions
button.activate {
    color: #fff;
    border: 1px solid #059669;
    background: #059669;
}

.vendor-managed-product-actions
button.deactivate {
    color: #b42318;
    border: 1px solid #fecdca;
    background: #fef3f2;
}

.vendor-managed-product-actions
button.locked {
    color: #98a2b3;
    border: 1px solid #e4e7ec;
    background: #f9fafb;
    cursor: not-allowed;
}

@media (max-width: 1399.98px) {
    .vendor-managed-products-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .vendor-managed-products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .vendor-managed-products-grid {
        grid-template-columns: 1fr;
    }

    .vendor-managed-product-image {
        height: 205px;
    }
}


/* ==========================================================
   Vendor Orders Module
========================================================== */

.vendor-order-hero,
.vendor-order-details-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    padding: 28px 30px;
    overflow: hidden;
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(255,255,255,.16),
            transparent 24%
        ),
        linear-gradient(
            135deg,
            #181d4a,
            #5547ed
        );
    box-shadow: 0 18px 45px rgba(47, 45, 145, .18);
}

.vendor-order-eyebrow,
.vendor-order-details-hero > div > span {
    display: inline-flex;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .09em;
    opacity: .85;
}

.vendor-order-hero h1,
.vendor-order-details-hero h1 {
    margin: 0;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 900;
}

.vendor-order-hero p,
.vendor-order-details-hero p {
    max-width: 670px;
    margin: 8px 0 0;
    color: rgba(255,255,255,.78);
    font-size: 13px;
    line-height: 1.7;
}

.vendor-order-hero-icon {
    display: grid;
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 22px;
    background: rgba(255,255,255,.12);
    font-size: 30px;
    backdrop-filter: blur(10px);
}

.vendor-order-stat-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.vendor-order-stat-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    padding: 17px;
    border: 1px solid #e5eaf2;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(15, 23, 42, .04);
}

.vendor-order-stat-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 13px;
    background: #eef0ff;
    color: #5547ed;
    font-size: 17px;
}

.vendor-order-stat-icon.pending {
    background: #fff4dc;
    color: #db8a00;
}

.vendor-order-stat-icon.delivered {
    background: #e9faef;
    color: #12a453;
}

.vendor-order-stat-icon.cancelled {
    background: #fff0f0;
    color: #e33d3d;
}

.vendor-order-stat-card span {
    display: block;
    overflow: hidden;
    color: #7b8495;
    font-size: 9px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vendor-order-stat-card strong {
    display: block;
    margin-top: 4px;
    color: #111827;
    font-size: 17px;
    font-weight: 900;
}

.vendor-order-filter-card,
.vendor-order-list-card,
.vendor-order-details-card {
    border: 1px solid #e3e8f0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .045);
}

.vendor-order-filter-card {
    margin-bottom: 18px;
    padding: 18px;
}

.vendor-order-filter-grid {
    display: grid;
    grid-template-columns:
        minmax(260px, 2fr)
        repeat(3, minmax(135px, 1fr))
        100px;
    gap: 12px;
}

.vendor-order-filter-field label {
    display: block;
    margin-bottom: 6px;
    color: #596579;
    font-size: 9px;
    font-weight: 900;
}

.vendor-order-filter-field input,
.vendor-order-filter-field select {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #dbe2ec;
    border-radius: 10px;
    outline: none;
    background: #fff;
    color: #172033;
    font-size: 11px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.vendor-order-filter-field input:focus,
.vendor-order-filter-field select:focus {
    border-color: #675df1;
    box-shadow: 0 0 0 3px rgba(103, 93, 241, .10);
}

.vendor-order-input-icon {
    position: relative;
}

.vendor-order-input-icon i {
    position: absolute;
    top: 50%;
    left: 13px;
    color: #8b95a7;
    transform: translateY(-50%);
}

.vendor-order-input-icon input {
    padding-left: 36px;
}

.vendor-order-filter-actions {
    display: flex;
    gap: 9px;
    margin-top: 14px;
}

.vendor-order-filter-button,
.vendor-order-reset-button {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 15px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 900;
    text-decoration: none;
}

.vendor-order-filter-button {
    border: 0;
    background: #584ced;
    color: #fff;
    box-shadow: 0 8px 18px rgba(88, 76, 237, .20);
}

.vendor-order-reset-button {
    border: 1px solid #dbe2ec;
    background: #fff;
    color: #536071;
}

.vendor-order-list-card {
    overflow: hidden;
}

.vendor-order-list-header,
.vendor-order-details-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid #e8edf3;
}

.vendor-order-list-header span,
.vendor-order-details-card-header span {
    display: block;
    color: #584ced;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.vendor-order-list-header h2,
.vendor-order-details-card-header h2 {
    margin: 3px 0 0;
    color: #101828;
    font-size: 17px;
    font-weight: 900;
}

.vendor-order-list-header small,
.vendor-order-details-card-header > small {
    padding: 7px 10px;
    border-radius: 999px;
    background: #f0f1ff;
    color: #5547ed;
    font-size: 9px;
    font-weight: 900;
}

.vendor-order-details-card-header > i {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    border-radius: 11px;
    background: #eff1ff;
    color: #584ced;
}

.vendor-order-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

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

.vendor-order-table th {
    padding: 13px 16px;
    border-bottom: 1px solid #e9edf3;
    background: #f8f9fc;
    color: #788396;
    font-size: 9px;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
}

.vendor-order-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #edf0f5;
    color: #283448;
    font-size: 10px;
    vertical-align: middle;
}

.vendor-order-table tbody tr {
    transition: background .2s ease;
}

.vendor-order-table tbody tr:hover {
    background: #fafbff;
}

.vendor-order-number strong,
.vendor-order-customer strong,
.vendor-order-product-summary strong,
.vendor-order-date strong {
    display: block;
    color: #131b2b;
    font-size: 10px;
    font-weight: 900;
}

.vendor-order-number small,
.vendor-order-customer small,
.vendor-order-product-summary small,
.vendor-order-date small {
    display: block;
    margin-top: 3px;
    color: #8a94a6;
    font-size: 8px;
}

.vendor-order-customer {
    display: flex;
    min-width: 160px;
    align-items: center;
    gap: 9px;
}

.vendor-order-customer-avatar {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(135deg, #4a7cf0, #6752ef);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

.vendor-order-amount {
    color: #1c2433;
    font-size: 11px;
}

.vendor-order-profit {
    color: #0d9b50;
    font-size: 11px;
}

.vendor-order-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #edf0f4;
    color: #596273;
    font-size: 8px;
    font-weight: 900;
    text-transform: capitalize;
    white-space: nowrap;
}

.vendor-order-status.status-pending {
    background: #fff3d7;
    color: #b87400;
}

.vendor-order-status.status-confirmed,
.vendor-order-status.status-processing {
    background: #eaf1ff;
    color: #2865cf;
}

.vendor-order-status.status-courier,
.vendor-order-status.status-shipped {
    background: #e9f6ff;
    color: #087aa9;
}

.vendor-order-status.status-delivered {
    background: #e4faec;
    color: #0a9346;
}

.vendor-order-status.status-cancelled,
.vendor-order-status.status-canceled,
.vendor-order-status.status-cancel {
    background: #ffeaea;
    color: #d33131;
}

.vendor-order-status.status-returned {
    background: #f4eaff;
    color: #7d38b9;
}

.vendor-order-view-button {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 11px;
    border: 1px solid #d9def0;
    border-radius: 8px;
    background: #fff;
    color: #5547ed;
    font-size: 9px;
    font-weight: 900;
    text-decoration: none;
    transition: transform .2s ease, background .2s ease;
}

.vendor-order-view-button:hover {
    transform: translateY(-1px);
    background: #f2f1ff;
}

.vendor-order-pagination {
    padding: 16px 18px;
}

.vendor-order-pagination nav > div:first-child {
    display: none;
}

.vendor-order-empty-state {
    padding: 70px 20px;
    text-align: center;
}

.vendor-order-empty-state > div {
    display: grid;
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    place-items: center;
    border-radius: 18px;
    background: #eef0ff;
    color: #584ced;
    font-size: 25px;
}

.vendor-order-empty-state h3 {
    margin: 0;
    color: #172033;
    font-size: 17px;
    font-weight: 900;
}

.vendor-order-empty-state p {
    max-width: 470px;
    margin: 8px auto 15px;
    color: #7a8495;
    font-size: 11px;
}

.vendor-order-empty-state a {
    display: inline-flex;
    padding: 10px 15px;
    border-radius: 9px;
    background: #584ced;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    text-decoration: none;
}

/* Order details */

.vendor-order-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    color: rgba(255,255,255,.85);
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}

.vendor-order-details-hero-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;
}

.vendor-order-details-hero-side .vendor-order-status {
    padding: 8px 14px;
}

.vendor-order-details-hero-side small {
    color: rgba(255,255,255,.72);
    font-size: 9px;
}

.vendor-order-details-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.vendor-order-details-stat-grid article {
    padding: 17px;
    border: 1px solid #e4e9f1;
    border-radius: 15px;
    background: #fff;
}

.vendor-order-details-stat-grid span {
    display: block;
    color: #7c8799;
    font-size: 9px;
    font-weight: 800;
}

.vendor-order-details-stat-grid strong {
    display: block;
    margin-top: 6px;
    color: #141d2d;
    font-size: 17px;
    font-weight: 900;
}

.vendor-order-details-stat-grid strong.profit {
    color: #0c9d4e;
}

.vendor-order-details-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr);
    gap: 16px;
    align-items: start;
}

.vendor-order-details-main,
.vendor-order-details-sidebar {
    display: grid;
    gap: 16px;
}

.vendor-order-details-products {
    display: grid;
    gap: 11px;
    padding: 16px;
}

.vendor-order-details-product {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 1px solid #e8ecf2;
    border-radius: 13px;
    background: #fbfcfe;
}

.vendor-order-details-product-image {
    position: relative;
    width: 78px;
    height: 78px;
    overflow: hidden;
    border: 1px solid #e2e7ee;
    border-radius: 11px;
    background: #fff;
}

.vendor-order-details-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.vendor-order-details-product-image span {
    position: absolute;
    top: 5px;
    right: 5px;
    display: grid;
    min-width: 21px;
    height: 21px;
    place-items: center;
    border-radius: 999px;
    background: #172033;
    color: #fff;
    font-size: 8px;
    font-weight: 900;
}

.vendor-order-details-product-info > small {
    color: #909aab;
    font-size: 8px;
}

.vendor-order-details-product-info h3 {
    margin: 4px 0;
    color: #141c2b;
    font-size: 13px;
    font-weight: 900;
}

.vendor-order-details-product-info p {
    margin: 6px 0 0;
    color: #667286;
    font-size: 9px;
}

.vendor-order-details-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.vendor-order-details-tags span {
    padding: 4px 7px;
    border-radius: 6px;
    background: #edf0f5;
    color: #586579;
    font-size: 8px;
    font-weight: 700;
}

.vendor-order-details-product-finance {
    min-width: 95px;
    text-align: right;
}

.vendor-order-details-product-finance span,
.vendor-order-details-product-finance small {
    display: block;
    color: #8b95a6;
    font-size: 8px;
}

.vendor-order-details-product-finance strong {
    display: block;
    margin: 4px 0;
    color: #151d2b;
    font-size: 13px;
    font-weight: 900;
}

.vendor-order-financial-list {
    padding: 14px 20px 20px;
}

.vendor-order-financial-list > div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 11px 0;
    border-bottom: 1px dashed #e3e8ef;
    color: #687487;
    font-size: 10px;
}

.vendor-order-financial-list > div strong {
    color: #202a3a;
}

.vendor-order-financial-list > div.profit strong {
    color: #0c9c4f;
}

.vendor-order-financial-list > div.total {
    margin-top: 5px;
    border-bottom: 0;
    color: #111827;
    font-size: 14px;
    font-weight: 900;
}

.vendor-order-financial-list > div.total strong {
    color: #584ced;
    font-size: 18px;
}

.vendor-order-customer-profile {
    padding: 20px;
    text-align: center;
}

.vendor-order-customer-profile .avatar {
    display: grid;
    width: 58px;
    height: 58px;
    margin: 0 auto 10px;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(135deg, #4b7df0, #634dee);
    color: #fff;
    font-size: 21px;
    font-weight: 900;
}

.vendor-order-customer-profile h3 {
    margin: 0 0 7px;
    color: #172033;
    font-size: 14px;
    font-weight: 900;
}

.vendor-order-customer-profile a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #5547ed;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}

.vendor-order-details-info-box {
    margin: 0 16px 14px;
    padding: 13px;
    border-radius: 11px;
    background: #f6f8fb;
}

.vendor-order-details-info-box.note {
    background: #fff8e9;
}

.vendor-order-details-info-box span {
    display: block;
    color: #8791a2;
    font-size: 8px;
    font-weight: 900;
}

.vendor-order-details-info-box p {
    margin: 5px 0 0;
    color: #303b4d;
    font-size: 10px;
    line-height: 1.65;
}

.vendor-order-details-key-value {
    padding: 10px 18px 18px;
}

.vendor-order-details-key-value > div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px dashed #e4e8ef;
}

.vendor-order-details-key-value > div:last-child {
    border-bottom: 0;
}

.vendor-order-details-key-value span {
    color: #7e899a;
    font-size: 9px;
}

.vendor-order-details-key-value strong {
    max-width: 58%;
    color: #202a3a;
    font-size: 9px;
    text-align: right;
    overflow-wrap: anywhere;
}

@media (max-width: 1399px) {
    .vendor-order-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1199px) {
    .vendor-order-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vendor-order-filter-field.search {
        grid-column: span 2;
    }

    .vendor-order-details-layout {
        grid-template-columns: 1fr;
    }

    .vendor-order-details-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vendor-order-details-sidebar section:first-child {
        grid-column: span 2;
    }
}

@media (max-width: 767px) {
    .vendor-order-hero,
    .vendor-order-details-hero {
        align-items: flex-start;
        padding: 22px 18px;
    }

    .vendor-order-hero-icon {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
        border-radius: 15px;
        font-size: 22px;
    }

    .vendor-order-stat-grid,
    .vendor-order-details-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vendor-order-filter-grid {
        grid-template-columns: 1fr;
    }

    .vendor-order-filter-field.search {
        grid-column: auto;
    }

    .vendor-order-filter-actions {
        flex-direction: column;
    }

    .vendor-order-filter-button,
    .vendor-order-reset-button {
        width: 100%;
    }

    .vendor-order-table thead {
        display: none;
    }

    .vendor-order-table,
    .vendor-order-table tbody,
    .vendor-order-table tr,
    .vendor-order-table td {
        display: block;
        width: 100%;
    }

    .vendor-order-table tr {
        padding: 12px 14px;
        border-bottom: 8px solid #f2f4f8;
    }

    .vendor-order-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        padding: 9px 0;
        border-bottom: 1px dashed #e3e8ef;
        text-align: right;
    }

    .vendor-order-table td:last-child {
        border-bottom: 0;
    }

    .vendor-order-table td::before {
        flex: 0 0 90px;
        color: #8993a3;
        content: attr(data-label);
        font-size: 8px;
        font-weight: 900;
        text-align: left;
    }

    .vendor-order-customer {
        justify-content: flex-end;
    }

    .vendor-order-details-hero {
        flex-direction: column;
    }

    .vendor-order-details-hero-side {
        align-items: flex-start;
    }

    .vendor-order-details-sidebar {
        grid-template-columns: 1fr;
    }

    .vendor-order-details-sidebar section:first-child {
        grid-column: auto;
    }

    .vendor-order-details-product {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .vendor-order-details-product-image {
        width: 64px;
        height: 64px;
    }

    .vendor-order-details-product-finance {
        grid-column: 2;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .vendor-order-stat-grid,
    .vendor-order-details-stat-grid {
        grid-template-columns: 1fr;
    }

    .vendor-order-list-header,
    .vendor-order-details-card-header {
        align-items: flex-start;
    }
}

.vendor-store-media-field {
    display: grid;
    gap: 12px;
}

.vendor-store-media-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 120px;
    padding: 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
}

.vendor-store-media-preview img {
    display: block;
    max-width: 100%;
    max-height: 110px;
    object-fit: contain;
}

input[type="color"].form-control {
    min-height: 48px;
    padding: 5px;
    cursor: pointer;
}


.vendor-sidebar-navigation {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 18px 12px 24px;
    overflow-y: auto;
    flex: 1;
}

.vendor-sidebar-menu-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vendor-sidebar-menu-label {
    display: block;
    padding: 0 10px;
    color: #7783a8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.vendor-sidebar-menu-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.vendor-sidebar-link {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 11px;
    color: #cbd4ed;
    text-decoration: none;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.2;
    transition:
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.vendor-sidebar-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, .07);
    transform: translateX(2px);
}

.vendor-sidebar-link.active {
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #5b4bea,
        #6c5ce7
    );
    box-shadow: 0 8px 18px rgba(91, 75, 234, .25);
}

.vendor-sidebar-link-icon {
    width: 22px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.vendor-sidebar-link-title {
    min-width: 0;
    flex: 1;
    white-space: normal;
    word-break: break-word;
}

.vendor-sidebar-link-badge {
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
}

.vendor-sidebar-store-details,
.vendor-sidebar-brand-copy {
    min-width: 0;
}

.vendor-sidebar-store-details strong,
.vendor-sidebar-brand-copy strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vendor-sidebar-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 8px;
    padding: 13px;
    border-radius: 10px;
    color: #8490b3;
    background: rgba(255, 255, 255, .04);
    font-size: 12px;
}

.vendor-sidebar-footer {
    margin-top: auto;
    padding: 14px 12px;
}

.vendor-sidebar-logout {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
/* Package 31.2 — Merchant header polish */
.vendor-dashboard-header{min-height:78px;padding:12px 24px;border-bottom:1px solid rgba(226,232,240,.85);background:rgba(255,255,255,.88);box-shadow:0 8px 28px rgba(15,23,42,.035);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.vendor-header-left>div{position:relative;padding-left:12px}.vendor-header-left>div:before{content:"";position:absolute;left:0;top:3px;bottom:2px;width:3px;border-radius:5px;background:linear-gradient(#6366f1,#06b6d4)}.vendor-header-left span{color:#7c86a0;font-size:8px;letter-spacing:.12em}.vendor-header-left h1{font-size:19px;letter-spacing:-.02em}.vendor-header-actions{gap:9px}.vendor-header-action-button{width:40px;height:40px;border-color:#e5e7f0;border-radius:12px;background:linear-gradient(145deg,#fff,#f8f9ff);color:#596176;box-shadow:0 5px 15px rgba(15,23,42,.04);transition:.2s}.vendor-header-action-button:hover{transform:translateY(-2px);border-color:#cfd4ff;color:#4f46e5;box-shadow:0 9px 20px rgba(79,70,229,.1)}.vendor-header-action-button .badge{min-width:18px;height:18px;display:grid;place-items:center;padding:2px 5px;border:2px solid #fff;font-size:8px;box-shadow:0 4px 10px rgba(220,38,38,.22)}.vendor-header-user{padding:5px 11px 5px 6px;border-color:#e5e7f0;border-radius:13px;background:linear-gradient(145deg,#fff,#fafaff);box-shadow:0 5px 16px rgba(15,23,42,.04)}.vendor-header-user-avatar{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,#6366f1,#7c3aed);box-shadow:0 7px 15px rgba(99,102,241,.24)}.vendor-header-user strong{font-size:9px}.vendor-header-user small{font-size:7px;color:#8b95aa}
@media(max-width:767.98px){.vendor-dashboard-header{min-height:68px;padding:9px 12px}.vendor-header-left h1{font-size:16px}.vendor-header-left span{font-size:7px}.vendor-header-action-button{display:none}.vendor-header-action-button.vendor-notification-button{display:grid;width:37px;height:37px}.vendor-header-user{margin-left:0;padding:4px}.vendor-header-user-avatar{width:31px;height:31px}}

/* Package 31.3 — Vendor communication header */
.vendor-dashboard-header{overflow:visible}.vendor-header-context{min-width:0}.vendor-header-actions{position:relative;flex:0 0 auto}.vendor-header-popover-wrap{position:relative}.vendor-header-action-button,.vendor-header-user{font-family:inherit;cursor:pointer}.vendor-header-action-button:focus-visible,.vendor-header-user:focus-visible,.vendor-header-profile-link:focus-visible{outline:3px solid rgba(99,102,241,.22);outline-offset:2px}.vendor-header-action-button[aria-expanded="true"]{color:#4f46e5;border-color:#c7d2fe;background:#eef2ff;box-shadow:0 8px 20px rgba(79,70,229,.14)}.vendor-header-badge{position:absolute;top:-6px;right:-7px;z-index:2;min-width:19px;height:19px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;border:2px solid #fff;border-radius:999px;background:#dc2626;color:#fff;font-size:8px;font-weight:900;line-height:1;box-shadow:0 5px 12px rgba(220,38,38,.28)}.vendor-header-badge[hidden]{display:none!important}.vendor-header-popover{position:absolute;top:calc(100% + 12px);right:0;z-index:1095;width:min(390px,calc(100vw - 28px));overflow:hidden;border:1px solid #e5e7eb;border-radius:18px;background:#fff;box-shadow:0 24px 60px rgba(15,23,42,.18)}.vendor-header-popover[hidden]{display:none!important}.vendor-header-popover:before{content:"";position:absolute;top:-7px;right:15px;width:13px;height:13px;transform:rotate(45deg);border-left:1px solid #e5e7eb;border-top:1px solid #e5e7eb;background:#fff}.vendor-header-popover-head{min-height:67px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid #eef0f4;background:linear-gradient(180deg,#fff,#fbfcff)}.vendor-header-popover-head strong{display:block;color:#101828;font-size:13px;font-weight:900}.vendor-header-popover-head small{display:block;margin-top:3px;color:#7c879d;font-size:10px;font-weight:650}.vendor-header-popover-head>a{flex:0 0 auto;color:#4f46e5;font-size:10px;font-weight:850;text-decoration:none}.vendor-header-popover-list{max-height:356px;overflow:auto;overscroll-behavior:contain}.vendor-header-feed-item{position:relative;display:flex;align-items:flex-start;gap:11px;padding:12px 15px;border-bottom:1px solid #f0f2f6;color:inherit;text-decoration:none;transition:background-color .18s ease}.vendor-header-feed-item:hover{background:#f8f9ff}.vendor-header-feed-item.is-unread{background:#f6f7ff}.vendor-header-feed-icon{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:11px;background:#eef2ff;color:#4f46e5;font-size:13px}.vendor-header-feed-copy{min-width:0;flex:1}.vendor-header-feed-copy strong,.vendor-header-feed-copy span,.vendor-header-feed-copy small{display:block}.vendor-header-feed-copy strong{overflow:hidden;color:#252b3a;font-size:11px;font-weight:850;text-overflow:ellipsis;white-space:nowrap}.vendor-header-feed-copy span{margin-top:4px;color:#667085;font-size:10px;line-height:1.5}.vendor-header-feed-copy small{margin-top:5px;color:#98a2b3;font-size:8px;font-weight:700}.vendor-header-unread-dot{width:7px;height:7px;flex:0 0 7px;margin-top:5px;border-radius:50%;background:#4f46e5;box-shadow:0 0 0 4px rgba(79,70,229,.09)}.vendor-header-popover-state{min-height:150px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;padding:22px;color:#8a94a8;font-size:10px;font-weight:700;text-align:center}.vendor-header-popover-state i{font-size:24px;color:#b5bed0}.vendor-header-popover-state.is-error{color:#b42318}.vendor-header-popover-footer{height:45px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:#fafbff;color:#4f46e5;font-size:10px;font-weight:850;text-decoration:none}.vendor-header-popover-footer:hover{background:#f4f5ff;color:#4338ca}.vendor-header-user{border:1px solid #e5e7f0;text-align:left}.vendor-header-user-copy{min-width:0}.vendor-header-user-chevron{margin-left:3px;color:#98a2b3;font-size:9px;transition:transform .18s ease}.vendor-header-user[aria-expanded="true"] .vendor-header-user-chevron{transform:rotate(180deg)}.vendor-header-profile-menu{width:285px}.vendor-header-profile-summary{display:flex;align-items:center;gap:10px;padding:15px;border-bottom:1px solid #eef0f4}.vendor-header-profile-summary>div{min-width:0}.vendor-header-profile-summary strong,.vendor-header-profile-summary small{display:block}.vendor-header-profile-summary strong{overflow:hidden;color:#253047;font-size:11px;font-weight:900;text-overflow:ellipsis;white-space:nowrap}.vendor-header-profile-summary small{margin-top:3px;overflow:hidden;color:#8490a5;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.vendor-header-profile-link{width:100%;min-height:43px;display:flex;align-items:center;gap:10px;padding:10px 15px;border:0;background:#fff;color:#344054;font-size:10px;font-weight:800;text-decoration:none;text-align:left}.vendor-header-profile-link:hover{background:#f8f9fc;color:#4f46e5}.vendor-header-profile-link i{width:18px;text-align:center;font-size:13px}.vendor-header-logout-form{margin:0;border-top:1px solid #eef0f4}.vendor-header-profile-link-danger{color:#b42318}.vendor-header-profile-link-danger:hover{color:#b42318;background:#fff4f3}
@media(max-width:991.98px){.vendor-header-catalog-button{display:none}.vendor-dashboard-header{padding-inline:16px}.vendor-header-popover{position:fixed;top:76px;right:14px;left:auto}.vendor-header-popover:before{display:none}}
@media(max-width:767.98px){.vendor-dashboard-header{gap:8px;min-height:66px;padding:8px 10px}.vendor-header-left{min-width:0;gap:8px}.vendor-mobile-menu-button{width:38px;height:38px;flex:0 0 38px}.vendor-header-context{max-width:min(42vw,180px)}.vendor-header-left>div{padding-left:8px}.vendor-header-left>div:before{width:2px}.vendor-header-left span{overflow:hidden;font-size:7px;text-overflow:ellipsis;white-space:nowrap}.vendor-header-left h1{overflow:hidden;margin-top:2px;font-size:14px;text-overflow:ellipsis;white-space:nowrap}.vendor-header-actions{gap:6px}.vendor-header-action-button{display:grid!important;width:37px;height:37px;flex:0 0 37px;border-radius:11px}.vendor-header-catalog-button{display:none!important}.vendor-message-button,.vendor-notification-button{display:grid!important}.vendor-header-user{margin-left:0;padding:3px;border-radius:11px}.vendor-header-user-avatar{width:31px;height:31px;flex:0 0 31px}.vendor-header-user-copy,.vendor-header-user-chevron{display:none!important}.vendor-header-popover{top:70px;right:10px;width:calc(100vw - 20px);max-height:calc(100dvh - 82px);border-radius:16px}.vendor-header-popover-list{max-height:min(54dvh,390px)}.vendor-header-profile-menu{width:min(285px,calc(100vw - 20px))}}
@media(max-width:390px){.vendor-dashboard-header{padding-inline:8px}.vendor-header-actions{gap:4px}.vendor-header-context{max-width:34vw}.vendor-header-action-button{width:35px;height:35px;flex-basis:35px}.vendor-header-user-avatar{width:29px;height:29px;flex-basis:29px}.vendor-header-user{padding:3px}.vendor-header-popover{right:8px;width:calc(100vw - 16px)}}
@media(max-width:340px){.vendor-header-context{max-width:30vw}.vendor-header-left h1{font-size:12px}.vendor-header-left span{font-size:6px}.vendor-header-actions{gap:3px}.vendor-header-action-button{width:34px;height:34px;flex-basis:34px}.vendor-mobile-menu-button{width:35px;height:35px;flex-basis:35px}.vendor-header-user-avatar{width:28px;height:28px;flex-basis:28px}}