@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap');

/* ===== CSS VARIABLES ===== */
:root {
    --primary-color: #28a745;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --info-color: #17a2b8;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    
    --mgl-light-green: #366D13;
    --mgl-dark-green: #417D19;
    --mgl-brown: #A75D27;
    --mgl-brown-shade: #823E16;
    --mgl-green: var(--mgl-dark-green);
    --mgl-blue: var(--mgl-brown);
    --mgl-light-blue: var(--mgl-brown);
    --mgl-dark-blue: var(--mgl-brown-shade);
    --mgl-font-family: "Merriweather", serif;
    --mgl-page-bg: #F4F7F0;
    --mgl-card-bg: #FBFCF8;
    --mgl-section-bg: #EEF4E8;
    --mgl-border-soft: #DDE8D3;

    --mgl-form-border-color: #adb5bd;
    --mgl-form-border-color-disabled: #ced4da;
    --mgl-form-bg: #ffffff;
    --mgl-form-disabled-bg: #e9ecef;
    --mgl-form-readonly-bg: #f8f9fa;
    --mgl-form-focus-border-color: var(--mgl-green);
    --mgl-form-focus-shadow: 0 0 0 0.2rem #417d1940;
    
    --font-primary: var(--mgl-font-family);
    --font-secondary: var(--mgl-font-family);
    
    --border-radius: 8px;
    --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
    --dashboard-shell-header-height: 60px;
    --dashboard-shell-sidebar-width: 250px;
}

/* ===== GLOBAL STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== FORM STYLES ===== */
.form-label {
    font-weight: 600;
    color: var(--dark-color) !important;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

input.form-control,
textarea.form-control,
select.form-select,
.form-control,
.form-select {
    border: 2px solid var(--mgl-form-border-color) !important;
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    font-size: 1rem;
    transition: var(--transition);
    background: var(--mgl-form-bg) !important;
    color: var(--dark-color) !important;
}

.form-control,
.form-select,
.form-control::placeholder,
.form-select::placeholder {
    color: var(--dark-color) !important;
}

/* Form section headers */
.text-primary {
    color: var(--mgl-brown-shade) !important;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--mgl-brown);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* Form text helper */
.form-text {
    color: var(--secondary-color) !important;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    font-style: italic;
}

/* Form check labels */
.form-check-label {
    color: var(--dark-color) !important;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #b0b8c4;
    border-radius: 0.35rem;
    background-color: #f8fafc;
    box-shadow: inset 0 0 0 0.15rem #ffffff;
    transition: var(--transition);
    cursor: pointer;
}

.form-check-input:focus {
    border-color: var(--mgl-dark-green);
    box-shadow: 0 0 0 0.2rem rgba(65, 125, 25, 0.25);
    outline: none;
}

.form-check-input:hover {
    border-color: var(--mgl-dark-green);
}

.form-check-input:checked {
    background-color: var(--mgl-dark-green);
    border-color: var(--mgl-dark-green);
    box-shadow: inset 0 0 0 0.15rem #ffffff, 0 0 0 0.2rem rgba(65, 125, 25, 0.2);
}

.form-check-input:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Override any Bootstrap default text colors */
.form-control:not(:focus):not(:placeholder-shown),
.form-select:not(:focus):not(:placeholder-shown) {
    color: var(--dark-color) !important;
}

.form-control:focus,
.form-select:focus,
.form-control.mgl-important-field:focus,
.form-select.mgl-important-field:focus,
.mgl-important-form .form-control:focus,
.mgl-important-form .form-select:focus {
    border-color: var(--mgl-form-focus-border-color) !important;
    box-shadow: var(--mgl-form-focus-shadow) !important;
    outline: none;
}

.form-control.mgl-important-field,
.form-select.mgl-important-field {
    border-color: var(--mgl-form-border-color) !important;
}

.input-group.mgl-important-field-group .input-group-text {
    border-color: var(--mgl-form-border-color) !important;
}

.mgl-important-form .form-control:not(.is-invalid),
.mgl-important-form .form-select:not(.is-invalid) {
    border-color: var(--mgl-form-border-color) !important;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--danger-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--success-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

.form-label {
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 0.5rem;
}

.form-text {
    color: var(--secondary-color);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.input-group-text {
    background-color: var(--light-color);
    border: 2px solid var(--mgl-form-border-color);
    border-right: none;
    color: var(--secondary-color);
    font-weight: 500;
}

.input-group .form-control {
    border-left: none;
}

.input-group .form-control:focus {
    border-left: none;
    border-color: var(--mgl-form-focus-border-color) !important;
}

.input-group:focus-within .input-group-text {
    border-color: var(--mgl-form-focus-border-color) !important;
    box-shadow: var(--mgl-form-focus-shadow);
}

/* Additional form input overrides to ensure text visibility */
.form-control[type="text"],
.form-control[type="email"],
.form-control[type="password"],
.form-control[type="number"],
.form-control[type="tel"],
.form-control[type="url"],
.form-control[type="search"],
.form-control[type="date"],
.form-control[type="time"],
.form-control[type="datetime-local"],
.form-control[type="month"],
.form-control[type="week"] {
    color: var(--dark-color) !important;
}

/* Ensure textarea text is visible */
.form-control[rows] {
    color: var(--dark-color) !important;
}

/* Override any Bootstrap form validation color overrides */
.form-control.is-valid,
.form-control.is-invalid,
.form-select.is-valid,
.form-select.is-invalid {
    color: var(--dark-color) !important;
}

/* Ensure disabled state text is still visible */
.form-control:disabled,
.form-select:disabled {
    border-color: var(--mgl-form-border-color-disabled) !important;
    background: var(--mgl-form-disabled-bg) !important;
    color: var(--dark-color) !important;
    cursor: not-allowed;
    opacity: 1;
}

.form-control[readonly],
.form-select[readonly] {
    border-color: var(--mgl-form-border-color) !important;
    background: var(--mgl-form-readonly-bg) !important;
    color: var(--dark-color) !important;
    opacity: 1;
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--dark-color);
    background-color: #ffffff;
}

/* ===== NAVBAR STYLES ===== */
.dashboard-navbar,
.navbar.navbar-expand-lg.navbar-dark.fixed-top {
    background: var(--mgl-dark-green) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dashboard-navbar {
    min-height: var(--dashboard-shell-header-height);
    padding: 0;
}

.navbar.navbar-expand-lg.navbar-dark.fixed-top {
    padding: 0.5rem 0;
}

.dashboard-navbar .container-fluid {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: var(--dashboard-shell-header-height);
    padding-inline: 1rem;
}

.dashboard-navbar .navbar-brand,
.navbar.navbar-expand-lg.navbar-dark.fixed-top .navbar-brand {
    color: white !important;
    font-weight: 600;
    font-size: 1.25rem;
}

.dashboard-navbar .navbar-brand:hover,
.navbar.navbar-expand-lg.navbar-dark.fixed-top .navbar-brand:hover {
    color: var(--mgl-light-green) !important;
}

.dashboard-navbar .navbar-nav .nav-link,
.navbar.navbar-expand-lg.navbar-dark.fixed-top .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    transition: var(--transition);
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
}

.dashboard-navbar .navbar-nav .nav-link:hover,
.navbar.navbar-expand-lg.navbar-dark.fixed-top .navbar-nav .nav-link:hover {
    color: white !important;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.dashboard-navbar .navbar-nav .nav-link.active,
.navbar.navbar-expand-lg.navbar-dark.fixed-top .navbar-nav .nav-link.active {
    color: white !important;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    box-shadow: none;
    font-weight: inherit;
}

.dashboard-navbar .navbar-collapse,
.navbar.navbar-expand-lg.navbar-dark.fixed-top .navbar-collapse {
    align-items: center;
}

.dashboard-navbar .dashboard-top-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.dashboard-navbar .dashboard-top-nav > .nav-item {
    margin: 0;
}

.dashboard-navbar .dashboard-top-nav > .nav-item > .nav-link,
.dashboard-navbar .dashboard-top-nav > .nav-item > .dropdown-toggle,
.dashboard-navbar .dashboard-utility-nav > .nav-item > .nav-link,
.dashboard-navbar .dashboard-utility-nav > .nav-item > .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
}

.dashboard-navbar .dashboard-utility-nav {
    margin-left: auto;
    gap: 0.35rem;
    padding: 0;
}

.dashboard-navbar .dashboard-utility-nav > .nav-item.me-2 {
    margin-right: 0 !important;
}

.dashboard-navbar .dropdown-menu,
.navbar.navbar-expand-lg.navbar-dark.fixed-top .dropdown-menu {
    background: var(--mgl-dark-green);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    border-radius: var(--border-radius);
    backdrop-filter: blur(10px);
}

.dashboard-navbar .dropdown-item,
.navbar.navbar-expand-lg.navbar-dark.fixed-top .dropdown-item {
    color: rgba(255, 255, 255, 0.9);
    transition: var(--transition);
    padding: 0.75rem 1rem;
}

.dashboard-navbar .dropdown-item:hover,
.navbar.navbar-expand-lg.navbar-dark.fixed-top .dropdown-item:hover {
    background: var(--mgl-green);
    color: white;
    transform: translateX(5px);
}

.navbar.navbar-expand-lg.navbar-dark.fixed-top .dropdown-item.active,
.navbar.navbar-expand-lg.navbar-dark.fixed-top .dropdown-item[aria-current="page"] {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-weight: 700;
}

.dashboard-navbar .dropdown-divider,
.navbar.navbar-expand-lg.navbar-dark.fixed-top .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.2);
    margin: 0.5rem 0;
}

/* Basket icon + inline count */
.navbar .basket-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.navbar .basket-count {
    background: var(--danger-color);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.25rem 0.45rem;
    border-radius: 999px;
    min-width: 1.25rem;
    text-align: center;
}

.navbar .public-basket-link {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 0.5rem;
    padding: 0.45rem 0.7rem;
}

.navbar .public-basket-link:hover,
.navbar .public-basket-link:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 575.98px) {
    .public-basket-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.brand-logo img {
    display: block;
    flex-shrink: 0;
}

.brand-logo i {
    color: var(--mgl-light-green);
    font-size: 1.5rem;
}

/* Additional navbar overrides to ensure styles are applied */
.dashboard-navbar,
.navbar.navbar-expand-lg.navbar-dark.fixed-top {
    background-color: var(--mgl-dark-green) !important;
    background-image: none !important;
}

.dashboard-navbar *,
.navbar.navbar-expand-lg.navbar-dark.fixed-top * {
    color: white !important;
}

.dashboard-navbar .wallet-balance-badge,
.navbar.navbar-expand-lg.navbar-dark.fixed-top .wallet-balance-badge {
    background-color: #f1f3f5 !important;
    color: #1f2937 !important;
    border: 1px solid rgba(31, 41, 55, 0.25);
    font-weight: 600;
}

.dashboard-navbar .dashboard-shell-toggle,
.dashboard-navbar .dashboard-navbar-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--border-radius);
    background: transparent;
}

.dashboard-navbar .dashboard-shell-toggle:hover,
.dashboard-navbar .dashboard-shell-toggle:focus,
.dashboard-navbar .dashboard-navbar-menu-toggle:hover,
.dashboard-navbar .dashboard-navbar-menu-toggle:focus,
.navbar.navbar-expand-lg.navbar-dark.fixed-top .navbar-toggler:hover,
.navbar.navbar-expand-lg.navbar-dark.fixed-top .navbar-toggler:focus {
    background: rgba(255, 255, 255, 0.12);
}

.dashboard-navbar .dashboard-shell-toggle {
    margin-right: 0.5rem;
}

.dashboard-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    min-height: var(--dashboard-shell-header-height);
    margin: 0;
    padding-block: 0;
}

.dashboard-navbar .dashboard-utility-nav > .nav-item > .nav-link,
.dashboard-navbar .dashboard-utility-nav > .nav-item > .dropdown-toggle {
    min-height: calc(var(--dashboard-shell-header-height) - 16px);
    padding-block: 0.35rem;
}

.navbar.navbar-expand-lg.navbar-dark.fixed-top .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (min-width: 1024px) {
    .dashboard-navbar .dashboard-shell-toggle,
    .dashboard-navbar .dashboard-navbar-menu-toggle {
        display: none;
    }

    .dashboard-navbar .container-fluid {
        gap: 1rem;
        flex-wrap: nowrap;
        padding-inline: 1.5rem;
    }

    .dashboard-navbar .navbar-brand {
        margin-right: 1rem;
        flex: 0 0 auto;
        min-width: 0;
        white-space: nowrap;
    }

    .dashboard-navbar .brand-logo {
        min-width: 0;
        flex-wrap: nowrap;
    }

    .dashboard-navbar .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
        flex: 1 1 auto;
        min-width: 0;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 1rem;
    }

    .dashboard-navbar .dashboard-top-nav {
        flex-wrap: nowrap;
        min-width: 0;
    }

    .dashboard-navbar .dashboard-utility-nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 0.5rem;
        margin: 0 0 0 auto;
        padding: 0;
        min-width: 0;
    }

    .dashboard-navbar .dashboard-utility-nav > .nav-item {
        display: flex;
        align-items: center;
        margin: 0;
        flex: 0 0 auto;
    }

    .dashboard-navbar .dashboard-utility-nav > .nav-item.dropdown {
        position: relative;
    }

    .dashboard-navbar .dashboard-top-nav > .nav-item > .nav-link,
    .dashboard-navbar .dashboard-top-nav > .nav-item > .dropdown-toggle,
    .dashboard-navbar .dashboard-utility-nav > .nav-item > .nav-link,
    .dashboard-navbar .dashboard-utility-nav > .nav-item > .dropdown-toggle {
        white-space: nowrap;
    }

    .dashboard-navbar #userDropdown {
        max-width: 100%;
    }

    .dashboard-navbar .dashboard-utility-nav > .nav-item.dropdown > .dropdown-menu {
        position: absolute;
        top: calc(100% + 0.35rem);
        right: 0;
        left: auto;
        width: max-content;
        min-width: 15rem;
        margin-top: 0;
        z-index: 1040;
    }

    .dashboard-navbar .navbar-collapse {
        overflow: visible;
    }
}

@media (max-width: 1023.98px) {
    .dashboard-navbar .container-fluid {
        row-gap: 0.75rem;
    }

    .dashboard-navbar .navbar-brand {
        margin-right: auto;
    }

    .dashboard-navbar .navbar-collapse {
        width: 100%;
        flex-basis: 100%;
        margin-top: 0.25rem;
    }

    .dashboard-navbar .dashboard-top-nav,
    .dashboard-navbar .dashboard-utility-nav {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
        gap: 0.35rem;
        margin-top: 0.5rem;
    }

    .dashboard-navbar .dashboard-utility-nav {
        margin-left: 0;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .dashboard-navbar .dashboard-top-nav > .nav-item,
    .dashboard-navbar .dashboard-utility-nav > .nav-item {
        width: 100%;
    }

    .dashboard-navbar .dashboard-top-nav > .nav-item > .nav-link,
    .dashboard-navbar .dashboard-top-nav > .nav-item > .dropdown-toggle,
    .dashboard-navbar .dashboard-utility-nav > .nav-item > .nav-link,
    .dashboard-navbar .dashboard-utility-nav > .nav-item > .dropdown-toggle {
        width: 100%;
        justify-content: flex-start;
    }

    .dashboard-navbar .dropdown-menu {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        width: 100%;
        margin-top: 0.35rem;
        box-shadow: none;
    }
}

/* ===== PUBLIC LAYOUT STYLES ===== */
.public-page {
    background: var(--mgl-page-bg);
    min-height: 100vh;
}

.public-page .navbar {
    background: rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.public-page .navbar-brand {
    color: white !important;
}

.public-page .navbar .brand-logo img {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    background: #f7f4e9;
    box-shadow: 0 0.2rem 0.55rem rgba(18, 47, 13, 0.2);
    object-fit: contain;
}

.public-page .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    transition: var(--transition);
}

.public-page .navbar-nav .nav-link:hover {
    color: white !important;
    transform: translateY(-2px);
}

.public-page .btn-outline-light {
    border: 2px solid rgba(255, 255, 255, 0.8);
    color: white;
    transition: var(--transition);
}

.public-page .btn-outline-light:hover {
    background: white;
    color: var(--mgl-green);
    transform: translateY(-2px);
}

.public-page .btn-success {
    background: var(--mgl-green);
    border: 2px solid var(--mgl-green);
    transition: var(--transition);
}

.public-page .btn-success:hover {
    background: var(--mgl-dark-green);
    border-color: var(--mgl-dark-green);
    transform: translateY(-2px);
}

/* Public layout specific overrides */
.public-wrapper .main-content {
    margin-left: 0 !important; /* Remove sidebar margin */
    background: var(--mgl-page-bg) !important; /* Remove dashboard background */
}

.public-wrapper .page-header {
    background: rgba(255, 255, 255, 0.1) !important; /* Semi-transparent header */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}

.public-wrapper .page-title {
    color: white !important;
}

.public-wrapper .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.8) !important;
}

.public-wrapper .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ===== HERO SECTION ===== */
.hero-section {
    padding: 80px 0;
    margin: 40px 20px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--mgl-dark-green) 0%, var(--mgl-light-green) 100%);
    color: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--mgl-dark-green) 0%, var(--mgl-light-green) 100%);
    border-radius: 20px;
    z-index: -1;
}

.hero-section .container {
    position: relative;
    z-index: 1;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    font-family: var(--font-secondary);
    text-transform: uppercase;
}

.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    line-height: 1.8;
}

.hero-buttons .btn {
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.hero-image {
    text-align: center;
    opacity: 0.8;
}

/* ===== FEATURE CARDS ===== */
.features-section {
    background: var(--mgl-card-bg);
    padding: 80px 0;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--mgl-green);
    margin-bottom: 1rem;
    font-family: var(--font-secondary);
    text-transform: uppercase;
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--secondary-color);
    margin-bottom: 3rem;
}

.feature-card {
    background: var(--mgl-card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    height: 100%;
    border: 1px solid var(--mgl-border-soft);
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.feature-icon {
    color: var(--mgl-green);
}

.feature-card h4 {
    color: var(--mgl-dark-green);
    margin-bottom: 1rem;
    font-weight: 600;
    text-transform: uppercase;
}

.feature-card p {
    color: var(--secondary-color);
    line-height: 1.6;
}

/* ===== STEP CARDS ===== */
.how-it-works-section {
    background: var(--mgl-section-bg);
    padding: 80px 0;
}

.step-card {
    background: var(--mgl-card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    height: 100%;
    border: 1px solid var(--mgl-border-soft);
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.step-number {
    width: 60px;
    height: 60px;
    background: var(--mgl-green);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto;
}

.step-card h4 {
    color: var(--mgl-dark-green);
    margin-bottom: 1rem;
    font-weight: 600;
    text-transform: uppercase;
}

.step-card p {
    color: var(--secondary-color);
    line-height: 1.6;
}

/* ===== STATS SECTION ===== */
.stats-section {
    background: var(--mgl-page-bg);
    padding: 80px 0;
}

.stat-item {
    text-align: center;
    padding: 2rem 1rem;
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--mgl-green);
    margin-bottom: 0.5rem;
    font-family: var(--font-secondary);
}

.stat-label {
    font-size: 1.1rem;
    color: var(--secondary-color);
    font-weight: 500;
}

/* ===== CTA SECTION ===== */
.cta-section {
    background: var(--mgl-green) !important;
    padding: 80px 0;
}

.cta-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: var(--font-secondary);
    text-transform: uppercase;
}

.cta-section .lead {
    font-size: 1.3rem;
    opacity: 0.9;
}

.cta-buttons .btn {
    padding: 15px 35px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.cta-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* ===== TESTIMONIALS ===== */
.testimonials-section {
    background: var(--mgl-section-bg);
    padding: 80px 0;
}

.testimonial-card {
    background: var(--mgl-card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    height: 100%;
    border: 1px solid var(--mgl-border-soft);
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.testimonial-text {
    font-style: italic;
    color: var(--secondary-color);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.testimonial-author strong {
    color: var(--mgl-dark-green);
    font-weight: 600;
}

/* ===== FOOTER ===== */
.footer {
    background: var(--dark-color);
    color: white;
    padding: 60px 0 30px;
}

.footer h5, .footer h6 {
    color: var(--mgl-light-green);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.footer p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

.footer a,
.footer small,
.footer .small,
.footer .text-muted {
    color: rgba(255, 255, 255, 0.78) !important;
}

.footer ul li {
    margin-bottom: 0.5rem;
}

.footer ul li a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: var(--transition);
}

.footer ul li a:hover {
    color: var(--mgl-light-green);
}

.social-links a {
    font-size: 1.5rem;
    transition: var(--transition);
}

.social-links a:hover {
    color: var(--mgl-light-green) !important;
    transform: translateY(-3px);
}

/* Compact public footer */
.public-footer { margin-top:0; padding:2.6rem 0 1.25rem; background:#303740; }
.public-footer__main { display:grid; grid-template-columns:minmax(15rem,1.3fr) 2fr; gap:clamp(2rem,6vw,6rem); align-items:start; }
.public-footer__brand { display:inline-block; margin-bottom:.6rem; color:#fff !important; font-size:1.25rem; font-weight:700; text-decoration:none; }
.public-footer__identity p { max-width:25rem; margin:0; font-size:.9rem; color:rgba(255,255,255,.68); }
.public-footer__nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
.public-footer__nav h2 { margin:0 0 .65rem; color:#a9cf83; font-size:.76rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.public-footer__nav a { display:block; width:max-content; max-width:100%; margin:.35rem 0; color:rgba(255,255,255,.82) !important; font-size:.9rem; line-height:1.35; text-decoration:none; }
.public-footer__nav a:hover,.public-footer__nav a:focus-visible { color:#fff !important; text-decoration:underline; }
.public-footer__meta { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:2rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.13); color:rgba(255,255,255,.58); font-size:.76rem; }
.public-footer__meta > div { display:flex; gap:1rem; }
.public-footer__meta small { display:inline-block; margin-left:.25rem; padding:.08rem .35rem; border:1px solid rgba(255,255,255,.18); border-radius:999px; color:rgba(255,255,255,.58) !important; font-size:.64rem; text-transform:uppercase; }
@media (max-width:767.98px) { .public-footer__main { grid-template-columns:1fr; gap:2rem; } .public-footer__nav { grid-template-columns:repeat(2,minmax(0,1fr)); } .public-footer__meta { align-items:flex-start; flex-direction:column; } }
@media (max-width:419.98px) { .public-footer__nav { grid-template-columns:1fr; } }

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .hero-buttons .btn {
        display: block;
        margin: 1rem auto;
        width: 80%;
    }
    
    .cta-buttons .btn {
        display: block;
        margin: 1rem auto;
        width: 80%;
    }
}

/* ===== AUTH PAGE STYLES ===== */
.auth-page {
    background: linear-gradient(135deg, var(--mgl-dark-green) 0%, var(--mgl-brown) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-wrapper {
    width: 100%;
    max-width: 450px;
}

.auth-content {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    padding: 2.5rem;
}

.login-container {
    text-align: center;
    color: white;
}

.login-header {
    margin-bottom: 2rem;
}

.mgl-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.logo-icon {
    font-size: 2.5rem;
    margin-right: 1rem;
    color: var(--mgl-light-green);
}

.logo-text {
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--font-secondary);
    text-transform: uppercase;
}

.subtitle {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    opacity: 0.9;
}

.eco-badge {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 25px;
    display: inline-block;
    font-size: 0.9rem;
}

.login-form {
    background: rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: var(--border-radius);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.form-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

.auth-page .form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: white;
}

.auth-page .form-label i {
    margin-right: 0.5rem;
    color: var(--mgl-light-green);
}

.input-group {
    position: relative;
}

.auth-page .form-control {
    width: 100%;
    padding: 12px 15px;
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: var(--transition);
}

.auth-page .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.auth-page .form-control:focus {
    outline: none;
    border-color: var(--mgl-form-focus-border-color);
    box-shadow: var(--mgl-form-focus-shadow);
}

.auth-page .form-control.is-invalid {
    border-color: var(--danger-color);
}

.invalid-feedback {
    color: #ffebee;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.form-check {
    text-align: left;
    margin-bottom: 1.5rem;
}

.form-check-label {
    color: white;
    font-size: 0.9rem;
}

.btn-login {
    width: 100%;
    padding: 15px;
    background: var(--mgl-green);
    border: none;
    border-radius: var(--border-radius);
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    transition: var(--transition);
    margin-bottom: 1.5rem;
}

.btn-login:hover {
    background: var(--mgl-dark-green);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.btn-login:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-login.loading {
    background: var(--mgl-brown);
}

.eco-stats {
    display: flex;
    justify-content: space-around;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.eco-stat {
    text-align: center;
}

.eco-stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mgl-light-green);
}

.eco-stat-label {
    font-size: 0.8rem;
    opacity: 0.8;
}

.login-footer {
    margin-top: 2rem;
    opacity: 0.8;
    font-size: 0.9rem;
}

/* Register Link Section */
.register-link {
    margin: 2rem 0;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.register-link .btn-outline-success {
    border: 2px solid var(--mgl-green);
    color: var(--mgl-green);
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.register-link .btn-outline-success:hover {
    background-color: var(--mgl-green);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(65, 125, 25, 0.3);
}

.register-link .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ===== AUTH PAGES STYLES ===== */
.brand-logo {
    color: var(--mgl-dark-green);
}

.brand-logo i {
    font-size: 2.5rem !important;
}

.auth-card {
    border-radius: 15px;
}

.auth-card .form-control:focus {
    border-color: var(--mgl-form-focus-border-color);
    box-shadow: var(--mgl-form-focus-shadow);
}

.auth-card .btn-success {
    background-color: var(--mgl-dark-green);
    border-color: var(--mgl-dark-green);
}

.auth-card .btn-success:hover {
    background-color: var(--mgl-light-green);
    border-color: var(--mgl-light-green);
}

.auth-card .text-primary {
    color: var(--mgl-dark-green) !important;
}

/* ===== DASHBOARD STYLES ===== */
.main-wrapper {
    display: flex;
    min-height: 100vh;
    padding-top: var(--dashboard-shell-header-height);
    position: relative;
}

.sidebar {
    width: var(--dashboard-shell-sidebar-width);
    max-width: 85vw;
    background: var(--dark-color);
    color: white;
    padding: 1rem;
    position: fixed;
    top: var(--dashboard-shell-header-height);
    left: 0;
    height: calc(100vh - var(--dashboard-shell-header-height));
    overflow-y: auto;
    z-index: 1035;
    transform: translateX(-100%);
    transition: transform 0.3s ease, box-shadow 0.3s ease, visibility 0.3s ease;
    visibility: hidden;
    pointer-events: none;
    box-shadow: none;
}

.dashboard-shell.dashboard-sidebar-open {
    overflow: hidden;
}

.dashboard-shell.dashboard-sidebar-open .sidebar {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.32);
}

.sidebar-backdrop {
    position: fixed;
    inset: var(--dashboard-shell-header-height) 0 0;
    border: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1030;
}

.dashboard-shell.dashboard-sidebar-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.sidebar-header h5 {
    color: var(--mgl-light-green);
    margin-bottom: 0;
    font-weight: 600;
}

.sidebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: var(--border-radius);
    background: transparent;
    color: white;
}

.sidebar-nav .nav-link {
    color: rgba(255, 255, 255, 0.8);
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
    transition: var(--transition);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active {
    background: var(--mgl-green);
    color: white;
    transform: translateX(5px);
}

.sidebar-nav .nav-link i {
    margin-right: 0.75rem;
    width: 20px;
    text-align: center;
}

.sidebar-nav .nav-group {
    margin-bottom: 0.25rem;
}

.sidebar-nav .nav-group-toggle {
    width: 100%;
    justify-content: space-between;
    border: 0;
    background: transparent;
    text-align: left;
}

.sidebar-nav .nav-group-toggle .nav-group-label {
    display: inline-flex;
    align-items: center;
}

.sidebar-nav .nav-group-chevron {
    margin-right: 0;
    width: auto;
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.sidebar-nav .nav-group-toggle.collapsed .nav-group-chevron {
    transform: rotate(-90deg);
}

.sidebar-subnav {
    padding-left: 1rem;
    margin-bottom: 0.5rem;
}

.sidebar-subnav .nav-link {
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

.main-content {
    flex: 1;
    width: 100%;
    margin-left: 0;
    background: #f8f9fa;
    min-height: calc(100vh - var(--dashboard-shell-header-height));
    min-width: 0;
}

@media (min-width: 1024px) {
    .dashboard-shell {
        overflow: auto;
    }

    .sidebar {
        transform: none;
        visibility: visible;
        pointer-events: auto;
        box-shadow: none;
    }

    .sidebar-backdrop,
    .sidebar-close {
        display: none;
    }

    .dashboard-shell .main-content {
        margin-left: var(--dashboard-shell-sidebar-width);
        width: calc(100% - var(--dashboard-shell-sidebar-width));
        max-width: calc(100% - var(--dashboard-shell-sidebar-width));
    }
}

.page-header {
    background: white;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.dashboard-page-header {
    position: relative;
}

.dashboard-page-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
}

.dashboard-page-header .container-fluid,
.dashboard-page-header .row,
.page-content > .container-fluid {
    min-width: 0;
    max-width: 100%;
}

.dashboard-page-header__actions > *,
.dashboard-page-header__actions > .d-flex,
.dashboard-page-header__actions > .btn-group,
.dashboard-page-header__actions > form {
    max-width: 100%;
}

.dashboard-page-header__actions > .d-flex,
.dashboard-page-header__actions > form.d-flex,
.dashboard-page-header__actions > .btn-group {
    flex-wrap: wrap;
}

.dashboard-shell .page-content .nav.nav-tabs {
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 0.25rem;
}

.dashboard-shell .page-content .nav.nav-tabs .nav-item {
    flex: 0 0 auto;
}

.dashboard-shell .page-content .nav.nav-tabs .nav-link {
    white-space: nowrap;
}

.dashboard-shell .page-content form.d-flex .form-control,
.dashboard-shell .page-content form.d-flex .form-select {
    min-width: 0;
}

.page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--mgl-dark-green);
    margin-bottom: 0.25rem;
    font-family: var(--font-secondary);
    line-height: 1.2;
}

.breadcrumb {
    background: none;
    padding: 0;
    margin: 0;
}

.breadcrumb-item a {
    color: var(--mgl-green);
    text-decoration: none;
}

.breadcrumb-item.active {
    color: var(--secondary-color);
}

.page-content {
    padding: 1.25rem 1.5rem 1.75rem;
}

@media (max-width: 767.98px) {
    .page-header {
        padding: 0.85rem 1rem;
    }

    .page-content {
        padding: 1rem 1rem 1.25rem;
    }

    .page-title {
        font-size: 1.25rem;
    }

    .dashboard-page-header__actions {
        justify-content: flex-start;
        width: 100%;
    }

    .dashboard-page-header__actions > .d-flex,
    .dashboard-page-header__actions > form.d-flex,
    .dashboard-page-header__actions > .btn-group {
        width: 100%;
        justify-content: flex-start;
    }

    .dashboard-shell .page-content form.d-flex,
    .dashboard-shell .page-content form .d-flex.gap-1,
    .dashboard-shell .page-content form .d-flex.gap-2,
    .dashboard-shell .page-content form .d-flex.gap-3,
    .dashboard-shell .page-content form .d-inline-flex.gap-1,
    .dashboard-shell .page-content form .d-inline-flex.gap-2,
    .dashboard-shell .page-content form .d-inline-flex.gap-3 {
        flex-wrap: wrap;
        align-items: stretch !important;
    }

    .dashboard-shell .page-content form.d-flex > *,
    .dashboard-shell .page-content form .d-flex.gap-1 > *,
    .dashboard-shell .page-content form .d-flex.gap-2 > *,
    .dashboard-shell .page-content form .d-flex.gap-3 > *,
    .dashboard-shell .page-content form .d-inline-flex.gap-1 > *,
    .dashboard-shell .page-content form .d-inline-flex.gap-2 > *,
    .dashboard-shell .page-content form .d-inline-flex.gap-3 > * {
        max-width: 100%;
    }

    .dashboard-shell .page-content form .col-12.d-flex > .btn,
    .dashboard-shell .page-content form .col-12.d-inline-flex > .btn,
    .dashboard-shell .page-content form.d-flex > .btn {
        flex: 1 1 auto;
    }

    .dashboard-shell .page-content .btn-group.flex-wrap {
        gap: 0.5rem;
    }

    .dashboard-shell .page-content .btn-group.flex-wrap > .btn {
        border-radius: var(--border-radius) !important;
    }
}

/* ===== DASHBOARD CARDS ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 1.5rem;
    border: 1px solid #e9ecef;
    transition: var(--transition);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Stat card color variants */
.stat-card.blue {
    border-left: 4px solid var(--mgl-brown);
}

.stat-card.blue .stat-icon {
    color: var(--mgl-brown);
}

.stat-card.teal {
    border-left: 4px solid var(--mgl-light-green);
}

.stat-card.teal .stat-icon {
    color: var(--mgl-light-green);
}

.stat-card.sage {
    border-left: 4px solid var(--mgl-brown-shade);
}

.stat-card.sage .stat-icon {
    color: var(--mgl-brown-shade);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mgl-dark-green);
    margin: 0;
}

.card-icon {
    width: 40px;
    height: 40px;
    background: var(--mgl-green);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--mgl-green);
    margin-bottom: 0.5rem;
    font-family: var(--font-secondary);
}

.stat-change {
    font-size: 0.9rem;
    color: var(--success-color);
    font-weight: 500;
}

.stat-change.negative {
    color: var(--danger-color);
}

/* ===== TABLES ===== */
.table-responsive {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
}

.table-responsive > .table {
    min-width: 100%;
}

.table-responsive td.d-flex,
.table-responsive td.d-inline-flex {
    flex-wrap: wrap;
    align-items: center;
}

.table {
    margin: 0;
}

.table th {
    background: var(--light-color);
    border: none;
    font-weight: 600;
    color: var(--mgl-dark-green);
    padding: 1rem;
}

.table td {
    padding: 1rem;
    border: none;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}

.table tbody tr:hover {
    background: #f8f9fa;
}

@media (max-width: 767.98px) {
    .dashboard-shell .page-content .table-responsive > .table th,
    .dashboard-shell .page-content .table-responsive > .table td {
        white-space: nowrap;
    }

    .dashboard-shell .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }

    .dashboard-shell .modal-content {
        max-height: calc(100vh - 1rem);
    }

    .dashboard-shell .modal-header,
    .dashboard-shell .modal-body,
    .dashboard-shell .modal-footer {
        padding: 0.85rem 1rem;
    }

    .dashboard-shell .modal-footer {
        flex-wrap: wrap;
    }

    .dashboard-shell .modal-footer > * {
        flex: 1 1 auto;
    }
}

/* ===== ALERTS ===== */
.alert {
    border: none;
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.alert-success {
    background: #d4edda;
    color: #155724;
}

.alert-danger {
    background: #f8d7da;
    color: #721c24;
}

.alert i {
    margin-right: 0.5rem;
}

/* ===== UTILITIES ===== */
.text-success {
    color: var(--success-color) !important;
}

.text-danger {
    color: var(--danger-color) !important;
}

.text-warning {
    color: var(--warning-color) !important;
}

.text-info {
    color: var(--info-color) !important;
}

.text-green {
    color: var(--mgl-green) !important;
}

.text-teal {
    color: var(--mgl-light-green) !important;
}

.text-sage {
    color: var(--mgl-brown) !important;
}

.bg-success {
    background-color: var(--success-color) !important;
}

.bg-light {
    background-color: var(--light-color) !important;
}

.bg-green {
    background-color: var(--mgl-green) !important;
}

.bg-teal {
    background-color: var(--mgl-light-green) !important;
}

.bg-sage {
    background-color: var(--mgl-brown) !important;
}

.bg-blue {
    background-color: var(--mgl-brown) !important;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* ===== LOADING STATES ===== */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
} 

/* ===== MEMBER PROGRAM STYLES ===== */

/* Commission Rate Display */
.commission-rate {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--mgl-green);
    margin: 0.5rem 0;
    font-family: var(--font-secondary);
}

/* Commission Formula */
.commission-formula {
    border: 2px solid var(--mgl-green);
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.formula-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1rem 0;
}

.formula-part {
    background: white;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    color: var(--mgl-dark-green);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.formula-operator {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mgl-green);
}

.formula-result {
    background: var(--mgl-green);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Commission Table */
.commission-table {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.commission-table thead th {
    background: var(--mgl-dark-green);
    color: white;
    border: none;
    padding: 1rem;
    font-weight: 600;
}

.commission-table tbody td {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #e9ecef;
}

.commission-table .badge {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

/* Tier Cards */
.tier-card {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: 2px solid transparent;
    transition: var(--transition);
    height: 100%;
}

.tier-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.tier-card .tier-icon {
    color: var(--mgl-green);
}

.tier-card .tier-rate {
    font-size: 2rem;
    font-weight: 700;
    color: var(--mgl-green);
    margin: 0.5rem 0;
    font-family: var(--font-secondary);
}

.tier-card .tier-requirements {
    background: #f8f9fa;
    padding: 0.5rem;
    border-radius: var(--border-radius);
    margin-top: 1rem;
}

/* Rank Table */
.rank-table {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.rank-table thead th {
    background: var(--mgl-green);
    color: white;
    border: none;
    padding: 1rem;
    font-weight: 600;
}

.rank-table tbody td {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #e9ecef;
}

.rank-table tbody tr:hover {
    background-color: #f8f9fa;
}

/* Rank Badges */
.rank-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.rank-starter {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

.rank-builder {
    background: linear-gradient(135deg, #17a2b8, #6f42c1);
    color: white;
}

.rank-leader {
    background: linear-gradient(135deg, #ffc107, #fd7e14);
    color: white;
}

.rank-partner {
    background: linear-gradient(135deg, #dc3545, #e83e8c);
    color: white;
}

.rank-global {
    background: linear-gradient(135deg, #6f42c1, #343a40);
    color: white;
}

/* Feature Highlights */
.feature-highlight {
    background: white;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    height: 100%;
}

.feature-highlight:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.feature-highlight h6 {
    color: var(--mgl-dark-green);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.feature-highlight small {
    color: #6c757d;
    font-size: 0.85rem;
}

/* FAQ Section */
.faq-item {
    background: white;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: 1rem;
    transition: var(--transition);
}

.faq-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.faq-item h5 {
    color: var(--mgl-dark-green);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.faq-item p {
    color: #6c757d;
    margin-bottom: 0;
    line-height: 1.6;
}

/* Earnings Calculator Modal */
.results-card {
    border: 2px solid var(--mgl-green);
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #dee2e6;
}

.result-item:last-child {
    border-bottom: none;
}

.result-item span {
    color: #6c757d;
    font-weight: 500;
}

.result-item strong {
    color: var(--mgl-dark-green);
    font-size: 1.1rem;
}

/* Responsive Table Adjustments */
@media (max-width: 768px) {
    .commission-table,
    .rank-table {
        font-size: 0.9rem;
    }
    
    .commission-table thead th,
    .rank-table thead th {
        padding: 0.75rem 0.5rem;
    }
    
    .commission-table tbody td,
    .rank-table tbody td {
        padding: 0.75rem 0.5rem;
    }
    
    .rank-badge {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
    
    .formula-display {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .formula-part,
    .formula-result {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}

/* Order breakdown dashboard layout */
.order-breakdown-card .card-header {
    padding: 0.55rem 0.9rem;
}

.order-breakdown-card .card-body {
    padding: 0.8rem;
}

.order-breakdown-card .card-body.p-0 {
    padding: 0 !important;
}

.order-breakdown-compact > :not(caption) > * > * {
    padding: 0.38rem 0.55rem;
}

.order-breakdown-kpi {
    font-weight: 700;
}

.order-breakdown-order-number {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2937;
    letter-spacing: 0.01em;
}

.order-breakdown-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid #eef2f7;
}

.order-breakdown-meta-row:last-child {
    border-bottom: 0;
}

.order-breakdown-meta-label {
    color: #6c757d;
    font-size: 0.82rem;
}

.order-breakdown-meta-value {
    font-weight: 600;
    color: #212529;
    text-align: right;
}

.order-breakdown-kpi-tile {
    background: #f8fafc;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    padding: 0.5rem 0.6rem;
    height: 100%;
}

.order-breakdown-kpi-label {
    display: block;
    margin-bottom: 0.15rem;
    color: #6c757d;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.order-breakdown-kpi-value {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
}

.order-breakdown-stat-card {
    background: #f8fafc;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    padding: 0.75rem 0.8rem;
    height: 100%;
}

.order-breakdown-stat-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #6c757d;
    margin-bottom: 0.4rem;
}

.order-breakdown-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.9rem;
    padding: 0.3rem 0;
    font-size: 0.86rem;
    border-bottom: 1px dashed #e9ecef;
}

.order-breakdown-stat-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.order-breakdown-stat-row span {
    color: #495057;
}

.order-breakdown-stat-row strong {
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    text-decoration: none;
}

/* Keep semantic text classes compact in this table-heavy view */
.order-breakdown-semantic .text-primary,
.order-breakdown-semantic .text-success,
.order-breakdown-semantic .text-warning {
    font-size: inherit;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
    text-shadow: none;
}

.order-breakdown-semantic .text-warning {
    color: #d97706 !important;
}

/* Keep highlighted financial values prominent, not link-like */
.order-breakdown-semantic .order-breakdown-kpi-value.text-success,
.order-breakdown-semantic .order-breakdown-kpi-value.text-warning,
.order-breakdown-semantic .order-breakdown-kpi-value.text-primary,
.order-breakdown-semantic .order-breakdown-stat-row strong.text-success,
.order-breakdown-semantic .order-breakdown-stat-row strong.text-warning,
.order-breakdown-semantic .order-breakdown-stat-row strong.text-primary {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    font-weight: 700;
}

/* Member complete-payment page */
.payment-page {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

.payment-page__notice {
    margin-bottom: 1rem;
}

.payment-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    padding: 0.9rem 1.15rem;
    background: #ffffff;
    border: 1px solid var(--mgl-border-soft);
    border-left: 4px solid var(--mgl-dark-green);
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
}

.payment-summary__label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: 0.1rem;
}

.payment-summary__amount {
    display: block;
    font-size: clamp(1.6rem, 4vw, 2.1rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--mgl-light-green);
}

.payment-summary__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 2rem;
    margin: 0;
}

.payment-summary__meta-item dt {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a9299;
    margin-bottom: 0.05rem;
}

.payment-summary__meta-item dd {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
}

.payment-page__section-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6c757d;
    margin: 1.25rem 0 0.6rem;
}

.payment-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.payment-option {
    background: #ffffff;
    border: 1px solid var(--mgl-border-soft);
    border-radius: var(--border-radius);
    padding: 1rem 1.15rem;
}

.payment-option--primary {
    border-color: #bcd4a6;
    background: linear-gradient(180deg, #fbfdf9 0%, #ffffff 60%);
    box-shadow: 0 1px 4px rgba(54, 109, 19, 0.08);
}

.payment-option__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

.payment-option__info {
    flex: 1 1 20rem;
    min-width: 0;
}

.payment-option__heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 0.75rem;
}

.payment-option__logo {
    display: block;
    height: 28px;
    width: auto;
    max-width: 100%;
}

.payment-option__title {
    font-size: 1rem;
    font-weight: 700;
    color: #212529;
    margin: 0;
}

.payment-option__text {
    margin: 0.3rem 0 0;
    max-width: 72ch;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #6c757d;
}

.payment-option__action {
    flex: 0 0 auto;
    margin: 0;
}

.payment-option__cta {
    white-space: nowrap;
}

.payment-option--primary .payment-option__cta {
    padding: 0.55rem 1.4rem;
    font-weight: 600;
}

.payment-page .payment-option__cta.btn-primary {
    background-color: var(--mgl-dark-green);
    border-color: var(--mgl-dark-green);
    color: #ffffff;
}

.payment-page .payment-option__cta.btn-primary:hover,
.payment-page .payment-option__cta.btn-primary:focus,
.payment-page .payment-option__cta.btn-primary:active {
    background-color: var(--mgl-light-green);
    border-color: var(--mgl-light-green);
}

.payment-page .payment-option__cta.btn-primary:focus-visible {
    box-shadow: var(--mgl-form-focus-shadow);
}

.payment-option--eft .payment-option__row {
    margin-bottom: 0.85rem;
}

.payment-eft__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 2rem;
    margin: 0;
    max-width: 920px;
}

.payment-eft__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #eef2ea;
}

.payment-eft__item dt {
    font-size: 0.82rem;
    font-weight: 500;
    color: #6c757d;
}

.payment-eft__item dd {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #212529;
    text-align: right;
    overflow-wrap: anywhere;
}

.payment-eft__reference {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    margin-top: 0.9rem;
    padding: 0.6rem 0.85rem;
    max-width: 920px;
    background: var(--mgl-section-bg);
    border: 1px solid #c9dcb6;
    border-radius: var(--border-radius);
}

.payment-eft__reference-text {
    min-width: 0;
}

.payment-eft__reference-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5d6f4b;
    margin-bottom: 0.05rem;
}

.payment-eft__reference-value {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #1f2d12;
    overflow-wrap: anywhere;
}

.payment-eft__copy {
    flex: 0 0 auto;
}

.payment-eft__note {
    margin: 0.75rem 0 0;
    max-width: 920px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #8a9299;
}

@media (max-width: 767.98px) {
    .payment-summary {
        gap: 0.75rem 1.25rem;
    }

    .payment-summary__meta {
        gap: 0.35rem 1.5rem;
    }

    .payment-eft__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
}

@media (max-width: 575.98px) {
    .payment-option__action,
    .payment-option__cta,
    .payment-eft__copy {
        width: 100%;
    }

    .payment-eft__reference {
        align-items: stretch;
    }
}

/* Public catalogue */
.catalogue-hero { background: linear-gradient(135deg, #eff8f0, #f8fbf6); }
.catalogue-pricing-note { max-width:72ch; margin:1.25rem 0 0; padding:.9rem 1rem; background:rgba(255,255,255,.72); border-left:.25rem solid #538e36; border-radius:0 .45rem .45rem 0; }
.catalogue-toolbar { display:flex; gap:1.5rem; align-items:end; justify-content:space-between; }
.catalogue-search { width:min(100%, 24rem); }
.catalogue-filters { display:flex; gap:.5rem; flex-wrap:wrap; }
.catalogue-card { border:0; box-shadow:0 .35rem 1.25rem rgba(21,65,35,.1); overflow:hidden; }
.catalogue-image-wrap,.catalogue-detail-image-wrap { display:flex; aspect-ratio:1; align-items:center; justify-content:center; background:#f7f8f5; }
.catalogue-image,.catalogue-detail-image { width:100%; height:100%; object-fit:contain; }
.variant-card { border-color:#d9e7db; }
.public-cart-next { padding:1.5rem; border-radius:.75rem; background:#f3f8f3; }
@media (max-width: 575.98px) { .catalogue-toolbar { align-items:stretch; flex-direction:column; } .catalogue-search { width:100%; } }

/* Product-led public sales journey */
.public-sales-page .page-content > .container-fluid { padding: 0; }
.public-sales-page h1 { font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1.06; letter-spacing: -.035em; max-width: 18ch; }
.public-sales-page h2 { letter-spacing: -.02em; }
.public-eyebrow { color: #397326; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* Public ingredient explorer */
.ingredient-hero{position:relative;overflow:hidden;padding:clamp(4rem,8vw,7rem) 0 3rem;background:radial-gradient(circle at 88% 12%,rgba(159,210,124,.35),transparent 26rem),linear-gradient(135deg,#f6fbf2 0%,#e8f5e7 55%,#f8fbf5 100%)}
.ingredient-hero:after{content:"";position:absolute;right:-7rem;bottom:-12rem;width:30rem;height:30rem;border:1px solid rgba(57,115,38,.12);border-radius:50%;box-shadow:0 0 0 4rem rgba(255,255,255,.2),0 0 0 8rem rgba(57,115,38,.04);pointer-events:none}
.ingredient-hero h1{max-width:48rem;margin-bottom:1.25rem;font-size:clamp(2.5rem,5.6vw,5rem);line-height:.98;letter-spacing:-.045em}
.ingredient-hero .lead{max-width:43rem;color:#405044;font-size:clamp(1.05rem,2vw,1.3rem)}
.ingredient-hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.ingredient-hero__note{position:relative;z-index:1;padding:2rem;border:1px solid rgba(57,115,38,.15);border-radius:1.5rem;background:rgba(255,255,255,.76);box-shadow:0 1.5rem 3rem rgba(45,82,39,.1);backdrop-filter:blur(12px)}
.ingredient-hero__icon{display:grid;width:3.4rem;height:3.4rem;margin-bottom:1.2rem;border-radius:1rem;background:#397326;color:#fff;font-size:1.35rem;place-items:center}
.ingredient-stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:52rem;margin:4rem 0 0;padding:1.25rem 0 0;border-top:1px solid rgba(57,115,38,.2)}
.ingredient-stats div{padding:0 1.5rem;border-right:1px solid rgba(57,115,38,.16)}
.ingredient-stats div:first-child{padding-left:0}.ingredient-stats div:last-child{border:0}
.ingredient-stats dt{color:#214d1e;font-size:1.6rem;font-weight:800}.ingredient-stats dd{margin:0;color:#657167;font-size:.85rem}
.ingredient-workbench{background:#fff}.ingredient-workbench__heading{display:flex;justify-content:space-between;gap:2rem;align-items:end;margin-bottom:2rem}.ingredient-workbench__heading h2{margin:0}
.ingredient-journeys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-bottom:1.5rem}.ingredient-journey-card{display:grid;grid-template-columns:3.5rem 1fr auto;gap:1rem;align-items:center;padding:1.25rem;border:1px solid #d8e5d5;border-radius:1rem;background:#fff;color:#29352b;text-align:left;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}.ingredient-journey-card:hover,.ingredient-journey-card:focus-visible{border-color:#83ad75;transform:translateY(-2px);box-shadow:0 .7rem 1.5rem rgba(38,68,33,.08)}.ingredient-journey-card.is-active{border-color:#397326;background:#f1f8ee;box-shadow:inset 0 0 0 1px #397326}.ingredient-journey-card__icon{display:grid;width:3.5rem;height:3.5rem;border-radius:1rem;background:#e5f2e0;color:#397326;font-size:1.25rem;place-items:center}.ingredient-journey-card>span:nth-child(2){display:grid}.ingredient-journey-card small{color:#718074;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em}.ingredient-journey-card strong{font-size:1.08rem}.ingredient-journey-card>span span{color:#657166;font-size:.84rem}.ingredient-journey-card>i{color:#579142}
.ingredient-mode{display:flex;gap:.5rem;padding:.3rem;border:1px solid #d9e6d6;border-radius:.8rem;background:#f7faf6}.ingredient-mode .btn{border-radius:.55rem}
.ingredient-search-panel{margin-bottom:1.5rem;padding:1.3rem 1.5rem;border:1px solid #dce8da;border-radius:1.1rem;background:#f8fbf7}
.ingredient-search-control{position:relative;display:flex;align-items:center}.ingredient-search-control>i{position:absolute;left:1rem;color:#579142}.ingredient-search-control .form-control{padding-left:2.8rem;padding-right:4.4rem;border-color:#c8dbc4;background:#fff}.ingredient-search-control .btn-link{position:absolute;right:.5rem;color:#397326;text-decoration:none}
.ingredient-result-list,.ingredient-detail{border:1px solid #dce5da;border-radius:1.25rem;background:#fff;box-shadow:0 .8rem 2rem rgba(38,68,33,.06)}
.ingredient-result-list{overflow:hidden}.ingredient-result-list__meta{display:flex;justify-content:space-between;gap:1rem;padding:1rem 1.1rem;border-bottom:1px solid #e4ebe2;background:#f8faf7;color:#69736a;font-size:.78rem}.ingredient-result-list__meta strong{color:#315a2d}
.ingredient-result-list__more{padding:1rem;border-top:1px solid #e4ebe2;background:#f8faf7;text-align:center}.ingredient-result-list__more .btn{min-width:9rem}
.ingredient-result-card{display:grid;grid-template-columns:2.8rem 1fr auto;gap:1rem;align-items:center;width:100%;padding:1rem 1.1rem;border:0;border-bottom:1px solid #edf1ec;background:#fff;color:#29352b;text-align:left;transition:background .18s ease,transform .18s ease}.ingredient-result-card:hover,.ingredient-result-card:focus-visible,.ingredient-result-card.is-selected{position:relative;z-index:1;background:#eff8ec}.ingredient-result-card:focus-visible{outline:3px solid rgba(57,115,38,.32);outline-offset:-3px}.ingredient-result-card__monogram{display:grid;width:2.8rem;height:2.8rem;border-radius:.85rem;background:#e2f1dd;color:#397326;font-size:1.1rem;font-weight:800;place-items:center}.ingredient-result-card__copy{display:grid;min-width:0}.ingredient-result-card__copy small{overflow:hidden;color:#738075;font-size:.7rem;text-overflow:ellipsis;white-space:nowrap}.ingredient-result-card__copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ingredient-result-card__copy span{color:#6d776f;font-size:.76rem}.ingredient-result-card>i{color:#76a168;font-size:.75rem}.ingredient-result-card--product{grid-template-columns:3.3rem 1fr auto}.ingredient-result-card--product>img{width:3.3rem;height:3.3rem;border-radius:.75rem;background:#f3f5f2;object-fit:contain}
.ingredient-empty{padding:3rem 1.5rem;color:#68736a;text-align:center}.ingredient-empty>i{margin-bottom:1rem;color:#8cb27e;font-size:2rem}
.ingredient-detail{position:sticky;top:6rem;min-height:34rem;overflow:hidden}.ingredient-detail__welcome{display:grid;min-height:34rem;padding:3rem;text-align:center;place-content:center}.ingredient-detail__welcome>span{display:grid;width:5rem;height:5rem;margin:0 auto 1.5rem;border-radius:50%;background:#eaf5e6;color:#397326;font-size:1.75rem;place-items:center}.ingredient-detail__welcome p:last-child{max-width:28rem;color:#6b766d}
.ingredient-profile__header{display:flex;gap:1.25rem;align-items:center;padding:2rem;background:linear-gradient(135deg,#edf7e9,#f8fbf6)}.ingredient-profile__header h2{margin:0;font-size:clamp(1.8rem,3vw,2.5rem)}.ingredient-profile__mark{display:grid;flex:0 0 auto;width:4.5rem;height:4.5rem;border-radius:1.25rem;background:#397326;color:#fff;font-size:1.8rem;font-weight:800;place-items:center}.ingredient-profile__inci{margin:.3rem 0 0;color:#657166;font-size:.85rem}.ingredient-profile__body,.ingredient-profile__aliases,.ingredient-profile__products{padding:1.5rem 2rem;border-top:1px solid #e8eee6}.ingredient-profile__body p{margin:0;color:#4e5b50;line-height:1.75}.ingredient-profile__aliases>div{display:flex;flex-wrap:wrap;gap:.45rem}.ingredient-profile__aliases span{padding:.35rem .65rem;border-radius:999px;background:#f0f5ee;color:#4a6446;font-size:.78rem}.ingredient-profile__section-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}.ingredient-profile__section-heading h3{margin:0}.ingredient-profile__section-heading>span{display:grid;min-width:2rem;height:2rem;padding:0 .5rem;border-radius:999px;background:#397326;color:#fff;font-size:.8rem;font-weight:700;place-items:center}
.ingredient-product-grid{display:grid;gap:.7rem}.ingredient-product-card{display:grid;grid-template-columns:3.5rem 1fr auto;gap:.8rem;align-items:center;padding:.65rem;border:1px solid #e1e9df;border-radius:.8rem;color:#29342b!important;text-decoration:none!important}.ingredient-product-card:hover{border-color:#98bd8c;background:#f8fbf6}.ingredient-product-card img{width:3.5rem;height:3.5rem;border-radius:.6rem;background:#f5f6f4;object-fit:contain}.ingredient-product-card span{display:grid}.ingredient-product-card small{color:#748076;font-size:.7rem}.ingredient-product-card i{margin-right:.5rem;color:#579142}
.ingredient-product-feature{display:grid;grid-template-columns:minmax(8rem,13rem) 1fr;gap:1.5rem;align-items:center;padding:2rem;background:linear-gradient(135deg,#f4f8f1,#eaf4e6)}.ingredient-product-feature>img{width:100%;aspect-ratio:1;border-radius:1rem;background:#fff;object-fit:contain}.ingredient-product-feature h2{font-size:clamp(1.7rem,3vw,2.4rem)}.ingredient-chip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.ingredient-chip-grid button{display:grid;grid-template-columns:2.3rem 1fr;column-gap:.7rem;align-items:center;padding:.7rem;border:1px solid #e1e9df;border-radius:.75rem;background:#fff;text-align:left}.ingredient-chip-grid button:hover,.ingredient-chip-grid button:focus-visible{border-color:#87ae79;background:#f5faf3}.ingredient-chip-grid button>span{display:grid;grid-row:1/3;width:2.3rem;height:2.3rem;border-radius:.65rem;background:#e5f2e0;color:#397326;font-weight:800;place-items:center}.ingredient-chip-grid strong{font-size:.82rem}.ingredient-chip-grid small{color:#718074;font-size:.67rem}
.ingredient-guidance{background:#303a32;color:#e7eee7}.ingredient-guidance article{height:100%;padding:1.5rem;border:1px solid rgba(255,255,255,.12);border-radius:1rem;background:rgba(255,255,255,.04)}.ingredient-guidance article>i{margin-bottom:1rem;color:#a9cf83;font-size:1.4rem}.ingredient-guidance h2{color:#fff}.ingredient-guidance p{margin:0;color:rgba(255,255,255,.68)}
@media(max-width:991.98px){.ingredient-workbench__heading{align-items:flex-start;flex-direction:column}.ingredient-detail{position:static;min-height:0}.ingredient-detail__welcome{min-height:22rem}.ingredient-stats{max-width:none}}
@media(max-width:767.98px){.ingredient-journeys{grid-template-columns:1fr}}
@media(max-width:575.98px){.ingredient-hero{padding-top:3rem}.ingredient-stats{grid-template-columns:1fr;gap:.8rem}.ingredient-stats div,.ingredient-stats div:first-child{padding:0 0 .8rem;border-right:0;border-bottom:1px solid rgba(57,115,38,.16)}.ingredient-stats div:last-child{border-bottom:0}.ingredient-journey-card{grid-template-columns:3rem 1fr auto;padding:1rem}.ingredient-journey-card__icon{width:3rem;height:3rem}.ingredient-search-panel{padding:1rem}.ingredient-result-list__meta{align-items:flex-start;flex-direction:column}.ingredient-profile__header,.ingredient-profile__body,.ingredient-profile__aliases,.ingredient-profile__products{padding:1.25rem}.ingredient-profile__header{align-items:flex-start}.ingredient-product-feature{grid-template-columns:1fr}.ingredient-product-feature>img{max-width:13rem;margin:auto}.ingredient-chip-grid{grid-template-columns:1fr}}
.public-sales-hero { padding: clamp(4rem, 9vw, 8rem) 0; background: linear-gradient(125deg,#f3f8ed 0%,#fff 62%,#e7f1de 100%); }
.public-sales-hero .lead,.public-page-hero .lead { max-width: 64ch; }
.public-hero-panel,.public-membership-callout,.public-info-card { background: #fff; border: 1px solid #dce7d5; border-radius: 1rem; box-shadow: 0 .75rem 2rem rgba(34,70,22,.08); padding: clamp(1.5rem,4vw,2.5rem); }
.public-hero-panel { border-top: .3rem solid #5d973c; }
.public-trust-strip { background: #244e21; color: #fff; }
.public-trust-strip ul { display:flex; justify-content:center; flex-wrap:wrap; gap:.5rem 3rem; list-style:none; margin:0; padding:1.15rem 0; font-weight:600; }
.public-trust-strip li::before { content:'\2713'; margin-right:.55rem; color:#b8dc8c; }
.public-section-heading { max-width: 46rem; margin-bottom: 2rem; }
.public-category-card { display:block; height:100%; padding:1.6rem; border:1px solid #dce7d5; border-radius:1rem; color:#1f371a; text-decoration:none; transition:transform .18s,box-shadow .18s; }
.public-category-card:hover,.public-category-card:focus-visible { color:#1f371a; transform:translateY(-3px); box-shadow:0 .7rem 1.6rem rgba(34,70,22,.11); }
.public-category-card i { color:#538e36; font-size:1.45rem; margin-bottom:1.4rem; }
.public-category-card h3 { font-size:1.15rem; }
.public-category-card p { color:#65705f; }
.public-category-card span { color:#397326; font-weight:700; }
.public-why-section { background:#fff; }
.public-benefit-list { display:grid; gap:.75rem; }
.public-benefit-list > div { padding:1.1rem 1.25rem; border-left:.25rem solid #538e36; background:#f5f9f1; border-radius:0 .6rem .6rem 0; }
.public-benefit-list strong,.public-benefit-list span { display:block; }
.public-benefit-list span { margin-top:.2rem; color:#65705f; }
.public-story-teaser { background:#eef5e8; }
.public-story-teaser__grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem; }
.public-story-teaser__grid article { height:100%;padding:1.5rem;border:1px solid #d3e2ca;border-radius:1rem;background:#fff;box-shadow:0 .65rem 1.5rem rgba(34,70,22,.07); }
.public-story-teaser__product { margin-bottom:.8rem;color:#397326;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; }
.public-story-teaser blockquote { margin:0 0 1rem;color:#244e21;font-size:1.25rem;font-weight:700;line-height:1.45; }
.public-story-teaser__grid article>p:not(.public-story-teaser__product) { color:#65705f; }
.public-story-teaser__grid a,.public-product-story-link,.catalogue-stories-link a { color:#397326;font-weight:700; }
.customer-story-card[id] { scroll-margin-top:6rem; }
.public-founder-story { background:#fff; }
.public-story-note { margin-top:1.5rem; padding:1.25rem; background:#f3f8ed; border:1px solid #d5e5cb; border-radius:.75rem; }
.about-hero { padding:clamp(3.5rem,7vw,6.5rem) 0; background:linear-gradient(125deg,#f3f8ed 0%,#fff 72%); overflow:hidden; }
.about-hero h1 { max-width:14ch; }
.about-range-figure { width:100%;margin:0;border-radius:1.25rem;overflow:hidden;box-shadow:0 1.25rem 3rem rgba(34,70,22,.16);background:#fff; }
.about-range-figure__image { width:100%;aspect-ratio:4/3;overflow:hidden; }
.about-range-figure img { display:block;width:100%!important;height:100%!important;object-fit:cover;object-position:center; }
.about-range-figure figcaption { padding:.8rem 1rem;color:#536056;background:#fff;font-size:.88rem;font-weight:600; }
.about-principles { background:#f7faf4; }
.about-principle { height:100%; padding:1.5rem; background:#fff; border:1px solid #dce7d5; border-radius:.9rem; }
.about-principle > span { display:grid; place-items:center; width:2.3rem; height:2.3rem; margin-bottom:1rem; border-radius:50%; background:#397326; color:#fff; font-weight:800; }
.about-principle h3 { font-size:1.2rem; }
.about-principle p { margin:0; color:#65705f; }
.about-value { background:#fff; }
.about-question-card { padding:clamp(1.5rem,4vw,2.3rem); background:#203f20; color:#fff; border-radius:1rem; box-shadow:0 .9rem 2rem rgba(30,62,30,.16); }
.about-question-card .public-eyebrow { color:#bddd99; }
.about-question-card a { color:#fff; font-weight:700; }
.about-refill { background:#eef5e8; }
.about-loop { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin:0; padding:0; list-style:none; }
.about-loop li { padding:1.35rem; background:#fff; border:1px solid #d3e2ca; border-radius:.9rem; }
.about-loop li > span { display:grid; place-items:center; width:2.3rem; height:2.3rem; margin-bottom:1rem; border-radius:50%; background:#397326; color:#fff; font-weight:800; }
.about-loop h3 { font-size:1.05rem; }
.about-loop p { margin:0; color:#65705f; }
.about-making { background:#fff; }
.about-member-model { background:#f4f5ef; }
.about-final-cta { background:#244e21; color:#fff; }
.about-final-cta .public-eyebrow { color:#bddd99; }
.about-final-cta h2 { color:#fff; }
@media (max-width:991.98px) { .about-loop { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:575.98px) { .about-loop { grid-template-columns:1fr; } }
.public-step-list { list-style:none; margin:0; padding:0; counter-reset:public-step; }
.public-step-list li { display:grid; grid-template-columns:2rem 1fr; gap:1rem; padding:1rem 0; border-bottom:1px solid #dde6d7; }
.public-step-list li::before { counter-increment:public-step; content:counter(public-step); display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:#397326; color:#fff; font-weight:700; }
.public-step-list li::before { grid-column:1; grid-row:1 / span 2; }
.public-step-list strong { grid-column:2; grid-row:1; align-self:center; }
.public-step-list span { display:block; grid-column:2; grid-row:2; color:#65705f; }
.public-membership-callout { display:flex; justify-content:space-between; align-items:center; gap:2rem; background:#f5f9f1; }
.public-membership-callout > div:first-child { max-width:48rem; }
.public-callout-actions { display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; min-width:13rem; }
.public-page-hero { padding:clamp(3.5rem,7vw,6.5rem) 0; background:#f3f8ed; }
.public-page-hero--secondary { background:#f4f5ef; }
.public-pass-up-intro { max-width:68ch; margin-top:1.5rem; padding:1rem 1.15rem; background:rgba(255,255,255,.72); border-left:.25rem solid #538e36; border-radius:0 .5rem .5rem 0; }
.public-order-steps { list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
.public-order-steps li { display:grid; grid-template-columns:3rem 1fr; gap:1.2rem; padding:1.5rem; border:1px solid #dce7d5; border-radius:.9rem; }
.public-order-steps p { margin:0; color:#65705f; }
.public-step-number { display:grid; place-items:center; width:2.7rem; height:2.7rem; border-radius:50%; background:#397326; color:#fff; font-weight:700; }
.public-faq-list { max-width:56rem; margin:auto; }
.public-faq-list details { border-bottom:1px solid #dce7d5; padding:1.2rem 0; }
.public-faq-list summary { cursor:pointer; font-size:1.1rem; font-weight:700; color:#244e21; }
.public-faq-list p { margin:1rem 0 0; }
.membership-faq-hero { padding:clamp(2.75rem,5vw,4.75rem) 0; }
.membership-faq-summary { display:flex;gap:1rem;align-items:center;padding:1.35rem;border:1px solid #d1e2ca;border-radius:1rem;background:rgba(255,255,255,.82);box-shadow:0 .7rem 1.6rem rgba(34,70,22,.08); }
.membership-faq-summary>i { flex:0 0 auto;color:#397326;font-size:1.65rem; }
.membership-faq-summary>div { display:grid; }
.membership-faq-summary span { color:#65705f;font-size:.88rem; }
.membership-faq-section { background:#fff; }
.membership-faq-page .public-faq-list { display:grid;gap:.75rem;max-width:64rem;margin:0; }
.membership-faq-page .public-faq-list details { padding:0;border:1px solid #dce7d5;border-radius:.85rem;background:#fff;overflow:hidden; }
.membership-faq-page .public-faq-list summary { display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.2rem 1.35rem;list-style:none; }
.membership-faq-page .public-faq-list summary::-webkit-details-marker { display:none; }
.membership-faq-page .public-faq-list summary::after { content:'+';display:grid;flex:0 0 auto;width:1.8rem;height:1.8rem;border-radius:50%;background:#edf5e9;color:#397326;font-size:1.25rem;line-height:1;place-items:center; }
.membership-faq-page .public-faq-list details[open] { border-color:#a8c99d;box-shadow:0 .45rem 1rem rgba(34,70,22,.06); }
.membership-faq-page .public-faq-list details[open] summary { background:#f5f9f2; }
.membership-faq-page .public-faq-list details[open] summary::after { content:'−'; }
.membership-faq-page .public-faq-list p { margin:0;padding:0 1.35rem 1.25rem;color:#58645a;line-height:1.65; }
.membership-faq-help { background:#f4f5ef; }
.customer-stories-hero { padding:clamp(3.5rem,7vw,6.5rem) 0; background:radial-gradient(circle at 88% 15%,rgba(159,210,124,.28),transparent 24rem),linear-gradient(135deg,#f2f8ed 0%,#fff 72%); }
.customer-stories-hero .lead { max-width:58rem;color:#4e5d50; }
.customer-stories-intro-note { display:flex;gap:1rem;align-items:flex-start;padding:1.35rem;border:1px solid #d1e2ca;border-radius:1rem;background:rgba(255,255,255,.82);box-shadow:0 .7rem 1.6rem rgba(34,70,22,.08); }
.customer-stories-intro-note>i { flex:0 0 auto;color:#397326;font-size:1.45rem; }
.customer-stories-intro-note>div { display:grid;gap:.2rem; }
.customer-stories-intro-note span { color:#65705f;font-size:.88rem;line-height:1.5; }
.customer-stories-section { background:#fff; }
.customer-story-list { display:grid;gap:1.25rem; }
.customer-story-card { max-width:58rem;margin:0 auto;overflow:hidden;border:1px solid #dce7d5;border-radius:1.2rem;background:#fff;box-shadow:0 1rem 2.5rem rgba(34,70,22,.09); }
.customer-story-card__header { padding:clamp(1.6rem,4vw,2.5rem);background:#244e21;color:#fff; }
.customer-story-card__header--bright { background:#397326; }
.customer-story-card__header h2 { margin:0 0 .65rem;color:#fff;font-size:clamp(2rem,4vw,3rem); }
.customer-story-card__header>p:last-child { max-width:46rem;margin:0;color:rgba(255,255,255,.78); }
.customer-story-card__label { margin:0 0 .75rem;color:#bddd99;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; }
.customer-story-card__content { display:grid;grid-template-columns:18rem minmax(0,1fr);align-items:stretch; }
.customer-story-card__image { display:flex;width:18rem;align-items:flex-start;justify-content:center;padding:1.5rem;border-right:1px solid #e2eadf;background:linear-gradient(135deg,#f7faf4,#eef5e9); }
.customer-story-card__image img { display:block;width:15rem;height:20rem;object-fit:contain;transition:transform .2s ease; }
.customer-story-card__image:hover img { transform:scale(1.015); }
.customer-story-card__image:focus-visible { position:relative;z-index:1;outline:3px solid #f0b429;outline-offset:-3px; }
.customer-story-card__body { padding:clamp(1.6rem,4vw,2.5rem); }
.customer-story-card__body>p { color:#4f5c51;line-height:1.75; }
.customer-story-card__body blockquote { margin:0 0 2rem;padding:0 0 0 1.35rem;border-left:.3rem solid #6aa34a;color:#244e21;font-size:clamp(1.2rem,2.5vw,1.5rem);font-weight:700;line-height:1.55; }
.customer-story-product { display:flex;justify-content:space-between;align-items:center;gap:1.5rem;margin-top:2rem;padding:1.25rem 1.4rem;border:1px solid #d5e5cb;border-radius:.8rem;background:#f3f8ed; }
.customer-story-product>div { display:grid; }
.customer-story-product span { color:#65705f;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase; }
.customer-story-product strong { color:#244e21;font-size:1.05rem; }
.public-tier-list { display:grid; gap:.8rem; }
.public-standard-rate { display:flex; align-items:center; gap:1.25rem; padding:1.4rem; color:#173b1a; background:#eef7e9; border:1px solid #c9dfbd; border-radius:.9rem; }
.public-standard-rate > span { flex:0 0 auto; font-size:clamp(2.4rem,6vw,4rem); line-height:1; font-weight:800; color:#397326; }
.public-standard-rate h3 { margin-bottom:.35rem; }
.public-standard-rate p { margin:0; }
.public-tier { padding:1.2rem; border:1px solid #dce7d5; border-radius:.75rem; }
.public-tier > div { display:flex; gap:1rem; align-items:baseline; }
.public-tier-rate { color:#397326; font-size:1.5rem; font-weight:800; }
.public-tier p { margin:.35rem 0 0; color:#65705f; }
.public-data-list div { display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; border-bottom:1px solid #e4eadf; }
.public-data-list dd { margin:0; font-weight:700; }
.public-member-note { display:flex; flex-direction:column; gap:.25rem; margin-top:1.2rem; padding:1rem; background:#f3f8ed; border-left:.25rem solid #538e36; }
.footer a { color:#f2f6ee; text-decoration:none; }
.footer a:hover,.footer a:focus-visible { color:#fff; text-decoration:underline; }
.public-page a:focus-visible,.public-page button:focus-visible,.public-page summary:focus-visible { outline:3px solid #f0b429; outline-offset:3px; }
@media (max-width: 991.98px) { .public-membership-callout { align-items:flex-start; flex-direction:column; } .navbar .dropdown-menu { border:0; box-shadow:none; } }
@media (max-width: 767.98px) { .customer-story-card__content { grid-template-columns:1fr; } .customer-story-card__image { width:100%;padding:1rem;border-right:0;border-bottom:1px solid #e2eadf; } .customer-story-card__image img { width:13rem;height:15rem; } }
@media (max-width: 575.98px) { .public-sales-page h1 { font-size:2.35rem; } .public-trust-strip ul { align-items:flex-start; flex-direction:column; padding-left:1rem; } .public-story-teaser__grid { grid-template-columns:1fr; } .public-order-steps li { grid-template-columns:2.4rem 1fr; padding:1.15rem; } .public-step-number { width:2.25rem; height:2.25rem; } .public-standard-rate,.customer-story-product { align-items:flex-start; flex-direction:column; } }