@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");

:root {
    --seller-orange: #ff5a00;
    --seller-orange-dark: #e74d00;
    --seller-navy: #20283f;
    --seller-text: #25304a;
    --seller-muted: #8791a7;
    --seller-bg: #f6f7fb;
    --seller-border: #e8ebf2;
    --seller-white: #ffffff;
    --seller-success: #15803d;
    --seller-warning: #b45309;
    --seller-danger: #b91c1c;
    --seller-shadow: 0 18px 50px rgba(25, 36, 66, 0.1);
}

* {
    box-sizing: border-box;
}

.seller-login-page,
.seller-dashboard-shell,
.seller-route-loader {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
    color: var(--seller-text);
}

.seller-public-header {
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 7vw;
    background: #fff;
    border-bottom: 1px solid #f0f1f4;
}

.seller-brand,
.seller-dashboard-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: var(--seller-orange);
}

.seller-brand-mark {
    position: relative;
    display: inline-flex;
    width: 24px;
    height: 38px;
}

.seller-brand-mark i {
    position: absolute;
    display: block;
    background: var(--seller-orange);
    border-radius: 2px;
}

.seller-brand-mark i:first-child {
    left: 0;
    top: 0;
    width: 9px;
    height: 38px;
}

.seller-brand-mark i:last-child {
    right: 0;
    top: 11px;
    width: 11px;
    height: 16px;
}

.seller-brand strong,
.seller-dashboard-brand strong {
    display: block;
    font-size: 19px;
    line-height: 1;
    font-weight: 800;
}

.seller-brand small,
.seller-dashboard-brand small {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    letter-spacing: 1.2px;
    font-weight: 800;
}

.seller-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #7c879e;
    font-size: 14px;
}

.seller-register-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    height: 42px;
    padding: 0 20px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    background: var(--seller-orange);
    border-radius: 999px;
}

.seller-login-main {
    min-height: calc(100vh - 74px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 510px);
    gap: 7vw;
    align-items: center;
    padding: 70px 9vw;
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 90, 0, 0.12), transparent 30%),
        linear-gradient(135deg, #f9fafc 0%, #fff 54%, #fff5ef 100%);
}

.seller-login-copy {
    max-width: 650px;
}

.seller-eyebrow {
    display: inline-flex;
    padding: 8px 13px;
    color: var(--seller-orange);
    background: rgba(255, 90, 0, 0.09);
    border-radius: 999px;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 1.2px;
}

.seller-login-copy h1 {
    margin: 22px 0 20px;
    color: var(--seller-navy);
    font-size: clamp(44px, 5vw, 72px);
    line-height: 1.04;
    letter-spacing: -2.5px;
}

.seller-login-copy>p {
    max-width: 600px;
    margin: 0;
    color: #707b91;
    font-size: 18px;
    line-height: 1.75;
}

.seller-login-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 38px;
}

.seller-login-features>div {
    padding: 18px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #eef0f5;
    border-radius: 16px;
}

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

.seller-login-features strong {
    margin-bottom: 6px;
    color: var(--seller-navy);
    font-size: 15px;
}

.seller-login-features span {
    color: #8b94a8;
    font-size: 12px;
    line-height: 1.5;
}

.seller-login-card {
    width: 100%;
    padding: 36px;
    background: #fff;
    border: 1px solid rgba(230, 233, 240, 0.9);
    border-radius: 24px;
    box-shadow: var(--seller-shadow);
}

.seller-login-card-head h2 {
    margin: 0;
    color: var(--seller-navy);
    font-size: 28px;
}

.seller-login-card-head p {
    margin: 8px 0 28px;
    color: var(--seller-muted);
    font-size: 14px;
    line-height: 1.6;
}

.seller-alert {
    margin-bottom: 18px;
    padding: 13px 15px;
    border-radius: 11px;
    font-size: 13px;
    line-height: 1.5;
}

.seller-alert-error {
    color: #a11919;
    background: #fff1f1;
    border: 1px solid #ffd5d5;
}

.seller-field {
    display: block;
    margin-bottom: 19px;
}

.seller-field>span {
    display: block;
    margin-bottom: 8px;
    color: #525d73;
    font-size: 13px;
    font-weight: 700;
}

.seller-field input[type="text"],
.seller-field input[type="password"] {
    width: 100%;
    height: 50px;
    padding: 0 15px;
    color: #2b354d;
    background: #fff;
    border: 1px solid #dce0e8;
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.seller-field input:focus {
    border-color: var(--seller-orange);
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.1);
}

.seller-password-field {
    position: relative;
}

.seller-password-field input {
    padding-right: 74px !important;
}

.seller-password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    padding: 8px 9px;
    color: var(--seller-orange);
    background: transparent;
    border: 0;
    font-weight: 700;
    cursor: pointer;
}

.seller-form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 3px 0 22px;
}

.seller-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #667086;
    font-size: 13px;
}

.seller-remember input {
    accent-color: var(--seller-orange);
}

.seller-login-button {
    width: 100%;
    height: 52px;
    color: #fff;
    background: var(--seller-orange);
    border: 0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.seller-login-button:hover:not(:disabled) {
    background: var(--seller-orange-dark);
}

.seller-login-button:disabled {
    opacity: 0.65;
    cursor: wait;
}

.seller-login-footer {
    margin-top: 24px;
    padding-top: 22px;
    color: #8a93a5;
    border-top: 1px solid #edf0f5;
    text-align: center;
    font-size: 13px;
}

.seller-login-footer a {
    color: var(--seller-orange);
    font-weight: 700;
    text-decoration: none;
}

/* Dashboard */
.seller-dashboard-shell {
    min-height: 100vh;
    display: flex;
    background: var(--seller-bg);
}

.seller-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: 258px;
    padding: 24px 18px;
    background: #20263a;
    color: #c6ccda;
    overflow-y: auto;
}

.seller-dashboard-brand {
    padding: 0 10px 26px;
    color: #fff;
}

.seller-dashboard-brand .seller-brand-mark i {
    background: var(--seller-orange);
}

.seller-dashboard-brand small {
    color: #ffa16d;
}

.seller-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.seller-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 13px;
    color: #bac2d3;
    text-decoration: none;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
}

.seller-sidebar-nav a:hover,
.seller-sidebar-nav a.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.seller-sidebar-nav a.active {
    box-shadow: inset 3px 0 0 var(--seller-orange);
}

.seller-nav-section {
    margin: 22px 13px 7px;
    color: #717b93;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.nav-icon {
    width: 22px;
    text-align: center;
    color: #f5a06c;
    font-size: 17px;
}

.seller-sidebar-nav .logout-link {
    margin-top: 8px;
    color: #ffb795;
}

.seller-dashboard-main {
    width: calc(100% - 258px);
    min-height: 100vh;
    margin-left: 258px;
}

.seller-dashboard-topbar {
    position: sticky;
    top: 0;
    z-index: 15;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--seller-border);
    backdrop-filter: blur(12px);
}

.seller-topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.seller-topbar-left h1 {
    margin: 0;
    color: var(--seller-navy);
    font-size: 20px;
}

.seller-topbar-left p {
    margin: 4px 0 0;
    color: var(--seller-muted);
    font-size: 12px;
}

.seller-menu-button {
    display: none;
    width: 38px;
    height: 38px;
    background: #fff;
    border: 1px solid var(--seller-border);
    border-radius: 9px;
    cursor: pointer;
}

.seller-topbar-profile {
    display: flex;
    align-items: center;
    gap: 11px;
}

.seller-store-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    background: var(--seller-orange);
    border-radius: 50%;
    font-weight: 800;
}

.seller-store-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.seller-topbar-profile strong,
.seller-topbar-profile span {
    display: block;
}

.seller-topbar-profile strong {
    max-width: 220px;
    color: var(--seller-navy);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.seller-topbar-profile span {
    margin-top: 3px;
    color: var(--seller-muted);
    font-size: 11px;
}

.seller-dashboard-content {
    max-width: 1500px;
    margin: 0 auto;
    padding: 30px;
}

.seller-approval-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    padding: 18px 20px;
    color: #8a4a08;
    background: #fff8e7;
    border: 1px solid #f7dda5;
    border-radius: 14px;
}

.seller-approval-banner strong {
    display: block;
    color: #714007;
    font-size: 14px;
}

.seller-approval-banner p {
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.6;
}

.seller-approval-banner>span {
    flex: 0 0 auto;
    padding: 7px 11px;
    color: #92500c;
    background: #ffe8b9;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.seller-dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.seller-dashboard-heading h2 {
    margin: 0;
    color: var(--seller-navy);
    font-size: 22px;
}

.seller-dashboard-heading p {
    margin: 6px 0 0;
    color: var(--seller-muted);
    font-size: 13px;
}

.seller-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.seller-stat-card {
    display: flex;
    gap: 15px;
    min-width: 0;
    padding: 21px;
    background: #fff;
    border: 1px solid var(--seller-border);
    border-radius: 15px;
}

.seller-stat-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--seller-orange);
    background: #fff2eb;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 800;
}

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

.seller-stat-card span {
    color: #7c869a;
    font-size: 12px;
    font-weight: 600;
}

.seller-stat-card strong {
    margin: 6px 0 4px;
    color: var(--seller-navy);
    font-size: 25px;
    line-height: 1.1;
    word-break: break-word;
}

.seller-stat-card small {
    color: #9aa2b2;
    font-size: 10px;
    line-height: 1.5;
}

.seller-dashboard-two-column {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 18px;
    margin-top: 18px;
}

.seller-panel {
    background: #fff;
    border: 1px solid var(--seller-border);
    border-radius: 15px;
}

.seller-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid #eff1f5;
}

.seller-panel-head h3 {
    margin: 0;
    color: var(--seller-navy);
    font-size: 15px;
}

.seller-panel-head p {
    margin: 5px 0 0;
    color: var(--seller-muted);
    font-size: 11px;
}

.seller-wallet-currency {
    padding: 6px 9px;
    color: var(--seller-orange);
    background: #fff0e8;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.seller-wallet-balance {
    padding: 24px 22px 18px;
}

.seller-wallet-balance span {
    display: block;
    color: #818a9e;
    font-size: 12px;
}

.seller-wallet-balance strong {
    display: block;
    margin-top: 7px;
    color: var(--seller-navy);
    font-size: 32px;
}

.seller-wallet-breakdown {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #edf0f5;
    border-top: 1px solid #edf0f5;
}

.seller-wallet-breakdown>div {
    padding: 16px 18px;
    background: #fff;
}

.seller-wallet-breakdown span,
.seller-wallet-breakdown strong {
    display: block;
}

.seller-wallet-breakdown span {
    color: #929aab;
    font-size: 10px;
}

.seller-wallet-breakdown strong {
    margin-top: 5px;
    color: #343e55;
    font-size: 13px;
}

.seller-store-status-list {
    margin: 0;
    padding: 8px 22px 16px;
}

.seller-store-status-list>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 0;
    border-bottom: 1px solid #f0f2f6;
}

.seller-store-status-list>div:last-child {
    border-bottom: 0;
}

.seller-store-status-list dt {
    color: #8b94a6;
    font-size: 11px;
}

.seller-store-status-list dd {
    margin: 0;
    color: #3a455b;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
}

.seller-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    background: #eef1f6;
    border-radius: 999px;
    color: #596579;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.status-active,
.status-approved,
.status-completed,
.status-delivered,
.status-paid {
    color: #14703a;
    background: #e8f8ef;
}

.status-pending,
.status-new_order,
.status-processing,
.status-confirmed,
.status-ready_to_ship,
.status-dispatched {
    color: #99600b;
    background: #fff4d8;
}

.status-rejected,
.status-suspended,
.status-cancelled,
.status-failed {
    color: #a52b2b;
    background: #ffeded;
}

.seller-orders-panel {
    margin-top: 18px;
}

.seller-table-wrap {
    overflow-x: auto;
}

.seller-orders-table {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
}

.seller-orders-table th,
.seller-orders-table td {
    padding: 14px 18px;
    border-bottom: 1px solid #f0f2f6;
    text-align: left;
    vertical-align: middle;
}

.seller-orders-table th {
    color: #8c95a7;
    background: #fafbfc;
    font-size: 10px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.seller-orders-table td {
    color: #505b70;
    font-size: 11px;
}

.seller-orders-table td strong,
.seller-orders-table td span:not(.seller-status-badge) {
    display: block;
}

.seller-orders-table td strong {
    color: #303a50;
    font-size: 11px;
}

.seller-orders-table td span:not(.seller-status-badge) {
    margin-top: 4px;
    color: #98a0b0;
    font-size: 9px;
}

.seller-empty-cell {
    height: 120px;
    color: #9ca4b3 !important;
    text-align: center !important;
}

.seller-dashboard-loading {
    min-height: 300px;
    display: grid;
    place-items: center;
    color: #8992a5;
    background: #fff;
    border: 1px solid var(--seller-border);
    border-radius: 14px;
}

.seller-route-loader {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #737d91;
    background: #f7f8fb;
}

.seller-route-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #ffe0cf;
    border-top-color: var(--seller-orange);
    border-radius: 50%;
    animation: seller-spin 0.75s linear infinite;
}

@keyframes seller-spin {
    to {
        transform: rotate(360deg);
    }
}

.seller-sidebar-overlay {
    display: none;
}

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

    .seller-dashboard-two-column {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .seller-login-main {
        grid-template-columns: 1fr;
        padding: 50px 7vw;
    }

    .seller-login-copy {
        max-width: none;
    }

    .seller-login-copy h1 {
        font-size: 48px;
    }

    .seller-sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .seller-sidebar.is-open {
        transform: translateX(0);
    }

    .seller-sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 25;
        display: block;
        background: rgba(19, 24, 39, 0.45);
        border: 0;
    }

    .seller-dashboard-main {
        width: 100%;
        margin-left: 0;
    }

    .seller-menu-button {
        display: inline-grid;
        place-items: center;
    }
}

@media (max-width: 640px) {
    .seller-public-header {
        height: 68px;
        padding: 0 20px;
    }

    .seller-header-actions>span {
        display: none;
    }

    .seller-register-link {
        min-width: 82px;
        height: 38px;
        padding: 0 15px;
    }

    .seller-login-main {
        padding: 34px 18px;
    }

    .seller-login-copy h1 {
        margin-top: 17px;
        font-size: 38px;
        letter-spacing: -1.5px;
    }

    .seller-login-copy>p {
        font-size: 15px;
    }

    .seller-login-features {
        grid-template-columns: 1fr;
        margin-top: 24px;
    }

    .seller-login-card {
        padding: 25px 20px;
        border-radius: 18px;
    }

    .seller-dashboard-topbar {
        height: 70px;
        padding: 0 16px;
    }

    .seller-topbar-profile>div:last-child {
        display: none;
    }

    .seller-dashboard-content {
        padding: 20px 14px;
    }

    .seller-approval-banner {
        align-items: flex-start;
        flex-direction: column;
    }

    .seller-stat-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .seller-wallet-breakdown {
        grid-template-columns: 1fr;
    }
}





/* =========================================================
   FACEVALY SELLER CENTER
   PRIMARY BRAND COLOR: #FF620D
========================================================= */

:root {

    /* =====================================
       BRAND
    ====================================== */

    --seller-primary: #ff620d;
    --seller-primary-hover: #e95808;
    --seller-primary-dark: #d94f00;
    --seller-primary-darker: #b94200;

    --seller-primary-soft: #fff3ec;
    --seller-primary-soft-2: #ffe9dc;
    --seller-primary-border: #ffd0b6;


    /* =====================================
       SIDEBAR
    ====================================== */

    --sidebar-bg: #ff620d;

    --sidebar-hover: #e95808;

    --sidebar-active-bg: #d94f00;

    --sidebar-active-border: #ffffff;

    --sidebar-text: #fff4ee;

    --sidebar-submenu-bg: #c94700;

    --sidebar-submenu-hover: #b94200;


    /* =====================================
       MAIN
    ====================================== */

    --bg-color: #f7f7f9;

    --text-dark: #1e293b;

    --text-heading: #ff620d;

    --text-muted: #64748b;

    --card-bg: #ffffff;

    --border-color: #e5e7eb;


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

    --blue-light: #fff3ec;

    --blue-dark: #ff620d;


    --green-light: #ecfdf5;

    --green-dark: #10b981;


    --orange-light: #fff3ec;

    --orange-dark: #ff620d;


    --red-light: #fef2f2;

    --red-dark: #ef4444;


    /* =====================================
       SHADOWS
    ====================================== */

    --shadow-sm:
        0 4px 15px rgba(15, 23, 42, 0.04);


    --shadow-md:
        0 10px 30px rgba(15, 23, 42, 0.09);


    --orange-shadow:
        0 8px 25px rgba(255, 98, 13, 0.17);
}


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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html,
body,
#app {

    min-height: 100%;

}


body {

    margin: 0;

    background:
        var(--bg-color);

    color:
        var(--text-dark);

    font-family:
        "Inter",
        sans-serif;

    overflow-x: hidden;

}


button,
input,
textarea,
select {

    font-family: inherit;

}


button {

    cursor: pointer;

}


a {

    text-decoration: none;

}


ul {

    list-style: none;

}


/* =========================================================
   SELLER LAYOUT
========================================================= */

.seller-layout {

    width: 100%;

    min-height: 100vh;

    background:
        var(--bg-color);

}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {

    position: fixed;

    top: 0;

    left: 0;

    z-index: 1000;


    width: 270px;

    height: 100vh;


    display: flex;

    flex-direction: column;


    overflow-y: auto;

    overflow-x: hidden;


    background:
        var(--sidebar-bg);


    box-shadow:
        4px 0 20px rgba(255, 98, 13, 0.16);


    transition:
        transform 0.3s ease;

}


/* Scrollbar */

.sidebar::-webkit-scrollbar {

    width: 5px;

}


.sidebar::-webkit-scrollbar-track {

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

}


.sidebar::-webkit-scrollbar-thumb {

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

    border-radius: 5px;

}


/* =========================================================
   LOGO AREA
========================================================= */

.logo-area {

    min-height: 70px;


    display: flex;

    align-items: center;


    padding:
        0 25px;


    border-bottom:
        1px solid rgba(255, 255, 255, 0.18);

}


/* Logo */

.seller-logo-link {

    display: flex;

    align-items: center;


    color:
        #ffffff;


    font-size:
        1.3rem;

    font-weight:
        800;


    letter-spacing:
        0.2px;

}


.seller-logo-link i {

    margin-right: 10px;


    color:
        #ffffff;


    font-size:
        1.4rem;

}


/* Seller Center Label */

.seller-center-label {

    padding:
        13px 25px 5px;


    color:
        rgba(255, 255, 255, 0.72);


    font-size:
        0.67rem;


    font-weight:
        800;


    letter-spacing:
        1.5px;

}


/* =========================================================
   SIDEBAR CLOSE BUTTON
========================================================= */

.close-sidebar {

    display: none;


    margin-left: auto;


    width: 36px;

    height: 36px;


    align-items: center;

    justify-content: center;


    padding: 0;


    border: none;

    border-radius: 8px;


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


    color:
        #ffffff;


    font-size:
        1.25rem;

}


.close-sidebar:hover {

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

}


/* =========================================================
   MENU
========================================================= */

.menu-list {

    padding:
        10px 0 30px;

}


.menu-list li {

    position: relative;

}


/* =========================================================
   SINGLE DASHBOARD MENU
========================================================= */

.single-menu-link {

    width: 100%;

    min-height: 48px;


    display: flex;

    align-items: center;


    padding:
        14px 25px;


    border-left:
        4px solid transparent;


    color:
        var(--sidebar-text);


    font-size:
        0.9rem;


    font-weight:
        500;


    transition:
        background-color 0.2s,
        color 0.2s,
        border-color 0.2s;

}


.single-menu-link:hover {

    background:
        var(--sidebar-hover);


    color:
        #ffffff;

}


/* Active Dashboard */

.single-menu-link.active {

    background:
        var(--sidebar-active-bg);


    border-left:
        4px solid var(--sidebar-active-border);


    color:
        #ffffff;


    font-weight:
        700;

}


.single-menu-link.active .menu-left-content>i {

    color:
        #ffffff;

}


/* =========================================================
   DROPDOWN PARENT
========================================================= */

.submenu-toggle {

    width: 100%;


    display: flex;

    justify-content:
        space-between;

    align-items: center;


    padding:
        14px 25px;


    border: none;

    border-left:
        4px solid transparent;


    background:
        transparent;


    color:
        var(--sidebar-text);


    font-size:
        0.9rem;


    font-weight:
        500;


    text-align:
        left;


    transition:
        background-color 0.2s,
        color 0.2s,
        border-color 0.2s;

}


.submenu-toggle:hover {

    background:
        var(--sidebar-hover);


    color:
        #ffffff;

}


/* Open parent */

.has-submenu.open>.submenu-toggle {

    background:
        var(--sidebar-active-bg);


    border-left:
        4px solid var(--sidebar-active-border);


    color:
        #ffffff;


    font-weight:
        700;

}


/* =========================================================
   MENU ICON
========================================================= */

.menu-left-content {

    display: flex;

    align-items: center;

}


.menu-left-content>i {

    width: 32px;


    color:
        rgba(255, 255, 255, 0.76);


    font-size:
        1.1rem;

}


.has-submenu.open .menu-left-content>i {

    color:
        #ffffff;

}


/* =========================================================
   PARENT CHEVRON
========================================================= */

.chevron-icon {

    width: auto !important;


    color:
        rgba(255, 255, 255, 0.80);


    font-size:
        0.68rem !important;


    transition:
        transform 0.32s ease;

}


.has-submenu.open .chevron-icon {

    color:
        #ffffff;


    transform:
        rotate(180deg);

}


/* =========================================================
   SUBMENU
========================================================= */

.submenu {

    max-height: 0;


    overflow: hidden;


    background:
        var(--sidebar-submenu-bg);


    transition:
        max-height 0.36s ease;

}


.has-submenu.open .submenu {

    max-height:
        520px;

}


/* =========================================================
   SUBMENU LINKS
========================================================= */

.submenu li a {

    min-height: 40px;


    display: flex;

    align-items: center;


    gap: 8px;


    padding:
        10px 20px 10px 50px;


    color:
        rgba(255, 255, 255, 0.78);


    font-size:
        0.84rem;


    font-weight:
        400;


    transition:
        background-color 0.2s,
        color 0.2s;

}


.submenu li a:hover {

    background:
        var(--sidebar-submenu-hover);


    color:
        #ffffff;

}


/* Active submenu */

.submenu li a.submenu-active {

    background:
        var(--sidebar-submenu-hover);


    color:
        #ffffff;


    font-weight:
        600;

}


/* =========================================================
   SMALL SUBMENU LEFT ARROW
========================================================= */

.submenu-arrow-icon {

    width: 8px;

    min-width: 8px;


    color:
        rgba(255, 255, 255, 0.55);


    font-size:
        0.45rem !important;


    transition:
        color 0.2s,
        transform 0.2s;

}


.submenu li a:hover .submenu-arrow-icon {

    color:
        #ffffff;


    transform:
        translateX(2px);

}


.submenu li a.submenu-active .submenu-arrow-icon {

    color:
        #ffffff;

}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.main-wrapper {

    width:
        calc(100% - 270px);


    min-height:
        100vh;


    margin-left:
        270px;


    display: flex;

    flex-direction:
        column;


    transition:
        margin-left 0.3s ease,
        width 0.3s ease;

}


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

.top-header {

    position: sticky;


    top: 0;


    z-index: 99;


    height: 70px;


    display: flex;

    align-items: center;


    padding:
        0 30px;


    border-bottom:
        1px solid var(--seller-primary-soft-2);


    background:
        #ffffff;


    box-shadow:
        0 3px 15px rgba(255, 98, 13, 0.06);

}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-toggle {

    display: none;


    width: 40px;

    height: 40px;


    align-items: center;

    justify-content: center;


    padding: 0;


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


    border-radius:
        8px;


    background:
        var(--seller-primary-soft);


    color:
        var(--seller-primary);


    font-size:
        1.2rem;

}


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

.header-right {

    display: flex;

    align-items: center;


    gap: 15px;


    margin-left:
        auto;

}


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

.header-icon {

    position: relative;


    width: 42px;

    height: 42px;


    display: flex;

    align-items: center;

    justify-content: center;


    padding: 0;


    border: none;


    border-radius: 50%;


    background:
        var(--seller-primary-soft);


    color:
        var(--seller-primary);


    font-size:
        1.15rem;


    transition:
        background-color 0.2s,
        color 0.2s;

}


.header-icon:hover {

    background:
        var(--seller-primary);


    color:
        #ffffff;

}


/* Notification Dot */

.header-icon::after {

    content: "";


    position: absolute;


    top: 5px;

    right: 6px;


    width: 8px;

    height: 8px;


    border:
        2px solid #ffffff;


    border-radius:
        50%;


    background:
        #ef4444;

}


/* =========================================================
   PROFILE
========================================================= */

.user-dropdown-wrapper {

    position: relative;

}


.user-profile {

    display: flex;

    align-items: center;


    padding: 2px;


    border:
        2px solid transparent;


    border-radius:
        50%;


    background:
        transparent;


    transition:
        border-color 0.2s;

}


.user-profile:hover {

    border-color:
        var(--seller-primary);

}


.avatar {

    width: 40px;

    height: 40px;


    border-radius:
        50%;


    object-fit:
        cover;

}


.avatar-fallback {

    display: flex;


    justify-content:
        center;

    align-items:
        center;


    background:
        var(--seller-primary);


    color:
        #ffffff;


    font-size:
        1rem;


    font-weight:
        800;

}


/* =========================================================
   PROFILE DROPDOWN
========================================================= */

.dropdown-menu {

    position: absolute;


    top: 120%;

    right: 0;


    z-index: 150;


    width: 220px;


    padding:
        10px 0;


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


    border-radius:
        10px;


    background:
        #ffffff;


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


    opacity: 0;


    visibility:
        hidden;


    transform:
        translateY(10px);


    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;

}


.dropdown-menu.active {

    opacity: 1;


    visibility:
        visible;


    transform:
        translateY(0);

}


/* User info */

.dropdown-user-info {

    display: flex;


    flex-direction:
        column;


    padding:
        8px 20px 10px;

}


.dropdown-user-info strong {

    color:
        var(--text-dark);


    font-size:
        0.9rem;

}


.dropdown-user-info span {

    margin-top:
        3px;


    color:
        var(--text-muted);


    font-size:
        0.75rem;

}


.dropdown-divider {

    height: 1px;


    margin:
        8px 0;


    background:
        var(--border-color);

}


/* Dropdown link */

.dropdown-item {

    display: flex;


    align-items: center;


    gap: 12px;


    padding:
        10px 20px;


    color:
        var(--text-dark);


    font-size:
        0.88rem;


    font-weight:
        500;


    transition:
        background-color 0.2s,
        color 0.2s;

}


.dropdown-item i {

    width: 17px;


    color:
        var(--seller-primary);


    text-align:
        center;

}


.dropdown-item:hover {

    background:
        var(--seller-primary-soft);


    color:
        var(--seller-primary);

}


/* Logout */

.text-danger {

    color:
        #ef4444 !important;

}


.text-danger i {

    color:
        #ef4444 !important;

}


.text-danger:hover {

    background:
        #fef2f2 !important;

}


/* =========================================================
   PAGE CONTENT
========================================================= */

.page-content {

    flex: 1;


    padding:
        25px 30px;

}


/* =========================================================
   SELLER ACCOUNT STATUS
========================================================= */

.seller-account-status {

    width: 100%;


    display: flex;


    justify-content:
        space-between;


    align-items:
        center;


    gap: 20px;


    margin-bottom:
        20px;


    padding:
        18px 20px;


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


    border-radius:
        12px;


    background:
        #ffffff;


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

}


.seller-account-status-left {

    display: flex;


    align-items:
        center;


    gap: 14px;

}


.seller-account-status-icon {

    width: 46px;


    height: 46px;


    flex-shrink: 0;


    display: flex;


    align-items:
        center;


    justify-content:
        center;


    border-radius:
        10px;


    font-size:
        1.2rem;

}


.seller-account-status-title {

    display: block;


    margin-bottom:
        3px;


    color:
        var(--text-muted);


    font-size:
        0.74rem;


    font-weight:
        700;


    text-transform:
        uppercase;


    letter-spacing:
        0.5px;

}


.seller-account-status strong {

    display: block;


    color:
        var(--text-dark);


    font-size:
        1rem;


    font-weight:
        700;

}


.seller-account-status p {

    margin-top:
        4px;


    color:
        var(--text-muted);


    font-size:
        0.82rem;


    line-height:
        1.5;

}


/* Pending */

.seller-account-status.pending {

    border-color:
        var(--seller-primary-border);


    background:
        var(--seller-primary-soft);

}


.seller-account-status.pending .seller-account-status-icon {

    background:
        var(--seller-primary-soft-2);


    color:
        var(--seller-primary);

}


/* Approved */

.seller-account-status.approved {

    border-color:
        #a7f3d0;


    background:
        #f8fffc;

}


.seller-account-status.approved .seller-account-status-icon {

    background:
        var(--green-light);


    color:
        var(--green-dark);

}


/* Rejected */

.seller-account-status.rejected {

    border-color:
        #fecaca;


    background:
        #fffafa;

}


.seller-account-status.rejected .seller-account-status-icon {

    background:
        var(--red-light);


    color:
        var(--red-dark);

}


/* Default */

.seller-account-status.default {

    border-color:
        var(--seller-primary-border);

}


.seller-account-status.default .seller-account-status-icon {

    background:
        var(--seller-primary-soft);


    color:
        var(--seller-primary);

}


/* =========================================================
   DASHBOARD ERROR
========================================================= */

.dashboard-error {

    display: flex;


    align-items:
        center;


    gap: 10px;


    margin-bottom:
        20px;


    padding:
        14px 18px;


    border:
        1px solid #fecaca;


    border-radius:
        10px;


    background:
        var(--red-light);


    color:
        #b91c1c;


    font-size:
        0.88rem;


    font-weight:
        600;

}


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

.stats-row-4 {

    display: grid;


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


    gap: 20px;


    margin-bottom:
        20px;

}


.stats-row-2 {

    display: grid;


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


    gap: 20px;


    margin-bottom:
        30px;

}


/* =========================================================
   STAT CARD
========================================================= */

.stat-card {

    position: relative;


    display: flex;


    justify-content:
        space-between;


    align-items:
        center;


    padding:
        24px;


    overflow: hidden;


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


    border-radius:
        12px;


    background:
        #ffffff;


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


    transition:
        transform 0.2s,
        border-color 0.2s,
        box-shadow 0.2s;

}


/* Orange top indicator */

.stat-card::before {

    content: "";


    position: absolute;


    top: 0;


    left: 0;


    width: 100%;


    height: 3px;


    background:
        var(--seller-primary);


    opacity:
        0;

    transition:
        opacity 0.2s;

}


.stat-card:hover {

    transform:
        translateY(-3px);


    border-color:
        var(--seller-primary-border);


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

}


.stat-card:hover::before {

    opacity: 1;

}


/* Stat Text */

.stat-info {

    min-width: 0;

}


.stat-info h2 {

    margin-bottom:
        4px;


    color:
        var(--seller-primary);


    font-size:
        1.7rem;


    font-weight:
        800;


    line-height:
        1.2;

}


.stat-info p {

    color:
        var(--text-muted);


    font-size:
        0.85rem;


    font-weight:
        500;

}


/* =========================================================
   STAT ICON
========================================================= */

.stat-icon {

    width: 50px;


    height: 50px;


    flex-shrink: 0;


    display: flex;


    align-items:
        center;


    justify-content:
        center;


    margin-left:
        15px;


    border-radius:
        10px;


    font-size:
        1.35rem;

}


/* All primary cards now orange themed */

.bg-blue {

    background:
        var(--seller-primary-soft);


    color:
        var(--seller-primary);

}


.bg-orange {

    background:
        var(--seller-primary-soft);


    color:
        var(--seller-primary);

}


/* Keep semantic green */

.bg-green {

    background:
        var(--green-light);


    color:
        var(--green-dark);

}


/* Keep semantic red */

.bg-red {

    background:
        var(--red-light);


    color:
        var(--red-dark);

}


/* =========================================================
   WHITE CARD
========================================================= */

.white-card {

    overflow:
        hidden;


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


    border-radius:
        12px;


    background:
        #ffffff;


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

}


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

.table-header {

    display: flex;


    align-items:
        center;


    justify-content:
        space-between;


    padding:
        20px 25px;


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

}


.table-header h2 {

    color:
        var(--seller-primary);


    font-size:
        1.1rem;


    font-weight:
        700;

}


.view-all-link {

    color:
        var(--seller-primary);


    font-size:
        0.84rem;


    font-weight:
        700;


    transition:
        color 0.2s;

}


.view-all-link:hover {

    color:
        var(--seller-primary-dark);

}


/* =========================================================
   TABLE
========================================================= */

.table-responsive {

    width:
        100%;


    overflow-x:
        auto;

}


table {

    width:
        100%;


    border-collapse:
        collapse;


    white-space:
        nowrap;

}


th,
td {

    padding:
        16px 25px;


    text-align:
        left;

}


th {

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


    background:
        #fafafa;


    color:
        var(--text-muted);


    font-size:
        0.74rem;


    font-weight:
        700;


    text-transform:
        uppercase;


    letter-spacing:
        0.45px;

}


tbody tr {

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


    transition:
        background-color 0.2s;

}


tbody tr:last-child {

    border-bottom:
        none;

}


tbody tr:hover {

    background:
        var(--seller-primary-soft);

}


td {

    color:
        #334155;


    font-size:
        0.88rem;


    font-weight:
        500;

}


td strong {

    color:
        var(--text-dark);


    font-weight:
        700;

}


.user-subtext {

    margin-left:
        4px;


    color:
        var(--text-muted);


    font-size:
        0.78rem;

}


/* =========================================================
   TABLE EMPTY / LOADING
========================================================= */

.table-empty {

    height:
        120px;


    color:
        var(--text-muted);


    text-align:
        center;


    font-size:
        0.86rem;

}


.table-loading {

    display: flex;


    justify-content:
        center;


    align-items:
        center;


    gap: 10px;

}


.table-loading i {

    color:
        var(--seller-primary);

}


/* =========================================================
   BADGES
========================================================= */

.badge {

    display:
        inline-block;


    padding:
        5px 12px;


    border-radius:
        20px;


    font-size:
        0.73rem;


    font-weight:
        700;

}


/* Success */

.badge-soft-green {

    background:
        var(--green-light);


    color:
        var(--green-dark);

}


/* Pending / Orange */

.badge-soft-orange {

    background:
        var(--seller-primary-soft);


    color:
        var(--seller-primary);

}


/* Error */

.badge-soft-red {

    background:
        var(--red-light);


    color:
        var(--red-dark);

}


/* Generic */

.badge-soft-blue {

    background:
        var(--seller-primary-soft);


    color:
        var(--seller-primary);

}


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

.footer {

    padding:
        20px;


    border-top:
        1px solid var(--seller-primary-soft-2);


    background:
        #ffffff;


    color:
        var(--text-muted);


    text-align:
        center;


    font-size:
        0.84rem;


    font-weight:
        500;

}


.footer span {

    color:
        var(--seller-primary);


    font-weight:
        700;

}


/* =========================================================
   FLOATING NOTIFICATION
========================================================= */

.floating-btn {

    position:
        fixed;


    right:
        30px;


    bottom:
        30px;


    z-index:
        100;


    width:
        55px;


    height:
        55px;


    display:
        flex;


    align-items:
        center;


    justify-content:
        center;


    border:
        none;


    border-radius:
        50%;


    background:
        var(--seller-primary);


    color:
        #ffffff;


    font-size:
        1.4rem;


    box-shadow:
        0 8px 25px rgba(255, 98, 13, 0.30);


    transition:
        background-color 0.2s,
        transform 0.2s;

}


.floating-btn:hover {

    background:
        var(--seller-primary-dark);


    transform:
        translateY(-2px);

}


/* =========================================================
   MOBILE SIDEBAR OVERLAY
========================================================= */

.sidebar-overlay {

    position:
        fixed;


    inset:
        0;


    z-index:
        999;


    display:
        none;


    width:
        100vw;


    height:
        100vh;


    padding:
        0;


    border:
        none;


    background:
        rgba(15, 23, 42, 0.55);


    backdrop-filter:
        blur(2px);

}


.sidebar-overlay.active {

    display:
        block;

}


/* =========================================================
   FORM ELEMENTS
   Future Seller pages-এর জন্য
========================================================= */

.seller-layout input,
.seller-layout select,
.seller-layout textarea {

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


    outline:
        none;


    transition:
        border-color 0.2s,
        box-shadow 0.2s;

}


.seller-layout input:focus,
.seller-layout select:focus,
.seller-layout textarea:focus {

    border-color:
        var(--seller-primary);


    box-shadow:
        0 0 0 3px rgba(255, 98, 13, 0.10);

}


/* =========================================================
   GENERIC SELLER BUTTONS
========================================================= */

.seller-primary-btn {

    display:
        inline-flex;


    align-items:
        center;


    justify-content:
        center;


    gap:
        8px;


    min-height:
        42px;


    padding:
        0 18px;


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


    border-radius:
        7px;


    background:
        var(--seller-primary);


    color:
        #ffffff;


    font-size:
        0.84rem;


    font-weight:
        700;


    transition:
        0.2s;

}


.seller-primary-btn:hover {

    border-color:
        var(--seller-primary-dark);


    background:
        var(--seller-primary-dark);


    color:
        #ffffff;

}


.seller-outline-btn {

    display:
        inline-flex;


    align-items:
        center;


    justify-content:
        center;


    gap:
        8px;


    min-height:
        42px;


    padding:
        0 18px;


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


    border-radius:
        7px;


    background:
        #ffffff;


    color:
        var(--seller-primary);


    font-size:
        0.84rem;


    font-weight:
        700;


    transition:
        0.2s;

}


.seller-outline-btn:hover {

    background:
        var(--seller-primary);


    color:
        #ffffff;

}


/* =========================================================
   GENERIC SELLER LINKS
========================================================= */

.seller-layout .seller-link {

    color:
        var(--seller-primary);


    font-weight:
        600;

}


.seller-layout .seller-link:hover {

    color:
        var(--seller-primary-dark);

}


/* =========================================================
   RESPONSIVE: LARGE TABLET
========================================================= */

@media (max-width: 1200px) {

    .stats-row-4 {

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

    }

}


/* =========================================================
   RESPONSIVE: TABLET
========================================================= */

@media (max-width: 992px) {

    .sidebar {

        transform:
            translateX(-100%);

    }


    .sidebar.active {

        transform:
            translateX(0);

    }


    .main-wrapper {

        width:
            100%;


        margin-left:
            0;

    }


    .mobile-toggle {

        display:
            flex;

    }


    .close-sidebar {

        display:
            flex;

    }

}


/* =========================================================
   RESPONSIVE: MOBILE
========================================================= */

@media (max-width: 576px) {

    .page-content {

        padding:
            15px;

    }


    .top-header {

        padding:
            0 15px;

    }


    .stats-row-4,
    .stats-row-2 {

        grid-template-columns:
            1fr;

    }


    .stat-card {

        padding:
            20px;

    }


    .stat-info h2 {

        font-size:
            1.45rem;

    }


    .seller-account-status {

        flex-direction:
            column;


        align-items:
            flex-start;

    }


    .seller-account-status-left {

        align-items:
            flex-start;

    }


    th,
    td {

        padding:
            12px 15px;

    }


    .sidebar {

        width:
            270px;


        max-width:
            86vw;

    }


    .floating-btn {

        right:
            20px;


        bottom:
            20px;


        width:
            50px;


        height:
            50px;

    }

}