@charset "UTF-8";

/* ==============================================================
   FASPECO TECHNOLOGIES
   DEEP GREEN TECHNOLOGY DESIGN SYSTEM
   COMPLETE RESPONSIVE UI
   ============================================================== */


/* ==============================================================
   ROOT VARIABLES
============================================================== */

:root {

    /* ----------------------------------------------------------
       BRAND COLORS
    ---------------------------------------------------------- */

    --primary: #087443;
    --primary-dark: #055c35;
    --primary-deep: #023b24;

    --green-950: #011c11;
    --green-900: #022b1b;
    --green-800: #03452a;
    --green-700: #05613a;
    --green-600: #087443;
    --green-500: #0b8f55;
    --green-400: #10b981;
    --green-300: #34d399;
    --green-200: #86efac;
    --green-100: #d1fae5;
    --green-50: #ecfdf5;


    /* ----------------------------------------------------------
       SECONDARY
    ---------------------------------------------------------- */

    --secondary: #031f16;
    --secondary-light: #073d2a;

    --accent: #10b981;
    --accent-dark: #059669;
    --accent-light: #d1fae5;

    --tech-green: #16a34a;
    --tech-lime: #84cc16;
    --tech-cyan: #14b8a6;


    /* ----------------------------------------------------------
       BACKGROUNDS
    ---------------------------------------------------------- */

    --white: #ffffff;

    --body-bg: #f5f9f7;
    --light: #f4f8f5;
    --light-green: #edf8f2;

    --surface: #ffffff;
    --surface-soft: #f8fcfa;
    --surface-dark: #06271b;

    --border: #dce9e1;
    --border-light: #e8f1ec;
    --border-dark: #b9d2c4;


    /* ----------------------------------------------------------
       TEXT
    ---------------------------------------------------------- */

    --text: #10251c;
    --text-dark: #061811;

    --heading: #062a1c;

    --muted: #66776e;
    --muted-light: #91a49a;


    /* ----------------------------------------------------------
       STATUS
    ---------------------------------------------------------- */

    --success: #087443;
    --success-light: #e8f8ef;

    --danger: #dc3545;
    --danger-dark: #b42318;
    --danger-light: #fff0f1;

    --warning: #b7791f;
    --warning-light: #fff8e6;

    --info: #087f73;
    --info-light: #e6f8f5;


    /* ----------------------------------------------------------
       RADIUS
    ---------------------------------------------------------- */

    --radius-xs: 6px;
    --radius-small: 9px;
    --radius: 13px;
    --radius-large: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;


    /* ----------------------------------------------------------
       SHADOWS
    ---------------------------------------------------------- */

    --shadow-xs:
        0 2px 8px rgba(3, 31, 22, .05);

    --shadow:
        0 10px 30px rgba(3, 31, 22, .08);

    --shadow-md:
        0 15px 40px rgba(3, 31, 22, .11);

    --shadow-hover:
        0 20px 50px rgba(3, 31, 22, .15);

    --shadow-green:
        0 10px 30px rgba(8, 116, 67, .20);

    --shadow-green-lg:
        0 18px 45px rgba(8, 116, 67, .25);


    /* ----------------------------------------------------------
       TRANSITIONS
    ---------------------------------------------------------- */

    --transition:
        all .2s ease;

    --transition-fast:
        all .15s ease;

    --transition-slow:
        all .35s cubic-bezier(.4, 0, .2, 1);


    /* ----------------------------------------------------------
       Z-INDEX
    ---------------------------------------------------------- */

    --z-header: 1000;

    --z-chat: 5000;

    --z-mobile-overlay: 7000;

    --z-mobile-sidebar: 8000;

    --z-admin-overlay: 9000;

    --z-admin-sidebar: 10000;

}


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

*,
*::before,
*::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}


html {

    min-height: 100%;

    scroll-behavior: smooth;

}


body {

    min-height: 100vh;

    overflow-x: hidden;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    color: var(--text);

    background:

        radial-gradient(
            circle at 10% 0%,
            rgba(16, 185, 129, .045),
            transparent 30%
        ),

        linear-gradient(
            180deg,
            #f8fbf9 0%,
            #f2f7f4 100%
        );

    line-height: 1.6;

}


body.admin-sidebar-active,
body.mobile-menu-active,
body.mobile-nav-sidebar-active {

    overflow: hidden;

}


a {

    color: inherit;

    text-decoration: none;

}


img {

    display: block;

    max-width: 100%;

    height: auto;

}


button,
input,
select,
textarea {

    font: inherit;

}


button {

    cursor: pointer;

}


ul,
ol {

    list-style: none;

}


::selection {

    color: #ffffff;

    background: var(--primary);

}


/* ==============================================================
   CONTAINER
============================================================== */

.container {

    width: min(1180px, 92%);

    margin-left: auto;

    margin-right: auto;

}


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

.site-header {

    position: sticky;

    top: 0;

    z-index: var(--z-header);

    width: 100%;

    background:
        rgba(255, 255, 255, .94);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid rgba(220, 233, 225, .9);

    box-shadow:
        0 4px 25px rgba(3, 31, 22, .055);

}


.nav-container {

    position: relative;

    min-height: 80px;

    display: flex;

    align-items: center;

    gap: 24px;

}


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

.logo {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    flex-shrink: 0;

    line-height: 1;

    padding-bottom: 7px;

}


.logo-main {

    color: var(--primary);

    font-size: 24px;

    font-weight: 950;

    letter-spacing: 1.6px;

}


.logo-sub {

    margin-top: 5px;

    color: var(--secondary);

    font-size: 10px;

    font-weight: 850;

    letter-spacing: 3.2px;

}


.logo::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -2px;

    width: 34px;

    height: 3px;

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

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--accent),
            var(--tech-lime)
        );

}


/* ==============================================================
   ADMIN BUTTON BELOW LOGO
============================================================== */

.admin-logo-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    margin-top: 7px;

    padding: 7px 12px;

    border: 1px solid rgba(8, 116, 67, .2);

    border-radius: 8px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--accent-dark)
        );

    box-shadow:
        0 5px 14px rgba(8, 116, 67, .16);

    font-size: 12px;

    font-weight: 800;

    line-height: 1;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.admin-logo-button:hover {

    transform: translateY(-1px);

    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--primary)
        );

    box-shadow:
        0 8px 20px rgba(8, 116, 67, .25);

}


.admin-logo-button:active {

    transform: scale(.97);

}


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

.main-nav {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-left: auto;

}


.main-nav a {

    position: relative;

    display: inline-flex;

    align-items: center;

    min-height: 44px;

    padding: 8px 2px;

    color: #34473d;

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;

    transition:
        color .2s ease;

}


.main-nav a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 2px;

    width: 0;

    height: 2px;

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

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--accent)
        );

    transition:
        width .2s ease;

}


.main-nav a:hover {

    color: var(--primary);

}


.main-nav a:hover::after {

    width: 100%;

}


.main-nav a.active {

    color: var(--primary);

    font-weight: 850;

}


.main-nav a.active::after {

    width: 100%;

}


.main-nav .admin-main-link {

    color: var(--primary);

    font-weight: 900;

}


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

.nav-actions {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 8px;

    flex-shrink: 0;

}


.nav-user-name {

    max-width: 130px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: var(--secondary);

    font-size: 13px;

    font-weight: 750;

}


/* ==============================================================
   BUTTON SYSTEM
============================================================== */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-height: 41px;

    padding: 9px 16px;

    border: 1px solid transparent;

    border-radius: 10px;

    font-size: 13px;

    font-weight: 800;

    line-height: 1.2;

    white-space: nowrap;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}


.btn:active {

    transform: scale(.97);

}


.btn-primary {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--accent-dark)
        );

    box-shadow:
        0 6px 17px rgba(8, 116, 67, .18);

}


.btn-primary:hover {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--primary)
        );

    transform: translateY(-1px);

    box-shadow:
        0 9px 24px rgba(8, 116, 67, .27);

}


.btn-outline {

    color: var(--primary);

    background: #ffffff;

    border-color: #b8d3c4;

}


.btn-outline:hover {

    color: var(--primary-dark);

    background: var(--green-50);

    border-color: #91c3a9;

}


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

.mobile-menu-btn {

    display: none;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    flex-shrink: 0;

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

    border-radius: 11px;

    color: var(--primary);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            var(--green-50)
        );

    font-size: 22px;

    line-height: 1;

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

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}


.mobile-menu-btn:hover {

    background: var(--accent-light);

    border-color: #a9cfba;

    box-shadow: var(--shadow);

}


.mobile-menu-btn:active {

    transform: scale(.95);

}


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

main {

    min-height: 70vh;

}


section {

    padding: 78px 0;

}


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

.page-header {

    position: relative;

    overflow: hidden;

    padding: 88px 0;

    color: #ffffff;

    background:

        radial-gradient(
            circle at 90% 15%,
            rgba(16, 185, 129, .23),
            transparent 30%
        ),

        radial-gradient(
            circle at 10% 90%,
            rgba(132, 204, 22, .12),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #011d12 0%,
            #03452a 52%,
            #087443 100%
        );

}


.page-header::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .8;

    background-image:

        linear-gradient(
            rgba(255,255,255,.028) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.028) 1px,
            transparent 1px
        );

    background-size: 34px 34px;

}


.page-header::after {

    content: "";

    position: absolute;

    width: 240px;

    height: 240px;

    right: -100px;

    bottom: -120px;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 50%;

    box-shadow:
        0 0 0 35px rgba(255,255,255,.025),
        0 0 0 70px rgba(255,255,255,.018);

}


.page-header h1 {

    position: relative;

    z-index: 1;

    color: #ffffff;

    font-size:
        clamp(34px, 5vw, 55px);

    font-weight: 900;

    line-height: 1.08;

    letter-spacing: -.8px;

    margin-bottom: 16px;

}


.page-header p {

    position: relative;

    z-index: 1;

    max-width: 720px;

    color: #d6f4e4;

    font-size: 17px;

}


/* ==============================================================
   SECTION TITLE
============================================================== */

.section-title {

    margin-bottom: 44px;

    text-align: center;

}


.section-title h2 {

    color: var(--heading);

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

    font-weight: 900;

    line-height: 1.2;

    margin-bottom: 10px;

}


.section-title h2::after {

    content: "";

    display: block;

    width: 42px;

    height: 3px;

    margin: 12px auto 0;

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

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--accent)
        );

}


.section-title p {

    max-width: 680px;

    margin: 14px auto 0;

    color: var(--muted);

}


/* ==============================================================
   GRIDS
============================================================== */

.grid {

    display: grid;

    gap: 24px;

}


.grid-2 {

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

}


.grid-3 {

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

}


.grid-4 {

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

}


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

.card {

    position: relative;

    overflow: hidden;

    padding: 28px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f9fcfa
        );

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

    border-radius: var(--radius);

    box-shadow: var(--shadow);

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

}


.card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 3px;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--accent),
            var(--tech-lime)
        );

    transition:
        opacity .2s ease;

}


.card:hover {

    transform: translateY(-5px);

    border-color: #c4ddcf;

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

}


.card:hover::before {

    opacity: 1;

}


.card h3 {

    color: var(--heading);

    font-size: 19px;

    line-height: 1.3;

    margin-bottom: 10px;

}


.card p {

    color: var(--muted);

}


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

.tech-card {

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #effaf4
        );

    border-color: #cde5d8;

}


.tech-icon {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 18px;

    border-radius: 13px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--accent)
        );

    font-size: 22px;

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

}


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

.form-card {

    max-width: 650px;

    margin: 40px auto;

    padding: 38px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f9fcfa
        );

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

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

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

}


.form-group {

    margin-bottom: 20px;

}


.form-group label {

    display: block;

    margin-bottom: 7px;

    color: var(--secondary);

    font-size: 14px;

    font-weight: 800;

}


.form-control,
select,
textarea {

    width: 100%;

    padding: 13px 14px;

    border: 1px solid #c9d8d0;

    border-radius: 10px;

    outline: none;

    color: var(--text);

    background: #ffffff;

    font-size: 15px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.form-control:hover,
select:hover,
textarea:hover {

    border-color: #a9c7b7;

}


.form-control:focus,
select:focus,
textarea:focus {

    border-color: var(--primary);

    background: #ffffff;

    box-shadow:
        0 0 0 4px
        rgba(8,116,67,.10);

}


textarea {

    min-height: 135px;

    resize: vertical;

}


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

.alert {

    padding: 14px 18px;

    margin-bottom: 20px;

    border: 1px solid transparent;

    border-radius: 10px;

    font-size: 14px;

}


.alert-success {

    color: #075c35;

    background: var(--success-light);

    border-color: #bce5ce;

}


.alert-danger {

    color: #a51d2a;

    background: var(--danger-light);

    border-color: #f3c3c7;

}


.alert-info {

    color: #087065;

    background: var(--info-light);

    border-color: #bce7e1;

}


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

.product-card {

    overflow: hidden;

    background: #ffffff;

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

    border-radius: var(--radius);

    box-shadow: var(--shadow);

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

}


.product-card:hover {

    transform: translateY(-5px);

    border-color: #b9d9c7;

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

}


.product-image {

    width: 100%;

    height: 220px;

    object-fit: cover;

    background: var(--light-green);

}


.price {

    color: var(--primary);

    font-size: 25px;

    font-weight: 950;

}


.old-price {

    color: #98a2b3;

    font-size: 14px;

    text-decoration: line-through;

}


.status-badge {

    display: inline-flex;

    align-items: center;

    padding: 5px 10px;

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

    color: var(--success);

    background: var(--success-light);

    font-size: 12px;

    font-weight: 800;

}


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

.table-responsive {

    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

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

    border-radius: var(--radius);

    background: #ffffff;

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

}


.admin-table {

    width: 100%;

    min-width: 1000px;

    border-collapse: collapse;

    background: #ffffff;

}


.admin-table th,
.admin-table td {

    padding: 14px;

    border-bottom: 1px solid #e3eee8;

    text-align: left;

    vertical-align: top;

}


.admin-table th {

    color: #174c36;

    background:
        linear-gradient(
            180deg,
            #eef8f2,
            #e8f4ed
        );

    font-size: 13px;

    font-weight: 850;

}


.admin-table td {

    color: #475c51;

    font-size: 14px;

}


.admin-table tbody tr {

    transition:
        background .15s ease;

}


.admin-table tbody tr:hover {

    background: #f4faf6;

}


.admin-table select {

    padding: 8px 10px;

    border: 1px solid #c9d8d0;

    border-radius: 7px;

    background: #ffffff;

    color: var(--text);

}


/* ==============================================================
   MOBILE RIGHT NAVIGATION SIDEBAR
============================================================== */

.mobile-nav-sidebar {

    position: fixed;

    top: 0;

    right: 0;

    width: min(350px, 90vw);

    height: 100vh;

    height: 100dvh;

    z-index: 8000;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f7fbf9
        );

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

    box-shadow:
        -20px 0 55px
        rgba(3,31,22,.20);

    transform: translateX(105%);

    visibility: hidden;

    transition:
        transform .35s cubic-bezier(.4,0,.2,1),
        visibility .35s ease;

}


.mobile-nav-sidebar.mobile-nav-sidebar-open {

    transform: translateX(0);

    visibility: visible;

}


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

.mobile-nav-sidebar-header {

    min-height: 88px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 18px 20px;

    color: #ffffff;

    background:

        radial-gradient(
            circle at 90% 10%,
            rgba(16,185,129,.25),
            transparent 34%
        ),

        linear-gradient(
            135deg,
            #011d12,
            #075b39
        );

}


.mobile-nav-title {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.mobile-nav-title span {

    color: #9de3c1;

    font-size: 10px;

    font-weight: 850;

    letter-spacing: 1.5px;

}


.mobile-nav-title strong {

    color: #ffffff;

    font-size: 17px;

    line-height: 1.2;

}


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

.mobile-nav-close {

    width: 42px;

    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255,255,255,.16);

    border-radius: 11px;

    color: #ffffff;

    background: rgba(255,255,255,.10);

    font-size: 28px;

    line-height: 1;

    transition:
        background .2s ease,
        transform .2s ease;

}


.mobile-nav-close:hover {

    background: rgba(255,255,255,.20);

    transform: rotate(90deg);

}


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

.mobile-nav-sidebar-content {

    flex: 1;

    min-height: 0;

    overflow-y: auto;

    padding: 15px 12px 20px;

    scrollbar-width: thin;

    scrollbar-color: #aac8b7 transparent;

}


.mobile-sidebar-link {

    position: relative;

    display: flex;

    align-items: center;

    gap: 13px;

    width: 100%;

    min-height: 50px;

    margin-bottom: 5px;

    padding: 10px 13px;

    border: 1px solid transparent;

    border-radius: 11px;

    color: #344c41;

    font-size: 14px;

    font-weight: 700;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease;

}


.mobile-sidebar-link:hover,
.mobile-sidebar-link.active {

    color: var(--primary);

    background: #e8f6ef;

    border-color: #d4ecdf;

}


.mobile-sidebar-icon {

    width: 36px;

    height: 36px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: #eef8f2;

    font-size: 17px;

}


.mobile-sidebar-divider {

    height: 1px;

    margin: 14px 7px;

    background: var(--border);

}


.mobile-sidebar-admin {

    color: var(--primary);

    background: #edf8f2;

    border-color: #d5eadf;

}


.mobile-sidebar-logout {

    color: #c62828;

}


.mobile-sidebar-logout:hover {

    color: #b42318;

    background: #fef3f2;

    border-color: #fbd4d0;

}


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

.mobile-nav-sidebar-footer {

    flex-shrink: 0;

    padding: 14px 20px;

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

    background: #f2f8f5;

}


.mobile-nav-sidebar-footer small {

    display: block;

    color: #71857a;

    font-size: 11px;

}


.mobile-nav-sidebar-footer small:first-child {

    color: #344c41;

    font-weight: 750;

}


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

.mobile-nav-overlay {

    position: fixed;

    inset: 0;

    z-index: 7000;

    background: rgba(1,29,18,.58);

    backdrop-filter: blur(3px);

    -webkit-backdrop-filter: blur(3px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .3s ease,
        visibility .3s ease;

}


.mobile-nav-overlay.mobile-nav-overlay-visible {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


/* ==============================================================
   ADMIN SIDEBAR — LEFT
============================================================== */

.admin-sidebar {

    position: fixed;

    top: 0;

    left: 0;

    width: min(360px, 90vw);

    height: 100vh;

    height: 100dvh;

    z-index: var(--z-admin-sidebar);

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f7fbf9
        );

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

    box-shadow:
        20px 0 55px
        rgba(3,31,22,.20);

    transform: translateX(-105%);

    visibility: hidden;

    transition:
        transform .35s cubic-bezier(.4,0,.2,1),
        visibility .35s ease;

}


.admin-sidebar.admin-sidebar-open {

    transform: translateX(0);

    visibility: visible;

}


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

.admin-sidebar-header {

    position: relative;

    min-height: 88px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 18px 20px;

    color: #ffffff;

    background:

        radial-gradient(
            circle at 10% 10%,
            rgba(16,185,129,.22),
            transparent 34%
        ),

        linear-gradient(
            135deg,
            #011d12,
            #075b39
        );

}


.admin-sidebar-brand {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.admin-sidebar-label {

    display: block;

    color: #9de3c1;

    font-size: 10px;

    font-weight: 850;

    letter-spacing: 1.5px;

}


.admin-sidebar-header strong {

    display: block;

    overflow: hidden;

    color: #ffffff;

    font-size: 16px;

    line-height: 1.2;

    white-space: nowrap;

    text-overflow: ellipsis;

}


/* ==============================================================
   ADMIN CLOSE
============================================================== */

.admin-sidebar-close {

    width: 42px;

    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255,255,255,.16);

    border-radius: 11px;

    color: #ffffff;

    background: rgba(255,255,255,.10);

    font-size: 28px;

    line-height: 1;

    transition:
        background .2s ease,
        transform .2s ease;

}


.admin-sidebar-close:hover {

    background: rgba(255,255,255,.20);

    transform: rotate(90deg);

}


/* ==============================================================
   ADMIN NAV
============================================================== */

.admin-sidebar-nav {

    flex: 1;

    min-height: 0;

    overflow-x: hidden;

    overflow-y: auto;

    padding: 15px 12px 20px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f7fbf9
        );

    scrollbar-width: thin;

    scrollbar-color: #aac8b7 transparent;

}


.admin-sidebar-nav::-webkit-scrollbar {

    width: 6px;

}


.admin-sidebar-nav::-webkit-scrollbar-track {

    background: transparent;

}


.admin-sidebar-nav::-webkit-scrollbar-thumb {

    background: #aac8b7;

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

}


.admin-sidebar-link {

    position: relative;

    display: flex;

    align-items: center;

    gap: 13px;

    width: 100%;

    min-height: 50px;

    margin-bottom: 5px;

    padding: 10px 13px;

    border: 1px solid transparent;

    border-radius: 11px;

    color: #344c41;

    font-size: 14px;

    font-weight: 700;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease;

}


.admin-sidebar-link:hover {

    color: var(--primary);

    background: #e8f6ef;

    border-color: #d4ecdf;

    transform: translateX(3px);

}


.admin-sidebar-icon {

    width: 36px;

    height: 36px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: #eef8f2;

    font-size: 17px;

    transition:
        background .18s ease,
        transform .18s ease;

}


.admin-sidebar-link:hover .admin-sidebar-icon {

    background: #d4f0df;

    transform: scale(1.05);

}


.admin-sidebar-divider {

    height: 1px;

    margin: 14px 7px;

    background: var(--border);

}


.admin-sidebar-link.admin-sidebar-logout {

    color: #c62828;

}


.admin-sidebar-link.admin-sidebar-logout:hover {

    color: #b42318;

    background: #fef3f2;

    border-color: #fbd4d0;

}


.admin-sidebar-logout .admin-sidebar-icon {

    background: #fff1f1;

}


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

.admin-sidebar-footer {

    flex-shrink: 0;

    padding: 14px 20px;

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

    background: #f2f8f5;

}


.admin-sidebar-footer small {

    display: block;

    color: #71857a;

    font-size: 11px;

}


.admin-sidebar-footer small:first-child {

    color: #344c41;

    font-weight: 750;

}


.admin-sidebar-footer small + small {

    margin-top: 3px;

}


/* ==============================================================
   ADMIN OVERLAY
============================================================== */

.admin-sidebar-overlay {

    position: fixed;

    inset: 0;

    z-index: var(--z-admin-overlay);

    background: rgba(1,29,18,.58);

    backdrop-filter: blur(3px);

    -webkit-backdrop-filter: blur(3px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .3s ease,
        visibility .3s ease;

}


.admin-sidebar-overlay.admin-sidebar-overlay-visible {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


/* ==============================================================
   OLD FLOATING ADMIN BUTTON
   Kept hidden because Admin is now below logo.
============================================================== */

.admin-sidebar-open {

    display: none !important;

}


/* ==============================================================
   CUSTOMER CHAT BUTTON
============================================================== */

.faspeco-chat-button {

    position: fixed;

    right: 22px;

    bottom: 22px;

    z-index: var(--z-chat);

    width: 59px;

    height: 59px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--accent)
        );

    font-size: 25px;

    box-shadow:
        0 12px 32px
        rgba(8,116,67,.30);

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.faspeco-chat-button:hover {

    transform: scale(1.08);

    box-shadow:
        0 16px 40px
        rgba(8,116,67,.38);

}


.faspeco-chat-notification {

    position: absolute;

    top: -3px;

    right: -2px;

    min-width: 21px;

    height: 21px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0 5px;

    border: 2px solid #ffffff;

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

    color: #ffffff;

    background: #d92d20;

    font-size: 11px;

    font-weight: 800;

}


/* ==============================================================
   CUSTOMER CHAT WINDOW
============================================================== */

.faspeco-chat-window {

    position: fixed;

    right: 22px;

    bottom: 92px;

    z-index: calc(var(--z-chat) + 1);

    width: 365px;

    max-width: calc(100vw - 30px);

    height: 525px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

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

    border-radius: 17px;

    box-shadow:
        0 24px 65px
        rgba(3,31,22,.24);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(15px)
        scale(.97);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;

}


.faspeco-chat-window.faspeco-chat-open {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);

}


.faspeco-chat-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 17px;

    color: #ffffff;

    background:

        radial-gradient(
            circle at 90% 0%,
            rgba(16,185,129,.22),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            var(--secondary),
            var(--primary)
        );

}


.faspeco-chat-header strong {

    display: block;

    font-size: 16px;

}


.faspeco-chat-header small {

    display: block;

    margin-top: 3px;

    color: #ccefe0;

    font-size: 12px;

}


.faspeco-chat-close {

    width: 36px;

    height: 36px;

    border: 0;

    border-radius: 9px;

    color: #ffffff;

    background: rgba(255,255,255,.10);

    font-size: 25px;

    line-height: 1;

}


.faspeco-chat-messages {

    flex: 1;

    min-height: 0;

    overflow-y: auto;

    padding: 15px;

    background:
        linear-gradient(
            180deg,
            #f3f8f5,
            #eef6f1
        );

}


.faspeco-chat-empty {

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 25px;

    color: var(--muted);

    text-align: center;

}


.faspeco-chat-empty strong {

    margin-top: 10px;

    color: var(--secondary);

}


.faspeco-chat-empty p {

    margin-top: 6px;

    font-size: 14px;

}


.faspeco-message {

    max-width: 82%;

    margin-bottom: 12px;

    padding: 10px 12px;

    border-radius: 13px;

    font-size: 14px;

    line-height: 1.5;

}


.faspeco-message-text {

    overflow-wrap: anywhere;

    word-break: break-word;

}


.faspeco-message small {

    display: block;

    margin-top: 5px;

    opacity: .65;

    font-size: 10px;

}


.faspeco-message-customer {

    margin-left: auto;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--accent-dark)
        );

    border-bottom-right-radius: 4px;

}


.faspeco-message-customer small {

    text-align: right;

}


.faspeco-message-admin {

    margin-right: auto;

    color: #344054;

    background: #ffffff;

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

    border-bottom-left-radius: 4px;

}


.faspeco-chat-form {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px;

    background: #ffffff;

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

}


.faspeco-chat-form input {

    flex: 1;

    min-width: 0;

    padding: 10px 14px;

    border: 1px solid #c9d8d0;

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

    outline: none;

    font-size: 14px;

}


.faspeco-chat-form input:focus {

    border-color: var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(8,116,67,.10);

}


.faspeco-chat-form button {

    width: 42px;

    height: 42px;

    flex-shrink: 0;

    border: 0;

    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--accent)
        );

    font-size: 17px;

}


.faspeco-chat-form button:disabled {

    opacity: .5;

    cursor: not-allowed;

}


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

.site-footer {

    position: relative;

    overflow: hidden;

    margin-top: 70px;

    color: #d8e9e0;

    background:

        radial-gradient(
            circle at 80% 10%,
            rgba(16,185,129,.13),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #021f15,
            #01140d
        );

}


.footer-grid {

    display: grid;

    grid-template-columns:
        2fr 1fr 1fr 1.5fr;

    gap: 42px;

    padding: 62px 0;

}


.footer-logo {

    color: #ffffff;

    font-size: 21px;

    font-weight: 950;

}


.site-footer h3 {

    margin-bottom: 15px;

    color: #ffffff;

    font-size: 16px;

}


.site-footer a {

    display: block;

    margin-bottom: 8px;

    color: #b8cec2;

    transition:
        color .2s ease,
        transform .2s ease;

}


.site-footer a:hover {

    color: #65dba2;

    transform: translateX(2px);

}


.footer-bottom {

    padding: 18px 0;

    border-top:
        1px solid
        rgba(255,255,255,.09);

    color: #8da69a;

    font-size: 13px;

}


/* ==============================================================
   SCROLLBAR
============================================================== */

::-webkit-scrollbar {

    width: 9px;

}


::-webkit-scrollbar-track {

    background: #edf4f0;

}


::-webkit-scrollbar-thumb {

    background:
        linear-gradient(
            180deg,
            #a4c8b4,
            #79aa91
        );

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

}


::-webkit-scrollbar-thumb:hover {

    background: var(--primary);

}


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

@media (max-width: 1100px) {

    .nav-container {

        gap: 15px;

    }


    .main-nav {

        gap: 11px;

    }


    .main-nav a {

        font-size: 12px;

    }


    .nav-actions .btn {

        padding: 9px 12px;

        font-size: 12px;

    }


    .nav-user-name {

        display: none;

    }

}


/* ==============================================================
   MOBILE — RIGHT NAV DRAWER
============================================================== */

@media (max-width: 900px) {

    .nav-container {

        min-height: 74px;

        gap: 12px;

    }


    /*
    ----------------------------------------------------------
    Logo gets priority
    ----------------------------------------------------------
    */

    .logo {

        margin-right: auto;

    }


    /*
    ----------------------------------------------------------
    Hide desktop navigation
    ----------------------------------------------------------
    */

    .main-nav {

        display: none !important;

    }


    /*
    ----------------------------------------------------------
    Hide desktop account buttons
    ----------------------------------------------------------
    */

    .nav-actions {

        display: none !important;

    }


    /*
    ----------------------------------------------------------
    Show mobile menu
    ----------------------------------------------------------
    */

    .mobile-menu-btn {

        display: flex;

    }


    /*
    ----------------------------------------------------------
    Slightly smaller logo
    ----------------------------------------------------------
    */

    .logo-main {

        font-size: 22px;

    }


    .logo-sub {

        font-size: 9px;

        letter-spacing: 2.7px;

    }


    /*
    ----------------------------------------------------------
    Grid
    ----------------------------------------------------------
    */

    .grid-4 {

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

    }


    .footer-grid {

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

    }

}


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

@media (max-width: 600px) {

    .container {

        width: 94%;

    }


    .nav-container {

        min-height: 70px;

    }


    .logo-main {

        font-size: 20px;

    }


    .logo-sub {

        font-size: 8px;

        letter-spacing: 2.4px;

    }


    .admin-logo-button {

        margin-top: 6px;

        padding: 6px 10px;

        font-size: 11px;

    }


    .mobile-menu-btn {

        width: 42px;

        height: 42px;

        font-size: 21px;

    }


    section {

        padding: 55px 0;

    }


    .page-header {

        padding: 62px 0;

    }


    .page-header h1 {

        font-size: 35px;

    }


    .page-header p {

        font-size: 15px;

    }


    .section-title {

        margin-bottom: 32px;

    }


    .section-title h2 {

        font-size: 28px;

    }


    .grid-2,
    .grid-3,
    .grid-4 {

        grid-template-columns: 1fr;

    }


    .card {

        padding: 22px;

    }


    .form-card {

        margin: 25px auto;

        padding: 23px;

        border-radius: 15px;

    }


    .product-image {

        height: 200px;

    }


    .footer-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }


    /*
    ----------------------------------------------------------
    RIGHT MOBILE SIDEBAR
    ----------------------------------------------------------
    */

    .mobile-nav-sidebar {

        width: min(350px, 92vw);

    }


    .mobile-nav-sidebar-header {

        min-height: 80px;

        padding: 15px;

    }


    .mobile-nav-sidebar-content {

        padding: 12px 10px 18px;

    }


    .mobile-sidebar-link {

        min-height: 51px;

        padding: 10px 12px;

    }


    /*
    ----------------------------------------------------------
    LEFT ADMIN SIDEBAR
    ----------------------------------------------------------
    */

    .admin-sidebar {

        width: min(350px, 92vw);

    }


    .admin-sidebar-header {

        min-height: 80px;

        padding: 15px;

    }


    .admin-sidebar-nav {

        padding: 12px 10px 18px;

    }


    .admin-sidebar-link {

        min-height: 51px;

        padding: 10px 12px;

    }


    /*
    ----------------------------------------------------------
    CHAT
    ----------------------------------------------------------
    */

    .faspeco-chat-button {

        right: 15px;

        bottom: 15px;

        width: 55px;

        height: 55px;

    }


    .faspeco-chat-window {

        right: 10px;

        bottom: 80px;

        width: calc(100vw - 20px);

        height: 70vh;

        height: 70dvh;

        max-height: 560px;

        border-radius: 15px;

    }

}


/* ==============================================================
   SMALL PHONES
============================================================== */

@media (max-width: 400px) {

    .container {

        width: 94%;

    }


    .nav-container {

        gap: 8px;

    }


    .logo-main {

        font-size: 18px;

    }


    .logo-sub {

        font-size: 7px;

        letter-spacing: 2px;

    }


    .admin-logo-button {

        padding: 6px 9px;

        font-size: 10px;

    }


    .mobile-menu-btn {

        width: 40px;

        height: 40px;

        font-size: 20px;

    }


    .mobile-nav-sidebar {

        width: 94vw;

    }


    .admin-sidebar {

        width: 94vw;

    }


    .admin-sidebar-footer,
    .mobile-nav-sidebar-footer {

        padding: 12px 15px;

    }


    .faspeco-chat-window {

        right: 7px;

        width: calc(100vw - 14px);

    }

}


/* ==============================================================
   ACCESSIBILITY
============================================================== */

:focus-visible {

    outline:
        3px solid
        rgba(16,185,129,.40);

    outline-offset: 2px;

}


button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {

    outline:
        3px solid
        rgba(16,185,129,.40);

    outline-offset: 2px;

}


/* ==============================================================
   REDUCED MOTION
============================================================== */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;

    }


    *,
    *::before,
    *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

    }

}