@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* _content/AgriConnect.BlazorApp/Components/AgriUI/AgriMap.razor.rz.scp.css */
/* ==========================================================================
   AGRI MAP COMPONENT - CREATE LISTING PAGE CONTEXT
   Map styling specifically for create-listing form
   
   NOTE: Blazor CSS Isolation applies these styles with a unique scope attribute.
   If styles don't apply, use inline styles or move to site.css
   ========================================================================== */

/* IMPORTANT: CSS hover for autocomplete items */
[b-qo8z6xpuhr] .autocomplete-item:hover {
    background-color: #f0f9ff !important;
}

/* Location Map Container */
.location-map-container[b-qo8z6xpuhr] {
    grid-column: span 2;
    margin-bottom: 2rem;
}

/* Form Label */
.location-map-container .form-label[b-qo8z6xpuhr] {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.location-map-container .label-text[b-qo8z6xpuhr] {
    margin-right: 0.25rem;
}

.location-map-container .label-required[b-qo8z6xpuhr] {
    color: #dc2626;
    margin-left: 0.25rem;
}

/* Form Hint */
.location-map-container .form-hint[b-qo8z6xpuhr] {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Map Wrapper */
.location-map-container .map-wrapper[b-qo8z6xpuhr] {
    position: relative;
    margin-bottom: 1.5rem;
    z-index: 10; /* Ensure wrapper is above map */
}

/* Search Container - CRITICAL FOR VISIBILITY */
.location-map-container .map-search-container[b-qo8z6xpuhr] {
    margin-bottom: 1rem;
    position: relative;
    z-index: 100; /* High z-index to stay above everything */
}

.location-map-container .search-input-wrapper[b-qo8z6xpuhr] {
    position: relative;
    width: 100%;
    z-index: 100;
}

/* BitTextField override to ensure visibility */
.location-map-container .search-input-wrapper[b-qo8z6xpuhr]  .bit-txt-fld {
    width: 100%;
    background: white;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.location-map-container .search-input-wrapper[b-qo8z6xpuhr]  .bit-txt-fld:focus,
.location-map-container .search-input-wrapper[b-qo8z6xpuhr]  .bit-txt-fld:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

.location-map-container .search-input-wrapper[b-qo8z6xpuhr]  input {
    font-size: 1rem;
    color: #1f2937;
}

.location-map-container .search-input-wrapper[b-qo8z6xpuhr]  input::placeholder {
    color: #9ca3af;
}

/* Autocomplete Dropdown - CRITICAL FOR VISIBILITY */
.location-map-container .autocomplete-dropdown[b-qo8z6xpuhr] {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 9999; /* Very high z-index */
    animation: slideDown-b-qo8z6xpuhr 0.2s ease-out;
}

@keyframes slideDown-b-qo8z6xpuhr {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.location-map-container .autocomplete-item[b-qo8z6xpuhr] {
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid #f3f4f6;
}

.location-map-container .autocomplete-item:last-child[b-qo8z6xpuhr] {
    border-bottom: none;
}

.location-map-container .autocomplete-item:hover[b-qo8z6xpuhr] {
    background-color: #f0f9ff;
}

.location-map-container .autocomplete-main[b-qo8z6xpuhr] {
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
}

.location-map-container .autocomplete-sub[b-qo8z6xpuhr] {
    font-size: 0.875rem;
    color: #6b7280;
    padding-left: 1.5rem;
}

/* Loading state for autocomplete */
.location-map-container .autocomplete-loading[b-qo8z6xpuhr],
.location-map-container .autocomplete-empty[b-qo8z6xpuhr] {
    padding: 1.25rem;
    text-align: center;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.location-map-container .autocomplete-loading i[b-qo8z6xpuhr] {
    font-size: 1.25rem;
    color: #3b82f6;
}

.location-map-container .autocomplete-empty[b-qo8z6xpuhr] {
    color: #9ca3af;
}

.location-map-container .autocomplete-empty i[b-qo8z6xpuhr] {
    font-size: 1.125rem;
}


/* Map Element - CREATE LISTING SPECIFIC SIZE */
/* Only apply these dimensions when NOT in listing-details-container */
.location-map-container #location-map[b-qo8z6xpuhr] {
    height: 500px;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1; /* Lower than search */
}

/* Override for listing-details-container - IMPORTANT: DO NOT SET SIZE HERE */
/* The listing details page CSS will handle sizing */
.listing-details-container .location-map-container #location-map[b-qo8z6xpuhr] {
    height: auto;
    width: auto;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Hover effect only for create listing (not read-only) */
.location-map-container #location-map:hover[b-qo8z6xpuhr] {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* No hover effect in listing details */
.listing-details-container .location-map-container #location-map:hover[b-qo8z6xpuhr] {
    border-color: #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.location-map-container #location-map.loading[b-qo8z6xpuhr] {
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.location-map-container #location-map.loading[b-qo8z6xpuhr]::after {
    content: "Loading map...";
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Selected Location Display */
.location-map-container .selected-location[b-qo8z6xpuhr] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem;
    background: #f0fdf4;
    border: 2px solid #86efac;
    border-radius: 12px;
    margin-top: 1rem;
}

.location-map-container .location-icon[b-qo8z6xpuhr] {
    font-size: 1.5rem;
    color: #16a34a;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.location-map-container .location-details[b-qo8z6xpuhr] {
    flex: 1;
}

.location-map-container .location-details strong[b-qo8z6xpuhr] {
    display: block;
    margin-bottom: 0.5rem;
    color: #1e40af;
    font-size: 0.9375rem;
}

.location-map-container .location-text[b-qo8z6xpuhr] {
    color: #4b5563;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.location-map-container .location-metadata[b-qo8z6xpuhr] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #d1fae5;
}

.location-map-container .location-row[b-qo8z6xpuhr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.location-map-container .location-label[b-qo8z6xpuhr] {
    font-weight: 600;
    color: #374151;
    min-width: 100px;
}

.location-map-container .location-value[b-qo8z6xpuhr] {
    color: #4b5563;
}

.location-map-container .location-value.coordinates[b-qo8z6xpuhr] {
    font-family: monospace;
    background: #f9fafb;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8125rem;
}

/* Validation Messages */
.location-map-container .validation-message[b-qo8z6xpuhr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .location-map-container #location-map[b-qo8z6xpuhr] {
        height: 400px;
    }
}

@media (max-width: 768px) {
    .location-map-container[b-qo8z6xpuhr] {
        grid-column: span 1;
    }

    .location-map-container #location-map[b-qo8z6xpuhr] {
        height: 350px;
    }

    .location-map-container .selected-location[b-qo8z6xpuhr] {
        flex-direction: column;
    }

    .location-map-container .location-label[b-qo8z6xpuhr] {
        min-width: auto;
    }
    
    .location-map-container .autocomplete-dropdown[b-qo8z6xpuhr] {
        max-height: 250px;
    }
}

@media (max-width: 480px) {
    .location-map-container #location-map[b-qo8z6xpuhr] {
        height: 300px;
        border-radius: 8px;
    }

    .location-map-container .autocomplete-dropdown[b-qo8z6xpuhr] {
        max-height: 200px;
    }
}

/* _content/AgriConnect.BlazorApp/Components/AgriUI/BrowseMap.razor.rz.scp.css */
/* ===== BROWSE MAP STYLES (AIRBNB-STYLE) ===== */

.browse-map-container[b-hsr0pcj8kw] {
    position: relative;
    width: 100%;
    height: 600px;
    border-radius: 16px;
    overflow: visible; /* Changed from hidden to allow card to show outside */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 1; /* Establish stacking context */
    margin-top: 3%;
}

.browse-map[b-hsr0pcj8kw] {
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 16px;
    overflow: hidden; /* Clip map content to rounded corners */
}

/* ===== AIRBNB-STYLE MARKERS ===== */

.airbnb-marker-wrapper[b-hsr0pcj8kw] {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 100;
}

.airbnb-marker[b-hsr0pcj8kw] {
    background: white;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

    .airbnb-marker:hover[b-hsr0pcj8kw],
    .airbnb-marker-wrapper.hovered .airbnb-marker[b-hsr0pcj8kw] {
        transform: scale(1.08);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        border-color: rgba(0, 0, 0, 0.15);
        z-index: 1000;
    }

.airbnb-marker-wrapper.active[b-hsr0pcj8kw] {
    z-index: 9000 !important; /* Below card (10000) but above other markers */
}

    .airbnb-marker-wrapper.active .airbnb-marker[b-hsr0pcj8kw] {
        background: #222222;
        transform: scale(1.12);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
        z-index: 9000;
    }

.marker-price[b-hsr0pcj8kw] {
    font-size: 14px;
    font-weight: 600;
    color: #222222;
    white-space: nowrap;
}

.airbnb-marker-wrapper.active .marker-price[b-hsr0pcj8kw] {
    color: white;
}

/* ===== LISTING PREVIEW CARD (AIRBNB-STYLE - BOTTOM-LEFT POSITION) ===== */

.listing-preview-card[b-hsr0pcj8kw] {
    position: absolute !important;
    width: 320px;
    max-height: calc(100% - 40px); /* Don't exceed map height */
    overflow-y: auto; /* Scroll if content too tall */
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28) !important;
    z-index: 99999 !important; /* Very high z-index to ensure it's on top */
    /* Start invisible */
    opacity: 0;
    transform: scale(0.95) translateX(-20px); /* Slide in from left */
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto !important;
    will-change: transform, opacity;
    /* Add subtle border on right side to separate from map */
    border-right: 3px solid rgba(34, 197, 94, 0.3);
}

    .listing-preview-card.visible[b-hsr0pcj8kw] {
        opacity: 1;
        transform: scale(1) translateX(0);
    }

    /* Remove arrow - not needed for bottom-left position */
    .listing-preview-card[b-hsr0pcj8kw]::after {
        display: none;
    }

    /* Scrollbar styling for card content */
    .listing-preview-card[b-hsr0pcj8kw]::-webkit-scrollbar {
        width: 6px;
    }

    .listing-preview-card[b-hsr0pcj8kw]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .listing-preview-card[b-hsr0pcj8kw]::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
    }

        .listing-preview-card[b-hsr0pcj8kw]::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

.card-content[b-hsr0pcj8kw] {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    z-index: 10001;
}

.card-close[b-hsr0pcj8kw] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    color: #222;
    cursor: pointer;
    z-index: 10002; /* Above card content */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s;
}

    .card-close:hover[b-hsr0pcj8kw] {
        background: white;
        transform: scale(1.1);
    }

.card-image[b-hsr0pcj8kw] {
    position: relative;
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

    .card-image img[b-hsr0pcj8kw] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.card-no-image[b-hsr0pcj8kw] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    gap: 8px;
}

    .card-no-image i[b-hsr0pcj8kw] {
        font-size: 2rem;
    }

    .card-no-image span[b-hsr0pcj8kw] {
        font-size: 0.875rem;
        color: #6b7280;
    }

.card-badges[b-hsr0pcj8kw] {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.card-badge[b-hsr0pcj8kw] {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(8px);
}

    .card-badge.featured[b-hsr0pcj8kw] {
        background: rgba(245, 158, 11, 0.95);
        color: white;
    }

    .card-badge.organic[b-hsr0pcj8kw] {
        background: rgba(34, 197, 94, 0.95);
        color: white;
    }

.card-body[b-hsr0pcj8kw] {
    padding: 16px;
}

.card-header[b-hsr0pcj8kw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.card-category[b-hsr0pcj8kw] {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-price[b-hsr0pcj8kw] {
    font-size: 16px;
    font-weight: 700;
    color: #222222;
}

.card-title[b-hsr0pcj8kw] {
    font-size: 16px;
    font-weight: 600;
    color: #222222;
    margin: 0 0 12px 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-meta[b-hsr0pcj8kw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.card-meta-item[b-hsr0pcj8kw] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6b7280;
}

    .card-meta-item i[b-hsr0pcj8kw] {
        width: 14px;
        font-size: 12px;
        color: #9ca3af;
    }

.card-content[b-hsr0pcj8kw] {
    background-color: $FFFFFF;
}

.card-actions[b-hsr0pcj8kw] {
    display: flex;
    gap: 8px;
}

.card-btn-primary[b-hsr0pcj8kw],
.card-btn-secondary[b-hsr0pcj8kw] {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}

.card-btn-primary[b-hsr0pcj8kw] {
    background: #222222;
    color: white;
}

    .card-btn-primary:hover[b-hsr0pcj8kw] {
        background: #000000;
        transform: translateY(-1px);
    }

.card-btn-secondary[b-hsr0pcj8kw] {
    background: white;
    color: #222222;
    border: 1px solid #e5e7eb;
}

    .card-btn-secondary:hover[b-hsr0pcj8kw] {
        background: #f3f4f6;
        border-color: #d1d5db;
    }

    .card-btn-primary i[b-hsr0pcj8kw],
    .card-btn-secondary i[b-hsr0pcj8kw] {
        font-size: 12px;
    }

/* Map Legend */
.map-legend[b-hsr0pcj8kw] {
    position: absolute;
    top: 10px;
    right: 10px;
    background: white;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-width: 200px;
}

    .map-legend h4[b-hsr0pcj8kw] {
        margin: 0 0 0.75rem 0;
        font-size: 0.875rem;
        font-weight: 700;
        color: #1f2937;
    }

.legend-items[b-hsr0pcj8kw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.legend-item[b-hsr0pcj8kw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legend-marker[b-hsr0pcj8kw] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-label[b-hsr0pcj8kw] {
    font-size: 0.8125rem;
    color: #4b5563;
}

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

@media (max-width: 768px) {
    .browse-map-container[b-hsr0pcj8kw] {
        height: 450px;
    }

    .listing-preview-card[b-hsr0pcj8kw] {
        width: 280px;
    }

    .card-image[b-hsr0pcj8kw] {
        height: 160px;
    }

    .card-title[b-hsr0pcj8kw] {
        font-size: 14px;
    }

    .card-price[b-hsr0pcj8kw] {
        font-size: 14px;
    }

    .card-btn-primary[b-hsr0pcj8kw],
    .card-btn-secondary[b-hsr0pcj8kw] {
        padding: 8px 12px;
        font-size: 13px;
    }

    .map-legend[b-hsr0pcj8kw] {
        padding: 0.75rem;
        max-width: 160px;
    }

    .airbnb-marker[b-hsr0pcj8kw] {
        padding: 5px 10px;
    }

    .marker-price[b-hsr0pcj8kw] {
        font-size: 13px;
    }
}
/* _content/AgriConnect.BlazorApp/Components/AI/EnhancedAnimalRecognitionCard.razor.rz.scp.css */
.ai-recognition-card[b-amk63ka5s9] {
    width: 100%;
}

.analyzing-state[b-amk63ka5s9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 24px;
    text-align: center;
}

.analysis-results[b-amk63ka5s9] {
    width: 100%;
}

.result-section[b-amk63ka5s9] {
    padding: 16px;
}

.section-header[b-amk63ka5s9] {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

/* Fix BitToggle height being stretched */
.section-header[b-amk63ka5s9]  .bit-tgl {
    height: auto;
    flex-shrink: 0;
}

.section-header[b-amk63ka5s9]  .bit-tgl-cnt {
    min-height: unset;
}

.result-content[b-amk63ka5s9] {
    padding: 8px 0;
}

.confidence-bar[b-amk63ka5s9] {
    margin-top: 12px;
}

.progress-bar[b-amk63ka5s9] {
    width: 100%;
    height: 8px;
    background-color: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 4px;
}

.progress-fill[b-amk63ka5s9] {
    height: 100%;
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.price-display[b-amk63ka5s9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
}

.market-insights[b-amk63ka5s9] {
    padding: 12px;
    background: #fef3c7;
    border-radius: 8px;
    border-left: 4px solid #eab308;
}

.analysis-footer[b-amk63ka5s9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .price-display[b-amk63ka5s9] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .section-header[b-amk63ka5s9] {
        flex-wrap: wrap;
    }

    .result-section[b-amk63ka5s9] {
        padding: 12px;
    }
}
/* _content/AgriConnect.BlazorApp/Components/Atoms/Avatar.razor.rz.scp.css */
/* Base Avatar */
.ac-avatar[b-m9phuhvbac] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-300);
  color: var(--text-primary);
  font-weight: var(--font-semibold);
  overflow: hidden;
  flex-shrink: 0;
}

/* Sizes */
.ac-avatar--xs[b-m9phuhvbac] { width: 24px; height: 24px; font-size: var(--text-xs); }
.ac-avatar--sm[b-m9phuhvbac] { width: 32px; height: 32px; font-size: var(--text-sm); }
.ac-avatar--md[b-m9phuhvbac] { width: 40px; height: 40px; font-size: var(--text-base); }
.ac-avatar--lg[b-m9phuhvbac] { width: 56px; height: 56px; font-size: var(--text-lg); }
.ac-avatar--xl[b-m9phuhvbac] { width: 80px; height: 80px; font-size: var(--text-2xl); }

/* Circle */
.ac-avatar--circle[b-m9phuhvbac] { border-radius: 50%; }
.ac-avatar:not(.ac-avatar--circle)[b-m9phuhvbac] { border-radius: var(--radius-md); }

/* Image */
.ac-avatar__image[b-m9phuhvbac] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Status Indicator */
.ac-avatar__status[b-m9phuhvbac] {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 25%;
  height: 25%;
  border-radius: 50%;
  border: 2px solid var(--bg-primary);
}

.ac-avatar__status--online[b-m9phuhvbac] { background: var(--success); }
.ac-avatar__status--offline[b-m9phuhvbac] { background: var(--gray-400); }
.ac-avatar__status--busy[b-m9phuhvbac] { background: var(--error); }
.ac-avatar__status--away[b-m9phuhvbac] { background: var(--warning); }
/**
 * Avatar Component - Modern Design System Extension
 */

/* Avatar Hover Effect */
.avatar-interactive[b-m9phuhvbac] {
    cursor: pointer;
    transition: all var(--transition-base);
}

.avatar-interactive:hover[b-m9phuhvbac] {
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

/* Avatar Group Styles */
.avatar-group[b-m9phuhvbac] {
    display: flex;
    align-items: center;
}

.avatar-group > *[b-m9phuhvbac] {
    margin-right: -0.5rem;
    border: 2px solid white;
}

.avatar-group > *:hover[b-m9phuhvbac] {
    z-index: 10;
}

/* Status Indicator Pulse */
.avatar-status-pulse[b-m9phuhvbac] {
    animation: status-pulse-b-m9phuhvbac 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes status-pulse-b-m9phuhvbac {
    0%, 100% {
      opacity: 1;
 }
    50% {
    opacity: 0.5;
    }
}

/* Avatar Loading Skeleton */
.avatar-skeleton[b-m9phuhvbac] {
    background: linear-gradient(
        90deg,
        var(--gray-200) 25%,
        var(--gray-300) 50%,
        var(--gray-200) 75%
    );
    background-size: 200% 100%;
    animation: shimmer-b-m9phuhvbac 1.5s infinite;
}

@keyframes shimmer-b-m9phuhvbac {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* _content/AgriConnect.BlazorApp/Components/Atoms/Badge.razor.rz.scp.css */
/* Base Badge */
.ac-badge[b-tgk4258rz3] {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  font-family: var(--font-primary);
  font-weight: var(--font-medium);
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

/* Sizes */
.ac-badge--sm[b-tgk4258rz3] { font-size: var(--text-xs); padding: var(--spacing-1) var(--spacing-2); }
.ac-badge--md[b-tgk4258rz3] { font-size: var(--text-sm); padding: var(--spacing-1) var(--spacing-3); }
.ac-badge--lg[b-tgk4258rz3] { font-size: var(--text-base); padding: var(--spacing-2) var(--spacing-4); }

/* Variants */
.ac-badge--default[b-tgk4258rz3] { background: var(--gray-200); color: var(--text-primary); }
.ac-badge--primary[b-tgk4258rz3] { background: var(--primary-500); color: white; }
.ac-badge--success[b-tgk4258rz3] { background: var(--success); color: white; }
.ac-badge--warning[b-tgk4258rz3] { background: var(--warning); color: white; }
.ac-badge--error[b-tgk4258rz3] { background: var(--error); color: white; }
.ac-badge--info[b-tgk4258rz3] { background: var(--info); color: white; }

/* Pill Shape */
.ac-badge--pill[b-tgk4258rz3] { border-radius: var(--radius-full); }

/* Dot Badge */
.ac-badge--dot[b-tgk4258rz3] { padding-left: var(--spacing-4); position: relative; }
.ac-badge__dot[b-tgk4258rz3] {
  position: absolute;
  left: var(--spacing-2);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Icon */
.ac-badge__icon[b-tgk4258rz3] { font-size: 0.875em; }

/* Removable */
.ac-badge__remove[b-tgk4258rz3] {
  background: none;
  border: none;
  color: currentColor;
  cursor: pointer;
  padding: 0;
  margin-left: var(--spacing-1);
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.ac-badge__remove:hover[b-tgk4258rz3] { opacity: 1; }
/**
 * Badge Component - Modern Design System Extension
 * Base styles come from modern-components.css
 */

/* Badge with Dot */
.badge-dot[b-tgk4258rz3] {
    display: inline-flex;
    align-items: center;
}

/* Removable Badge Hover Effect */
.badge button[b-tgk4258rz3] {
    transition: all var(--transition-fast);
}

.badge button:hover[b-tgk4258rz3] {
transform: scale(1.1);
}

/* Badge Animation on Mount */
.badge[b-tgk4258rz3] {
    animation: badge-pop-in-b-tgk4258rz3 0.2s ease-out;
}

@keyframes badge-pop-in-b-tgk4258rz3 {
    0% {
        opacity: 0;
    transform: scale(0.8);
 }
    100% {
    opacity: 1;
        transform: scale(1);
    }
}

/* Badge Pulse for Notifications */
.badge-pulse[b-tgk4258rz3] {
    animation: badge-pulse-b-tgk4258rz3 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes badge-pulse-b-tgk4258rz3 {
    0%, 100% {
        opacity: 1;
    }
    50% {
  opacity: 0.5;
    }
}
/* _content/AgriConnect.BlazorApp/Components/Atoms/Breadcrumb.razor.rz.scp.css */
/**
 * Breadcrumb Component Styles
 */

.breadcrumb[b-qa6uaggszk] {
    padding: var(--space-3) 0;
}

.breadcrumb ol[b-qa6uaggszk] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb li[b-qa6uaggszk] {
    display: inline-flex;
    align-items: center;
}

.breadcrumb a[b-qa6uaggszk] {
    text-decoration: none;
}

.breadcrumb a:hover[b-qa6uaggszk] {
    text-decoration: underline;
}

/* Truncate long breadcrumbs on mobile */
@media (max-width: 640px) {
    .breadcrumb li:not(:first-child):not(:last-child)[b-qa6uaggszk] {
        display: none;
    }
    
    .breadcrumb li:nth-last-child(2)[b-qa6uaggszk]::before {
 content: "...";
        margin: 0 var(--space-2);
        color: var(--gray-400);
    }
}
/* _content/AgriConnect.BlazorApp/Components/Atoms/Button.razor.rz.scp.css */
/**
 * Button Component - Modern Design System Extension
 * Base styles come from modern-components.css
 * This file only adds component-specific enhancements
 */

/* Button Loading State */
.btn-loading[b-gup03ibs07] {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading .spinner[b-gup03ibs07] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Button with Icons - Improved spacing */
.btn i[b-gup03ibs07] {
    line-height: 1;
}

.btn i:first-child:not(:last-child)[b-gup03ibs07] {
    margin-right: var(--space-2);
}

.btn i:last-child:not(:first-child)[b-gup03ibs07] {
    margin-left: var(--space-2);
}

/* Button Focus State (Accessibility) */
.btn:focus-visible[b-gup03ibs07] {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* Disabled State Enhancement */
.btn:disabled[b-gup03ibs07] {
    transform: none !important;
 box-shadow: none !important;
}
/* _content/AgriConnect.BlazorApp/Components/Atoms/Checkbox.razor.rz.scp.css */
/**
 * Checkbox Component Styles
 */

.checkbox-wrapper[b-aomt5m6nte] {
    display: inline-flex;
    align-items: center;
  gap: var(--space-2);
    cursor: pointer;
    user-select: none;
}

.checkbox-input[b-aomt5m6nte] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox-box[b-aomt5m6nte] {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--border-primary);
border-radius: var(--radius-sm);
    background: white;
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.checkbox-sm[b-aomt5m6nte] {
    width: 1rem;
    height: 1rem;
}

.checkbox-lg[b-aomt5m6nte] {
    width: 1.5rem;
    height: 1.5rem;
}

.checkbox-icon[b-aomt5m6nte] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: white;
    font-size: 0.75rem;
    transition: transform var(--transition-fast);
}

.checkbox-input:checked ~ .checkbox-box[b-aomt5m6nte] {
    background: var(--primary-500);
    border-color: var(--primary-500);
}

.checkbox-input:checked ~ .checkbox-box .checkbox-icon[b-aomt5m6nte] {
    transform: translate(-50%, -50%) scale(1);
}

.checkbox-input:focus ~ .checkbox-box[b-aomt5m6nte] {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

.checkbox-wrapper:hover .checkbox-box[b-aomt5m6nte] {
    border-color: var(--primary-500);
}

.checkbox-disabled[b-aomt5m6nte] {
  opacity: 0.5;
 cursor: not-allowed;
}

.checkbox-label[b-aomt5m6nte] {
    font-size: var(--text-sm);
    color: var(--text-primary);
}
/* _content/AgriConnect.BlazorApp/Components/Atoms/Input.razor.rz.scp.css */
/**
 * AgriConnect Input Component Styles
 * Modern, accessible input component with validation states
 */

/* ==========================================
   INPUT WRAPPER
   ========================================== */

.ac-input-wrapper[b-qye4dc3mum] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  width: 100%;
}

/* ==========================================
INPUT LABEL
   ========================================== */

.ac-input-label[b-qye4dc3mum] {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-family: var(--font-primary);
font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  line-height: var(--leading-normal);
}

.ac-input-label--required[b-qye4dc3mum] {
  /* Label styling when required */
}

.ac-input-required-indicator[b-qye4dc3mum] {
  color: var(--error);
  font-weight: var(--font-bold);
  margin-left: var(--spacing-1);
}

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

.ac-input-container[b-qye4dc3mum] {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* ==========================================
   BASE INPUT STYLES
   ========================================== */

.ac-input[b-qye4dc3mum] {
  /* Layout */
  width: 100%;
  display: block;
  
  /* Typography */
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  
  /* Spacing */
  padding: var(--spacing-3) var(--spacing-4);
  
  /* Borders */
  border: 2px solid var(--gray-300);
  border-radius: var(--radius-md);
  
  /* Effects */
  background-color: var(--bg-primary);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  
  /* Remove default styles */
  outline: none;
  appearance: none;
}

.ac-input[b-qye4dc3mum]::placeholder {
color: var(--text-tertiary);
  opacity: 1;
}

/* ==========================================
   INPUT STATES
   ========================================== */

/* Focus State */
.ac-input:focus[b-qye4dc3mum] {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

/* Hover State */
.ac-input:hover:not(:disabled):not(:focus)[b-qye4dc3mum] {
  border-color: var(--gray-400);
}

/* Disabled State */
.ac-input:disabled[b-qye4dc3mum] {
  background-color: var(--gray-100);
color: var(--text-tertiary);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Read-only State */
.ac-input:read-only[b-qye4dc3mum] {
  background-color: var(--gray-50);
  cursor: default;
}

/* Error State */
.ac-input-container--error .ac-input[b-qye4dc3mum] {
  border-color: var(--error);
}

.ac-input-container--error .ac-input:focus[b-qye4dc3mum] {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.1);
}

/* ==========================================
   INPUT WITH ICONS
   ========================================== */

.ac-input--with-prefix[b-qye4dc3mum] {
  padding-left: calc(var(--spacing-4) + var(--spacing-8));
}

.ac-input--with-suffix[b-qye4dc3mum] {
  padding-right: calc(var(--spacing-4) + var(--spacing-8));
}

.ac-input-prefix[b-qye4dc3mum],
.ac-input-suffix[b-qye4dc3mum] {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: var(--text-base);
  pointer-events: none;
}

.ac-input-prefix[b-qye4dc3mum] {
  left: var(--spacing-4);
}

.ac-input-suffix[b-qye4dc3mum] {
  right: var(--spacing-4);
}

.ac-input-container--error .ac-input-prefix[b-qye4dc3mum],
.ac-input-container--error .ac-input-suffix[b-qye4dc3mum] {
  color: var(--error);
}

/* ==========================================
   PASSWORD TOGGLE BUTTON
   ========================================== */

.ac-input-password-toggle[b-qye4dc3mum] {
  position: absolute;
  right: var(--spacing-2);
  top: 50%;
  transform: translateY(-50%);
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 2.5rem;
  height: 2.5rem;
  
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  
  color: var(--text-secondary);
  font-size: var(--text-base);
  
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ac-input-password-toggle:hover[b-qye4dc3mum] {
  background: var(--gray-100);
  color: var(--text-primary);
}

.ac-input-password-toggle:focus[b-qye4dc3mum] {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.ac-input-password-toggle:active[b-qye4dc3mum] {
  background: var(--gray-200);
}

/* Adjust input padding when password toggle is present */
.ac-input[type="password"][b-qye4dc3mum],
.ac-input[type="text"] + .ac-input-password-toggle[b-qye4dc3mum] {
  padding-right: calc(var(--spacing-4) + var(--spacing-12));
}

/* ==========================================
   TEXTAREA VARIANT
   ========================================== */

.ac-input--textarea[b-qye4dc3mum] {
  resize: vertical;
  min-height: 5rem;
  line-height: var(--leading-relaxed);
  font-family: var(--font-primary);
}

.ac-input--textarea[b-qye4dc3mum]::-webkit-resizer {
border-radius: var(--radius-sm);
}

/* ==========================================
   HELPER TEXT
   ========================================== */

.ac-input-helper-text[b-qye4dc3mum] {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.ac-input-helper-text i[b-qye4dc3mum] {
  font-size: var(--text-xs);
  flex-shrink: 0;
}

/* ==========================================
   ERROR MESSAGE
   ========================================== */

.ac-input-error-message[b-qye4dc3mum] {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--text-sm);
  color: var(--error);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
}

.ac-input-error-message i[b-qye4dc3mum] {
  font-size: var(--text-xs);
  flex-shrink: 0;
}

/* ==========================================
   CHARACTER COUNT
   ========================================== */

.ac-input-character-count[b-qye4dc3mum] {
  display: block;
  text-align: right;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.ac-input-character-count[data-at-limit="true"][b-qye4dc3mum] {
  color: var(--warning);
  font-weight: var(--font-medium);
}

/* ==========================================
   INPUT SIZES (Optional variants)
   ========================================== */

.ac-input--sm[b-qye4dc3mum] {
  font-size: var(--text-sm);
  padding: var(--spacing-2) var(--spacing-3);
}

.ac-input--lg[b-qye4dc3mum] {
  font-size: var(--text-lg);
padding: var(--spacing-4) var(--spacing-6);
}

/* ==========================================
   INPUT TYPES SPECIFIC STYLES
   ========================================== */

/* Number Input */
.ac-input[type="number"][b-qye4dc3mum] {
  -moz-appearance: textfield;
}

.ac-input[type="number"][b-qye4dc3mum]::-webkit-inner-spin-button,
.ac-input[type="number"][b-qye4dc3mum]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Date/Time Inputs */
.ac-input[type="date"][b-qye4dc3mum],
.ac-input[type="time"][b-qye4dc3mum],
.ac-input[type="datetime-local"][b-qye4dc3mum] {
  cursor: pointer;
}

.ac-input[type="date"][b-qye4dc3mum]::-webkit-calendar-picker-indicator,
.ac-input[type="time"][b-qye4dc3mum]::-webkit-calendar-picker-indicator,
.ac-input[type="datetime-local"][b-qye4dc3mum]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: opacity(0.5);
  transition: filter var(--transition-fast);
}

.ac-input[type="date"]:hover[b-qye4dc3mum]::-webkit-calendar-picker-indicator,
.ac-input[type="time"]:hover[b-qye4dc3mum]::-webkit-calendar-picker-indicator,
.ac-input[type="datetime-local"]:hover[b-qye4dc3mum]::-webkit-calendar-picker-indicator {
  filter: opacity(1);
}

/* Search Input */
.ac-input[type="search"][b-qye4dc3mum]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 1rem;
  width: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
  background-size: contain;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}

.ac-input[type="search"][b-qye4dc3mum]::-webkit-search-cancel-button:hover {
  opacity: 1;
}

/* ==========================================
   DISABLED CONTAINER STATE
========================================== */

.ac-input-container--disabled[b-qye4dc3mum] {
  opacity: 0.6;
  pointer-events: none;
}

.ac-input-container--disabled .ac-input-prefix[b-qye4dc3mum],
.ac-input-container--disabled .ac-input-suffix[b-qye4dc3mum] {
  color: var(--text-tertiary);
}

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

@media (max-width: 640px) {
  .ac-input[b-qye4dc3mum] {
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
  .ac-input--sm[b-qye4dc3mum] {
    font-size: 14px;
  }
}

/* ==========================================
   DARK MODE SUPPORT
   ========================================== */

@media (prefers-color-scheme: dark) {
  .ac-input[b-qye4dc3mum] {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--gray-100);
  }
  
  .ac-input[b-qye4dc3mum]::placeholder {
    color: var(--gray-500);
  }
  
  .ac-input:focus[b-qye4dc3mum] {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
  }
  
  .ac-input:disabled[b-qye4dc3mum] {
 background-color: var(--gray-900);
    color: var(--gray-600);
}
  
  .ac-input-password-toggle:hover[b-qye4dc3mum] {
    background: var(--gray-700);
  }
}

/* ==========================================
   HIGH CONTRAST MODE
   ========================================== */

@media (prefers-contrast: high) {
  .ac-input[b-qye4dc3mum] {
    border-width: 3px;
  }
  
  .ac-input:focus[b-qye4dc3mum] {
outline: 3px solid var(--primary-500);
    outline-offset: 2px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .ac-input[b-qye4dc3mum],
  .ac-input-prefix[b-qye4dc3mum],
  .ac-input-suffix[b-qye4dc3mum],
  .ac-input-password-toggle[b-qye4dc3mum] {
    transition: none;
  }
}

/* ==========================================
   PRINT STYLES
   ========================================== */

@media print {
  .ac-input[b-qye4dc3mum] {
    border: 1px solid var(--gray-400) !important;
    box-shadow: none !important;
    background: none !important;
  }
  
  .ac-input-password-toggle[b-qye4dc3mum],
  .ac-input-prefix i[b-qye4dc3mum],
  .ac-input-suffix i[b-qye4dc3mum] {
    display: none !important;
  }
}

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

.ac-input:focus-visible[b-qye4dc3mum] {
  outline: 3px solid var(--primary-500);
  outline-offset: 2px;
}

/* Screen reader only text */
.ac-input-sr-only[b-qye4dc3mum] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==========================================
   FORM GRID LAYOUT SUPPORT
   ========================================== */

.ac-input-grid[b-qye4dc3mum] {
  display: grid;
  gap: var(--spacing-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .ac-input-grid--2-col[b-qye4dc3mum] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .ac-input-grid--3-col[b-qye4dc3mum] {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================
   INPUT GROUP (Multiple inputs together)
   ========================================== */

.ac-input-group[b-qye4dc3mum] {
  display: flex;
  gap: var(--spacing-2);
}

.ac-input-group .ac-input-wrapper[b-qye4dc3mum] {
  flex: 1;
}

.ac-input-group--vertical[b-qye4dc3mum] {
  flex-direction: column;
}

/**
 * Input Component - Modern Design System Extension
 * Base styles come from modern-components.css
 * This file only adds component-specific enhancements
 */

/* Input Group Error State */
.input-group-error .form-label[b-qye4dc3mum] {
    color: var(--error-500);
}

/* Input Icon Positioning */
.input-with-icon[b-qye4dc3mum] {
    position: relative;
}

/* Floating Label Animation Enhancement */
.input-float .input:focus ~ .input-float-label[b-qye4dc3mum],
.input-float .input:not(:placeholder-shown) ~ .input-float-label[b-qye4dc3mum] {
    transform: translateY(-1.5rem) scale(0.85);
}

/* Input Focus Ring Animation */
.input-focus:focus[b-qye4dc3mum] {
    animation: input-focus-pulse-b-qye4dc3mum 0.3s ease-out;
}

@keyframes input-focus-pulse-b-qye4dc3mum {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
    }
    100% {
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
    }
}

/* Input Error Shake Animation */
.input-shake[b-qye4dc3mum] {
    animation: shake-b-qye4dc3mum 0.5s ease-in-out;
}

@keyframes shake-b-qye4dc3mum {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Password Toggle Button */
.input-password-toggle[b-qye4dc3mum] {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: var(--space-2);
    transition: color var(--transition-base);
}

.input-password-toggle:hover[b-qye4dc3mum] {
    color: var(--text-primary);
}

/* Input Disabled State */
.input:disabled[b-qye4dc3mum] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Input Read-Only State */
.input:read-only[b-qye4dc3mum] {
background-color: var(--gray-50);
  cursor: default;
}
/* _content/AgriConnect.BlazorApp/Components/Atoms/Progress.razor.rz.scp.css */
/**
 * Progress Component Styles
 */

.progress-container[b-m398pz2xgl] {
    width: 100%;
}

/* Linear Progress */
.progress-bar[b-m398pz2xgl] {
    width: 100%;
    height: 0.5rem;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}

.progress-sm[b-m398pz2xgl] {
    height: 0.25rem;
}

.progress-lg[b-m398pz2xgl] {
    height: 0.75rem;
}

.progress-fill[b-m398pz2xgl] {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
    position: relative;
    overflow: hidden;
}

.progress-primary[b-m398pz2xgl] { background: var(--primary-500); }
.progress-success[b-m398pz2xgl] { background: var(--success-500); }
.progress-warning[b-m398pz2xgl] { background: var(--warning-500); }
.progress-error[b-m398pz2xgl] { background: var(--error-500); }

/* Animated Progress */
.progress-animated[b-m398pz2xgl] {
    animation: progress-pulse-b-m398pz2xgl 2s ease-in-out infinite;
}

@keyframes progress-pulse-b-m398pz2xgl {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* Striped Progress */
.progress-stripes[b-m398pz2xgl] {
    position: absolute;
inset: 0;
    background-image: linear-gradient(
    45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
  rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
      transparent
    );
    background-size: 1rem 1rem;
  animation: progress-stripes-b-m398pz2xgl 1s linear infinite;
}

@keyframes progress-stripes-b-m398pz2xgl {
    0% { background-position: 0 0; }
    100% { background-position: 1rem 0; }
}

/* Circular Progress */
.progress-circular[b-m398pz2xgl] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.progress-circular svg[b-m398pz2xgl] {
    transform: rotate(-90deg);
    width: 100%;
height: 100%;
}

.progress-circular-bg[b-m398pz2xgl] {
    fill: none;
    stroke: var(--gray-200);
    stroke-width: 8;
}

.progress-circular-fill[b-m398pz2xgl] {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}

.progress-circular-fill.progress-primary[b-m398pz2xgl] { stroke: var(--primary-500); }
.progress-circular-fill.progress-success[b-m398pz2xgl] { stroke: var(--success-500); }
.progress-circular-fill.progress-warning[b-m398pz2xgl] { stroke: var(--warning-500); }
.progress-circular-fill.progress-error[b-m398pz2xgl] { stroke: var(--error-500); }

.progress-circular-text[b-m398pz2xgl] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* _content/AgriConnect.BlazorApp/Components/Atoms/Radio.razor.rz.scp.css */
/**
 * Radio Component Styles
 */

.radio-wrapper[b-ev9t6r3via] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    user-select: none;
}

.radio-input[b-ev9t6r3via] {
    position: absolute;
    opacity: 0;
  cursor: pointer;
}

.radio-circle[b-ev9t6r3via] {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-full);
    background: white;
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.radio-sm[b-ev9t6r3via] {
    width: 1rem;
    height: 1rem;
}

.radio-lg[b-ev9t6r3via] {
  width: 1.5rem;
    height: 1.5rem;
}

.radio-dot[b-ev9t6r3via] {
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 0.5rem;
    height: 0.5rem;
 border-radius: var(--radius-full);
    background: white;
    transition: transform var(--transition-fast);
}

.radio-input:checked ~ .radio-circle[b-ev9t6r3via] {
    background: var(--primary-500);
    border-color: var(--primary-500);
}

.radio-input:checked ~ .radio-circle .radio-dot[b-ev9t6r3via] {
    transform: translate(-50%, -50%) scale(1);
}

.radio-input:focus ~ .radio-circle[b-ev9t6r3via] {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

.radio-wrapper:hover .radio-circle[b-ev9t6r3via] {
    border-color: var(--primary-500);
}

.radio-disabled[b-ev9t6r3via] {
    opacity: 0.5;
    cursor: not-allowed;
}

.radio-label[b-ev9t6r3via] {
    font-size: var(--text-sm);
    color: var(--text-primary);
}
/* _content/AgriConnect.BlazorApp/Components/Atoms/Spinner.razor.rz.scp.css */
/* Base Spinner */
.ac-spinner[b-f7dozhfuhy] {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
}

/* Sizes */
.ac-spinner--sm[b-f7dozhfuhy] { font-size: var(--text-base); }
.ac-spinner--md[b-f7dozhfuhy] { font-size: var(--text-2xl); }
.ac-spinner--lg[b-f7dozhfuhy] { font-size: var(--text-4xl); }

/* Variants */
.ac-spinner--primary[b-f7dozhfuhy] { color: var(--primary-500); }
.ac-spinner--secondary[b-f7dozhfuhy] { color: var(--secondary-500); }
.ac-spinner--white[b-f7dozhfuhy] { color: white; }

/* Circle Spinner */
.ac-spinner__circle[b-f7dozhfuhy] {
  border: 3px solid var(--gray-200);
  border-top-color: currentColor;
  border-radius: 50%;
  width: 1em;
  height: 1em;
  animation: spin-b-f7dozhfuhy 0.8s linear infinite;
}

/* Dots Spinner */
.ac-spinner__dots[b-f7dozhfuhy] {
  display: flex;
  gap: 0.25em;
}

.ac-spinner__dots span[b-f7dozhfuhy] {
  width: 0.5em;
  height: 0.5em;
  background: currentColor;
  border-radius: 50%;
  animation: pulse-b-f7dozhfuhy 1.4s ease-in-out infinite;
}

.ac-spinner__dots span:nth-child(2)[b-f7dozhfuhy] { animation-delay: 0.2s; }
.ac-spinner__dots span:nth-child(3)[b-f7dozhfuhy] { animation-delay: 0.4s; }

/* Bars Spinner */
.ac-spinner__bars[b-f7dozhfuhy] {
  display: flex;
  gap: 0.2em;
  align-items: flex-end;
  height: 1em;
}

.ac-spinner__bars span[b-f7dozhfuhy] {
  width: 0.2em;
  background: currentColor;
  animation: bars-b-f7dozhfuhy 1s ease-in-out infinite;
}

.ac-spinner__bars span:nth-child(2)[b-f7dozhfuhy] { animation-delay: 0.1s; }
.ac-spinner__bars span:nth-child(3)[b-f7dozhfuhy] { animation-delay: 0.2s; }
.ac-spinner__bars span:nth-child(4)[b-f7dozhfuhy] { animation-delay: 0.3s; }

/* Text */
.ac-spinner__text[b-f7dozhfuhy] {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Animations */
@keyframes spin-b-f7dozhfuhy {
  to { transform: rotate(360deg); }
}

@keyframes pulse-b-f7dozhfuhy {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

@keyframes bars-b-f7dozhfuhy {
  0%, 40%, 100% { height: 30%; }
  20% { height: 100%; }
}
/* _content/AgriConnect.BlazorApp/Components/Atoms/Toggle.razor.rz.scp.css */
/**
 * Toggle/Switch Component Styles
 */

.toggle-wrapper[b-wnsom94h3z] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    user-select: none;
}

.toggle-container[b-wnsom94h3z] {
    position: relative;
}

.toggle-input[b-wnsom94h3z] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.toggle-track[b-wnsom94h3z] {
    position: relative;
    display: inline-block;
    width: 2.75rem;
    height: 1.5rem;
    background: var(--gray-300);
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
}

.toggle-sm[b-wnsom94h3z] {
    width: 2rem;
    height: 1rem;
}

.toggle-lg[b-wnsom94h3z] {
    width: 3.5rem;
    height: 2rem;
}

.toggle-thumb[b-wnsom94h3z] {
 position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    background: white;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
 transition: all var(--transition-base);
}

.toggle-sm .toggle-thumb[b-wnsom94h3z] {
    width: 0.75rem;
    height: 0.75rem;
}

.toggle-lg .toggle-thumb[b-wnsom94h3z] {
    width: 1.75rem;
    height: 1.75rem;
}

.toggle-input:checked ~ .toggle-track[b-wnsom94h3z] {
    background: var(--primary-500);
}

.toggle-input:checked ~ .toggle-track.toggle-success[b-wnsom94h3z] {
    background: var(--success-500);
}

.toggle-input:checked ~ .toggle-track.toggle-warning[b-wnsom94h3z] {
    background: var(--warning-500);
}

.toggle-input:checked ~ .toggle-track.toggle-error[b-wnsom94h3z] {
    background: var(--error-500);
}

.toggle-input:checked ~ .toggle-track .toggle-thumb[b-wnsom94h3z] {
    transform: translateX(1.25rem);
}

.toggle-sm .toggle-input:checked ~ .toggle-track .toggle-thumb[b-wnsom94h3z] {
    transform: translateX(1rem);
}

.toggle-lg .toggle-input:checked ~ .toggle-track .toggle-thumb[b-wnsom94h3z] {
    transform: translateX(1.5rem);
}

.toggle-input:focus ~ .toggle-track[b-wnsom94h3z] {
  outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

.toggle-disabled[b-wnsom94h3z] {
    opacity: 0.5;
    cursor: not-allowed;
}

.toggle-label[b-wnsom94h3z] {
    font-size: var(--text-sm);
    color: var(--text-primary);
font-weight: var(--font-medium);
}
/* _content/AgriConnect.BlazorApp/Components/Atoms/Tooltip.razor.rz.scp.css */
/**
 * Tooltip Component Styles
 */

.tooltip-wrapper[b-l24g94t6sy] {
    position: relative;
}

.tooltip[b-l24g94t6sy] {
    position: absolute;
    z-index: var(--z-60);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    white-space: nowrap;
    max-width: 300px;
    pointer-events: none;
}

.tooltip-dark[b-l24g94t6sy] {
    background: var(--gray-900);
    color: white;
    box-shadow: var(--shadow-lg);
}

.tooltip-light[b-l24g94t6sy] {
    background: white;
    color: var(--gray-900);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-lg);
}

/* Tooltip Arrow */
.tooltip-arrow[b-l24g94t6sy] {
    position: absolute;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
}

.tooltip-dark .tooltip-arrow[b-l24g94t6sy] {
    background: var(--gray-900);
}

.tooltip-light .tooltip-arrow[b-l24g94t6sy] {
    background: white;
    border: 1px solid var(--border-primary);
}

/* Arrow Positions */
.tooltip-arrow[data-position="top"][b-l24g94t6sy] {
    bottom: -4px;
    left: 50%;
    margin-left: -4px;
}

.tooltip-arrow[data-position="bottom"][b-l24g94t6sy] {
    top: -4px;
    left: 50%;
    margin-left: -4px;
}

.tooltip-arrow[data-position="left"][b-l24g94t6sy] {
    right: -4px;
    top: 50%;
    margin-top: -4px;
}

.tooltip-arrow[data-position="right"][b-l24g94t6sy] {
    left: -4px;
    top: 50%;
    margin-top: -4px;
}

/* Animations */
.tooltip-fade-in[b-l24g94t6sy] {
    animation: tooltip-fade-in-b-l24g94t6sy 0.2s ease-out;
}

@keyframes tooltip-fade-in-b-l24g94t6sy {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-12px);
  }
    100% {
 opacity: 1;
 transform: translateX(-50%) translateY(-8px);
    }
}

/* Multiline Support */
.tooltip.tooltip-multiline[b-l24g94t6sy] {
    white-space: normal;
}
/* _content/AgriConnect.BlazorApp/Components/Dashboard/DashboardOverviewComponent.razor.rz.scp.css */
/* ========================================
   DASHBOARD OVERVIEW COMPONENT STYLES
   Modern Farmer Dashboard - Bit Platform
   ======================================== */

/* Main Container */
.dashboard-overview[b-yapsy3v95b] {
    display: flex;
    flex-direction: column;
  gap: 24px;
    padding: 0;
    background: transparent;
}

/* Dashboard Sections */
.dashboard-section[b-yapsy3v95b] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ========================================
   STATS GRID - 4 Column Layout
   ======================================== */
.stats-grid[b-yapsy3v95b] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 1400px) {
    .stats-grid[b-yapsy3v95b] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .stats-grid[b-yapsy3v95b] {
        grid-template-columns: repeat(2, 1fr); /* 2 cards per row on mobile */
        gap: 12px;
    }
}

@media (max-width: 380px) {
    .stats-grid[b-yapsy3v95b] {
        grid-template-columns: 1fr; /* Only stack to 1 column on very small screens */
        gap: 10px;
    }
}

/* ========================================
   METRIC CARDS - Inlined from BitMetricCard
   ======================================== */
.metric-card[b-yapsy3v95b] {
    background: var(--bit-clr-bg-pri, #ffffff);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    min-height: 180px;
height: 100%;
    pointer-events: auto;
    user-select: none;
}

.metric-card-default[b-yapsy3v95b] {
    border: 1px solid var(--bit-clr-brd-pri, #e5e7eb);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.metric-card-outlined[b-yapsy3v95b] {
    border: 2px solid var(--bit-clr-brd-pri, #e5e7eb);
    box-shadow: none;
}

.metric-card-elevated[b-yapsy3v95b] {
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.metric-card.clickable[b-yapsy3v95b] {
    cursor: pointer;
}

.metric-card.clickable:hover[b-yapsy3v95b] {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.metric-card.clickable:active[b-yapsy3v95b] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.metric-header[b-yapsy3v95b] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.metric-icon[b-yapsy3v95b] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.metric-card:hover .metric-icon[b-yapsy3v95b] {
    transform: scale(1.05) rotate(3deg);
}

.metric-trend[b-yapsy3v95b] {
    display: flex;
    align-items: center;
 gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 20px;
 font-size: 0.75rem;
    font-weight: 600;
}

.metric-trend.trend-positive[b-yapsy3v95b] {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.metric-trend.trend-negative[b-yapsy3v95b] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.metric-badge[b-yapsy3v95b] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

.metric-value-section[b-yapsy3v95b] {
    display: flex;
    align-items: baseline;
  gap: 0.25rem;
    margin-bottom: 0.375rem;
}

.metric-value[b-yapsy3v95b] {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.metric-suffix[b-yapsy3v95b] {
  font-size: 0.875rem;
    color: var(--bit-clr-fg-ter, #9ca3af);
}

.metric-label[b-yapsy3v95b] {
    color: var(--bit-clr-fg-sec, #6b7280);
    font-weight: 500;
 text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.6875rem;
    margin-bottom: 0.5rem;
}

.metric-progress[b-yapsy3v95b] {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.metric-progress-text[b-yapsy3v95b] {
    font-size: 0.6875rem;
    color: var(--bit-clr-fg-ter, #9ca3af);
}

.metric-content[b-yapsy3v95b] {
    margin-top: 0.5rem;
}

.metric-footer[b-yapsy3v95b] {
    margin-top: auto;
    padding-top: 0.75rem;
  border-top: 1px solid var(--bit-clr-brd-pri, #e5e7eb);
}

.metric-change-text[b-yapsy3v95b] {
 font-size: 0.6875rem;
  color: var(--bit-clr-fg-sec, #6b7280);
}

/* Responsive adjustments for metric cards */
@media (max-width: 768px) {
    .metric-card[b-yapsy3v95b] {
        min-height: 140px;
        padding: 0.875rem 1rem;
        border-radius: 12px;
    }

    .metric-header[b-yapsy3v95b] {
        margin-bottom: 0.625rem;
    }

    .metric-value[b-yapsy3v95b] {
        font-size: 1.5rem;
    }

    .metric-icon[b-yapsy3v95b] {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }
    
    .metric-icon[b-yapsy3v95b]  i,
    .metric-icon[b-yapsy3v95b]  .bit-icon {
        font-size: 1.125rem !important;
    }
    
    .metric-label[b-yapsy3v95b] {
        font-size: 0.625rem;
        margin-bottom: 0.375rem;
    }
    
    .metric-footer[b-yapsy3v95b] {
        padding-top: 0.5rem;
    }
    
    .metric-trend[b-yapsy3v95b] {
        padding: 0.125rem 0.375rem;
        font-size: 0.625rem;
    }
    
    .metric-progress-text[b-yapsy3v95b],
    .metric-change-text[b-yapsy3v95b] {
        font-size: 0.625rem;
    }
    
    /* Hide hover effects on touch devices */
    .metric-card.clickable:hover[b-yapsy3v95b] {
        transform: none;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }
    
    .metric-card.clickable:active[b-yapsy3v95b] {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

@media (max-width: 380px) {
    .metric-card[b-yapsy3v95b] {
        min-height: 130px;
        padding: 0.75rem;
    }

    .metric-value[b-yapsy3v95b] {
        font-size: 1.375rem;
    }

    .metric-icon[b-yapsy3v95b] {
        width: 32px;
        height: 32px;
    }
}

/* ========================================
   LISTING TABLE - Inlined from BitListingTable
   ======================================== */
.listing-table[b-yapsy3v95b] {
    background: var(--bit-clr-bg-pri);
    border: 1px solid var(--bit-clr-brd-pri);
    border-radius: 16px;
    overflow: hidden;
}

.table-header[b-yapsy3v95b] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bit-clr-brd-pri);
    background: var(--bit-clr-bg-sec);
}

.table-content[b-yapsy3v95b] {
    min-height: 200px;
}

.table-loading[b-yapsy3v95b],
.table-empty[b-yapsy3v95b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
}

.listings-list[b-yapsy3v95b] {
    display: flex;
 flex-direction: column;
}

.listing-row[b-yapsy3v95b] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bit-clr-brd-pri);
    transition: background 0.2s ease;
}

.listing-row:last-child[b-yapsy3v95b] {
    border-bottom: none;
}

.listing-row:hover[b-yapsy3v95b] {
    background: var(--bit-clr-bg-sec);
}

.listing-image[b-yapsy3v95b] {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bit-clr-bg-sec);
}

.listing-image img[b-yapsy3v95b] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-placeholder[b-yapsy3v95b] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bit-clr-bg-sec);
}

.listing-info[b-yapsy3v95b] {
    flex: 1;
    min-width: 0;
}

.listing-price[b-yapsy3v95b] {
    font-weight: 700;
    color: var(--bit-clr-suc-main);
}

.listing-status[b-yapsy3v95b] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

.status-active[b-yapsy3v95b] {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.status-pending[b-yapsy3v95b] {
background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.status-sold[b-yapsy3v95b] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.status-expired[b-yapsy3v95b] {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.status-default[b-yapsy3v95b] {
    background: var(--bit-clr-bg-sec);
    color: var(--bit-clr-fg-sec);
}

.listing-stats[b-yapsy3v95b] {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
}

.stat[b-yapsy3v95b] {
    display: flex;
  align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--bit-clr-fg-sec);
}

.listing-actions[b-yapsy3v95b] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.table-footer[b-yapsy3v95b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--bit-clr-brd-pri);
    background: var(--bit-clr-bg-sec);
}

@media (max-width: 768px) {
    .listing-row[b-yapsy3v95b] {
        flex-wrap: wrap;
    }

    .listing-stats[b-yapsy3v95b] {
        width: 100%;
      margin-top: 0.5rem;
    }

    .listing-actions[b-yapsy3v95b] {
        width: 100%;
        margin-top: 0.5rem;
    }
}

/* ========================================
   CONTENT GRID - 2 Column Layout (LEGACY - kept for compatibility)
   ======================================== */
.content-grid[b-yapsy3v95b] {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 24px;
    align-items: start;
}

/* Only apply single column on actual mobile, not desktop */
@media (max-width: 959px) {
    .content-grid:not(.desktop-layout)[b-yapsy3v95b] {
        grid-template-columns: 1fr;
    }
}

.content-main[b-yapsy3v95b] {
    min-width: 0; /* Prevent grid blowout */
}

.content-sidebar[b-yapsy3v95b] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 80px;
}

@media (max-width: 959px) {
    .content-sidebar[b-yapsy3v95b] {
        position: static;
    }
}

.sidebar-card[b-yapsy3v95b] {
    width: 100%;
}

/* ========================================
   CHARTS GRID
   ======================================== */
.charts-grid[b-yapsy3v95b] {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1200px) {
    .charts-grid[b-yapsy3v95b] {
        grid-template-columns: 1fr;
    }
}

.chart-main[b-yapsy3v95b],
.chart-sidebar[b-yapsy3v95b] {
    min-width: 0;
}

.chart-container[b-yapsy3v95b] {
    width: 100%;
    height: 280px;
    position: relative;
}

.chart-container canvas[b-yapsy3v95b] {
    max-width: 100%;
    height: auto !important;
}

/* ========================================
   VERIFICATION BANNER
   ======================================== */
.verification-banner[b-yapsy3v95b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.1);
}

.banner-content[b-yapsy3v95b] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.banner-content strong[b-yapsy3v95b] {
    display: block;
    color: #92400e;
 font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.banner-content p[b-yapsy3v95b] {
    color: #78350f;
    font-size: 14px;
    margin: 0;
}

@media (max-width: 768px) {
 .verification-banner[b-yapsy3v95b] {
        flex-direction: column;
  text-align: center;
    }
    
    .banner-content[b-yapsy3v95b] {
        flex-direction: column;
        text-align: center;
    }
}

/* ========================================
   CATEGORIES LIST
   ======================================== */
.categories-list[b-yapsy3v95b] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.category-item[b-yapsy3v95b] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.category-header[b-yapsy3v95b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-name[b-yapsy3v95b] {
    font-weight: 600;
    font-size: 14px;
    color: var(--bit-clr-fg-pri, #1f2937);
}

.category-count[b-yapsy3v95b] {
    font-size: 13px;
    color: var(--bit-clr-fg-sec, #6b7280);
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */
@media (max-width: 640px) {
    .dashboard-overview[b-yapsy3v95b] {
        gap: 16px;
    }
    
    .dashboard-section[b-yapsy3v95b] {
        gap: 12px;
    }
    
    .content-grid[b-yapsy3v95b],
    .charts-grid[b-yapsy3v95b] {
     gap: 16px;
    }
}

/* ========================================
   LOADING STATES
   ======================================== */
.dashboard-overview.loading[b-yapsy3v95b] {
    opacity: 0.6;
    pointer-events: none;
}

/* ========================================
   DARK MODE SUPPORT
   ======================================== */
@media (prefers-color-scheme: dark) {
    .verification-banner[b-yapsy3v95b] {
   background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.25) 100%);
        border-color: rgba(245, 158, 11, 0.5);
    }
    
    .banner-content strong[b-yapsy3v95b] {
  color: #fbbf24;
    }
    
    .banner-content p[b-yapsy3v95b] {
        color: #fde68a;
    }
    
    .category-name[b-yapsy3v95b] {
        color: var(--bit-clr-fg-pri, #f9fafb);
    }
    
    .category-count[b-yapsy3v95b] {
        color: var(--bit-clr-fg-sec, #9ca3af);
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .dashboard-overview[b-yapsy3v95b] {
        gap: 16px;
    }
    
    .stats-grid[b-yapsy3v95b] {
        grid-template-columns: repeat(2, 1fr);
        page-break-inside: avoid;
    }
    
    .content-grid[b-yapsy3v95b],
    .charts-grid[b-yapsy3v95b] {
        grid-template-columns: 1fr;
 }
    
    .content-sidebar[b-yapsy3v95b] {
        position: static;
    }
}

/* ========================================
/* _content/AgriConnect.BlazorApp/Components/Listing/CreateListingFormComponent.razor.rz.scp.css */
/**
 * Modern Create Listing - Enhanced UX with Subscription Banner
 * Professional, smooth, and user-friendly
 */

/* ==================== MAIN CONTAINER ==================== */
.listing-form-container[b-1pcdud9g5a] {
    position: relative;
    max-width: 100%; /* Changed from 1400px to use full width */
    margin: 0 auto;
    padding: 2rem 2rem; /* Increased horizontal padding */
    background: #f8f9fa;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    min-height: 100vh;
}

.form-overlay[b-1pcdud9g5a] {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.98);
    z-index: 9999;
 display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}

/* ==================== SUBSCRIPTION BANNER ==================== */
.subscription-banner[b-1pcdud9g5a] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
}

.banner-content-wrapper[b-1pcdud9g5a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.banner-text[b-1pcdud9g5a] {
    color: white;
    display: flex;
  align-items: center;
    gap: 0.5rem;
}

.banner-icon-inline[b-1pcdud9g5a] {
  color: #fbbf24;
    font-size: 1.25rem;
}

.banner-actions[b-1pcdud9g5a] {
    display: flex;
    gap: 0.75rem;
}

.btn-banner-primary[b-1pcdud9g5a],
.btn-banner-secondary[b-1pcdud9g5a] {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-banner-primary[b-1pcdud9g5a] {
    background: #fbbf24;
    color: #78350f;
}

.btn-banner-primary:hover[b-1pcdud9g5a] {
    background: #f59e0b;
    transform: translateY(-1px);
}

.btn-banner-secondary[b-1pcdud9g5a] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    backdrop-filter: blur(10px);
}

.btn-banner-secondary:hover[b-1pcdud9g5a] {
    background: rgba(255, 255, 255, 0.3);
}

/* ==================== PAGE TITLE SECTION ==================== */
.page-title-section[b-1pcdud9g5a] {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.title-wrapper[b-1pcdud9g5a] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.title-icon-circle[b-1pcdud9g5a] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.75rem;
    flex-shrink: 0;
}

.page-title-section h1[b-1pcdud9g5a] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.25rem 0;
}

.page-title-section p[b-1pcdud9g5a] {
 color: #6b7280;
    margin: 0;
}

/* ==================== STEPPER SIMPLE ==================== */
.stepper-simple[b-1pcdud9g5a] {
    background: white;
    border-radius: 12px;
  padding: 1.5rem 2rem;
    margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.stepper-steps[b-1pcdud9g5a] {
    display: flex;
    justify-content: space-between;
    position: relative;
    max-width: 900px; /* Limit stepper width for better UX */
    margin: 0 auto; /* Center the stepper */
}

.stepper-steps[b-1pcdud9g5a]::before {
    content: '';
    position: absolute;
  top: 20px;
    left: 60px;
    right: 60px;
    height: 2px;
    background: #e5e7eb;
    z-index: 0;
}

.step[b-1pcdud9g5a] {
 display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    position: relative;
    z-index: 1;
    flex: 1;
    transition: all 0.3s ease;
}

.step-number[b-1pcdud9g5a] {
    width: 40px;
    height: 40px;
  border-radius: 50%;
    background: #e5e7eb;
    color: #9ca3af;
    display: flex;
 align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.step.active .step-number[b-1pcdud9g5a] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    transform: scale(1.1);
}

.step.completed .step-number[b-1pcdud9g5a] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.step-text[b-1pcdud9g5a] {
    text-align: center;
}

.step-name[b-1pcdud9g5a] {
    font-weight: 600;
    color: #4b5563;
    font-size: 0.9375rem;
}

.step.active .step-name[b-1pcdud9g5a] {
    color: #1f2937;
}

.step-desc[b-1pcdud9g5a] {
    font-size: 0.8125rem;
    color: #9ca3af;
}

/* ==================== FORM CONTENT ==================== */
.form-content[b-1pcdud9g5a] {
    background: white;
    border-radius: 12px;
    padding: 2.5rem 3rem; /* Increased horizontal padding */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.step-panel[b-1pcdud9g5a] {
    animation: fadeInUp-b-1pcdud9g5a 0.4s ease-out;
}

@keyframes fadeInUp-b-1pcdud9g5a {
    from {
    opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
     transform: translateY(0);
    }
}

/* ==================== FORM NAVIGATION ==================== */
.form-navigation[b-1pcdud9g5a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    margin-top: 2rem;
    border-top: 2px solid #f3f4f6;
}

.nav-spacer[b-1pcdud9g5a] {
    flex: 1;
}

/* ==================== FORM GROUPS ==================== */
.form-group[b-1pcdud9g5a] {
    margin-bottom: 1.5rem;
}

.form-label[b-1pcdud9g5a] {
    display: block;
 font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
}

.form-label .required[b-1pcdud9g5a] {
    color: #ef4444;
    margin-left: 0.25rem;
}

/* Fix FontAwesome Icons - Use proper classes */
.form-label .fas[b-1pcdud9g5a],
.form-label .far[b-1pcdud9g5a],
.form-label .fab[b-1pcdud9g5a] {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900;
    margin-right: 0.5rem;
}

/* ==================== LOCATION MAP ==================== */
.location-map-container[b-1pcdud9g5a] {
    margin-bottom: 1.5rem;
}

.map-wrapper[b-1pcdud9g5a] {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #e5e7eb;
    margin-top: 0.5rem;
}

#location-map[b-1pcdud9g5a] {
    height: 450px; /* Increased from 400px */
    width: 32vw;
    z-index: 1;
}

.map-search-container[b-1pcdud9g5a] {
    position: absolute;
    top: 10px;
  left: 10px;
    right: 10px;
 z-index: 1000; /* Higher than map */
}

.map-search-input[b-1pcdud9g5a] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9375rem;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.map-search-input:focus[b-1pcdud9g5a] {
    outline: none;
    border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Autocomplete Dropdown - HIGH Z-INDEX */
.autocomplete-dropdown[b-1pcdud9g5a] {
    position: absolute;
    top: 100%;
    left: 0;
  right: 0;
    background: white;
    border: 2px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    z-index: 10000 !important; /* Even higher than map controls */
    margin-top: -2px;
}

.autocomplete-item[b-1pcdud9g5a] {
    padding: 0.75rem 1rem;
cursor: pointer;
    transition: background 0.2s ease;
    border-bottom: 1px solid #f3f4f6;
}

.autocomplete-item:hover[b-1pcdud9g5a],
.autocomplete-item.selected[b-1pcdud9g5a] {
    background: #f3f4f6;
}

.autocomplete-item:last-child[b-1pcdud9g5a] {
    border-bottom: none;
}

/* ==================== SELECT STYLING ==================== */
.select-wrapper[b-1pcdud9g5a] {
    position: relative;
}

.select-icon[b-1pcdud9g5a] {
    position: absolute;
    right: 1.125rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #9ca3af;
    font-size: 0.875rem;
}

.form-select[b-1pcdud9g5a] {
    appearance: none;
    padding-right: 3rem;
    cursor: pointer;
}

.form-select:disabled[b-1pcdud9g5a] {
    background: #f9fafb;
    color: #9ca3af;
    cursor: not-allowed;
}

/* ==================== INPUT GROUP ==================== */
.input-group[b-1pcdud9g5a] {
    position: relative;
    display: flex;
}

.input-group .input-prefix[b-1pcdud9g5a] {
  position: static;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-right: none;
    border-radius: 10px 0 0 10px;
    color: #6b7280;
font-weight: 600;
}

.input-group .form-input[b-1pcdud9g5a] {
    border-left: none;
  border-radius: 0 10px 10px 0;
}

/* ==================== FEATURE PILLS ==================== */
.features-grid[b-1pcdud9g5a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Slightly wider pills */
    gap: 1rem;
}

.feature-pill[b-1pcdud9g5a] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
  background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.feature-pill:hover[b-1pcdud9g5a] {
    border-color: #22c55e;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}

.feature-pill.selected[b-1pcdud9g5a] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #22c55e;
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.2);
}

.pill-icon[b-1pcdud9g5a] {
    font-size: 1.5rem;
}

.pill-text[b-1pcdud9g5a] {
  flex: 1;
    font-weight: 500;
  color: #374151;
}

.pill-check[b-1pcdud9g5a] {
    font-size: 1.25rem;
    color: #22c55e;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.feature-pill.selected .pill-check[b-1pcdud9g5a] {
    opacity: 1;
}

/* ==================== PRICING CARD ==================== */
.pricing-card[b-1pcdud9g5a] {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 2px solid #e9ecef;
    border-radius: 16px;
    padding: 1.75rem;
}

.card-title[b-1pcdud9g5a] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
 margin-bottom: 1.5rem;
}

.price-inputs[b-1pcdud9g5a] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.price-summary[b-1pcdud9g5a] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px dashed #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.summary-label[b-1pcdud9g5a] {
    font-size: 1rem;
    font-weight: 600;
    color: #6b7280;
}

.summary-value[b-1pcdud9g5a] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #22c55e;
}

/* ==================== PHOTO UPLOADS ==================== */
.photo-upload-section[b-1pcdud9g5a] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.upload-label[b-1pcdud9g5a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
}

.main-photo-dropzone[b-1pcdud9g5a],
.photo-dropzone[b-1pcdud9g5a] {
  border: 3px dashed #d1d5db;
    border-radius: 16px;
    background: #fafafa;
    cursor: pointer;
    transition: all 0.3s ease;
}

.main-photo-dropzone[b-1pcdud9g5a] {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-photo-dropzone:hover[b-1pcdud9g5a],
.photo-dropzone:hover[b-1pcdud9g5a] {
    border-color: #22c55e;
    background: #f0fdf4;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.15);
}

.dropzone-content[b-1pcdud9g5a] {
    text-align: center;
    padding: 2rem;
}

.dropzone-icon[b-1pcdud9g5a] {
    font-size: 4rem;
    color: #9ca3af;
    margin-bottom: 1.25rem;
}

.dropzone-text[b-1pcdud9g5a] {
    font-size: 1.125rem;
    color: #374151;
    margin-bottom: 0.5rem;
}

.dropzone-text strong[b-1pcdud9g5a] {
    color: #22c55e;
}

.dropzone-hint[b-1pcdud9g5a] {
  font-size: 0.875rem;
    color: #9ca3af;
}

.photo-preview[b-1pcdud9g5a] {
 position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #f3f4f6;
}

.main-preview[b-1pcdud9g5a] {
 aspect-ratio: 16 / 9;
    max-height: 400px;
}

.photo-preview img[b-1pcdud9g5a] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-overlay[b-1pcdud9g5a] {
    position: absolute;
    inset: 0;
 background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.photo-preview:hover .preview-overlay[b-1pcdud9g5a] {
    opacity: 1;
}

/* ==================== PHOTOS GRID ==================== */
.photos-grid[b-1pcdud9g5a] {
    display: grid;
 grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.photo-slot[b-1pcdud9g5a] {
    aspect-ratio: 1;
}

.photo-dropzone.small[b-1pcdud9g5a] {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

.photo-dropzone.small i[b-1pcdud9g5a] {
    font-size: 1.75rem;
}

/* ==================== GUIDELINES BANNER ==================== */
.guidelines-banner[b-1pcdud9g5a] {
    display: flex;
    gap: 1.25rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #fbbf24;
    border-radius: 16px;
    margin-bottom: 1.5rem;
}

.banner-icon[b-1pcdud9g5a] {
    font-size: 2rem;
    flex-shrink: 0;
}

.banner-content strong[b-1pcdud9g5a] {
    display: block;
    font-size: 1rem;
    color: #92400e;
    margin-bottom: 0.625rem;
}

.banner-content ul[b-1pcdud9g5a] {
 margin: 0;
    padding-left: 1.25rem;
    color: #92400e;
}

.banner-content ul li[b-1pcdud9g5a] {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

/* ==================== REVIEW GRID ==================== */
.review-grid[b-1pcdud9g5a] {
    display: grid;
 grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* Better responsive grid */
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.review-card[b-1pcdud9g5a] {
    background: #ffffff;
    border: 2px solid #e9ecef;
    border-radius: 16px;
    overflow: hidden;
}

.review-card.col-span-2[b-1pcdud9g5a] {
    grid-column: span 2;
}

.card-header[b-1pcdud9g5a] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
}

.card-header i[b-1pcdud9g5a] {
    color: #22c55e;
  font-size: 1.125rem;
}

.card-header span[b-1pcdud9g5a] {
    flex: 1;
    font-weight: 600;
    color: #1f2937;
}

.btn-edit[b-1pcdud9g5a] {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit:hover[b-1pcdud9g5a] {
    color: #22c55e;
    border-color: #22c55e;
    background: #f0fdf4;
}

.card-body[b-1pcdud9g5a] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.review-item[b-1pcdud9g5a] {
  display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.item-label[b-1pcdud9g5a] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.item-value[b-1pcdud9g5a] {
    font-size: 0.9375rem;
    color: #1f2937;
    font-weight: 500;
}

.item-value.price[b-1pcdud9g5a] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #22c55e;
}

.review-item.highlight[b-1pcdud9g5a] {
    padding: 1rem;
    background: #f0fdf4;
    border-radius: 10px;
}

.item-badges[b-1pcdud9g5a] {
    display: flex;
    flex-wrap: wrap;
  gap: 0.5rem;
}

.badge[b-1pcdud9g5a] {
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 500;
}

.badge-success[b-1pcdud9g5a] {
    background: #d4edda;
    color: #155724;
}

.badge-warning[b-1pcdud9g5a] {
    background: #fff3cd;
    color: #856404;
}

.badge-danger[b-1pcdud9g5a] {
    background: #f8d7da;
    color: #721c24;
}

/* ==================== PHOTOS PREVIEW ==================== */
.photos-preview[b-1pcdud9g5a] {
  display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.preview-thumb[b-1pcdud9g5a] {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.preview-thumb.main[b-1pcdud9g5a] {
    width: 180px;
    height: 180px;
}

.preview-thumb img[b-1pcdud9g5a] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb-label[b-1pcdud9g5a] {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    padding: 0.25rem 0.625rem;
    background: rgba(34, 197, 94, 0.95);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
border-radius: 6px;
}

/* ==================== TERMS CARD ==================== */
.terms-card[b-1pcdud9g5a] {
    background: #fef3c7;
    border: 2px solid #fbbf24;
    border-radius: 16px;
    padding: 1.75rem;
    margin-top: 2rem;
}

.terms-checkbox[b-1pcdud9g5a] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    cursor: pointer;
}

.terms-checkbox input[type="checkbox"][b-1pcdud9g5a] {
    margin-top: 0.25rem;
}

.checkbox-text[b-1pcdud9g5a] {
    flex: 1;
    font-size: 0.9375rem;
    color: #92400e;
    line-height: 1.6;
}

.checkbox-text a[b-1pcdud9g5a] {
    color: #b45309;
    font-weight: 600;
    text-decoration: underline;
}

.checkbox-text a:hover[b-1pcdud9g5a] {
  color: #92400e;
}

/* ==================== VALIDATION & HINTS ==================== */
.validation-message[b-1pcdud9g5a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #b91c1c;
    font-size: 0.8125rem;
    font-weight: 500;
}

.form-hint[b-1pcdud9g5a] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #6b7280;
    line-height: 1.5;
}

.form-hint i[b-1pcdud9g5a] {
    margin-top: 0.125rem;
    color: #9ca3af;
}

.form-hint.disabled[b-1pcdud9g5a] {
    opacity: 0.6;
}

/* ==================== RESPONSIVE STYLES ==================== */
/* ==========================================================================
   MOBILE-FIRST RESPONSIVE DESIGN FOR CREATE LISTING FORM
   Follows Apple HIG & Material Design 3 guidelines
   Touch targets: minimum 44x44px
   ========================================================================== */

/* ==================== TABLET (max-width: 1400px) ==================== */
@media (max-width: 1400px) {
    .listing-form-container[b-1pcdud9g5a] {
        padding: 2rem 1.5rem;
    }
    
    .form-content[b-1pcdud9g5a] {
        padding: 2rem 2rem;
    }
}

/* ==================== SMALLER DESKTOP (max-width: 1200px) ==================== */
@media (max-width: 1200px) {
    .listing-form-container[b-1pcdud9g5a] {
        padding: 1.5rem 1rem;
    }
  
    .form-content[b-1pcdud9g5a] {
        padding: 2rem 1.5rem;
    }
 
    .review-grid[b-1pcdud9g5a] {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    
    #location-map[b-1pcdud9g5a] {
        width: 100%;
        height: 400px;
    }
}

/* ==================== TABLET PORTRAIT (max-width: 992px) ==================== */
@media (max-width: 992px) {
    .listing-form-container[b-1pcdud9g5a] {
        padding: 1.25rem 1rem;
        border-radius: 12px;
    }

    .form-header[b-1pcdud9g5a] {
        padding: 1.25rem;
    }
    
    .form-title[b-1pcdud9g5a] {
        font-size: 1.25rem;
    }

    .form-content[b-1pcdud9g5a] {
        padding: 1.5rem 1.25rem;
    }
    
    /* Progress Steps - Compact horizontal on tablet */
    .progress-steps[b-1pcdud9g5a] {
        gap: 0.5rem;
    }
    
    .step-label[b-1pcdud9g5a] {
        font-size: 0.75rem;
    }
    
    .step-circle[b-1pcdud9g5a] {
        width: 32px;
        height: 32px;
        font-size: 0.875rem;
    }
    
    /* Photo Grid - 3 columns on tablet */
    .photos-grid[b-1pcdud9g5a] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
    
    .review-grid[b-1pcdud9g5a] {
        grid-template-columns: 1fr;
    }
    
    #location-map[b-1pcdud9g5a] {
        height: 350px;
        width: 100%;
    }
}

/* ==================== MOBILE LANDSCAPE (max-width: 768px) ==================== */
@media (max-width: 768px) {
    .listing-form-container[b-1pcdud9g5a] {
        padding: 1rem 0.75rem;
        border-radius: 0;
        min-height: auto;
        background: #ffffff;
    }

    /* Form Header - Mobile optimized */
    .form-header[b-1pcdud9g5a] {
        padding: 1rem;
        text-align: center;
    }
    
    .form-title[b-1pcdud9g5a] {
        font-size: 1.125rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }
    
    .form-subtitle[b-1pcdud9g5a] {
        font-size: 0.875rem;
        line-height: 1.4;
    }

    /* Progress Steps - Vertical on mobile */
    .form-progress[b-1pcdud9g5a] {
        padding: 0.75rem;
        background: #f9fafb;
        border-radius: 12px;
        margin-bottom: 1rem;
    }

    .progress-steps[b-1pcdud9g5a] {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .stepper-steps[b-1pcdud9g5a]::before,
    .progress-steps[b-1pcdud9g5a]::before {
        display: none;
    }

    .step[b-1pcdud9g5a] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        flex: 1;
        min-width: 0;
    }

    .step-circle[b-1pcdud9g5a] {
        width: 36px;
        height: 36px;
        font-size: 0.875rem;
        margin-bottom: 0.25rem;
    }
    
    .step-label[b-1pcdud9g5a] {
        font-size: 0.625rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 60px;
    }

    /* Stepper - Horizontal compact on mobile */
    .stepper-simple[b-1pcdud9g5a] {
        padding: 0.75rem;
        margin-bottom: 1rem;
    }
    
    .stepper-steps[b-1pcdud9g5a] {
        flex-direction: row;
        gap: 0.25rem;
    }
    
    .step-text[b-1pcdud9g5a] {
        text-align: center;
    }
    
    .step-name[b-1pcdud9g5a] {
        font-size: 0.625rem;
    }
    
    .step-desc[b-1pcdud9g5a] {
        display: none;
    }
    
    .step-number[b-1pcdud9g5a] {
        width: 32px;
        height: 32px;
        font-size: 0.875rem;
    }

    /* Form Content - Full width on mobile */
    .form-content[b-1pcdud9g5a] {
        padding: 1rem;
        border-radius: 12px;
        margin: 0 -0.5rem;
    }

    .step-header[b-1pcdud9g5a] {
        margin-bottom: 1rem;
    }
    
    .step-header h3[b-1pcdud9g5a] {
        font-size: 1.125rem;
    }
    
    .step-header p[b-1pcdud9g5a] {
        font-size: 0.875rem;
    }

    /* Form Navigation - Stacked on mobile */
    .form-navigation[b-1pcdud9g5a],
    .form-actions[b-1pcdud9g5a] {
        flex-direction: column;
        gap: 0.75rem;
        padding-top: 1rem;
        margin-top: 1rem;
    }

    .nav-spacer[b-1pcdud9g5a] {
        display: none;
    }
    
    /* Buttons - Full width touch-friendly */
    .form-actions .bit-btn[b-1pcdud9g5a],
    .form-navigation .bit-btn[b-1pcdud9g5a] {
        width: 100%;
        min-height: 52px;
        font-size: 1rem;
        padding: 14px 20px;
        border-radius: 12px;
    }

    /* Subscription Banner - Stacked */
    .banner-content-wrapper[b-1pcdud9g5a] {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
    
    .banner-actions[b-1pcdud9g5a] {
        width: 100%;
        flex-direction: column;
    }
    
    .btn-banner-primary[b-1pcdud9g5a],
    .btn-banner-secondary[b-1pcdud9g5a] {
        width: 100%;
        padding: 0.75rem 1rem;
        min-height: 48px;
    }

    /* Photo Upload Section - Mobile optimized */
    .photo-upload-section[b-1pcdud9g5a] {
        padding: 0;
    }
    
    .main-photo-upload[b-1pcdud9g5a] {
        margin-bottom: 1.5rem;
    }
    
    .upload-area[b-1pcdud9g5a] {
        min-height: 200px;
        border-radius: 12px;
        padding: 1.5rem;
    }
    
    .upload-area.main-upload[b-1pcdud9g5a] {
        min-height: 180px;
    }
    
    .upload-content h5[b-1pcdud9g5a] {
        font-size: 1rem;
    }
    
    .upload-content p[b-1pcdud9g5a] {
        font-size: 0.8125rem;
    }
    
    .upload-content small[b-1pcdud9g5a] {
        font-size: 0.75rem;
    }

    /* Photos Grid - 2 columns on mobile */
    .photos-grid[b-1pcdud9g5a] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .photo-slot[b-1pcdud9g5a] {
        aspect-ratio: 1;
    }
    
    .upload-area.additional-upload[b-1pcdud9g5a] {
        min-height: auto;
        padding: 1rem;
    }
    
    .uploaded-photo.additional-photo[b-1pcdud9g5a] {
        border-radius: 10px;
    }

    /* Photo Guidelines - Compact on mobile */
    .photo-guidelines[b-1pcdud9g5a] {
        padding: 1rem;
        border-radius: 10px;
        margin-top: 1rem;
    }
    
    .photo-guidelines h6[b-1pcdud9g5a] {
        font-size: 0.9375rem;
    }
    
    .guidelines-list[b-1pcdud9g5a] {
        padding-left: 1rem;
    }
    
    .guidelines-list li[b-1pcdud9g5a] {
        font-size: 0.8125rem;
        line-height: 1.5;
        margin-bottom: 0.25rem;
    }

    /* Review Section - Compact cards */
    .review-grid[b-1pcdud9g5a] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .review-card.col-span-2[b-1pcdud9g5a] {
        grid-column: span 1;
    }
    
    .listing-preview[b-1pcdud9g5a] {
        padding: 0;
    }
    
    .preview-card[b-1pcdud9g5a] {
        flex-direction: column;
    }
    
    .preview-images[b-1pcdud9g5a] {
        width: 100%;
        max-height: 200px;
    }
    
    .preview-main-image[b-1pcdud9g5a] {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 10px;
    }
    
    .preview-content[b-1pcdud9g5a] {
        padding: 1rem 0;
    }
    
    .preview-title[b-1pcdud9g5a] {
        font-size: 1.125rem;
    }
    
    .preview-details[b-1pcdud9g5a] {
        font-size: 0.875rem;
    }
    
    .detail-row[b-1pcdud9g5a] {
        padding: 0.5rem 0;
        border-bottom: 1px solid #f0f0f0;
    }

    /* Terms Section */
    .terms-section[b-1pcdud9g5a] {
        padding: 1rem;
        margin-top: 1rem;
        background: #fef3c7;
        border-radius: 10px;
    }

    /* Map - Full width on mobile */
    #location-map[b-1pcdud9g5a] {
        height: 280px;
        width: 100%;
        border-radius: 10px;
    }
    
    .map-wrapper[b-1pcdud9g5a] {
        border-radius: 10px;
        margin-bottom: 1rem;
    }
    
    .map-search-container[b-1pcdud9g5a] {
        padding: 0.5rem;
    }
    
    .map-search-input[b-1pcdud9g5a] {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.875rem 1rem;
        border-radius: 10px;
    }
    
    .selected-location[b-1pcdud9g5a] {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem;
        background: #f0f9ff;
        border-radius: 8px;
    }

    /* Alerts - Full width */
    .alert[b-1pcdud9g5a] {
        margin: 0.75rem;
        padding: 0.875rem;
        font-size: 0.875rem;
        border-radius: 10px;
    }
    
    /* Form Inputs - Touch-friendly sizing */
    .form-group[b-1pcdud9g5a] {
        margin-bottom: 1.25rem;
    }
    
    .form-label[b-1pcdud9g5a] {
        font-size: 0.9375rem;
        margin-bottom: 0.5rem;
    }
}

/* ==================== MOBILE PORTRAIT (max-width: 480px) ==================== */
@media (max-width: 480px) {
    .listing-form-container[b-1pcdud9g5a] {
        padding: 0.75rem 0.5rem;
    }
    
    .form-header[b-1pcdud9g5a] {
        padding: 0.75rem;
    }
    
    .form-title[b-1pcdud9g5a] {
        font-size: 1rem;
    }
    
    .form-subtitle[b-1pcdud9g5a] {
        font-size: 0.8125rem;
    }
    
    /* Progress Steps - Minimal on small screens */
    .step-label[b-1pcdud9g5a] {
        font-size: 0.5625rem;
        max-width: 50px;
    }
    
    .step-circle[b-1pcdud9g5a] {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .form-content[b-1pcdud9g5a] {
        padding: 0.875rem;
    }
    
    .step-header h3[b-1pcdud9g5a] {
        font-size: 1rem;
    }
    
    /* Upload Areas - Compact */
    .upload-area.main-upload[b-1pcdud9g5a] {
        min-height: 150px;
        padding: 1rem;
    }
    
    .upload-content h5[b-1pcdud9g5a] {
        font-size: 0.9375rem;
    }
    
    /* Buttons - Maximum touch area */
    .form-actions .bit-btn[b-1pcdud9g5a] {
        min-height: 56px;
        font-size: 1rem;
        font-weight: 600;
    }
    
    /* Preview Card - Ultra compact */
    .preview-images[b-1pcdud9g5a] {
        max-height: 160px;
    }
    
    .preview-main-image[b-1pcdud9g5a] {
        height: 160px;
    }
    
    .preview-badges[b-1pcdud9g5a] {
        flex-wrap: wrap;
        gap: 0.375rem;
    }
    
    .badge[b-1pcdud9g5a] {
        font-size: 0.6875rem;
        padding: 0.25rem 0.5rem;
    }
    
    /* Photo Grid - 2 columns, smaller gaps */
    .photos-grid[b-1pcdud9g5a] {
        gap: 0.5rem;
    }
    
    /* Map - Smaller on very small screens */
    #location-map[b-1pcdud9g5a] {
        height: 240px;
    }
}

/* ==================== SAFE AREA INSETS (Notched devices) ==================== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .form-actions[b-1pcdud9g5a] {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
}

/* ==================== TOUCH IMPROVEMENTS ==================== */
@media (hover: none) and (pointer: coarse) {
    /* Touch devices: larger tap targets */
    .step[b-1pcdud9g5a] {
        min-height: 60px;
        padding: 0.5rem;
    }
    
    .upload-area[b-1pcdud9g5a] {
        min-height: 120px;
    }
    
    .photo-overlay[b-1pcdud9g5a] {
        opacity: 1;
        background: rgba(0, 0, 0, 0.5);
    }
    
    .photo-overlay .bit-btn[b-1pcdud9g5a] {
        min-height: 44px;
        min-width: 44px;
    }
    
    .btn-edit[b-1pcdud9g5a],
    .btn-banner-primary[b-1pcdud9g5a],
    .btn-banner-secondary[b-1pcdud9g5a] {
        min-height: 48px;
        min-width: 48px;
    }
    
    /* Disable hover effects on touch */
    .step:hover .step-number[b-1pcdud9g5a] {
        transform: none;
    }
    
    .autocomplete-item:hover[b-1pcdud9g5a] {
        background: transparent;
    }
    
    .autocomplete-item:active[b-1pcdud9g5a] {
        background: #f3f4f6;
    }
}

/* ==================== LEAFLET MAP OVERRIDES ==================== */
.leaflet-container[b-1pcdud9g5a] {
    font-family: inherit;
}

.leaflet-popup-content-wrapper[b-1pcdud9g5a] {
    border-radius: 8px;
}

.leaflet-control[b-1pcdud9g5a] {
    z-index: 999 !important; /* Lower than autocomplete */
}

/* Search Input Wrapper & Clear Button */
.search-input-wrapper[b-1pcdud9g5a] {
    position: relative;
}

.search-clear-btn[b-1pcdud9g5a] {
    position: absolute;
    right: 12px;
    top: 50%;
  transform: translateY(-50%);
 background: transparent;
 border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
 z-index: 10001 !important;
}

.search-clear-btn:hover[b-1pcdud9g5a] {
 background: #f3f4f6;
    color: #1f2937;
}

/* Autocomplete Item Styling */
.autocomplete-main[b-1pcdud9g5a] {
font-weight: 600;
    color: #1f2937;
    display: flex;
    align-items: center;
  font-size: 0.9375rem;
}

.autocomplete-sub[b-1pcdud9g5a] {
    font-size: 0.875rem;
    color: #6b7280;
margin-top: 0.25rem;
    padding-left: 1.5rem;
}

.autocomplete-item.no-results[b-1pcdud9g5a] {
    color: #6b7280;
    font-style: italic;
    text-align: center;
    padding: 1rem;
}

/* Selected Location Display Card */
.selected-location[b-1pcdud9g5a] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-top: 1rem;
}

.location-icon[b-1pcdud9g5a] {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.location-details[b-1pcdud9g5a] {
    flex: 1;
}

.location-details strong[b-1pcdud9g5a] {
    display: block;
    margin-bottom: 0.5rem;
    color: #1e40af;
}

.location-text[b-1pcdud9g5a] {
  color: #4b5563;
    line-height: 1.5;
}

/* Map Loading State */
#location-map.loading[b-1pcdud9g5a] {
    background: #f3f4f6;
    display: flex;
  align-items: center;
    justify-content: center;
}

#location-map.loading[b-1pcdud9g5a]::after {
    content: "Loading map...";
  color: #6b7280;
    font-size: 0.875rem;
}

/* Note: Map styles have been moved to AgriMap.razor.css for better component isolation */




/* _content/AgriConnect.BlazorApp/Components/Listing/ListingCardEnhanced.razor.rz.scp.css */
/* Enhanced Listing Card Styles */
.listing-card-enhanced[b-l0tp36vncx] {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    max-width: 380px;
    cursor: pointer;
}

.listing-card-enhanced:hover[b-l0tp36vncx] {
    transform: translateY(-8px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.1);
}

/* Image Container */
.listing-image-container[b-l0tp36vncx] {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.image-gallery[b-l0tp36vncx] {
    width: 100%;
    height: 100%;
    position: relative;
}

.main-image[b-l0tp36vncx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.listing-card-enhanced:hover .main-image[b-l0tp36vncx] {
    transform: scale(1.1);
}

.image-placeholder[b-l0tp36vncx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255, 255, 255, 0.8);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.placeholder-icon[b-l0tp36vncx] {
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
    stroke-width: 1.5;
    opacity: 0.7;
}

.image-placeholder span[b-l0tp36vncx] {
    font-size: 16px;
    font-weight: 500;
    opacity: 0.8;
}

/* Image Count */
.image-count[b-l0tp36vncx] {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.image-icon[b-l0tp36vncx] {
    width: 14px;
    height: 14px;
}

/* Badge System */
.badge-container[b-l0tp36vncx] {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 2;
}

.badge[b-l0tp36vncx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 25px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.badge-icon[b-l0tp36vncx] {
    width: 14px;
    height: 14px;
}

.badge.organic[b-l0tp36vncx] {
    background: rgba(34, 197, 94, 0.9);
    color: white;
}

.badge.featured[b-l0tp36vncx] {
    background: rgba(245, 101, 101, 0.9);
    color: white;
}

.badge.status.active[b-l0tp36vncx] {
    background: rgba(34, 197, 94, 0.9);
    color: white;
}

.badge.status.pending[b-l0tp36vncx] {
    background: rgba(251, 191, 36, 0.9);
    color: white;
}

.badge.status.sold[b-l0tp36vncx] {
    background: rgba(107, 114, 128, 0.9);
    color: white;
}

.badge.status.expired[b-l0tp36vncx] {
    background: rgba(239, 68, 68, 0.9);
    color: white;
}

/* Favorite Button */
.favorite-button[b-l0tp36vncx] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.favorite-button:hover[b-l0tp36vncx] {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.15);
}

.favorite-button.favorited[b-l0tp36vncx] {
    background: rgba(239, 68, 68, 0.9);
}

.heart-icon[b-l0tp36vncx] {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    color: #64748b;
    transition: color 0.3s ease;
}

.favorite-button:hover .heart-icon[b-l0tp36vncx] {
    color: #ef4444;
}

.favorite-button.favorited .heart-icon[b-l0tp36vncx] {
    color: white;
}

/* Content Section */
.listing-content[b-l0tp36vncx] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

.listing-header[b-l0tp36vncx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.title-section[b-l0tp36vncx] {
    flex: 1;
    min-width: 0;
}

.listing-title[b-l0tp36vncx] {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rating[b-l0tp36vncx] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stars[b-l0tp36vncx] {
    display: flex;
    gap: 2px;
}

.star[b-l0tp36vncx] {
    width: 14px;
    height: 14px;
    color: #e5e7eb;
    transition: color 0.2s ease;
}

.star.filled[b-l0tp36vncx] {
    color: #fbbf24;
}

.rating-text[b-l0tp36vncx] {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.price-section[b-l0tp36vncx] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.price[b-l0tp36vncx] {
    font-size: 24px;
    font-weight: 800;
    color: #059669;
    line-height: 1;
    letter-spacing: -0.5px;
}

.unit[b-l0tp36vncx] {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
    font-weight: 500;
}

.negotiable[b-l0tp36vncx] {
    font-size: 10px;
    color: #059669;
    background: rgba(5, 150, 105, 0.1);
    padding: 2px 6px;
    border-radius: 10px;
    margin-top: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Info Grid */
.info-grid[b-l0tp36vncx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.info-item[b-l0tp36vncx] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #475569;
    line-height: 1.4;
}

.info-icon[b-l0tp36vncx] {
    width: 16px;
    height: 16px;
    stroke-width: 1.5;
    flex-shrink: 0;
}

.info-icon.location[b-l0tp36vncx] { color: #ef4444; }
.info-icon.quantity[b-l0tp36vncx] { color: #059669; }
.info-icon.date[b-l0tp36vncx] { color: #3b82f6; }
.info-icon.views[b-l0tp36vncx] { color: #64748b; }

/* Description */
.description[b-l0tp36vncx] {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* Tags */
.tags[b-l0tp36vncx] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag[b-l0tp36vncx] {
    background: #f1f5f9;
    color: #475569;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}

.tag.more[b-l0tp36vncx] {
    background: #e2e8f0;
    color: #64748b;
}

/* Footer */
.listing-footer[b-l0tp36vncx] {
    padding: 20px 24px 24px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: #fafbfc;
}

/* Seller Info */
.seller-info[b-l0tp36vncx] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: opacity 0.2s ease;
    flex: 1;
    min-width: 0;
}

.seller-info:hover[b-l0tp36vncx] {
    opacity: 0.8;
}

.seller-avatar[b-l0tp36vncx] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.avatar-image[b-l0tp36vncx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder[b-l0tp36vncx] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 16px;
}

.seller-details[b-l0tp36vncx] {
    flex: 1;
    min-width: 0;
}

.seller-name[b-l0tp36vncx] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.seller-rating[b-l0tp36vncx] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.star-small[b-l0tp36vncx] {
    width: 12px;
    height: 12px;
    color: #fbbf24;
}

.seller-rating span[b-l0tp36vncx] {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

/* Action Buttons */
.action-buttons[b-l0tp36vncx] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.btn[b-l0tp36vncx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 36px;
    white-space: nowrap;
}

.btn-primary[b-l0tp36vncx] {
    background: #059669;
    color: white;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
}

.btn-primary:hover[b-l0tp36vncx] {
    background: #047857;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.4);
}

.btn-secondary[b-l0tp36vncx] {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.btn-secondary:hover[b-l0tp36vncx] {
    background: #f1f5f9;
    color: #334155;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 640px) {
    .listing-card-enhanced[b-l0tp36vncx] {
        max-width: 100%;
        border-radius: 16px;
    }
    
    .listing-image-container[b-l0tp36vncx] {
        height: 220px;
    }
    
    .listing-content[b-l0tp36vncx] {
        padding: 20px;
        gap: 16px;
    }
    
    .listing-title[b-l0tp36vncx] {
        font-size: 18px;
    }
    
    .price[b-l0tp36vncx] {
        font-size: 20px;
    }
    
    .info-grid[b-l0tp36vncx] {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .listing-footer[b-l0tp36vncx] {
        padding: 16px 20px 20px;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .action-buttons[b-l0tp36vncx] {
        justify-content: stretch;
    }
    
    .btn[b-l0tp36vncx] {
        flex: 1;
        justify-content: center;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .listing-card-enhanced[b-l0tp36vncx] {
        background: #1e293b;
        border-color: rgba(255, 255, 255, 0.1);
    }
    
    .listing-card-enhanced:hover[b-l0tp36vncx] {
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5), 0 10px 10px rgba(0, 0, 0, 0.3);
    }
    
    .listing-title[b-l0tp36vncx] {
        color: #f8fafc;
    }
    
    .price[b-l0tp36vncx] {
        color: #10b981;
    }
    
    .info-item[b-l0tp36vncx] {
        color: #cbd5e1;
    }
    
    .description[b-l0tp36vncx] {
        color: #94a3b8;
    }
    
    .tag[b-l0tp36vncx] {
        background: #334155;
        color: #cbd5e1;
    }
    
    .tag.more[b-l0tp36vncx] {
        background: #475569;
        color: #94a3b8;
    }
    
    .listing-footer[b-l0tp36vncx] {
        background: #0f172a;
        border-color: #334155;
    }
    
    .seller-name[b-l0tp36vncx] {
        color: #f1f5f9;
    }
    
    .btn-secondary[b-l0tp36vncx] {
        background: #334155;
        color: #cbd5e1;
        border-color: #475569;
    }
    
    .btn-secondary:hover[b-l0tp36vncx] {
        background: #475569;
        color: #f1f5f9;
    }
}

/* Loading State */
.listing-card-enhanced.loading[b-l0tp36vncx] {
    pointer-events: none;
    opacity: 0.7;
    position: relative;
}

.listing-card-enhanced.loading[b-l0tp36vncx]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 2px solid #e2e8f0;
    border-top-color: #059669;
    border-radius: 50%;
    animation: spin-b-l0tp36vncx 1s linear infinite;
    z-index: 10;
}

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

/* Focus States */
.favorite-button:focus[b-l0tp36vncx],
.btn:focus[b-l0tp36vncx],
.seller-info:focus[b-l0tp36vncx] {
    outline: 2px solid #059669;
    outline-offset: 2px;
}

/* Animation for favorited state */
.favorite-button.favorited[b-l0tp36vncx] {
    animation: heartBeat-b-l0tp36vncx 0.6s ease-in-out;
}

@keyframes heartBeat-b-l0tp36vncx {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.3);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.3);
    }
    70% {
        transform: scale(1);
    }
}
/* _content/AgriConnect.BlazorApp/Components/Listing/ListingCardSimple.razor.rz.scp.css */
.listing-card[b-2800kgdlxj] {
    border-radius: var(--spacing-md);
    overflow: hidden;
    background-color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
    cursor: pointer;
}

.listing-card:hover[b-2800kgdlxj] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.listing-card.highlighted[b-2800kgdlxj] {
    border: 2px solid var(--bs-primary);
}

/* Image Section */
.listing-image[b-2800kgdlxj] {
    position: relative;
    padding-top: 66.67%; /* 3:2 aspect ratio */
    background-color: var(--bs-gray-100);
}

.listing-image img[b-2800kgdlxj] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.no-image[b-2800kgdlxj] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-gray-400);
    font-size: 2rem;
}

.image-count[b-2800kgdlxj] {
    position: absolute;
    bottom: var(--spacing-sm);
    right: var(--spacing-sm);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 1rem;
    font-size: 0.85rem;
}

.listing-badges[b-2800kgdlxj] {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    display: flex;
    gap: var(--spacing-xs);
}

.badge[b-2800kgdlxj] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.85rem;
}

.badge.organic[b-2800kgdlxj] {
    background-color: #4caf50;
    color: white;
}

.badge.certified[b-2800kgdlxj] {
    background-color: #ffc107;
    color: white;
}

.favorite-button[b-2800kgdlxj] {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background-color: white;
    color: var(--bs-gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.favorite-button:hover[b-2800kgdlxj] {
    transform: scale(1.1);
}

.favorite-button.active[b-2800kgdlxj] {
    color: #e91e63;
}

.status-badge[b-2800kgdlxj] {
    position: absolute;
    top: var(--spacing-md);
    left: 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    color: white;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
}

.status-badge.active[b-2800kgdlxj] { background-color: var(--bs-success); }
.status-badge.pending[b-2800kgdlxj] { background-color: var(--bs-warning); }
.status-badge.sold[b-2800kgdlxj] { background-color: var(--bs-danger); }
.status-badge.expired[b-2800kgdlxj] { background-color: var(--bs-secondary); }

/* Content Section */
.listing-content[b-2800kgdlxj] {
    padding: var(--spacing-md);
}

.listing-header[b-2800kgdlxj] {
    margin-bottom: var(--spacing-sm);
}

.listing-title[b-2800kgdlxj] {
    font-size: 1.1rem;
    margin: 0 0 var(--spacing-xs);
    color: var(--bs-gray-900);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.listing-price[b-2800kgdlxj] {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
}

.price[b-2800kgdlxj] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bs-primary);
}

.unit[b-2800kgdlxj] {
    font-size: 0.85rem;
    color: var(--bs-gray-600);
}

.listing-quantity[b-2800kgdlxj] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.9rem;
    color: var(--bs-gray-700);
    margin-bottom: var(--spacing-sm);
}

.listing-meta[b-2800kgdlxj] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    font-size: 0.85rem;
    color: var(--bs-gray-600);
    margin-bottom: var(--spacing-sm);
}

.location[b-2800kgdlxj],
.date[b-2800kgdlxj] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.distance[b-2800kgdlxj] {
    margin-left: var(--spacing-xs);
    color: var(--bs-gray-500);
}

/* Seller Info */
.seller-info[b-2800kgdlxj] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--bs-gray-200);
}

.seller-avatar[b-2800kgdlxj],
.seller-avatar-placeholder[b-2800kgdlxj] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
}

.seller-avatar[b-2800kgdlxj] {
    object-fit: cover;
}

.seller-avatar-placeholder[b-2800kgdlxj] {
    background-color: var(--bs-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-gray-500);
}

.seller-details[b-2800kgdlxj] {
    flex: 1;
    min-width: 0;
}

.seller-name[b-2800kgdlxj] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.9rem;
    color: var(--bs-gray-700);
    margin-bottom: var(--spacing-xs);
}

.verified-badge[b-2800kgdlxj] {
    color: var(--bs-primary);
    font-size: 0.85rem;
}

.seller-rating[b-2800kgdlxj] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.rating-count[b-2800kgdlxj] {
    font-size: 0.8rem;
    color: var(--bs-gray-500);
}

/* Actions */
.listing-actions[b-2800kgdlxj] {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

/* Modern Listing Card Styles */
.listing-card-modern[b-2800kgdlxj] {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
    transition:
    all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    height: fit-content;
    max-width: 400px;
}

.listing-card-modern:hover[b-2800kgdlxj] {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.1);
}

/* Image Section */
.listing-image-wrapper[b-2800kgdlxj] {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.listing-image[b-2800kgdlxj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.listing-card-modern:hover .listing-image[b-2800kgdlxj] {
    transform: scale(1.05);
}

.listing-image-placeholder[b-2800kgdlxj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #64748b;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.placeholder-icon[b-2800kgdlxj] {
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
    stroke-width: 1.5;
}

.listing-image-placeholder span[b-2800kgdlxj] {
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
}

/* Modern Badge System */
.listing-badges[b-2800kgdlxj] {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}

.badge[b-2800kgdlxj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.badge-icon[b-2800kgdlxj] {
    width: 12px;
    height: 12px;
}

.badge-organic[b-2800kgdlxj] {
    background: rgba(34, 197, 94, 0.9);
    color: white;
}

.badge-featured[b-2800kgdlxj] {
    background: rgba(239, 68, 68, 0.9);
    color: white;
}

/* Favorite Button */
.favorite-btn[b-2800kgdlxj] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}

.favorite-btn:hover[b-2800kgdlxj] {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

.heart-icon[b-2800kgdlxj] {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    color: #64748b;
    transition: color 0.2s ease;
}

.favorite-btn:hover .heart-icon[b-2800kgdlxj] {
    color: #ef4444;
}

/* Content Section */
.listing-content[b-2800kgdlxj] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.listing-header[b-2800kgdlxj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.listing-title[b-2800kgdlxj] {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
    line-height: 1.4;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.price-section[b-2800kgdlxj] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.price-amount[b-2800kgdlxj] {
    font-size: 20px;
    font-weight: 700;
    color: #059669;
    line-height: 1;
}

.price-unit[b-2800kgdlxj] {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

/* Quick Info */
.listing-quick-info[b-2800kgdlxj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-item[b-2800kgdlxj] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #475569;
}

.info-icon[b-2800kgdlxj] {
    width: 16px;
    height: 16px;
    stroke-width: 1.5;
    color: #64748b;
    flex-shrink: 0;
}

/* Description */
.listing-description[b-2800kgdlxj] {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

/* Action Buttons */
.listing-actions[b-2800kgdlxj] {
    display: flex;
    gap: 12px;
    margin-top: auto;
    padding-top: 4px;
}

.btn[b-2800kgdlxj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    min-height: 40px;
}

.btn-icon[b-2800kgdlxj] {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.btn-primary[b-2800kgdlxj] {
    background: #059669;
    color: white;
}

.btn-primary:hover[b-2800kgdlxj] {
    background: #047857;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.btn-secondary[b-2800kgdlxj] {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.btn-secondary:hover[b-2800kgdlxj] {
    background: #e2e8f0;
    color: #334155;
    transform: translateY(-1px);
}

.btn-outline[b-2800kgdlxj] {
    background: transparent;
    color: #059669;
    border: 1px solid #059669;
}

.btn-outline:hover[b-2800kgdlxj] {
    background: #059669;
    color: white;
    transform: translateY(-1px);
}

/* Seller Section - Protected content styling */
.seller-section[b-2800kgdlxj] {
    margin: 12px 0;
    padding: 12px;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}

.seller-info-content[b-2800kgdlxj] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.seller-avatar[b-2800kgdlxj] {
    width: 40px;
 height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.seller-avatar img[b-2800kgdlxj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.seller-avatar .initials[b-2800kgdlxj] {
    color: white;
    font-weight: 600;
    font-size: 14px;
}

.seller-details[b-2800kgdlxj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.seller-name[b-2800kgdlxj] {
    font-weight: 600;
    color: #1f2937;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.verified-tag[b-2800kgdlxj] {
    display: inline-flex;
  align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #22c55e;
    font-weight: 500;
}

.verified-tag svg[b-2800kgdlxj] {
    color: #22c55e;
}

/* Responsive Design */
@media (max-width: 640px) {
    .listing-card-modern[b-2800kgdlxj] {
        max-width: 100%;
        border-radius: 12px;
    }
    
    .listing-image-wrapper[b-2800kgdlxj] {
        height: 200px;
    }
    
    .listing-content[b-2800kgdlxj] {
        padding: 16px;
        gap: 12px;
    }
    
    .listing-title[b-2800kgdlxj] {
        font-size: 16px;
    }
    
    .price-amount[b-2800kgdlxj] {
        font-size: 18px;
    }
    
    .listing-actions[b-2800kgdlxj] {
        flex-direction: column;
        gap: 8px;
    }
    
    .btn[b-2800kgdlxj] {
        justify-content: center;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .listing-card-modern[b-2800kgdlxj] {
        background: #1e293b;
        border-color: rgba(255, 255, 255, 0.1);
    }
    
    .listing-card-modern:hover[b-2800kgdlxj] {
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
    }
    
    .listing-title[b-2800kgdlxj] {
        color: #f8fafc;
    }
    
    .price-amount[b-2800kgdlxj] {
        color: #10b981;
    }
    
    .info-item[b-2800kgdlxj] {
        color: #cbd5e1;
    }
    
    .listing-description[b-2800kgdlxj] {
        color: #94a3b8;
    }
    
    .btn-secondary[b-2800kgdlxj] {
        background: #334155;
        color: #cbd5e1;
        border-color: #475569;
    }
    
    .btn-secondary:hover[b-2800kgdlxj] {
        background: #475569;
        color: #f1f5f9;
    }
    
    .listing-image-placeholder[b-2800kgdlxj] {
        background: linear-gradient(135deg, #334155 0%, #475569 100%);
        color: #94a3b8;
    }
    
    .listing-image-placeholder span[b-2800kgdlxj] {
        color: #94a3b8;
    }
}

/* Focus States for Accessibility */
.favorite-btn:focus[b-2800kgdlxj],
.btn:focus[b-2800kgdlxj] {
    outline: 2px solid #059669;
    outline-offset: 2px;
}

/* Loading State */
.listing-card-modern.loading[b-2800kgdlxj] {
    pointer-events: none;
    opacity: 0.6;
}

.listing-card-modern.loading[b-2800kgdlxj]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #e2e8f0;
    border-top-color: #059669;
    border-radius: 50%;
    animation: spin-b-2800kgdlxj 1s linear infinite;
}

@keyframes spin-b-2800kgdlxj {
    to { transform: rotate(360deg); }
}
/* _content/AgriConnect.BlazorApp/Components/Listing/ListingsGrid.razor.rz.scp.css */
/* Listings Grid Container */
.listings-grid-container[b-kgte8bhg74] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Grid Header */
.grid-header[b-kgte8bhg74] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f1f5f9;
}

.results-info[b-kgte8bhg74] {
    flex: 1;
}

.results-title[b-kgte8bhg74] {
    font-size: 2rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.025em;
}

.results-count[b-kgte8bhg74] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
    font-weight: 500;
}

.search-term[b-kgte8bhg74] {
    font-weight: 600;
    color: #059669;
}

/* Sort Controls */
.sort-controls[b-kgte8bhg74] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sort-label[b-kgte8bhg74] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.sort-select[b-kgte8bhg74] {
    padding: 0.5rem 0.75rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    background: white;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 160px;
}

.sort-select:focus[b-kgte8bhg74] {
    outline: none;
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

.sort-select:hover[b-kgte8bhg74] {
    border-color: #d1d5db;
}

/* Listings Grid */
.listings-grid[b-kgte8bhg74] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 2rem;
    justify-items: center;
}

.listings-grid.compact[b-kgte8bhg74] {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* Empty State */
.empty-state[b-kgte8bhg74] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    min-height: 400px;
}

.empty-icon[b-kgte8bhg74] {
    width: 80px;
    height: 80px;
    margin-bottom: 1.5rem;
    color: #d1d5db;
}

.empty-icon svg[b-kgte8bhg74] {
    width: 100%;
    height: 100%;
    stroke-width: 1.5;
}

.empty-title[b-kgte8bhg74] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #374151;
    margin: 0 0 0.75rem 0;
}

.empty-description[b-kgte8bhg74] {
    font-size: 1rem;
    color: #6b7280;
    margin: 0 0 2rem 0;
    max-width: 500px;
    line-height: 1.6;
}

.btn-create-listing[b-kgte8bhg74] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #059669;
    color: white;
    border: none;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.btn-create-listing:hover[b-kgte8bhg74] {
    background: #047857;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.4);
}

.btn-create-listing .btn-icon[b-kgte8bhg74] {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2;
}

/* Load More Section */
.load-more-section[b-kgte8bhg74] {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.btn-load-more[b-kgte8bhg74] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    background: #f8fafc;
    color: #374151;
    border: 2px solid #e5e7eb;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 180px;
    justify-content: center;
}

.btn-load-more:hover:not(.loading)[b-kgte8bhg74] {
    background: #f1f5f9;
    border-color: #d1d5db;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-load-more:disabled[b-kgte8bhg74] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-load-more.loading[b-kgte8bhg74] {
    pointer-events: none;
}

.load-icon[b-kgte8bhg74] {
    width: 1rem;
    height: 1rem;
    stroke-width: 2;
    transition: transform 0.2s ease;
}

.btn-load-more:hover .load-icon[b-kgte8bhg74] {
    transform: translateY(2px);
}

/* Loading Spinner */
.loading-spinner[b-kgte8bhg74] {
    width: 1rem;
    height: 1rem;
    border: 2px solid #e5e7eb;
    border-top-color: #059669;
    border-radius: 50%;
    animation: spin-b-kgte8bhg74 1s linear infinite;
}

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

/* Responsive Design */
@media (max-width: 1200px) {
    .listings-grid[b-kgte8bhg74] {
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: 1.5rem;
    }
    
    .listings-grid.compact[b-kgte8bhg74] {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .listings-grid-container[b-kgte8bhg74] {
        padding: 0.75rem;
        gap: 1.5rem;
    }
    
    .grid-header[b-kgte8bhg74] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding-bottom: 1rem;
    }
    
    .results-title[b-kgte8bhg74] {
        font-size: 1.75rem;
    }
    
    .sort-controls[b-kgte8bhg74] {
        justify-content: space-between;
    }
    
    .sort-select[b-kgte8bhg74] {
        min-width: 140px;
    }
    
    .listings-grid[b-kgte8bhg74] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        justify-items: stretch;
    }
    
    .listings-grid.compact[b-kgte8bhg74] {
        grid-template-columns: 1fr;
    }
    
    .empty-state[b-kgte8bhg74] {
        padding: 3rem 1rem;
        min-height: 300px;
    }
    
    .empty-icon[b-kgte8bhg74] {
        width: 60px;
        height: 60px;
        margin-bottom: 1rem;
    }
    
    .empty-title[b-kgte8bhg74] {
        font-size: 1.25rem;
    }
    
    .empty-description[b-kgte8bhg74] {
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .listings-grid-container[b-kgte8bhg74] {
        padding: 0.5rem;
    }
    
    .results-title[b-kgte8bhg74] {
        font-size: 1.5rem;
    }
    
    .sort-controls[b-kgte8bhg74] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    
    .sort-select[b-kgte8bhg74] {
        min-width: unset;
        width: 100%;
    }
    
    .btn-load-more[b-kgte8bhg74] {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
        min-width: 160px;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .listings-grid-container[b-kgte8bhg74] {
        color: #f8fafc;
    }
    
    .grid-header[b-kgte8bhg74] {
        border-color: #334155;
    }
    
    .results-title[b-kgte8bhg74] {
        color: #f8fafc;
    }
    
    .results-count[b-kgte8bhg74] {
        color: #94a3b8;
    }
    
    .search-term[b-kgte8bhg74] {
        color: #10b981;
    }
    
    .sort-label[b-kgte8bhg74] {
        color: #cbd5e1;
    }
    
    .sort-select[b-kgte8bhg74] {
        background: #1e293b;
        border-color: #475569;
        color: #cbd5e1;
    }
    
    .sort-select:focus[b-kgte8bhg74] {
        border-color: #10b981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
    }
    
    .sort-select:hover[b-kgte8bhg74] {
        border-color: #64748b;
    }
    
    .empty-icon[b-kgte8bhg74] {
        color: #475569;
    }
    
    .empty-title[b-kgte8bhg74] {
        color: #cbd5e1;
    }
    
    .empty-description[b-kgte8bhg74] {
        color: #94a3b8;
    }
    
    .btn-load-more[b-kgte8bhg74] {
        background: #334155;
        color: #cbd5e1;
        border-color: #475569;
    }
    
    .btn-load-more:hover:not(.loading)[b-kgte8bhg74] {
        background: #475569;
        border-color: #64748b;
    }
    
    .loading-spinner[b-kgte8bhg74] {
        border-color: #475569;
        border-top-color: #10b981;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .sort-select[b-kgte8bhg74] {
        border-width: 3px;
    }
    
    .btn-create-listing[b-kgte8bhg74],
    .btn-load-more[b-kgte8bhg74] {
        border-width: 3px;
    }
    
    .grid-header[b-kgte8bhg74] {
        border-width: 3px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .btn-create-listing[b-kgte8bhg74],
    .btn-load-more[b-kgte8bhg74],
    .sort-select[b-kgte8bhg74],
    .load-icon[b-kgte8bhg74] {
        transition: none;
    }
    
    .loading-spinner[b-kgte8bhg74] {
        animation: none;
    }
    
    .btn-create-listing:hover[b-kgte8bhg74],
    .btn-load-more:hover[b-kgte8bhg74] {
        transform: none;
    }
}
/* _content/AgriConnect.BlazorApp/Components/Logistics/InventoryManagementComponent.razor.rz.scp.css */
.inventory-management[b-b5maum0exp] {
    padding: 0;
}

.inventory-header[b-b5maum0exp] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
    border-radius: 16px;
    margin-bottom: 2rem;
}

.header-content[b-b5maum0exp] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.inventory-title[b-b5maum0exp] {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: white;
}

.inventory-subtitle[b-b5maum0exp] {
    opacity: 0.9;
    margin: 0;
    font-size: 1rem;
}

.inventory-controls[b-b5maum0exp] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.inventory-overview[b-b5maum0exp] {
    margin-bottom: 2rem;
}

.overview-card[b-b5maum0exp] {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.2s ease;
}

.overview-card:hover[b-b5maum0exp] {
    transform: translateY(-2px);
}

.card-icon[b-b5maum0exp] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #495057;
}

.card-content[b-b5maum0exp] {
    flex: 1;
}

.card-value[b-b5maum0exp] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.card-label[b-b5maum0exp] {
    color: #6c757d;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.card-change[b-b5maum0exp] {
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.card-change.positive[b-b5maum0exp] {
    color: #28a745;
}

.card-change.negative[b-b5maum0exp] {
    color: #dc3545;
}

.card-change.warning[b-b5maum0exp] {
    color: #ffc107;
}

.inventory-dashboard[b-b5maum0exp] {
    margin-bottom: 2rem;
}

.inventory-table-card[b-b5maum0exp], .analytics-card[b-b5maum0exp] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    overflow: hidden;
}

.inventory-table-card .card-header[b-b5maum0exp], .analytics-card .card-header[b-b5maum0exp] {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 1.25rem 1.5rem;
}

.inventory-table-card .card-body[b-b5maum0exp], .analytics-card .card-body[b-b5maum0exp] {
    padding: 1.5rem;
}

.table-filters[b-b5maum0exp] {
    display: flex;
    gap: 0.75rem;
}

.inventory-table-container[b-b5maum0exp] {
    overflow-x: auto;
}

.inventory-table[b-b5maum0exp] {
    width: 100%;
    border-collapse: collapse;
}

.inventory-table th[b-b5maum0exp] {
    background: #f8f9fa;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 2px solid #e9ecef;
}

.inventory-table td[b-b5maum0exp] {
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}

.inventory-table tbody tr:hover[b-b5maum0exp] {
    background: #f8f9fa;
}

.low-stock-row[b-b5maum0exp] {
    background: #fff5f5;
}

.expiring-row[b-b5maum0exp] {
    background: #fffbf0;
}

.item-info[b-b5maum0exp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.item-image[b-b5maum0exp] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.item-image img[b-b5maum0exp] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-details[b-b5maum0exp] {
    min-width: 0;
}

.item-name[b-b5maum0exp] {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.item-sku[b-b5maum0exp] {
    font-size: 0.75rem;
    color: #6c757d;
}

.category-badge[b-b5maum0exp] {
    background: #e7f3ff;
    color: #004085;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.stock-info[b-b5maum0exp] {
    min-width: 120px;
}

.stock-quantity[b-b5maum0exp] {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.stock-bar[b-b5maum0exp] {
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
}

.stock-fill[b-b5maum0exp] {
    height: 100%;
    background: linear-gradient(90deg, #28a745, #20c997);
    transition: width 0.3s ease;
}

.status-badge[b-b5maum0exp] {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-in-stock[b-b5maum0exp] {
    background: #d4edda;
    color: #155724;
}

.status-low-stock[b-b5maum0exp] {
    background: #fff3cd;
    color: #856404;
}

.status-out-of-stock[b-b5maum0exp] {
    background: #f8d7da;
    color: #721c24;
}

.action-buttons[b-b5maum0exp] {
    display: flex;
    gap: 0.25rem;
}

.table-footer[b-b5maum0exp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

.pagination-info[b-b5maum0exp] {
    color: #6c757d;
    font-size: 0.875rem;
}

.pagination-controls[b-b5maum0exp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-info[b-b5maum0exp] {
    font-size: 0.875rem;
    color: #2c3e50;
    margin: 0 1rem;
}

.alerts-list[b-b5maum0exp] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.alert-item[b-b5maum0exp] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid #6c757d;
}

.alert-critical[b-b5maum0exp] {
    background: #f8d7da;
    border-left-color: #dc3545;
}

.alert-warning[b-b5maum0exp] {
    background: #fff3cd;
    border-left-color: #ffc107;
}

.alert-info[b-b5maum0exp] {
    background: #cce5ff;
    border-left-color: #007bff;
}

.alert-icon[b-b5maum0exp] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.alert-content[b-b5maum0exp] {
    flex: 1;
}

.alert-title[b-b5maum0exp] {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.alert-message[b-b5maum0exp] {
    color: #6c757d;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.alert-time[b-b5maum0exp] {
    font-size: 0.75rem;
    color: #adb5bd;
}

.alert-actions[b-b5maum0exp] {
    flex-shrink: 0;
}

.turnover-chart[b-b5maum0exp] {
    margin-bottom: 1.5rem;
}

#turnoverChart[b-b5maum0exp] {
    width: 100%;
    height: 200px;
}

.turnover-stats[b-b5maum0exp] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stat-item[b-b5maum0exp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.stat-label[b-b5maum0exp] {
    font-weight: 500;
    color: #2c3e50;
}

.stat-value[b-b5maum0exp] {
    font-weight: 700;
    color: #007bff;
}

.inventory-recommendations[b-b5maum0exp] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    padding: 2rem;
}

.recommendations-header[b-b5maum0exp] {
    text-align: center;
    margin-bottom: 2rem;
}

.recommendations-title[b-b5maum0exp] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.recommendations-subtitle[b-b5maum0exp] {
    color: #6c757d;
    margin: 0;
}

.recommendations-grid[b-b5maum0exp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
}

.recommendation-card[b-b5maum0exp] {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
    border-left: 4px solid #6c757d;
    transition: all 0.2s ease;
}

.recommendation-card:hover[b-b5maum0exp] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.recommendation-restock[b-b5maum0exp] {
    border-left-color: #28a745;
    background: #f8fff8;
}

.recommendation-optimize[b-b5maum0exp] {
    border-left-color: #007bff;
    background: #f0f8ff;
}

.recommendation-discontinue[b-b5maum0exp] {
    border-left-color: #dc3545;
    background: #fff8f8;
}

.recommendation-header[b-b5maum0exp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.recommendation-icon[b-b5maum0exp] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.recommendation-priority[b-b5maum0exp] {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.priority-high[b-b5maum0exp] {
    background: #f8d7da;
    color: #721c24;
}

.priority-medium[b-b5maum0exp] {
    background: #fff3cd;
    color: #856404;
}

.priority-low[b-b5maum0exp] {
    background: #cce5ff;
    color: #004085;
}

.recommendation-title[b-b5maum0exp] {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.recommendation-description[b-b5maum0exp] {
    color: #6c757d;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.recommendation-impact[b-b5maum0exp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: white;
    border-radius: 8px;
}

.impact-label[b-b5maum0exp] {
    font-size: 0.875rem;
    color: #6c757d;
}

.impact-value[b-b5maum0exp] {
    font-weight: 600;
    color: #28a745;
}

.recommendation-actions[b-b5maum0exp] {
    display: flex;
    gap: 0.5rem;
}

/* Responsive Design */
@media (max-width: 992px) {
    .header-content[b-b5maum0exp] {
        flex-direction: column;
        gap: 1rem;
    }

    .inventory-dashboard .row[b-b5maum0exp] {
        flex-direction: column;
    }

    .inventory-dashboard .col-lg-8[b-b5maum0exp],
    .inventory-dashboard .col-lg-4[b-b5maum0exp] {
        width: 100%;
    }

    .recommendations-grid[b-b5maum0exp] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .inventory-header[b-b5maum0exp] {
        padding: 1.5rem;
    }

    .inventory-title[b-b5maum0exp] {
        font-size: 1.5rem;
    }

    .overview-card[b-b5maum0exp] {
        padding: 1rem;
    }

    .card-value[b-b5maum0exp] {
        font-size: 1.5rem;
    }

    .inventory-table-container[b-b5maum0exp] {
        font-size: 0.875rem;
    }

    .inventory-table th[b-b5maum0exp],
    .inventory-table td[b-b5maum0exp] {
        padding: 0.75rem;
    }

    .item-info[b-b5maum0exp] {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .stock-info[b-b5maum0exp] {
        min-width: auto;
    }

    .action-buttons[b-b5maum0exp] {
        flex-direction: column;
    }

    .table-footer[b-b5maum0exp] {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    .alert-item[b-b5maum0exp] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .alert-actions[b-b5maum0exp] {
        align-self: flex-end;
    }

    .recommendation-card[b-b5maum0exp] {
        padding: 1rem;
    }

    .recommendation-header[b-b5maum0exp] {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }

    .recommendation-actions[b-b5maum0exp] {
        flex-direction: column;
    }

    .recommendation-impact[b-b5maum0exp] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}
/* _content/AgriConnect.BlazorApp/Components/Logistics/RouteOptimizationEngineComponent.razor.rz.scp.css */
.route-optimization[b-jpw1tya12f] {
    padding: 0;
}

.optimization-header[b-jpw1tya12f] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
    border-radius: 16px;
    margin-bottom: 2rem;
}

.header-content[b-jpw1tya12f] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.optimization-title[b-jpw1tya12f] {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: white;
}

.optimization-subtitle[b-jpw1tya12f] {
    opacity: 0.9;
    margin: 0;
    font-size: 1rem;
}

.optimization-controls[b-jpw1tya12f] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.optimization-progress[b-jpw1tya12f] {
    margin-bottom: 2rem;
}

.progress-card[b-jpw1tya12f] {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

.progress-header[b-jpw1tya12f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.progress-title[b-jpw1tya12f] {
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
}

.progress-percentage[b-jpw1tya12f] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #007bff;
}

.progress-bar[b-jpw1tya12f] {
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 2rem;
}

.progress-fill[b-jpw1tya12f] {
    height: 100%;
    background: linear-gradient(90deg, #007bff, #0056b3);
    transition: width 0.3s ease;
}

.progress-steps[b-jpw1tya12f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.step[b-jpw1tya12f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    min-width: 120px;
}

.step i[b-jpw1tya12f] {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.step span[b-jpw1tya12f] {
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
}

.step-pending[b-jpw1tya12f] {
    background: #f8f9fa;
    color: #6c757d;
}

.step-active[b-jpw1tya12f] {
    background: #cce5ff;
    color: #007bff;
    transform: scale(1.05);
}

.step-completed[b-jpw1tya12f] {
    background: #d4edda;
    color: #28a745;
}

.route-overview[b-jpw1tya12f] {
    margin-bottom: 2rem;
}

.metric-card[b-jpw1tya12f] {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.2s ease;
}

.metric-card:hover[b-jpw1tya12f] {
    transform: translateY(-2px);
}

.metric-icon[b-jpw1tya12f] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #495057;
}

.metric-content[b-jpw1tya12f] {
    flex: 1;
}

.metric-value[b-jpw1tya12f] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.metric-label[b-jpw1tya12f] {
    color: #6c757d;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.metric-change[b-jpw1tya12f] {
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.metric-change.positive[b-jpw1tya12f] {
    color: #28a745;
}

.metric-change.negative[b-jpw1tya12f] {
    color: #dc3545;
}

.route-details[b-jpw1tya12f] {
    margin-bottom: 2rem;
}

.map-card[b-jpw1tya12f], .routes-card[b-jpw1tya12f] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    overflow: hidden;
}

.map-card .card-header[b-jpw1tya12f], .routes-card .card-header[b-jpw1tya12f] {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 1.25rem 1.5rem;
}

.map-card .card-body[b-jpw1tya12f], .routes-card .card-body[b-jpw1tya12f] {
    padding: 1.5rem;
}

.map-container[b-jpw1tya12f] {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

#routeMap[b-jpw1tya12f] {
    width: 100%;
    height: 400px;
    border-radius: 8px;
}

.map-overlay[b-jpw1tya12f] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.map-legend[b-jpw1tya12f] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.legend-item[b-jpw1tya12f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.legend-color[b-jpw1tya12f] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.routes-list[b-jpw1tya12f] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.route-item[b-jpw1tya12f] {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
    border-left: 4px solid #6c757d;
    transition: all 0.2s ease;
}

.route-item:hover[b-jpw1tya12f] {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.route-completed[b-jpw1tya12f] {
    border-left-color: #28a745;
    background: #f8fff8;
}

.route-active[b-jpw1tya12f] {
    border-left-color: #007bff;
    background: #f0f8ff;
}

.route-scheduled[b-jpw1tya12f] {
    border-left-color: #ffc107;
    background: #fffef8;
}

.route-delayed[b-jpw1tya12f] {
    border-left-color: #dc3545;
    background: #fff8f8;
}

.route-header[b-jpw1tya12f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.route-number[b-jpw1tya12f] {
    font-weight: 600;
    color: #2c3e50;
}

.route-status[b-jpw1tya12f] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
}

.route-details[b-jpw1tya12f] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.route-metric[b-jpw1tya12f] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: #6c757d;
}

.route-driver[b-jpw1tya12f] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.driver-avatar[b-jpw1tya12f] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}

.driver-avatar img[b-jpw1tya12f] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.driver-info[b-jpw1tya12f] {
    flex: 1;
}

.driver-name[b-jpw1tya12f] {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.driver-vehicle[b-jpw1tya12f] {
    font-size: 0.875rem;
    color: #6c757d;
}

.route-actions[b-jpw1tya12f] {
    display: flex;
    gap: 0.5rem;
}

.optimization-insights[b-jpw1tya12f] {
    margin-bottom: 2rem;
}

.insights-card[b-jpw1tya12f], .performance-card[b-jpw1tya12f] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    height: 100%;
}

.insights-card .card-header[b-jpw1tya12f], .performance-card .card-header[b-jpw1tya12f] {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 1.25rem 1.5rem;
}

.insights-card .card-body[b-jpw1tya12f], .performance-card .card-body[b-jpw1tya12f] {
    padding: 1.5rem;
}

.insights-list[b-jpw1tya12f] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.insight-item[b-jpw1tya12f] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.insight-icon[b-jpw1tya12f] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.insight-efficiency[b-jpw1tya12f] {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
}

.insight-cost[b-jpw1tya12f] {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

.insight-time[b-jpw1tya12f] {
    background: linear-gradient(135deg, #ffc107, #fd7e14);
    color: white;
}

.insight-content[b-jpw1tya12f] {
    flex: 1;
}

.insight-title[b-jpw1tya12f] {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.insight-description[b-jpw1tya12f] {
    color: #6c757d;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.insight-impact[b-jpw1tya12f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.impact-label[b-jpw1tya12f] {
    color: #6c757d;
}

.impact-value[b-jpw1tya12f] {
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.impact-high[b-jpw1tya12f] {
    background: #f8d7da;
    color: #721c24;
}

.impact-medium[b-jpw1tya12f] {
    background: #fff3cd;
    color: #856404;
}

.impact-low[b-jpw1tya12f] {
    background: #cce5ff;
    color: #004085;
}

.performance-chart[b-jpw1tya12f] {
    margin-bottom: 1.5rem;
}

#performanceChart[b-jpw1tya12f] {
    width: 100%;
    height: 200px;
}

.performance-metrics[b-jpw1tya12f] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.metric-row[b-jpw1tya12f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.metric-name[b-jpw1tya12f] {
    font-weight: 500;
    color: #2c3e50;
}

.metric-value[b-jpw1tya12f] {
    font-weight: 700;
    color: #007bff;
}

/* Responsive Design */
@media (max-width: 992px) {
    .header-content[b-jpw1tya12f] {
        flex-direction: column;
        gap: 1rem;
    }

    .route-details .row[b-jpw1tya12f] {
        flex-direction: column;
    }

    .route-details .col-lg-8[b-jpw1tya12f],
    .route-details .col-lg-4[b-jpw1tya12f] {
        width: 100%;
    }

    .map-overlay[b-jpw1tya12f] {
        position: static;
        margin-top: 1rem;
    }

    .map-legend[b-jpw1tya12f] {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .optimization-header[b-jpw1tya12f] {
        padding: 1.5rem;
    }

    .optimization-title[b-jpw1tya12f] {
        font-size: 1.5rem;
    }

    .progress-steps[b-jpw1tya12f] {
        flex-direction: column;
        gap: 1rem;
    }

    .step[b-jpw1tya12f] {
        min-width: auto;
        width: 100%;
    }

    .route-overview .row[b-jpw1tya12f] {
        gap: 1rem;
    }

    .metric-card[b-jpw1tya12f] {
        padding: 1rem;
    }

    .metric-value[b-jpw1tya12f] {
        font-size: 1.5rem;
    }

    .route-details[b-jpw1tya12f] {
        margin-bottom: 1rem;
    }

    .route-item[b-jpw1tya12f] {
        padding: 1rem;
    }

    .route-details[b-jpw1tya12f] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .route-driver[b-jpw1tya12f] {
        margin-bottom: 0.75rem;
    }

    .route-actions[b-jpw1tya12f] {
        flex-direction: column;
    }

    .optimization-insights .row[b-jpw1tya12f] {
        gap: 1rem;
    }

    .insights-card .card-body[b-jpw1tya12f],
    .performance-card .card-body[b-jpw1tya12f] {
        padding: 1rem;
    }

    .performance-metrics[b-jpw1tya12f] {
        gap: 0.5rem;
    }

    .metric-row[b-jpw1tya12f] {
        padding: 0.5rem;
    }
}
/* _content/AgriConnect.BlazorApp/Components/Logistics/SupplyChainVisibilityComponent.razor.rz.scp.css */
.supply-chain-visibility[b-uhl9mbhwdc] {
    padding: 0;
}

.visibility-header[b-uhl9mbhwdc] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
    border-radius: 16px;
    margin-bottom: 2rem;
}

.header-content[b-uhl9mbhwdc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.visibility-title[b-uhl9mbhwdc] {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: white;
}

.visibility-subtitle[b-uhl9mbhwdc] {
    opacity: 0.9;
    margin: 0;
    font-size: 1rem;
}

.visibility-controls[b-uhl9mbhwdc] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.supply-chain-overview[b-uhl9mbhwdc] {
    margin-bottom: 2rem;
}

.overview-metric[b-uhl9mbhwdc] {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.2s ease;
}

.overview-metric:hover[b-uhl9mbhwdc] {
    transform: translateY(-2px);
}

.metric-icon[b-uhl9mbhwdc] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #495057;
}

.metric-content[b-uhl9mbhwdc] {
    flex: 1;
}

.metric-value[b-uhl9mbhwdc] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.metric-label[b-uhl9mbhwdc] {
    color: #6c757d;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.metric-change[b-uhl9mbhwdc] {
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.metric-change.positive[b-uhl9mbhwdc] {
    color: #28a745;
}

.metric-change.negative[b-uhl9mbhwdc] {
    color: #dc3545;
}

.supply-chain-flow[b-uhl9mbhwdc] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    padding: 2rem;
    margin-bottom: 2rem;
}

.flow-header[b-uhl9mbhwdc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.flow-title[b-uhl9mbhwdc] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
}

.flow-controls[b-uhl9mbhwdc] {
    display: flex;
    gap: 0.5rem;
}

.flow-visualization[b-uhl9mbhwdc] {
    min-height: 300px;
}

.supply-chain-diagram[b-uhl9mbhwdc] {
    width: 100%;
}

.flow-overview[b-uhl9mbhwdc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 12px;
}

.flow-stage[b-uhl9mbhwdc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-width: 150px;
    position: relative;
}

.stage-icon[b-uhl9mbhwdc] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
}

.stage-info[b-uhl9mbhwdc] {
    text-align: center;
}

.stage-name[b-uhl9mbhwdc] {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.stage-count[b-uhl9mbhwdc] {
    font-size: 0.875rem;
    color: #6c757d;
}

.stage-status[b-uhl9mbhwdc] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    text-transform: uppercase;
}

.status-good[b-uhl9mbhwdc] {
    background: #d4edda;
    color: #155724;
}

.status-warning[b-uhl9mbhwdc] {
    background: #fff3cd;
    color: #856404;
}

.status-neutral[b-uhl9mbhwdc] {
    background: #e9ecef;
    color: #495057;
}

.flow-arrow[b-uhl9mbhwdc] {
    color: #6c757d;
    font-size: 1.25rem;
}

.flow-detailed[b-uhl9mbhwdc] {
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 12px;
}

#supplyChainFlow[b-uhl9mbhwdc] {
    width: 100%;
    height: 400px;
}

.flow-timeline[b-uhl9mbhwdc] {
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 12px;
}

.timeline-container[b-uhl9mbhwdc] {
    position: relative;
    padding-left: 2rem;
}

.timeline-container[b-uhl9mbhwdc]::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e9ecef;
}

.timeline-stage[b-uhl9mbhwdc] {
    position: relative;
    padding-bottom: 2rem;
    padding-left: 2rem;
}

.timeline-stage:last-child[b-uhl9mbhwdc] {
    padding-bottom: 0;
}

.timeline-marker[b-uhl9mbhwdc] {
    position: absolute;
    left: -22px;
    top: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.875rem;
}

.timeline-completed[b-uhl9mbhwdc] {
    background: #28a745;
}

.timeline-active[b-uhl9mbhwdc] {
    background: #007bff;
}

.timeline-pending[b-uhl9mbhwdc] {
    background: #6c757d;
}

.timeline-delayed[b-uhl9mbhwdc] {
    background: #dc3545;
}

.timeline-content[b-uhl9mbhwdc] {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.timeline-title[b-uhl9mbhwdc] {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.timeline-description[b-uhl9mbhwdc] {
    color: #6c757d;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.timeline-time[b-uhl9mbhwdc] {
    color: #adb5bd;
    font-size: 0.75rem;
}

.real-time-monitoring[b-uhl9mbhwdc] {
    margin-bottom: 2rem;
}

.monitoring-card[b-uhl9mbhwdc] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    height: 100%;
}

.monitoring-card .card-header[b-uhl9mbhwdc] {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 1.25rem 1.5rem;
}

.monitoring-card .card-body[b-uhl9mbhwdc] {
    padding: 1.5rem;
}

.shipments-list[b-uhl9mbhwdc] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.shipment-item[b-uhl9mbhwdc] {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
    border-left: 4px solid #6c757d;
}

.shipment-header[b-uhl9mbhwdc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.shipment-id[b-uhl9mbhwdc] {
    font-weight: 600;
    color: #2c3e50;
}

.shipment-status[b-uhl9mbhwdc] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    text-transform: uppercase;
}

.status-transit[b-uhl9mbhwdc] {
    background: #cce5ff;
    color: #004085;
    border-left-color: #007bff;
}

.status-delivered[b-uhl9mbhwdc] {
    background: #d4edda;
    color: #155724;
    border-left-color: #28a745;
}

.status-delayed[b-uhl9mbhwdc] {
    background: #fff3cd;
    color: #856404;
    border-left-color: #ffc107;
}

.status-pending[b-uhl9mbhwdc] {
    background: #e9ecef;
    color: #495057;
    border-left-color: #6c757d;
}

.shipment-route[b-uhl9mbhwdc] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: white;
    border-radius: 8px;
}

.route-from[b-uhl9mbhwdc], .route-to[b-uhl9mbhwdc] {
    font-weight: 500;
    color: #2c3e50;
}

.route-arrow[b-uhl9mbhwdc] {
    color: #6c757d;
}

.shipment-details[b-uhl9mbhwdc] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.detail-item[b-uhl9mbhwdc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6c757d;
}

.shipment-progress[b-uhl9mbhwdc] {
    margin-bottom: 1rem;
}

.shipment-progress .progress[b-uhl9mbhwdc] {
    height: 8px;
    margin-bottom: 0.5rem;
}

.progress-text[b-uhl9mbhwdc] {
    font-size: 0.75rem;
    color: #6c757d;
    text-align: center;
}

.shipment-actions[b-uhl9mbhwdc] {
    display: flex;
    gap: 0.5rem;
}

.alerts-list[b-uhl9mbhwdc] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.alert-item[b-uhl9mbhwdc] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid #6c757d;
}

.alert-critical[b-uhl9mbhwdc] {
    background: #f8d7da;
    border-left-color: #dc3545;
}

.alert-high[b-uhl9mbhwdc] {
    background: #f8d7da;
    border-left-color: #fd7e14;
}

.alert-medium[b-uhl9mbhwdc] {
    background: #fff3cd;
    border-left-color: #ffc107;
}

.alert-low[b-uhl9mbhwdc] {
    background: #cce5ff;
    border-left-color: #007bff;
}

.alert-indicator[b-uhl9mbhwdc] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.alert-content[b-uhl9mbhwdc] {
    flex: 1;
}

.alert-title[b-uhl9mbhwdc] {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.alert-message[b-uhl9mbhwdc] {
    color: #6c757d;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.alert-meta[b-uhl9mbhwdc] {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
}

.alert-time[b-uhl9mbhwdc] {
    color: #adb5bd;
}

.alert-location[b-uhl9mbhwdc] {
    color: #6c757d;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.alert-actions[b-uhl9mbhwdc] {
    flex-shrink: 0;
}

.performance-analytics[b-uhl9mbhwdc] {
    margin-bottom: 2rem;
}

.analytics-card[b-uhl9mbhwdc] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    height: 100%;
}

.analytics-card .card-header[b-uhl9mbhwdc] {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 1.25rem 1.5rem;
}

.analytics-card .card-body[b-uhl9mbhwdc] {
    padding: 1.5rem;
}

#performanceTrends[b-uhl9mbhwdc] {
    width: 100%;
    height: 300px;
}

.performance-legends[b-uhl9mbhwdc] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1rem;
}

.legend-item[b-uhl9mbhwdc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6c757d;
}

.legend-color[b-uhl9mbhwdc] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.kpi-grid[b-uhl9mbhwdc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.kpi-item[b-uhl9mbhwdc] {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
}

.kpi-value[b-uhl9mbhwdc] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.kpi-label[b-uhl9mbhwdc] {
    color: #6c757d;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.kpi-trend[b-uhl9mbhwdc] {
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.kpi-trend.positive[b-uhl9mbhwdc] {
    background: #d4edda;
    color: #155724;
}

.kpi-trend.negative[b-uhl9mbhwdc] {
    background: #f8d7da;
    color: #721c24;
}

/* Responsive Design */
@media (max-width: 992px) {
    .header-content[b-uhl9mbhwdc] {
        flex-direction: column;
        gap: 1rem;
    }

    .flow-header[b-uhl9mbhwdc] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .real-time-monitoring .row[b-uhl9mbhwdc] {
        flex-direction: column;
    }

    .real-time-monitoring .col-lg-6[b-uhl9mbhwdc] {
        width: 100%;
    }

    .performance-analytics .row[b-uhl9mbhwdc] {
        flex-direction: column;
    }

    .performance-analytics .col-lg-8[b-uhl9mbhwdc],
    .performance-analytics .col-lg-4[b-uhl9mbhwdc] {
        width: 100%;
    }

    .kpi-grid[b-uhl9mbhwdc] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .visibility-header[b-uhl9mbhwdc] {
        padding: 1.5rem;
    }

    .visibility-title[b-uhl9mbhwdc] {
        font-size: 1.5rem;
    }

    .overview-metric[b-uhl9mbhwdc] {
        padding: 1rem;
    }

    .metric-value[b-uhl9mbhwdc] {
        font-size: 1.5rem;
    }

    .flow-overview[b-uhl9mbhwdc] {
        flex-direction: column;
        gap: 1rem;
    }

    .flow-stage[b-uhl9mbhwdc] {
        min-width: auto;
        width: 100%;
    }

    .flow-arrow[b-uhl9mbhwdc] {
        transform: rotate(90deg);
    }

    .shipment-item[b-uhl9mbhwdc] {
        padding: 1rem;
    }

    .shipment-route[b-uhl9mbhwdc] {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .shipment-details[b-uhl9mbhwdc] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .shipment-actions[b-uhl9mbhwdc] {
        flex-direction: column;
    }

    .alert-item[b-uhl9mbhwdc] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .alert-actions[b-uhl9mbhwdc] {
        align-self: flex-end;
    }

    .alert-meta[b-uhl9mbhwdc] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .performance-legends[b-uhl9mbhwdc] {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    .kpi-item[b-uhl9mbhwdc] {
        padding: 1rem;
    }

    .kpi-value[b-uhl9mbhwdc] {
        font-size: 1.25rem;
    }
}
/* _content/AgriConnect.BlazorApp/Components/Messaging/ConversationItem.razor.rz.scp.css */
/* ConversationItem.razor.css - Clean, simple conversation list item */

.conversation-item[b-wv99zp56wk] {
    display: flex;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--bit-clr-brd-pri);
    transition: background-color 0.15s ease;
}

.conversation-item:hover[b-wv99zp56wk] {
 background: var(--bit-clr-bg-sec);
}

.conversation-item.selected[b-wv99zp56wk] {
    background: rgba(0, 120, 212, 0.08);
    border-left: 3px solid var(--bit-clr-pri-main);
    padding-left: calc(1rem - 3px);
}

.conversation-avatar[b-wv99zp56wk] {
    flex-shrink: 0;
}

.conversation-content[b-wv99zp56wk] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
gap: 0.25rem;
}

.conversation-header[b-wv99zp56wk] {
    display: flex;
    justify-content: space-between;
 align-items: baseline;
    gap: 0.5rem;
}

.conversation-name[b-wv99zp56wk] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--bit-clr-fg-pri);
  white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-time[b-wv99zp56wk] {
    font-size: 0.75rem;
    color: var(--bit-clr-fg-ter);
  flex-shrink: 0;
}

.conversation-preview[b-wv99zp56wk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.preview-text[b-wv99zp56wk] {
    flex: 1;
    font-size: 0.875rem;
    color: var(--bit-clr-fg-sec);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview-text.unread[b-wv99zp56wk] {
  font-weight: 600;
    color: var(--bit-clr-fg-pri);
}

.unread-badge[b-wv99zp56wk] {
    flex-shrink: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: white;
    background: var(--bit-clr-pri-main);
    border-radius: 10px;
    display: flex;
  align-items: center;
    justify-content: center;
}

.typing-indicator-small[b-wv99zp56wk] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--bit-clr-pri-main);
    font-style: italic;
}

.typing-indicator-small .dots[b-wv99zp56wk] {
    display: flex;
    gap: 2px;
}

.typing-indicator-small .dots span[b-wv99zp56wk] {
    width: 4px;
    height: 4px;
    background: var(--bit-clr-pri-main);
    border-radius: 50%;
    animation: bounce-b-wv99zp56wk 1.2s infinite;
}

.typing-indicator-small .dots span:nth-child(2)[b-wv99zp56wk] { animation-delay: 0.15s; }
.typing-indicator-small .dots span:nth-child(3)[b-wv99zp56wk] { animation-delay: 0.3s; }

@keyframes bounce-b-wv99zp56wk {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-3px); }
}

.listing-tag[b-wv99zp56wk] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    color: var(--bit-clr-pri-main);
    background: rgba(0, 120, 212, 0.08);
    border-radius: 3px;
    max-width: 100%;
}

.listing-tag i[b-wv99zp56wk] {
    font-size: 0.75rem;
}

.listing-tag span[b-wv99zp56wk] {
    white-space: nowrap;
    overflow: hidden;
 text-overflow: ellipsis;
}

/* Mobile */
@media (max-width: 768px) {
    .conversation-item[b-wv99zp56wk] {
        padding: 12px 16px;
        gap: 12px;
        /* Touch-friendly tap target */
        min-height: 72px;
        /* Better touch feedback */
        -webkit-tap-highlight-color: transparent;
    }

        .conversation-item:active[b-wv99zp56wk] {
            background: rgba(0, 0, 0, 0.05);
        }

        .conversation-item.selected[b-wv99zp56wk] {
            background: rgba(34, 197, 94, 0.1);
            border-left-color: #22c55e;
        }

    .conversation-name[b-wv99zp56wk] {
        font-size: 1rem;
        font-weight: 600;
    }

    .conversation-time[b-wv99zp56wk] {
        font-size: 0.75rem;
        color: #888;
    }

    .preview-text[b-wv99zp56wk] {
        font-size: 0.875rem;
        color: #666;
    }

        .preview-text.unread[b-wv99zp56wk] {
            color: #333;
            font-weight: 600;
        }

    .unread-badge[b-wv99zp56wk] {
        background: #22c55e;
        min-width: 22px;
        height: 22px;
        font-size: 0.75rem;
    }

    .listing-tag[b-wv99zp56wk] {
        margin-top: 4px;
        padding: 4px 8px;
        font-size: 0.75rem;
        background: rgba(34, 197, 94, 0.1);
        color: #16a34a;
    }

    /* Avatar sizing */
    .conversation-avatar[b-wv99zp56wk]  .bit-psn {
        width: 52px;
        height: 52px;
    }
}
/* _content/AgriConnect.BlazorApp/Components/Messaging/DateSeparator.razor.rz.scp.css */
/* DateSeparator.razor.css */

.date-separator[b-ozhvx3au81] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    padding: 0 1rem;
}

.separator-line[b-ozhvx3au81] {
    flex: 1;
    height: 1px;
    background: var(--bit-clr-brd-pri);
}

.separator-label[b-ozhvx3au81] {
    padding: 0.25rem 0.75rem;
    background: var(--bit-clr-bg-sec);
    border-radius: 12px;
    white-space: nowrap;
}

.separator-label[b-ozhvx3au81]  span {
    color: var(--bit-clr-fg-sec);
  font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .separator-label[b-ozhvx3au81] {
        background: rgba(255,255,255,0.05);
    }
}
/* _content/AgriConnect.BlazorApp/Components/Messaging/EmojiPicker.razor.rz.scp.css */
/* EmojiPicker.razor.css */

.emoji-picker[b-b4gowv4exx] {
    width: 350px;
    max-height: 400px;
    background: var(--bit-clr-bg-pri);
border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.emoji-picker-header[b-b4gowv4exx] {
 display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--bit-clr-brd-pri);
}

.emoji-categories[b-b4gowv4exx] {
    display: flex;
    gap: 0.25rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--bit-clr-brd-pri);
    overflow-x: auto;
}

.emoji-categories[b-b4gowv4exx]::-webkit-scrollbar {
    height: 4px;
}

.category-button[b-b4gowv4exx] {
    width: 40px;
    height: 40px;
    border: none;
 background: transparent;
    border-radius: 8px;
  font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.category-button:hover[b-b4gowv4exx] {
    background: var(--bit-clr-bg-sec);
}

.category-button.active[b-b4gowv4exx] {
    background: var(--bit-clr-pri-main);
}

.emoji-grid[b-b4gowv4exx] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
gap: 0.25rem;
    padding: 1rem;
    overflow-y: auto;
max-height: 300px;
}

.emoji-grid[b-b4gowv4exx]::-webkit-scrollbar {
    width: 6px;
}

.emoji-grid[b-b4gowv4exx]::-webkit-scrollbar-thumb {
    background: var(--bit-clr-brd-sec);
    border-radius: 3px;
}

.emoji-button[b-b4gowv4exx] {
width: 100%;
    aspect-ratio: 1;
    border: none;
 background: transparent;
    border-radius: 6px;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
  justify-content: center;
}

.emoji-button:hover[b-b4gowv4exx] {
    background: var(--bit-clr-bg-sec);
    transform: scale(1.2);
}

.emoji-button:active[b-b4gowv4exx] {
    transform: scale(0.95);
}

/* Mobile */
@media (max-width: 480px) {
 .emoji-picker[b-b4gowv4exx] {
      width: 100%;
    max-width: 350px;
    }

    .emoji-grid[b-b4gowv4exx] {
  grid-template-columns: repeat(6, 1fr);
    }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .emoji-picker[b-b4gowv4exx] {
   box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    }

.category-button:hover[b-b4gowv4exx] {
        background: rgba(255,255,255,0.1);
    }

    .category-button.active[b-b4gowv4exx] {
        background: var(--bit-clr-pri-dar);
 }

    .emoji-button:hover[b-b4gowv4exx] {
        background: rgba(255,255,255,0.1);
    }
}
/* _content/AgriConnect.BlazorApp/Components/Messaging/MessageBubble.razor.rz.scp.css */
/* MessageBubble.razor.css - Clean Message Bubble Styles */

.message-row[b-bwo4rosexj] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    max-width: 75%;
    position: relative;
    width:86%;
}

.message-row.incoming[b-bwo4rosexj] {
    align-self: flex-start;
}

.message-row.outgoing[b-bwo4rosexj] {
    align-self: flex-end;
    margin-left: auto;
}

.message-row[b-bwo4rosexj]  .message-avatar {
    flex-shrink: 0;
  align-self: flex-end;
}

.bubble[b-bwo4rosexj] {
    position: relative;
    padding: 0.625rem 0.875rem;
    border-radius: 16px;
    max-width: 100%;
    word-wrap: break-word;
}

.bubble.received[b-bwo4rosexj] {
  background: var(--bit-clr-bg-sec);
    color: var(--bit-clr-fg-pri);
    border-bottom-left-radius: 4px;
}

    .bubble.sent[b-bwo4rosexj] {
        background: var(--bit-clr-bg-sec);
        color: var(--bit-clr-fg-pri);
        border-bottom-right-radius: 4px;
    }

.bubble.deleted[b-bwo4rosexj] {
    background: transparent;
    border: 1px dashed var(--bit-clr-brd-sec);
}

.message-content[b-bwo4rosexj] {
    margin: 0 0 0.25rem;
    font-size: 0.9375rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

.deleted-text[b-bwo4rosexj] {
    margin: 0;
    font-size: 0.875rem;
    font-style: italic;
    opacity: 0.6;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.deleted-text i[b-bwo4rosexj] {
    font-size: 0.875rem;
}

.bubble-footer[b-bwo4rosexj] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
    font-size: 0.6875rem;
}

.timestamp[b-bwo4rosexj] {
    opacity: 0.7;
}

.bubble.sent .timestamp[b-bwo4rosexj],
.bubble.sent .edited-label[b-bwo4rosexj] {
    color: rgba(255, 255, 255, 0.75);
}

.edited-label[b-bwo4rosexj] {
    opacity: 0.6;
    font-style: italic;
}

.status-icon[b-bwo4rosexj] {
    display: flex;
    align-items: center;
}

.status-icon i[b-bwo4rosexj] {
    font-size: 0.875rem;
}

.bubble.sent .status-icon i[b-bwo4rosexj] {
    color: rgba(255, 255, 255, 0.85);
}

/* Action Buttons */
.actions-bar[b-bwo4rosexj] {
    position: absolute;
    top: -8px;
    right: 8px;
    display: flex;
    gap: 2px;
    background: var(--bit-clr-bg-pri);
    padding: 4px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.message-row.incoming .actions-bar[b-bwo4rosexj] {
    right: auto;
    left: 36px;
}

.message-row:hover .actions-bar[b-bwo4rosexj] {
    opacity: 1;
    visibility: visible;
}

.action-btn[b-bwo4rosexj] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bit-clr-fg-sec);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.action-btn:hover[b-bwo4rosexj] {
    background: var(--bit-clr-bg-sec);
    color: var(--bit-clr-fg-pri);
}

.action-btn.danger:hover[b-bwo4rosexj] {
 background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.action-btn i[b-bwo4rosexj] {
    font-size: 0.875rem;
}

/* Animation */
@keyframes fadeSlideIn-b-bwo4rosexj {
    from {
   opacity: 0;
      transform: translateY(8px);
    }
    to {
        opacity: 1;
    transform: translateY(0);
    }
}

.message-row[b-bwo4rosexj] {
    animation: fadeSlideIn-b-bwo4rosexj 0.2s ease-out;
}

/* Mobile */
@media (max-width: 768px) {
    .message-row[b-bwo4rosexj] {
        max-width: 85%;
        margin-bottom: 4px;
        width: auto;
    }

        .message-row.incoming[b-bwo4rosexj] {
            margin-right: auto;
            margin-left: 0;
        }

        .message-row.outgoing[b-bwo4rosexj] {
            margin-left: auto;
            margin-right: 0;
        }

    /* WhatsApp-style bubbles */
    .bubble[b-bwo4rosexj] {
        padding: 8px 12px;
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        max-width: 100%;
    }

        /* Received message - white with slight shadow */
        .bubble.received[b-bwo4rosexj] {
            background: #ffffff;
            color: #333333;
            border-bottom-left-radius: 0;
        }

        /* Sent message - green like WhatsApp */
        .bubble.sent[b-bwo4rosexj] {
            background: #dcf8c6;
            color: #333333;
            border-bottom-right-radius: 0;
        }

    .message-content[b-bwo4rosexj] {
        font-size: 0.9375rem;
        line-height: 1.35;
        margin-bottom: 4px;
    }

    .bubble-footer[b-bwo4rosexj] {
        gap: 4px;
        font-size: 0.6875rem;
    }

    .timestamp[b-bwo4rosexj] {
        color: #999999;
    }

    .bubble.sent .timestamp[b-bwo4rosexj] {
        color: #7cb342;
    }

    .bubble.sent .status-icon i[b-bwo4rosexj] {
        color: #7cb342;
    }

    /* Action buttons - show on long press (handled by JS) */
    .actions-bar[b-bwo4rosexj] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        flex-direction: row;
        justify-content: space-around;
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        opacity: 0;
        visibility: hidden;
        z-index: 1000;
        background: #ffffff;
    }

    .message-row.selected .actions-bar[b-bwo4rosexj] {
        opacity: 1;
        visibility: visible;
    }

    .action-btn[b-bwo4rosexj] {
        width: 44px;
        height: 44px;
        border-radius: 50%;
    }

        .action-btn i[b-bwo4rosexj] {
            font-size: 1rem;
        }

    /* Hide avatar on mobile for cleaner look */
    .message-row[b-bwo4rosexj]  .message-avatar {
        display: none;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .message-row[b-bwo4rosexj] {
        animation: none;
    }
  
    .actions-bar[b-bwo4rosexj],
    .action-btn[b-bwo4rosexj] {
        transition: none;
    }
}
/* _content/AgriConnect.BlazorApp/Components/Messaging/NewConversationModal.razor.rz.scp.css */
/* NewConversationModal.razor.css */

.new-conversation-modal[b-4rlo0h36g1] {
    display: flex;
    flex-direction: column;
    min-height: 400px;
    max-height: 600px;
}

.search-section[b-4rlo0h36g1] {
    padding: 1rem;
    border-bottom: 1px solid var(--bit-clr-brd-pri);
}

.results-section[b-4rlo0h36g1] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.results-section[b-4rlo0h36g1]::-webkit-scrollbar {
    width: 6px;
}

.results-section[b-4rlo0h36g1]::-webkit-scrollbar-thumb {
    background: var(--bit-clr-brd-sec);
    border-radius: 3px;
}

.section-header[b-4rlo0h36g1] {
    padding: 0.5rem 0;
    margin-bottom: 0.75rem;
}

.user-list[b-4rlo0h36g1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* User Search Item */
[b-4rlo0h36g1] .user-search-item {
 display: flex;
    align-items: center;
    gap: 1rem;
  padding: 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

[b-4rlo0h36g1] .user-search-item:hover {
    background: var(--bit-clr-bg-sec);
}

[b-4rlo0h36g1] .user-search-item:active {
    transform: scale(0.98);
}

[b-4rlo0h36g1] .user-info {
    flex: 1;
    min-width: 0;
}

/* Loading State */
.loading-state[b-4rlo0h36g1] {
    display: flex;
    flex-direction: column;
align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}

/* Empty State */
.empty-state[b-4rlo0h36g1] {
  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    [b-4rlo0h36g1] .user-search-item:hover {
  background: rgba(255,255,255,0.05);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .new-conversation-modal[b-4rlo0h36g1] {
     min-height: 300px;
 max-height: 70vh;
    }

    .search-section[b-4rlo0h36g1] {
  padding: 0.75rem;
    }

    .results-section[b-4rlo0h36g1] {
  padding: 0.75rem;
    }

    [b-4rlo0h36g1] .user-search-item {
    padding: 0.625rem;
    }
}
/* _content/AgriConnect.BlazorApp/Components/Messaging/ThreadInfoPanel.razor.rz.scp.css */
/* ThreadInfoPanel.razor.css */

.thread-info-panel-container[b-aszbup7onk] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bit-clr-bg-pri);
    overflow-y: auto;
}

.info-header[b-aszbup7onk] {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--bit-clr-brd-pri);
    background: var(--bit-clr-bg-sec);
}

.info-content[b-aszbup7onk] {
    flex: 1;
    padding: 1.5rem 1rem;
    overflow-y: auto;
}

.info-section[b-aszbup7onk] {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--bit-clr-brd-pri);
}

.info-section:last-child[b-aszbup7onk] {
    border-bottom: none;
}

/* User Profile Card */
.user-profile-card[b-aszbup7onk] {
    display: flex;
    flex-direction: column;
 align-items: center;
    padding: 1.5rem 1rem;
    background: var(--bit-clr-bg-sec);
    border-radius: 12px;
}

.user-bio[b-aszbup7onk] {
    text-align: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bit-clr-brd-pri);
}

.user-location[b-aszbup7onk] {
 display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.75rem;
    opacity: 0.8;
}

.user-rating[b-aszbup7onk] {
    display: flex;
    align-items: center;
    justify-content: center;
 margin-top: 0.75rem;
}

/* Shared Media */
.empty-media[b-aszbup7onk] {
    display: flex;
    flex-direction: column;
  align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.media-grid[b-aszbup7onk] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.media-item[b-aszbup7onk] {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
  cursor: pointer;
    transition: transform 0.2s ease;
}

.media-item:hover[b-aszbup7onk] {
    transform: scale(1.05);
}

.media-item img[b-aszbup7onk] {
    width: 100%;
    height: 100%;
 object-fit: cover;
}

.video-thumbnail[b-aszbup7onk],
.document-thumbnail[b-aszbup7onk] {
  width: 100%;
height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bit-clr-bg-sec);
    color: var(--bit-clr-fg-sec);
}

/* Settings */
.setting-item[b-aszbup7onk] {
padding: 0.75rem 0;
}

.setting-item:not(:last-child)[b-aszbup7onk] {
 border-bottom: 1px solid var(--bit-clr-brd-pri);
}

/* Scrollbar */
.thread-info-panel-container[b-aszbup7onk]::-webkit-scrollbar,
.info-content[b-aszbup7onk]::-webkit-scrollbar {
    width: 6px;
}

.thread-info-panel-container[b-aszbup7onk]::-webkit-scrollbar-thumb,
.info-content[b-aszbup7onk]::-webkit-scrollbar-thumb {
    background: var(--bit-clr-brd-sec);
    border-radius: 3px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .info-header[b-aszbup7onk] {
        padding: 1rem 0.75rem;
    }

    .info-content[b-aszbup7onk] {
        padding: 1rem 0.75rem;
    }

    .media-grid[b-aszbup7onk] {
        grid-template-columns: repeat(3, 1fr);
 gap: 0.375rem;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .user-profile-card[b-aszbup7onk] {
        background: rgba(255,255,255,0.05);
    }

    .video-thumbnail[b-aszbup7onk],
    .document-thumbnail[b-aszbup7onk] {
        background: rgba(255,255,255,0.05);
    }
}
/* _content/AgriConnect.BlazorApp/Components/Mobile/MobileFilterDrawer.razor.rz.scp.css */
/* Mobile Filter Drawer Styles */

.mobile-filter-wrapper[b-jx0kk1avhl] {
    width: 100%;
}

/* Filter Trigger Button */
.filter-trigger-section[b-jx0kk1avhl] {
    margin-bottom: 16px;
}

.filter-trigger-button[b-jx0kk1avhl] {
    height: 52px;
    border: 2px solid var(--bit-color-border-primary);
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s;
}

.filter-trigger-button:hover[b-jx0kk1avhl] {
    border-color: var(--bit-color-primary);
    background: var(--bit-color-primary-background);
}

.filter-count-badge[b-jx0kk1avhl] {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
}

/* Filter Drawer */
[b-jx0kk1avhl] .filter-drawer {
    width: 90vw;
    max-width: 400px;
}

[b-jx0kk1avhl] .filter-drawer .bit-drawer-header {
    padding: 20px;
    border-bottom: 1px solid var(--bit-color-border-primary);
}

[b-jx0kk1avhl] .filter-drawer .bit-drawer-body {
    padding: 20px;
    overflow-y: auto;
}

[b-jx0kk1avhl] .filter-drawer .bit-drawer-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--bit-color-border-primary);
    background: var(--bit-color-background-primary);
}

/* Filter Content Spacing */
.filter-drawer-content[b-jx0kk1avhl] {
    padding-bottom: 20px;
}

/* Filter Sections */
.filter-drawer-content > *[b-jx0kk1avhl] {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--bit-color-border-secondary);
}

.filter-drawer-content > *:last-child[b-jx0kk1avhl] {
    border-bottom: none;
}

/* Tablet Adjustments */
@media (min-width: 600px) {
    .filter-trigger-section[b-jx0kk1avhl] {
        margin-bottom: 20px;
    }
    
    [b-jx0kk1avhl] .filter-drawer {
        max-width: 480px;
    }
}

/* Desktop - Hide mobile elements */
@media (min-width: 960px) {
    .filter-trigger-section[b-jx0kk1avhl] {
        display: none;
    }
}

/* Touch interactions */
@media (hover: none) and (pointer: coarse) {
    .filter-trigger-button[b-jx0kk1avhl] {
        min-height: 56px;
    }
}
/* _content/AgriConnect.BlazorApp/Components/Mobile/MobileFilterPanelSimplified.razor.rz.scp.css */
/* SIMPLIFIED Mobile Filter Panel Styles */

.mobile-filter-panel-wrapper[b-lmwrzdc39a] {
    width: 100%;
}

/* Filter Trigger Button */
.filter-trigger-btn[b-lmwrzdc39a] {
    height: 52px;
    border: 2px solid var(--bit-color-border-primary);
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s;
    margin-bottom: 16px;
}

.filter-trigger-btn:hover[b-lmwrzdc39a] {
    border-color: var(--bit-color-primary);
    background: var(--bit-color-primary-background);
}

/* Overlay */
.filter-overlay[b-lmwrzdc39a] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 999;
    animation: fadeIn-b-lmwrzdc39a 0.3s;
}

@keyframes fadeIn-b-lmwrzdc39a {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Slide-in Panel */
.filter-panel[b-lmwrzdc39a] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 90vw;
    max-width: 400px;
    background: var(--bit-color-background-primary);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-panel.open[b-lmwrzdc39a] {
    transform: translateX(0);
}

/* Filter Header */
.filter-header[b-lmwrzdc39a] {
    padding: 20px;
    border-bottom: 1px solid var(--bit-color-border-primary);
    background: var(--bit-color-background-secondary);
    flex-shrink: 0;
}

/* Filter Content */
.filter-content[b-lmwrzdc39a] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
}

.filter-content[b-lmwrzdc39a]::-webkit-scrollbar {
    width: 6px;
}

.filter-content[b-lmwrzdc39a]::-webkit-scrollbar-thumb {
    background: var(--bit-color-border-primary);
    border-radius: 3px;
}

/* Filter Footer */
.filter-footer[b-lmwrzdc39a] {
    padding: 16px 20px;
    border-top: 1px solid var(--bit-color-border-primary);
    background: var(--bit-color-background-primary);
    flex-shrink: 0;
}

/* Desktop Filters Card */
.desktop-filters-card[b-lmwrzdc39a] {
    padding: 20px;
    position: sticky;
    top: 20px;
}

/* Tablet Adjustments */
@media (min-width: 600px) {
    .filter-trigger-btn[b-lmwrzdc39a] {
        margin-bottom: 20px;
    }
    
    .filter-panel[b-lmwrzdc39a] {
        max-width: 480px;
    }
}

/* Desktop - Hide mobile elements */
@media (min-width: 960px) {
    .filter-trigger-btn[b-lmwrzdc39a],
    .filter-overlay[b-lmwrzdc39a],
    .filter-panel[b-lmwrzdc39a] {
        display: none !important;
    }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
    .filter-trigger-btn[b-lmwrzdc39a] {
        min-height: 56px;
    }
}

/* Better touch targets for filter controls */
[b-lmwrzdc39a] .filter-content input,
[b-lmwrzdc39a] .filter-content select,
[b-lmwrzdc39a] .filter-content button {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS zoom */
}
/* _content/AgriConnect.BlazorApp/Components/Mobile/MobileListingAccordion.razor.rz.scp.css */
/* Mobile Listing Accordion Styles */

.mobile-listing-accordion[b-h2xog4dd9z] {
    width: 100%;
}

/* Ensure accordion items are touch-friendly */
[b-h2xog4dd9z] .bit-accordion-item {
    margin-bottom: 8px;
    border: 1px solid var(--bit-color-border-primary);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bit-color-background-primary);
}

[b-h2xog4dd9z] .bit-accordion-header {
    padding: 16px;
    min-height: 56px; /* Touch-friendly */
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

[b-h2xog4dd9z] .bit-accordion-header:hover {
    background: var(--bit-color-background-secondary);
}

[b-h2xog4dd9z] .bit-accordion-header:active {
    background: var(--bit-color-background-tertiary);
}

[b-h2xog4dd9z] .bit-accordion-content {
    padding: 16px;
    background: var(--bit-color-background-primary);
}

/* Detail Rows */
.detail-row[b-h2xog4dd9z] {
    padding: 12px 0;
    border-bottom: 1px solid var(--bit-color-border-secondary);
}

.detail-row:last-child[b-h2xog4dd9z] {
    border-bottom: none;
}

/* Certification Badges */
.cert-badge[b-h2xog4dd9z] {
    display: inline-flex;
    margin: 4px;
    padding: 6px 12px;
    background: var(--bit-color-primary-background);
    color: var(--bit-color-primary);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

/* Tablet adjustments */
@media (min-width: 600px) {
    [b-h2xog4dd9z] .bit-accordion-header {
        padding: 20px;
    }
    
    [b-h2xog4dd9z] .bit-accordion-content {
        padding: 20px;
    }
}
/* _content/AgriConnect.BlazorApp/Components/Mobile/MobileListingLayout.razor.rz.scp.css */
/* Mobile Listing Details Layout */

.responsive-listing-details[b-gfo0utzwzn] {
    width: 100%;
}

/* Mobile Layout */
.mobile-listing-layout[b-gfo0utzwzn] {
    background: var(--bit-color-background-primary);
}

/* Image Gallery Section - Full Width */
.mobile-gallery-section[b-gfo0utzwzn] {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Content Section with Padding */
.mobile-content-section[b-gfo0utzwzn] {
    padding: 16px;
}

/* Mobile Header */
.mobile-header[b-gfo0utzwzn] {
    padding-bottom: 16px;
}

/* Mobile Actions - Sticky on Scroll */
.mobile-actions-sticky[b-gfo0utzwzn] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bit-color-background-primary);
    padding: 16px 0;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Seller Card - Mobile Compact */
.mobile-seller-card[b-gfo0utzwzn] {
    padding: 16px;
    border: 1px solid var(--bit-color-border-primary);
    border-radius: 8px;
    background: var(--bit-color-background-secondary);
}

/* Quick Info Grid */
.mobile-info-grid[b-gfo0utzwzn] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.info-card[b-gfo0utzwzn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--bit-color-border-primary);
    border-radius: 8px;
    background: var(--bit-color-background-secondary);
    text-align: center;
}

.info-card i[b-gfo0utzwzn] {
    font-size: 24px;
    margin-bottom: 4px;
}

/* Reviews Section */
.mobile-reviews-section[b-gfo0utzwzn] {
    padding: 16px;
    background: var(--bit-color-background-secondary);
    border-top: 8px solid var(--bit-color-background-tertiary);
}

/* Tablet Adjustments (600px+) */
@media (min-width: 600px) {
    .mobile-content-section[b-gfo0utzwzn] {
        padding: 24px;
    }
    
    .mobile-actions-sticky[b-gfo0utzwzn] {
        padding: 20px 24px;
        margin: 0 -24px;
    }
    
    .mobile-info-grid[b-gfo0utzwzn] {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    
    .info-card[b-gfo0utzwzn] {
        padding: 20px;
    }
    
    .mobile-reviews-section[b-gfo0utzwzn] {
        padding: 24px;
    }
}

/* Desktop - Hide mobile layout */
@media (min-width: 960px) {
    .mobile-listing-layout[b-gfo0utzwzn] {
        display: none;
    }
}

/* Touch interactions */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets on actual touch devices */
    button[b-gfo0utzwzn] {
        min-height: 48px;
    }
    
    /* Better tap feedback */
    .info-card:active[b-gfo0utzwzn] {
        transform: scale(0.98);
        transition: transform 0.1s;
    }
}

/* Ensure buttons are always touch-friendly */
[b-gfo0utzwzn] bit-button button {
    min-height: 44px !important;
    font-size: 16px; /* Prevents iOS zoom */
}

/* Smooth scrolling for sticky elements */
.mobile-actions-sticky[b-gfo0utzwzn] {
    transition: box-shadow 0.2s ease;
}

/* Enhanced shadow when scrolled */
.mobile-actions-sticky.scrolled[b-gfo0utzwzn] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* _content/AgriConnect.BlazorApp/Components/Mobile/MobileSearchHeader.razor.rz.scp.css */
/* Mobile Search Header Styles */

.mobile-search-header[b-s9o7ycg0bu] {
    background: var(--bit-color-background-primary);
    padding: 16px;
    border-bottom: 1px solid var(--bit-color-border-primary);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.search-container[b-s9o7ycg0bu] {
    width: 100%;
}

/* Search Box */
.mobile-search-box[b-s9o7ycg0bu] {
    width: 100%;
}

[b-s9o7ycg0bu] .mobile-search-box input {
    height: 52px;
    font-size: 16px; /* Prevents iOS zoom */
    border-radius: 8px;
}

/* Quick Filters - Horizontal Scroll */
.quick-filters-scroll[b-s9o7ycg0bu] {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.quick-filters-scroll[b-s9o7ycg0bu]::-webkit-scrollbar {
    display: none;
}

.quick-filters[b-s9o7ycg0bu] {
    display: inline-flex;
    min-width: 100%;
}

.quick-filter-chip[b-s9o7ycg0bu] {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 20px;
    white-space: nowrap;
    border: 1px solid var(--bit-color-border-primary);
    background: var(--bit-color-background-secondary);
    transition: all 0.2s;
    min-height: 36px;
    font-size: 14px;
}

.quick-filter-chip[data-checked="true"][b-s9o7ycg0bu] {
    background: var(--bit-color-primary);
    color: white;
    border-color: var(--bit-color-primary);
}

/* Search Actions */
.search-actions[b-s9o7ycg0bu] {
    flex-wrap: wrap;
}

/* View Toggle Buttons */
[b-s9o7ycg0bu] .bit-button-group {
    display: flex;
    border: 1px solid var(--bit-color-border-primary);
    border-radius: 4px;
    overflow: hidden;
}

[b-s9o7ycg0bu] .bit-button-group button {
    min-width: 44px;
    height: 36px;
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--bit-color-border-primary);
}

[b-s9o7ycg0bu] .bit-button-group button:last-child {
    border-right: none;
}

[b-s9o7ycg0bu] .bit-button-group button[data-checked="true"] {
    background: var(--bit-color-primary);
    color: white;
}

/* Tablet Adjustments */
@media (min-width: 600px) {
    .mobile-search-header[b-s9o7ycg0bu] {
        padding: 20px 24px;
    }
    
    .quick-filter-chip[b-s9o7ycg0bu] {
        padding: 10px 20px;
        font-size: 15px;
        min-height: 40px;
    }
}

/* Desktop */
@media (min-width: 960px) {
    .mobile-search-header[b-s9o7ycg0bu] {
        position: static;
        padding: 24px 0;
        border-bottom: none;
        box-shadow: none;
    }
    
    .quick-filters-scroll[b-s9o7ycg0bu] {
        overflow-x: visible;
    }
    
    .quick-filters[b-s9o7ycg0bu] {
        display: flex;
        flex-wrap: wrap;
    }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
    .quick-filter-chip[b-s9o7ycg0bu] {
        min-height: 44px;
        padding: 10px 18px;
    }
}
/* _content/AgriConnect.BlazorApp/Components/Mobile/ResponsiveImageGallery.razor.rz.scp.css */
/* Mobile Gallery Styles */
.responsive-gallery[b-em552kqyzq] {
    position: relative;
    width: 100%;
}

/* Mobile Carousel */
.mobile-carousel[b-em552kqyzq] {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    background: #f9fafb;
    border-radius: 0;
}

.carousel-track[b-em552kqyzq] {
    display: flex;
    height: 100%;
    transition: transform 0.3s ease-out;
}

.carousel-slide[b-em552kqyzq] {
    min-width: 100%;
    height: 100%;
}

.carousel-image[b-em552kqyzq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

/* Carousel Dots */
.carousel-dots[b-em552kqyzq] {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.carousel-dots .dot[b-em552kqyzq] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    padding: 0;
}

.carousel-dots .dot.active[b-em552kqyzq] {
    background: white;
    width: 24px;
    border-radius: 4px;
}

/* Image Counter Mobile */
.image-counter-mobile[b-em552kqyzq] {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    z-index: 10;
}

/* Carousel Arrows */
.carousel-arrow[b-em552kqyzq] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s;
}

.carousel-arrow:hover[b-em552kqyzq] {
    background: rgba(0, 0, 0, 0.7);
}

.carousel-arrow.left[b-em552kqyzq] {
    left: 16px;
}

.carousel-arrow.right[b-em552kqyzq] {
    right: 16px;
}

/* No Images State - Mobile */
.no-images-mobile[b-em552kqyzq] {
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #f9fafb;
}

/* Tablet Adjustments (>= 600px) */
@media (min-width: 600px) {
    .mobile-carousel[b-em552kqyzq] {
        height: 400px;
        border-radius: 8px;
    }
    
    .no-images-mobile[b-em552kqyzq] {
        height: 400px;
        border-radius: 8px;
    }
}

/* Desktop Gallery (>= 960px) */
@media (min-width: 960px) {
    .takealot-gallery[b-em552kqyzq] {
        display: flex;
        gap: 16px;
        height: 500px;
    }
    
    /* Thumbnail Sidebar */
    .thumbnail-sidebar[b-em552kqyzq] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 80px;
        overflow-y: auto;
        scrollbar-width: thin;
    }
    
    .thumbnail-sidebar[b-em552kqyzq]::-webkit-scrollbar {
        width: 4px;
    }
    
    .thumbnail-sidebar[b-em552kqyzq]::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 2px;
    }
    
    .thumbnail-wrapper[b-em552kqyzq] {
        position: relative;
        width: 80px;
        height: 80px;
        border: 2px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.2s;
        flex-shrink: 0;
    }
    
    .thumbnail-wrapper:hover[b-em552kqyzq] {
        border-color: #9ca3af;
    }
    
    .thumbnail-wrapper.active[b-em552kqyzq] {
        border-color: var(--bit-color-primary, #16a34a);
    }
    
    .thumbnail-image[b-em552kqyzq] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .thumbnail-indicator[b-em552kqyzq] {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--bit-color-primary, #16a34a);
    }
    
    /* Main Preview */
    .main-preview[b-em552kqyzq] {
        flex: 1;
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        background: #f9fafb;
    }
    
    .preview-image[b-em552kqyzq] {
        width: 100%;
        height: 100%;
        object-fit: contain;
        cursor: pointer;
        transition: transform 0.3s;
    }
    
    .preview-image:hover[b-em552kqyzq] {
        transform: scale(1.05);
    }
    
    .image-counter-desktop[b-em552kqyzq] {
        position: absolute;
        bottom: 16px;
        right: 16px;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 8px 16px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
    }
    
    /* No Images State - Desktop */
    .no-images-desktop[b-em552kqyzq] {
        height: 500px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        background: #f9fafb;
        border-radius: 8px;
    }
}

/* Touch interaction improvements */
@media (hover: none) and (pointer: coarse) {
    /* Hide arrows on touch devices, use swipe instead */
    .carousel-arrow[b-em552kqyzq] {
        opacity: 0.5;
    }
    
    /* Larger touch targets */
    .carousel-dots .dot[b-em552kqyzq] {
        width: 12px;
        height: 12px;
    }
}
/* _content/AgriConnect.BlazorApp/Components/Mobile/ResponsiveListingCard.razor.rz.scp.css */
/* Responsive Listing Card Styles */

.responsive-listing-card[b-r3rjaykq5x] {
    background: var(--bit-color-background-primary);
    border: 1px solid var(--bit-color-border-primary);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.responsive-listing-card:hover[b-r3rjaykq5x] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    border-color: var(--bit-color-primary);
}

.responsive-listing-card:active[b-r3rjaykq5x] {
    transform: translateY(0);
}

/* Image Container */
.card-image-container[b-r3rjaykq5x] {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 4:3 aspect ratio */
    overflow: hidden;
    background: #f9fafb;
}

.card-image[b-r3rjaykq5x] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.responsive-listing-card:hover .card-image[b-r3rjaykq5x] {
    transform: scale(1.05);
}

.card-image-placeholder[b-r3rjaykq5x] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
}

/* Badges Overlay */
.card-badges[b-r3rjaykq5x] {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 10;
}

.badge-featured[b-r3rjaykq5x],
.badge-organic[b-r3rjaykq5x] {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Quick Actions Overlay */
.card-quick-actions[b-r3rjaykq5x] {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
}

.favorite-button[b-r3rjaykq5x] {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s;
}

.favorite-button:hover[b-r3rjaykq5x] {
    background: white;
    transform: scale(1.1);
}

/* Card Content */
.card-content[b-r3rjaykq5x] {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.card-category[b-r3rjaykq5x] {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.card-title[b-r3rjaykq5x] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em; /* Reserve space for 2 lines */
}

.card-location[b-r3rjaykq5x] {
    margin-top: 4px;
}

.card-price-section[b-r3rjaykq5x] {
    margin-top: auto;
    padding-top: 8px;
}

.card-meta[b-r3rjaykq5x] {
    padding-top: 8px;
    border-top: 1px solid var(--bit-color-border-secondary);
    font-size: 12px;
}

/* Tablet - Larger cards */
@media (min-width: 600px) {
    .card-content[b-r3rjaykq5x] {
        padding: 16px;
        gap: 10px;
    }
    
    .card-badges[b-r3rjaykq5x] {
        top: 12px;
        left: 12px;
    }
    
    .card-quick-actions[b-r3rjaykq5x] {
        top: 12px;
        right: 12px;
    }
    
    .badge-featured[b-r3rjaykq5x],
    .badge-organic[b-r3rjaykq5x] {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* Desktop - Even larger */
@media (min-width: 960px) {
    .card-image-container[b-r3rjaykq5x] {
        padding-bottom: 66.67%; /* 3:2 aspect ratio on desktop */
    }
}

/* Touch devices - no hover effects */
@media (hover: none) and (pointer: coarse) {
    .responsive-listing-card:hover[b-r3rjaykq5x] {
        transform: none;
    }
    
    .responsive-listing-card:hover .card-image[b-r3rjaykq5x] {
        transform: none;
    }
    
    /* Larger touch target for favorite */
    .favorite-button[b-r3rjaykq5x] {
        width: 48px;
        height: 48px;
    }
}

/* Utility */
.truncate[b-r3rjaykq5x] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}
/* _content/AgriConnect.BlazorApp/Components/Molecules/Accordion.razor.rz.scp.css */
/**
 * Accordion Component Styles
 */

.accordion[b-c682l9mf95] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.accordion-item[b-c682l9mf95] {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
}

.accordion-item-open[b-c682l9mf95] {
    box-shadow: var(--shadow-md);
}

.accordion-header[b-c682l9mf95] {
    display: flex;
    align-items: center;
    justify-content: space-between;
 width: 100%;
    padding: var(--space-4);
    background: var(--bg-primary);
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: left;
}

.accordion-header:hover[b-c682l9mf95] {
    background: var(--gray-50);
}

.accordion-item-open .accordion-header[b-c682l9mf95] {
    background: var(--primary-50);
    color: var(--primary-700);
}

.accordion-icon[b-c682l9mf95] {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    transition: transform var(--transition-base);
}

.accordion-content[b-c682l9mf95] {
    border-top: 1px solid var(--border-primary);
    overflow: hidden;
}

.accordion-body[b-c682l9mf95] {
    padding: var(--space-4);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

/* Animations */
.accordion-slide-down[b-c682l9mf95] {
    animation: accordion-slide-down-b-c682l9mf95 0.3s ease-out;
}

@keyframes accordion-slide-down-b-c682l9mf95 {
0% {
      max-height: 0;
   opacity: 0;
    }
    100% {
        max-height: 500px;
        opacity: 1;
    }
}

/* Utility for rotation */
.rotate-180[b-c682l9mf95] {
    transform: rotate(180deg);
}

/* Dark Mode */
[data-theme="dark"] .accordion-item[b-c682l9mf95] {
    border-color: var(--gray-700);
}

[data-theme="dark"] .accordion-header[b-c682l9mf95] {
    background: var(--gray-800);
}

[data-theme="dark"] .accordion-header:hover[b-c682l9mf95] {
    background: var(--gray-700);
}

[data-theme="dark"] .accordion-item-open .accordion-header[b-c682l9mf95] {
    background: var(--primary-900);
}
/* _content/AgriConnect.BlazorApp/Components/Molecules/Alert.razor.rz.scp.css */
/* Base Alert */
.ac-alert[b-tk33o58xxp] {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  border-radius: var(--radius-md);
  border-left: 4px solid;
  position: relative;
}

/* Variants */
.ac-alert--success[b-tk33o58xxp] {
  background: rgba(76, 175, 80, 0.1);
  border-color: var(--success);
  color: var(--success-dark);
}

.ac-alert--info[b-tk33o58xxp] {
  background: rgba(33, 150, 243, 0.1);
  border-color: var(--info);
  color: var(--info-dark);
}

.ac-alert--warning[b-tk33o58xxp] {
  background: rgba(255, 152, 0, 0.1);
  border-color: var(--warning);
  color: var(--warning-dark);
}

.ac-alert--error[b-tk33o58xxp] {
  background: rgba(244, 67, 54, 0.1);
  border-color: var(--error);
  color: var(--error-dark);
}

/* Icon */
.ac-alert__icon[b-tk33o58xxp] {
  font-size: var(--text-xl);
flex-shrink: 0;
  margin-top: 2px;
}

/* Content */
.ac-alert__content[b-tk33o58xxp] {
  flex: 1;
}

.ac-alert__title[b-tk33o58xxp] {
  margin: 0 0 var(--spacing-1) 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

.ac-alert__message[b-tk33o58xxp] {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* Close Button */
.ac-alert__close[b-tk33o58xxp] {
  background: none;
  border: none;
  color: currentColor;
  cursor: pointer;
  padding: var(--spacing-1);
  border-radius: var(--radius-sm);
  opacity: 0.7;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.ac-alert__close:hover[b-tk33o58xxp] {
  opacity: 1;
  background: rgba(0, 0, 0, 0.05);
}

/**
 * Alert Component - Modern Design System Extension
 * Base styles come from modern-components.css
 */

/* Alert Slide In Animation */
.alert-slide-in[b-tk33o58xxp] {
    animation: alert-slide-in-b-tk33o58xxp 0.3s ease-out;
}

@keyframes alert-slide-in-b-tk33o58xxp {
    0% {
        opacity: 0;
      transform: translateY(-1rem);
 }
    100% {
        opacity: 1;
    transform: translateY(0);
    }
}

/* Alert Dismissible Animation */
.alert-dismissible[b-tk33o58xxp] {
    animation: alert-slide-in-b-tk33o58xxp 0.3s ease-out;
}

.alert-dismissible.alert-dismissing[b-tk33o58xxp] {
    animation: alert-slide-out-b-tk33o58xxp 0.3s ease-out forwards;
}

@keyframes alert-slide-out-b-tk33o58xxp {
    0% {
    opacity: 1;
   transform: translateY(0);
    }
    100% {
 opacity: 0;
        transform: translateY(-1rem);
 }
}

/* Alert Icon Animation */
.alert-icon i[b-tk33o58xxp] {
    animation: alert-icon-pop-b-tk33o58xxp 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes alert-icon-pop-b-tk33o58xxp {
 0% {
      transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* Alert with Progress Bar */
.alert-with-progress[b-tk33o58xxp] {
    position: relative;
    overflow: hidden;
}

.alert-progress[b-tk33o58xxp] {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
  background: currentColor;
    opacity: 0.3;
    animation: alert-progress-b-tk33o58xxp 5s linear forwards;
}

@keyframes alert-progress-b-tk33o58xxp {
    0% {
        width: 100%;
    }
    100% {
        width: 0%;
    }
}
/* _content/AgriConnect.BlazorApp/Components/Molecules/Card.razor.rz.scp.css */
/**
 * AgriConnect Card Component Styles - MODERN VERSION
 * Updated to match modern dashboard design
 */

/* ==========================================
   BASE CARD STYLES - MODERNIZED
========================================== */

.card[b-9kz3l5umdw] {
  /* Layout */
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  /* Spacing */
  width: 100%;
  padding: 1.5rem;
  /* Borders */
  border-radius: 16px;
  /* Background */
  background-color: white;
  border: 1px solid #f3f4f6;
  /* Effects */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

  /* ==========================================
   MODERN CARD HOVER
 ========================================== */

  .card-hover:hover[b-9kz3l5umdw],
  .card:hover[b-9kz3l5umdw] {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
  }

/* ==========================================
   CARD VARIANTS - MODERN
   ========================================== */

/* Elevated Variant */
.card-elevated[b-9kz3l5umdw],
.shadow-lg[b-9kz3l5umdw] {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

  .card-elevated:hover[b-9kz3l5umdw] {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  }

/* ==========================================
 INTERACTIVE CARD - MODERN
   ========================================== */

.card-interactive[b-9kz3l5umdw] {
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
}

  .card-interactive:hover[b-9kz3l5umdw] {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .card-interactive:active[b-9kz3l5umdw] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  }

  .card-interactive:focus[b-9kz3l5umdw] {
    outline: 2px solid #22c55e;
    outline-offset: 2px;
  }

/* ==========================================
   FADE IN ANIMATION
   ========================================== */

.card-fade-in[b-9kz3l5umdw] {
  animation: fadeInUp-b-9kz3l5umdw 0.6s ease-out;
}

@keyframes fadeInUp-b-9kz3l5umdw {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================
   CARD HEADER - MODERN
   ========================================== */

.card-header[b-9kz3l5umdw] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f3f4f6;
}

/* ==========================================
   CARD BODY - MODERN
   ========================================== */

.card-body[b-9kz3l5umdw] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.card-title[b-9kz3l5umdw] {
  margin: 0 0 0.5rem 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.4;
}

/* ==========================================
   CARD FOOTER - MODERN
   ========================================== */

.card-footer[b-9kz3l5umdw] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #f3f4f6;
}

/* ==========================================
   LOADING OVERLAY - MODERN
   ========================================== */

.spinner[b-9kz3l5umdw] {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f4f6;
  border-top-color: #22c55e;
  border-radius: 50%;
  animation: spin-b-9kz3l5umdw 0.8s linear infinite;
}

@keyframes spin-b-9kz3l5umdw {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================
   STAT CARDS - MODERNIZED
   ========================================== */

.card .stat-display[b-9kz3l5umdw] {
  position: relative;
  overflow: hidden;
}

  .card .stat-display[b-9kz3l5umdw]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    animation: pulse-b-9kz3l5umdw 15s ease-in-out infinite;
    pointer-events: none;
  }

@keyframes pulse-b-9kz3l5umdw {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }

  50% {
    transform: scale(1.1) rotate(180deg);
  }
}

.card .stat-number[b-9kz3l5umdw] {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
}

.card .stat-label[b-9kz3l5umdw] {
  font-size: 0.875rem;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}

/* ==========================================
   RESPONSIVE - MODERN
   ========================================== */

@media (max-width: 768px) {
  .card[b-9kz3l5umdw] {
    padding: 1rem;
  }

  .card-title[b-9kz3l5umdw] {
    font-size: 1.125rem;
  }

  .card .stat-number[b-9kz3l5umdw] {
    font-size: 2rem;
  }
}

/* ==========================================
   DARK MODE - MODERN
   ========================================== */

@media (prefers-color-scheme: dark) {
  .card[b-9kz3l5umdw] {
    background-color: #1f2937;
    border-color: #374151;
  }

  .card-header[b-9kz3l5umdw],
  .card-footer[b-9kz3l5umdw] {
    border-color: #374151;
  }

  .card-title[b-9kz3l5umdw] {
    color: white;
  }

  .card:hover[b-9kz3l5umdw] {
    background-color: #1f2937;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .card[b-9kz3l5umdw],
  .card-hover:hover[b-9kz3l5umdw],
  .card-interactive:hover[b-9kz3l5umdw],
  .card-fade-in[b-9kz3l5umdw],
  .spinner[b-9kz3l5umdw],
  .card .stat-display[b-9kz3l5umdw]::before {
    transition: none;
    animation: none;
    transform: none;
  }
}

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

.card:focus-visible[b-9kz3l5umdw],
.card-interactive:focus-visible[b-9kz3l5umdw] {
  outline: 3px solid #22c55e;
  outline-offset: 3px;
}

/* ==========================================
   NO PADDING VARIANT
   ========================================== */

.card.p-0 .card-body[b-9kz3l5umdw] {
  padding: 0;
}
/* _content/AgriConnect.BlazorApp/Components/Molecules/Dropdown.razor.rz.scp.css */
/**
 * Dropdown Component Styles
 */

.dropdown[b-kga3az8x9t] {
    position: relative;
}

.dropdown-overlay[b-kga3az8x9t] {
    background: transparent;
}

.dropdown-menu[b-kga3az8x9t] {
    position: absolute;
    background: white;
    border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-primary);
    overflow: hidden;
}

/* Positions */
.dropdown-bottom-left[b-kga3az8x9t] {
    top: calc(100% + 8px);
    left: 0;
}

.dropdown-bottom-right[b-kga3az8x9t] {
  top: calc(100% + 8px);
    right: 0;
}

.dropdown-top-left[b-kga3az8x9t] {
    bottom: calc(100% + 8px);
    left: 0;
}

.dropdown-top-right[b-kga3az8x9t] {
    bottom: calc(100% + 8px);
    right: 0;
}

/* Dropdown Item */
.dropdown-item[b-kga3az8x9t] {
  display: flex;
    align-items: center;
  gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.dropdown-item:hover[b-kga3az8x9t] {
    background: var(--gray-50);
}

.dropdown-item:active[b-kga3az8x9t] {
    background: var(--gray-100);
}

.dropdown-item.dropdown-item-danger[b-kga3az8x9t] {
    color: var(--error-500);
}

.dropdown-item.dropdown-item-danger:hover[b-kga3az8x9t] {
    background: var(--error-50);
}

.dropdown-item.dropdown-item-disabled[b-kga3az8x9t] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Dropdown Divider */
.dropdown-divider[b-kga3az8x9t] {
    height: 1px;
    background: var(--border-primary);
    margin: var(--space-1) 0;
}

/* Animations */
.dropdown-slide-in[b-kga3az8x9t] {
    animation: dropdown-slide-in-b-kga3az8x9t 0.2s ease-out;
}

@keyframes dropdown-slide-in-b-kga3az8x9t {
    0% {
        opacity: 0;
        transform: translateY(-8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dark Mode */
[data-theme="dark"] .dropdown-menu[b-kga3az8x9t] {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

[data-theme="dark"] .dropdown-item:hover[b-kga3az8x9t] {
    background: var(--gray-700);
}
/* _content/AgriConnect.BlazorApp/Components/Molecules/EmptyState.razor.rz.scp.css */
/**
 * Empty State Component Styles
 */

.empty-state[b-mqxz39xu4a] {
    display: flex;
    align-items: center;
    justify-content: center;
  min-height: 400px;
    padding: var(--space-8);
}

.empty-state-content[b-mqxz39xu4a] {
    max-width: 400px;
    text-align: center;
}

.empty-state-icon[b-mqxz39xu4a] {
    font-size: 4rem;
    color: var(--gray-400);
    margin-bottom: var(--space-6);
    animation: empty-state-float-b-mqxz39xu4a 3s ease-in-out infinite;
}

.empty-state-illustration[b-mqxz39xu4a] {
    width: 200px;
    height: 200px;
    margin: 0 auto var(--space-6);
}

.empty-state-illustration svg[b-mqxz39xu4a],
.empty-state-illustration img[b-mqxz39xu4a] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.empty-state-title[b-mqxz39xu4a] {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
 color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.empty-state-description[b-mqxz39xu4a] {
    font-size: var(--text-base);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-6);
}

.empty-state-actions[b-mqxz39xu4a] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: center;
}

@media (min-width: 640px) {
    .empty-state-actions[b-mqxz39xu4a] {
      flex-direction: row;
      justify-content: center;
 }
}

/* Floating Animation */
@keyframes empty-state-float-b-mqxz39xu4a {
    0%, 100% {
      transform: translateY(0);
  }
    50% {
        transform: translateY(-10px);
  }
}

/* Fade In Animation */
.empty-state[b-mqxz39xu4a] {
    animation: empty-state-fade-in-b-mqxz39xu4a 0.5s ease-out;
}

@keyframes empty-state-fade-in-b-mqxz39xu4a {
    0% {
  opacity: 0;
        transform: scale(0.9);
    }
    100% {
     opacity: 1;
        transform: scale(1);
    }
}
/* _content/AgriConnect.BlazorApp/Components/Molecules/Modal.razor.rz.scp.css */
/* Modal Backdrop */
.ac-modal-backdrop[b-oavp59ztin] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4);
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.ac-modal-backdrop--open[b-oavp59ztin] {
  opacity: 1;
  pointer-events: all;
}

/* Modal Container */
.ac-modal[b-oavp59ztin] {
  position: relative;
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.9);
  opacity: 0;
  transition: all var(--transition-base);
}

.ac-modal--open[b-oavp59ztin] {
  transform: scale(1);
  opacity: 1;
}

/* Modal Sizes */
.ac-modal--sm[b-oavp59ztin] { width: 100%; max-width: 400px; }
.ac-modal--md[b-oavp59ztin] { width: 100%; max-width: 600px; }
.ac-modal--lg[b-oavp59ztin] { width: 100%; max-width: 800px; }
.ac-modal--xl[b-oavp59ztin] { width: 100%; max-width: 1200px; }
.ac-modal--full[b-oavp59ztin] { width: 100%; max-width: 95vw; height: 95vh; }

/* Modal Header */
.ac-modal__header[b-oavp59ztin] {
  padding: var(--spacing-6);
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}

.ac-modal__title[b-oavp59ztin] {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

/* Modal Body */
.ac-modal__body[b-oavp59ztin] {
  padding: var(--spacing-6);
overflow-y: auto;
  flex: 1;
}

/* Modal Footer */
.ac-modal__footer[b-oavp59ztin] {
  padding: var(--spacing-6);
  border-top: 1px solid var(--gray-200);
  display: flex;
  gap: var(--spacing-3);
  justify-content: flex-end;
  flex-shrink: 0;
}

/* Close Button */
.ac-modal__close[b-oavp59ztin] {
  position: absolute;
  top: var(--spacing-4);
  right: var(--spacing-4);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--text-xl);
  padding: var(--spacing-2);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  z-index: 1;
}

.ac-modal__close:hover[b-oavp59ztin] {
  background: var(--gray-100);
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .ac-modal[b-oavp59ztin] {
    max-width: 95vw;
    max-height: 95vh;
  }
  
  .ac-modal__header[b-oavp59ztin],
  .ac-modal__body[b-oavp59ztin],
  .ac-modal__footer[b-oavp59ztin] {
    padding: var(--spacing-4);
  }
}
/* _content/AgriConnect.BlazorApp/Components/Molecules/Pagination.razor.rz.scp.css */
/**
 * Pagination Component Styles
 */

.pagination[b-lt6r3wkklc] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pagination-btn[b-lt6r3wkklc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
 padding: 0 var(--space-3);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: white;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-base);
}

.pagination-btn:hover:not(.pagination-btn-disabled)[b-lt6r3wkklc] {
    background: var(--primary-50);
  border-color: var(--primary-500);
    color: var(--primary-600);
}

.pagination-btn-active[b-lt6r3wkklc] {
    background: var(--primary-500);
    border-color: var(--primary-500);
    color: white;
}

.pagination-btn-active:hover[b-lt6r3wkklc] {
    background: var(--primary-600);
    border-color: var(--primary-600);
}

.pagination-btn-disabled[b-lt6r3wkklc] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-ellipsis[b-lt6r3wkklc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
height: 2.5rem;
    color: var(--text-tertiary);
}

/* Responsive */
@media (max-width: 640px) {
    .pagination-btn[b-lt6r3wkklc] {
      min-width: 2rem;
    height: 2rem;
        padding: 0 var(--space-2);
        font-size: var(--text-xs);
    }
}
/* _content/AgriConnect.BlazorApp/Components/Molecules/Stepper.razor.rz.scp.css */
/* Stepper Component - Modern Progress Indicator */

.ac-stepper[b-kdcphbm5do] {
  width: 100%;
  margin-bottom: var(--spacing-8);
  padding: var(--spacing-4) 0;
}

.stepper-container[b-kdcphbm5do] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}

/* Step Item */
.stepper-step[b-kdcphbm5do] {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
}

/* Step Circle */
.step-circle[b-kdcphbm5do] {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-semibold);
font-size: var(--text-base);
  transition: all var(--transition-base);
  position: relative;
  z-index: 2;
  background: white;
  border: 3px solid var(--gray-300);
  color: var(--text-secondary);
  cursor: default;
}

/* Step States */
.stepper-step.upcoming .step-circle[b-kdcphbm5do] {
  border-color: var(--gray-300);
  background: white;
  color: var(--text-secondary);
}

.stepper-step.active .step-circle[b-kdcphbm5do] {
  border-color: #667eea;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
  transform: scale(1.1);
}

.stepper-step.completed .step-circle[b-kdcphbm5do] {
  border-color: var(--success);
  background: var(--success);
  color: white;
  cursor: pointer;
}

.stepper-step.completed .step-circle:hover[b-kdcphbm5do] {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* Step Icon */
.step-circle i[b-kdcphbm5do] {
  font-size: var(--text-lg);
}

/* Step Label */
.step-label[b-kdcphbm5do] {
  margin-top: var(--spacing-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
text-align: center;
  transition: color var(--transition-fast);
}

.stepper-step.active .step-label[b-kdcphbm5do] {
  color: #667eea;
  font-weight: var(--font-semibold);
}

.stepper-step.completed .step-label[b-kdcphbm5do] {
color: var(--success);
}

/* Connector Line */
.step-connector[b-kdcphbm5do] {
  position: absolute;
  top: 24px;
  left: calc(50% + 24px);
  right: calc(-50% + 24px);
  height: 3px;
  background: var(--gray-300);
  z-index: 1;
  transition: all var(--transition-base);
}

.step-connector.completed[b-kdcphbm5do] {
  background: var(--success);
}

/* Animation for Active Step */
@keyframes pulse-ring-b-kdcphbm5do {
  0% {
    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
  }
}

.stepper-step.active .step-circle[b-kdcphbm5do] {
  animation: pulse-ring-b-kdcphbm5do 2s ease-in-out infinite;
}

/* Responsive Design */
@media (max-width: 576px) {
  .stepper-container[b-kdcphbm5do] {
    max-width: 100%;
  }

  .step-circle[b-kdcphbm5do] {
    width: 40px;
    height: 40px;
    font-size: var(--text-sm);
  }

  .step-label[b-kdcphbm5do] {
    font-size: var(--text-xs);
    max-width: 80px;
  }

  .step-connector[b-kdcphbm5do] {
    top: 20px;
    left: calc(50% + 20px);
    right: calc(-50% + 20px);
    height: 2px;
  }
}

/* Compact Mode (for mobile) */
@media (max-width: 480px) {
  .step-label[b-kdcphbm5do] {
    display: none;
  }

  .step-circle[b-kdcphbm5do] {
 width: 36px;
    height: 36px;
  }

  .step-connector[b-kdcphbm5do] {
    top: 18px;
    left: calc(50% + 18px);
    right: calc(-50% + 18px);
  }
}
/* _content/AgriConnect.BlazorApp/Components/Molecules/Tabs.razor.rz.scp.css */
/**
 * Tabs Component Styles
 */

.tabs[b-1x8w9x4aym] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tabs-vertical[b-1x8w9x4aym] {
 flex-direction: row;
}

.tabs-vertical .tabs-list[b-1x8w9x4aym] {
  flex-direction: column;
    border-right: 2px solid var(--border-primary);
    border-bottom: none;
}

.tabs-list[b-1x8w9x4aym] {
    display: flex;
    gap: var(--space-1);
    border-bottom: 2px solid var(--border-primary);
}

.tabs-pills[b-1x8w9x4aym] {
    border-bottom: none;
gap: var(--space-2);
}

/* Tab Button */
.tab-button[b-1x8w9x4aym] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
}

.tab-button:hover:not(.tab-disabled)[b-1x8w9x4aym] {
    color: var(--text-primary);
    background: var(--gray-50);
}

.tab-button.tab-active[b-1x8w9x4aym] {
    color: var(--primary-500);
    border-bottom-color: var(--primary-500);
}

.tab-button.tab-disabled[b-1x8w9x4aym] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Pills Variant */
.tabs-pills .tab-button[b-1x8w9x4aym] {
    border-radius: var(--radius-lg);
    border-bottom: none;
}

.tabs-pills .tab-button.tab-active[b-1x8w9x4aym] {
    background: var(--primary-500);
    color: white;
}

.tabs-pills .tab-button.tab-active:hover[b-1x8w9x4aym] {
    background: var(--primary-600);
}

/* Tab Content */
.tabs-content[b-1x8w9x4aym] {
    padding: var(--space-4) 0;
}

.tab-panel[b-1x8w9x4aym] {
    animation: tab-fade-in-b-1x8w9x4aym 0.3s ease-out;
}

@keyframes tab-fade-in-b-1x8w9x4aym {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
     opacity: 1;
        transform: translateY(0);
    }
}

/* Vertical Tabs */
.tabs-vertical .tab-button[b-1x8w9x4aym] {
    border-bottom: none;
    border-right: 2px solid transparent;
    justify-content: flex-start;
}

.tabs-vertical .tab-button.tab-active[b-1x8w9x4aym] {
    border-right-color: var(--primary-500);
    border-bottom-color: transparent;
}

/* Responsive */
@media (max-width: 768px) {
    .tabs-list[b-1x8w9x4aym] {
        overflow-x: auto;
  -webkit-overflow-scrolling: touch;
    }
    
    .tab-button[b-1x8w9x4aym] {
        white-space: nowrap;
    }
}
/* _content/AgriConnect.BlazorApp/Components/Molecules/Toast.razor.rz.scp.css */
/**
 * Toast Component Styles
 */

.toast[b-7kdmh4m7ko] {
    position: fixed;
    z-index: var(--z-80);
    min-width: 300px;
    max-width: 500px;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2xl);
    overflow: hidden;
}

/* Positions */
.toast-top-right[b-7kdmh4m7ko] {
    top: var(--space-4);
    right: var(--space-4);
}

.toast-top-left[b-7kdmh4m7ko] {
  top: var(--space-4);
left: var(--space-4);
}

.toast-bottom-right[b-7kdmh4m7ko] {
  bottom: var(--space-4);
    right: var(--space-4);
}

.toast-bottom-left[b-7kdmh4m7ko] {
    bottom: var(--space-4);
    left: var(--space-4);
}

.toast-top-center[b-7kdmh4m7ko] {
    top: var(--space-4);
    left: 50%;
 transform: translateX(-50%);
}

.toast-bottom-center[b-7kdmh4m7ko] {
    bottom: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
}

/* Toast Content */
.toast-content[b-7kdmh4m7ko] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
}

.toast-icon[b-7kdmh4m7ko] {
font-size: var(--text-xl);
    flex-shrink: 0;
}

.toast-body[b-7kdmh4m7ko] {
    flex: 1;
}

.toast-title[b-7kdmh4m7ko] {
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    margin-bottom: var(--space-1);
}

.toast-message[b-7kdmh4m7ko] {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.toast-close[b-7kdmh4m7ko] {
    background: transparent;
    border: none;
    color: currentColor;
    opacity: 0.5;
    cursor: pointer;
    padding: var(--space-1);
    transition: opacity var(--transition-base);
    flex-shrink: 0;
}

.toast-close:hover[b-7kdmh4m7ko] {
    opacity: 1;
}

/* Variants */
.toast-success[b-7kdmh4m7ko] {
    border-left: 4px solid var(--success-500);
}

.toast-success .toast-icon[b-7kdmh4m7ko] {
    color: var(--success-500);
}

.toast-warning[b-7kdmh4m7ko] {
    border-left: 4px solid var(--warning-500);
}

.toast-warning .toast-icon[b-7kdmh4m7ko] {
    color: var(--warning-500);
}

.toast-error[b-7kdmh4m7ko] {
    border-left: 4px solid var(--error-500);
}

.toast-error .toast-icon[b-7kdmh4m7ko] {
    color: var(--error-500);
}

.toast-info[b-7kdmh4m7ko] {
    border-left: 4px solid var(--secondary-500);
}

.toast-info .toast-icon[b-7kdmh4m7ko] {
    color: var(--secondary-500);
}

/* Progress Bar */
.toast-progress[b-7kdmh4m7ko] {
    position: absolute;
    bottom: 0;
    left: 0;
 height: 3px;
    background: currentColor;
    opacity: 0.3;
  animation: toast-progress-b-7kdmh4m7ko linear forwards;
}

@keyframes toast-progress-b-7kdmh4m7ko {
    0% { width: 100%; }
    100% { width: 0%; }
}

/* Slide In Animations */
.toast-slide-in.toast-top-right[b-7kdmh4m7ko],
.toast-slide-in.toast-top-left[b-7kdmh4m7ko] {
    animation: toast-slide-in-top-b-7kdmh4m7ko 0.3s ease-out;
}

.toast-slide-in.toast-bottom-right[b-7kdmh4m7ko],
.toast-slide-in.toast-bottom-left[b-7kdmh4m7ko] {
animation: toast-slide-in-bottom-b-7kdmh4m7ko 0.3s ease-out;
}

@keyframes toast-slide-in-top-b-7kdmh4m7ko {
0% {
     opacity: 0;
 transform: translateY(-100%);
    }
    100% {
        opacity: 1;
  transform: translateY(0);
    }
}

@keyframes toast-slide-in-bottom-b-7kdmh4m7ko {
    0% {
        opacity: 0;
      transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 640px) {
    .toast[b-7kdmh4m7ko] {
        left: var(--space-4) !important;
        right: var(--space-4) !important;
        max-width: none;
        transform: none !important;
    }
}
/* _content/AgriConnect.BlazorApp/Components/Notifications/NotificationIndicator.razor.rz.scp.css */
/* NotificationIndicator.razor.css */

.notification-indicator[b-a0t5cmrf2g] {
    position: relative;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.notification-indicator:hover[b-a0t5cmrf2g] {
    background-color: rgba(0, 0, 0, 0.1);
}

.btn-icon[b-a0t5cmrf2g] {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: transparent;
    color: var(--bs-gray-600);
    transition: all 0.2s ease;
}

.btn-icon:hover[b-a0t5cmrf2g] {
    background-color: var(--bs-gray-100);
    color: var(--bs-gray-800);
}

.notification-badge[b-a0t5cmrf2g] {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: #dc3545;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.notification-dropdown[b-a0t5cmrf2g] {
    position: absolute;
    top: 100%;
    right: 0;
    width: 320px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    max-height: 400px;
    overflow: hidden;
    animation: dropdownSlideIn-b-a0t5cmrf2g 0.2s ease-out;
}

.notification-overlay[b-a0t5cmrf2g] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: transparent;
}

.notification-header[b-a0t5cmrf2g],
.dropdown-header[b-a0t5cmrf2g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #eee;
}

.dropdown-header h6[b-a0t5cmrf2g],
.notification-header h6[b-a0t5cmrf2g] {
    margin: 0;
    font-weight: 600;
}

.notification-list[b-a0t5cmrf2g],
.dropdown-body[b-a0t5cmrf2g] {
    max-height: 300px;
    overflow-y: auto;
}

.loading[b-a0t5cmrf2g] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}

.no-notifications[b-a0t5cmrf2g] {
    text-align: center;
    padding: 2rem 1rem;
    color: #999;
}

.no-notifications i[b-a0t5cmrf2g] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.no-notifications p[b-a0t5cmrf2g] {
    margin: 0;
}

.notification-item[b-a0t5cmrf2g] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s;
    position: relative;
}

.notification-item:hover[b-a0t5cmrf2g] {
    background-color: #f8f9fa;
}

.notification-item.unread[b-a0t5cmrf2g] {
    background-color: #e7f3ff;
    border-left: 3px solid #007bff;
}

.notification-icon[b-a0t5cmrf2g] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--bs-gray-100);
    flex-shrink: 0;
}

.notification-content[b-a0t5cmrf2g] {
    flex: 1;
    min-width: 0;
}

.notification-title[b-a0t5cmrf2g] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
    margin-bottom: 0.25rem;
}

.notification-message[b-a0t5cmrf2g],
.notification-text[b-a0t5cmrf2g] {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.notification-time[b-a0t5cmrf2g] {
    font-size: 0.75rem;
    color: #999;
}

.notification-footer[b-a0t5cmrf2g] {
    padding: 0.75rem 1rem;
    border-top: 1px solid #eee;
    text-align: center;
}

.view-all[b-a0t5cmrf2g] {
    padding: 0.75rem 1rem;
    text-align: center;
    border-top: 1px solid #eee;
}

.view-all a[b-a0t5cmrf2g] {
    color: var(--bs-primary);
    text-decoration: none;
}

.view-all a:hover[b-a0t5cmrf2g] {
    text-decoration: underline;
}

/* Animation for dropdown */
@keyframes dropdownSlideIn-b-a0t5cmrf2g {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .notification-dropdown[b-a0t5cmrf2g] {
        right: -10px;
        width: 280px;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .btn-icon[b-a0t5cmrf2g] {
        color: var(--bs-gray-400);
    }

    .btn-icon:hover[b-a0t5cmrf2g] {
        background-color: var(--bs-gray-800);
        color: var(--bs-gray-200);
    }

    .notification-dropdown[b-a0t5cmrf2g] {
        background-color: var(--dark-surface);
        border: 1px solid var(--bs-gray-700);
    }

    .dropdown-header[b-a0t5cmrf2g],
    .notification-header[b-a0t5cmrf2g] {
        border-color: var(--bs-gray-700);
    }

    .notification-item:hover[b-a0t5cmrf2g] {
        background-color: var(--bs-gray-800);
    }

    .notification-item.unread[b-a0t5cmrf2g] {
        background-color: rgba(var(--bs-primary-rgb), 0.1);
    }

    .notification-icon[b-a0t5cmrf2g] {
        background-color: var(--bs-gray-800);
    }

    .notification-text[b-a0t5cmrf2g],
    .notification-title[b-a0t5cmrf2g] {
        color: var(--dark-text);
    }

    .notification-time[b-a0t5cmrf2g] {
        color: var(--bs-gray-500);
    }

    .view-all[b-a0t5cmrf2g],
    .notification-footer[b-a0t5cmrf2g] {
        border-color: var(--bs-gray-700);
    }
}
/* _content/AgriConnect.BlazorApp/Components/Notifications/NotificationPanel.razor.rz.scp.css */
/* Notification Panel Styles */
.notifications-container[b-fxvahkto9e] {
    position: relative;
    display: inline-block;
}

/* Notification Bell */
.notification-bell[b-fxvahkto9e] {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6b7280;
}

.notification-bell:hover[b-fxvahkto9e] {
    background: #f3f4f6;
    color: #374151;
}

.notification-bell.has-unread[b-fxvahkto9e] {
    color: #059669;
}

.bell-icon[b-fxvahkto9e] {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2;
}

.notification-badge[b-fxvahkto9e] {
    position: absolute;
    top: 0.125rem;
    right: 0.125rem;
    background: #ef4444;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 10px;
    min-width: 1.125rem;
    height: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
    animation: pulse-b-fxvahkto9e 2s infinite;
}

@keyframes pulse-b-fxvahkto9e {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Notifications Panel */
.notifications-panel[b-fxvahkto9e] {
    position: absolute;
    top: 100%;
    right: 0;
    width: 400px;
    max-height: 600px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    margin-top: 0.5rem;
    overflow: hidden;
}

.panel-header[b-fxvahkto9e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    background: #fafbfc;
}

.panel-title[b-fxvahkto9e] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.header-actions[b-fxvahkto9e] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mark-all-read[b-fxvahkto9e] {
    font-size: 0.875rem;
    color: #059669;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.mark-all-read:hover[b-fxvahkto9e] {
    background: rgba(5, 150, 105, 0.1);
}

.close-panel[b-fxvahkto9e] {
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    background: none;
    color: #6b7280;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.close-panel:hover[b-fxvahkto9e] {
    background: #f3f4f6;
    color: #374151;
}

.close-panel svg[b-fxvahkto9e] {
    width: 1rem;
    height: 1rem;
    stroke-width: 2;
}

/* Notifications List */
.notifications-list[b-fxvahkto9e] {
    max-height: 480px;
    overflow-y: auto;
}

.notification-item[b-fxvahkto9e] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border-bottom: 1px solid #f3f4f6;
}

.notification-item:hover[b-fxvahkto9e] {
    background: #f9fafb;
}

.notification-item.unread[b-fxvahkto9e] {
    background: rgba(5, 150, 105, 0.02);
    border-left: 3px solid #059669;
}

.notification-item.unread[b-fxvahkto9e]::before {
    content: '';
    position: absolute;
    top: 1.25rem;
    left: 0.5rem;
    width: 0.5rem;
    height: 0.5rem;
    background: #059669;
    border-radius: 50%;
}

/* Notification Types */
.notification-item.success .notification-icon[b-fxvahkto9e] {
    color: #10b981;
}

.notification-item.info .notification-icon[b-fxvahkto9e] {
    color: #3b82f6;
}

.notification-item.warning .notification-icon[b-fxvahkto9e] {
    color: #f59e0b;
}

.notification-item.error .notification-icon[b-fxvahkto9e] {
    color: #ef4444;
}

.notification-icon[b-fxvahkto9e] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(156, 163, 175, 0.1);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.notification-icon svg[b-fxvahkto9e] {
    width: 1rem;
    height: 1rem;
    stroke-width: 2;
}

.notification-content[b-fxvahkto9e] {
    flex: 1;
    min-width: 0;
}

.notification-title[b-fxvahkto9e] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}

.notification-message[b-fxvahkto9e] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-meta[b-fxvahkto9e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.notification-time[b-fxvahkto9e] {
    font-size: 0.75rem;
    color: #9ca3af;
}

.notification-action[b-fxvahkto9e] {
    font-size: 0.75rem;
    color: #059669;
    text-decoration: none;
    font-weight: 500;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.notification-action:hover[b-fxvahkto9e] {
    background: rgba(5, 150, 105, 0.1);
    text-decoration: none;
}

.dismiss-notification[b-fxvahkto9e] {
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: none;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0;
    flex-shrink: 0;
}

.notification-item:hover .dismiss-notification[b-fxvahkto9e] {
    opacity: 1;
}

.dismiss-notification:hover[b-fxvahkto9e] {
    background: #f3f4f6;
    color: #6b7280;
}

.dismiss-notification svg[b-fxvahkto9e] {
    width: 0.875rem;
    height: 0.875rem;
    stroke-width: 2;
}

/* View All Link */
.view-all-container[b-fxvahkto9e] {
    padding: 1rem 1.25rem;
    text-align: center;
    border-top: 1px solid #e5e7eb;
    background: #fafbfc;
}

.view-all-link[b-fxvahkto9e] {
    font-size: 0.875rem;
    color: #059669;
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: inline-block;
}

.view-all-link:hover[b-fxvahkto9e] {
    background: rgba(5, 150, 105, 0.1);
    text-decoration: none;
}

/* Empty State */
.empty-notifications[b-fxvahkto9e] {
    text-align: center;
    padding: 3rem 2rem;
    color: #6b7280;
}

.empty-icon[b-fxvahkto9e] {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    stroke-width: 1.5;
    opacity: 0.5;
}

.empty-notifications h4[b-fxvahkto9e] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: #374151;
}

.empty-notifications p[b-fxvahkto9e] {
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.5;
}

/* Overlay */
.notifications-overlay[b-fxvahkto9e] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 999;
}

/* Responsive Design */
@media (max-width: 640px) {
    .notifications-panel[b-fxvahkto9e] {
        width: calc(100vw - 2rem);
        right: -1rem;
        max-width: 400px;
    }
    
    .notification-item[b-fxvahkto9e] {
        padding: 0.875rem 1rem;
    }
    
    .notification-meta[b-fxvahkto9e] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .notifications-panel[b-fxvahkto9e] {
        background: #1e293b;
        border-color: #374151;
    }
    
    .panel-header[b-fxvahkto9e] {
        background: #0f172a;
        border-color: #374151;
    }
    
    .panel-title[b-fxvahkto9e] {
        color: #f1f5f9;
    }
    
    .notification-item[b-fxvahkto9e] {
        border-color: #334155;
    }
    
    .notification-item:hover[b-fxvahkto9e] {
        background: #334155;
    }
    
    .notification-item.unread[b-fxvahkto9e] {
        background: rgba(16, 185, 129, 0.05);
        border-left-color: #10b981;
    }
    
    .notification-title[b-fxvahkto9e] {
        color: #e5e7eb;
    }
    
    .notification-message[b-fxvahkto9e] {
        color: #9ca3af;
    }
    
    .view-all-container[b-fxvahkto9e] {
        background: #0f172a;
        border-color: #374151;
    }
    
    .empty-notifications h4[b-fxvahkto9e] {
        color: #cbd5e1;
    }
    
    .notification-bell:hover[b-fxvahkto9e] {
        background: #374151;
        color: #e5e7eb;
    }
    
    .close-panel:hover[b-fxvahkto9e],
    .dismiss-notification:hover[b-fxvahkto9e] {
        background: #374151;
        color: #cbd5e1;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .notifications-panel[b-fxvahkto9e] {
        border-width: 2px;
    }
    
    .notification-item.unread[b-fxvahkto9e] {
        border-left-width: 4px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .notification-badge[b-fxvahkto9e] {
        animation: none;
    }
    
    .notification-bell[b-fxvahkto9e],
    .notification-item[b-fxvahkto9e],
    .notification-action[b-fxvahkto9e] {
        transition: none;
    }
}
/* _content/AgriConnect.BlazorApp/Components/Offers/MakeOfferModal.razor.rz.scp.css */
.make-offer-modal[b-99e9e5ke6f] {
    padding: 0;
}

/* Listing Preview */
.listing-preview[b-99e9e5ke6f] {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--surface-light, #f9fafb);
    border-radius: 12px;
    margin-bottom: 24px;
}

.preview-image[b-99e9e5ke6f] {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.preview-info[b-99e9e5ke6f] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.preview-info h4[b-99e9e5ke6f] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    line-height: 1.3;
}

.current-price[b-99e9e5ke6f] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.current-price .label[b-99e9e5ke6f] {
    font-size: 0.875rem;
    color: var(--text-muted, #6b7280);
}

.current-price .price[b-99e9e5ke6f] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-green, #10b981);
}

.minimum-offer[b-99e9e5ke6f] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-muted, #6b7280);
    padding: 6px 10px;
    background: #fef3c7;
    border-radius: 6px;
    width: fit-content;
}

/* Offer Input Section */
.offer-input-section[b-99e9e5ke6f] {
    margin-bottom: 20px;
}

.input-label[b-99e9e5ke6f] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    margin-bottom: 8px;
}

.price-input-wrapper[b-99e9e5ke6f] {
    position: relative;
    display: flex;
    align-items: center;
}

.currency-prefix[b-99e9e5ke6f] {
    position: absolute;
    left: 16px;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    z-index: 1;
    pointer-events: none;
}

.price-input-wrapper :deep(input)[b-99e9e5ke6f],
.offer-input[b-99e9e5ke6f] {
    padding-left: 40px !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
}

.offer-input[b-99e9e5ke6f] {
    width: 100%;
    padding: 12px 16px 12px 40px;
    font-size: 1.25rem;
    font-weight: 600;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: white;
    color: var(--text-primary, #1f2937);
}

.offer-input:focus[b-99e9e5ke6f] {
    border-color: var(--primary-green, #10b981);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.offer-input[b-99e9e5ke6f]::-webkit-outer-spin-button,
.offer-input[b-99e9e5ke6f]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.offer-input[type=number][b-99e9e5ke6f] {
    -moz-appearance: textfield;
}

.offer-preview[b-99e9e5ke6f] {
    margin-top: 12px;
}

.discount-badge[b-99e9e5ke6f] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

.discount-badge.positive[b-99e9e5ke6f] {
    background: #dcfce7;
    color: #166534;
}

.discount-badge.negative[b-99e9e5ke6f] {
    background: #fee2e2;
    color: #991b1b;
}

/* Quick Offers */
.quick-offers[b-99e9e5ke6f] {
    margin-bottom: 20px;
}

.quick-label[b-99e9e5ke6f] {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted, #6b7280);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.quick-buttons[b-99e9e5ke6f] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quick-buttons button[b-99e9e5ke6f] {
    font-size: 0.75rem !important;
}

/* Message Section */
.message-section[b-99e9e5ke6f] {
    margin-bottom: 24px;
    position: relative;
}

.char-count[b-99e9e5ke6f] {
    position: absolute;
    right: 12px;
    bottom: 12px;
    font-size: 0.7rem;
    color: var(--text-muted, #9ca3af);
}

/* Submit Section */
.submit-section[b-99e9e5ke6f] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.offer-note[b-99e9e5ke6f] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-muted, #6b7280);
    margin: 0;
}

/* ========== Existing Offer Status ========== */
.existing-offer-section[b-99e9e5ke6f] {
    padding: 0;
}

.offer-status-card[b-99e9e5ke6f] {
    padding: 20px;
    border-radius: 12px;
    border: 1px solid;
}

.offer-status-card.status-pending[b-99e9e5ke6f] {
    background: #fef9c3;
    border-color: #fbbf24;
}

.offer-status-card.status-accepted[b-99e9e5ke6f] {
    background: #dcfce7;
    border-color: #10b981;
}

.offer-status-card.status-declined[b-99e9e5ke6f] {
    background: #fee2e2;
    border-color: #ef4444;
}

.offer-status-card.status-counter[b-99e9e5ke6f] {
    background: #e0e7ff;
    border-color: #6366f1;
}

.offer-status-card.status-expired[b-99e9e5ke6f] {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.offer-status-card.status-withdrawn[b-99e9e5ke6f] {
    background: #f3f4f6;
    border-color: #6b7280;
}

.status-header[b-99e9e5ke6f] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.status-header i[b-99e9e5ke6f] {
    font-size: 1.5rem;
}

.status-pending .status-header i[b-99e9e5ke6f] { color: #d97706; }
.status-accepted .status-header i[b-99e9e5ke6f] { color: #059669; }
.status-declined .status-header i[b-99e9e5ke6f] { color: #dc2626; }
.status-counter .status-header i[b-99e9e5ke6f] { color: #4f46e5; }

.status-text[b-99e9e5ke6f] {
    font-size: 1.125rem;
    font-weight: 700;
}

.offer-details[b-99e9e5ke6f] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.detail-row[b-99e9e5ke6f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.detail-row .label[b-99e9e5ke6f] {
    font-size: 0.875rem;
    color: var(--text-muted, #6b7280);
}

.detail-row .value[b-99e9e5ke6f] {
    font-size: 0.9rem;
    font-weight: 600;
}

.detail-row .value.price[b-99e9e5ke6f] {
    font-size: 1.25rem;
    color: var(--primary-green, #10b981);
}

.detail-row .value.discount[b-99e9e5ke6f] {
    color: #059669;
}

.detail-row.counter-offer[b-99e9e5ke6f] {
    padding-top: 12px;
    border-top: 1px dashed rgba(0,0,0,0.1);
}

.detail-row .counter-price[b-99e9e5ke6f] {
    font-size: 1.125rem;
    color: #4f46e5;
}

.response-message[b-99e9e5ke6f] {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: rgba(255,255,255,0.5);
    border-radius: 8px;
    font-size: 0.875rem;
    font-style: italic;
    margin-top: 8px;
}

.response-message i[b-99e9e5ke6f] {
    color: var(--text-muted, #6b7280);
    flex-shrink: 0;
}

/* Offer Actions */
.offer-actions[b-99e9e5ke6f] {
    display: flex;
    justify-content: center;
    padding-top: 16px;
    border-top: 1px solid rgba(0,0,0,0.1);
}

.counter-offer-actions[b-99e9e5ke6f] {
    padding-top: 16px;
    border-top: 1px solid rgba(0,0,0,0.1);
}

.counter-prompt[b-99e9e5ke6f] {
    text-align: center;
    font-size: 0.9rem;
    margin-bottom: 16px;
    font-weight: 500;
}

.action-buttons[b-99e9e5ke6f] {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .listing-preview[b-99e9e5ke6f] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .preview-image[b-99e9e5ke6f] {
        width: 100px;
        height: 100px;
    }

    .quick-buttons[b-99e9e5ke6f] {
        flex-direction: column;
    }

    .quick-buttons button[b-99e9e5ke6f] {
        width: 100%;
    }

    .action-buttons[b-99e9e5ke6f] {
        flex-direction: column;
    }
}
/* _content/AgriConnect.BlazorApp/Components/Reservations/ReservationForm.razor.rz.scp.css */
/* ReservationForm.razor.css */

.reservation-form[b-eq9i5wos9f] {
    background-color: white;
    border-radius: var(--spacing-sm);
    padding: var(--spacing-lg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.form-label.required[b-eq9i5wos9f]::after {
    content: "*";
    color: var(--bs-danger);
    margin-left: 4px;
}

/* Order Summary */
.order-summary[b-eq9i5wos9f] {
    background-color: var(--bs-gray-100);
    border-radius: var(--spacing-sm);
    padding: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.summary-details[b-eq9i5wos9f] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.summary-item[b-eq9i5wos9f] {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
}

.summary-item.total[b-eq9i5wos9f] {
    border-top: 1px solid var(--bs-gray-300);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    font-weight: 600;
    font-size: 1rem;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .reservation-form[b-eq9i5wos9f] {
        background-color: var(--dark-surface);
    }

    .order-summary[b-eq9i5wos9f] {
        background-color: var(--bs-gray-800);
    }

    .summary-item.total[b-eq9i5wos9f] {
        border-color: var(--bs-gray-700);
    }
}
/* _content/AgriConnect.BlazorApp/Components/Reviews/StarRating.razor.rz.scp.css */
/* StarRating.razor.css */

.star-rating[b-nrywwrkggz] {
    display: inline-flex;
    gap: 2px;
}

.star[b-nrywwrkggz] {
    color: var(--bs-gray-300);
    position: relative;
    font-size: 1rem;
}

.star i[b-nrywwrkggz] {
    position: relative;
    z-index: 1;
}

.star[b-nrywwrkggz]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: var(--fill);
    height: 100%;
    background: linear-gradient(to right, var(--bs-warning) var(--fill), transparent var(--fill));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 2;
}

.star-rating.small .star[b-nrywwrkggz] {
    font-size: 0.85rem;
}

.star-rating.interactive .star[b-nrywwrkggz] {
    cursor: pointer;
}

.star-rating.interactive .star:hover ~ .star[b-nrywwrkggz]::before {
    --fill: 0% !important;
}

.star-rating.interactive:hover .star[b-nrywwrkggz]::before {
    --fill: 100% !important;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .star[b-nrywwrkggz] {
        color: var(--bs-gray-700);
    }
}
/* _content/AgriConnect.BlazorApp/Components/Search/SearchComponent.razor.rz.scp.css */
/* Search Component Styles */
.search-container[b-cwq60tre5j] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* Main Search Bar */
.search-bar-wrapper[b-cwq60tre5j] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.search-input-container[b-cwq60tre5j] {
    position: relative;
    margin-bottom: 1rem;
}

.search-input[b-cwq60tre5j] {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.2s ease;
    background: #fafbfc;
}

.search-input:focus[b-cwq60tre5j] {
    outline: none;
    border-color: #059669;
    background: white;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

.search-icon[b-cwq60tre5j] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    color: #6b7280;
    stroke-width: 2;
}

.clear-search[b-cwq60tre5j] {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: none;
    color: #6b7280;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.clear-search:hover[b-cwq60tre5j] {
    background: #f3f4f6;
    color: #374151;
}

.clear-search svg[b-cwq60tre5j] {
    width: 1rem;
    height: 1rem;
    stroke-width: 2;
}

/* Suggestions Dropdown */
.suggestions-dropdown[b-cwq60tre5j] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 0.5rem;
}

.suggestion-item[b-cwq60tre5j] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 0.875rem;
}

.suggestion-item:hover[b-cwq60tre5j] {
    background: #f9fafb;
}

.suggestion-icon[b-cwq60tre5j] {
    width: 1rem;
    height: 1rem;
    color: #6b7280;
    stroke-width: 2;
    flex-shrink: 0;
}

/* Quick Filters */
.quick-filters[b-cwq60tre5j] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.filter-chip[b-cwq60tre5j] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.filter-chip:hover[b-cwq60tre5j] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.filter-chip.active[b-cwq60tre5j] {
    background: #059669;
    color: white;
    border-color: #059669;
}

.filter-icon[b-cwq60tre5j] {
    width: 1rem;
    height: 1rem;
    stroke-width: 2;
}

.filter-count[b-cwq60tre5j] {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.125rem 0.375rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 1.25rem;
    text-align: center;
}

.category-select[b-cwq60tre5j],
.location-select[b-cwq60tre5j] {
    padding: 0.5rem 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 150px;
}

.category-select:focus[b-cwq60tre5j],
.location-select:focus[b-cwq60tre5j] {
    outline: none;
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

/* Advanced Filters Panel */
.filters-panel[b-cwq60tre5j] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-top: 1rem;
    overflow: hidden;
}

.filters-header[b-cwq60tre5j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: #fafbfc;
}

.filters-header h3[b-cwq60tre5j] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
}

.close-filters[b-cwq60tre5j] {
    width: 2rem;
    height: 2rem;
    border: none;
    background: none;
    color: #6b7280;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.close-filters:hover[b-cwq60tre5j] {
    background: #f3f4f6;
    color: #374151;
}

.close-filters svg[b-cwq60tre5j] {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2;
}

.filters-grid[b-cwq60tre5j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    padding: 2rem;
}

.filter-group[b-cwq60tre5j] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.filter-label[b-cwq60tre5j] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.25rem;
}

.filter-select[b-cwq60tre5j] {
    padding: 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-select:focus[b-cwq60tre5j] {
    outline: none;
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

/* Price Inputs */
.price-inputs[b-cwq60tre5j] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.price-input[b-cwq60tre5j] {
    flex: 1;
    padding: 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.price-input:focus[b-cwq60tre5j] {
    outline: none;
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

.price-separator[b-cwq60tre5j] {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

/* Checkbox Group */
.checkbox-group[b-cwq60tre5j] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checkbox-item[b-cwq60tre5j] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #374151;
}

.checkbox-item input[type="checkbox"][b-cwq60tre5j] {
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    margin: 0;
}

.checkbox-item input[type="checkbox"]:checked[b-cwq60tre5j] {
    background-color: #059669;
    border-color: #059669;
}

.checkbox-item input[type="checkbox"]:checked[b-cwq60tre5j]::before {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
}

/* Filter Actions */
.filters-actions[b-cwq60tre5j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-top: 1px solid #e5e7eb;
    background: #fafbfc;
}

.btn-clear[b-cwq60tre5j] {
    padding: 0.75rem 1.5rem;
    background: transparent;
    color: #6b7280;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-clear:hover[b-cwq60tre5j] {
    background: #f8fafc;
    color: #374151;
    border-color: #cbd5e1;
}

.btn-apply[b-cwq60tre5j] {
    padding: 0.75rem 1.5rem;
    background: #059669;
    color: white;
    border: 2px solid #059669;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-apply:hover[b-cwq60tre5j] {
    background: #047857;
    border-color: #047857;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .search-bar-wrapper[b-cwq60tre5j] {
        padding: 1rem;
        border-radius: 12px;
    }
    
    .quick-filters[b-cwq60tre5j] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .category-select[b-cwq60tre5j],
    .location-select[b-cwq60tre5j] {
        min-width: unset;
        width: 100%;
    }
    
    .filters-grid[b-cwq60tre5j] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    
    .price-inputs[b-cwq60tre5j] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .price-separator[b-cwq60tre5j] {
        text-align: center;
    }
    
    .filters-actions[b-cwq60tre5j] {
        flex-direction: column;
        gap: 1rem;
    }
    
    .btn-clear[b-cwq60tre5j],
    .btn-apply[b-cwq60tre5j] {
        width: 100%;
        justify-content: center;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .search-bar-wrapper[b-cwq60tre5j],
    .filters-panel[b-cwq60tre5j],
    .suggestions-dropdown[b-cwq60tre5j] {
        background: #1e293b;
        border-color: #374151;
    }
    
    .search-input[b-cwq60tre5j] {
        background: #0f172a;
        border-color: #374151;
        color: #f1f5f9;
    }
    
    .search-input:focus[b-cwq60tre5j] {
        background: #1e293b;
        border-color: #10b981;
    }
    
    .suggestion-item:hover[b-cwq60tre5j] {
        background: #374151;
    }
    
    .filter-chip[b-cwq60tre5j] {
        background: #374151;
        border-color: #4b5563;
        color: #f1f5f9;
    }
    
    .filter-chip:hover[b-cwq60tre5j] {
        background: #4b5563;
    }
    
    .filters-header[b-cwq60tre5j] {
        background: #0f172a;
        border-color: #374151;
    }
    
    .filters-header h3[b-cwq60tre5j] {
        color: #f1f5f9;
    }
    
    .filter-label[b-cwq60tre5j] {
        color: #e5e7eb;
    }
    
    .filters-actions[b-cwq60tre5j] {
        background: #0f172a;
        border-color: #374151;
    }
}
/* _content/AgriConnect.BlazorApp/Components/Shared/AgriLogo.razor.rz.scp.css */
.agri-logo[b-gwrd7pnj63] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.logo-image[b-gwrd7pnj63] {
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Size variants */
.agri-logo.small .logo-image[b-gwrd7pnj63] {
    height: 30px;
    width: auto;
}

.agri-logo.medium .logo-image[b-gwrd7pnj63] {
    height: 45px;
    width: auto;
}

.agri-logo.large .logo-image[b-gwrd7pnj63] {
    height: 60px;
    width: auto;
}

/* Text styles */
.logo-text[b-gwrd7pnj63] {
    font-weight: 700;
  color: #059669;
    transition: color 0.3s ease;
}

.agri-logo.small .logo-text[b-gwrd7pnj63] {
    font-size: 1.125rem;
}

.agri-logo.medium .logo-text[b-gwrd7pnj63] {
    font-size: 1.5rem;
}

.agri-logo.large .logo-text[b-gwrd7pnj63] {
    font-size: 2rem;
}

/* Hover effect */
.agri-logo:hover .logo-image[b-gwrd7pnj63] {
    transform: scale(1.05);
}

.agri-logo:hover .logo-text[b-gwrd7pnj63] {
    color: #10b981;
}

/* Responsive */
@media (max-width: 768px) {
    .agri-logo.large .logo-image[b-gwrd7pnj63] {
      height: 45px;
    }

    .agri-logo.large .logo-text[b-gwrd7pnj63] {
        font-size: 1.5rem;
    }
}
/* _content/AgriConnect.BlazorApp/Pages/Admin/EmailOutbox.razor.rz.scp.css */
.admin-page[b-saodz3op3y] {
    padding: 2rem;
}

.page-header[b-saodz3op3y] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-content h1[b-saodz3op3y] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-content p[b-saodz3op3y] {
    color: #6b7280;
    margin: 0.25rem 0 0 0;
}

.header-actions[b-saodz3op3y] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Stats */
.stats-grid[b-saodz3op3y] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-saodz3op3y] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.stat-icon[b-saodz3op3y] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.stat-icon.total[b-saodz3op3y] {
    background: #dbeafe;
    color: #2563eb;
}

.stat-icon.success[b-saodz3op3y] {
    background: #dcfce7;
    color: #22c55e;
}

.stat-icon.month[b-saodz3op3y] {
    background: #d1fae5;
    color: #10b981;
}

.stat-icon.failed[b-saodz3op3y] {
    background: #fee2e2;
    color: #ef4444;
}

.stat-icon.pending[b-saodz3op3y] {
    background: #fef3c7;
    color: #f59e0b;
}

.stat-info[b-saodz3op3y] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-saodz3op3y] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
}

.stat-label[b-saodz3op3y] {
    font-size: 0.875rem;
    color: #6b7280;
}

/* Filters */
.filters-section[b-saodz3op3y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.search-box[b-saodz3op3y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    min-width: 280px;
}

.search-box input[b-saodz3op3y] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 0.875rem;
}

.filter-group[b-saodz3op3y] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.filter-group select[b-saodz3op3y] {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: white;
    font-size: 0.875rem;
    cursor: pointer;
}

/* Table */
.table-section[b-saodz3op3y] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
}

.data-table[b-saodz3op3y] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-saodz3op3y],
.data-table td[b-saodz3op3y] {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.data-table th[b-saodz3op3y] {
    background: #f9fafb;
    font-weight: 600;
    color: #374151;
    font-size: 0.875rem;
}

.data-table td[b-saodz3op3y] {
    font-size: 0.875rem;
}

.data-table tbody tr:hover[b-saodz3op3y] {
    background: #f9fafb;
}

.row-failed[b-saodz3op3y] {
    background: #fef2f2;
}

.row-failed:hover[b-saodz3op3y] {
    background: #fee2e2 !important;
}

/* Status badges */
.status-badge[b-saodz3op3y] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.status-badge.status-pending[b-saodz3op3y] {
    background: #fef3c7;
    color: #b45309;
}

.status-badge.status-sending[b-saodz3op3y] {
    background: #dbeafe;
    color: #1d4ed8;
}

.status-badge.status-sent[b-saodz3op3y],
.status-badge.status-delivered[b-saodz3op3y] {
    background: #dcfce7;
    color: #166534;
}

.status-badge.status-opened[b-saodz3op3y],
.status-badge.status-clicked[b-saodz3op3y] {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.status-failed[b-saodz3op3y],
.status-badge.status-rejected[b-saodz3op3y] {
    background: #fee2e2;
    color: #dc2626;
}

.status-badge.status-bounced[b-saodz3op3y],
.status-badge.status-spam[b-saodz3op3y] {
    background: #fed7aa;
    color: #c2410c;
}

.status-badge.status-unsubscribed[b-saodz3op3y] {
    background: #e5e7eb;
    color: #6b7280;
}

/* Cells */
.recipient-cell[b-saodz3op3y] {
    display: flex;
    flex-direction: column;
}

.recipient-email[b-saodz3op3y] {
    font-weight: 500;
    color: #1f2937;
}

.recipient-name[b-saodz3op3y] {
    font-size: 0.75rem;
    color: #6b7280;
}

.subject-cell[b-saodz3op3y] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.subject-text[b-saodz3op3y] {
    color: #1f2937;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.error-hint[b-saodz3op3y] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    color: #ef4444;
    cursor: help;
}

.date-cell[b-saodz3op3y] {
    display: flex;
    flex-direction: column;
}

.date-time[b-saodz3op3y] {
    font-size: 0.75rem;
    color: #6b7280;
}

.type-badge[b-saodz3op3y] {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    background: #eff6ff;
    color: #1e40af;
}

.priority-badge[b-saodz3op3y] {
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.priority-badge.priority-low[b-saodz3op3y] {
    background: #f3f4f6;
    color: #6b7280;
}

.priority-badge.priority-normal[b-saodz3op3y] {
    background: #eff6ff;
    color: #3b82f6;
}

.priority-badge.priority-high[b-saodz3op3y] {
    background: #fed7aa;
    color: #c2410c;
}

.priority-badge.priority-critical[b-saodz3op3y] {
    background: #fee2e2;
    color: #dc2626;
}

.action-buttons[b-saodz3op3y] {
    display: flex;
    gap: 0.25rem;
}

/* Loading / Empty */
.loading-state[b-saodz3op3y],
.empty-state[b-saodz3op3y] {
    text-align: center;
    padding: 4rem;
}

.empty-state h3[b-saodz3op3y] {
    margin: 1rem 0 0.5rem;
    color: #374151;
}

.empty-state p[b-saodz3op3y] {
    color: #6b7280;
    margin: 0;
}

/* Pagination */
.pagination[b-saodz3op3y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-top: 1px solid #e5e7eb;
}

.pagination-info[b-saodz3op3y] {
    font-size: 0.875rem;
    color: #6b7280;
}

.pagination-controls[b-saodz3op3y] {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.875rem;
    color: #374151;
}

/* Detail panel */
.detail-panel[b-saodz3op3y] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.detail-status[b-saodz3op3y] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.retry-count[b-saodz3op3y] {
    font-size: 0.75rem;
    color: #f59e0b;
    background: #fef3c7;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.detail-section[b-saodz3op3y] {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
}

.detail-section h4[b-saodz3op3y] {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-row[b-saodz3op3y] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.detail-row:last-child[b-saodz3op3y] {
    border-bottom: none;
    padding-bottom: 0;
}

.detail-label[b-saodz3op3y] {
    font-size: 0.8125rem;
    color: #6b7280;
    flex-shrink: 0;
    min-width: 80px;
}

.detail-value[b-saodz3op3y] {
    font-size: 0.875rem;
    color: #1f2937;
    text-align: right;
    word-break: break-word;
}

.detail-mono[b-saodz3op3y] {
    font-family: monospace;
    font-size: 0.75rem;
}

.detail-error[b-saodz3op3y] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 1rem;
}

.detail-error h4[b-saodz3op3y] {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: #ef4444;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-error p[b-saodz3op3y] {
    margin: 0;
    font-size: 0.8125rem;
    color: #991b1b;
}

.tag-list[b-saodz3op3y] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.tag[b-saodz3op3y] {
    background: #eff6ff;
    color: #1e40af;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
}

.detail-actions[b-saodz3op3y] {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e5e7eb;
}

/* Responsive */
@media (max-width: 1280px) {
    .stats-grid[b-saodz3op3y] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .stats-grid[b-saodz3op3y] {
        grid-template-columns: repeat(2, 1fr);
    }

    .subject-text[b-saodz3op3y] {
        max-width: 200px;
    }
}

@media (max-width: 768px) {
    .admin-page[b-saodz3op3y] {
        padding: 1rem;
    }

    .stats-grid[b-saodz3op3y] {
        grid-template-columns: 1fr;
    }

    .filters-section[b-saodz3op3y] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box[b-saodz3op3y] {
        min-width: auto;
    }

    .filter-group[b-saodz3op3y] {
        flex-wrap: wrap;
    }

    .data-table[b-saodz3op3y] {
        font-size: 0.75rem;
    }

    .data-table th[b-saodz3op3y],
    .data-table td[b-saodz3op3y] {
        padding: 0.75rem 0.5rem;
    }

    .subject-text[b-saodz3op3y] {
        max-width: 140px;
    }

    .pagination[b-saodz3op3y] {
        flex-direction: column;
        gap: 0.75rem;
    }
}
/* _content/AgriConnect.BlazorApp/Pages/Admin/Transactions.razor.rz.scp.css */
.admin-page[b-8xhh9ffwb0] {
    padding: 2rem;
}

.page-header[b-8xhh9ffwb0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-content h1[b-8xhh9ffwb0] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-content p[b-8xhh9ffwb0] {
    color: #6b7280;
    margin: 0.25rem 0 0 0;
}

.header-actions[b-8xhh9ffwb0] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.stats-grid[b-8xhh9ffwb0] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-8xhh9ffwb0] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.stat-icon[b-8xhh9ffwb0] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.stat-icon.total[b-8xhh9ffwb0] {
    background: #dcfce7;
    color: #22c55e;
}

.stat-icon.month[b-8xhh9ffwb0] {
    background: #fef3c7;
    color: #f59e0b;
}

.stat-icon.success[b-8xhh9ffwb0] {
    background: #dbeafe;
    color: #2563eb;
}

.stat-icon.pending[b-8xhh9ffwb0] {
    background: #fce7f3;
    color: #ec4899;
}

.stat-value[b-8xhh9ffwb0] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
}

.stat-label[b-8xhh9ffwb0] {
    font-size: 0.875rem;
    color: #6b7280;
}

.stat-info[b-8xhh9ffwb0] {
    display: flex;
    flex-direction: column;
}

.filters-section[b-8xhh9ffwb0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.search-box[b-8xhh9ffwb0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    min-width: 280px;
}

.search-box input[b-8xhh9ffwb0] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 0.875rem;
}

.filter-group[b-8xhh9ffwb0] {
    display: flex;
    gap: 0.5rem;
}

.filter-group select[b-8xhh9ffwb0] {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: white;
    font-size: 0.875rem;
    cursor: pointer;
}

.table-section[b-8xhh9ffwb0] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
}

.data-table[b-8xhh9ffwb0] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-8xhh9ffwb0],
.data-table td[b-8xhh9ffwb0] {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.data-table th[b-8xhh9ffwb0] {
    background: #f9fafb;
    font-weight: 600;
    color: #374151;
    font-size: 0.875rem;
}

.data-table td[b-8xhh9ffwb0] {
    font-size: 0.875rem;
}

.data-table code[b-8xhh9ffwb0] {
    background: #f3f4f6;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

.user-cell[b-8xhh9ffwb0] {
    display: flex;
    flex-direction: column;
}

.user-name[b-8xhh9ffwb0] {
    font-weight: 500;
    color: #1f2937;
}

.listing-title[b-8xhh9ffwb0] {
    font-size: 0.75rem;
    color: #6b7280;
}

.type-badge[b-8xhh9ffwb0],
.status-badge[b-8xhh9ffwb0] {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: capitalize;
}

.type-badge.payment[b-8xhh9ffwb0] {
    background: #dbeafe;
    color: #1d4ed8;
}

.type-badge.refund[b-8xhh9ffwb0] {
    background: #fef3c7;
    color: #b45309;
}

.status-badge.completed[b-8xhh9ffwb0] {
    background: #dcfce7;
    color: #166534;
}

.status-badge.pending[b-8xhh9ffwb0] {
    background: #fef3c7;
    color: #b45309;
}

.status-badge.failed[b-8xhh9ffwb0] {
    background: #fee2e2;
    color: #dc2626;
}

.text-success[b-8xhh9ffwb0] {
    color: #16a34a;
    font-weight: 600;
}

.text-danger[b-8xhh9ffwb0] {
    color: #dc2626;
    font-weight: 600;
}

.action-buttons[b-8xhh9ffwb0] {
    display: flex;
    gap: 0.25rem;
}

.loading-state[b-8xhh9ffwb0],
.empty-state[b-8xhh9ffwb0] {
    text-align: center;
    padding: 4rem;
}

.empty-state h3[b-8xhh9ffwb0] {
    margin: 1rem 0 0.5rem;
    color: #374151;
}

.empty-state p[b-8xhh9ffwb0] {
    color: #6b7280;
    margin: 0;
}

.pagination[b-8xhh9ffwb0] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-top: 1px solid #e5e7eb;
}

@media (max-width: 1024px) {
    .stats-grid[b-8xhh9ffwb0] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .admin-page[b-8xhh9ffwb0] {
        padding: 1rem;
    }

    .stats-grid[b-8xhh9ffwb0] {
        grid-template-columns: 1fr;
    }

    .filters-section[b-8xhh9ffwb0] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box[b-8xhh9ffwb0] {
        min-width: auto;
    }

    .filter-group[b-8xhh9ffwb0] {
        flex-wrap: wrap;
    }

    .data-table[b-8xhh9ffwb0] {
        font-size: 0.75rem;
    }

    .data-table th[b-8xhh9ffwb0],
    .data-table td[b-8xhh9ffwb0] {
        padding: 0.75rem 0.5rem;
    }
}
/* _content/AgriConnect.BlazorApp/Pages/Browse.razor.rz.scp.css */
/* Browse.razor.css - Clean, Modern Browse Page */

/* === Page Layout === */
.browse-page[b-zkmap8chdn] {
    min-height: 100vh;
    background: var(--bit-clr-bg-sec);
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* === Hero Section === */
.search-hero[b-zkmap8chdn] {
    background: linear-gradient(135deg, #166534 0%, #22c55e 100%);
    padding: 2.5rem 1.5rem;
    color: white;
    text-align: center;
}

.hero-inner[b-zkmap8chdn] {
    max-width: 680px;
    margin: 0 auto;
}

.hero-inner h1[b-zkmap8chdn] {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
}

.hero-inner p[b-zkmap8chdn] {
    font-size: 1rem;
    opacity: 0.9;
    margin: 0 0 1.5rem;
}

.search-container[b-zkmap8chdn] {
    display: flex;
    gap: 0.5rem;
    background: white;
    padding: 0.5rem;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    margin-bottom: 1rem;
}

.search-container[b-zkmap8chdn]  .search-input {
    flex: 1;
}

.search-container[b-zkmap8chdn]  .search-btn {
    flex-shrink: 0;
}

/* Hero Search Box Styles */
.hero-search[b-zkmap8chdn] {
    max-width: 700px;
    margin: 0 auto;
    width: 100%;
}

.search-box-large[b-zkmap8chdn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    padding: 0.5rem;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    width: 100%;
}

.search-box-large .search-icon[b-zkmap8chdn] {
    padding: 0 0.75rem;
    color: #9ca3af;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.search-box-large .search-input[b-zkmap8chdn] {
    flex: 1;
    min-width: 0;
}

.search-box-large .search-input[b-zkmap8chdn]  input,
.search-box-large[b-zkmap8chdn]  .bit-txt-fld input {
    border: none !important;
    font-size: 1rem;
    padding: 0.75rem 0.5rem;
    background: transparent;
}

.search-box-large .search-input[b-zkmap8chdn]  input:focus,
.search-box-large[b-zkmap8chdn]  .bit-txt-fld input:focus {
    outline: none;
    box-shadow: none;
}

.search-box-large .search-btn[b-zkmap8chdn] {
    flex-shrink: 0;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 8px;
}

.category-chips[b-zkmap8chdn] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

/* === Main Layout === */
.browse-layout[b-zkmap8chdn] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* Browse Content - Flex layout for sidebar + products */
.browse-content[b-zkmap8chdn] {
    display: flex;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* === Filters Panel === */
.filters-panel[b-zkmap8chdn],
.filters-sidebar[b-zkmap8chdn] {
    background: var(--bit-clr-bg-pri, white);
    border-radius: 12px;
    padding: 1.25rem;
    height: fit-content;
    position: sticky;
    top: 80px;
    border: 1px solid var(--bit-clr-brd-pri, #e5e7eb);
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    flex-shrink: 0;
}

/* Products Area - Takes remaining space */
.products-area[b-zkmap8chdn] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Products Toolbar - Contains filter btn, results, sort, view toggle */
.products-toolbar[b-zkmap8chdn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bit-clr-bg-pri, white);
    border: 1px solid var(--bit-clr-brd-pri, #e5e7eb);
    border-radius: 10px;
}

.toolbar-left[b-zkmap8chdn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.toolbar-right[b-zkmap8chdn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* View Toggle - Positioned properly */
.view-toggle[b-zkmap8chdn] {
    display: flex;
    gap: 0.125rem;
    border: 1px solid var(--bit-clr-brd-pri, #e5e7eb);
    border-radius: 8px;
    padding: 0.125rem;
    background: var(--bit-clr-bg-sec, #f9fafb);
}

.view-toggle[b-zkmap8chdn]  .bit-btn {
    min-width: 36px;
    min-height: 36px;
}

/* Results Count */
.results-count[b-zkmap8chdn] {
    font-size: 0.9375rem;
    color: var(--bit-clr-fg-sec, #6b7280);
    white-space: nowrap;
}

/* Sort Dropdown */
.sort-dropdown[b-zkmap8chdn] {
    min-width: 140px;
}

/* Filter Count Badge */
.filter-count[b-zkmap8chdn] {
    background: #059669;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    margin-left: 6px;
}

/* Desktop: Show close button only on mobile */
.close-filters[b-zkmap8chdn] {
    display: none !important;
}

/* Desktop: Hide mobile filter button */
.mobile-filter-btn[b-zkmap8chdn] {
    display: none !important;
}

.filters-header[b-zkmap8chdn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--bit-clr-brd-pri);
}

.filters-header h3[b-zkmap8chdn] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.header-actions[b-zkmap8chdn] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.filters-panel[b-zkmap8chdn]  .close-btn {
    display: none;
}

.filters-body[b-zkmap8chdn] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.filter-group[b-zkmap8chdn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-label[b-zkmap8chdn] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bit-clr-fg-sec);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-select[b-zkmap8chdn] {
    width: 100%;
    padding: 0.625rem;
    border: 1px solid var(--bit-clr-brd-pri);
    border-radius: 6px;
    font-size: 0.875rem;
    background: var(--bit-clr-bg-pri);
    color: var(--bit-clr-fg-pri);
}

.filter-select:focus[b-zkmap8chdn] {
    outline: none;
    border-color: var(--bit-clr-pri-main);
}

.price-range[b-zkmap8chdn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.price-input[b-zkmap8chdn] {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--bit-clr-brd-pri);
    border-radius: 6px;
    font-size: 0.875rem;
    background: var(--bit-clr-bg-pri);
    color: var(--bit-clr-fg-pri);
}

.price-input:focus[b-zkmap8chdn] {
    outline: none;
    border-color: var(--bit-clr-pri-main);
}

.range-sep[b-zkmap8chdn] {
    color: var(--bit-clr-fg-ter);
}

/* === Products Section === */
.products-section[b-zkmap8chdn] {
    min-width: 0;
}

.toolbar[b-zkmap8chdn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.toolbar-left[b-zkmap8chdn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.toolbar-left[b-zkmap8chdn]  .filter-toggle-btn {
    display: none;
}

.result-count[b-zkmap8chdn] {
    font-size: 0.875rem;
    color: var(--bit-clr-fg-sec);
}

.toolbar-right[b-zkmap8chdn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sort-select[b-zkmap8chdn] {
    padding: 0.5rem 1rem;
    border: 1px solid var(--bit-clr-brd-pri);
    border-radius: 6px;
    font-size: 0.875rem;
    background: var(--bit-clr-bg-pri);
    color: var(--bit-clr-fg-pri);
}

.view-toggle[b-zkmap8chdn] {
    display: flex;
    border: 1px solid var(--bit-clr-brd-pri);
    border-radius: 6px;
    overflow: visible;
}

/* === Active Tags === */
.active-tags[b-zkmap8chdn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* === Mobile Apply Filters Button === */
.mobile-apply-filters[b-zkmap8chdn] {
    display: none;
}

@media (max-width: 768px) {
    .mobile-apply-filters[b-zkmap8chdn] {
        display: block;
        position: sticky;
        bottom: 0;
        background: white;
        padding: 1rem;
        margin: 1rem -1rem -1rem;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .mobile-apply-filters[b-zkmap8chdn] {
            padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        }
    }
}

.tag[b-zkmap8chdn] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--bit-clr-bg-sec);
    color: var(--bit-clr-fg-pri);
    border-radius: 16px;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color 0.15s;
}

.tag:hover[b-zkmap8chdn] {
    background: var(--bit-clr-brd-pri);
}

.tag i[b-zkmap8chdn] {
    font-size: 0.75rem;
    opacity: 0.7;
}

.tag.organic[b-zkmap8chdn] {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.tag.featured[b-zkmap8chdn] {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.tag.verified[b-zkmap8chdn] {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
}

/* === Product Grid === */
.products-grid[b-zkmap8chdn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.products-grid.list-view[b-zkmap8chdn] {
    grid-template-columns: 1fr;
}

.products-grid.list-view .product-card[b-zkmap8chdn] {
    display: grid;
    grid-template-columns: 200px 1fr;
}

.products-grid.list-view .card-media[b-zkmap8chdn] {
    height: 100%;
    min-height: 180px;
}

/* === Product Card === */
.product-card[b-zkmap8chdn] {
    background: var(--bit-clr-bg-pri);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--bit-clr-brd-pri);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.product-card:hover[b-zkmap8chdn] {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    border-color: var(--bit-clr-pri-main);
}

.product-card.skeleton[b-zkmap8chdn] {
    cursor: default;
}

.product-card.skeleton:hover[b-zkmap8chdn] {
    transform: none;
    box-shadow: none;
}

.card-media[b-zkmap8chdn] {
    position: relative;
    height: 180px;
    background: var(--bit-clr-bg-sec);
    overflow: hidden;
}

.card-media img[b-zkmap8chdn] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.product-card:hover .card-media img[b-zkmap8chdn] {
    transform: scale(1.05);
}

.card-media .no-image[b-zkmap8chdn] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bit-clr-fg-ter);
    font-size: 2rem;
}

.card-badges[b-zkmap8chdn] {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 6px;
}

.badge[b-zkmap8chdn] {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge.organic[b-zkmap8chdn] {
    background: #22c55e;
    color: white;
}

.badge.featured[b-zkmap8chdn] {
    background: #f59e0b;
    color: white;
}

.card-body[b-zkmap8chdn] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.category-label[b-zkmap8chdn] {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--bit-clr-pri-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-body .title[b-zkmap8chdn] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bit-clr-fg-pri);
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.price-row[b-zkmap8chdn] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.price-row .price[b-zkmap8chdn] {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--bit-clr-pri-main);
}

.price-row .unit[b-zkmap8chdn] {
    font-size: 0.8125rem;
    color: var(--bit-clr-fg-sec);
}

.seller-row[b-zkmap8chdn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.seller-row .location[b-zkmap8chdn] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--bit-clr-fg-ter);
}

.card-actions[b-zkmap8chdn] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.card-actions[b-zkmap8chdn]  .bit-btn {
    flex: 1;
}

/* === Empty State === */
.empty-state[b-zkmap8chdn] {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--bit-clr-bg-pri);
    border-radius: 12px;
    border: 1px solid var(--bit-clr-brd-pri);
}

.empty-state i[b-zkmap8chdn] {
    font-size: 4rem;
    color: var(--bit-clr-fg-ter);
    opacity: 0.5;
}

.empty-state h3[b-zkmap8chdn] {
    font-size: 1.25rem;
    margin: 1rem 0 0.5rem;
    color: var(--bit-clr-fg-pri);
}

.empty-state p[b-zkmap8chdn] {
    color: var(--bit-clr-fg-sec);
    margin: 0 0 1.5rem;
}

/* === Pagination === */
.pagination[b-zkmap8chdn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1rem 0;
}

.page-info[b-zkmap8chdn] {
    font-size: 0.875rem;
    color: var(--bit-clr-fg-sec);
}

/* === Responsive === */

/* ==================== TABLET (max-width: 1024px) ==================== */
@media (max-width: 1024px) {
    .browse-layout[b-zkmap8chdn] {
        grid-template-columns: 1fr;
    }
    
    /* Hide sidebar on tablet - show mobile filter button instead */
    .filters-sidebar[b-zkmap8chdn] {
        display: none;
    }
    
    /* Show mobile filter button on tablet */
    .mobile-filter-btn[b-zkmap8chdn] {
        display: flex !important;
    }

    .filters-panel[b-zkmap8chdn] {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1000;
        border-radius: 0;
        overflow-y: auto;
        padding: 1.5rem;
    }

    .filters-panel.open[b-zkmap8chdn] {
        display: block;
    }

    .filters-panel[b-zkmap8chdn]  .close-btn {
        display: flex;
    }

    .toolbar-left[b-zkmap8chdn]  .filter-toggle-btn {
        display: flex;
    }
    
    /* Products Grid - 2 columns on tablet */
    .products-grid[b-zkmap8chdn] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* ==================== MOBILE LANDSCAPE (max-width: 768px) ==================== */
@media (max-width: 768px) {
    /* Hero Section - Compact on mobile */
    .browse-hero[b-zkmap8chdn] {
        padding: 1.5rem 1rem;
    }
    
    .hero-content[b-zkmap8chdn] {
        max-width: 100%;
    }
    
    .hero-title[b-zkmap8chdn] {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .hero-subtitle[b-zkmap8chdn] {
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }
    
    /* Search Box - Stack on mobile */
    .hero-search[b-zkmap8chdn] {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    
    .search-box-large[b-zkmap8chdn] {
        flex-direction: column !important;
        gap: 0.75rem;
        padding: 1rem;
        background: white;
        border-radius: 12px;
        align-items: stretch !important;
    }
    
    /* Hide search icon on mobile */
    .search-box-large .search-icon[b-zkmap8chdn] {
        display: none !important;
    }
    
    /* Search Input - Full width on mobile */
    .search-box-large .search-input[b-zkmap8chdn] {
        width: 100% !important;
        flex: none !important;
    }
    
    .search-box-large .search-input[b-zkmap8chdn]  input,
    .search-box-large[b-zkmap8chdn]  .bit-txt-fld,
    .search-box-large[b-zkmap8chdn]  .bit-txt-fld input {
        width: 100% !important;
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 0.875rem 1rem !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }
    
    /* Search Button - Full width on mobile */
    .search-box-large .search-btn[b-zkmap8chdn] {
        width: 100% !important;
        min-height: 48px !important;
        flex: none !important;
    }
    
    /* Quick Categories - Horizontal scroll on mobile */
    .quick-categories[b-zkmap8chdn] {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 0.5rem;
        padding: 0.75rem 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .quick-categories[b-zkmap8chdn]::-webkit-scrollbar {
        display: none;
    }
    
    .quick-categories .quick-label[b-zkmap8chdn] {
        flex-shrink: 0;
    }
    
    .quick-categories[b-zkmap8chdn]  .bit-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }
    
    /* Main Content Layout */
    .browse-content[b-zkmap8chdn] {
        flex-direction: column;
        padding: 0.75rem;
        gap: 0.75rem;
    }
    
    /* Filters Sidebar - Full screen overlay on mobile */
    .filters-sidebar[b-zkmap8chdn] {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background: white;
        overflow-y: auto;
        padding: 1rem;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .filters-sidebar.show[b-zkmap8chdn] {
        display: block;
        transform: translateX(0);
    }
    
    .filters-header[b-zkmap8chdn] {
        position: sticky;
        top: 0;
        background: white;
        padding: 0.75rem 0 1rem;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid #e5e7eb;
        z-index: 10;
    }
    
    .filters-header h3[b-zkmap8chdn] {
        font-size: 1.125rem;
    }
    
    .close-filters[b-zkmap8chdn] {
        display: flex !important;
    }
    
    .filter-section[b-zkmap8chdn] {
        padding: 1rem 0;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .filter-title[b-zkmap8chdn] {
        font-size: 0.875rem;
        margin-bottom: 0.75rem;
    }
    
    /* Price inputs - Full width on mobile */
    .price-inputs[b-zkmap8chdn] {
        flex-direction: row;
        gap: 0.5rem;
    }
    
    .price-inputs[b-zkmap8chdn]  .price-input {
        flex: 1;
        min-width: 0;
    }
    
    /* Products Area */
    .products-area[b-zkmap8chdn] {
        width: 100%;
        min-width: 0;
    }
    
    /* Products Toolbar - Stack on mobile */
    .products-toolbar[b-zkmap8chdn] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 0.75rem;
    }
    
    .toolbar-left[b-zkmap8chdn] {
        width: 100%;
        justify-content: space-between;
    }
    
    .toolbar-right[b-zkmap8chdn] {
        width: 100%;
        justify-content: space-between;
    }
    
    /* Mobile Filter Button */
    .mobile-filter-btn[b-zkmap8chdn] {
        display: flex !important;
        min-height: 44px;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        font-weight: 600;
    }
    
    /* Sort Dropdown - Flex grow */
    .sort-dropdown[b-zkmap8chdn] {
        flex: 1;
        min-width: 0;
    }
    
    /* View Toggle - Compact */
    .view-toggle[b-zkmap8chdn] {
        gap: 0.125rem;
    }
    
    .view-toggle[b-zkmap8chdn]  .bit-btn {
        min-width: 36px;
        min-height: 36px;
    }
    
    /* Active Filters - Horizontal scroll */
    .active-filters[b-zkmap8chdn] {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 0.5rem 0;
        gap: 0.5rem;
        -webkit-overflow-scrolling: touch;
    }
    
    .active-filters[b-zkmap8chdn]  .filter-tag {
        flex-shrink: 0;
        white-space: nowrap;
    }
    
    /* Products Grid - Single column on mobile */
    .products-grid[b-zkmap8chdn] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    /* Product Card - Horizontal layout on mobile */
    .product-card[b-zkmap8chdn] {
        display: grid;
        grid-template-columns: 120px 1fr;
        min-height: 140px;
        border-radius: 10px;
    }
    
    .card-image[b-zkmap8chdn] {
        height: 100%;
        min-height: 140px;
        border-radius: 10px 0 0 10px;
    }
    
    .card-image img[b-zkmap8chdn] {
        height: 100%;
        object-fit: cover;
    }
    
    .card-content[b-zkmap8chdn] {
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-width: 0;
    }
    
    .card-category[b-zkmap8chdn] {
        font-size: 0.625rem;
    }
    
    .card-title[b-zkmap8chdn] {
        font-size: 0.9375rem;
        line-height: 1.3;
        margin: 0.25rem 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .card-price[b-zkmap8chdn] {
        margin: 0.25rem 0;
    }
    
    .card-price .price[b-zkmap8chdn] {
        font-size: 1.125rem;
    }
    
    .card-price .unit[b-zkmap8chdn] {
        font-size: 0.75rem;
    }
    
    .card-seller[b-zkmap8chdn],
    .card-location[b-zkmap8chdn] {
        font-size: 0.75rem;
    }
    
    .seller-avatar[b-zkmap8chdn] {
        width: 24px;
        height: 24px;
        font-size: 0.625rem;
    }
    
    /* Card Actions - Smaller on mobile */
    .card-actions[b-zkmap8chdn] {
        flex-direction: column;
        gap: 0.375rem;
        margin-top: 0.5rem;
    }
    
    .card-actions[b-zkmap8chdn]  .bit-btn {
        font-size: 0.75rem;
        min-height: 36px;
        padding: 0.375rem 0.75rem;
    }
    
    /* Card Badges - Smaller on mobile */
    .card-badges[b-zkmap8chdn] {
        top: 6px;
        left: 6px;
        gap: 4px;
    }
    
    .badge[b-zkmap8chdn] {
        font-size: 0.5rem;
        padding: 2px 6px;
    }
    
    /* Favorite Button - Touch-friendly */
    .favorite-btn[b-zkmap8chdn] {
        width: 36px;
        height: 36px;
        top: 6px;
        right: 6px;
    }
    
    /* Empty State - Compact */
    .empty-state[b-zkmap8chdn] {
        padding: 2rem 1rem;
    }
    
    .empty-state h3[b-zkmap8chdn] {
        font-size: 1.125rem;
    }
    
    /* List View - Stack on mobile */
    .products-grid.list-view .product-card[b-zkmap8chdn] {
        grid-template-columns: 1fr;
    }
    
    .products-grid.list-view .card-image[b-zkmap8chdn] {
        height: 160px;
        border-radius: 10px 10px 0 0;
    }
}

/* ==================== MOBILE PORTRAIT (max-width: 480px) ==================== */
@media (max-width: 480px) {
    .browse-hero[b-zkmap8chdn] {
        padding: 1.25rem 0.75rem;
    }
    
    .hero-title[b-zkmap8chdn] {
        font-size: 1.25rem;
    }
    
    .hero-subtitle[b-zkmap8chdn] {
        font-size: 0.8125rem;
    }
    
    .search-box-large[b-zkmap8chdn] {
        padding: 0.75rem;
        border-radius: 10px;
    }
    
    .browse-content[b-zkmap8chdn] {
        padding: 0.5rem;
    }
    
    /* Product Card - Even more compact */
    .product-card[b-zkmap8chdn] {
        grid-template-columns: 100px 1fr;
        min-height: 120px;
    }
    
    .card-image[b-zkmap8chdn] {
        min-height: 120px;
    }
    
    .card-content[b-zkmap8chdn] {
        padding: 0.625rem;
    }
    
    .card-title[b-zkmap8chdn] {
        font-size: 0.875rem;
    }
    
    .card-price .price[b-zkmap8chdn] {
        font-size: 1rem;
    }
    
    /* Results Header */
    .results-count[b-zkmap8chdn] {
        font-size: 0.8125rem;
    }
    
    /* Hide some elements on very small screens */
    .card-seller .seller-name[b-zkmap8chdn] {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ==================== SAFE AREA INSETS (Notched devices) ==================== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .filters-sidebar[b-zkmap8chdn] {
            padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        }
    }
}

/* ==================== TOUCH DEVICE IMPROVEMENTS ==================== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .product-card[b-zkmap8chdn] {
        cursor: pointer;
    }
    
    /* Disable hover effects */
    .product-card:hover[b-zkmap8chdn] {
        transform: none;
        box-shadow: none;
    }
    
    .product-card:active[b-zkmap8chdn] {
        transform: scale(0.98);
        background: #f9fafb;
    }
    
    .product-card:hover .card-media img[b-zkmap8chdn],
    .product-card:hover .card-image img[b-zkmap8chdn] {
        transform: none;
    }
    
    /* Filter tags - larger touch targets */
    .filter-tag[b-zkmap8chdn],
    .tag[b-zkmap8chdn] {
        min-height: 36px;
        padding: 0.5rem 0.875rem;
    }
    
    .quick-categories[b-zkmap8chdn]  .bit-btn {
        min-height: 40px;
        padding: 0.5rem 1rem;
    }
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
    .product-card[b-zkmap8chdn],
    .card-media img[b-zkmap8chdn],
    .card-image img[b-zkmap8chdn],
    .filters-sidebar[b-zkmap8chdn] {
        transition: none;
    }

    .product-card:hover[b-zkmap8chdn] {
        transform: none;
    }

    .product-card:hover .card-media img[b-zkmap8chdn],
    .product-card:hover .card-image img[b-zkmap8chdn] {
        transform: none;
    }
}
/* _content/AgriConnect.BlazorApp/Pages/BuyerProfile.razor.rz.scp.css */
/* Buyer Profile Styles - Complete Styling */

/* Loading & Error States */
.loading-container[b-5h4ejmxlnk],
.error-container[b-5h4ejmxlnk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1.5rem;
}

.error-container h2[b-5h4ejmxlnk] {
    color: #ef4444;
    margin: 0;
}

.error-container p[b-5h4ejmxlnk] {
    color: #6b7280;
    margin: 0;
}

/* Main Profile Container */
.buyer-profile[b-5h4ejmxlnk] {
    background: #f8fafc;
    min-height: 100vh;
}

/* Profile Hero - Compact */
.profile-hero[b-5h4ejmxlnk] {
    position: relative;
    margin-bottom: 1rem;
}

.cover-image[b-5h4ejmxlnk] {
    height: 140px;
    background-size: cover;
    background-position: center;
    background-color: #2563eb;
    background-image: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
    position: relative;
}

.cover-image[b-5h4ejmxlnk]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
}

.verification-badge[b-5h4ejmxlnk] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    padding: 0.35rem 0.75rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
    z-index: 10;
}

.profile-header-content[b-5h4ejmxlnk] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-top: -50px;
}

.profile-avatar-section[b-5h4ejmxlnk] {
    position: relative;
    flex-shrink: 0;
}

.profile-avatar[b-5h4ejmxlnk] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    object-fit: cover;
    background: white;
}

.profile-info[b-5h4ejmxlnk] {
    flex: 1;
    background: white;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-top: 0;
}

.buyer-name[b-5h4ejmxlnk] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.125rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.3;
}

.verified-icon[b-5h4ejmxlnk] {
    color: #22c55e;
    font-size: 1.125rem;
}

.member-type[b-5h4ejmxlnk] {
    font-size: 0.9375rem;
    color: #3b82f6;
    font-weight: 600;
    margin: 0 0 0.375rem;
}

.location[b-5h4ejmxlnk] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #6b7280;
    font-size: 0.8125rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

/* Quick Stats - Compact */
.quick-stats[b-5h4ejmxlnk] {
    display: flex;
    gap: 1.5rem;
    margin: 0.75rem 0;
    flex-wrap: wrap;
}

.stat[b-5h4ejmxlnk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stat i[b-5h4ejmxlnk],
.stat[b-5h4ejmxlnk]  .bit-icon {
    color: #3b82f6;
    font-size: 1rem;
}

.stat .value[b-5h4ejmxlnk] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1f2937;
}

.stat .label[b-5h4ejmxlnk] {
    font-size: 0.75rem;
    color: #6b7280;
    margin-left: -0.125rem;
}

/* Profile Actions - Compact */
.profile-actions[b-5h4ejmxlnk] {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
}

/* Subscription Badge - Compact */
.subscription-badge[b-5h4ejmxlnk] {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.35rem 0.75rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.subscription-badge.free[b-5h4ejmxlnk] {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    color: white;
}

.subscription-badge.standard[b-5h4ejmxlnk] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.subscription-badge.premium[b-5h4ejmxlnk] {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
}

/* Profile Content */
.profile-content[b-5h4ejmxlnk] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    margin-top: 1rem;
}

/* About Section */
.about-section[b-5h4ejmxlnk] {
    padding: 1rem 0;
}

.about-section h2[b-5h4ejmxlnk] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 1rem;
}

.bio[b-5h4ejmxlnk] {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: #4b5563;
    margin-bottom: 2rem;
}

.bio-empty[b-5h4ejmxlnk] {
    color: #9ca3af;
    font-style: italic;
    margin-bottom: 2rem;
}

/* Interest Tags */
.interests-section[b-5h4ejmxlnk] {
    margin: 2rem 0;
}

.interests-section h3[b-5h4ejmxlnk] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 1rem;
}

.interest-tags[b-5h4ejmxlnk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Member Info */
.member-info[b-5h4ejmxlnk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.info-item[b-5h4ejmxlnk] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.info-item:hover[b-5h4ejmxlnk] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.info-item i[b-5h4ejmxlnk],
.info-item[b-5h4ejmxlnk]  .bit-icon {
    color: #3b82f6;
    font-size: 1.5rem;
    margin-top: 0.25rem;
}

.info-item div[b-5h4ejmxlnk] {
    flex: 1;
}

.info-item strong[b-5h4ejmxlnk] {
    display: block;
    color: #1f2937;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.info-item p[b-5h4ejmxlnk] {
    color: #6b7280;
    font-size: 0.875rem;
    margin: 0;
}

/* Reviews Section */
.reviews-section[b-5h4ejmxlnk] {
    padding: 1rem 0;
}

.reviews-list[b-5h4ejmxlnk] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.review-card[b-5h4ejmxlnk] {
    background: #f9fafb;
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.review-card:hover[b-5h4ejmxlnk] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.review-header[b-5h4ejmxlnk] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.reviewed-item[b-5h4ejmxlnk] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.reviewed-item strong[b-5h4ejmxlnk] {
    color: #1f2937;
    font-size: 1rem;
}

.reviewed-item .date[b-5h4ejmxlnk] {
    font-size: 0.8125rem;
    color: #6b7280;
}

.review-comment[b-5h4ejmxlnk] {
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
}

.edited-badge[b-5h4ejmxlnk] {
    display: inline-block;
    font-size: 0.75rem;
    color: #6b7280;
    font-style: italic;
    margin-top: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: #e5e7eb;
    border-radius: 4px;
}

/* Favorites Section */
.favorites-section[b-5h4ejmxlnk] {
    padding: 1rem 0;
}

.favorites-grid[b-5h4ejmxlnk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

.favorite-card[b-5h4ejmxlnk] {
    position: relative;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.favorite-card:hover[b-5h4ejmxlnk] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.favorite-card img[b-5h4ejmxlnk] {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.favorite-info[b-5h4ejmxlnk] {
    padding: 1rem;
}

.favorite-info h4[b-5h4ejmxlnk] {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.favorite-info .price[b-5h4ejmxlnk] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #3b82f6;
    margin: 0 0 0.25rem;
}

.favorite-info .location[b-5h4ejmxlnk] {
    font-size: 0.8125rem;
    color: #6b7280;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.favorite-icon[b-5h4ejmxlnk] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    color: #ef4444;
    font-size: 1.25rem;
    background: white;
    border-radius: 50%;
    padding: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Activity Section */
.activity-section[b-5h4ejmxlnk] {
    padding: 1rem 0;
}

.activity-section h2[b-5h4ejmxlnk] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 1.5rem;
}

.metrics-grid[b-5h4ejmxlnk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.metric-card[b-5h4ejmxlnk] {
    background: #f9fafb;
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.metric-card:hover[b-5h4ejmxlnk] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.metric-card i[b-5h4ejmxlnk],
.metric-card[b-5h4ejmxlnk]  .bit-icon {
    font-size: 1.75rem;
    color: #3b82f6;
}

.metric-card div[b-5h4ejmxlnk] {
    display: flex;
    flex-direction: column;
}

.metric-card .value[b-5h4ejmxlnk] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
}

.metric-card .label[b-5h4ejmxlnk] {
    font-size: 0.8125rem;
    color: #6b7280;
}

/* Empty State */
.empty-state[b-5h4ejmxlnk] {
    text-align: center;
    padding: 3rem 2rem;
    color: #6b7280;
}

.empty-state i[b-5h4ejmxlnk],
.empty-state[b-5h4ejmxlnk]  .bit-icon {
    font-size: 3rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.empty-state p[b-5h4ejmxlnk] {
    margin: 0;
    font-size: 1rem;
}

.empty-state .hint[b-5h4ejmxlnk] {
    color: #9ca3af;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .cover-image[b-5h4ejmxlnk] {
        height: 100px;
    }

    .profile-header-content[b-5h4ejmxlnk] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: -40px;
        padding: 0 1rem;
        gap: 0;
    }

    .profile-avatar[b-5h4ejmxlnk] {
        width: 80px;
        height: 80px;
        border-width: 3px;
    }

    .profile-info[b-5h4ejmxlnk] {
        padding: 1rem;
        margin-top: 0.75rem;
        width: 100%;
    }

    .buyer-name[b-5h4ejmxlnk] {
        font-size: 1.25rem;
        justify-content: center;
    }

    .member-type[b-5h4ejmxlnk] {
        font-size: 0.875rem;
    }

    .location[b-5h4ejmxlnk] {
        justify-content: center;
        font-size: 0.75rem;
    }

    .quick-stats[b-5h4ejmxlnk] {
        justify-content: center;
        gap: 1rem;
    }

    .stat[b-5h4ejmxlnk] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .stat .value[b-5h4ejmxlnk] {
        font-size: 1rem;
    }

    .stat .label[b-5h4ejmxlnk] {
        font-size: 0.6875rem;
    }

    .profile-actions[b-5h4ejmxlnk] {
        flex-direction: column;
        width: 100%;
    }

    .profile-actions[b-5h4ejmxlnk]  .bit-btn {
        width: 100%;
    }

    .subscription-badge[b-5h4ejmxlnk] {
        top: 0.5rem;
        left: 0.5rem;
        right: auto;
        padding: 0.25rem 0.5rem;
        font-size: 0.6875rem;
    }

    .verification-badge[b-5h4ejmxlnk] {
        top: 0.5rem;
        right: 0.5rem;
        left: auto;
        padding: 0.25rem 0.5rem;
        font-size: 0.6875rem;
    }

    .favorites-grid[b-5h4ejmxlnk],
    .metrics-grid[b-5h4ejmxlnk] {
        grid-template-columns: 1fr;
    }

    .member-info[b-5h4ejmxlnk] {
        grid-template-columns: 1fr;
    }

    .profile-content[b-5h4ejmxlnk] {
        padding: 0.75rem;
        margin-top: 0.75rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        border-radius: 10px;
    }

    .about-section h2[b-5h4ejmxlnk] {
        font-size: 1.25rem;
    }

    .activity-section h2[b-5h4ejmxlnk] {
        font-size: 1.25rem;
    }

    .review-header[b-5h4ejmxlnk] {
        flex-direction: column;
        align-items: flex-start;
    }

    .favorite-card img[b-5h4ejmxlnk] {
        height: 150px;
    }

    .metric-card[b-5h4ejmxlnk] {
        padding: 1rem;
    }

    .metric-card .value[b-5h4ejmxlnk] {
        font-size: 1.5rem;
    }

    .empty-state[b-5h4ejmxlnk] {
        padding: 2rem 1rem;
    }
}

/* Tablet and up - horizontal layout */
@media (min-width: 769px) {
    .profile-header-content[b-5h4ejmxlnk] {
        align-items: center;
    }
    
    .profile-info[b-5h4ejmxlnk] {
        margin-top: 0.5rem;
    }
}

/* Small mobile */
@media (max-width: 380px) {
    .quick-stats[b-5h4ejmxlnk] {
        gap: 0.75rem;
    }
    
    .stat[b-5h4ejmxlnk] {
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
    }

    .metric-card[b-5h4ejmxlnk] {
        flex-direction: column;
        text-align: center;
        padding: 1rem 0.75rem;
    }

    .favorites-grid[b-5h4ejmxlnk] {
        gap: 1rem;
    }
}
/* _content/AgriConnect.BlazorApp/Pages/CreateListing.razor.rz.scp.css */
.create-listing-page[b-27z4na2hmr] {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--bit-clr-bg-sec) 0%, var(--bit-clr-bg-pri) 100%);
    padding: 2rem 0;
    /* Prevent layout shift */
    will-change: auto;
}

.upgrade-required-card[b-27z4na2hmr] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 3rem 2rem;
    text-align: center;
    /* Add smooth appearance */
    animation: fadeIn-b-27z4na2hmr 0.3s ease-in;
}

@keyframes fadeIn-b-27z4na2hmr {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-icon[b-27z4na2hmr] {
    margin-bottom: 1.5rem;
}

.upgrade-required-card h3[b-27z4na2hmr] {
    color: #2c3e50;
    font-weight: 700;
    margin-bottom: 1rem;
}

.upgrade-required-card .lead[b-27z4na2hmr] {
    color: #6c757d;
    font-size: 1.1rem;
    line-height: 1.6;
}

.upgrade-benefits[b-27z4na2hmr] {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
    text-align: left;
}

.upgrade-benefits h5[b-27z4na2hmr] {
    color: #2c3e50;
    font-weight: 600;
    text-align: center;
}

.benefit-item[b-27z4na2hmr] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 0.95rem;
    color: #495057;
}

.benefit-item i[b-27z4na2hmr] {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.upgrade-actions[b-27z4na2hmr] {
    margin: 2rem 0 1rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.upgrade-actions .btn[b-27z4na2hmr] {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.upgrade-actions .btn:hover[b-27z4na2hmr] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.guarantee-badge[b-27z4na2hmr] {
    background: #d4edda;
    color: #155724;
    padding: 1rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 1.5rem;
}

/* Ensure smooth transitions for content */
.row[b-27z4na2hmr] {
    transition: opacity 0.2s ease;
}

@media (max-width: 768px) {
    .create-listing-page[b-27z4na2hmr] {
        padding: 1rem 0;
    }

    .upgrade-required-card[b-27z4na2hmr] {
        padding: 2rem 1.5rem;
    }

    .upgrade-actions[b-27z4na2hmr] {
        flex-direction: column;
    }

    .upgrade-actions .btn[b-27z4na2hmr] {
        width: 100%;
        margin: 0.5rem 0;
    }
}
/* _content/AgriConnect.BlazorApp/Pages/Dashboard/Index.razor.rz.scp.css */
.dashboard-loading[b-udvrur34xx] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

/* Modern Authentication Required Page */
.auth-required-page[b-udvrur34xx] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-container[b-udvrur34xx] {
    max-width: 1400px;
    width: 100%;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
    background: white;
    border-radius: 24px;
    overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
 min-height: 600px;
}

/* Left Side - Branding */
.auth-branding[b-udvrur34xx] {
    background: linear-gradient(135deg, #166534 0%, #22c55e 100%);
    color: white;
  padding: 4rem 3rem;
    position: relative;
    overflow: hidden;
}

.auth-branding[b-udvrur34xx]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
 width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    pointer-events: none;
}

.branding-content[b-udvrur34xx] {
    position: relative;
    z-index: 1;
}

.brand-logo[b-udvrur34xx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
}

.brand-logo i[b-udvrur34xx] {
    font-size: 2rem;
    color: #bbf7d0;
}

.auth-branding h1[b-udvrur34xx] {
    font-size: 2.5rem;
    font-weight: 800;
 line-height: 1.2;
    margin-bottom: 1rem;
}

.auth-branding .lead[b-udvrur34xx] {
    font-size: 1.125rem;
    opacity: 0.95;
 margin-bottom: 3rem;
    line-height: 1.6;
}

.features-grid[b-udvrur34xx] {
    display: grid;
    gap: 2rem;
}

.feature-item[b-udvrur34xx] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.feature-icon[b-udvrur34xx] {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
 justify-content: center;
  font-size: 1.25rem;
    color: #bbf7d0;
    flex-shrink: 0;
}

.feature-content h4[b-udvrur34xx] {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.feature-content p[b-udvrur34xx] {
    font-size: 0.875rem;
    opacity: 0.9;
    margin: 0;
    line-height: 1.5;
}

/* Right Side - Action */
.auth-action[b-udvrur34xx] {
    padding: 4rem 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
}

.action-content[b-udvrur34xx] {
    width: 100%;
    max-width: 400px;
}

.auth-icon[b-udvrur34xx] {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-radius: 16px;
    display: flex;
align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    color: #2e7d32;
    font-size: 2rem;
}

.auth-action h2[b-udvrur34xx] {
    font-size: 1.875rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.75rem;
  text-align: center;
}

.auth-action p[b-udvrur34xx] {
    color: #6b7280;
    text-align: center;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.action-buttons[b-udvrur34xx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.action-buttons .btn[b-udvrur34xx] {
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.action-buttons .btn-primary[b-udvrur34xx] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.action-buttons .btn-primary:hover[b-udvrur34xx] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
}

.action-buttons .btn-success[b-udvrur34xx] {
    background: white;
    color: #22c55e;
    border: 2px solid #22c55e;
}

.action-buttons .btn-success:hover[b-udvrur34xx] {
    background: #f0fdf4;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}

.divider[b-udvrur34xx] {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
}

.divider[b-udvrur34xx]::before,
.divider[b-udvrur34xx]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.divider span[b-udvrur34xx] {
    padding: 0 1rem;
  color: #9ca3af;
  font-size: 0.875rem;
    font-weight: 500;
}

.trust-indicators[b-udvrur34xx] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

.trust-item[b-udvrur34xx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
  font-size: 0.875rem;
}

.trust-item i[b-udvrur34xx] {
    font-size: 1rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .auth-container[b-udvrur34xx] {
     grid-template-columns: 1fr;
        max-width: 600px;
    }

    .auth-branding[b-udvrur34xx] {
        padding: 3rem 2rem;
    }

    .auth-branding h1[b-udvrur34xx] {
        font-size: 2rem;
    }

    .features-grid[b-udvrur34xx] {
        gap: 1.5rem;
    }

    .auth-action[b-udvrur34xx] {
        padding: 3rem 2rem;
    }
}

@media (max-width: 768px) {
    .auth-required-page[b-udvrur34xx] {
     padding: 1rem;
    }

    .auth-container[b-udvrur34xx] {
        border-radius: 16px;
    }

    .auth-branding[b-udvrur34xx] {
        padding: 2rem 1.5rem;
    }

    .auth-branding h1[b-udvrur34xx] {
        font-size: 1.75rem;
    }

    .auth-branding .lead[b-udvrur34xx] {
  font-size: 1rem;
  }

    .feature-icon[b-udvrur34xx] {
     width: 40px;
   height: 40px;
   font-size: 1rem;
    }

    .feature-content h4[b-udvrur34xx] {
      font-size: 1rem;
    }

    .auth-action[b-udvrur34xx] {
        padding: 2rem 1.5rem;
    }

    .auth-action h2[b-udvrur34xx] {
        font-size: 1.5rem;
    }

    .action-buttons .btn[b-udvrur34xx] {
     padding: 0.875rem 1.25rem;
        font-size: 0.9375rem;
    }
}

/* Old styles kept for compatibility */
.dashboard-unauthorized[b-udvrur34xx] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.unauthorized-content[b-udvrur34xx] {
    text-align: center;
}

.unauthorized-content h1[b-udvrur34xx] {
    color: #667eea;
    margin-bottom: 20px;
    font-size: 28px;
}

.unauthorized-content p[b-udvrur34xx] {
    color: #666;
    margin-bottom: 30px;
    font-size: 16px;
}

.unauthorized-content a[b-udvrur34xx] {
    padding: 10px 20px;
  background: #667eea;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    display: inline-block;
    transition: background 0.3s ease;
}

.unauthorized-content a:hover[b-udvrur34xx] {
    background: #5a6fd8;
}
/* _content/AgriConnect.BlazorApp/Pages/EditListing.razor.rz.scp.css */
/* Edit Listing Page */
.edit-listing-page[b-gnjlpzo5p6] {
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* Loading & Error States */
.loading-container[b-gnjlpzo5p6],
.error-container[b-gnjlpzo5p6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1.5rem;
}

.error-container i[b-gnjlpzo5p6] {
    color: #ef4444;
    font-size: 4rem;
}

.error-message[b-gnjlpzo5p6] {
    font-size: 1.125rem;
    color: #6b7280;
    text-align: center;
    max-width: 500px;
}

/* Page Header */
.page-header[b-gnjlpzo5p6] {
    margin-bottom: 2rem;
}

    .page-header h1[b-gnjlpzo5p6] {
        font-size: 2rem;
        font-weight: 700;
        color: #1f2937;
        margin: 1rem 0;
    }

.edit-info[b-gnjlpzo5p6] {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

/* Form Sections */
.form-section[b-gnjlpzo5p6] {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
}

    .form-section h2[b-gnjlpzo5p6] {
        font-size: 1.5rem;
        font-weight: 600;
        color: #1f2937;
        margin: 0 0 1.5rem;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid #f3f4f6;
    }

/* Form Groups */
.form-group[b-gnjlpzo5p6] {
    margin-bottom: 1.5rem;
}

    .form-group label[b-gnjlpzo5p6] {
        display: block;
        font-weight: 500;
        color: #374151;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
    }

.form-row[b-gnjlpzo5p6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.char-count[b-gnjlpzo5p6] {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.25rem;
    display: block;
}

.help-text[b-gnjlpzo5p6] {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
    display: block;
}

/* Warning Message */
.warning-message[b-gnjlpzo5p6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #92400e;
}

    .warning-message i[b-gnjlpzo5p6] {
        color: #f59e0b;
    }

/* Changes Summary */
.changes-summary[b-gnjlpzo5p6] {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 2px solid #22c55e;
}

.changes-list[b-gnjlpzo5p6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.change-item[b-gnjlpzo5p6] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 8px;
}

    .change-item i[b-gnjlpzo5p6] {
        color: #22c55e;
        font-size: 1.25rem;
        margin-top: 0.25rem;
    }

    .change-item strong[b-gnjlpzo5p6] {
        display: block;
        font-size: 0.875rem;
        color: #374151;
        margin-bottom: 0.5rem;
    }

.change-values[b-gnjlpzo5p6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.old-value[b-gnjlpzo5p6] {
    padding: 0.25rem 0.75rem;
    background: #fee2e2;
    color: #991b1b;
    border-radius: 4px;
    font-size: 0.875rem;
}

.new-value[b-gnjlpzo5p6] {
    padding: 0.25rem 0.75rem;
    background: #dcfce7;
    color: #166534;
    border-radius: 4px;
    font-size: 0.875rem;
}

.change-values i[b-gnjlpzo5p6] {
    color: #9ca3af;
    font-size: 0.875rem;
}

/* Form Actions */
.form-actions[b-gnjlpzo5p6] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .edit-listing-page[b-gnjlpzo5p6] {
        padding: 0 0.5rem;
    }

    .form-section[b-gnjlpzo5p6] {
        padding: 1.5rem;
    }

    .form-row[b-gnjlpzo5p6] {
        grid-template-columns: 1fr;
    }

    .form-actions[b-gnjlpzo5p6] {
        flex-direction: column;
    }

    .edit-info[b-gnjlpzo5p6] {
        flex-direction: column;
    }

    .change-values[b-gnjlpzo5p6] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}
/* _content/AgriConnect.BlazorApp/Pages/EditReview.razor.rz.scp.css */
/* Rating Selector */
.rating-selector[b-5dp2f8fj46] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.star[b-5dp2f8fj46] {
    font-size: 2rem;
    cursor: pointer;
    color: #d1d5db;
    transition: color 0.2s ease, transform 0.2s ease;
    user-select: none;
}

    .star:hover[b-5dp2f8fj46] {
        transform: scale(1.1);
    }

    .star.filled[b-5dp2f8fj46] {
        color: #fbbf24;
    }

.rating-text[b-5dp2f8fj46] {
    font-size: 0.875rem;
    color: #6b7280;
    margin-left: 0.5rem;
}

.edit-review-page[b-5dp2f8fj46] {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* Loading State */
.loading-state[b-5dp2f8fj46] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
}

    .loading-state p[b-5dp2f8fj46] {
        color: #6b7280;
        font-size: 0.9375rem;
    }

/* Cannot Edit Alert */
.cannot-edit-alert[b-5dp2f8fj46] {
    display: flex;
    gap: 1.5rem;
    padding: 2rem;
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border: 2px solid #f87171;
    border-radius: 12px;
    margin: 2rem 0;
}

.alert-icon[b-5dp2f8fj46] {
    width: 64px;
    height: 64px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
}

.alert-content h2[b-5dp2f8fj46] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #991b1b;
    margin: 0 0 0.5rem;
}

.alert-content p[b-5dp2f8fj46] {
    color: #b91c1c;
    margin: 0 0 1.5rem;
}

.alert-actions[b-5dp2f8fj46] {
    display: flex;
    gap: 0.75rem;
}

/* Header */
.page-header[b-5dp2f8fj46] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.header-icon[b-5dp2f8fj46] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
}

.header-content h1[b-5dp2f8fj46] {
    font-size: 2rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.5rem;
}

.header-content p[b-5dp2f8fj46] {
    color: #6b7280;
    font-size: 1rem;
    margin: 0;
}

    .header-content p strong[b-5dp2f8fj46] {
        color: #374151;
    }

    .header-content p em[b-5dp2f8fj46] {
        color: #22c55e;
        font-style: normal;
        font-weight: 500;
    }

/* Edit Info Banner */
.edit-info[b-5dp2f8fj46] {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.info-item[b-5dp2f8fj46] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: #374151;
}

    .info-item i[b-5dp2f8fj46] {
        color: #22c55e;
    }

/* Form Container */
.form-container[b-5dp2f8fj46] {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-top: 1.5rem;
}

.form-section[b-5dp2f8fj46] {
    margin-bottom: 2rem;
}

    .form-section:last-of-type[b-5dp2f8fj46] {
        margin-bottom: 0;
    }

.form-label[b-5dp2f8fj46] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: #374151;
    margin-bottom: 0.75rem;
}

    .form-label i[b-5dp2f8fj46] {
        color: #22c55e;
    }

    .form-label .required[b-5dp2f8fj46] {
        color: #ef4444;
    }

/* Image Upload Grid */
.image-upload-grid[b-5dp2f8fj46] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.image-preview[b-5dp2f8fj46] {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #e5e7eb;
}

    .image-preview img[b-5dp2f8fj46] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .image-preview button[b-5dp2f8fj46] {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        background: rgba(239, 68, 68, 0.9);
        backdrop-filter: blur(4px);
    }

.image-upload-placeholder[b-5dp2f8fj46] {
    position: relative;
    aspect-ratio: 1;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .image-upload-placeholder:hover[b-5dp2f8fj46] {
        border-color: #22c55e;
        background: #f0fdf4;
    }

.file-input[b-5dp2f8fj46] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.upload-content[b-5dp2f8fj46] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    font-size: 0.875rem;
    pointer-events: none;
}

    .upload-content i[b-5dp2f8fj46] {
        font-size: 1.5rem;
        color: #22c55e;
    }

.upgrade-note[b-5dp2f8fj46] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: #fef3c7;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #92400e;
}

    .upgrade-note i[b-5dp2f8fj46] {
        color: #f59e0b;
    }

/* Changes Summary */
.changes-summary[b-5dp2f8fj46] {
    background: linear-gradient(135deg, #e0f2fe, #dbeafe);
    border: 2px solid #3b82f6;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

    .changes-summary h3[b-5dp2f8fj46] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 1rem;
        font-weight: 600;
        color: #1e40af;
        margin: 0 0 1rem;
    }

        .changes-summary h3 i[b-5dp2f8fj46] {
            color: #3b82f6;
        }

    .changes-summary ul[b-5dp2f8fj46] {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .changes-summary li[b-5dp2f8fj46] {
        padding-left: 1.5rem;
        position: relative;
        color: #1e40af;
        font-size: 0.9375rem;
    }

        .changes-summary li[b-5dp2f8fj46]::before {
            content: "?";
            position: absolute;
            left: 0;
            color: #3b82f6;
            font-weight: bold;
        }

/* Form Actions */
.form-actions[b-5dp2f8fj46] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

/* Responsive */
@media (max-width: 768px) {
    .edit-review-page[b-5dp2f8fj46] {
        padding: 0 0.5rem;
    }

    .page-header[b-5dp2f8fj46] {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-container[b-5dp2f8fj46] {
        padding: 1.5rem;
    }

    .form-actions[b-5dp2f8fj46] {
        flex-direction: column-reverse;
    }

        .form-actions button[b-5dp2f8fj46] {
            width: 100%;
        }

    .edit-info[b-5dp2f8fj46] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .image-upload-grid[b-5dp2f8fj46] {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}
/* _content/AgriConnect.BlazorApp/Pages/FarmerProfile.razor.rz.scp.css */
/* Loading & Error States */
.loading-container[b-1c519ai4u2],
.error-container[b-1c519ai4u2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1.5rem;
}

.error-container h2[b-1c519ai4u2] {
    color: #ef4444;
}

/* Main Profile Container */
.farmer-profile[b-1c519ai4u2] {
    background: #f8fafc;
    min-height: 100vh;
}

/* Profile Hero - Compact */
.profile-hero[b-1c519ai4u2] {
    position: relative;
    margin-bottom: 1rem;
}

.cover-image[b-1c519ai4u2] {
    height: 140px;
    background-size: cover;
    background-position: center;
    background-color: #1e3a5f;
    background-image: linear-gradient(135deg, #1e3a5f 0%, #22c55e 50%, #16a34a 100%);
    position: relative;
}

.cover-image[b-1c519ai4u2]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
}

.verification-badge[b-1c519ai4u2] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    padding: 0.35rem 0.75rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
    z-index: 10;
}

.profile-header-content[b-1c519ai4u2] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-top: -50px;
}

.profile-avatar-section[b-1c519ai4u2] {
    position: relative;
    flex-shrink: 0;
}

.profile-avatar[b-1c519ai4u2] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    object-fit: cover;
    background: white;
}

.online-indicator[b-1c519ai4u2] {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    background: #22c55e;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.profile-info[b-1c519ai4u2] {
    flex: 1;
    background: white;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-top: 0;
}

.farmer-name[b-1c519ai4u2] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.125rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.3;
}

.verified-icon[b-1c519ai4u2] {
    color: #22c55e;
    font-size: 1.125rem;
}

.farm-name[b-1c519ai4u2] {
    font-size: 0.9375rem;
    color: #22c55e;
    font-weight: 600;
    margin: 0 0 0.375rem;
}

.location[b-1c519ai4u2] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #6b7280;
    font-size: 0.8125rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

/* Quick Stats - Compact */
.quick-stats[b-1c519ai4u2] {
    display: flex;
    gap: 1.5rem;
    margin: 0.75rem 0;
    flex-wrap: wrap;
}

.stat[b-1c519ai4u2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .stat i[b-1c519ai4u2],
    .stat .bit-icon[b-1c519ai4u2] {
        color: #22c55e;
        font-size: 1rem;
    }

    .stat .value[b-1c519ai4u2] {
        font-size: 1.125rem;
        font-weight: 700;
        color: #1f2937;
    }

    .stat .label[b-1c519ai4u2] {
        font-size: 0.75rem;
        color: #6b7280;
        margin-left: -0.125rem;
    }

/* Profile Actions - Compact */
.profile-actions[b-1c519ai4u2] {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
}

/* Subscription Badge - Compact */
.subscription-badge[b-1c519ai4u2] {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.35rem 0.75rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.subscription-badge.free[b-1c519ai4u2] {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    color: white;
}

.subscription-badge.standard[b-1c519ai4u2] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.subscription-badge.premium[b-1c519ai4u2] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

/* Profile Content */
.profile-content[b-1c519ai4u2] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    margin-top: 1rem;
}

/* About Section */
.about-section[b-1c519ai4u2] {
    padding: 1rem 0;
}

    .about-section h2[b-1c519ai4u2] {
        font-size: 1.75rem;
        font-weight: 700;
        color: #1f2937;
        margin: 0 0 1rem;
    }

.bio[b-1c519ai4u2] {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: #4b5563;
    margin-bottom: 2rem;
}

/* Details Grid */
.details-grid[b-1c519ai4u2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.detail-card[b-1c519ai4u2] {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .detail-card:hover[b-1c519ai4u2] {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }

    .detail-card i[b-1c519ai4u2] {
        color: #22c55e;
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .detail-card h4[b-1c519ai4u2] {
        font-size: 0.875rem;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        margin: 0 0 0.5rem;
    }

    .detail-card p[b-1c519ai4u2] {
        font-size: 1.125rem;
        font-weight: 600;
        color: #1f2937;
        margin: 0;
    }

.tags[b-1c519ai4u2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Products Section */
.products-section[b-1c519ai4u2] {
    margin: 2rem 0;
}

    .products-section h3[b-1c519ai4u2] {
        font-size: 1.25rem;
        font-weight: 600;
        color: #1f2937;
        margin: 0 0 1rem;
    }

.product-tags[b-1c519ai4u2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Info Section */
.info-section[b-1c519ai4u2] {
    background: #f9fafb;
    padding: 1.5rem;
    border-radius: 12px;
    margin: 2rem 0;
}

    .info-section h3[b-1c519ai4u2] {
        font-size: 1.25rem;
        font-weight: 600;
        color: #1f2937;
        margin: 0 0 1rem;
    }

    .info-section p[b-1c519ai4u2] {
        color: #4b5563;
        margin: 0 0 1rem;
    }

.inventory-list[b-1c519ai4u2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.inventory-item[b-1c519ai4u2] {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem;
    background: white;
    border-radius: 8px;
}

    .inventory-item .type[b-1c519ai4u2] {
        font-weight: 500;
        color: #4b5563;
    }

    .inventory-item .count[b-1c519ai4u2] {
        font-weight: 600;
        color: #22c55e;
    }

/* Listings Section */
.listings-section[b-1c519ai4u2] {
    padding: 2rem 0;
}

.listings-grid[b-1c519ai4u2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.listing-card[b-1c519ai4u2] {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

    .listing-card:hover[b-1c519ai4u2] {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    .listing-card img[b-1c519ai4u2] {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

.listing-info[b-1c519ai4u2] {
    padding: 1rem;
}

    .listing-info h4[b-1c519ai4u2] {
        font-size: 1rem;
        font-weight: 600;
        color: #1f2937;
        margin: 0 0 0.5rem;
    }

    .listing-info .price[b-1c519ai4u2] {
        font-size: 1.25rem;
        font-weight: 700;
        color: #22c55e;
        margin: 0 0 0.25rem;
    }

    .listing-info .category[b-1c519ai4u2] {
        font-size: 0.875rem;
        color: #6b7280;
        margin: 0;
    }

/* Reviews Section */
.reviews-section[b-1c519ai4u2] {
    padding: 2rem 0;
}

.rating-summary[b-1c519ai4u2] {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
}

.overall-rating[b-1c519ai4u2] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rating-value[b-1c519ai4u2] {
    font-size: 3rem;
    font-weight: 700;
    color: #22c55e;
}

.review-count[b-1c519ai4u2] {
    font-size: 1rem;
    color: #6b7280;
}

.reviews-list[b-1c519ai4u2] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.review-card[b-1c519ai4u2] {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.review-header[b-1c519ai4u2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.reviewer-info[b-1c519ai4u2] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

    .reviewer-info img[b-1c519ai4u2] {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
    }

    .reviewer-info strong[b-1c519ai4u2] {
        display: block;
        color: #1f2937;
    }

    .reviewer-info .date[b-1c519ai4u2] {
        font-size: 0.875rem;
        color: #6b7280;
    }

.review-comment[b-1c519ai4u2] {
    color: #4b5563;
    line-height: 1.6;
}

.edited-badge[b-1c519ai4u2] {
    font-size: 0.75rem;
    color: #6b7280;
    font-style: italic;
}

/* Stats Dashboard */
.stats-dashboard[b-1c519ai4u2] {
    padding: 2rem 0;
}

    .stats-dashboard h2[b-1c519ai4u2] {
        font-size: 1.875rem;
        font-weight: 700;
        color: #1f2937;
        margin: 0 0 2rem;
    }

.metrics-grid[b-1c519ai4u2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.metric-card[b-1c519ai4u2] {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 1rem;
}

    .metric-card i[b-1c519ai4u2] {
        font-size: 2rem;
        color: #22c55e;
    }

    .metric-card .value[b-1c519ai4u2] {
        display: block;
        font-size: 2rem;
        font-weight: 700;
        color: #1f2937;
    }

    .metric-card .label[b-1c519ai4u2] {
        display: block;
        font-size: 0.875rem;
        color: #6b7280;
    }

/* Empty State */
.empty-state[b-1c519ai4u2] {
    text-align: center;
    padding: 4rem 2rem;
    color: #6b7280;
}

    .empty-state i[b-1c519ai4u2] {
        font-size: 4rem;
        color: #d1d5db;
        margin-bottom: 1rem;
    }

/* Responsive - Mobile */
@media (max-width: 768px) {
    .cover-image[b-1c519ai4u2] {
        height: 100px;
    }

    .profile-header-content[b-1c519ai4u2] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: -40px;
        padding: 0 1rem;
        gap: 0;
    }

    .profile-avatar[b-1c519ai4u2] {
        width: 80px;
        height: 80px;
        border-width: 3px;
    }

    .online-indicator[b-1c519ai4u2] {
        width: 14px;
        height: 14px;
        border-width: 2px;
        bottom: 4px;
        right: 4px;
    }

    .profile-info[b-1c519ai4u2] {
        padding: 1rem;
        margin-top: 0.75rem;
        width: 100%;
    }

    .farmer-name[b-1c519ai4u2] {
        font-size: 1.25rem;
        justify-content: center;
    }

    .farm-name[b-1c519ai4u2] {
        font-size: 0.875rem;
    }

    .location[b-1c519ai4u2] {
        justify-content: center;
        font-size: 0.75rem;
    }

    .quick-stats[b-1c519ai4u2] {
        justify-content: center;
        gap: 1rem;
    }

    .stat[b-1c519ai4u2] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .stat .value[b-1c519ai4u2] {
        font-size: 1rem;
    }

    .stat .label[b-1c519ai4u2] {
        font-size: 0.6875rem;
    }

    .profile-actions[b-1c519ai4u2] {
        flex-direction: column;
        width: 100%;
    }

    .profile-actions[b-1c519ai4u2]  .bit-btn {
        width: 100%;
    }

    .subscription-badge[b-1c519ai4u2] {
        top: 0.5rem;
        left: 0.5rem;
        right: auto;
        padding: 0.25rem 0.5rem;
        font-size: 0.6875rem;
    }

    .verification-badge[b-1c519ai4u2] {
        top: 0.5rem;
        right: 0.5rem;
        left: auto;
        padding: 0.25rem 0.5rem;
        font-size: 0.6875rem;
    }

    .details-grid[b-1c519ai4u2],
    .listings-grid[b-1c519ai4u2],
    .metrics-grid[b-1c519ai4u2] {
        grid-template-columns: 1fr;
    }

    .profile-content[b-1c519ai4u2] {
        padding: 0.75rem;
        margin-top: 0.75rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        border-radius: 10px;
    }

    .about-section h2[b-1c519ai4u2] {
        font-size: 1.25rem;
    }
}

/* Tablet and up - horizontal layout */
@media (min-width: 769px) {
    .profile-header-content[b-1c519ai4u2] {
        align-items: center;
    }
    
    .profile-info[b-1c519ai4u2] {
        margin-top: 0.5rem;
    }
}
/* _content/AgriConnect.BlazorApp/Pages/Index.razor.rz.scp.css */
/* Enhanced Index.razor.css */

:root[b-hh9zkaqfus] {
    --primary-color: #059669;
    --primary-light: #10b981;
    --primary-dark: #047857;
    --secondary-color: #3b82f6;
    --accent-color: #f59e0b;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-light: #9ca3af;
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-accent: #f0fdf4;
    --border-color: #e5e7eb;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --nav-height: 70px;
}

.marketing-home[b-hh9zkaqfus] {
    color: var(--text-primary);
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    padding-top: var(--nav-height); /* Account for fixed navigation */
}

/* Enhanced Hero Section */
.hero[b-hh9zkaqfus] {
    position: relative;
    min-height: calc(100vh - var(--nav-height));
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    color: white;
    overflow: hidden;
    margin-top: calc(-1 * var(--nav-height)); /* Overlap with nav for fullscreen effect */
    padding-top: var(--nav-height); /* Add padding back inside */
    width: 100%;
    max-width: 100vw;
}

.hero-background[b-hh9zkaqfus] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/images/hero-bg.jpg') center/cover;
    opacity: 0.2;
}

.hero-particles[b-hh9zkaqfus] {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2310b981' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    animation: float-b-hh9zkaqfus 20s ease-in-out infinite alternate;
}

.hero .container[b-hh9zkaqfus] {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.hero-content[b-hh9zkaqfus] {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: 2rem 0;
}

.hero-logo-container[b-hh9zkaqfus] {
    margin-bottom: 2rem;
    animation: fadeInUp-b-hh9zkaqfus 0.8s ease-out;
}

.hero-logo[b-hh9zkaqfus] {
    height: 120px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 25px rgba(255, 255, 255, 0.2));
    animation: float-b-hh9zkaqfus 3s ease-in-out infinite alternate;
}

@media (max-width: 768px) {
    .hero-logo[b-hh9zkaqfus] {
height: 80px;
    }
}

.hero-badge[b-hh9zkaqfus] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
    animation: fadeInUp-b-hh9zkaqfus 0.8s ease-out;
}

.hero-badge i[b-hh9zkaqfus] {
    color: var(--primary-light);
}

.hero-title[b-hh9zkaqfus] {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    animation: fadeInUp-b-hh9zkaqfus 0.8s ease-out 0.2s both;
}

.hero-title .highlight[b-hh9zkaqfus] {
    background: linear-gradient(135deg, var(--primary-light), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description[b-hh9zkaqfus] {
    font-size: clamp(1.1rem, 2vw, 1.375rem);
    line-height: 1.7;
    margin-bottom: 3rem;
    opacity: 0.9;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    animation: fadeInUp-b-hh9zkaqfus 0.8s ease-out 0.4s both;
}

.hero-stats[b-hh9zkaqfus] {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 3rem;
    animation: fadeInUp-b-hh9zkaqfus 0.8s ease-out 0.6s both;
}

.stat-item[b-hh9zkaqfus] {
    text-align: center;
}

.stat-number[b-hh9zkaqfus] {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-light);
    line-height: 1;
}

.stat-label[b-hh9zkaqfus] {
    font-size: 0.875rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hero-buttons[b-hh9zkaqfus] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 3rem;
    animation: fadeInUp-b-hh9zkaqfus 0.8s ease-out 0.8s both;
}

.hero-buttons .btn[b-hh9zkaqfus] {
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: 50px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hero-buttons .btn[b-hh9zkaqfus]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.hero-buttons .btn:hover[b-hh9zkaqfus]::before {
    left: 100%;
}

.hero-buttons .btn:hover[b-hh9zkaqfus] {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.hero-buttons .btn-primary[b-hh9zkaqfus] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
}

.hero-buttons .btn-outline-primary[b-hh9zkaqfus] {
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: white;
}

.hero-trust[b-hh9zkaqfus] {
    animation: fadeInUp-b-hh9zkaqfus 0.8s ease-out 1s both;
}

.trust-text[b-hh9zkaqfus] {
    font-size: 0.875rem;
    opacity: 0.8;
    margin-bottom: 1rem;
}

.trust-logos[b-hh9zkaqfus] {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.trust-item[b-hh9zkaqfus] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    opacity: 0.8;
}

.trust-item i[b-hh9zkaqfus] {
    color: var(--primary-light);
}

.hero-scroll-indicator[b-hh9zkaqfus] {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce-b-hh9zkaqfus 2s infinite;
    cursor: pointer;
}

.scroll-arrow[b-hh9zkaqfus] {
    width: 30px;
    height: 30px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    position: relative;
}

.scroll-arrow[b-hh9zkaqfus]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(255, 255, 255, 0.7);
    border-bottom: 2px solid rgba(255, 255, 255, 0.7);
}

/* Container utility */
.container[b-hh9zkaqfus] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Enhanced Section Styling */
.section-header[b-hh9zkaqfus] {
    text-align: center;
    margin-bottom: 4rem;
}

.section-badge[b-hh9zkaqfus] {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

.section-title[b-hh9zkaqfus] {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.section-description[b-hh9zkaqfus] {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Enhanced Features Section */
.features[b-hh9zkaqfus] {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-accent) 100%);
}

.features-grid[b-hh9zkaqfus] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.feature-card[b-hh9zkaqfus] {
    background: var(--bg-primary);
    padding: 3rem 2rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.feature-card[b-hh9zkaqfus]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.feature-card:hover[b-hh9zkaqfus]::before {
    transform: scaleX(1);
}

.feature-card:hover[b-hh9zkaqfus] {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.feature-icon[b-hh9zkaqfus] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    transition: var(--transition);
}

.feature-icon i[b-hh9zkaqfus] {
    font-size: 2rem;
    color: white;
}

.feature-card:hover .feature-icon[b-hh9zkaqfus] {
    transform: scale(1.1) rotate(5deg);
}

.feature-card h3[b-hh9zkaqfus] {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.feature-card p[b-hh9zkaqfus] {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.feature-link[b-hh9zkaqfus] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.875rem;
    transition: var(--transition);
}

.feature-card:hover .feature-link[b-hh9zkaqfus] {
    color: var(--primary-light);
}

.feature-link i[b-hh9zkaqfus] {
    transition: transform 0.3s ease;
}

.feature-card:hover .feature-link i[b-hh9zkaqfus] {
    transform: translateX(4px);
}

/* How It Works Section */
.how-it-works[b-hh9zkaqfus] {
    padding: 6rem 0;
    background: var(--bg-primary);
}

.steps-container[b-hh9zkaqfus] {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 2rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.step-item[b-hh9zkaqfus] {
    text-align: center;
    position: relative;
}

.step-number[b-hh9zkaqfus] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 2rem;
    box-shadow: var(--shadow-lg);
}

.step-content h3[b-hh9zkaqfus] {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.step-content p[b-hh9zkaqfus] {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.step-features[b-hh9zkaqfus] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.step-feature[b-hh9zkaqfus] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.step-feature i[b-hh9zkaqfus] {
    color: var(--success-color);
}

.step-connector[b-hh9zkaqfus] {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    position: relative;
}

.step-connector[b-hh9zkaqfus]::after {
    content: '';
    position: absolute;
    right: -4px;
    top: -4px;
    width: 10px;
    height: 10px;
    background: var(--primary-light);
    border-radius: 50%;
}

/* Testimonials Section */
.testimonials[b-hh9zkaqfus] {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--bg-accent) 0%, var(--bg-secondary) 100%);
}

.testimonials-grid[b-hh9zkaqfus] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.testimonial-card[b-hh9zkaqfus] {
    background: var(--bg-primary);
    padding: 2.5rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
    position: relative;
}

.testimonial-card[b-hh9zkaqfus]::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 2rem;
    font-size: 4rem;
    color: var(--primary-light);
    opacity: 0.3;
    font-family: serif;
}

.testimonial-card:hover[b-hh9zkaqfus] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.testimonial-rating[b-hh9zkaqfus] {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}

.testimonial-rating i[b-hh9zkaqfus] {
    color: var(--accent-color);
}

.testimonial-content p[b-hh9zkaqfus] {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    font-style: italic;
}

.testimonial-author[b-hh9zkaqfus] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.author-avatar[b-hh9zkaqfus] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.author-info h4[b-hh9zkaqfus] {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.author-info span[b-hh9zkaqfus] {
    color: var(--text-light);
    font-size: 0.875rem;
}

/* Enhanced Ubuntucraft Section */
.ubuntucraft[b-hh9zkaqfus] {
    padding: 6rem 0;
    background: var(--bg-primary);
    position: relative;
}

.ubuntucraft[b-hh9zkaqfus]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23059669' fill-opacity='0.02'%3E%3Ccircle cx='40' cy='40' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.ubuntucraft-content[b-hh9zkaqfus] {
    text-align: center;
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}

.ubuntu-branding[b-hh9zkaqfus] {
    margin-bottom: 3rem;
}

.ubuntu-logo-container[b-hh9zkaqfus] {
    position: relative;
    display: inline-block;
    margin-bottom: 2rem;
}

.ubuntu-logo-text[b-hh9zkaqfus] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    transition: var(--transition);
}

.ubuntu-logo-text:hover[b-hh9zkaqfus] {
    transform: scale(1.05);
}

.ubuntu-icon[b-hh9zkaqfus] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #e97517, #f39c12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2.5rem;
    filter: drop-shadow(0 8px 25px rgba(233, 117, 23, 0.3));
}

.ubuntu-name[b-hh9zkaqfus] {
    background: linear-gradient(135deg, #e97517, #f39c12);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-glow[b-hh9zkaqfus] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(233, 117, 23, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse-b-hh9zkaqfus 3s ease-in-out infinite;
}

.divider[b-hh9zkaqfus] {
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--primary-color));
    width: 100px;
    margin: 2rem auto;
    border-radius: 2px;
}

.ubuntucraft h2[b-hh9zkaqfus] {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2rem;
}

.ubuntu-description[b-hh9zkaqfus] {
    font-size: 1.25rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 4rem;
}

.ubuntu-values[b-hh9zkaqfus] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.value-item[b-hh9zkaqfus] {
    padding: 2.5rem 2rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-xl);
    transition: var(--transition);
    border: 1px solid var(--border-color);
}

.value-item:hover[b-hh9zkaqfus] {
    transform: translateY(-4px);
    background: var(--bg-primary);
    box-shadow: var(--shadow-lg);
}

.value-icon[b-hh9zkaqfus] {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: var(--transition);
}

.value-icon i[b-hh9zkaqfus] {
    font-size: 1.75rem;
    color: white;
}

.value-item:hover .value-icon[b-hh9zkaqfus] {
    transform: scale(1.1);
}

.value-item h3[b-hh9zkaqfus] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.value-item p[b-hh9zkaqfus] {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Enhanced Benefits Section */
.benefits[b-hh9zkaqfus] {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--bg-accent) 0%, var(--bg-secondary) 100%);
}

.benefits-container[b-hh9zkaqfus] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 3rem;
}

.benefit-section[b-hh9zkaqfus] {
    background: var(--bg-primary);
    padding: 3rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
}

.benefit-section:hover[b-hh9zkaqfus] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.benefit-header[b-hh9zkaqfus] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.benefit-icon[b-hh9zkaqfus] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.benefit-icon i[b-hh9zkaqfus] {
    font-size: 2rem;
    color: white;
}

.benefit-header h3[b-hh9zkaqfus] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.benefit-header p[b-hh9zkaqfus] {
    color: var(--text-secondary);
}

.benefit-list[b-hh9zkaqfus] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.benefit-item[b-hh9zkaqfus] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    transition: var(--transition);
}

.benefit-item:hover[b-hh9zkaqfus] {
    background: var(--bg-accent);
}

.benefit-item i[b-hh9zkaqfus] {
    color: var(--success-color);
    font-size: 1.25rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.benefit-content h4[b-hh9zkaqfus] {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.benefit-content p[b-hh9zkaqfus] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Enhanced CTA Section */
.cta[b-hh9zkaqfus] {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 50%, var(--primary-light) 100%);
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-background[b-hh9zkaqfus] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/images/cta-bg.jpg') center/cover;
    opacity: 0.1;
}

.cta-particles[b-hh9zkaqfus] {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='20' cy='20' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    animation: float-b-hh9zkaqfus 15s ease-in-out infinite alternate;
}

.cta-content[b-hh9zkaqfus] {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.cta-badge[b-hh9zkaqfus] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
}

.cta h2[b-hh9zkaqfus] {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.cta p[b-hh9zkaqfus] {
    font-size: 1.25rem;
    opacity: 0.95;
    margin-bottom: 3rem;
    line-height: 1.7;
}

.cta-buttons[b-hh9zkaqfus] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 3rem;
}

.cta-buttons .btn[b-hh9zkaqfus] {
    padding: 1.25rem 2.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    border-radius: 50px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cta-buttons .btn[b-hh9zkaqfus]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.cta-buttons .btn:hover[b-hh9zkaqfus]::before {
    left: 100%;
}

.cta-buttons .btn:hover[b-hh9zkaqfus] {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.cta-buttons .btn-primary[b-hh9zkaqfus] {
    background: white;
    color: var(--primary-color);
}

.cta-buttons .btn-outline-light[b-hh9zkaqfus] {
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: white;
}

.cta-guarantee[b-hh9zkaqfus] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    opacity: 0.9;
}

.guarantee-item[b-hh9zkaqfus] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.guarantee-item i[b-hh9zkaqfus] {
    color: rgba(255, 255, 255, 0.8);
}

/* Animations */
@keyframes fadeInUp-b-hh9zkaqfus {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce-b-hh9zkaqfus {
    0%, 20%, 53%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40%, 43% {
        transform: translateX(-50%) translateY(-10px);
    }
    70% {
        transform: translateX(-50%) translateY(-5px);
    }
    90% {
        transform: translateX(-50%) translateY(-2px);
    }
}

@keyframes float-b-hh9zkaqfus {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-20px);
    }
}

@keyframes pulse-b-hh9zkaqfus {
    0%, 100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* ==========================================================================
   MOBILE-FIRST RESPONSIVE DESIGN FOR LANDING PAGE
   Follows Apple HIG & Material Design 3 guidelines
   Touch targets: minimum 44x44px
   ========================================================================== */

/* ==================== TABLET (max-width: 1024px) ==================== */
@media (max-width: 1024px) {
    .steps-container[b-hh9zkaqfus] {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .step-connector[b-hh9zkaqfus] {
        display: none;
    }
    
    .hero-stats[b-hh9zkaqfus] {
        gap: 2rem;
    }
    
    .benefits-container[b-hh9zkaqfus] {
        grid-template-columns: 1fr;
    }
    
    .features-grid[b-hh9zkaqfus] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .ubuntu-values[b-hh9zkaqfus] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==================== MOBILE LANDSCAPE (max-width: 768px) ==================== */
@media (max-width: 768px) {
    /* Root adjustments */
    :root[b-hh9zkaqfus] {
        --nav-height: 60px;
    }
    
    .marketing-home[b-hh9zkaqfus] {
        padding-top: 60px;
    }
    
    /* Hero Section - Mobile optimized */
    .hero[b-hh9zkaqfus] {
        min-height: calc(100vh - 60px);
        margin-top: -60px;
        padding-top: 80px;
        padding-bottom: 2rem;
    }
    
    .hero .container[b-hh9zkaqfus] {
        padding: 0 1rem;
    }
    
    .hero-content[b-hh9zkaqfus] {
        padding: 1rem 0;
    }
    
    .hero-logo-container[b-hh9zkaqfus] {
        margin-bottom: 1.5rem;
    }
    
    .hero-logo[b-hh9zkaqfus] {
        height: 70px;
    }
    
    .hero-badge[b-hh9zkaqfus] {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
        margin-bottom: 1.5rem;
    }
    
    .hero-title[b-hh9zkaqfus] {
        font-size: 1.75rem;
        line-height: 1.2;
        margin-bottom: 1rem;
    }
    
    .hero-description[b-hh9zkaqfus] {
        font-size: 0.9375rem;
        line-height: 1.6;
        margin-bottom: 2rem;
        padding: 0 0.5rem;
    }
    
    /* Hero Stats - Horizontal on mobile */
    .hero-stats[b-hh9zkaqfus] {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .stat-item[b-hh9zkaqfus] {
        min-width: 80px;
    }
    
    .stat-number[b-hh9zkaqfus] {
        font-size: 1.75rem;
    }
    
    .stat-label[b-hh9zkaqfus] {
        font-size: 0.6875rem;
    }
    
    /* Hero Buttons - Stacked on mobile */
    .hero-buttons[b-hh9zkaqfus] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 0 1rem;
        margin-bottom: 2rem;
    }
    
    .hero-buttons .btn[b-hh9zkaqfus],
    .hero-buttons[b-hh9zkaqfus]  .bit-btn {
        width: 100% !important;
        min-height: 52px !important;
        font-size: 1rem !important;
        border-radius: 12px !important;
    }
    
    /* Trust Section - Compact */
    .trust-text[b-hh9zkaqfus] {
        font-size: 0.8125rem;
        margin-bottom: 0.75rem;
    }
    
    .trust-logos[b-hh9zkaqfus] {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    
    .trust-item[b-hh9zkaqfus] {
        font-size: 0.75rem;
    }
    
    .hero-scroll-indicator[b-hh9zkaqfus] {
        bottom: 1rem;
    }
    
    /* Section Headers - Compact */
    .section-header[b-hh9zkaqfus] {
        margin-bottom: 2.5rem;
        padding: 0 0.5rem;
    }
    
    .section-badge[b-hh9zkaqfus] {
        padding: 0.375rem 1rem;
        font-size: 0.75rem;
    }
    
    .section-title[b-hh9zkaqfus] {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    .section-description[b-hh9zkaqfus] {
        font-size: 0.9375rem;
        line-height: 1.6;
    }
    
    /* Features Grid - Single column */
    .features[b-hh9zkaqfus] {
        padding: 3.5rem 0;
    }
    
    .features-grid[b-hh9zkaqfus] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .feature-card[b-hh9zkaqfus] {
        padding: 1.5rem;
        border-radius: 12px;
    }
    
    .feature-icon[b-hh9zkaqfus] {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }
    
    .feature-card h3[b-hh9zkaqfus] {
        font-size: 1.125rem;
        margin-bottom: 0.5rem;
    }
    
    .feature-card p[b-hh9zkaqfus] {
        font-size: 0.875rem;
        line-height: 1.5;
    }
    
    .feature-link[b-hh9zkaqfus] {
        font-size: 0.8125rem;
        margin-top: 0.75rem;
    }
    
    /* How It Works - Stacked */
    .how-it-works[b-hh9zkaqfus] {
        padding: 3.5rem 0;
    }
    
    .steps-container[b-hh9zkaqfus] {
        gap: 2rem;
        padding: 0 0.5rem;
    }
    
    .step-item[b-hh9zkaqfus] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .step-number[b-hh9zkaqfus] {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
    
    .step-content h3[b-hh9zkaqfus] {
        font-size: 1.125rem;
    }
    
    .step-content p[b-hh9zkaqfus] {
        font-size: 0.875rem;
    }
    
    .step-features[b-hh9zkaqfus] {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .step-feature[b-hh9zkaqfus] {
        font-size: 0.75rem;
    }
    
    /* Testimonials - Single column */
    .testimonials[b-hh9zkaqfus] {
        padding: 3.5rem 0;
    }
    
    .testimonials-grid[b-hh9zkaqfus] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .testimonial-card[b-hh9zkaqfus] {
        padding: 1.5rem;
        border-radius: 12px;
    }
    
    .testimonial-content p[b-hh9zkaqfus] {
        font-size: 0.9375rem;
        line-height: 1.6;
    }
    
    .testimonial-rating[b-hh9zkaqfus] {
        margin-bottom: 0.75rem;
    }
    
    .testimonial-rating i[b-hh9zkaqfus] {
        font-size: 0.875rem;
    }
    
    .author-info h4[b-hh9zkaqfus] {
        font-size: 0.9375rem;
    }
    
    .author-info span[b-hh9zkaqfus] {
        font-size: 0.8125rem;
    }
    
    /* Ubuntucraft Section - Compact */
    .ubuntucraft[b-hh9zkaqfus] {
        padding: 3.5rem 0;
    }
    
    .ubuntu-branding h2[b-hh9zkaqfus] {
        font-size: 1.25rem;
    }
    
    .ubuntu-description[b-hh9zkaqfus] {
        font-size: 0.9375rem;
        line-height: 1.6;
        padding: 0 0.5rem;
    }
    
    .ubuntu-values[b-hh9zkaqfus] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .value-item[b-hh9zkaqfus] {
        padding: 1.25rem;
    }
    
    .value-icon[b-hh9zkaqfus] {
        width: 48px;
        height: 48px;
        margin-bottom: 0.75rem;
    }
    
    .value-item h3[b-hh9zkaqfus] {
        font-size: 1rem;
    }
    
    .value-item p[b-hh9zkaqfus] {
        font-size: 0.8125rem;
    }
    
    /* Benefits Section - Compact */
    .benefits[b-hh9zkaqfus] {
        padding: 3.5rem 0;
    }
    
    .benefit-section[b-hh9zkaqfus] {
        padding: 1.5rem;
    }
    
    /* CTA Section */
    .cta[b-hh9zkaqfus] {
        padding: 3.5rem 0;
    }
    
    .cta-buttons[b-hh9zkaqfus] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 0 1rem;
    }
    
    .cta-buttons .btn[b-hh9zkaqfus],
    .cta-buttons[b-hh9zkaqfus]  .bit-btn {
        width: 100% !important;
        min-height: 52px !important;
    }
    
    .cta-guarantee[b-hh9zkaqfus] {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .guarantee-item[b-hh9zkaqfus] {
        font-size: 0.8125rem;
    }
}

/* ==================== MOBILE PORTRAIT (max-width: 480px) ==================== */
@media (max-width: 480px) {
    .hero[b-hh9zkaqfus] {
        padding-top: 70px;
    }
    
    .hero-logo[b-hh9zkaqfus] {
        height: 60px;
    }
    
    .hero-badge[b-hh9zkaqfus] {
        padding: 0.375rem 0.875rem;
        font-size: 0.6875rem;
    }
    
    .hero-title[b-hh9zkaqfus] {
        font-size: 1.5rem;
    }
    
    .hero-description[b-hh9zkaqfus] {
        font-size: 0.875rem;
    }
    
    /* Stats - 3 in a row, smaller */
    .hero-stats[b-hh9zkaqfus] {
        gap: 1rem;
    }
    
    .stat-number[b-hh9zkaqfus] {
        font-size: 1.5rem;
    }
    
    .stat-label[b-hh9zkaqfus] {
        font-size: 0.625rem;
    }
    
    /* Buttons - Max touch area */
    .hero-buttons .btn[b-hh9zkaqfus],
    .hero-buttons[b-hh9zkaqfus]  .bit-btn {
        min-height: 56px !important;
    }
    
    /* Sections - Even more compact */
    .features[b-hh9zkaqfus],
    .how-it-works[b-hh9zkaqfus],
    .testimonials[b-hh9zkaqfus],
    .ubuntucraft[b-hh9zkaqfus],
    .benefits[b-hh9zkaqfus],
    .cta[b-hh9zkaqfus] {
        padding: 3rem 0;
    }
    
    .section-header[b-hh9zkaqfus] {
        margin-bottom: 2rem;
    }
    
    .section-title[b-hh9zkaqfus] {
        font-size: 1.375rem;
    }
    
    .section-description[b-hh9zkaqfus] {
        font-size: 0.875rem;
    }
    
    .feature-card[b-hh9zkaqfus],
    .testimonial-card[b-hh9zkaqfus],
    .benefit-section[b-hh9zkaqfus],
    .value-item[b-hh9zkaqfus] {
        padding: 1.25rem;
    }
    
    .container[b-hh9zkaqfus] {
        padding: 0 0.75rem;
    }
}

/* ==================== SAFE AREA INSETS (Notched devices) ==================== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .marketing-home[b-hh9zkaqfus] {
            padding-bottom: env(safe-area-inset-bottom);
        }
        
        .cta-buttons[b-hh9zkaqfus] {
            padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        }
    }
}

/* ==================== TOUCH DEVICE IMPROVEMENTS ==================== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .feature-card[b-hh9zkaqfus],
    .testimonial-card[b-hh9zkaqfus],
    .value-item[b-hh9zkaqfus] {
        cursor: pointer;
    }
    
    /* Disable hover effects on touch */
    .feature-card:hover[b-hh9zkaqfus],
    .testimonial-card:hover[b-hh9zkaqfus],
    .value-item:hover[b-hh9zkaqfus] {
        transform: none;
    }
    
    .feature-card:active[b-hh9zkaqfus],
    .testimonial-card:active[b-hh9zkaqfus],
    .value-item:active[b-hh9zkaqfus] {
        transform: scale(0.98);
        opacity: 0.9;
    }
    
    .hero-buttons .btn:hover[b-hh9zkaqfus],
    .cta-buttons .btn:hover[b-hh9zkaqfus] {
        transform: none;
    }
    
    /* Feature link - larger touch area */
    .feature-link[b-hh9zkaqfus] {
        padding: 0.5rem 0;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    /* Trust items - larger touch area */
    .trust-item[b-hh9zkaqfus] {
        min-height: 44px;
        padding: 0.5rem;
    }
}

/* ==================== REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce) {
    .hero-particles[b-hh9zkaqfus],
    .hero-logo[b-hh9zkaqfus],
    .hero-scroll-indicator[b-hh9zkaqfus],
    [data-aos][b-hh9zkaqfus] {
        animation: none !important;
        transition: none !important;
    }
    
    .feature-card[b-hh9zkaqfus],
    .testimonial-card[b-hh9zkaqfus],
    .value-item[b-hh9zkaqfus],
    .btn[b-hh9zkaqfus] {
        transition: none !important;
    }
}

/* Dark mode enhancements */
@media (prefers-color-scheme: dark) {
    :root[b-hh9zkaqfus] {
        --text-primary: #f9fafb;
        --text-secondary: #d1d5db;
        --text-light: #9ca3af;
        --bg-primary: #1f2937;
        --bg-secondary: #374151;
        --bg-accent: #065f46;
        --border-color: #4b5563;
    }
}

/* Scroll-triggered animations */
[data-aos][b-hh9zkaqfus] {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

[data-aos].aos-animate[b-hh9zkaqfus] {
    opacity: 1;
}

[data-aos="fade-up"][b-hh9zkaqfus] {
    transform: translateY(30px);
}

[data-aos="fade-up"].aos-animate[b-hh9zkaqfus] {
    transform: translateY(0);
}

[data-aos="fade-right"][b-hh9zkaqfus] {
    transform: translateX(-30px);
}

[data-aos="fade-right"].aos-animate[b-hh9zkaqfus] {
    transform: translateX(0);
}

[data-aos="fade-left"][b-hh9zkaqfus] {
    transform: translateX(30px);
}

[data-aos="fade-left"].aos-animate[b-hh9zkaqfus] {
    transform: translateX(0);
}
/* _content/AgriConnect.BlazorApp/Pages/ListingAnalytics.razor.rz.scp.css */
/* ListingAnalytics.razor.css */

.listing-analytics-page[b-359hry7v95] {
    background-color: #f8f9fa;
    min-height: 100vh;
    padding: 0;
}

.container[b-359hry7v95] {
    max-width: 1200px;
}

/* Header Styles */
.analytics-header[b-359hry7v95] {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.breadcrumb[b-359hry7v95] {
    margin-bottom: 1rem;
    background: none;
    padding: 0;
}

.breadcrumb-item a[b-359hry7v95] {
    color: #6c757d;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover[b-359hry7v95] {
    color: #0d6efd;
}

.breadcrumb-item.active[b-359hry7v95] {
    color: #495057;
}

.date-range-selector .form-select[b-359hry7v95] {
    min-width: 150px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    background-color: white;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.date-range-selector .form-select:focus[b-359hry7v95] {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Statistics Cards */
.stat-card[b-359hry7v95] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.stat-card[b-359hry7v95]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #0d6efd, #198754);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.stat-card:hover[b-359hry7v95] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.stat-card:hover[b-359hry7v95]::before {
    opacity: 1;
}

.stat-icon[b-359hry7v95] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.bg-primary-subtle[b-359hry7v95] {
    background-color: rgba(13, 110, 253, 0.1);
}

.bg-success-subtle[b-359hry7v95] {
    background-color: rgba(25, 135, 84, 0.1);
}

.bg-info-subtle[b-359hry7v95] {
    background-color: rgba(13, 202, 240, 0.1);
}

.bg-warning-subtle[b-359hry7v95] {
    background-color: rgba(255, 193, 7, 0.1);
}

.stat-content[b-359hry7v95] {
    flex: 1;
    min-width: 0;
}

.stat-value[b-359hry7v95] {
    font-size: 2.25rem;
    font-weight: 700;
    color: #212529;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-label[b-359hry7v95] {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.stat-trend[b-359hry7v95] {
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.stat-trend.positive[b-359hry7v95] {
    color: #198754;
}

.stat-trend.negative[b-359hry7v95] {
    color: #dc3545;
}

.stat-trend.neutral[b-359hry7v95] {
    color: #6c757d;
}

/* Analytics Cards */
.analytics-card[b-359hry7v95] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.analytics-card h5[b-359hry7v95] {
    margin-bottom: 1.5rem;
    color: #212529;
    font-weight: 600;
    font-size: 1.1rem;
}

.chart-container[b-359hry7v95] {
    min-height: 300px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Custom Timeline Chart */
.timeline-chart[b-359hry7v95] {
    display: flex;
    align-items: end;
    gap: 0.5rem;
    height: 220px;
    padding: 1rem 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f1f5f9;
}

.timeline-chart[b-359hry7v95]::-webkit-scrollbar {
    height: 6px;
}

.timeline-chart[b-359hry7v95]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.timeline-chart[b-359hry7v95]::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

.timeline-item[b-359hry7v95] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
    flex-shrink: 0;
}

.timeline-date[b-359hry7v95] {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
    white-space: nowrap;
    font-weight: 500;
}

.timeline-bars[b-359hry7v95] {
    display: flex;
    gap: 3px;
    align-items: end;
    height: 150px;
}

.timeline-bar[b-359hry7v95] {
    min-height: 8px;
    width: 22px;
    border-radius: 4px 4px 2px 2px;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
}

.timeline-bar:hover[b-359hry7v95] {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.timeline-bar.views[b-359hry7v95] {
    background: linear-gradient(180deg, #0d6efd 0%, #084298 100%);
}

.timeline-bar.enquiries[b-359hry7v95] {
    background: linear-gradient(180deg, #198754 0%, #0f5132 100%);
}

.bar-label[b-359hry7v95] {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: #495057;
    font-weight: 600;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 4px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.timeline-bar:hover .bar-label[b-359hry7v95] {
    opacity: 1;
}

.chart-legend[b-359hry7v95] {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

.legend-item[b-359hry7v95] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.legend-color[b-359hry7v95] {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}

.legend-color.views[b-359hry7v95] {
    background: linear-gradient(135deg, #0d6efd, #084298);
}

.legend-color.enquiries[b-359hry7v95] {
    background: linear-gradient(135deg, #198754, #0f5132);
}

/* Traffic Sources Chart */
.sources-chart[b-359hry7v95] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1rem 0;
}

.source-item[b-359hry7v95] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.source-info[b-359hry7v95] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.source-name[b-359hry7v95] {
    font-weight: 500;
    color: #495057;
}

.source-percentage[b-359hry7v95] {
    color: #6c757d;
    font-weight: 600;
    font-size: 0.85rem;
}

.source-bar[b-359hry7v95] {
    height: 12px;
    background-color: #f1f3f4;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.source-fill[b-359hry7v95] {
    height: 100%;
    background: linear-gradient(90deg, #0d6efd 0%, #198754 50%, #ffc107 100%);
    border-radius: 6px;
    transition: width 0.6s ease;
    position: relative;
}

.source-fill[b-359hry7v95]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    animation: shimmer-b-359hry7v95 2s infinite;
}

@keyframes shimmer-b-359hry7v95 {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Demographics */
.demographics-list[b-359hry7v95] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
}

.demographic-item[b-359hry7v95] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.progress[b-359hry7v95] {
    height: 10px;
    background-color: #f1f3f4;
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar[b-359hry7v95] {
    background: linear-gradient(90deg, #0d6efd, #198754);
    border-radius: 5px;
    transition: width 0.6s ease;
    position: relative;
}

.progress-bar[b-359hry7v95]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: progress-shine-b-359hry7v95 2s infinite;
}

@keyframes progress-shine-b-359hry7v95 {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Enquiries */
.enquiries-list[b-359hry7v95] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 400px;
    overflow-y: auto;
    padding: 1rem 0;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f1f5f9;
}

.enquiries-list[b-359hry7v95]::-webkit-scrollbar {
    width: 6px;
}

.enquiries-list[b-359hry7v95]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.enquiries-list[b-359hry7v95]::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

.enquiry-item[b-359hry7v95] {
    padding: 1rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 8px;
    border-left: 4px solid #0d6efd;
    transition: all 0.2s ease;
}

.enquiry-item:hover[b-359hry7v95] {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.enquiry-header[b-359hry7v95] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.enquiry-user[b-359hry7v95] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: #495057;
}

.enquiry-user i[b-359hry7v95] {
    color: #6c757d;
    font-size: 1.1rem;
}

.enquiry-date[b-359hry7v95] {
    font-size: 0.8rem;
    color: #6c757d;
    font-weight: 500;
}

.enquiry-message[b-359hry7v95] {
    margin: 0.75rem 0;
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.5;
}

.enquiry-status[b-359hry7v95] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.enquiry-status.pending[b-359hry7v95] {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.enquiry-status.responded[b-359hry7v95] {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.enquiry-status.closed[b-359hry7v95] {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* Recommendations */
.recommendations-list[b-359hry7v95] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.recommendation-item[b-359hry7v95] {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 12px;
    border-left: 4px solid;
    transition: all 0.2s ease;
}

.recommendation-item:hover[b-359hry7v95] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.recommendation-item.improvement[b-359hry7v95] {
    background: linear-gradient(135deg, #fff8e1 0%, #ffffff 100%);
    border-left-color: #ffc107;
}

.recommendation-item.alert[b-359hry7v95] {
    background: linear-gradient(135deg, #ffebee 0%, #ffffff 100%);
    border-left-color: #dc3545;
}

.recommendation-item.success[b-359hry7v95] {
    background: linear-gradient(135deg, #e8f5e8 0%, #ffffff 100%);
    border-left-color: #198754;
}

.recommendation-content h6[b-359hry7v95] {
    margin: 0 ០ 0.5rem 0;
    color: #212529;
    font-weight: 600;
    font-size: 1rem;
}

.recommendation-content p[b-359hry7v95] {
    margin: 0 0 1rem 0;
    color: #6c757d;
    line-height: 1.5;
    font-size: 0.9rem;
}

.recommendation-content .btn[b-359hry7v95] {
    transition: all 0.2s ease;
}

.recommendation-content .btn:hover[b-359hry7v95] {
    transform: translateY(-1px);
}

/* No Data States */
.no-data[b-359hry7v95] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: #6c757d;
    text-align: center;
}

.no-data i[b-359hry7v95] {
    opacity: 0.6;
    margin-bottom: 1rem;
}

.no-data p[b-359hry7v95] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Loading State */
.spinner-border[b-359hry7v95] {
    width: 3rem;
    height: 3rem;
}

/* Responsive Design */
@media (max-width: 992px) {
    .container[b-359hry7v95] {
        padding: 1rem;
    }

    .analytics-header[b-359hry7v95] {
        padding: 1.5rem;
    }

    .analytics-header .d-flex[b-359hry7v95] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch !important;
    }

    .stat-card[b-359hry7v95] {
        padding: 1rem;
    }

    .stat-value[b-359hry7v95] {
        font-size: 1.75rem;
    }

    .analytics-card[b-359hry7v95] {
        padding: 1rem;
        margin-bottom: 1rem;
    }
}

@media (max-width: 768px) {
    .timeline-chart[b-359hry7v95] {
        gap: 0.25rem;
        padding: 0.5rem 0;
    }

    .timeline-item[b-359hry7v95] {
        min-width: 40px;
    }

    .timeline-bar[b-359hry7v95] {
        width: 16px;
    }

    .enquiry-header[b-359hry7v95] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .recommendation-item[b-359hry7v95] {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
    }

    .stat-card[b-359hry7v95] {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .stat-icon[b-359hry7v95] {
        width: 48px;
        height: 48px;
    }

    .stat-value[b-359hry7v95] {
        font-size: 1.5rem;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .listing-analytics-page[b-359hry7v95] {
        background-color: #1a202c;
        color: #e2e8f0;
    }

    .analytics-header[b-359hry7v95],
    .stat-card[b-359hry7v95],
    .analytics-card[b-359hry7v95] {
        background-color: #2d3748;
        color: #e2e8f0;
        border-color: #4a5568;
    }

    .stat-value[b-359hry7v95] {
        color: #e2e8f0;
    }

    .breadcrumb-item a[b-359hry7v95] {
        color: #a0aec0;
    }

    .breadcrumb-item a:hover[b-359hry7v95] {
        color: #63b3ed;
    }

    .enquiry-item[b-359hry7v95] {
        background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
        border-left-color: #63b3ed;
    }

    .source-bar[b-359hry7v95],
    .progress[b-359hry7v95] {
        background-color: #4a5568;
    }

    .timeline-date[b-359hry7v95],
    .source-percentage[b-359hry7v95],
    .enquiry-date[b-359hry7v95] {
        color: #a0aec0;
    }

    .no-data[b-359hry7v95] {
        color: #a0aec0;
    }

    .form-select[b-359hry7v95] {
        background-color: #2d3748;
        border-color: #4a5568;
        color: #e2e8f0;
    }

    .recommendation-item.improvement[b-359hry7v95] {
        background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
        border-left-color: #f6e05e;
    }

    .recommendation-item.alert[b-359hry7v95] {
        background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
        border-left-color: #fc8181;
    }

    .recommendation-item.success[b-359hry7v95] {
        background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
        border-left-color: #68d391;
    }
}

/* Animation for enhanced user experience */
@keyframes fadeInUp-b-359hry7v95 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-card[b-359hry7v95],
.analytics-card[b-359hry7v95] {
    animation: fadeInUp-b-359hry7v95 0.6s ease forwards;
}

.stat-card:nth-child(1)[b-359hry7v95] { animation-delay: 0.1s; }
.stat-card:nth-child(2)[b-359hry7v95] { animation-delay: 0.2s; }
.stat-card:nth-child(3)[b-359hry7v95] { animation-delay: 0.3s; }
.stat-card:nth-child(4)[b-359hry7v95] { animation-delay: 0.4s; }
/* _content/AgriConnect.BlazorApp/Pages/ListingDetails.razor.rz.scp.css */
/* ==========================================================================
   LISTING DETAILS PAGE - PROFESSIONAL MOBILE-FIRST REDESIGN
   Inspired by Airbnb, superior to digikraal.co.za
   Using Bit Blazor UI components
   ========================================================================== */

/* ==========================================================================
   1. BASE CONTAINER & VARIABLES
   ========================================================================== */

.listing-details-page[b-pe8wv8qelq] {
    --primary-green: #059669;
    --primary-green-light: #10b981;
    --primary-green-dark: #047857;
    --accent-gold: #f59e0b;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-accent: #ecfdf5;
    --border-light: #e5e7eb;
    --border-medium: #d1d5db;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
    background: var(--bg-secondary);
    min-height: 100vh;
    padding-bottom: 80px; /* Space for mobile sticky footer */
}

/* Global: Remove all BitCard shadows and hover effects on this page */
.listing-details-page[b-pe8wv8qelq]  .bit-crd,
.listing-details-page[b-pe8wv8qelq]  .bit-crd-ctn {
    box-shadow: none !important;
    transition: none !important;
}

.listing-details-page[b-pe8wv8qelq]  .bit-crd:hover {
    box-shadow: none !important;
    transform: none !important;
}

@media (min-width: 768px) {
    .listing-details-page[b-pe8wv8qelq] {
        padding-bottom: 0;
    }
}

/* ==========================================================================
   2. LOADING STATE
   ========================================================================== */

.loading-container[b-pe8wv8qelq] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

.loading-info[b-pe8wv8qelq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 1rem;
}

@media (min-width: 768px) {
    .loading-container[b-pe8wv8qelq] {
        padding: 2rem;
    }
}

/* ==========================================================================
   3. HERO SECTION - Side-by-Side Layout
   ========================================================================== */

.hero-section[b-pe8wv8qelq] {
    background: var(--bg-primary);
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

@media (min-width: 768px) {
    .hero-section[b-pe8wv8qelq] {
        padding: 1rem 1.5rem;
    }
}

@media (min-width: 1024px) {
    .hero-section[b-pe8wv8qelq] {
        padding: 1.5rem 2rem;
        max-width: 1400px;
        margin: 0 auto;
    }
}

/* Hero Grid - Side by Side on Desktop */
.hero-grid[b-pe8wv8qelq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    .hero-grid[b-pe8wv8qelq] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        align-items: start;
    }
}

@media (min-width: 1024px) {
    .hero-grid[b-pe8wv8qelq] {
        grid-template-columns: 55% 45%;
        gap: 2rem;
    }
}

/* Hero Gallery - Compact */
.hero-gallery[b-pe8wv8qelq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .hero-gallery[b-pe8wv8qelq] {
        flex-direction: row;
        gap: 0.75rem;
    }
}

.hero-image-container[b-pe8wv8qelq] {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #f3f4f6;
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--radius-md);
}

@media (min-width: 768px) {
    .hero-image-container[b-pe8wv8qelq] {
        aspect-ratio: 4 / 3;
        max-height: 350px;
        flex: 1;
    }
}

@media (min-width: 1024px) {
    .hero-image-container[b-pe8wv8qelq] {
        max-height: 400px;
    }
}

.hero-image[b-pe8wv8qelq] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
}

.hero-placeholder[b-pe8wv8qelq] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    min-height: 300px;
}

/* Image Badges */
.image-badges[b-pe8wv8qelq] {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    z-index: 10;
}

.badge[b-pe8wv8qelq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    backdrop-filter: blur(8px);
}

.badge-featured[b-pe8wv8qelq] {
    background: rgba(245, 158, 11, 0.95);
    color: white;
}

.badge-urgent[b-pe8wv8qelq] {
    background: rgba(239, 68, 68, 0.95);
    color: white;
}

/* Image Counter */
.image-counter[b-pe8wv8qelq] {
    position: absolute;
    bottom: 16px;
    left: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    backdrop-filter: blur(4px);
}

/* Gallery Navigation */
.gallery-nav[b-pe8wv8qelq] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: all 0.2s ease;
    z-index: 10;
    opacity: 0;
}

.hero-image-container:hover .gallery-nav[b-pe8wv8qelq] {
    opacity: 1;
}

.gallery-nav:hover[b-pe8wv8qelq] {
    background: white;
    transform: translateY(-50%) scale(1.05);
}

.gallery-nav-prev[b-pe8wv8qelq] {
    left: 16px;
}

.gallery-nav-next[b-pe8wv8qelq] {
    right: 16px;
}

@media (max-width: 767px) {
    .gallery-nav[b-pe8wv8qelq] {
        opacity: 1;
        width: 36px;
        height: 36px;
    }
    
    .gallery-nav-prev[b-pe8wv8qelq] { left: 8px; }
    .gallery-nav-next[b-pe8wv8qelq] { right: 8px; }
}

/* Quick Actions Overlay */
.quick-actions-overlay[b-pe8wv8qelq] {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.quick-action-btn[b-pe8wv8qelq] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: all 0.2s ease;
    color: var(--text-secondary);
}

.quick-action-btn:hover[b-pe8wv8qelq] {
    background: white;
    transform: scale(1.05);
}

.quick-action-btn.active[b-pe8wv8qelq] {
    color: #ef4444;
}

/* Thumbnail Strip */
.thumbnail-strip[b-pe8wv8qelq] {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.thumbnail-strip[b-pe8wv8qelq]::-webkit-scrollbar {
    display: none;
}

@media (min-width: 768px) {
    .thumbnail-strip[b-pe8wv8qelq] {
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        max-height: 350px;
        width: 70px;
        flex-shrink: 0;
    }
}

.thumbnail[b-pe8wv8qelq] {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.6;
    padding: 0;
    background: none;
}

.thumbnail.active[b-pe8wv8qelq] {
    border-color: var(--primary-green);
    opacity: 1;
}

.thumbnail:hover[b-pe8wv8qelq] {
    opacity: 1;
}

.thumbnail img[b-pe8wv8qelq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbnail.more-btn[b-pe8wv8qelq] {
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-weight: 600;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

@media (min-width: 768px) {
    .thumbnail[b-pe8wv8qelq] {
        width: 64px;
        height: 64px;
    }
}

/* Hero Info Panel */
.hero-info-panel[b-pe8wv8qelq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0;
}

@media (min-width: 768px) {
    .hero-info-panel[b-pe8wv8qelq] {
        padding: 0.5rem 0;
        gap: 0.875rem;
    }
}

.hero-info-panel .meta-row[b-pe8wv8qelq] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hero-info-panel .category-tag[b-pe8wv8qelq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: var(--bg-accent);
    color: var(--primary-green-dark);
    border-radius: 16px;
    font-size: 0.7rem;
    font-weight: 600;
}

.hero-info-panel .listed-date[b-pe8wv8qelq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.hero-info-panel .listing-title[b-pe8wv8qelq] {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.3;
    margin: 0;
}

@media (min-width: 768px) {
    .hero-info-panel .listing-title[b-pe8wv8qelq] {
        font-size: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .hero-info-panel .listing-title[b-pe8wv8qelq] {
        font-size: 1.75rem;
    }
}

.hero-info-panel .price-section[b-pe8wv8qelq] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hero-info-panel .price-main[b-pe8wv8qelq] {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.hero-info-panel .price-main .currency[b-pe8wv8qelq] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary-green);
}

.hero-info-panel .price-main .amount[b-pe8wv8qelq] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--primary-green);
}

@media (min-width: 768px) {
    .hero-info-panel .price-main .amount[b-pe8wv8qelq] {
        font-size: 2rem;
    }
}

.hero-info-panel .price-main .unit[b-pe8wv8qelq] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-left: 2px;
}

.hero-info-panel .negotiable-badge[b-pe8wv8qelq] {
    background: var(--bg-accent);
    color: var(--primary-green-dark);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}

.hero-info-panel .availability-status[b-pe8wv8qelq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
}

.hero-info-panel .availability-status.in-stock[b-pe8wv8qelq] {
    background: #ecfdf5;
    color: #065f46;
}

.hero-info-panel .availability-status.low-stock[b-pe8wv8qelq] {
    background: #fef3c7;
    color: #92400e;
}

.hero-info-panel .availability-status.out-of-stock[b-pe8wv8qelq] {
    background: #fef2f2;
    color: #991b1b;
}

.location-quick[b-pe8wv8qelq] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Hero Actions */
.hero-actions[b-pe8wv8qelq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.action-row-compact[b-pe8wv8qelq] {
    display: flex;
    gap: 0.5rem;
}

.action-row-compact > *[b-pe8wv8qelq] {
    flex: 1;
}

.hero-info-panel .own-listing-notice[b-pe8wv8qelq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fef3c7;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: #92400e;
}

/* Seller Preview (Compact) */
.seller-preview[b-pe8wv8qelq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    margin-top: 0.25rem;
}

.seller-preview-info[b-pe8wv8qelq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.seller-preview-name[b-pe8wv8qelq] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.seller-preview .star-rating[b-pe8wv8qelq] {
    display: flex;
    align-items: center;
    gap: 1px;
}

/* ==========================================================================
   4. CONTENT WRAPPER & GRID
   ========================================================================== */

.content-wrapper[b-pe8wv8qelq] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.75rem;
}

@media (min-width: 768px) {
    .content-wrapper[b-pe8wv8qelq] {
        padding: 1rem 1.5rem;
    }
}

@media (min-width: 1024px) {
    .content-wrapper[b-pe8wv8qelq] {
        padding: 1.25rem 2rem;
    }
}

/* Main Grid */
.main-grid[b-pe8wv8qelq] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 1024px) {
    .main-grid[b-pe8wv8qelq] {
        grid-template-columns: 1fr 320px;
        gap: 1.5rem;
        align-items: start;
    }
}

/* Left Column - Cards take full width */
.left-column[b-pe8wv8qelq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.left-column > *[b-pe8wv8qelq] {
    width: 100%;
    max-width: 100%;
}

@media (min-width: 768px) {
    .left-column[b-pe8wv8qelq] {
        gap: 1rem;
    }
}

/* Full Width Cards (Key Details, Reviews) */
.full-width-card[b-pe8wv8qelq] {
    width: 100% !important;
}

/* Cards Row - Description next to Delivery/Location */
.cards-row[b-pe8wv8qelq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

@media (min-width: 768px) {
    .cards-row[b-pe8wv8qelq] {
        flex-direction: row;
        gap: 1rem;
        align-items: stretch;
    }
    
    .cards-row > .description-card[b-pe8wv8qelq] {
        flex: 1;
        min-width: 0;
    }
    
    .cards-row > .cards-stack[b-pe8wv8qelq] {
        flex: 0 0 320px;
        width: 320px;
    }
}

@media (min-width: 1024px) {
    .cards-row > .cards-stack[b-pe8wv8qelq] {
        flex: 0 0 360px;
        width: 360px;
    }
}

/* Cards Stack - Delivery + Location stacked vertically */
.cards-stack[b-pe8wv8qelq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

@media (min-width: 768px) {
    .cards-stack[b-pe8wv8qelq] {
        gap: 1rem;
    }
}

.cards-stack > *[b-pe8wv8qelq] {
    width: 100%;
}

/* Right Column (Sticky Sidebar) */
.right-column[b-pe8wv8qelq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.right-column > *[b-pe8wv8qelq] {
    width: 100%;
}

@media (min-width: 1024px) {
    .right-column[b-pe8wv8qelq] {
        position: sticky;
        top: 80px;
        gap: 1rem;
    }
}

/* ==========================================================================
   5. INFO CARDS - Uniform Width, No Elevation
   ========================================================================== */

.info-card[b-pe8wv8qelq] {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    border: none;
    overflow: hidden;
    width: 100%;
    box-shadow: none;
    transition: none;
}

.info-card:hover[b-pe8wv8qelq] {
    transform: none;
    box-shadow: none;
}

.info-card[b-pe8wv8qelq]  .bit-crd {
    border: none;
    box-shadow: none;
    width: 100%;
}

/* Remove any BitCard default shadows */
.info-card[b-pe8wv8qelq]  .bit-crd-ctn {
    box-shadow: none;
}

.card-content[b-pe8wv8qelq] {
    padding: 1rem;
}

.card-title[b-pe8wv8qelq] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
    padding: 1rem 1rem 0;
}

.card-header-with-action[b-pe8wv8qelq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem 0;
    margin-bottom: 0.75rem;
}

.card-header-with-action .card-title[b-pe8wv8qelq] {
    padding: 0;
    margin: 0;
}

.price-main .unit[b-pe8wv8qelq] {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.negotiable-badge[b-pe8wv8qelq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Availability Status */
.availability-status[b-pe8wv8qelq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
}

.availability-status.in-stock[b-pe8wv8qelq] {
    background: var(--bg-accent);
    border: 1px solid #a7f3d0;
}

.availability-status.in-stock[b-pe8wv8qelq]  i {
    color: var(--primary-green);
}

.availability-status.low-stock[b-pe8wv8qelq] {
    background: #fef3c7;
    border: 1px solid #fcd34d;
}

.availability-status.low-stock[b-pe8wv8qelq]  i {
    color: #f59e0b;
}

.availability-status.out-of-stock[b-pe8wv8qelq] {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.availability-status.out-of-stock[b-pe8wv8qelq]  i {
    color: #ef4444;
}

.availability-text[b-pe8wv8qelq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.availability-text strong[b-pe8wv8qelq] {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.availability-text .min-order[b-pe8wv8qelq] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ==========================================================================
   7. SPECS CARD - Compact
   ========================================================================== */

.specs-grid[b-pe8wv8qelq] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 0 1rem 1rem;
}

@media (min-width: 768px) {
    .specs-grid[b-pe8wv8qelq] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
}

.spec-item[b-pe8wv8qelq] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.spec-item.organic[b-pe8wv8qelq] {
    background: var(--bg-accent);
}

.spec-icon[b-pe8wv8qelq] {
    color: var(--primary-green);
    font-size: 16px;
    margin-top: 2px;
}

.spec-content[b-pe8wv8qelq] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.spec-label[b-pe8wv8qelq] {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.spec-value[b-pe8wv8qelq] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ==========================================================================
   8. DESCRIPTION CARD - Fills available height in row layout
   ========================================================================== */

.description-card[b-pe8wv8qelq] {
    display: flex;
    flex-direction: column;
}

.description-content[b-pe8wv8qelq] {
    padding: 0 1rem 1rem;
    flex: 1;
}

.description-content p[b-pe8wv8qelq] {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-primary);
    white-space: pre-wrap;
    margin: 0;
}

/* Tags Section */
.tags-section[b-pe8wv8qelq] {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tag-group[b-pe8wv8qelq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.tag-label[b-pe8wv8qelq] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.tag[b-pe8wv8qelq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
}

.tag-health[b-pe8wv8qelq] {
    background: #dbeafe;
    color: #1e40af;
}

.tag-cert[b-pe8wv8qelq] {
    background: #fef3c7;
    color: #92400e;
}

/* ==========================================================================
   9. DELIVERY CARD - Compact
   ========================================================================== */

.delivery-card[b-pe8wv8qelq] {
    display: flex;
    flex-direction: column;
}

.delivery-options[b-pe8wv8qelq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 1rem 1rem;
}

.delivery-option[b-pe8wv8qelq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}

.delivery-option.available[b-pe8wv8qelq] {
    background: var(--bg-accent);
    border-color: #a7f3d0;
}

.delivery-option.unavailable[b-pe8wv8qelq] {
    background: var(--bg-secondary);
    opacity: 0.7;
}

.option-icon[b-pe8wv8qelq] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

.delivery-option.available .option-icon[b-pe8wv8qelq] {
    color: var(--primary-green);
}

.option-content[b-pe8wv8qelq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.option-content strong[b-pe8wv8qelq] {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.option-content span[b-pe8wv8qelq] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.check-icon[b-pe8wv8qelq] {
    color: var(--primary-green);
    font-size: 18px;
}

.cancel-icon[b-pe8wv8qelq] {
    color: var(--text-muted);
    font-size: 18px;
}

/* ==========================================================================
   10. LOCATION CARD - Compact in stack layout
   ========================================================================== */

.location-card[b-pe8wv8qelq] {
    display: flex;
    flex-direction: column;
}

.map-container[b-pe8wv8qelq] {
    height: 220px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin: 0 1rem;
}

@media (min-width: 768px) {
    .map-container[b-pe8wv8qelq] {
        height: 200px;
    }
}

@media (min-width: 1024px) {
    .map-container[b-pe8wv8qelq] {
        height: 240px;
    }
}

.location-details[b-pe8wv8qelq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0.5rem 1rem 0.75rem;
}

.location-item[b-pe8wv8qelq] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.location-item[b-pe8wv8qelq]  i {
    color: var(--text-muted);
    font-size: 11px;
}

.no-location[b-pe8wv8qelq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 1rem;
    text-align: center;
}

.no-location p[b-pe8wv8qelq] {
    color: var(--text-muted);
    margin: 0;
    font-size: 0.75rem;
}

/* ==========================================================================
   11. REVIEWS CARD
   ========================================================================== */

.review-count[b-pe8wv8qelq] {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.reviews-loading[b-pe8wv8qelq] {
    display: flex;
    justify-content: center;
    padding: 1.5rem;
}

.no-reviews[b-pe8wv8qelq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 1.5rem 1rem;
    text-align: center;
}

.no-reviews h4[b-pe8wv8qelq] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.no-reviews p[b-pe8wv8qelq] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.reviews-list[b-pe8wv8qelq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 1rem 1rem;
    max-height: 300px;
    overflow-y: auto;
}

.review-item[b-pe8wv8qelq] {
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.review-header[b-pe8wv8qelq] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.review-meta[b-pe8wv8qelq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.reviewer-name[b-pe8wv8qelq] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.review-date[b-pe8wv8qelq] {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.review-rating[b-pe8wv8qelq] {
    flex-shrink: 0;
}

.review-text[b-pe8wv8qelq] {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

/* ==========================================================================
   12. SIDEBAR CARDS - Uniform, No Elevation
   ========================================================================== */

.sidebar-card[b-pe8wv8qelq] {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    border: none;
    overflow: hidden;
    width: 100%;
    box-shadow: none;
    transition: none;
}

.sidebar-card:hover[b-pe8wv8qelq] {
    transform: none;
    box-shadow: none;
}

/* Hide seller card on mobile since contact is in hero */
@media (max-width: 1023px) {
    .seller-card[b-pe8wv8qelq] {
        display: none;
    }
}

.sidebar-card[b-pe8wv8qelq]  .bit-crd {
    border: none;
    box-shadow: none;
    width: 100%;
}

.sidebar-card[b-pe8wv8qelq]  .bit-crd-ctn {
    box-shadow: none;
}

/* Seller Card - Compact */
.seller-header[b-pe8wv8qelq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.seller-info[b-pe8wv8qelq] {
    flex: 1;
    min-width: 0;
}

.seller-name[b-pe8wv8qelq] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.seller-rating[b-pe8wv8qelq] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.star-rating[b-pe8wv8qelq] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.review-rating[b-pe8wv8qelq] {
    display: flex;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
}

.rating-text[b-pe8wv8qelq] {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.seller-stats[b-pe8wv8qelq] {
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.seller-stats .stat[b-pe8wv8qelq] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.seller-stats .stat[b-pe8wv8qelq]  i {
    color: var(--text-muted);
    font-size: 12px;
}

/* Action Buttons - Compact */
.action-buttons[b-pe8wv8qelq] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.primary-cta[b-pe8wv8qelq] {
    height: 44px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    border-radius: var(--radius-sm) !important;
}

.secondary-cta[b-pe8wv8qelq] {
    height: 40px !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    border-radius: var(--radius-sm) !important;
    background: transparent !important;
    border: 2px solid var(--primary-green) !important;
    color: var(--primary-green) !important;
}

.secondary-cta:hover[b-pe8wv8qelq] {
    background: var(--bg-accent) !important;
}

/* Fix BitRating star display */
.seller-rating[b-pe8wv8qelq]  .bit-rtg {
    display: flex;
    align-items: center;
    gap: 2px;
}

.seller-rating[b-pe8wv8qelq]  .bit-rtg-btn {
    color: #fbbf24 !important;
    font-size: 16px;
}

.seller-rating[b-pe8wv8qelq]  .bit-rtg-btn i,
.seller-rating[b-pe8wv8qelq]  .bit-rtg i {
    color: #fbbf24 !important;
}

/* Review rating fix */
.review-rating[b-pe8wv8qelq]  .bit-rtg-btn {
    color: #fbbf24 !important;
    font-size: 14px;
}

.review-rating[b-pe8wv8qelq]  .bit-rtg-btn i {
    color: #fbbf24 !important;
}

.action-row[b-pe8wv8qelq] {
    display: flex;
    gap: 8px;
}

.action-btn[b-pe8wv8qelq] {
    flex: 1;
    height: 40px !important;
    border-radius: var(--radius-sm) !important;
}

.own-listing-notice[b-pe8wv8qelq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.sign-in-prompt[b-pe8wv8qelq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 0.75rem 0;
}

.sign-in-prompt h4[b-pe8wv8qelq] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.sign-in-prompt p[b-pe8wv8qelq] {
    margin: 0;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.report-section[b-pe8wv8qelq] {
    padding: 0 1rem 0.75rem;
    text-align: center;
}

/* Safety Card */
.safety-card[b-pe8wv8qelq] {
    background: #fffbeb;
    border-color: #fcd34d;
}

.safety-title[b-pe8wv8qelq] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #92400e;
    margin: 0;
    padding: 0.75rem 1rem;
}

.safety-list[b-pe8wv8qelq] {
    margin: 0;
    padding: 0 1rem 0.75rem 2rem;
    font-size: 0.7rem;
    color: #92400e;
    line-height: 1.6;
}

.safety-list li[b-pe8wv8qelq] {
    margin-bottom: 2px;
}

/* ==========================================================================
   13. MORE FROM SELLER SECTION - Compact
   ========================================================================== */

.more-from-seller-section[b-pe8wv8qelq] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.section-header[b-pe8wv8qelq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.section-header h2[b-pe8wv8qelq] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.listings-carousel[b-pe8wv8qelq] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .listings-carousel[b-pe8wv8qelq] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.listing-card-mini[b-pe8wv8qelq] {
    cursor: pointer;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-primary);
    border: none;
    transition: none;
    box-shadow: none;
}

.listing-card-mini:hover[b-pe8wv8qelq] {
    transform: none;
    border-color: transparent;
}

.listing-card-mini[b-pe8wv8qelq]  .bit-crd,
.listing-card-mini[b-pe8wv8qelq]  .bit-crd-ctn {
    border: none;
    box-shadow: none !important;
}

.mini-image[b-pe8wv8qelq] {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--bg-secondary);
}

.mini-image img[b-pe8wv8qelq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-content[b-pe8wv8qelq] {
    padding: 8px 10px;
}

.mini-title[b-pe8wv8qelq] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-price[b-pe8wv8qelq] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-green);
    margin: 0 0 2px 0;
}

.mini-location[b-pe8wv8qelq] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* ==========================================================================
   14. MOBILE STICKY FOOTER CTA - Hidden on tablet+ since hero has contact
   ========================================================================== */

.mobile-footer-cta[b-pe8wv8qelq] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-light);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

/* Hide footer CTA on tablet and up since contact is in hero */
@media (min-width: 768px) {
    .mobile-footer-cta[b-pe8wv8qelq] {
        display: none;
    }
}

.footer-price[b-pe8wv8qelq] {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.footer-currency[b-pe8wv8qelq] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-green);
}

.footer-amount[b-pe8wv8qelq] {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary-green);
    line-height: 1;
}

.footer-unit[b-pe8wv8qelq] {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.footer-cta-btn[b-pe8wv8qelq] {
    height: 42px !important;
    padding: 0 20px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    border-radius: var(--radius-sm) !important;
    white-space: nowrap;
}

/* ==========================================================================
   15. MODALS
   ========================================================================== */

.image-preview-modal[b-pe8wv8qelq]  .bit-mdl-ctn {
    max-width: 95vw !important;
    max-height: 95vh !important;
}

/* ==========================================================================
   16. RESPONSIVE UTILITIES - Desktop shows sidebar
   ========================================================================== */

@media (max-width: 1023px) {
    .right-column[b-pe8wv8qelq] {
        display: none;
    }
}
/* _content/AgriConnect.BlazorApp/Pages/Messages.razor.rz.scp.css */
/* MessagesV2.razor.css - Clean, Modern, Mobile-First Messaging Interface */

/* === GLOBAL: Hide layout elements on Messages page (mobile) === */
@media (max-width: 768px) {
    /* When messages-fullscreen-mode class is on body, hide layout elements */
    body.messages-fullscreen-mode .site-footer[b-dgcv4rrnuv] {
        display: none !important;
    }

    body.messages-fullscreen-mode .bit-header[b-dgcv4rrnuv] {
        display: none !important;
    }

    body.messages-fullscreen-mode .modern-layout-bit[b-dgcv4rrnuv] {
        min-height: 100vh;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }

    body.messages-fullscreen-mode .main-content[b-dgcv4rrnuv] {
        flex: 1;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }

    /* Prevent body scroll */
    body.messages-fullscreen-mode[b-dgcv4rrnuv] {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }
}

/* === Page Layout === */
.messages-page[b-dgcv4rrnuv] {
    display: grid;
    grid-template-columns: 340px 1fr;
    height: calc(100vh - 64px);
    background: var(--bit-clr-bg-pri);
    overflow: hidden;
}

    .messages-page:has(.info-panel)[b-dgcv4rrnuv] {
        grid-template-columns: 340px 1fr 320px;
    }


/* === Conversations Panel === */
.conversations-panel[b-dgcv4rrnuv] {
    display: flex;
    flex-direction: column;
    background: var(--bit-clr-bg-sec);
    border-right: 1px solid var(--bit-clr-brd-pri);
    overflow: hidden;
}

.panel-header[b-dgcv4rrnuv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bit-clr-brd-pri);
    background: var(--bit-clr-bg-pri);
}

.panel-title[b-dgcv4rrnuv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bit-clr-fg-pri);
}

    .panel-title .bit-icon[b-dgcv4rrnuv] {
        font-size: 1.25rem;
        color: var(--bit-clr-pri-main);
    }

.header-actions[b-dgcv4rrnuv] {
    display: flex;
    gap: 0.25rem;
}

.search-box[b-dgcv4rrnuv] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bit-clr-brd-pri);
}

.conversations-list[b-dgcv4rrnuv] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    /* ✅ Touch-friendly scrolling */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

    .conversations-list[b-dgcv4rrnuv]::-webkit-scrollbar {
        width: 6px;
    }

    .conversations-list[b-dgcv4rrnuv]::-webkit-scrollbar-thumb {
        background: var(--bit-clr-brd-sec);
        border-radius: 3px;
    }

.loading-placeholder[b-dgcv4rrnuv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
}

.empty-state[b-dgcv4rrnuv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--bit-clr-fg-sec);
}

    .empty-state .empty-icon[b-dgcv4rrnuv] {
        font-size: 3rem;
        opacity: 0.3;
        margin-bottom: 1rem;
    }

    .empty-state p[b-dgcv4rrnuv] {
        margin: 0 0 1rem;
    }

/* === Chat Panel === */
.chat-panel[b-dgcv4rrnuv] {
    display: flex;
    flex-direction: column;
    background: var(--bit-clr-bg-pri);
    overflow: hidden;
}

.welcome-state[b-dgcv4rrnuv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 2rem;
    color: var(--bit-clr-fg-sec);
}

    .welcome-state .welcome-icon[b-dgcv4rrnuv] {
        font-size: 4rem;
        opacity: 0.2;
        margin-bottom: 1.5rem;
    }

    .welcome-state h3[b-dgcv4rrnuv] {
        margin: 0 0 0.5rem;
        font-weight: 600;
        color: var(--bit-clr-fg-pri);
    }

    .welcome-state p[b-dgcv4rrnuv] {
        margin: 0 0 1.5rem;
        opacity: 0.7;
    }

/* === Chat Header === */
.chat-header[b-dgcv4rrnuv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bit-clr-bg-sec);
    border-bottom: 1px solid var(--bit-clr-brd-pri);
    min-height: 64px;
    /* ✅ Prevent tap highlighting on mobile */
    -webkit-tap-highlight-color: transparent;
}

.chat-header-left[b-dgcv4rrnuv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0; /* ✅ Enable text truncation */
}

.chat-header-right[b-dgcv4rrnuv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0; /* ✅ Prevent shrinking on mobile */
}

.connection-status[b-dgcv4rrnuv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

    .connection-status.online[b-dgcv4rrnuv] {
        color: var(--bit-clr-suc-main);
    }

    .connection-status .bit-icon[b-dgcv4rrnuv] {
        font-size: 1rem;
    }

/* === Messages Area === */
.messages-area[b-dgcv4rrnuv] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
    scroll-behavior: smooth;
    /* ✅ Optimized mobile scrolling */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    width: 95%;
}

    .messages-area[b-dgcv4rrnuv]::-webkit-scrollbar {
        width: 6px;
    }

    .messages-area[b-dgcv4rrnuv]::-webkit-scrollbar-thumb {
        background: var(--bit-clr-brd-sec);
        border-radius: 3px;
    }

.messages-loading[b-dgcv4rrnuv] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* === Typing Indicator === */
.typing-indicator[b-dgcv4rrnuv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
}

.typing-dots[b-dgcv4rrnuv] {
    display: flex;
    gap: 3px;
    background: var(--bit-clr-bg-sec);
    padding: 0.5rem 0.75rem;
    border-radius: 1rem;
}

    .typing-dots span[b-dgcv4rrnuv] {
        width: 6px;
        height: 6px;
        background: var(--bit-clr-fg-ter);
        border-radius: 50%;
        animation: bounce-b-dgcv4rrnuv 1.4s infinite ease-in-out;
    }

        .typing-dots span:nth-child(2)[b-dgcv4rrnuv] {
            animation-delay: 0.2s;
        }

        .typing-dots span:nth-child(3)[b-dgcv4rrnuv] {
            animation-delay: 0.4s;
        }

@keyframes bounce-b-dgcv4rrnuv {
    0%, 60%, 100% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-6px);
    }
}

.typing-text[b-dgcv4rrnuv] {
    font-size: 0.75rem;
    color: var(--bit-clr-fg-ter);
}

/* === Message Composer === */
.message-composer[b-dgcv4rrnuv] {
    padding: 0.75rem 1rem;
    background: var(--bit-clr-bg-sec);
    border-top: 1px solid var(--bit-clr-brd-pri);
    /* ✅ Prevent composer from being hidden by mobile keyboard */
    position: sticky;
    bottom: 0;
    z-index: 10;
    /* ✅ Ensure it stays visible on mobile */
    width: 100%;
}

.reply-preview[b-dgcv4rrnuv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    background: rgba(var(--bit-clr-pri-main-rgb, 0, 120, 212), 0.08);
    border-left: 3px solid var(--bit-clr-pri-main);
    border-radius: 4px;
}

.reply-content[b-dgcv4rrnuv] {
    flex: 1;
    min-width: 0;
}

    .reply-content small[b-dgcv4rrnuv] {
        color: var(--bit-clr-pri-main);
        font-size: 0.75rem;
        font-weight: 500;
    }

    .reply-content p[b-dgcv4rrnuv] {
        margin: 0.25rem 0 0;
        font-size: 0.875rem;
        color: var(--bit-clr-fg-sec);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.composer-row[b-dgcv4rrnuv] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    width: 98%;
}

.message-input[b-dgcv4rrnuv] {
    flex: 1;
    min-width: 0; /* ✅ Enable proper flex shrinking */
}

    /* ✅ Override BitTextField styles for mobile */
    .message-input[b-dgcv4rrnuv]  textarea,
    .message-input[b-dgcv4rrnuv]  .bit-txt-fld {
        width: 100% !important;
        max-width: 100% !important;
    }

/* Native message input styling */
.message-input-native[b-dgcv4rrnuv] {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--bit-clr-brd-pri);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    outline: none;
    background: var(--bit-clr-bg-pri);
    color: var(--bit-clr-fg-pri);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .message-input-native:focus[b-dgcv4rrnuv] {
        border-color: var(--bit-clr-pri-main);
        box-shadow: 0 0 0 2px rgba(var(--bit-clr-pri-main-rgb, 0, 120, 212), 0.15);
    }

    .message-input-native:disabled[b-dgcv4rrnuv] {
        background: var(--bit-clr-bg-dis);
        color: var(--bit-clr-fg-dis);
        cursor: not-allowed;
    }

    .message-input-native[b-dgcv4rrnuv]::placeholder {
        color: var(--bit-clr-fg-ter);
    }

/* === Info Panel === */
.info-panel[b-dgcv4rrnuv] {
    background: var(--bit-clr-bg-sec);
    border-left: 1px solid var(--bit-clr-brd-pri);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* === Emoji Picker === */
.overlay[b-dgcv4rrnuv] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* ✅ Prevent scroll on background */
    overscroll-behavior: contain;
}

.emoji-picker[b-dgcv4rrnuv] {
    background: var(--bit-clr-bg-pri);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    max-width: 90vw;
    max-height: 80vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* === Mobile Buttons === */
.mobile-close-btn[b-dgcv4rrnuv],
.mobile-menu-btn[b-dgcv4rrnuv] {
    display: none;
    /* ✅ Touch-friendly tap target */
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

/* === MOBILE OPTIMIZATIONS === */
@media (max-width: 768px) {
    /* ==================== 
       CORE LAYOUT - WhatsApp/iMessage Style
       ==================== */
    .messages-page[b-dgcv4rrnuv] {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height for mobile browsers */
        width: 100%;
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #ffffff;
    }

    /* ====================
       CONVERSATIONS SIDEBAR (Slide-out Panel)
       ==================== */
    .conversations-panel[b-dgcv4rrnuv] {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: 100vw;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background: #ffffff;
        display: flex;
        flex-direction: column;
        /* Safe area for notched devices */
        padding-top: env(safe-area-inset-top, 0);
    }

        .conversations-panel.is-open[b-dgcv4rrnuv] {
            transform: translateX(0);
            box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
        }

    /* Panel header - styled like WhatsApp */
    .panel-header[b-dgcv4rrnuv] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        color: white;
        min-height: 56px;
        border-bottom: none;
    }

    .panel-title[b-dgcv4rrnuv] {
        color: white;
        font-size: 1.125rem;
        font-weight: 600;
    }

        .panel-title .bit-icon[b-dgcv4rrnuv] {
            color: white;
        }

    /* Close button in header */
    .mobile-close-btn[b-dgcv4rrnuv] {
        display: flex !important;
        color: white !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border-radius: 50%;
        width: 40px;
        height: 40px;
    }

        .mobile-close-btn:hover[b-dgcv4rrnuv],
        .mobile-close-btn:active[b-dgcv4rrnuv] {
            background: rgba(255, 255, 255, 0.25) !important;
        }

    /* Search box */
    .search-box[b-dgcv4rrnuv] {
        padding: 12px 16px;
        background: #f5f5f5;
        border-bottom: 1px solid #e5e5e5;
    }

    /* Conversations list */
    .conversations-list[b-dgcv4rrnuv] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background: #ffffff;
    }

    /* ====================
       CHAT PANEL - Main Area
       ==================== */
    .chat-panel[b-dgcv4rrnuv] {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: relative;
        background: #ece5dd; /* WhatsApp-style chat background */
    }

    /* Chat header - WhatsApp style */
    .chat-header[b-dgcv4rrnuv] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        min-height: 56px;
        flex-shrink: 0;
        border-bottom: none;
        /* Safe area for notch */
        padding-top: max(8px, env(safe-area-inset-top));
    }

    .chat-header-left[b-dgcv4rrnuv] {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        min-width: 0;
    }

    /* Menu button to open sidebar */
    .mobile-menu-btn[b-dgcv4rrnuv] {
        display: flex !important;
        color: white !important;
        background: transparent !important;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    /* User info in header */
    .chat-header[b-dgcv4rrnuv]  .bit-psn {
        flex: 1;
        min-width: 0;
    }

    .chat-header[b-dgcv4rrnuv]  .bit-psn-txt {
        color: white !important;
    }

    .chat-header[b-dgcv4rrnuv]  .bit-psn-sec-txt {
        color: rgba(255, 255, 255, 0.85) !important;
        font-size: 0.75rem;
    }

    .chat-header-right[b-dgcv4rrnuv] {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
    }

        .chat-header-right button[b-dgcv4rrnuv] {
            color: white !important;
        }

    .connection-status.online[b-dgcv4rrnuv] {
        color: white;
    }

    /* ====================
       MESSAGES AREA
       ==================== */
    .messages-area[b-dgcv4rrnuv] {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 12px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background: #ece5dd url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4cfc4' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        width: 100%;
        min-height: 0;
    }

    .messages-loading[b-dgcv4rrnuv] {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        background: transparent;
    }

    /* Offline message */
    .messages-area[b-dgcv4rrnuv]  .bit-msg {
        margin: 8px 12px;
        border-radius: 8px;
        font-size: 0.8125rem;
    }

    /* ====================
       MESSAGE COMPOSER - Fixed Bottom
       ==================== */
    .message-composer[b-dgcv4rrnuv] {
        display: flex;
        flex-direction: column;
        padding: 8px 12px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
        background: #f0f0f0;
        border-top: 1px solid #e0e0e0;
        flex-shrink: 0;
        z-index: 100;
    }

    /* Reply preview */
    .reply-preview[b-dgcv4rrnuv] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        margin-bottom: 8px;
        background: #ffffff;
        border-left: 4px solid #22c55e;
        border-radius: 0 8px 8px 0;
    }

    .reply-content[b-dgcv4rrnuv] {
        flex: 1;
        min-width: 0;
    }

        .reply-content small[b-dgcv4rrnuv] {
            font-size: 0.6875rem;
            color: #22c55e;
            font-weight: 600;
        }

        .reply-content p[b-dgcv4rrnuv] {
            margin: 2px 0 0;
            font-size: 0.8125rem;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    /* Composer row - input + send button */
    .composer-row[b-dgcv4rrnuv] {
        display: flex;
        align-items: flex-end;
        gap: 8px;
        width: 100%;
    }

    /* Message input - WhatsApp style */
    .message-input[b-dgcv4rrnuv] {
        flex: 1;
        min-width: 0;
    }

        .message-input[b-dgcv4rrnuv]  .bit-txt-fld-wrp {
            border-radius: 24px !important;
            background: #ffffff !important;
            border: none !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
        }

        .message-input[b-dgcv4rrnuv]  textarea {
            padding: 10px 16px !important;
            font-size: 1rem !important;
            line-height: 1.4 !important;
            max-height: 120px !important;
            border-radius: 24px !important;
        }

        .message-input[b-dgcv4rrnuv]  .bit-txt-fld {
            border-radius: 24px !important;
        }

    /* Send button - circular like WhatsApp */
    .message-composer > .composer-row > button[b-dgcv4rrnuv],
    .composer-row[b-dgcv4rrnuv]  .bit-btn {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    }

        .composer-row[b-dgcv4rrnuv]  .bit-btn .bit-icon {
            font-size: 1.25rem !important;
        }

    /* ====================
       WELCOME / EMPTY STATES
       ==================== */
    .welcome-state[b-dgcv4rrnuv] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 24px;
        text-align: center;
        background: #ece5dd;
    }

        .welcome-state .welcome-icon[b-dgcv4rrnuv] {
            font-size: 64px;
            opacity: 0.3;
            margin-bottom: 16px;
            color: #22c55e;
        }

        .welcome-state h3[b-dgcv4rrnuv] {
            font-size: 1.25rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
        }

        .welcome-state p[b-dgcv4rrnuv] {
            color: #666;
            font-size: 0.9375rem;
        }

    .empty-state[b-dgcv4rrnuv] {
        padding: 32px 24px;
    }

        .empty-state .empty-icon[b-dgcv4rrnuv] {
            font-size: 48px;
            color: #22c55e;
            opacity: 0.5;
        }

    /* ====================
       INFO PANEL (Full Screen Overlay)
       ==================== */
    .info-panel[b-dgcv4rrnuv] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1001;
        background: #ffffff;
        animation: slideInRight-b-dgcv4rrnuv 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes slideInRight-b-dgcv4rrnuv {
        from {
            transform: translateX(100%);
        }
        to {
            transform: translateX(0);
        }
    }

    /* ====================
       TYPING INDICATOR
       ==================== */
    .typing-indicator[b-dgcv4rrnuv] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        margin: 4px 0;
    }

    .typing-dots[b-dgcv4rrnuv] {
        background: #ffffff;
        padding: 12px 16px;
        border-radius: 18px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    /* ====================
       HIDE DESKTOP ELEMENTS
       ==================== */
    .header-actions .mobile-close-btn[b-dgcv4rrnuv] {
        display: flex !important;
    }
}

/* === TABLET (Portrait) === */
@media (min-width: 769px) and (max-width: 1024px) {
    .messages-page[b-dgcv4rrnuv] {
        grid-template-columns: 280px 1fr;
    }

        .messages-page:has(.info-panel)[b-dgcv4rrnuv] {
            /* ✅ Hide info panel on smaller tablets, show as overlay */
            grid-template-columns: 280px 1fr;
        }

    .info-panel[b-dgcv4rrnuv] {
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        width: 320px;
        z-index: 50;
        animation: slideInRight-b-dgcv4rrnuv 0.3s ease-out;
    }

    .conversations-panel[b-dgcv4rrnuv] {
        /* ✅ Slightly wider conversations on tablet */
        min-width: 280px;
    }
}

/* === LARGE TABLETS (Landscape) === */
@media (min-width: 1025px) and (max-width: 1439px) {
    .messages-page[b-dgcv4rrnuv] {
        grid-template-columns: 320px 1fr;
    }

        .messages-page:has(.info-panel)[b-dgcv4rrnuv] {
            grid-template-columns: 320px 1fr 300px;
        }
}

/* === LARGE SCREENS === */
@media (min-width: 1440px) {
    .messages-page[b-dgcv4rrnuv] {
        grid-template-columns: 380px 1fr;
        max-width: 1920px;
        margin: 0 auto;
    }

        .messages-page:has(.info-panel)[b-dgcv4rrnuv] {
            grid-template-columns: 380px 1fr 360px;
        }

    /* ✅ Max width for better readability on large screens */
    .messages-area[b-dgcv4rrnuv] {
        max-width: 1200px;
        margin: 0 auto;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    .conversations-panel[b-dgcv4rrnuv] {
        transition: none;
    }

    .typing-dots span[b-dgcv4rrnuv] {
        animation: none;
        opacity: 0.5;
    }

    .messages-area[b-dgcv4rrnuv] {
        scroll-behavior: auto;
    }

    .info-panel[b-dgcv4rrnuv] {
        animation: none;
    }

    @keyframes slideInRight-b-dgcv4rrnuv {
        from, to {
            transform: translateX(0);
        }
    }
}

/* === DARK MODE OPTIMIZATIONS === */
@media (prefers-color-scheme: dark) {
    .overlay[b-dgcv4rrnuv] {
        background: rgba(0, 0, 0, 0.6);
    }

    .conversations-panel.is-open[b-dgcv4rrnuv] {
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
    }
}

/* === HIGH CONTRAST MODE === */
@media (prefers-contrast: high) {
    .conversations-panel[b-dgcv4rrnuv] {
        border-right-width: 2px;
    }

    .chat-header[b-dgcv4rrnuv] {
        border-bottom-width: 2px;
    }

    .message-composer[b-dgcv4rrnuv] {
        border-top-width: 2px;
    }
}

/* === TOUCH DEVICE OPTIMIZATIONS === */
@media (hover: none) and (pointer: coarse) {
    /* ✅ Larger tap targets for touch devices */
    .header-actions button[b-dgcv4rrnuv] {
        min-width: 44px;
        min-height: 44px;
    }

    .chat-header-right button[b-dgcv4rrnuv] {
        min-width: 44px;
        min-height: 44px;
    }

    /* ✅ Better feedback on touch */
    .conversations-list[b-dgcv4rrnuv] {
        scroll-padding: 1rem;
    }

    /* ✅ Prevent overscroll bounce */
    body[b-dgcv4rrnuv] {
        overscroll-behavior-y: none;
    }
}

/* === iOS SPECIFIC === */
@supports (-webkit-touch-callout: none) {
    /* ✅ iOS safe area support */
    .messages-page[b-dgcv4rrnuv] {
        height: calc(100vh - 64px - env(safe-area-inset-bottom));
    }

    .conversations-panel.is-open[b-dgcv4rrnuv] {
        height: 100vh;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    /* ✅ FIXED: iOS keyboard handling */
    @media (max-width: 768px) {
        .chat-panel[b-dgcv4rrnuv] {
            /* ✅ Use full viewport on iOS */
            height: 100%;
            min-height: 0;
        }

        .messages-area[b-dgcv4rrnuv] {
            /* ✅ Allow scrolling within available space */
            flex: 1;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            min-height: 0;
        }

        .message-composer[b-dgcv4rrnuv] {
            /* ✅ Stay at bottom on iOS */
            position: sticky;
            bottom: 0;
            /* ✅ Account for iOS home indicator */
            padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
            /* ✅ Ensure visibility */
            background: var(--bit-clr-bg-sec);
            z-index: 100;
        }
        /* ✅ FIXED: Handle iOS keyboard */
        .keyboard-visible .message-composer[b-dgcv4rrnuv] {
            /* ✅ Adjust for keyboard */
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
        }
    }
    /* ✅ Prevent iOS bounce scroll on body */
    body[b-dgcv4rrnuv] {
        position: fixed;
        width: 100%;
        overflow: hidden;
    }
}

/* === LANDSCAPE MOBILE === */
@media (max-width: 926px) and (orientation: landscape) {
    .messages-page[b-dgcv4rrnuv] {
        height: 100vh;
    }

    .welcome-state[b-dgcv4rrnuv] {
        padding: 1rem;
    }

        .welcome-state .welcome-icon[b-dgcv4rrnuv] {
            font-size: 2.5rem;
            margin-bottom: 0.75rem;
        }

    .empty-state[b-dgcv4rrnuv] {
        padding: 1.5rem 1rem;
    }

    /* ✅ Compact composer for landscape */
    .message-composer[b-dgcv4rrnuv] {
        padding: 0.375rem 0.75rem;
    }

    .chat-header[b-dgcv4rrnuv] {
        min-height: 48px;
        padding: 0.375rem 0.75rem;
    }

    /* ✅ FIXED: Ensure composer visible in landscape */
    .chat-panel[b-dgcv4rrnuv] {
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .messages-area[b-dgcv4rrnuv] {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
    }

    .message-composer[b-dgcv4rrnuv] {
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        z-index: 100;
        background: var(--bit-clr-bg-sec);
    }
}

/* === FALLBACK FOR OLDER MOBILE BROWSERS === */
@media (max-width: 768px) {
    /* ✅ FIXED: Fallback layout for devices without visualViewport */
    @supports not (height: 100dvh) {
        .messages-page[b-dgcv4rrnuv] {
            height: calc(100vh - 60px);
        }

        .chat-panel[b-dgcv4rrnuv] {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .messages-area[b-dgcv4rrnuv] {
            flex: 1;
            overflow-y: auto;
            min-height: 0;
        }

        .message-composer[b-dgcv4rrnuv] {
            flex-shrink: 0;
            position: sticky;
            bottom: 0;
            z-index: 100;
        }
    }
}

/* === PRINT STYLES === */
@media print {
    .conversations-panel[b-dgcv4rrnuv],
    .info-panel[b-dgcv4rrnuv],
    .message-composer[b-dgcv4rrnuv],
    .mobile-close-btn[b-dgcv4rrnuv],
    .mobile-menu-btn[b-dgcv4rrnuv] {
        display: none !important;
    }

    .messages-page[b-dgcv4rrnuv] {
        display: block;
        height: auto;
    }

    .messages-area[b-dgcv4rrnuv] {
        overflow: visible;
        padding: 0;
    }
}

/* === MOBILE CONTEXT MENU === */
.mobile-context-menu[b-dgcv4rrnuv] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bit-clr-bg-pri);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    padding: 1rem;
    animation: slideUp-b-dgcv4rrnuv 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* ✅ Safe area support */
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

@keyframes slideUp-b-dgcv4rrnuv {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.mobile-context-menu .menu-item[b-dgcv4rrnuv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 1rem;
    color: var(--bit-clr-fg-pri);
    border-radius: 8px;
    transition: background 0.2s;
    /* ✅ Touch-friendly tap target */
    min-height: 48px;
}

    .mobile-context-menu .menu-item:active[b-dgcv4rrnuv] {
        background: var(--bit-clr-bg-sec);
    }

    .mobile-context-menu .menu-item i[b-dgcv4rrnuv] {
        font-size: 1.125rem;
        width: 20px;
        color: var(--bit-clr-pri-main);
    }

.mobile-context-menu .menu-close[b-dgcv4rrnuv] {
    display: block;
    width: 100%;
    padding: 0.875rem;
    margin-top: 0.5rem;
    border: 1px solid var(--bit-clr-brd-pri);
    background: var(--bit-clr-bg-sec);
    color: var(--bit-clr-fg-pri);
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    /* ✅ Touch-friendly */
    min-height: 48px;
}

/* === KEYBOARD VISIBLE STATE === */
.messages-page.keyboard-visible[b-dgcv4rrnuv] {
    /* ✅ Adjust height when keyboard is visible */
    height: calc(var(--viewport-height, 100vh) - 64px);
}

    /* ✅ FIXED: Ensure composer stays visible when keyboard is open */
    .messages-page.keyboard-visible .chat-panel[b-dgcv4rrnuv] {
        /* ✅ Adjust to available viewport */
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .messages-page.keyboard-visible .messages-area[b-dgcv4rrnuv] {
        /* ✅ Shrink to make room for keyboard */
        flex: 1;
        overflow-y: auto;
        min-height: 0; /* ✅ Allow flex shrinking */
    }

    .messages-page.keyboard-visible .message-composer[b-dgcv4rrnuv] {
        /* ✅ Ensure composer stays above keyboard */
        position: sticky;
        bottom: 0;
        background: var(--bit-clr-bg-sec);
        z-index: 100;
        /* ✅ Add shadow when keyboard is open */
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    }

/* === LOW BATTERY MODE === */
.low-battery-mode *[b-dgcv4rrnuv] {
    /* ✅ Disable animations to save battery */
    animation: none !important;
    transition: none !important;
}

.low-battery-mode .typing-dots span[b-dgcv4rrnuv] {
    /* ✅ Static dots instead of animated */
    animation: none;
    opacity: 0.5;
}

/* === MESSAGE BUBBLE HIGHLIGHTS (for scroll-to) === */
.message-bubble.highlighted[b-dgcv4rrnuv] {
    background: rgba(var(--bit-clr-pri-main-rgb, 0, 120, 212), 0.1);
    animation: highlight-b-dgcv4rrnuv 2s ease-out;
}

@keyframes highlight-b-dgcv4rrnuv {
    0%, 100% {
        background: transparent;
    }

    50% {
        background: rgba(var(--bit-clr-pri-main-rgb, 0, 120, 212), 0.2);
    }
}

/* === TOUCH FEEDBACK === */
@media (hover: none) and (pointer: coarse) {
    button:active[b-dgcv4rrnuv],
    .card-btn-primary:active[b-dgcv4rrnuv],
    .card-btn-secondary:active[b-dgcv4rrnuv] {
        /* ✅ Visual feedback on touch */
        transform: scale(0.98);
        opacity: 0.8;
    }
}

/* === VIRTUAL KEYBOARD SPACER === */
.keyboard-spacer[b-dgcv4rrnuv] {
    height: env(keyboard-inset-height, 0px);
    transition: height 0.3s ease;
}

/* === MOBILE PULL INDICATOR === */
.mobile-pull-indicator[b-dgcv4rrnuv] {
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: var(--bit-clr-brd-sec);
    border-radius: 2px;
    opacity: 0.5;
}

/* === MOBILE FLOATING ACTION BUTTON === */
.mobile-fab[b-dgcv4rrnuv] {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bit-clr-pri-main);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 50;
    transition: transform 0.3s ease;
}

    .mobile-fab:active[b-dgcv4rrnuv] {
        transform: scale(0.9);
    }

@media (max-width: 768px) {
    .mobile-fab[b-dgcv4rrnuv] {
        display: flex;
    }
}

/* === MOBILE TOAST NOTIFICATIONS === */
.mobile-toast[b-dgcv4rrnuv] {
    position: fixed;
    top: calc(1rem + env(safe-area-inset-top));
    left: 1rem;
    right: 1rem;
    background: var(--bit-clr-bg-pri);
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 1002;
    animation: slideDown-b-dgcv4rrnuv 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDown-b-dgcv4rrnuv {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* === MOBILE LOADING SPINNER === */
.mobile-loading[b-dgcv4rrnuv] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1003;
}

.mobile-loading-spinner[b-dgcv4rrnuv] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-dgcv4rrnuv 1s linear infinite;
}

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

/* === MOBILE EMPTY STATE === */
@media (max-width: 768px) {
    .empty-state[b-dgcv4rrnuv],
    .welcome-state[b-dgcv4rrnuv] {
        /* ✅ More compact on mobile */
        min-height: 50vh;
    }
}

/* === ANDROID-SPECIFIC === */
@supports (-webkit-appearance: none) {
    /* ✅ Android Chrome-specific fixes */
    input[b-dgcv4rrnuv],
    textarea[b-dgcv4rrnuv] {
        -webkit-appearance: none;
        appearance: none;
    }
}

/* === FOLDABLE DEVICE SUPPORT === */
@media (horizontal-viewport-segments: 2) {
    .messages-page[b-dgcv4rrnuv] {
        /* ✅ Adjust layout for foldable devices */
        grid-template-columns: env(viewport-segment-width 0 0) 1fr;
    }
}

/* === NOTCH/CUTOUT SUPPORT === */
@supports (padding: env(safe-area-inset-top)) {
    .messages-page[b-dgcv4rrnuv] {
        padding-top: env(safe-area-inset-top);
    }

    .conversations-panel[b-dgcv4rrnuv] {
        padding-top: env(safe-area-inset-top);
    }
}

/* === PERFORMANCE HINTS === */
.messages-area[b-dgcv4rrnuv],
.conversations-list[b-dgcv4rrnuv] {
    /* ✅ GPU acceleration for smooth scrolling */
    transform: translateZ(0);
    will-change: scroll-position;
}

.message-bubble[b-dgcv4rrnuv] {
    /* ✅ Optimize individual message rendering */
    contain: layout style paint;
}

/* === ACCESSIBILITY - HIGH CONTRAST MOBILE === */
@media (prefers-contrast: high) and (max-width: 768px) {
    .mobile-context-menu .menu-item[b-dgcv4rrnuv] {
        border: 2px solid var(--bit-clr-brd-pri);
        margin-bottom: 0.5rem;
    }

    .conversations-panel.is-open[b-dgcv4rrnuv] {
        border-right: 3px solid var(--bit-clr-brd-pri);
    }
}

/* === RTL SUPPORT === */
[dir="rtl"] .conversations-panel[b-dgcv4rrnuv] {
    border-right: none;
    border-left: 1px solid var(--bit-clr-brd-pri);
}

    [dir="rtl"] .conversations-panel.is-open[b-dgcv4rrnuv] {
        transform: translateX(100%);
    }

        [dir="rtl"] .conversations-panel.is-open.is-open[b-dgcv4rrnuv] {
            transform: translateX(0);
        }

[dir="rtl"] .mobile-fab[b-dgcv4rrnuv] {
    right: auto;
    left: 1rem;
}
/* _content/AgriConnect.BlazorApp/Pages/MyUsage.razor.rz.scp.css */
.usage-page[b-wuzaucbgip] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

.page-header[b-wuzaucbgip] {
    margin-bottom: 32px;
}

.page-header h1[b-wuzaucbgip] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px 0;
}

.page-subtitle[b-wuzaucbgip] {
    color: #6b7280;
    font-size: 16px;
    margin: 0;
}

.month-selector[b-wuzaucbgip] {
    display: flex;
    gap: 16px;
    align-items: end;
    margin-bottom: 32px;
    padding: 24px;
    background: #f9fafb;
    border-radius: 12px;
}

.loading-container[b-wuzaucbgip] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 0;
}

.usage-stats[b-wuzaucbgip] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card[b-wuzaucbgip] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px !important;
    border-left: 4px solid #059669;
}

.stat-icon[b-wuzaucbgip] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: #f0fdf4;
    border-radius: 12px;
}

.stat-content[b-wuzaucbgip] {
    flex: 1;
}

.stat-value[b-wuzaucbgip] {
    font-size: 36px;
    font-weight: 700;
    color: #059669;
    line-height: 1;
    margin-bottom: 8px;
}

.stat-label[b-wuzaucbgip] {
    font-size: 14px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.actions-bar[b-wuzaucbgip] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 24px;
}

.summary-section[b-wuzaucbgip] {
    padding: 32px !important;
    margin-bottom: 24px;
}

.summary-section h2[b-wuzaucbgip] {
    font-size: 24px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 24px 0;
}

.summary-grid[b-wuzaucbgip] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

.summary-item[b-wuzaucbgip] {
    padding: 20px !important;
    border-left: 3px solid #059669;
    transition: transform 0.2s, box-shadow 0.2s;
}

.summary-item:hover[b-wuzaucbgip] {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.summary-header[b-wuzaucbgip] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.type-badge[b-wuzaucbgip] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: #e0f2fe;
    color: #0369a1;
}

.summary-count[b-wuzaucbgip] {
    font-size: 20px;
    font-weight: 700;
    color: #059669;
}

.summary-cost[b-wuzaucbgip] {
    font-size: 14px;
    color: #6b7280;
}

.transactions-section[b-wuzaucbgip] {
    padding: 32px !important;
}

.transactions-section h2[b-wuzaucbgip] {
    font-size: 24px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 24px 0;
}

.transactions-table[b-wuzaucbgip] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.transaction-row[b-wuzaucbgip] {
    display: grid;
    grid-template-columns: 180px 200px 1fr auto auto auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
    transition: background 0.2s;
}

.transaction-row:hover[b-wuzaucbgip] {
    background: #f3f4f6;
}

.transaction-date[b-wuzaucbgip] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6b7280;
}

.transaction-type[b-wuzaucbgip] {
    font-size: 14px;
}

.transaction-description[b-wuzaucbgip] {
    font-size: 14px;
    color: #374151;
}

.transaction-quantity[b-wuzaucbgip] {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
}

.transaction-cost[b-wuzaucbgip] {
    font-size: 14px;
    font-weight: 700;
    color: #059669;
    min-width: 100px;
    text-align: right;
}

.transaction-status[b-wuzaucbgip] {
    min-width: 100px;
}

.no-data[b-wuzaucbgip] {
    text-align: center;
    padding: 40px;
    color: #9ca3af;
    font-size: 16px;
}

.empty-state[b-wuzaucbgip] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px !important;
    text-align: center;
}

.empty-state h3[b-wuzaucbgip] {
    font-size: 24px;
    color: #374151;
    margin: 24px 0 8px 0;
}

.empty-state p[b-wuzaucbgip] {
    color: #6b7280;
    font-size: 16px;
    margin: 0;
}

@media (max-width: 768px) {
    .usage-page[b-wuzaucbgip] {
        padding: 16px;
    }

    .month-selector[b-wuzaucbgip] {
        flex-direction: column;
        align-items: stretch;
    }

    .usage-stats[b-wuzaucbgip] {
        grid-template-columns: 1fr;
    }

    .transaction-row[b-wuzaucbgip] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .transaction-cost[b-wuzaucbgip],
    .transaction-quantity[b-wuzaucbgip] {
        text-align: left;
    }
}
/* _content/AgriConnect.BlazorApp/Pages/Notifications.razor.rz.scp.css */
/* ========================================
   NOTIFICATIONS PAGE - Mobile-First Design
   Industry-standard layout inspired by:
   - GitHub, LinkedIn, Twitter/X notifications
   ======================================== */

/* Page Container */
.notifications-page[b-qm9kiww3qu] {
    min-height: 100vh;
    background: var(--bit-clr-bg-sec, #f5f5f5);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* ========== HEADER ========== */
.notifications-header[b-qm9kiww3qu] {
    background: var(--bit-clr-bg-pri, #ffffff);
    border-bottom: 1px solid var(--bit-clr-brd-pri, #e5e7eb);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content[b-qm9kiww3qu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    min-height: 56px;
}

.header-left[b-qm9kiww3qu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Hide back button on desktop by default - show on mobile */
.back-btn[b-qm9kiww3qu] {
    display: none;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--bit-clr-fg-sec, #6b7280);
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.back-btn:hover[b-qm9kiww3qu] {
    background: var(--bit-clr-bg-sec, #f3f4f6);
}

.header-title[b-qm9kiww3qu] {
    font-size: 1.375rem;
    font-weight: 600;
    margin: 0;
    color: var(--bit-clr-fg-pri, #1f2937);
}

.header-actions[b-qm9kiww3qu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.action-btn[b-qm9kiww3qu] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border: none;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--bit-clr-fg-sec, #6b7280);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.action-btn:hover[b-qm9kiww3qu] {
    background: var(--bit-clr-bg-sec, #f3f4f6);
    color: var(--bit-clr-fg-pri, #1f2937);
}

/* ========== FILTER TABS ========== */
.filter-tabs[b-qm9kiww3qu] {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--bit-clr-brd-pri, #e5e7eb);
    padding: 0 1rem;
    gap: 0.25rem;
}

.filter-tabs[b-qm9kiww3qu]::-webkit-scrollbar {
    display: none;
}

.filter-tab[b-qm9kiww3qu] {
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bit-clr-fg-sec, #6b7280);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.filter-tab:hover[b-qm9kiww3qu] {
    color: var(--bit-clr-fg-pri, #1f2937);
}

.filter-tab.active[b-qm9kiww3qu] {
    color: #059669;
    border-bottom-color: #059669;
}

.tab-badge[b-qm9kiww3qu] {
    background: var(--bit-clr-bg-sec, #f3f4f6);
    color: var(--bit-clr-fg-sec, #6b7280);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.tab-badge.unread[b-qm9kiww3qu] {
    background: #059669;
    color: white;
}

/* ========== CONTENT AREA ========== */
.notifications-content[b-qm9kiww3qu] {
    flex: 1;
    padding: 0;
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
    background: var(--bit-clr-bg-pri, #ffffff);
}

/* ========== LOADING STATE ========== */
.loading-state[b-qm9kiww3qu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 1rem;
    color: var(--bit-clr-fg-sec, #6b7280);
}

/* ========== EMPTY STATE ========== */
.empty-state[b-qm9kiww3qu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 2rem;
    gap: 1rem;
}

.empty-icon[b-qm9kiww3qu] {
    width: 96px;
    height: 96px;
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #059669;
    font-size: 2.5rem;
}

.empty-title[b-qm9kiww3qu] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bit-clr-fg-pri, #1f2937);
    margin: 0;
}

.empty-description[b-qm9kiww3qu] {
    font-size: 0.9375rem;
    color: var(--bit-clr-fg-sec, #6b7280);
    margin: 0;
    max-width: 280px;
    line-height: 1.5;
}

/* ========== NOTIFICATION GROUPS ========== */
.notification-group[b-qm9kiww3qu] {
    margin-bottom: 0;
}

.group-header[b-qm9kiww3qu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bit-clr-bg-sec, #f9fafb);
    border-bottom: 1px solid var(--bit-clr-brd-pri, #e5e7eb);
}

.group-title[b-qm9kiww3qu] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bit-clr-fg-sec, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mark-read-link[b-qm9kiww3qu] {
    font-size: 0.75rem;
    color: #059669;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 500;
}

.mark-read-link:hover[b-qm9kiww3qu] {
    text-decoration: underline;
}

/* ========== NOTIFICATION LIST ========== */
.notification-list[b-qm9kiww3qu] {
    background: var(--bit-clr-bg-pri, #ffffff);
}

.notification-item[b-qm9kiww3qu] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--bit-clr-brd-pri, #e5e7eb);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.notification-item:last-child[b-qm9kiww3qu] {
    border-bottom: none;
}

.notification-item:hover[b-qm9kiww3qu] {
    background: var(--bit-clr-bg-sec, #f9fafb);
}

.notification-item.unread[b-qm9kiww3qu] {
    background: rgba(5, 150, 105, 0.04);
}

.notification-item.unread:hover[b-qm9kiww3qu] {
    background: rgba(5, 150, 105, 0.08);
}

.notification-item.read[b-qm9kiww3qu] {
    background: transparent;
}

.notification-item.deleting[b-qm9kiww3qu] {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.3s ease;
}

/* ========== NOTIFICATION AVATAR ========== */
.notification-avatar[b-qm9kiww3qu] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

/* Ensure BitIcon inherits color */
.notification-avatar[b-qm9kiww3qu]  i,
.notification-avatar[b-qm9kiww3qu]  .bit-icon {
    font-size: 1.25rem !important;
}

.notification-avatar.type-message[b-qm9kiww3qu] {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #2563eb;
}

.notification-avatar.type-review[b-qm9kiww3qu] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #d97706;
}

.notification-avatar.type-inquiry[b-qm9kiww3qu] {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    color: #4f46e5;
}

.notification-avatar.type-order[b-qm9kiww3qu] {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #059669;
}

.notification-avatar.type-listing[b-qm9kiww3qu] {
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
    color: #9333ea;
}

.notification-avatar.type-system[b-qm9kiww3qu] {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    color: #6b7280;
}

.notification-avatar.type-alert[b-qm9kiww3qu] {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #dc2626;
}

.notification-avatar.type-default[b-qm9kiww3qu] {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #059669;
}

/* ========== NOTIFICATION BODY ========== */
.notification-body[b-qm9kiww3qu] {
    flex: 1;
    min-width: 0;
}

.notification-header-row[b-qm9kiww3qu] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.notification-title[b-qm9kiww3qu] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--bit-clr-fg-pri, #1f2937);
    line-height: 1.3;
}

.notification-time[b-qm9kiww3qu] {
    font-size: 0.75rem;
    color: var(--bit-clr-fg-ter, #9ca3af);
    flex-shrink: 0;
}

.notification-message[b-qm9kiww3qu] {
    font-size: 0.875rem;
    color: var(--bit-clr-fg-sec, #6b7280);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-action[b-qm9kiww3qu] {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: #059669;
    font-weight: 500;
}

/* ========== NOTIFICATION END (Indicators & Menu) ========== */
.notification-end[b-qm9kiww3qu] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
    position: relative;
}

.unread-dot[b-qm9kiww3qu] {
    width: 10px;
    height: 10px;
    background: #059669;
    border-radius: 50%;
    margin-top: 0.25rem;
}

.more-btn[b-qm9kiww3qu] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--bit-clr-fg-ter, #9ca3af);
    opacity: 0;
    transition: all 0.2s ease;
}

.notification-item:hover .more-btn[b-qm9kiww3qu] {
    opacity: 1;
}

.more-btn:hover[b-qm9kiww3qu] {
    background: var(--bit-clr-bg-sec, #f3f4f6);
    color: var(--bit-clr-fg-pri, #1f2937);
}

/* ========== ITEM MENU (Dropdown) ========== */
.item-menu[b-qm9kiww3qu] {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 180px;
    background: var(--bit-clr-bg-pri, #ffffff);
    border: 1px solid var(--bit-clr-brd-pri, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 200;
    padding: 0.5rem;
    animation: menuFadeIn-b-qm9kiww3qu 0.15s ease;
}

@keyframes menuFadeIn-b-qm9kiww3qu {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.menu-item[b-qm9kiww3qu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    color: var(--bit-clr-fg-pri, #1f2937);
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.menu-item:hover[b-qm9kiww3qu] {
    background: var(--bit-clr-bg-sec, #f3f4f6);
}

.menu-item.danger[b-qm9kiww3qu] {
    color: #dc2626;
}

.menu-item.danger:hover[b-qm9kiww3qu] {
    background: #fef2f2;
}

.menu-backdrop[b-qm9kiww3qu] {
    position: fixed;
    inset: 0;
    z-index: 150;
}

/* ========== LOAD MORE ========== */
.load-more[b-qm9kiww3qu] {
    padding: 1rem;
    background: var(--bit-clr-bg-pri, #ffffff);
    border-top: 1px solid var(--bit-clr-brd-pri, #e5e7eb);
}

/* ========================================
   DESKTOP STYLES (min-width: 768px)
   ======================================== */
@media (min-width: 768px) {
    .notifications-page[b-qm9kiww3qu] {
        padding: 1.5rem;
        background: var(--bit-clr-bg-sec, #f5f5f5);
    }
    
    .notifications-header[b-qm9kiww3qu] {
        max-width: 720px;
        margin: 0 auto;
        width:100%;
        border-radius: 16px 16px 0 0;
        border: 1px solid var(--bit-clr-brd-pri, #e5e7eb);
        border-bottom: none;
    }
    
    .back-btn[b-qm9kiww3qu] {
        display: none !important;
    }
    
    .header-title[b-qm9kiww3qu] {
        font-size: 1.375rem;
    }
    
    .notifications-content[b-qm9kiww3qu] {
        max-width: 720px;
        margin: 0 auto;
        background: var(--bit-clr-bg-pri, #ffffff);
        border: 1px solid var(--bit-clr-brd-pri, #e5e7eb);
        border-top: none;
        border-radius: 0 0 16px 16px;
    }
    
    .notification-item[b-qm9kiww3qu] {
        padding: 1.25rem 1.5rem;
    }
    
    .notification-avatar[b-qm9kiww3qu] {
        width: 48px;
        height: 48px;
    }
    
    .more-btn[b-qm9kiww3qu] {
        opacity: 0;
    }
    
    .notification-item:hover .more-btn[b-qm9kiww3qu] {
        opacity: 1;
    }
    
    .empty-state[b-qm9kiww3qu] {
        padding: 5rem 2rem;
    }
    
    .empty-icon[b-qm9kiww3qu] {
        width: 96px;
        height: 96px;
        font-size: 2.5rem;
    }
}

/* ========================================
   MOBILE STYLES (max-width: 767px)
   ======================================== */
@media (max-width: 767px) {
    .notifications-page[b-qm9kiww3qu] {
        padding: 0;
    }
    
    .back-btn[b-qm9kiww3qu] {
        display: flex !important;
    }
    
    .header-title[b-qm9kiww3qu] {
        font-size: 1.125rem;
    }
    
    .notifications-header[b-qm9kiww3qu] {
        border-radius: 0;
    }
    
    .notifications-content[b-qm9kiww3qu] {
        border-radius: 0;
        border: none;
    }
    
    .notification-item[b-qm9kiww3qu] {
        padding: 1rem;
    }
    
    .notification-avatar[b-qm9kiww3qu] {
        width: 44px;
        height: 44px;
    }
    
    .more-btn[b-qm9kiww3qu] {
        opacity: 1;
        width: 40px;
        height: 40px;
    }
    
    .empty-state[b-qm9kiww3qu] {
        padding: 4rem 1.5rem;
    }
    
    .empty-icon[b-qm9kiww3qu] {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }
}

/* ========================================
   TOUCH DEVICE IMPROVEMENTS
   ======================================== */
@media (hover: none) and (pointer: coarse) {
    .notification-item[b-qm9kiww3qu] {
        min-height: 72px;
    }
    
    .more-btn[b-qm9kiww3qu] {
        opacity: 1;
        width: 40px;
        height: 40px;
    }
    
    .filter-tab[b-qm9kiww3qu] {
        padding: 0.875rem 1rem;
    }
    
    .menu-item[b-qm9kiww3qu] {
        padding: 0.75rem 1rem;
        min-height: 44px;
    }
    
    .notification-item:hover[b-qm9kiww3qu] {
        background: transparent;
    }
    
    .notification-item:active[b-qm9kiww3qu] {
        background: var(--bit-clr-bg-sec, #f9fafb);
    }
    
    .notification-item.unread:hover[b-qm9kiww3qu] {
        background: rgba(5, 150, 105, 0.04);
    }
    
    .notification-item.unread:active[b-qm9kiww3qu] {
        background: rgba(5, 150, 105, 0.08);
    }
}

/* ========================================
   SAFE AREA INSETS (Notched devices)
   ======================================== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .load-more[b-qm9kiww3qu] {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
}

/* ========================================
   REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .notification-item[b-qm9kiww3qu],
    .item-menu[b-qm9kiww3qu],
    .more-btn[b-qm9kiww3qu],
    .filter-tab[b-qm9kiww3qu] {
        transition: none;
    }
    
    .notification-item.deleting[b-qm9kiww3qu] {
        transition: none;
    }
    
    @keyframes menuFadeIn-b-qm9kiww3qu {
        from { opacity: 1; transform: none; }
        to { opacity: 1; transform: none; }
    }
}
/* _content/AgriConnect.BlazorApp/Pages/Reservations.razor.rz.scp.css */
/* Reservations.razor.css */

.reservations-page[b-4rzhyk8l11] {
    min-height: 100vh;
    background-color: var(--bs-gray-100);
}

/* Stats Grid */
.stats-grid[b-4rzhyk8l11] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.stat-card[b-4rzhyk8l11] {
    background-color: white;
    border-radius: var(--spacing-sm);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.stat-icon[b-4rzhyk8l11] {
    width: 48px;
    height: 48px;
    border-radius: var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.stat-content h3[b-4rzhyk8l11] {
    font-size: 1.5rem;
    margin: 0;
    font-weight: 600;
}

.stat-content span[b-4rzhyk8l11] {
    font-size: 0.85rem;
    color: var(--bs-gray-600);
}

/* Filters */
.filters-section[b-4rzhyk8l11] {
    background-color: white;
    border-radius: var(--spacing-sm);
    padding: var(--spacing-md);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Reservation Cards */
.reservations-list[b-4rzhyk8l11] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.reservation-card[b-4rzhyk8l11] {
    background-color: white;
    border-radius: var(--spacing-sm);
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.reservation-header[b-4rzhyk8l11] {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--bs-gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reservation-header h5[b-4rzhyk8l11] {
    margin: 0;
    font-size: 1.1rem;
}

.reservation-meta[b-4rzhyk8l11] {
    display: flex;
    gap: var(--spacing-md);
    font-size: 0.85rem;
    color: var(--bs-gray-600);
    margin-top: 4px;
}

.status-badge[b-4rzhyk8l11] {
    padding: 4px 12px;
    border-radius: 1rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.status-badge.pending[b-4rzhyk8l11] {
    background-color: var(--bs-warning-subtle);
    color: var(--bs-warning);
}

.status-badge.confirmed[b-4rzhyk8l11] {
    background-color: var(--bs-success-subtle);
    color: var(--bs-success);
}

.status-badge.completed[b-4rzhyk8l11] {
    background-color: var(--bs-info-subtle);
    color: var(--bs-info);
}

.status-badge.cancelled[b-4rzhyk8l11] {
    background-color: var(--bs-danger-subtle);
    color: var(--bs-danger);
}

.reservation-details[b-4rzhyk8l11] {
    padding: var(--spacing-md);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.detail-item[b-4rzhyk8l11] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-item .label[b-4rzhyk8l11] {
    font-size: 0.85rem;
    color: var(--bs-gray-600);
}

.detail-item .amount[b-4rzhyk8l11] {
    font-weight: 600;
    color: var(--bs-success);
}

.reservation-actions[b-4rzhyk8l11] {
    padding: var(--spacing-md);
    border-top: 1px solid var(--bs-gray-200);
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .reservations-page[b-4rzhyk8l11] {
        background-color: var(--dark-bg);
    }

    .stat-card[b-4rzhyk8l11],
    .filters-section[b-4rzhyk8l11],
    .reservation-card[b-4rzhyk8l11] {
        background-color: var(--dark-surface);
    }

    .reservation-header[b-4rzhyk8l11],
    .reservation-actions[b-4rzhyk8l11] {
        border-color: var(--bs-gray-700);
    }

    .status-badge.pending[b-4rzhyk8l11] {
        background-color: rgba(var(--bs-warning-rgb), 0.1);
    }

    .status-badge.confirmed[b-4rzhyk8l11] {
        background-color: rgba(var(--bs-success-rgb), 0.1);
    }

    .status-badge.completed[b-4rzhyk8l11] {
        background-color: rgba(var(--bs-info-rgb), 0.1);
    }

    .status-badge.cancelled[b-4rzhyk8l11] {
        background-color: rgba(var(--bs-danger-rgb), 0.1);
    }
}
/* _content/AgriConnect.BlazorApp/Pages/Reviews.razor.rz.scp.css */
/* Reviews.razor.css */

.reviews-page[b-05346ef2eu] {
    min-height: 100vh;
    background-color: var(--bs-gray-100);
}

.reviews-header h1[b-05346ef2eu] {
    font-size: 1.75rem;
    margin: 0 0 var(--spacing-md);
}

/* Rating Summary */
.rating-summary[b-05346ef2eu] {
    background-color: white;
    border-radius: var(--spacing-md);
    padding: var(--spacing-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.overall-rating[b-05346ef2eu] {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.overall-rating h2[b-05346ef2eu] {
    font-size: 3rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-xs);
    color: var(--bs-warning);
}

.total-reviews[b-05346ef2eu] {
    color: var(--bs-gray-600);
    font-size: 0.9rem;
}

.rating-bars[b-05346ef2eu] {
    max-width: 400px;
}

.rating-bar[b-05346ef2eu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.rating-label[b-05346ef2eu] {
    width: 60px;
    font-size: 0.9rem;
    color: var(--bs-gray-600);
}

.rating-bar .progress[b-05346ef2eu] {
    flex: 1;
    height: 8px;
    background-color: var(--bs-gray-200);
}

.rating-count[b-05346ef2eu] {
    width: 40px;
    text-align: right;
    font-size: 0.9rem;
    color: var(--bs-gray-600);
}

/* Reviews List */
.reviews-list[b-05346ef2eu] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.review-card[b-05346ef2eu] {
    background-color: white;
    border-radius: var(--spacing-md);
    padding: var(--spacing-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.review-card.highlighted[b-05346ef2eu] {
    border: 2px solid var(--bs-warning);
}

.review-header[b-05346ef2eu] {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.reviewer-info[b-05346ef2eu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.reviewer-avatar[b-05346ef2eu] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.reviewer-avatar:hover[b-05346ef2eu] {
    transform: scale(1.1);
}

.reviewer-name[b-05346ef2eu] {
    margin: 0 0 var(--spacing-xs);
    font-size: 1rem;
}

.reviewer-name a[b-05346ef2eu] {
    color: inherit;
    text-decoration: none;
}

.reviewer-name a:hover[b-05346ef2eu] {
    color: var(--bs-primary);
}

.review-meta[b-05346ef2eu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.review-date[b-05346ef2eu] {
    color: var(--bs-gray-600);
    font-size: 0.85rem;
}

.review-content[b-05346ef2eu] {
    color: var(--bs-gray-800);
    margin-bottom: var(--spacing-md);
}

.review-photos[b-05346ef2eu] {
    display: flex;
    gap: var(--spacing-sm);
    overflow-x: auto;
    padding-bottom: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.review-photos img[b-05346ef2eu] {
    width: 100px;
    height: 100px;
    border-radius: var(--spacing-sm);
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.review-photos img:hover[b-05346ef2eu] {
    transform: scale(1.05);
}

.review-listing[b-05346ef2eu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--bs-gray-200);
    color: var(--bs-gray-600);
    font-size: 0.9rem;
}

.review-listing a[b-05346ef2eu] {
    color: var(--bs-primary);
    text-decoration: none;
}

.review-listing a:hover[b-05346ef2eu] {
    text-decoration: underline;
}

/* Loading State */
.loading-reviews[b-05346ef2eu] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.review-skeleton[b-05346ef2eu] {
    background-color: white;
    border-radius: var(--spacing-md);
    padding: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-md);
}

.skeleton-avatar[b-05346ef2eu] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(90deg,
        var(--bs-gray-200) 0%,
        var(--bs-gray-300) 50%,
        var(--bs-gray-200) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-05346ef2eu 1.5s infinite;
}

.skeleton-content[b-05346ef2eu] {
    flex: 1;
}

.skeleton-header[b-05346ef2eu] {
    height: 24px;
    width: 200px;
    margin-bottom: var(--spacing-sm);
    background: linear-gradient(90deg,
        var(--bs-gray-200) 0%,
        var(--bs-gray-300) 50%,
        var(--bs-gray-200) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-05346ef2eu 1.5s infinite;
    border-radius: var(--spacing-xs);
}

.skeleton-text[b-05346ef2eu] {
    height: 16px;
    margin-bottom: var(--spacing-xs);
    background: linear-gradient(90deg,
        var(--bs-gray-200) 0%,
        var(--bs-gray-300) 50%,
        var(--bs-gray-200) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-05346ef2eu 1.5s infinite;
    border-radius: var(--spacing-xs);
    width: 100%;
}

@keyframes shimmer-b-05346ef2eu {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Empty State */
.no-reviews[b-05346ef2eu] {
    text-align: center;
    padding: var(--spacing-xl);
}

.no-reviews i[b-05346ef2eu] {
    font-size: 3rem;
    color: var(--bs-gray-400);
    margin-bottom: var(--spacing-md);
}

/* Photo Preview Modal */
.modal-xl .modal-body[b-05346ef2eu] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-gray-900);
}

.modal-xl .modal-body img[b-05346ef2eu] {
    max-height: 80vh;
    object-fit: contain;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .reviews-page[b-05346ef2eu] {
        background-color: white;
    }

    .rating-summary[b-05346ef2eu] {
        box-shadow: none;
        border: 1px solid var(--bs-gray-200);
    }

    .review-card[b-05346ef2eu] {
        box-shadow: none;
        border: 1px solid var(--bs-gray-200);
        border-radius: 0;
    }

    .review-photos[b-05346ef2eu] {
        margin: 0 calc(var(--spacing-md) * -1);
        padding: var(--spacing-md);
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .reviews-page[b-05346ef2eu] {
        background-color: var(--dark-bg);
    }

    .rating-summary[b-05346ef2eu] {
        background-color: var(--dark-surface);
    }

    .overall-rating h2[b-05346ef2eu] {
        color: var(--bs-warning);
    }

    .rating-bar .progress[b-05346ef2eu] {
        background-color: var(--bs-gray-700);
    }

    .review-card[b-05346ef2eu] {
        background-color: var(--dark-surface);
    }

    .review-content[b-05346ef2eu] {
        color: var(--dark-text);
    }

    .review-listing[b-05346ef2eu] {
        border-color: var(--bs-gray-700);
    }

    .review-skeleton[b-05346ef2eu] {
        background-color: var(--dark-surface);
    }

    .skeleton-avatar[b-05346ef2eu],
    .skeleton-header[b-05346ef2eu],
    .skeleton-text[b-05346ef2eu] {
        background: linear-gradient(90deg,
            var(--bs-gray-800) 0%,
            var(--bs-gray-700) 50%,
            var(--bs-gray-800) 100%);
    }

    @media (max-width: 768px) {
        .reviews-page[b-05346ef2eu] {
            background-color: var(--dark-bg);
        }

        .rating-summary[b-05346ef2eu],
        .review-card[b-05346ef2eu] {
            border-color: var(--bs-gray-700);
        }
    }
}
/* _content/AgriConnect.BlazorApp/Pages/Search.razor.rz.scp.css */
/* Search.razor.css */

.search-page[b-lu41xik4jc] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Search Header */
.search-header[b-lu41xik4jc] {
    background-color: var(--bs-gray-100);
    padding: var(--spacing-lg) 0;
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--bs-gray-200);
}

.search-header .form-control[b-lu41xik4jc] {
    border-right: none;
    box-shadow: none;
}

.search-header .form-control:focus[b-lu41xik4jc] {
    border-color: var(--bs-primary);
}

.search-header .btn[b-lu41xik4jc] {
    border-left: none;
}

/* Filters Sidebar */
.filters-sidebar[b-lu41xik4jc] {
    margin-bottom: var(--spacing-lg);
}

.filters-sidebar .card[b-lu41xik4jc] {
    position: sticky;
    top: var(--spacing-lg);
    max-height: calc(100vh - var(--spacing-xl));
    overflow-y: auto;
}

.filter-section[b-lu41xik4jc] {
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--bs-gray-200);
}

.filter-section:last-child[b-lu41xik4jc] {
    border-bottom: none;
}

.filter-section h6[b-lu41xik4jc] {
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
}

.list-group-item[b-lu41xik4jc] {
    cursor: pointer;
    transition: all 0.2s ease;
}

.list-group-item:hover[b-lu41xik4jc] {
    background-color: var(--bs-gray-100);
}

.list-group-item.active[b-lu41xik4jc] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Search Results */
.search-meta[b-lu41xik4jc] {
    color: var(--bs-gray-600);
}

.view-options[b-lu41xik4jc] {
    display: flex;
    gap: var(--spacing-xs);
}

.search-grid[b-lu41xik4jc] {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.search-list[b-lu41xik4jc] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Loading States */
.loading-grid[b-lu41xik4jc] {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.loading-card[b-lu41xik4jc] {
    border-radius: var(--spacing-sm);
    overflow: hidden;
    background-color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.loading-image[b-lu41xik4jc] {
    width: 100%;
    height: 200px;
    background: linear-gradient(90deg,
        var(--bs-gray-200) 0%,
        var(--bs-gray-300) 50%,
        var(--bs-gray-200) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-lu41xik4jc 1.5s infinite;
}

.loading-content[b-lu41xik4jc] {
    padding: var(--spacing-md);
}

.loading-title[b-lu41xik4jc] {
    height: 24px;
    margin-bottom: var(--spacing-sm);
    background: linear-gradient(90deg,
        var(--bs-gray-200) 0%,
        var(--bs-gray-300) 50%,
        var(--bs-gray-200) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-lu41xik4jc 1.5s infinite;
    border-radius: var(--spacing-xs);
}

.loading-text[b-lu41xik4jc] {
    height: 16px;
    margin-bottom: var(--spacing-xs);
    background: linear-gradient(90deg,
        var(--bs-gray-200) 0%,
        var(--bs-gray-300) 50%,
        var(--bs-gray-200) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-lu41xik4jc 1.5s infinite;
    border-radius: var(--spacing-xs);
    width: 60%;
}

@keyframes shimmer-b-lu41xik4jc {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* No Results */
.no-results[b-lu41xik4jc] {
    text-align: center;
    padding: var(--spacing-xl);
}

.no-results i[b-lu41xik4jc] {
    font-size: 3rem;
    color: var(--bs-gray-400);
    margin-bottom: var(--spacing-md);
}

.no-results h3[b-lu41xik4jc] {
    margin-bottom: var(--spacing-sm);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .search-header[b-lu41xik4jc] {
        padding: var(--spacing-md) 0;
        margin-bottom: var(--spacing-md);
    }

    .filters-sidebar[b-lu41xik4jc] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        background-color: white;
        transition: transform 0.3s ease;
        transform: translateX(-100%);
    }

    .filters-sidebar.show[b-lu41xik4jc] {
        transform: translateX(0);
    }

    .filters-sidebar .card[b-lu41xik4jc] {
        border: none;
        border-radius: 0;
        height: 100%;
        max-height: none;
    }

    .search-grid[b-lu41xik4jc] {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    .loading-grid[b-lu41xik4jc] {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .search-header[b-lu41xik4jc] {
        background-color: var(--bs-gray-800);
        border-color: var(--bs-gray-700);
    }

    .filters-sidebar .card[b-lu41xik4jc] {
        background-color: var(--dark-surface);
    }

    .filter-section[b-lu41xik4jc] {
        border-color: var(--bs-gray-700);
    }

    .list-group-item[b-lu41xik4jc] {
        background-color: var(--dark-surface);
        border-color: var(--bs-gray-700);
        color: var(--dark-text);
    }

    .list-group-item:hover[b-lu41xik4jc] {
        background-color: var(--bs-gray-800);
    }

    .loading-card[b-lu41xik4jc] {
        background-color: var(--dark-surface);
    }

    .loading-image[b-lu41xik4jc],
    .loading-title[b-lu41xik4jc],
    .loading-text[b-lu41xik4jc] {
        background: linear-gradient(90deg,
            var(--bs-gray-800) 0%,
            var(--bs-gray-700) 50%,
            var(--bs-gray-800) 100%);
    }

    .filters-sidebar.show[b-lu41xik4jc] {
        background-color: var(--dark-bg);
    }
}
/* _content/AgriConnect.BlazorApp/Pages/Settings.razor.rz.scp.css */
/* Settings.razor.css */

.settings-page[b-zh0lvhnmm9] {
    min-height: 100vh;
    background-color: var(--bs-gray-100);
}

/* Settings Navigation */
.settings-nav[b-zh0lvhnmm9] {
    position: sticky;
    top: var(--spacing-lg);
}

.settings-nav .list-group-item[b-zh0lvhnmm9] {
    border: none;
    padding: var(--spacing-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-nav .list-group-item i[b-zh0lvhnmm9] {
    width: 20px;
}

.settings-nav .list-group-item:hover[b-zh0lvhnmm9] {
    background-color: var(--bs-gray-100);
    color: var(--bs-primary);
}

.settings-nav .list-group-item.active[b-zh0lvhnmm9] {
    background-color: var(--bs-primary);
    color: white;
}

/* Settings Content */
.settings-content[b-zh0lvhnmm9] {
    margin-bottom: var(--spacing-xl);
}

.settings-content .card[b-zh0lvhnmm9] {
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.settings-content .card-header[b-zh0lvhnmm9] {
    background-color: white;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--bs-gray-200);
}

.settings-content .card-header h2[b-zh0lvhnmm9] {
    margin: 0;
    font-size: 1.5rem;
}

.settings-content .card-body[b-zh0lvhnmm9] {
    padding: var(--spacing-lg);
}

/* Profile Images */
.profile-images[b-zh0lvhnmm9] {
    position: relative;
}

.cover-image[b-zh0lvhnmm9] {
    height: 200px;
    border-radius: var(--spacing-md);
    background-color: var(--bs-gray-200);
    overflow: hidden;
    margin-bottom: var(--spacing-lg);
}

.cover-image img[b-zh0lvhnmm9] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-image[b-zh0lvhnmm9] {
    position: absolute;
    bottom: 0;
    left: var(--spacing-lg);
    transform: translateY(50%);
}

.profile-image img[b-zh0lvhnmm9] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

.profile-placeholder[b-zh0lvhnmm9] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: var(--bs-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--bs-gray-400);
    border: 4px solid white;
}

/* Verification Badge */
.verification-badge[b-zh0lvhnmm9] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--bs-success-subtle);
    border-radius: var(--spacing-md);
}

.verification-badge i[b-zh0lvhnmm9] {
    font-size: 2rem;
}

/* Notification Settings */
.notification-settings .list-group-item[b-zh0lvhnmm9] {
    border: none;
    border-bottom: 1px solid var(--bs-gray-200);
    padding: var(--spacing-md);
}

.notification-settings .list-group-item:last-child[b-zh0lvhnmm9] {
    border-bottom: none;
}

.notification-settings .form-switch[b-zh0lvhnmm9] {
    padding-left: 0;
}

.notification-settings .form-check-input[b-zh0lvhnmm9] {
    float: none;
    margin-left: 0;
}

/* Loading State */
.loading-spinner[b-zh0lvhnmm9] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .settings-nav[b-zh0lvhnmm9] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1040;
        background-color: white;
        border-bottom: 1px solid var(--bs-gray-200);
    }

    .settings-nav .list-group[b-zh0lvhnmm9] {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .settings-nav .list-group[b-zh0lvhnmm9]::-webkit-scrollbar {
        display: none;
    }

    .settings-nav .list-group-item[b-zh0lvhnmm9] {
        flex: 0 0 auto;
    }

    .settings-content[b-zh0lvhnmm9] {
        margin-top: 60px;
    }

    .cover-image[b-zh0lvhnmm9] {
        height: 150px;
    }

    .profile-image[b-zh0lvhnmm9] {
        left: 50%;
        transform: translate(-50%, 50%);
    }

    .profile-image img[b-zh0lvhnmm9],
    .profile-placeholder[b-zh0lvhnmm9] {
        width: 100px;
        height: 100px;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .settings-page[b-zh0lvhnmm9] {
        background-color: var(--dark-bg);
    }

    .settings-nav[b-zh0lvhnmm9],
    .settings-content .card[b-zh0lvhnmm9] {
        background-color: var(--dark-surface);
    }

    .settings-nav .list-group-item[b-zh0lvhnmm9] {
        background-color: transparent;
        color: var(--dark-text);
    }

    .settings-nav .list-group-item:hover[b-zh0lvhnmm9] {
        background-color: var(--bs-gray-800);
    }

    .settings-content .card-header[b-zh0lvhnmm9] {
        background-color: var(--dark-surface);
        border-color: var(--bs-gray-700);
    }

    .profile-placeholder[b-zh0lvhnmm9] {
        background-color: var(--bs-gray-700);
        color: var(--bs-gray-400);
    }

    .notification-settings .list-group-item[b-zh0lvhnmm9] {
        background-color: var(--dark-surface);
        border-color: var(--bs-gray-700);
    }

    .verification-badge[b-zh0lvhnmm9] {
        background-color: rgba(var(--bs-success-rgb), 0.1);
    }
}
/* _content/AgriConnect.BlazorApp/Pages/Subscription/SubscriptionPlans.razor.rz.scp.css */
/* ===== SUBSCRIPTION PLANS PAGE - Industry Standard Design ===== */
/* Mobile-First Responsive Design */

.pricing-page[b-jbe97gzq6e] {
    min-height: 100vh;
    background: #f8fafc;
}

/* ===== Hero Section - Compact ===== */
.pricing-hero[b-jbe97gzq6e] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 1.5rem 1rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.pricing-hero[b-jbe97gzq6e]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.hero-container[b-jbe97gzq6e] {
    max-width: 680px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero-badge[b-jbe97gzq6e] {
    display: none; /* Hidden on mobile for compact view */
}

.hero-title[b-jbe97gzq6e] {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin: 0 0 0.5rem;
    line-height: 1.2;
}

.hero-subtitle[b-jbe97gzq6e] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 1rem;
    line-height: 1.5;
    display: none; /* Hidden on mobile */
}

/* ===== Billing Toggle ===== */
.billing-toggle-wrapper[b-jbe97gzq6e] {
    display: flex;
    justify-content: center;
}

.billing-toggle[b-jbe97gzq6e] {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 4px;
    gap: 4px;
}

.toggle-btn[b-jbe97gzq6e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.toggle-btn:hover[b-jbe97gzq6e] {
    color: white;
}

.toggle-btn.active[b-jbe97gzq6e] {
    background: white;
    color: #667eea;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.save-badge[b-jbe97gzq6e] {
    background: #22c55e;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== Plans Section ===== */
.plans-section[b-jbe97gzq6e] {
    padding: 1.5rem 1rem 2rem;
    position: relative;
    z-index: 2;
}

.plans-container[b-jbe97gzq6e] {
    max-width: 1200px;
    margin: 0 auto;
}

.loading-state[b-jbe97gzq6e],
.empty-state[b-jbe97gzq6e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.loading-state p[b-jbe97gzq6e],
.empty-state p[b-jbe97gzq6e] {
    color: #6b7280;
    margin-top: 1rem;
}

.empty-state h3[b-jbe97gzq6e] {
    color: #374151;
    margin: 1rem 0 0.5rem;
}

/* ===== Plans Grid ===== */
.plans-grid[b-jbe97gzq6e] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* ===== Plan Card ===== */
.plan-card[b-jbe97gzq6e] {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.plan-card:hover[b-jbe97gzq6e] {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border-color: #667eea;
}

.plan-card:active[b-jbe97gzq6e] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.plan-card:focus[b-jbe97gzq6e] {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

.plan-card.popular[b-jbe97gzq6e] {
    border-color: #667eea;
}

.plan-card.popular:hover[b-jbe97gzq6e] {
    border-color: #4f46e5;
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.25);
}

.plan-card.current[b-jbe97gzq6e] {
    border-color: #22c55e;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

/* Selected state for comparison */
.plan-card.selected[b-jbe97gzq6e] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2), 0 12px 40px rgba(59, 130, 246, 0.15);
    transform: translateY(-4px);
}

.plan-card.selected:hover[b-jbe97gzq6e] {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3), 0 16px 48px rgba(59, 130, 246, 0.2);
}

/* Selected indicator checkmark */
.selected-indicator[b-jbe97gzq6e] {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 28px;
    height: 28px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
    z-index: 10;
}

/* When both popular AND current - change border to popular */
.plan-card.popular.current[b-jbe97gzq6e] {
    border-color: #667eea;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
}

/* Ribbons */
.popular-ribbon[b-jbe97gzq6e],
.current-ribbon[b-jbe97gzq6e] {
    position: absolute;
    top: -12px;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.75rem;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    z-index: 10;
}

.popular-ribbon[b-jbe97gzq6e] {
    left: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.current-ribbon[b-jbe97gzq6e] {
    right: 1rem;
    background: #22c55e;
    color: white;
}

/* Plan Header */
.plan-header[b-jbe97gzq6e] {
    text-align: center;
    padding-top: 0.5rem;
}

.plan-icon[b-jbe97gzq6e] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
    color: #6b7280;
}

.plan-icon.popular-icon[b-jbe97gzq6e] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.plan-name[b-jbe97gzq6e] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.5rem;
}

.plan-description[b-jbe97gzq6e] {
    font-size: 0.9375rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/* Plan Pricing */
.plan-pricing[b-jbe97gzq6e] {
    text-align: center;
    padding: 1.5rem 0;
}

.price-display[b-jbe97gzq6e] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.price-display .currency[b-jbe97gzq6e] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #6b7280;
}

.price-display .amount[b-jbe97gzq6e] {
    font-size: 3rem;
    font-weight: 800;
    color: #1f2937;
    line-height: 1;
}

.price-display .period[b-jbe97gzq6e] {
    font-size: 1rem;
    color: #9ca3af;
    font-weight: 500;
}

.yearly-savings[b-jbe97gzq6e] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: #dcfce7;
    color: #16a34a;
    padding: 0.375rem 0.75rem;
    border-radius: 50px;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-top: 0.75rem;
}

.billing-note[b-jbe97gzq6e] {
    font-size: 0.8125rem;
    color: #9ca3af;
    margin: 0.5rem 0 0;
}

/* Plan Divider */
.plan-divider[b-jbe97gzq6e] {
    height: 1px;
    background: #e5e7eb;
    margin: 0;
}

/* Plan Features */
.plan-features[b-jbe97gzq6e] {
    flex: 1;
    padding: 1.5rem 0;
}

.features-title[b-jbe97gzq6e] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.features-list[b-jbe97gzq6e] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.features-list.expanded[b-jbe97gzq6e] {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #e5e7eb;
}

.feature-item[b-jbe97gzq6e] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.feature-check[b-jbe97gzq6e] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #dcfce7;
    color: #22c55e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.feature-check.popular-check[b-jbe97gzq6e] {
    background: #ede9fe;
    color: #7c3aed;
}

.feature-text[b-jbe97gzq6e] {
    font-size: 0.9375rem;
    color: #4b5563;
    line-height: 1.4;
}

.feature-text strong[b-jbe97gzq6e] {
    color: #1f2937;
    font-weight: 600;
}

.show-more-btn[b-jbe97gzq6e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: #667eea;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    transition: color 0.2s;
}

.show-more-btn:hover[b-jbe97gzq6e] {
    color: #4f46e5;
}

/* Plan Action */
.plan-action[b-jbe97gzq6e] {
    margin-top: auto;
    padding-top: 0.5rem;
}

/* ===== Comparison Section ===== */
.comparison-section[b-jbe97gzq6e] {
    padding: 3rem 1rem;
    background: white;
}

.comparison-container[b-jbe97gzq6e] {
    max-width: 1200px;
    margin: 0 auto;
}

.section-header[b-jbe97gzq6e] {
    text-align: center;
    margin-bottom: 2rem;
}

.section-header h2[b-jbe97gzq6e] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.5rem;
}

.section-header p[b-jbe97gzq6e] {
    font-size: 1rem;
    color: #6b7280;
    margin: 0;
}

/* Mobile Comparison Cards */
.comparison-mobile[b-jbe97gzq6e] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.comparison-desktop[b-jbe97gzq6e] {
    display: none;
}

.comparison-mobile-card[b-jbe97gzq6e] {
    background: #f9fafb;
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid #e5e7eb;
}

.comparison-mobile-card.popular[b-jbe97gzq6e] {
    border-color: #667eea;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
}

.mobile-card-header[b-jbe97gzq6e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.mobile-card-header h4[b-jbe97gzq6e] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

.mobile-price[b-jbe97gzq6e] {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.mobile-price .currency[b-jbe97gzq6e] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
}

.mobile-price .amount[b-jbe97gzq6e] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
}

.mobile-price .period[b-jbe97gzq6e] {
    font-size: 0.75rem;
    color: #9ca3af;
}

.mobile-features-list[b-jbe97gzq6e] {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.mobile-features-list li[b-jbe97gzq6e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: 0.875rem;
    color: #4b5563;
}

/* Desktop Comparison Table */
.comparison-table-wrapper[b-jbe97gzq6e] {
    overflow-x: auto;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.comparison-table[b-jbe97gzq6e] {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.comparison-table thead th[b-jbe97gzq6e] {
    padding: 1.5rem 1rem;
    text-align: center;
    font-weight: 600;
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
}

.comparison-table thead th:first-child[b-jbe97gzq6e] {
    text-align: left;
    border-top-left-radius: 12px;
}

.comparison-table thead th:last-child[b-jbe97gzq6e] {
    border-top-right-radius: 12px;
}

.comparison-table thead th.popular-column[b-jbe97gzq6e] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.table-plan-header[b-jbe97gzq6e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.table-plan-header h4[b-jbe97gzq6e] {
    font-size: 1.125rem;
    margin: 0;
}

.table-popular-badge[b-jbe97gzq6e] {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.table-price[b-jbe97gzq6e] {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.table-price .currency[b-jbe97gzq6e] {
    font-size: 0.875rem;
}

.table-price .amount[b-jbe97gzq6e] {
    font-size: 1.5rem;
    font-weight: 700;
}

.table-price .period[b-jbe97gzq6e] {
    font-size: 0.75rem;
    opacity: 0.8;
}

.comparison-table tbody td[b-jbe97gzq6e] {
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.comparison-table tbody tr:hover[b-jbe97gzq6e] {
    background: #f9fafb;
}

.feature-name-cell[b-jbe97gzq6e] {
    text-align: left !important;
    padding-left: 1.5rem !important;
}

.feature-name-cell .feature-name[b-jbe97gzq6e] {
    font-weight: 500;
    color: #374151;
    display: block;
}

.feature-name-cell .feature-desc[b-jbe97gzq6e] {
    font-size: 0.8125rem;
    color: #9ca3af;
    display: block;
    margin-top: 0.25rem;
}

.feature-value-cell[b-jbe97gzq6e] {
    min-width: 120px;
}

.check-icon[b-jbe97gzq6e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #dcfce7;
    color: #22c55e;
    font-size: 0.875rem;
}

.cross-icon[b-jbe97gzq6e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fee2e2;
    color: #ef4444;
    font-size: 0.75rem;
}

.unlimited-badge[b-jbe97gzq6e] {
    display: inline-block;
    background: #dbeafe;
    color: #2563eb;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
}

.feature-value[b-jbe97gzq6e] {
    font-weight: 600;
    color: #374151;
}

.not-included[b-jbe97gzq6e] {
    color: #d1d5db;
    font-size: 1.25rem;
}

.comparison-table tfoot td[b-jbe97gzq6e] {
    padding: 1.5rem 1rem;
    background: #f9fafb;
    border-top: 2px solid #e5e7eb;
}

.comparison-table tfoot td:first-child[b-jbe97gzq6e] {
    border-bottom-left-radius: 12px;
}

.comparison-table tfoot td:last-child[b-jbe97gzq6e] {
    border-bottom-right-radius: 12px;
}

.action-cell[b-jbe97gzq6e] {
    padding: 1rem;
}

/* ===== Trust Section ===== */
.trust-section[b-jbe97gzq6e] {
    padding: 3rem 1rem;
    background: #f9fafb;
}

.trust-container[b-jbe97gzq6e] {
    max-width: 900px;
    margin: 0 auto;
}

.trust-grid[b-jbe97gzq6e] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.trust-item[b-jbe97gzq6e] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.trust-icon[b-jbe97gzq6e] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.trust-icon.secure[b-jbe97gzq6e] {
    background: #dcfce7;
    color: #22c55e;
}

.trust-icon.guarantee[b-jbe97gzq6e] {
    background: #dbeafe;
    color: #3b82f6;
}

.trust-icon.cancel[b-jbe97gzq6e] {
    background: #fce7f3;
    color: #ec4899;
}

.trust-content h4[b-jbe97gzq6e] {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 0.25rem;
}

.trust-content p[b-jbe97gzq6e] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

/* ===== FAQ Section ===== */
.faq-section[b-jbe97gzq6e] {
    padding: 3rem 1rem;
    background: white;
}

.faq-container[b-jbe97gzq6e] {
    max-width: 900px;
    margin: 0 auto;
}

.faq-grid[b-jbe97gzq6e] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.faq-item[b-jbe97gzq6e] {
    padding: 1.25rem;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.faq-item h4[b-jbe97gzq6e] {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 0.75rem;
}

.faq-item p[b-jbe97gzq6e] {
    font-size: 0.9375rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.6;
}

/* ===== Tablet Breakpoint (768px) ===== */
@media (min-width: 768px) {
    .pricing-hero[b-jbe97gzq6e] {
        padding: 2rem 2rem 2.5rem;
    }

    .hero-badge[b-jbe97gzq6e] {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(10px);
        padding: 0.375rem 0.75rem;
        border-radius: 50px;
        color: white;
        font-size: 0.8125rem;
        font-weight: 500;
        margin-bottom: 0.75rem;
    }

    .hero-title[b-jbe97gzq6e] {
        font-size: 1.75rem;
    }

    .hero-subtitle[b-jbe97gzq6e] {
        display: block;
        font-size: 0.9375rem;
        margin-bottom: 1rem;
    }

    .plans-section[b-jbe97gzq6e] {
        padding: 0 2rem 3rem;
        margin-top: -1.5rem;
    }

    .plans-grid[b-jbe97gzq6e] {
        grid-template-columns: repeat(2, 1fr);
    }

    .plan-card[b-jbe97gzq6e] {
        padding: 1.5rem;
    }

    .trust-grid[b-jbe97gzq6e] {
        grid-template-columns: repeat(3, 1fr);
    }

    .faq-grid[b-jbe97gzq6e] {
        grid-template-columns: repeat(2, 1fr);
    }

    .comparison-mobile[b-jbe97gzq6e] {
        display: none;
    }

    .comparison-desktop[b-jbe97gzq6e] {
        display: block;
    }
}

/* ===== Desktop Breakpoint (1024px) ===== */
@media (min-width: 1024px) {
    .pricing-hero[b-jbe97gzq6e] {
        padding: 2.5rem 2rem 3rem;
    }

    .hero-title[b-jbe97gzq6e] {
        font-size: 2rem;
    }

    .hero-subtitle[b-jbe97gzq6e] {
        font-size: 1rem;
    }

    .plans-section[b-jbe97gzq6e] {
        margin-top: -1.5rem;
    }

    .plans-grid[b-jbe97gzq6e] {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
    }

    .plan-card[b-jbe97gzq6e] {
        padding: 1.75rem;
    }

    .plan-card.popular[b-jbe97gzq6e] {
        transform: scale(1.02);
        z-index: 1;
    }

    .plan-card.popular:hover[b-jbe97gzq6e] {
        transform: scale(1.02) translateY(-4px);
    }

    .price-display .amount[b-jbe97gzq6e] {
        font-size: 2.75rem;
    }

    .comparison-section[b-jbe97gzq6e] {
        padding: 3rem 2rem;
    }

    .trust-section[b-jbe97gzq6e] {
        padding: 2.5rem 2rem;
    }

    .faq-section[b-jbe97gzq6e] {
        padding: 2.5rem 2rem;
    }
}

/* ===== Large Desktop (1280px) ===== */
@media (min-width: 1280px) {
    .plans-grid[b-jbe97gzq6e] {
        grid-template-columns: repeat(auto-fit, minmax(320px, 360px));
        justify-content: center;
    }
}
/* _content/AgriConnect.BlazorApp/Pages/UserProfile.razor.rz.scp.css */
/* UserProfile.razor.css - Enhanced Profile Styling */

.profile-page[b-qs8bhzi9r0] {
    min-height: 100vh;
    background: #f8f9fa;
    padding: 0;
}

/* Profile Header Card */
.profile-header-card[b-qs8bhzi9r0] {
  background: white;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    overflow: hidden;
    margin-bottom: 0;
}

.profile-cover[b-qs8bhzi9r0] {
    position: relative;
    height: 200px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.cover-image[b-qs8bhzi9r0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cover-placeholder[b-qs8bhzi9r0] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

.cover-pattern[b-qs8bhzi9r0] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.change-cover[b-qs8bhzi9r0] {
    position: absolute;
    bottom: 16px;
    right: 16px;
    border: none;
    border-radius: 8px;
  padding: 8px 12px;
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.2);
    color: white;
}

.profile-info-section[b-qs8bhzi9r0] {
 padding: 0 2rem 2rem 2rem;
    margin-top: -60px;
    position: relative;
    z-index: 10;
}

.profile-image-container[b-qs8bhzi9r0] {
    position: relative;
}

.profile-image[b-qs8bhzi9r0] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid white;
    overflow: hidden;
    position: relative;
    background: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.profile-image img[b-qs8bhzi9r0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-placeholder[b-qs8bhzi9r0] {
    width: 100%;
    height: 100%;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #6c757d;
}

.verified-badge[b-qs8bhzi9r0] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
  display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.verified-badge i[b-qs8bhzi9r0] {
    color: #198754;
    font-size: 14px;
}

.change-photo[b-qs8bhzi9r0] {
    position: absolute;
    bottom: 0;
    right: 0;
    border: 2px solid white;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0d6efd;
    color: white;
}

.change-photo:hover[b-qs8bhzi9r0] {
    background: #0b5ed7;
    color: white;
 border-color: white;
}

.profile-header-info[b-qs8bhzi9r0] {
    margin-top: 1rem;
}

.profile-name[b-qs8bhzi9r0] {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.profile-name small[b-qs8bhzi9r0] {
    font-size: 1rem;
    font-weight: 400;
    display: block;
    margin-top: 0.25rem;
}

.profile-meta[b-qs8bhzi9r0] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: #6c757d;
}

.profile-meta span[b-qs8bhzi9r0] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.profile-bio[b-qs8bhzi9r0] {
    color: #495057;
    font-size: 1.1rem;
 line-height: 1.6;
    margin-bottom: 0;
    max-width: 600px;
}

.profile-actions[b-qs8bhzi9r0] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.profile-stats[b-qs8bhzi9r0] {
    display: flex;
    gap: 2rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e9ecef;
}

.stat-item[b-qs8bhzi9r0] {
    text-align: center;
}

.stat-value[b-qs8bhzi9r0] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.stat-label[b-qs8bhzi9r0] {
    font-size: 0.9rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.rating-stars[b-qs8bhzi9r0] {
    font-size: 0.8rem;
}

/* Info Cards */
.info-card[b-qs8bhzi9r0] {
  background: white;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.info-card-header[b-qs8bhzi9r0] {
    background: #f8f9fa;
    padding: 1rem 1.25rem;
 border-bottom: 1px solid #e9ecef;
    border-radius: 12px 12px 0 0;
}

.info-card-header h3[b-qs8bhzi9r0] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
}

.info-card-body[b-qs8bhzi9r0] {
    padding: 1.25rem;
}

.bio-text[b-qs8bhzi9r0] {
    line-height: 1.6;
    color: #495057;
    margin-bottom: 1.5rem;
}

.profile-details[b-qs8bhzi9r0] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detail-item[b-qs8bhzi9r0] {
    display: flex;
  align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: #495057;
}

.detail-item i[b-qs8bhzi9r0] {
    width: 20px;
    text-align: center;
    color: #6c757d;
}

.detail-item.verified[b-qs8bhzi9r0] {
    color: #198754;
    font-weight: 500;
}

.profile-tips[b-qs8bhzi9r0] {
    margin-top: 1.5rem;
    padding: 1rem;
    background: #fff8e1;
    border-radius: 8px;
    border-left: 4px solid #ffc107;
}

.tips-list[b-qs8bhzi9r0] {
    margin: 0.5rem 0 0 0;
    padding-left: 1.25rem;
}

.tips-list li[b-qs8bhzi9r0] {
    margin-bottom: 0.5rem;
    color: #6c5b00;
}

.social-links[b-qs8bhzi9r0] {
    display: flex;
flex-direction: column;
    gap: 0.5rem;
}

.social-link[b-qs8bhzi9r0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 6px;
    text-decoration: none;
    color: #495057;
    transition: background-color 0.2s ease;
}

.social-link:hover[b-qs8bhzi9r0] {
    background: #f8f9fa;
    color: #495057;
}

.quick-actions[b-qs8bhzi9r0] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.quick-action-item[b-qs8bhzi9r0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    color: #495057;
    transition: all 0.2s ease;
    border: 1px solid #e9ecef;
}

.quick-action-item:hover[b-qs8bhzi9r0] {
    background: #f8f9fa;
    color: #495057;
    border-color: #dee2e6;
    transform: translateY(-1px);
}

.quick-action-item i[b-qs8bhzi9r0] {
    font-size: 1.1rem;
}

/* Content Tabs */
.content-tabs[b-qs8bhzi9r0] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    overflow: hidden;
}

.content-tabs .nav-tabs[b-qs8bhzi9r0] {
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
    margin: 0;
}

.content-tabs .nav-link[b-qs8bhzi9r0] {
    border: none;
    border-radius: 0;
    color: #6c757d;
    font-weight: 500;
    padding: 1rem 1.5rem;
}

.content-tabs .nav-link.active[b-qs8bhzi9r0] {
    background: white;
    color: #2c3e50;
    border-bottom: 2px solid #0d6efd;
}

.content-tabs .tab-content[b-qs8bhzi9r0] {
    padding: 1.5rem;
}

/* Listings Grid */
.listings-grid[b-qs8bhzi9r0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.listing-card[b-qs8bhzi9r0] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.listing-card:hover[b-qs8bhzi9r0] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.listing-image[b-qs8bhzi9r0] {
    position: relative;
  aspect-ratio: 4/3;
    background: #f8f9fa;
}

.listing-image img[b-qs8bhzi9r0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.no-image[b-qs8bhzi9r0] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
}

.featured-badge[b-qs8bhzi9r0],
.organic-badge[b-qs8bhzi9r0] {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255,193,7,0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    backdrop-filter: blur(4px);
}

.organic-badge[b-qs8bhzi9r0] {
    background: rgba(40,167,69,0.9);
    top: 8px;
    left: 8px;
}

.listing-content[b-qs8bhzi9r0] {
    padding: 1rem;
}

.listing-title[b-qs8bhzi9r0] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.listing-title a[b-qs8bhzi9r0] {
    color: #2c3e50;
    text-decoration: none;
}

.listing-title a:hover[b-qs8bhzi9r0] {
    color: #0d6efd;
}

.listing-price[b-qs8bhzi9r0] {
    font-size: 1.1rem;
    color: #198754;
    font-weight: 600;
 margin-bottom: 0.75rem;
}

.listing-meta[b-qs8bhzi9r0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #6c757d;
}

.listing-actions[b-qs8bhzi9r0] {
    padding: 0.75rem 1rem;
    border-top: 1px solid #f8f9fa;
    display: flex;
    gap: 0.5rem;
}

/* Reviews List */
.reviews-list[b-qs8bhzi9r0] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.review-item[b-qs8bhzi9r0] {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid #e9ecef;
}

.review-header[b-qs8bhzi9r0] {
    display: flex;
    justify-content: space-between;
  align-items: flex-start;
    margin-bottom: 1rem;
}

.reviewer-info[b-qs8bhzi9r0] {
    display: flex;
    gap: 0.75rem;
}

.reviewer-avatar[b-qs8bhzi9r0] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
}

.reviewer-details[b-qs8bhzi9r0] {
    flex: 1;
}

.reviewer-name[b-qs8bhzi9r0] {
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.review-rating[b-qs8bhzi9r0] {
    margin-bottom: 0.25rem;
}

.review-content[b-qs8bhzi9r0] {
    color: #495057;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.review-listing[b-qs8bhzi9r0] {
  margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #dee2e6;
}

/* Activity Content */
.activity-content[b-qs8bhzi9r0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activity-item[b-qs8bhzi9r0] {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.activity-icon[b-qs8bhzi9r0] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.activity-details h5[b-qs8bhzi9r0] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* Empty States */
.empty-content[b-qs8bhzi9r0],
.loading-content[b-qs8bhzi9r0] {
    padding: 2rem 0;
}

/* Loading Skeleton */
.loading-skeleton[b-qs8bhzi9r0] {
    padding: 2rem 0;
}

.skeleton-avatar[b-qs8bhzi9r0] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-qs8bhzi9r0 1.5s infinite;
}

.skeleton-text[b-qs8bhzi9r0] {
    height: 1rem;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-qs8bhzi9r0 1.5s infinite;
    border-radius: 4px;
}

@keyframes loading-b-qs8bhzi9r0 {
    0% {
        background-position: 200% 0;
    }
    100% {
  background-position: -200% 0;
    }
}

/* Responsive Design */
@media (max-width: 991.98px) {
    .profile-stats[b-qs8bhzi9r0] {
        gap: 1.5rem;
    }

    .quick-actions[b-qs8bhzi9r0] {
   grid-template-columns: 1fr;
    }

    .listings-grid[b-qs8bhzi9r0] {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: 1rem;
    }
}

@media (max-width: 767.98px) {
    .profile-cover[b-qs8bhzi9r0] {
        height: 150px;
    }

    .profile-info-section[b-qs8bhzi9r0] {
        padding: 0 1rem 1.5rem 1rem;
        margin-top: -50px;
    }

    .profile-image[b-qs8bhzi9r0] {
        width: 100px;
        height: 100px;
    }

    .profile-name[b-qs8bhzi9r0] {
     font-size: 1.5rem;
    }

    .profile-meta[b-qs8bhzi9r0] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .profile-actions[b-qs8bhzi9r0] {
        flex-direction: column;
  width: 100%;
    }

    .profile-actions .btn[b-qs8bhzi9r0] {
        width: 100%;
    }

    .profile-stats[b-qs8bhzi9r0] {
    gap: 1rem;
    justify-content: space-around;
    }

    .stat-value[b-qs8bhzi9r0] {
        font-size: 1.25rem;
    }

    .listings-grid[b-qs8bhzi9r0] {
 grid-template-columns: 1fr;
    }

    .review-header[b-qs8bhzi9r0] {
  flex-direction: column;
      gap: 0.75rem;
    }

    .content-tabs .nav-link[b-qs8bhzi9r0] {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

 .content-tabs .tab-content[b-qs8bhzi9r0] {
        padding: 1rem;
    }
}

@media (max-width: 575.98px) {
    .profile-info-section[b-qs8bhzi9r0] {
        padding: 0 1rem 1rem 1rem;
    }

    .profile-image[b-qs8bhzi9r0] {
      width: 80px;
 height: 80px;
    }

    .change-photo[b-qs8bhzi9r0] {
        width: 28px;
     height: 28px;
    }

    .profile-name[b-qs8bhzi9r0] {
        font-size: 1.25rem;
    }

    .profile-stats[b-qs8bhzi9r0] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .stat-item[b-qs8bhzi9r0] {
        flex: 1;
        min-width: calc(50% - 0.375rem);
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .profile-page[b-qs8bhzi9r0] {
    background: #121212;
    }

    .profile-header-card[b-qs8bhzi9r0],
    .info-card[b-qs8bhzi9r0],
    .content-tabs[b-qs8bhzi9r0],
    .listing-card[b-qs8bhzi9r0] {
    background: #1e1e1e;
        border-color: #333;
        color: #fff;
    }

    .info-card-header[b-qs8bhzi9r0],
    .content-tabs .nav-tabs[b-qs8bhzi9r0] {
   background: #2d2d2d;
    }

    .profile-name[b-qs8bhzi9r0],
    .reviewer-name[b-qs8bhzi9r0],
  .listing-title a[b-qs8bhzi9r0] {
        color: #fff;
    }

    .review-item[b-qs8bhzi9r0],
    .activity-item[b-qs8bhzi9r0] {
        background: #2d2d2d;
        border-color: #333;
    }

    .profile-tips[b-qs8bhzi9r0] {
background: #2d2d00;
    border-color: #ffc107;
    }
}

/* Original styles (keeping compatibility) */
.card[b-qs8bhzi9r0] {
    border: none;
    border-radius: 12px;
 box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    background: white;
    overflow: hidden;
}

.card-header[b-qs8bhzi9r0] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #e9ecef;
    padding: 1.5rem 1.5rem 1rem;
}

.card-header h2[b-qs8bhzi9r0] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
}

.card-body[b-qs8bhzi9r0] {
    padding: 1.5rem;
}

.bio[b-qs8bhzi9r0] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #495057;
    margin-bottom: 1.5rem;
}

.verification-badge[b-qs8bhzi9r0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.verification-badge:last-child[b-qs8bhzi9r0] {
    margin-bottom: 0;
}

.listing-card-simple[b-qs8bhzi9r0] {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
}

.listing-card-simple:hover[b-qs8bhzi9r0] {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
/* _content/AgriConnect.BlazorApp/Pages/Verification.razor.rz.scp.css */
/* Verification.razor.css */

.verification-page[b-sw67gdluvp] {
    min-height: 100vh;
    background-color: var(--bs-gray-100);
}

/* Progress Steps */
.verification-progress[b-sw67gdluvp] {
    margin-bottom: var(--spacing-xl);
}

.progress-steps[b-sw67gdluvp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

.progress-step[b-sw67gdluvp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.step-number[b-sw67gdluvp] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: white;
    border: 2px solid var(--bs-gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    transition: all 0.3s ease;
}

.progress-step.active .step-number[b-sw67gdluvp] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

.progress-step.completed .step-number[b-sw67gdluvp] {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
    color: white;
}

.step-label[b-sw67gdluvp] {
    font-size: 0.85rem;
    color: var(--bs-gray-600);
    transition: color 0.3s ease;
}

.progress-step.active .step-label[b-sw67gdluvp] {
    color: var(--bs-primary);
    font-weight: 500;
}

.progress-step.completed .step-label[b-sw67gdluvp] {
    color: var(--bs-success);
}

.progress-line[b-sw67gdluvp] {
    flex: 1;
    height: 2px;
    background-color: var(--bs-gray-300);
    margin: 0 -20px;
    position: relative;
    top: -40px;
    transition: background-color 0.3s ease;
}

.progress-line.completed[b-sw67gdluvp] {
    background-color: var(--bs-success);
}

/* Verification Content */
.verification-content[b-sw67gdluvp] {
    background-color: white;
    border-radius: var(--spacing-md);
    padding: var(--spacing-xl);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.verification-step h2[b-sw67gdluvp] {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
}

/* Document Upload */
.document-upload-list[b-sw67gdluvp] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.document-upload[b-sw67gdluvp] {
    border: 2px dashed var(--bs-gray-300);
    border-radius: var(--spacing-md);
    padding: var(--spacing-lg);
    transition: all 0.3s ease;
}

.document-upload:hover[b-sw67gdluvp] {
    border-color: var(--bs-primary);
}

.document-upload.complete[b-sw67gdluvp] {
    border-style: solid;
    border-color: var(--bs-success);
    background-color: var(--bs-success-subtle);
}

.upload-content h5[b-sw67gdluvp] {
    margin: 0 0 var(--spacing-xs);
}

.upload-preview[b-sw67gdluvp] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background-color: white;
    border-radius: var(--spacing-sm);
}

.upload-preview i[b-sw67gdluvp] {
    color: var(--bs-primary);
}

/* Review Section */
.review-section[b-sw67gdluvp] {
    margin-bottom: var(--spacing-lg);
}

.review-section h5[b-sw67gdluvp] {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--bs-gray-200);
}

.review-details[b-sw67gdluvp] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.review-item[b-sw67gdluvp] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.review-item .label[b-sw67gdluvp] {
    color: var(--bs-gray-600);
    font-size: 0.9rem;
}

.review-item .value[b-sw67gdluvp] {
    font-weight: 500;
}

/* Certification List */
.certification-list[b-sw67gdluvp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-sm);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .verification-page[b-sw67gdluvp] {
        background-color: white;
    }

    .verification-content[b-sw67gdluvp] {
        box-shadow: none;
        padding: var(--spacing-md);
    }

    .progress-steps[b-sw67gdluvp] {
        padding: 0 var(--spacing-md);
    }

    .step-label[b-sw67gdluvp] {
        font-size: 0.75rem;
        text-align: center;
    }

    .document-upload[b-sw67gdluvp] {
        padding: var(--spacing-md);
    }

    .certification-list[b-sw67gdluvp] {
        grid-template-columns: 1fr;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .verification-page[b-sw67gdluvp] {
        background-color: var(--dark-bg);
    }

    .verification-content[b-sw67gdluvp] {
        background-color: var(--dark-surface);
    }

    .step-number[b-sw67gdluvp] {
        background-color: var(--dark-surface);
        border-color: var(--bs-gray-700);
    }

    .document-upload[b-sw67gdluvp] {
        border-color: var(--bs-gray-700);
    }

    .document-upload:hover[b-sw67gdluvp] {
        border-color: var(--bs-primary);
    }

    .document-upload.complete[b-sw67gdluvp] {
        background-color: rgba(var(--bs-success-rgb), 0.1);
    }

    .upload-preview[b-sw67gdluvp] {
        background-color: var(--dark-surface);
    }

    .review-section h5[b-sw67gdluvp] {
        border-color: var(--bs-gray-700);
    }

    .review-item .label[b-sw67gdluvp] {
        color: var(--bs-gray-400);
    }
}
/* _content/AgriConnect.BlazorApp/Shared/AppLayout.razor.rz.scp.css */
.page[b-c5nuy69dza] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.sidebar[b-c5nuy69dza] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
    width: 260px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
    z-index: 1000;
}

main[b-c5nuy69dza] {
    flex: 1;
    margin-left: 260px;
    display: flex;
    flex-direction: column;
}

.top-row[b-c5nuy69dza] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    height: 3.5rem;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 999;
}

.top-row .brand-link[b-c5nuy69dza] {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    font-size: 1.1rem;
}

.top-row .brand-link:hover[b-c5nuy69dza] {
    text-decoration: none;
}

.top-row-actions[b-c5nuy69dza] {
    display: flex;
    align-items: center;
}

.content[b-c5nuy69dza] {
    flex: 1;
    padding-top: 1rem;
}

.px-4[b-c5nuy69dza] {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .sidebar[b-c5nuy69dza] {
        width: 100%;
        height: auto;
        position: relative;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .sidebar.show[b-c5nuy69dza] {
        transform: translateX(0);
    }
    
    main[b-c5nuy69dza] {
        margin-left: 0;
    }
    
    .top-row-actions[b-c5nuy69dza] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* Error UI styling */
#blazor-error-ui[b-c5nuy69dza] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-c5nuy69dza] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* _content/AgriConnect.BlazorApp/Shared/LandingNav.razor.rz.scp.css */
.landing-nav[b-fw0u40e3cs] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 10000;
    transition: all 0.3s ease;
    overflow-x: hidden; /* Prevent horizontal overflow */
}

.landing-nav.scrolled[b-fw0u40e3cs] {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* Container inside nav */
.landing-nav .container[b-fw0u40e3cs] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
    box-sizing: border-box;
}

.nav-content[b-fw0u40e3cs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    min-height: 56px;
    width: 100%;
    gap: 0.5rem;
}

.nav-brand[b-fw0u40e3cs] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-width: 0; /* Allow shrinking */
}

.brand-link[b-fw0u40e3cs] {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #1f2937;
    font-weight: 700;
    font-size: 1.5rem;
    gap: 0.75rem;
}

.brand-logo[b-fw0u40e3cs] {
    height: 45px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.brand-link:hover .brand-logo[b-fw0u40e3cs] {
    transform: scale(1.05);
}

.brand-icon[b-fw0u40e3cs] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #059669, #10b981);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
}

.brand-text[b-fw0u40e3cs] {
    color: #059669;
}

.nav-menu[b-fw0u40e3cs] {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-link[b-fw0u40e3cs] {
    color: #6b7280;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.3s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-link:hover[b-fw0u40e3cs],
.nav-link.active[b-fw0u40e3cs] {
    color: #059669;
}

.nav-link.active[b-fw0u40e3cs]::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 2px;
    background: #059669;
    border-radius: 1px;
}

.nav-actions[b-fw0u40e3cs] {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%; /* Match parent height */
}

.nav-actions .nav-link[b-fw0u40e3cs] {
    padding: 0.5rem 1rem;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    line-height: 1;
    text-align: center;
}

.nav-actions .nav-link:hover[b-fw0u40e3cs] {
    background: rgba(5, 150, 105, 0.1);
}

/* Dashboard link for authenticated users */
.dashboard-link[b-fw0u40e3cs] {
    background: rgba(5, 150, 105, 0.1);
    color: #059669 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.dashboard-link:hover[b-fw0u40e3cs] {
    background: rgba(5, 150, 105, 0.15) !important;
}

/* User Menu */
.user-menu[b-fw0u40e3cs] {
    position: relative;
}

.user-menu-trigger[b-fw0u40e3cs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-menu-trigger:hover[b-fw0u40e3cs] {
    background: #e5e7eb;
    border-color: #d1d5db;
}

.user-avatar[b-fw0u40e3cs] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #059669, #10b981);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.75rem;
}

.user-dropdown[b-fw0u40e3cs] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 220px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid #e5e7eb;
    overflow: hidden;
    z-index: 1001;
    animation: dropdownSlide-b-fw0u40e3cs 0.2s ease;
}

@keyframes dropdownSlide-b-fw0u40e3cs {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-header[b-fw0u40e3cs] {
    padding: 1rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.user-name[b-fw0u40e3cs] {
    display: block;
    font-weight: 600;
    color: #1f2937;
    font-size: 0.9375rem;
}

.user-email[b-fw0u40e3cs] {
    display: block;
    font-size: 0.8125rem;
    color: #6b7280;
    margin-top: 0.125rem;
}

.dropdown-divider[b-fw0u40e3cs] {
    height: 1px;
    background: #e5e7eb;
    margin: 0;
}

.dropdown-item[b-fw0u40e3cs] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #374151;
    text-decoration: none;
    font-size: 0.875rem;
    transition: background 0.15s ease;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.dropdown-item:hover[b-fw0u40e3cs] {
    background: #f3f4f6;
    color: #059669;
}

.dropdown-item.logout[b-fw0u40e3cs] {
    color: #dc2626;
}

.dropdown-item.logout:hover[b-fw0u40e3cs] {
    background: #fef2f2;
    color: #dc2626;
}

.dropdown-form[b-fw0u40e3cs] {
    margin: 0;
}

.dropdown-backdrop[b-fw0u40e3cs] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

/* Sign in / Get Started buttons */
.signin-link[b-fw0u40e3cs] {
    font-weight: 500;
}

.get-started-btn[b-fw0u40e3cs] {
    padding: 0.5rem 1.5rem !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
    text-align: center !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, #059669, #10b981) !important;
    color: white !important;
}

.get-started-btn:hover[b-fw0u40e3cs] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.nav-actions .btn[b-fw0u40e3cs] {
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    text-align: center;
    min-height: 40px;
    box-sizing: border-box;
}

.nav-actions .btn-primary[b-fw0u40e3cs] {
    background: linear-gradient(135deg, #059669, #10b981);
    color: white;
}

.nav-actions .btn-primary:hover[b-fw0u40e3cs] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

/* Mobile Toggle Button */
.mobile-toggle[b-fw0u40e3cs] {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: #059669;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

/* Hide desktop elements on mobile */
.desktop-only[b-fw0u40e3cs] {
    display: flex;
}

/* Mobile Panel Styles */
.mobile-panel-content[b-fw0u40e3cs] {
    padding: 1rem;
}

.mobile-nav-list[b-fw0u40e3cs] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mobile-nav-item[b-fw0u40e3cs] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    color: #374151;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.mobile-nav-item:hover[b-fw0u40e3cs],
.mobile-nav-item:active[b-fw0u40e3cs] {
    background: #f3f4f6;
    color: #059669;
}

.mobile-nav-item.active[b-fw0u40e3cs] {
    background: #f0fdf4;
    color: #059669;
}

.mobile-nav-item.primary[b-fw0u40e3cs] {
    background: linear-gradient(135deg, #059669, #10b981);
    color: white;
    margin-top: 0.5rem;
}

.mobile-nav-item.primary:hover[b-fw0u40e3cs],
.mobile-nav-item.primary:active[b-fw0u40e3cs] {
    opacity: 0.9;
    color: white;
}

.mobile-nav-item.logout[b-fw0u40e3cs] {
    color: #dc2626;
}

.mobile-nav-item.logout:hover[b-fw0u40e3cs] {
    background: #fef2f2;
    color: #dc2626;
}

.mobile-nav-divider[b-fw0u40e3cs] {
    height: 1px;
    background: #e5e7eb;
    margin: 0.75rem 0;
}

.mobile-logout-form[b-fw0u40e3cs] {
    margin: 0;
    width: 100%;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .landing-nav[b-fw0u40e3cs] {
        padding: 0;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    .landing-nav .container[b-fw0u40e3cs] {
        padding: 0 0.75rem;
        max-width: 100%;
        width: 100%;
    }
    
    .nav-content[b-fw0u40e3cs] {
        padding: 0.5rem 0;
        min-height: 52px;
        gap: 0.5rem;
    }
    
    /* Hide desktop elements on mobile */
    .desktop-only[b-fw0u40e3cs] {
        display: none !important;
    }
    
    /* Show mobile toggle */
    .mobile-toggle[b-fw0u40e3cs] {
        display: flex;
    }
    
    /* Hide the old desktop nav-menu on mobile */
    .nav-menu.desktop-only[b-fw0u40e3cs] {
        display: none !important;
    }
    
    .nav-actions[b-fw0u40e3cs] {
        gap: 0.5rem;
    }
    
    .nav-content[b-fw0u40e3cs] {
        padding: 0.5rem 0;
        min-height: 56px;
    }

    .user-dropdown[b-fw0u40e3cs] {
        right: -0.5rem;
        min-width: 240px;
    }
    
    .brand-link[b-fw0u40e3cs] {
        font-size: 1.25rem;
    }
    
    .brand-logo[b-fw0u40e3cs] {
        height: 36px;
    }
    
    /* User menu adjustments */
    .user-avatar[b-fw0u40e3cs] {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }
    
    .user-menu-trigger[b-fw0u40e3cs] {
        padding: 0.25rem 0.5rem;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .nav-content[b-fw0u40e3cs] {
        min-height: 52px;
    }
    
    .brand-logo[b-fw0u40e3cs] {
        height: 32px;
    }
    
    .brand-link[b-fw0u40e3cs] {
        font-size: 1.125rem;
    }
}

/* Safe area insets for notched devices */
@supports (padding-top: env(safe-area-inset-top)) {
    .landing-nav[b-fw0u40e3cs] {
        padding-top: env(safe-area-inset-top);
    }
}

/* Touch device improvements */
@media (hover: none) and (pointer: coarse) {
    .nav-link[b-fw0u40e3cs] {
        min-height: 44px;
    }
    
    .mobile-toggle[b-fw0u40e3cs] {
        min-width: 48px;
        min-height: 48px;
    }
    
    .user-menu-trigger[b-fw0u40e3cs] {
        min-height: 44px;
    }
    
    .mobile-signin-btn:active[b-fw0u40e3cs],
    .mobile-getstarted-btn:active[b-fw0u40e3cs],
    .mobile-dashboard-btn:active[b-fw0u40e3cs] {
        transform: scale(0.98);
    }
}

/* Safe area insets for notched devices */
@supports (padding-top: env(safe-area-inset-top)) {
    .landing-nav[b-fw0u40e3cs] {
        padding-top: env(safe-area-inset-top);
    }
}

/* Touch device improvements */
@media (hover: none) and (pointer: coarse) {
    .nav-link[b-fw0u40e3cs] {
        min-height: 44px;
    }
    
    .nav-toggle[b-fw0u40e3cs] {
        min-width: 48px;
        min-height: 48px;
    }
    
    .user-menu-trigger[b-fw0u40e3cs] {
        min-height: 44px;
    }
}

/* Mobile menu open state */
.nav-toggle.open .hamburger-line:nth-child(1)[b-fw0u40e3cs] {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.nav-toggle.open .hamburger-line:nth-child(2)[b-fw0u40e3cs] {
    opacity: 0;
}

.nav-toggle.open .hamburger-line:nth-child(3)[b-fw0u40e3cs] {
    transform: rotate(45deg) translate(-5px, -6px);
}
/* _content/AgriConnect.BlazorApp/Shared/NavMenu.razor.rz.scp.css */
/* Main Navigation Styles */
.main-navigation[b-lpz76p3ugh] {
    background: white;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.nav-container[b-lpz76p3ugh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
    height: 4rem;
}

/* Brand/Logo */
.nav-brand[b-lpz76p3ugh] {
    flex-shrink: 0;
}

.brand-link[b-lpz76p3ugh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: #059669;
    font-weight: 700;
    font-size: 1.25rem;
    transition: color 0.2s ease;
}

.brand-link:hover[b-lpz76p3ugh] {
    color: #047857;
    text-decoration: none;
}

.brand-icon[b-lpz76p3ugh] {
    width: 2rem;
    height: 2rem;
    stroke-width: 2;
}

.brand-text[b-lpz76p3ugh] {
    letter-spacing: -0.025em;
}

/* Desktop Navigation Menu */
.nav-menu[b-lpz76p3ugh] {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex: 1;
    justify-content: center;
}

.nav-link[b-lpz76p3ugh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    color: #6b7280;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    position: relative;
}

.nav-link:hover[b-lpz76p3ugh] {
    color: #059669;
    background: rgba(5, 150, 105, 0.05);
    text-decoration: none;
}

.nav-link.active[b-lpz76p3ugh] {
    color: #059669;
    background: rgba(5, 150, 105, 0.1);
}

.nav-icon[b-lpz76p3ugh] {
    width: 1.125rem;
    height: 1.125rem;
    stroke-width: 2;
}

.message-badge[b-lpz76p3ugh] {
    background: #ef4444;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 10px;
    min-width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.25rem;
}

/* Navigation Actions */
.nav-actions[b-lpz76p3ugh] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

/* Create Listing Button */
.create-listing-btn[b-lpz76p3ugh] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: #059669;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
}

.create-listing-btn:hover[b-lpz76p3ugh] {
    background: #047857;
    text-decoration: none;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.btn-icon[b-lpz76p3ugh] {
    width: 1rem;
    height: 1rem;
    stroke-width: 2;
}

/* User Menu */
.user-menu[b-lpz76p3ugh] {
    position: relative;
}

.user-avatar[b-lpz76p3ugh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-avatar:hover[b-lpz76p3ugh] {
    background: #f9fafb;
}

.avatar-image[b-lpz76p3ugh] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-placeholder[b-lpz76p3ugh] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

.dropdown-arrow[b-lpz76p3ugh] {
    width: 1rem;
    height: 1rem;
    stroke-width: 2;
    color: #6b7280;
    transition: transform 0.2s ease;
}

.user-avatar:hover .dropdown-arrow[b-lpz76p3ugh] {
    transform: rotate(180deg);
}

/* User Dropdown */
.user-dropdown[b-lpz76p3ugh] {
    position: absolute;
    top: 100%;
    right: 0;
    width: 280px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    margin-top: 0.5rem;
    overflow: hidden;
}

.dropdown-header[b-lpz76p3ugh] {
    padding: 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    background: #fafbfc;
}

.user-info[b-lpz76p3ugh] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.user-name[b-lpz76p3ugh] {
    font-weight: 600;
    color: #1f2937;
    font-size: 0.875rem;
}

.user-email[b-lpz76p3ugh] {
    font-size: 0.75rem;
    color: #6b7280;
}

.dropdown-section[b-lpz76p3ugh] {
    padding: 0.5rem 0;
}

.dropdown-section:not(:last-child)[b-lpz76p3ugh] {
    border-bottom: 1px solid #e5e7eb;
}

.dropdown-item[b-lpz76p3ugh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    color: #374151;
    font-size: 0.875rem;
    border: none;
    background: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-align: left;
}

.dropdown-item:hover[b-lpz76p3ugh] {
    background: #f9fafb;
    color: #059669;
    text-decoration: none;
}

.item-icon[b-lpz76p3ugh] {
    width: 1.125rem;
    height: 1.125rem;
    stroke-width: 2;
    color: #6b7280;
    flex-shrink: 0;
}

.dropdown-item:hover .item-icon[b-lpz76p3ugh] {
    color: #059669;
}

.logout-item[b-lpz76p3ugh] {
    color: #ef4444;
}

.logout-item:hover[b-lpz76p3ugh] {
    background: #fef2f2;
    color: #dc2626;
}

.logout-item .item-icon[b-lpz76p3ugh] {
    color: #ef4444;
}

.logout-item:hover .item-icon[b-lpz76p3ugh] {
    color: #dc2626;
}

/* Auth Buttons */
.auth-buttons[b-lpz76p3ugh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.login-btn[b-lpz76p3ugh] {
    padding: 0.5rem 1rem;
    color: #6b7280;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.login-btn:hover[b-lpz76p3ugh] {
    color: #059669;
    background: rgba(5, 150, 105, 0.05);
    text-decoration: none;
}

.register-btn[b-lpz76p3ugh] {
    padding: 0.5rem 1rem;
    background: #059669;
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.register-btn:hover[b-lpz76p3ugh] {
    background: #047857;
    text-decoration: none;
    color: white;
    transform: translateY(-1px);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle[b-lpz76p3ugh] {
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: transparent;
    color: #6b7280;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-menu-toggle:hover[b-lpz76p3ugh] {
    background: #f3f4f6;
    color: #374151;
}

.mobile-menu-toggle svg[b-lpz76p3ugh] {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2;
}

/* Mobile Menu */
.mobile-menu[b-lpz76p3ugh] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 40;
}

.mobile-nav-links[b-lpz76p3ugh] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mobile-nav-link[b-lpz76p3ugh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    color: #374151;
    text-decoration: none;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
}

.mobile-nav-link:hover[b-lpz76p3ugh] {
    background: #f9fafb;
    color: #059669;
    text-decoration: none;
}

.mobile-nav-link.active[b-lpz76p3ugh] {
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
}

.mobile-nav-link.create-mobile[b-lpz76p3ugh] {
    background: #059669;
    color: white;
    margin-top: 0.5rem;
}

.mobile-nav-link.create-mobile:hover[b-lpz76p3ugh] {
    background: #047857;
    color: white;
}

.mobile-nav-link.register-mobile[b-lpz76p3ugh] {
    background: #059669;
    color: white;
    margin-top: 0.5rem;
}

.mobile-nav-link.register-mobile:hover[b-lpz76p3ugh] {
    background: #047857;
    color: white;
}

/* Mobile Overlay */
.mobile-overlay[b-lpz76p3ugh] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 30;
}

/* Responsive Design */
.desktop-only[b-lpz76p3ugh] {
    display: block;
}

.mobile-only[b-lpz76p3ugh] {
    display: none;
}

@media (max-width: 1024px) {
    .nav-menu[b-lpz76p3ugh] {
        gap: 1.5rem;
    }
    
    .create-listing-btn span[b-lpz76p3ugh] {
        display: none;
    }
}

@media (max-width: 768px) {
    .nav-container[b-lpz76p3ugh] {
        padding: 0 1rem;
        height: 3.5rem;
    }
    
    .desktop-only[b-lpz76p3ugh] {
        display: none;
    }
    
    .mobile-only[b-lpz76p3ugh] {
        display: flex;
    }
    
    .nav-menu[b-lpz76p3ugh] {
        display: none;
    }
    
    .brand-text[b-lpz76p3ugh] {
        font-size: 1.125rem;
    }
    
    .brand-icon[b-lpz76p3ugh] {
        width: 1.75rem;
        height: 1.75rem;
    }
    
    .user-dropdown[b-lpz76p3ugh] {
        width: calc(100vw - 2rem);
        right: -1rem;
        max-width: 320px;
    }
    
    .auth-buttons[b-lpz76p3ugh] {
        gap: 0.5rem;
    }
    
    .login-btn[b-lpz76p3ugh],
    .register-btn[b-lpz76p3ugh] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }
}

@media (max-width: 480px) {
    .nav-container[b-lpz76p3ugh] {
        padding: 0 0.75rem;
    }
    
    .nav-actions[b-lpz76p3ugh] {
        gap: 0.5rem;
    }
    
    .create-listing-btn[b-lpz76p3ugh] {
        padding: 0.5rem;
        border-radius: 6px;
    }
    
    .auth-buttons[b-lpz76p3ugh] {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .login-btn[b-lpz76p3ugh],
    .register-btn[b-lpz76p3ugh] {
        padding: 0.375rem 0.625rem;
        font-size: 0.75rem;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .main-navigation[b-lpz76p3ugh] {
        background: #1e293b;
        border-color: #374151;
    }
    
    .brand-link[b-lpz76p3ugh] {
        color: #10b981;
    }
    
    .brand-link:hover[b-lpz76p3ugh] {
        color: #059669;
    }
    
    .nav-link[b-lpz76p3ugh] {
        color: #94a3b8;
    }
    
    .nav-link:hover[b-lpz76p3ugh],
    .nav-link.active[b-lpz76p3ugh] {
        color: #10b981;
 background: rgba(16, 185, 129, 0.1);
    }
    
    .user-avatar:hover[b-lpz76p3ugh] {
 background: #374151;
    }
 
    .user-dropdown[b-lpz76p3ugh],
    .mobile-menu[b-lpz76p3ugh] {
        background: #1e293b;
        border-color: #374151;
    }
    
    .dropdown-header[b-lpz76p3ugh] {
        background: #0f172a;
        border-color: #374151;
    }
    
    .user-name[b-lpz76p3ugh] {
     color: #e5e7eb;
    }
    
  .user-email[b-lpz76p3ugh] {
        color: #94a3b8;
    }
    
    .dropdown-item[b-lpz76p3ugh],
.mobile-nav-link[b-lpz76p3ugh] {
        color: #cbd5e1;
    }
    
    .dropdown-item:hover[b-lpz76p3ugh],
    .mobile-nav-link:hover[b-lpz76p3ugh] {
        background: #374151;
        color: #10b981;
    }
    
    .mobile-nav-link.active[b-lpz76p3ugh] {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }
  
    .login-btn[b-lpz76p3ugh] {
        color: #94a3b8;
}
    
    .login-btn:hover[b-lpz76p3ugh] {
        color: #10b981;
        background: rgba(16, 185, 129, 0.1);
    }
    
    .mobile-menu-toggle[b-lpz76p3ugh] {
 color: #94a3b8;
    }
    
    .mobile-menu-toggle:hover[b-lpz76p3ugh] {
        background: #374151;
        color: #e5e7eb;
    }
}

/* Admin Section Styles */
.dropdown-section-header[b-lpz76p3ugh] {
    padding: 0.5rem 1.25rem 0.25rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
}

.section-title[b-lpz76p3ugh] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
}

.admin-item[b-lpz76p3ugh] {
    color: #7c3aed;
    font-weight: 500;
}

.admin-item:hover[b-lpz76p3ugh] {
    background: #f3f4f6;
    color: #6d28d9;
}

.admin-item .item-icon[b-lpz76p3ugh] {
    color: #7c3aed;
}

.admin-item:hover .item-icon[b-lpz76p3ugh] {
    color: #6d28d9;
}

/* Dark mode admin styles */
@media (prefers-color-scheme: dark) {
    .dropdown-section-header[b-lpz76p3ugh] {
        background: #0f172a;
        border-color: #374151;
    }
    
    .section-title[b-lpz76p3ugh] {
        color: #9ca3af;
    }
    
    .admin-item[b-lpz76p3ugh] {
        color: #a78bfa;
    }
    
    .admin-item:hover[b-lpz76p3ugh] {
        background: #374151;
        color: #c4b5fd;
    }
    
    .admin-item .item-icon[b-lpz76p3ugh] {
        color: #a78bfa;
    }
    
    .admin-item:hover .item-icon[b-lpz76p3ugh] {
        color: #c4b5fd;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .main-navigation[b-lpz76p3ugh] {
        border-width: 2px;
    }
    
    .nav-link[b-lpz76p3ugh],
    .dropdown-item[b-lpz76p3ugh],
    .mobile-nav-link[b-lpz76p3ugh] {
 border: 1px solid transparent;
  }
    
    .nav-link:focus[b-lpz76p3ugh],
    .dropdown-item:focus[b-lpz76p3ugh],
    .mobile-nav-link:focus[b-lpz76p3ugh] {
        border-color: #059669;
        outline: 2px solid #059669;
    }
    
    .admin-item:focus[b-lpz76p3ugh] {
        border-color: #7c3aed;
        outline: 2px solid #7c3aed;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .nav-link[b-lpz76p3ugh],
    .dropdown-item[b-lpz76p3ugh],
    .mobile-nav-link[b-lpz76p3ugh],
    .create-listing-btn[b-lpz76p3ugh],
    .login-btn[b-lpz76p3ugh],
    .register-btn[b-lpz76p3ugh],
    .user-avatar[b-lpz76p3ugh],
    .mobile-menu-toggle[b-lpz76p3ugh] {
        transition: none;
    }
    
    .dropdown-arrow[b-lpz76p3ugh] {
        transition: none;
    }
    
    .create-listing-btn:hover[b-lpz76p3ugh],
    .register-btn:hover[b-lpz76p3ugh] {
        transform: none;
    }
}
/* _content/AgriConnect.BlazorApp/Shared/Toast.razor.rz.scp.css */
/* Toast.razor.css */

.toast-container[b-3queyrzv9x] {
    z-index: 1055; /* Higher than Bootstrap modals */
    max-width: 400px;
    min-width: 300px;
}

.toast[b-3queyrzv9x] {
    margin-bottom: 0.75rem;
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(10px);
    animation: slideInRight-b-3queyrzv9x 0.3s ease-out;
    overflow: hidden;
    position: relative;
}

.toast[b-3queyrzv9x]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: rgba(255, 255, 255, 0.8);
}

.toast.show[b-3queyrzv9x] {
    display: block;
}

.toast-header[b-3queyrzv9x] {
    padding: 1rem 1rem 0.5rem;
    border-bottom: none;
    background: transparent !important;
    align-items: center;
    border-radius: 12px 12px 0 0;
}

.toast-header strong[b-3queyrzv9x] {
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.toast-header small[b-3queyrzv9x] {
    font-size: 0.75rem;
    opacity: 0.8;
}

.toast-header i[b-3queyrzv9x] {
    font-size: 1.1rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.toast-body[b-3queyrzv9x] {
    padding: 0.5rem 1rem 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.95);
}

.btn-close-white[b-3queyrzv9x] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2rem;
    line-height: 1;
    padding: 0.25rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close-white:hover[b-3queyrzv9x] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    transform: scale(1.1);
}

.btn-close-white:active[b-3queyrzv9x] {
    transform: scale(0.95);
}

/* Success Toast */
.toast.bg-success[b-3queyrzv9x] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

.toast.bg-success[b-3queyrzv9x]::before {
    background: #34d399;
}

/* Error Toast */
.toast.bg-danger[b-3queyrzv9x] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
}

.toast.bg-danger[b-3queyrzv9x]::before {
    background: #f87171;
}

/* Warning Toast */
.toast.bg-warning[b-3queyrzv9x] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

.toast.bg-warning[b-3queyrzv9x]::before {
    background: #fbbf24;
}

.toast.bg-warning .toast-header[b-3queyrzv9x],
.toast.bg-warning .toast-body[b-3queyrzv9x] {
    color: #1f2937 !important;
}

.toast.bg-warning .btn-close-white[b-3queyrzv9x] {
    color: rgba(31, 41, 55, 0.8) !important;
}

.toast.bg-warning .btn-close-white:hover[b-3queyrzv9x] {
    background: rgba(31, 41, 55, 0.1);
    color: #1f2937 !important;
}

/* Info Toast */
.toast.bg-info[b-3queyrzv9x] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
}

.toast.bg-info[b-3queyrzv9x]::before {
    background: #60a5fa;
}

/* Animations */
@keyframes slideInRight-b-3queyrzv9x {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight-b-3queyrzv9x {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast.removing[b-3queyrzv9x] {
    animation: slideOutRight-b-3queyrzv9x 0.3s ease-in forwards;
}

/* Progress bar for auto-dismiss */
.toast-progress[b-3queyrzv9x] {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    animation: progressBar-b-3queyrzv9x 5s linear forwards;
    border-radius: 0 0 12px 12px;
}

@keyframes progressBar-b-3queyrzv9x {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

/* Responsive Design */
@media (max-width: 576px) {
    .toast-container[b-3queyrzv9x] {
        position: fixed !important;
        top: 1rem !important;
        bottom: auto !important;
        left: 1rem !important;
        right: 1rem !important;
        end: auto !important;
        max-width: none;
        min-width: auto;
    }

    .toast[b-3queyrzv9x] {
        margin-bottom: 0.5rem;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }

    .toast-header[b-3queyrzv9x] {
        padding: 0.75rem 0.75rem 0.5rem;
    }

    .toast-body[b-3queyrzv9x] {
        padding: 0.5rem 0.75rem 0.75rem;
        font-size: 0.85rem;
    }

    .toast-header i[b-3queyrzv9x] {
        font-size: 1rem;
    }

    .btn-close-white[b-3queyrzv9x] {
        width: 22px;
        height: 22px;
        font-size: 1.1rem;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .toast[b-3queyrzv9x] {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }

    /* Enhance shadows in dark mode */
    .toast.bg-success[b-3queyrzv9x] {
        box-shadow: 0 8px 32px rgba(16, 185, 129, 0.2);
    }

    .toast.bg-danger[b-3queyrzv9x] {
        box-shadow: 0 8px 32px rgba(239, 68, 68, 0.2);
    }

    .toast.bg-warning[b-3queyrzv9x] {
        box-shadow: 0 8px 32px rgba(245, 158, 11, 0.2);
    }

    .toast.bg-info[b-3queyrzv9x] {
        box-shadow: 0 8px 32px rgba(59, 130, 246, 0.2);
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .toast[b-3queyrzv9x] {
        border: 2px solid rgba(255, 255, 255, 0.8);
    }

    .toast[b-3queyrzv9x]::before {
        width: 6px;
        background: white;
    }

    .btn-close-white[b-3queyrzv9x] {
        border: 1px solid rgba(255, 255, 255, 0.5);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .toast[b-3queyrzv9x] {
        animation: none;
    }

    .toast-progress[b-3queyrzv9x] {
        animation: none;
    }

    .btn-close-white[b-3queyrzv9x] {
        transition: none;
    }

    .btn-close-white:hover[b-3queyrzv9x] {
        transform: none;
    }

    .btn-close-white:active[b-3queyrzv9x] {
        transform: none;
    }
}

/* Print styles */
@media print {
    .toast-container[b-3queyrzv9x] {
        display: none;
    }
}